/* The wrapper only anchors the control and its popover; the button is the sole visual surface. */
.msgr-music{position:fixed!important;left:var(--msgr-radio-left,max(24px,calc((100vw - 680px)/2 + 18px)))!important;right:auto!important;bottom:var(--msgr-radio-bottom,calc(118px + env(safe-area-inset-bottom)))!important;z-index:1000;display:flex;align-items:center;direction:ltr;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;touch-action:manipulation}
.msgr-music .msgr-music-toggle{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:32px!important;min-width:32px!important;height:29px!important;margin:0!important;padding:6px!important;border:1px solid rgba(87,134,113,.24)!important;border-radius:10px!important;background:rgba(246,250,248,.92)!important;color:#35735c!important;box-shadow:0 3px 12px #12352810!important;transform:scale(.78);transform-origin:center bottom;opacity:.68;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .36s cubic-bezier(.22,1,.36,1),opacity .4s,background .4s,border-color .4s,box-shadow .4s}
.msgr-music.is-connected .msgr-music-toggle{transform:scale(1);opacity:1;background:rgba(233,246,238,.95)!important;border-color:rgba(41,128,99,.3)!important}
.msgr-music.is-playing .msgr-music-toggle{color:#23846a!important;box-shadow:0 3px 14px #388b6b18!important}
.msgr-equalizer{display:flex;align-items:center;justify-content:center;gap:3px;height:18px;width:100%}
.msgr-equalizer i{display:block;width:3px;height:16px;border-radius:3px;background:currentColor;transform:scaleY(.25)}
.msgr-equalizer i:nth-child(2),.msgr-equalizer i:nth-child(4){transform:scaleY(.45)}
.msgr-music.is-playing .msgr-equalizer i{animation:msgr-music-wave .85s ease-in-out infinite alternate}
.msgr-music.is-playing i:nth-child(2){animation-delay:-.3s;animation-duration:.65s}
.msgr-music.is-playing i:nth-child(3){animation-delay:-.6s;animation-duration:.95s}
.msgr-music.is-playing i:nth-child(4){animation-delay:-.1s;animation-duration:.75s}
.msgr-music.is-playing i:nth-child(5){animation-delay:-.4s}
.msgr-music.is-dimmed .msgr-music-toggle{opacity:.22!important;background:rgba(246,250,248,.12)!important;border-color:rgba(87,134,113,.1)!important;box-shadow:none!important}
.msgr-music .msgr-music-toggle:focus-visible{outline:2px solid #298063;outline-offset:3px}
.msgr-music-panel[hidden]{display:none!important}
.msgr-music-panel{position:absolute;top:auto;bottom:calc(100% + 10px);left:0;right:auto;box-sizing:border-box;width:min(310px,calc(100vw - 48px));padding:20px;border:1px solid #55877138;border-radius:20px;background:var(--msgr-card-bg,#fff);color:var(--msgr-text,#234139);box-shadow:0 20px 60px #092e3826;z-index:100050;direction:rtl;max-height:55vh;overflow:auto}
.msgr-music-panel strong small{color:#298063;font-size:10px;margin-inline-start:8px}
.msgr-music-panel p{font-size:12px;line-height:1.9;margin:10px 0;overflow-wrap:anywhere}
.msgr-music-panel button{font:inherit;cursor:pointer;border:1px solid #68998733;border-radius:10px;background:#568f7612;color:inherit;padding:7px 12px}
.msgr-music-panel label{display:flex;align-items:center;gap:10px;font-size:12px;margin-top:14px}
.msgr-music-panel input[type=range]{min-width:0;width:150px;accent-color:#298063}
.msgr-page-dark .msgr-music .msgr-music-toggle{background:rgba(24,44,41,.95)!important;color:#9dd8bb!important;border-color:#9dd8bb30!important}
.msgr-page-dark .msgr-music.is-dimmed .msgr-music-toggle{background:rgba(24,44,41,.12)!important;border-color:#9dd8bb10!important}
.msgr-page-dark .msgr-music-panel,[data-theme=dark] .msgr-music-panel{background:#182c29;color:#edf6f2}
@keyframes msgr-music-wave{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.msgr-music .msgr-music-toggle{transition:none}.msgr-music.is-playing .msgr-equalizer i{animation:none;transform:scaleY(.8)}}

.msgr-music[hidden]{display:none!important}
/* Brand atmosphere, matching the offline page's green palette. */
.msgr-music .msgr-music-panel{--radio-ink:#253c35;--radio-muted:#78897f;--radio-accent:#246d53;--radio-line:#246d531c;--radio-soft:#246d530b;padding:18px 20px 20px;border-color:#246d5326;border-radius:24px;color:var(--radio-ink);background:radial-gradient(ellipse at 20% 0%,#dceee0b3,transparent 70%),linear-gradient(150deg,#fff,#f5f8f6);box-shadow:0 20px 65px #15392c28;isolation:isolate;animation:msgr-radio-reveal .24s ease-out}
.msgr-radio-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.msgr-radio-live-badge{display:inline-flex;align-items:center;gap:7px;color:var(--radio-muted);font-size:10px;letter-spacing:.5px}
.msgr-radio-live-badge i,.msgr-radio-status-dot{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--radio-muted)}
.msgr-music.is-playing .msgr-radio-live-badge i,.msgr-music.is-playing .msgr-radio-status-dot{background:var(--radio-accent);box-shadow:0 0 9px #53b98440}
.msgr-music-panel svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.msgr-music-panel .msgr-radio-close{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--radio-line);border-radius:50%;background:var(--radio-soft);color:var(--radio-muted)}
.msgr-radio-art{position:relative;height:108px;display:grid;place-items:center;margin:5px auto 12px}
.msgr-radio-art-ring{position:absolute;width:92px;height:92px;border:1px solid var(--radio-line);border-radius:50%;background:radial-gradient(circle,#33845f10,transparent 70%)}
.msgr-radio-art-ring:after{content:"";position:absolute;inset:10px;border:1px dashed var(--radio-line);border-radius:50%}
.msgr-radio-wave{display:flex;align-items:center;justify-content:center;gap:4px;position:relative;height:60px;color:var(--radio-accent)}
.msgr-radio-wave i{display:block;width:3px;height:var(--bar);border-radius:4px;background:currentColor;opacity:.65;transform:scaleY(.6)}
.msgr-music.is-playing .msgr-radio-wave i{animation:msgr-radio-bars 1.3s ease-in-out var(--delay) infinite alternate}
.msgr-music-panel .msgr-radio-title{font:inherit;font-weight:750;font-size:18px;line-height:1.8;color:var(--radio-ink);text-align:center;margin:0 0 5px}
.msgr-music-panel .msgr-radio-description{font-size:11px;line-height:1.9;text-align:center;color:var(--radio-muted);margin:0 0 18px}
.msgr-radio-now{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;margin-bottom:14px;min-height:42px;box-sizing:border-box;border:1px solid var(--radio-line);background:var(--radio-soft);border-radius:12px}
.msgr-music-panel .msgr-radio-now p{margin:0;font-size:10px;line-height:1.9;color:var(--radio-ink);text-align:center}
.msgr-music-panel .msgr-radio-play{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:45px;padding:10px 15px;border:1px solid #ffffff12;border-radius:13px;background:linear-gradient(115deg,#246d53,#328363);color:#fff;font-size:12px;font-weight:650;box-shadow:0 7px 18px #246d531a;transition:filter .2s,transform .2s}
.msgr-radio-play:active{transform:scale(.98)}
.msgr-radio-play-symbol{display:grid;place-items:center}
.msgr-radio-play .msgr-radio-symbol-play{fill:currentColor;stroke:none;width:17px;height:17px}
.msgr-radio-play .msgr-radio-symbol-stop{display:none;stroke-width:3}
.msgr-music.is-connected .msgr-radio-symbol-stop{display:block}
.msgr-music.is-connected .msgr-radio-symbol-play{display:none}
.msgr-radio-volume{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:19px;padding-top:17px;border-top:1px solid var(--radio-line)}
.msgr-music-panel .msgr-radio-volume label{margin:0;font-size:10px;color:var(--radio-muted);gap:7px}
.msgr-radio-volume output{font-size:10px;color:var(--radio-muted);font-variant-numeric:tabular-nums}
.msgr-music-panel .msgr-radio-volume input{--volume:50%;grid-column:1/-1;width:100%;height:4px;min-height:4px;margin:4px 0 8px;border:0;border-radius:5px;appearance:none;-webkit-appearance:none;direction:ltr;background:linear-gradient(to right,var(--radio-accent) var(--volume),var(--radio-line) var(--volume));cursor:pointer}
.msgr-radio-volume input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;border:2px solid #fff;background:var(--radio-accent);box-shadow:0 1px 6px #163d3428}
.msgr-radio-volume input::-moz-range-thumb{width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:var(--radio-accent)}
.msgr-music-panel button:focus-visible,.msgr-radio-volume input:focus-visible{outline:2px solid var(--radio-accent);outline-offset:3px}
.msgr-page-dark .msgr-music .msgr-music-panel,[data-theme=dark] .msgr-music .msgr-music-panel{--radio-ink:#edf4ef;--radio-muted:#a2b6ac;--radio-accent:#a2d8ba;--radio-line:#a2d8ba20;--radio-soft:#a2d8ba08;background:radial-gradient(ellipse at 5% 0%,#246d5380,transparent 65%),radial-gradient(ellipse at 100% 100%,#246d5338,transparent 65%),linear-gradient(145deg,#182c28,#101b1d);border-color:#a2d8ba26;box-shadow:0 24px 70px #0006}
@keyframes msgr-radio-bars{from{transform:scaleY(.35);opacity:.45}to{transform:scaleY(1);opacity:1}}
@keyframes msgr-radio-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.msgr-music .msgr-music-panel,.msgr-music.is-playing .msgr-radio-wave i{animation:none}}
/* The same five strokes form a musical note, then unfold into equalizer bars. */
.msgr-music .msgr-equalizer{display:block;position:relative;flex-shrink:0;width:23px;height:18px;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.msgr-music .msgr-equalizer i{position:absolute;display:block;margin:0;transition:left .42s,top .42s,width .42s,height .42s,border-radius .42s,transform .42s;animation:none;transform-origin:center}
.msgr-music:not(.is-connected) .msgr-equalizer i:nth-child(1){left:0;top:12px;width:7px;height:5px;border-radius:50%;transform:rotate(-22deg)}
.msgr-music:not(.is-connected) .msgr-equalizer i:nth-child(2){left:5px;top:2px;width:2px;height:13px;border-radius:2px;transform:none}
.msgr-music:not(.is-connected) .msgr-equalizer i:nth-child(3){left:6px;top:1px;width:10px;height:3px;border-radius:1px;transform:rotate(-12deg)}
.msgr-music:not(.is-connected) .msgr-equalizer i:nth-child(4){left:15px;top:0;width:2px;height:13px;border-radius:2px;transform:none}
.msgr-music:not(.is-connected) .msgr-equalizer i:nth-child(5){left:10px;top:11px;width:7px;height:5px;border-radius:50%;transform:rotate(-22deg)}
.msgr-music.is-connected .msgr-equalizer i{top:1px;width:3px;height:16px;border-radius:3px;transform:scaleY(.4)}
.msgr-music.is-connected i:nth-child(1){left:0}.msgr-music.is-connected i:nth-child(2){left:5px}.msgr-music.is-connected i:nth-child(3){left:10px}.msgr-music.is-connected i:nth-child(4){left:15px}.msgr-music.is-connected i:nth-child(5){left:20px}
.msgr-music.is-playing .msgr-equalizer i{animation:msgr-music-wave .85s .42s ease-in-out infinite alternate}
.msgr-music.is-playing .msgr-equalizer i:nth-child(2){animation-duration:.65s}.msgr-music.is-playing .msgr-equalizer i:nth-child(3){animation-duration:.95s}.msgr-music.is-playing .msgr-equalizer i:nth-child(4){animation-duration:.75s}
.msgr-music-toggle{position:relative;overflow:visible!important}
/* One centered note with its own face and attached limbs. */
.msgr-music .msgr-music-toggle{width:42px!important;min-width:42px!important;height:38px!important;padding:0!important;transform:scale(.86);transform-origin:center center;opacity:.8}
.msgr-music.is-connected .msgr-music-toggle{transform:scale(1.12);opacity:1}
.msgr-music .msgr-equalizer{position:absolute;left:50%;top:50%;margin:-9px 0 0 -11.5px;opacity:0;transform:scale(.7);transition:opacity .3s,transform .4s}
.msgr-music.is-connected .msgr-equalizer{opacity:1;transform:scale(1.1)}
.msgr-note-avatar{position:absolute!important;left:50%!important;top:50%!important;width:34px!important;height:34px!important;max-width:none!important;margin:-17px 0 0 -17px!important;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:1;transform:scale(1);transition:opacity .3s,transform .4s}
.msgr-music.is-connected .msgr-note-avatar{opacity:0;transform:scale(.65) rotate(-12deg)}
.msgr-note-silhouette{fill:currentColor;stroke:none}
.msgr-note-face,.msgr-note-left-arm,.msgr-note-wave-arm,.msgr-note-hanging,.msgr-note-yawn-hand{opacity:0}
.msgr-note-face{fill:#f5f8f6;stroke:none}.msgr-note-smile{stroke:#f5f8f6;stroke-width:1;fill:none}.msgr-note-yawn-mouth{display:none}
.msgr-note-eye-left,.msgr-note-eye-right{transform-box:fill-box;transform-origin:center}
.msgr-note-wave-palm{transform-origin:28px 18px}.msgr-note-body{transform-origin:19px 25px}.msgr-note-hang-links{transform-origin:20px 10px}
.msgr-music:is(.note-wave,.note-blink,.note-yawn) .msgr-note-face{animation:msgr-note-face-in 3s ease-in-out var(--character-loops,2)}
.msgr-music.note-wave .msgr-note-wave-arm,.msgr-music.note-wave .msgr-note-left-arm{animation:msgr-note-face-in 3s ease-in-out var(--character-loops,2)}
.msgr-music.note-wave .msgr-note-wave-palm{animation:msgr-note-salute 3s ease-in-out var(--character-loops,2)}
.msgr-music.note-wave .msgr-note-body{animation:msgr-note-greet 3s ease-in-out var(--character-loops,2)}
.msgr-music.note-blink .msgr-note-eye-right{animation:msgr-note-wink 3s ease-in-out var(--character-loops,2)}
.msgr-music.note-blink .msgr-note-body{animation:msgr-note-nod 3s ease-in-out var(--character-loops,2)}
.msgr-music.note-yawn .msgr-note-yawn-mouth{display:block}.msgr-music.note-yawn .msgr-note-smile{display:none}
.msgr-music.note-yawn .msgr-note-yawn-mouth{transform-box:fill-box;transform-origin:center;animation:msgr-note-mouth-open 3s ease-in-out var(--character-loops,2)}
.msgr-music.note-yawn .msgr-note-eye-left,.msgr-music.note-yawn .msgr-note-eye-right{animation:msgr-note-sleepy 3s ease-in-out var(--character-loops,2)}
.msgr-music.note-yawn .msgr-note-yawn-hand{animation:msgr-note-face-in 3s ease-in-out var(--character-loops,2)}
.msgr-music.note-yawn .msgr-note-body{animation:msgr-note-stretch 3s ease-in-out var(--character-loops,2)}
@keyframes msgr-note-face-in{0%,100%{opacity:0}12%,86%{opacity:1}}
@keyframes msgr-note-salute{0%,18%,88%,100%{transform:rotate(0)}30%,54%,78%{transform:rotate(23deg)}42%,66%{transform:rotate(-20deg)}}
@keyframes msgr-note-greet{0%,100%{transform:none}20%,80%{transform:rotate(-7deg)}45%{transform:rotate(-3deg)}}
@keyframes msgr-note-wink{0%,25%,52%,100%{transform:scaleY(1)}32%,45%{transform:scaleY(.12)}}
@keyframes msgr-note-nod{0%,100%{transform:none}30%,50%{transform:rotate(8deg) translateY(1px)}}
@keyframes msgr-note-mouth-open{0%,15%,90%,100%{transform:scale(.1)}35%,70%{transform:scale(1)}}
@keyframes msgr-note-sleepy{0%,100%{transform:scaleY(1)}30%,75%{transform:scaleY(.15)}}
@keyframes msgr-note-stretch{0%,100%{transform:none}35%,65%{transform:rotate(-7deg) scaleY(1.08)}80%{transform:rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.msgr-music .msgr-note-avatar,.msgr-music .msgr-note-avatar *,.msgr-music .msgr-equalizer,.msgr-music .msgr-equalizer i{animation:none!important;transition:none!important}}

/* Explicit specificity beats the app's global 19px icon SVG rule. */
.msgr-music .msgr-music-toggle{width:46px!important;min-width:46px!important;height:44px!important;transform:scale(1);opacity:.88}
.msgr-music.is-connected .msgr-music-toggle{transform:scale(1.15);opacity:1}
.msgr-music .msgr-music-toggle svg.msgr-note-avatar{width:40px!important;height:42px!important;min-width:40px!important;max-width:none!important;left:50%!important;top:50%!important;margin:-21px 0 0 -20px!important;overflow:visible!important;stroke-width:1.7;display:block!important}
.msgr-music .msgr-note-avatar .msgr-note-silhouette{fill:currentColor!important;stroke:none!important}
.msgr-music .msgr-note-avatar .msgr-note-face{stroke:none!important;fill:#fff!important}
.msgr-music .msgr-note-avatar .msgr-note-smile{stroke:#fff!important;stroke-width:1.3;fill:none!important}
.msgr-music .msgr-note-avatar .msgr-note-wave-arm,.msgr-music .msgr-note-avatar .msgr-note-left-arm,.msgr-music .msgr-note-avatar .msgr-note-hanging,.msgr-music .msgr-note-avatar .msgr-note-yawn-hand{stroke:currentColor!important;stroke-width:1.7;fill:none!important}

/* Quiet frame, independently legible character, theme-specific face contrast. */
.msgr-music:not(.is-connected) .msgr-music-toggle{opacity:1;background:rgba(230,241,234,.24)!important;border-color:rgba(87,134,113,.12)!important;box-shadow:none!important;color:#246d53!important}
.msgr-music:not(.is-connected) .msgr-note-avatar{opacity:.42;transition:opacity .7s,transform .4s}
.msgr-page-dark .msgr-music:not(.is-connected) .msgr-music-toggle{background:rgba(24,44,41,.24)!important;border-color:#a2d8ba14!important;color:#a2d8ba!important}
.msgr-music:not(.is-connected):is(.note-wave,.note-blink,.note-yawn) .msgr-note-avatar{opacity:1}
.msgr-music:not(.is-connected):is(.note-wave,.note-blink,.note-yawn) .msgr-note-avatar *{animation-duration:5.4s!important;animation-iteration-count:1!important}
.msgr-page-dark .msgr-music .msgr-note-avatar .msgr-note-face{fill:#102820!important}
.msgr-page-dark .msgr-music .msgr-note-avatar .msgr-note-smile{stroke:#102820!important}
@media(prefers-reduced-motion:reduce){.msgr-music .msgr-note-avatar *{animation:none!important}}

/* Treble clef: a continuous readable stroke with face on the central loop. */
.msgr-music .msgr-note-avatar .msgr-note-silhouette{fill:none!important;stroke:currentColor!important;stroke-width:2.1!important;stroke-linecap:round;stroke-linejoin:round}
.msgr-music .msgr-music-toggle svg.msgr-note-avatar{width:38px!important;height:43px!important;margin:-21.5px 0 0 -19px!important}
.msgr-music:not(.is-connected) .msgr-music-toggle{background:rgba(230,241,234,.15)!important;border-color:rgba(87,134,113,.08)!important}
.msgr-music:not(.is-connected) .msgr-note-avatar{opacity:.36}
.msgr-page-dark .msgr-music:not(.is-connected) .msgr-music-toggle{background:rgba(24,44,41,.17)!important;border-color:#a2d8ba10!important;color:#b5e9c9!important}
.msgr-music .msgr-note-avatar .msgr-note-face{fill:#246d53!important}
.msgr-music .msgr-note-avatar .msgr-note-smile{stroke:#246d53!important}
.msgr-page-dark .msgr-music .msgr-note-avatar .msgr-note-face{fill:#c6f3d6!important}
.msgr-page-dark .msgr-music .msgr-note-avatar .msgr-note-smile{stroke:#c6f3d6!important}
.msgr-note-body{transform-origin:20px 22px}

/* Readable clef and an isolated face plane above the ink strokes. */
.msgr-music .msgr-note-avatar .msgr-note-silhouette{stroke-width:1.65!important}
.msgr-music .msgr-note-avatar .msgr-face-clearance{fill:#f0f6f2!important;stroke:none!important}
.msgr-page-dark .msgr-music .msgr-note-avatar .msgr-face-clearance{fill:#182c29!important}
.msgr-note-body{transform-box:view-box;transform-origin:20px 22px}
.msgr-music .msgr-music-toggle svg.msgr-note-avatar{transition:opacity .48s ease,transform .65s cubic-bezier(.22,1,.36,1);transform:translateY(0) rotate(0) scale(1)}
.msgr-music.is-connected .msgr-note-avatar{opacity:0;transform:translateY(-3px) rotate(16deg) scale(.45)}
.msgr-music .msgr-equalizer{transition:opacity .45s .12s,transform .65s cubic-bezier(.22,1,.36,1);transform:translateY(5px) scale(.3) rotate(-12deg);opacity:0}
.msgr-music.is-connected .msgr-equalizer{opacity:1;transform:translateY(0) scale(1.1) rotate(0)}

.msgr-music .msgr-music-toggle{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
/* Energetic gestures, without the falling scene. */
.msgr-music.note-wave .msgr-note-body{animation:msgr-note-greet 5.4s ease-in-out 1}
.msgr-music.note-blink .msgr-note-left-arm{animation:msgr-note-face-in 5.4s ease-in-out 1}
@keyframes msgr-note-greet{0%,100%{transform:none}12%{transform:translateY(1px) scaleY(.95)}23%{transform:translateY(-3px) rotate(-10deg)}38%{transform:translateY(-1px) rotate(6deg)}54%{transform:translateY(-3px) rotate(-8deg)}70%{transform:rotate(4deg)}88%{transform:translateY(-1px)}}
@keyframes msgr-note-salute{0%,12%,92%,100%{transform:rotate(0)}23%,49%,75%{transform:rotate(32deg)}36%,62%,84%{transform:rotate(-28deg)}}
@keyframes msgr-note-nod{0%,100%{transform:none}18%{transform:translateY(-2px) rotate(-7deg)}34%,47%{transform:translate(1px,1px) rotate(12deg)}65%{transform:translateY(-2px) rotate(-6deg)}84%{transform:rotate(3deg)}}
@keyframes msgr-note-wink{0%,20%,49%,100%{transform:scaleY(1)}29%,41%{transform:scaleY(.1)}58%{transform:scaleY(1.15)}73%{transform:scaleY(1)}}
@keyframes msgr-note-stretch{0%,100%{transform:none}18%{transform:translateY(1px) rotate(5deg) scaleY(.96)}36%,57%{transform:translateY(-3px) rotate(-12deg) scaleY(1.14)}72%{transform:translateY(-1px) rotate(8deg)}87%{transform:rotate(-3deg)}}
/* Icon transition first; the button surface follows after it completes. */
.msgr-music .msgr-music-toggle{transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .4s,background .5s ease,border-color .5s ease,box-shadow .5s ease}
.msgr-music.is-connected .msgr-music-toggle{transform:scale(1);transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .4s,background .5s .72s ease,border-color .5s .72s ease,box-shadow .5s .72s ease}
.msgr-music .msgr-music-toggle svg.msgr-note-avatar{transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1);transform:scale(1)}
.msgr-music.is-connected .msgr-note-avatar{opacity:0;transform:scale(.75)}
.msgr-music .msgr-equalizer{transition:opacity .55s ease,transform .75s cubic-bezier(.22,1,.36,1);opacity:0;transform:scale(.7)}
.msgr-music.is-connected .msgr-equalizer{opacity:1;transform:scale(1.2)}
@media(prefers-reduced-motion:reduce){.msgr-music .msgr-music-toggle,.msgr-music.is-connected .msgr-music-toggle,.msgr-music .msgr-equalizer,.msgr-music .msgr-music-toggle svg.msgr-note-avatar{transition:none!important}}

/* Eight-second character sequence: fold ink, awaken, draw limbs, act, retract. */
.msgr-music .msgr-note-avatar .msgr-note-face-lines{fill:none;stroke:currentColor;stroke-width:1.65;transform-origin:20px 24px}
.msgr-note-awaken{transform-box:fill-box;transform-origin:center}
.msgr-face-clearance{transform-box:fill-box;transform-origin:center}
.msgr-music:not(.is-connected):is(.note-wave,.note-blink,.note-yawn) .msgr-note-avatar *{animation-duration:8s!important;animation-iteration-count:1!important}
.msgr-music:is(.note-wave,.note-blink,.note-yawn) .msgr-note-face-lines{animation:msgr-ink-fold 8s ease-in-out!important}
.msgr-music:is(.note-wave,.note-blink,.note-yawn) .msgr-face-clearance{animation:msgr-face-space 8s ease-in-out!important}
.msgr-music:is(.note-wave,.note-blink,.note-yawn) .msgr-note-awaken{animation:msgr-awaken-blinks 8s linear!important}
.msgr-music:is(.note-wave,.note-blink,.note-yawn) :is(.msgr-note-wave-arm,.msgr-note-left-arm,.msgr-note-yawn-hand) path{stroke-dasharray:1;stroke-dashoffset:1;animation:msgr-limb-draw 8s ease-in-out!important}
@keyframes msgr-ink-fold{0%,100%{transform:none;opacity:1}12%,86%{transform:translate(-3px,3px) scale(.55);opacity:0}}
@keyframes msgr-face-space{0%,5%,100%{transform:scale(0)}14%,85%{transform:scale(1)}95%{transform:scale(0)}}
@keyframes msgr-face-arrive{0%,100%{opacity:0}15%,85%{opacity:1}}
@keyframes msgr-note-face-in{0%,8%,100%{opacity:0}16%,87%{opacity:1}96%{opacity:0}}
@keyframes msgr-awaken-blinks{0%,13%,95%,100%{transform:scaleY(0)}16%,20%,25%,29%,34%,85%{transform:scaleY(1)}22%,23%,31%,32%,38%,39%{transform:scaleY(.08)}42%,88%{transform:scaleY(1)}}
@keyframes msgr-limb-draw{0%,39%,100%{stroke-dashoffset:1}48%,77%{stroke-dashoffset:0}88%{stroke-dashoffset:1}}
@keyframes msgr-note-salute{0%,47%,82%,100%{transform:rotate(0)}54%,69%{transform:rotate(30deg)}61%,76%{transform:rotate(-25deg)}}
@keyframes msgr-note-greet{0%,43%,93%,100%{transform:none}52%{transform:translateY(-2px) rotate(-8deg)}65%{transform:rotate(6deg)}78%{transform:translateY(-1px) rotate(-5deg)}}
@keyframes msgr-note-wink{0%,48%,74%,100%{transform:scaleY(1)}55%,65%{transform:scaleY(.08)}}
@keyframes msgr-note-nod{0%,44%,93%,100%{transform:none}56%,66%{transform:rotate(10deg) translateY(1px)}79%{transform:rotate(-4deg)}}
@keyframes msgr-note-mouth-open{0%,46%,87%,100%{transform:scale(.05)}57%,72%{transform:scale(1)}81%{transform:scale(.2)}}
@keyframes msgr-note-sleepy{0%,46%,89%,100%{transform:scaleY(1)}57%,73%{transform:scaleY(.12)}}
@keyframes msgr-note-stretch{0%,44%,93%,100%{transform:none}57%,70%{transform:translateY(-2px) rotate(-9deg) scaleY(1.08)}82%{transform:rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.msgr-music .msgr-note-avatar *{animation:none!important;transition:none!important}}

/* Actual sampled-stroke interpolation; no opacity swap during the transition. */
.msgr-music .msgr-music-toggle svg.msgr-line-morph{position:absolute;left:50%;top:50%;width:38px!important;height:43px!important;margin:-21.5px 0 0 -19px!important;overflow:visible;fill:none!important;stroke:currentColor!important;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;display:none;pointer-events:none}
.msgr-music.is-connected .msgr-line-morph,.msgr-music.is-morphing .msgr-line-morph{display:block!important}
.msgr-music .msgr-equalizer{display:none!important}
.msgr-music.is-morphing .msgr-note-avatar,.msgr-music.is-connected .msgr-note-avatar{visibility:hidden!important;transition:none!important}
.msgr-music:not(.is-connected):not(.is-morphing) .msgr-note-avatar{transform:none!important}
.msgr-music.is-morphing .msgr-line-morph path{animation:none!important}
.msgr-music.is-playing:not(.is-morphing) .msgr-morph-stroke{transform-origin:center;transform-box:fill-box;animation:msgr-morph-level .85s ease-in-out infinite alternate}
.msgr-music.is-playing .msgr-morph-stroke:nth-child(2){animation-delay:-.3s}.msgr-music.is-playing .msgr-morph-stroke:nth-child(3){animation-delay:-.6s}.msgr-music.is-playing .msgr-morph-stroke:nth-child(4){animation-delay:-.2s}
.msgr-music.is-connected .msgr-music-toggle{transition:background .5s .96s ease,border-color .5s .96s ease,box-shadow .5s .96s ease}
@keyframes msgr-morph-level{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.msgr-music .msgr-morph-stroke{animation:none!important}}

/* Reel-in drawing: progressively shorten the actual paths, never fade or mask. */
.msgr-music .msgr-note-avatar :is(.msgr-note-face-lines,.msgr-note-face-stem){fill:none!important;stroke:currentColor!important;stroke-width:1.65;stroke-linecap:butt;stroke-dasharray:1 1;stroke-dashoffset:0;opacity:1!important;transform:none!important}
.msgr-music:is(.note-wave,.note-blink,.note-yawn) .msgr-note-face-lines{animation:msgr-coil-reel 8s linear 1!important}
.msgr-music:is(.note-wave,.note-blink,.note-yawn) .msgr-note-face-stem{animation:msgr-stem-reel 8s linear 1!important}
@keyframes msgr-coil-reel{0%,2%{stroke-dashoffset:0}7%{stroke-dashoffset:.32}12%{stroke-dashoffset:.74}16%,85%{stroke-dashoffset:1}90%{stroke-dashoffset:.74}95%{stroke-dashoffset:.32}100%{stroke-dashoffset:0}}
@keyframes msgr-stem-reel{0%,6%{stroke-dashoffset:0}11%{stroke-dashoffset:.45}16%,85%{stroke-dashoffset:1}91%{stroke-dashoffset:.45}98%,100%{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.msgr-music .msgr-note-avatar :is(.msgr-note-face-lines,.msgr-note-face-stem){animation:none!important}}

/* A single unbroken serpentine stroke, including the equalizer's connecting bends. */
.msgr-music .msgr-line-morph .msgr-morph-stroke{stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0}
.msgr-music.is-playing:not(.is-morphing) .msgr-line-morph .msgr-morph-stroke{animation:msgr-morph-level 1.05s ease-in-out infinite alternate;transform-origin:center;transform-box:fill-box}

/* Solid columns stay visible while only their joining strand fades away. */
.msgr-music .msgr-line-morph .msgr-morph-stroke{opacity:var(--strand,1);animation:none!important;transform:none!important}
.msgr-natural-bars{opacity:var(--bars,0)}
.msgr-natural-bars path{fill:none;stroke:currentColor;stroke-linecap:round;transform-origin:center;transform-box:fill-box}
.msgr-music.is-playing:not(.is-morphing) .msgr-natural-bars path{animation:msgr-morph-level .9s ease-in-out infinite alternate}
.msgr-natural-bars path:nth-child(2n){animation-delay:-.35s!important}.msgr-natural-bars path:nth-child(3n){animation-delay:-.6s!important}
@media(prefers-reduced-motion:reduce){.msgr-natural-bars path{animation:none!important}}

.msgr-music:not(.is-connected) .msgr-note-avatar{transition:opacity 1.25s ease,transform .4s}
.msgr-music:not(.is-connected).is-return-rest .msgr-note-avatar{opacity:1!important}

.msgr-thread-hand{display:none;fill:none!important;stroke:currentColor!important;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;transform-origin:24px 24px}
.msgr-music.has-thread-hand .msgr-thread-hand{display:block}
.msgr-music.has-thread-hand .msgr-note-face-lines{visibility:hidden}
.msgr-music.has-thread-hand :is(.msgr-note-wave-arm,.msgr-note-left-arm,.msgr-note-yawn-hand){visibility:hidden!important}
.msgr-music.has-thread-hand:is(.note-wave,.note-blink) .msgr-thread-hand{animation:msgr-thread-salute 8s ease-in-out 1!important}
.msgr-music.has-thread-hand.note-yawn .msgr-thread-hand{animation:msgr-thread-yawn 8s ease-in-out 1!important}
@keyframes msgr-thread-salute{0%,43%,80%,100%{transform:rotate(0)}51%,66%{transform:rotate(18deg)}58%,73%{transform:rotate(-16deg)}}
@keyframes msgr-thread-yawn{0%,43%,83%,100%{transform:none}54%,72%{transform:translate(-8px,3px) rotate(-20deg)}}
@media(prefers-reduced-motion:reduce){.msgr-thread-hand{animation:none!important}}

@keyframes msgr-thread-salute{0%,46%,75%,100%{transform:rotate(0)}52%,65%{transform:rotate(17deg)}58%,71%{transform:rotate(-15deg)}}
@keyframes msgr-thread-yawn{0%,46%,75%,100%{transform:none}55%,68%{transform:translate(-8px,3px) rotate(-20deg)}}

/* One timeline owns the character, replacing conflicting CSS scenes. */
.msgr-music.is-character-scene .msgr-note-avatar *{animation:none!important;transition:none!important}
.msgr-music.is-character-scene .msgr-note-body{transform:none!important}
.msgr-music.is-character-scene .msgr-note-avatar{opacity:1!important}
.msgr-music.is-character-scene .msgr-thread-hand{transform-origin:22px 27px}
.msgr-music .msgr-music-toggle svg.msgr-note-avatar{width:32px!important;height:34px!important;margin:-17px 0 0 -16px!important}
.msgr-note-yawn-mouth{transform-box:fill-box;transform-origin:center}

/* A shared viewport and placement for resting clef, morph and live bars. */
.msgr-music .msgr-music-toggle svg.msgr-note-avatar,.msgr-music .msgr-music-toggle svg.msgr-line-morph{width:32px!important;height:34px!important;left:50%!important;top:50%!important;margin:-17px 0 0 -16px!important;padding:0!important}
.msgr-music .msgr-line-morph{transform:none!important}
.msgr-music.is-character-scene .msgr-thread-hand{transform-origin:29px 24px}
.msgr-music.has-thread-hand.is-character-scene svg.msgr-note-avatar *{animation:none!important;transition:none!important}
/* Center the SVG independently of RTL direction and global icon margins. */
.msgr-music .msgr-music-toggle svg.msgr-note-avatar,.msgr-music .msgr-music-toggle svg.msgr-line-morph{position:absolute!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;width:32px!important;height:34px!important;margin:auto!important;box-sizing:content-box!important;direction:ltr}
.msgr-music:not(.is-connected) .msgr-music-toggle svg.msgr-note-avatar{transform:translateX(-2px)!important}
.msgr-music .msgr-music-toggle svg.msgr-line-morph{transform:translateX(-2px)!important}

/* No directional offsets: both viewports share the measured center of the clef. */
.msgr-music .msgr-music-toggle svg.msgr-note-avatar,.msgr-music .msgr-music-toggle svg.msgr-line-morph,.msgr-music:not(.is-connected) .msgr-music-toggle svg.msgr-note-avatar{inset:0!important;margin:auto!important;transform:none!important;align-self:center!important;justify-self:center!important}

/* Compact rest state; only the character grows beyond its quiet frame. */
.msgr-music:not(.is-connected) .msgr-music-toggle{transform:scale(.86);transform-origin:center center;transition:transform .75s cubic-bezier(.22,1,.36,1),background .5s,border-color .5s,opacity .4s}
.msgr-music.is-connected .msgr-music-toggle{transform:scale(1);transform-origin:center center;transition:transform .75s cubic-bezier(.22,1,.36,1),background .5s .96s,border-color .5s .96s}
.msgr-music:not(.is-connected) .msgr-music-toggle svg.msgr-note-avatar{transform:scale(1)!important;transform-origin:center;transition:transform .85s cubic-bezier(.22,1,.36,1),opacity 1.25s ease}
.msgr-music:not(.is-connected).is-character-scene .msgr-music-toggle svg.msgr-note-avatar{transform:scale(1.85)!important}
@media(prefers-reduced-motion:reduce){.msgr-music .msgr-music-toggle,.msgr-music .msgr-music-toggle svg.msgr-note-avatar{transition:none!important}}

/* Five-second idle dim: slow fade away, quick smooth recovery on touch. */
.msgr-music.is-connected .msgr-music-toggle{transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .22s ease-out,background .25s ease-out,border-color .25s ease-out,box-shadow .25s ease-out}
.msgr-music.is-connected:not(.is-dimmed) .msgr-line-morph{opacity:1;transition:opacity .22s ease-out}
.msgr-music.is-connected.is-dimmed .msgr-music-toggle{opacity:.38!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;transition:opacity 1.4s ease-in-out,background 1.4s ease-in-out,border-color 1.4s ease-in-out,box-shadow 1.4s ease-in-out}
.msgr-music.is-connected.is-dimmed .msgr-line-morph{opacity:.6;transition:opacity 1.4s ease-in-out}
@media(prefers-reduced-motion:reduce){.msgr-music.is-connected .msgr-music-toggle,.msgr-music.is-connected .msgr-line-morph{transition:none!important}}