/* One shared support surface, using portal design tokens. */
.support-widget { position:fixed; right:24px; bottom:24px; z-index:85; font-family:var(--font-sans); }
.support-launcher { position:relative; width:68px; height:68px; border:1px solid var(--border-default); border-radius:24px; background:var(--surface-1); box-shadow:var(--shadow-lg); cursor:pointer; display:grid; place-items:center; transition:transform .2s; }
.support-launcher:hover { transform:translateY(-4px); }
.support-launcher:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.support-mascot { --mira-color:var(--accent); position:relative; width:43px; height:40px; display:block; animation:support-float 4s ease-in-out infinite; }
.support-mascot__face { position:absolute; z-index:1; inset:6px 0 0; display:flex; align-items:center; justify-content:center; gap:9px; border-radius:13px; background:var(--mira-color); box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--mira-color) 75%,var(--text-primary)); transition:background .25s,box-shadow .25s,rotate .4s ease-in-out; }
.support-mascot__face::before,.support-mascot__face::after { content:''; position:absolute; z-index:1; top:8px; width:9px; height:2px; border-radius:2px; background:var(--surface-1); opacity:0; transform:translateY(-3px) rotate(0); transition:opacity .22s ease,transform .32s cubic-bezier(.22,1,.36,1); pointer-events:none; }
.support-mascot__face::before { left:9px; }
.support-mascot__face::after { right:9px; }
.support-mascot__face i { position:relative; width:5px; height:8px; border-radius:4px; background:var(--surface-1); animation:support-look 12s cubic-bezier(.45,0,.25,1) infinite,support-blink 6s ease-in-out infinite; }
.support-mascot__face b { position:absolute; bottom:8px; width:10px; height:4px; border-bottom:2px solid var(--surface-1); border-radius:50%; transform-origin:center; transition:width .2s,height .2s,border .2s,background .2s; }
.support-mascot__antenna { position:absolute; left:20px; top:0; height:8px; width:3px; background:var(--mira-color); transition:background .25s; }
.support-mascot__antenna::before { content:''; position:absolute; top:-3px; left:-2px; width:7px; height:7px; background:var(--mira-color); border-radius:50%; transition:background .25s; }
.support-mascot__arm { position:absolute; left:34px; top:5px; width:32px; height:34px; color:var(--mira-color); opacity:0; transform:translate(-3px,3px) scale(.7); transform-origin:3.4px 26.4px; transition:color .25s; pointer-events:none; }
.support-widget[data-mira-greeting="true"] .support-launcher .support-mascot__arm { animation:support-wave 2.8s ease-in-out 1; }
.support-widget[data-mira-mood="talking"] .support-mascot__face b { height:6px; border:0; border-radius:4px; background:var(--surface-1); animation:support-talk .28s ease-in-out infinite alternate; }
.support-widget[data-mira-mood="happy"] .support-mascot__face b { animation:support-smile 12s ease-in-out infinite; }
.support-launcher:hover .support-mascot__face { rotate:-4deg; }
.support-widget[data-mira-mood="thinking"] .support-mascot__face i { animation-duration:9s,6s; }
.support-widget[data-mira-mood="concerned"] .support-mascot__face b { width:8px; border-radius:0; transform:translateY(2px); }
.support-widget[data-mira-mood="alert"] .support-mascot { --mira-color:var(--danger); }
.support-widget[data-mira-mood="alert"] .support-mascot__face::before { opacity:1; transform:translateY(0) rotate(18deg); animation:support-brow-left 4.8s ease-in-out infinite; }
.support-widget[data-mira-mood="alert"] .support-mascot__face::after { opacity:1; transform:translateY(0) rotate(-18deg); animation:support-brow-right 4.8s ease-in-out infinite; }
.support-widget[data-mira-mood="alert"] .support-mascot__face b { width:9px; border-radius:50% 50% 0 0; border-bottom:0; border-top:2px solid var(--surface-1); transform:translateY(3px); }
.support-greeting { position:absolute; right:0; bottom:82px; width:260px; padding:16px 32px 16px 18px; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--surface-1); box-shadow:var(--shadow-md); animation:support-enter .25s ease-out; }
.support-greeting button { border:0; background:none; color:var(--text-primary); text-align:left; font:600 var(--text-sm)/1.5 var(--font-sans); cursor:pointer; padding:0; }
.support-greeting span { display:block; margin-top:5px; color:var(--accent); font-size:var(--text-xs); }
.support-greeting .support-greeting__dismiss { position:absolute; right:12px; top:10px; color:var(--text-muted); font-size:20px; }
.support-launcher__badge { position:absolute; right:-2px; top:-2px; width:20px; height:20px; border-radius:50%; color:var(--surface-1); background:var(--accent); font-size:var(--text-xs); }
.support-chat { position:absolute; right:0; bottom:82px; width:min(390px,calc(100vw - 32px)); height:min(600px,calc(100dvh - 130px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border-default); border-radius:var(--radius-xl); background:var(--surface-1); box-shadow:var(--shadow-lg); opacity:0; transform:translateY(12px) scale(.94); transform-origin:calc(100% - 34px) calc(100% + 48px); pointer-events:none; transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .22s ease; }
.support-chat.is-open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.support-widget [hidden] { display:none !important; }
.support-chat__head { display:flex; align-items:center; gap:12px; padding:20px; border-bottom:1px solid var(--border-subtle); }
.support-chat__head > div { flex:1; min-width:0; }
.support-chat__head strong { display:block; font-size:var(--text-sm); }
.support-chat__head small { display:block; margin-top:4px; font-size:var(--text-xs); color:var(--text-muted); }
.support-mini { width:44px; height:44px; display:grid; place-items:center; flex-shrink:0; border-radius:14px; background:var(--accent-soft); }
.support-mini .support-mascot { transform:scale(.72); animation:none; }
.support-mini .support-mascot__arm { animation:none; }
.support-chat.is-closing { pointer-events:none; transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .26s ease-in-out; }
.support-chat__toolbar { position:relative; z-index:3; display:flex; justify-content:space-between; padding:10px 18px; gap:10px; border-bottom:1px solid var(--border-subtle); background:var(--surface-1); }
.support-chat__toolbar-start { display:flex; min-width:0; gap:8px; }
.support-chat__toolbar button,.support-chat__suggestions button { display:flex; align-items:center; gap:6px; padding:6px 8px; border:0; border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text-secondary); font:500 var(--text-xs) var(--font-sans); cursor:pointer; }
.support-chat__toolbar button:hover,.support-chat__suggestions button:hover { background:var(--accent-soft); color:var(--accent); }
.support-history { position:absolute; z-index:2; top:126px; right:12px; left:12px; max-height:min(310px,calc(100% - 216px)); overflow:auto; padding:8px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface-1); box-shadow:var(--shadow-md); }
.support-history > p { margin:8px; color:var(--text-muted); font:var(--text-xs)/1.5 var(--font-sans); }
.support-history__item { display:grid; width:100%; gap:3px; padding:10px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-primary); text-align:left; cursor:pointer; }
.support-history__item:hover,.support-history__item:focus-visible { background:var(--accent-soft); outline:none; }
.support-history__item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 var(--text-xs) var(--font-sans); }
.support-history__item small { color:var(--text-muted); font-size:var(--text-xs); }
.support-chat__messages { flex:1; min-height:0; overflow-y:auto; padding:20px 18px; display:flex; flex-direction:column; gap:14px; overscroll-behavior:contain; }
.support-message { align-self:flex-start; max-width:94%; min-width:0; animation:support-enter .18s ease-out; }
.support-message p { padding:12px 14px; margin:0; border-radius:14px 14px 14px 4px; background:var(--surface-2); color:var(--text-primary); white-space:pre-wrap; overflow-wrap:anywhere; font:var(--text-sm)/1.6 var(--font-sans); }
.support-message__body { padding:14px; border-radius:16px 16px 16px 4px; background:var(--surface-2); color:var(--text-primary); overflow-wrap:anywhere; font:var(--text-sm)/1.65 var(--font-sans); }
.support-message__body p { padding:0; border-radius:0; background:transparent; font:inherit; }
.support-message__body > :not(:first-child) { margin-top:14px; }
.support-message__heading { display:block; line-height:1.45; }
.support-message__body code { padding:2px 5px; border:1px solid var(--border-subtle); border-radius:var(--radius-xs); font-size:.9em; white-space:pre-wrap; }
.support-steps { display:grid; gap:14px; list-style:none; padding:0; margin:0; }
.support-steps li { display:grid; grid-template-columns:24px minmax(0,1fr); align-items:start; gap:10px; }
.support-step__number { display:grid; place-items:center; width:24px; height:24px; margin-top:1px; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:var(--text-xs); font-weight:800; }
.support-points { margin:0; padding-left:18px; display:grid; gap:8px; }
.support-message--user .support-message__body { background:var(--accent-soft); border-radius:16px 16px 4px 16px; }
.support-message--user .support-message__body p { background:transparent; }
.support-message--system .support-message__body { background:none; padding:5px; color:var(--text-muted); text-align:center; font-size:var(--text-xs); }
.support-delivery { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:7px; font-size:var(--text-xs); color:var(--text-muted); }
.support-delivery button { border:1px solid var(--border-default); border-radius:var(--radius-sm); padding:5px 8px; background:var(--surface-1); color:var(--accent); font:600 var(--text-xs) var(--font-sans); cursor:pointer; }
.support-message--user { align-self:flex-end; }
.support-message--user p { background:var(--accent-soft); border-radius:14px 14px 4px 14px; }
.support-message--system { align-self:center; max-width:100%; }
.support-message--system p { padding:5px; text-align:center; background:none; color:var(--text-muted); font-size:var(--text-xs); }
.support-message small { display:block; margin:5px 3px; color:var(--text-muted); font-size:var(--text-xs); }
.support-feedback { display:flex; align-items:center; gap:7px; margin:6px 3px; }
.support-feedback button { padding:3px 5px; background:none; border:1px solid var(--border-subtle); border-radius:var(--radius-xs); color:var(--text-muted); font:var(--text-xs) var(--font-sans); cursor:pointer; }
.support-feedback button.is-selected { color:var(--accent); border-color:var(--accent); }
.support-chat__suggestions { display:flex; flex-wrap:wrap; gap:6px; padding:0 18px 12px; }
.support-chat__composer { display:grid; flex-shrink:0; gap:7px; margin:0; padding:12px 18px 8px; border-top:1px solid var(--border-subtle); }
.support-chat__input { display:flex; align-items:flex-end; gap:10px; padding:8px; border:1px solid var(--border-default); border-radius:16px; background:var(--surface-2); transition:border-color .18s,box-shadow .18s; }
.support-chat__input:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.support-chat__composer textarea { display:block; flex:1; min-width:0; resize:none; height:40px; min-height:40px; max-height:110px; border:0; border-radius:0; outline:none; box-shadow:none; padding:10px 6px; background:transparent; font:var(--text-sm)/1.5 var(--font-sans); color:var(--text-primary); }
.support-chat__composer textarea:focus,.support-chat__composer textarea:focus-visible { border:0; outline:none; box-shadow:none; background:transparent; }
.support-chat__composer textarea::placeholder { color:var(--text-muted); }
.support-chat__composer .button { display:grid; place-items:center; width:40px; min-width:40px; padding:0; height:40px; border:0; border-radius:12px; background:var(--accent); color:var(--text-inverse); cursor:pointer; }
.support-chat__composer .button:disabled { opacity:.45; cursor:not-allowed; }
.support-chat__composer > small { color:var(--text-muted); font-size:var(--text-xs); }
.support-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.support-actions a { display:inline-flex; padding:8px 10px; border:1px solid var(--border-default); border-radius:var(--radius-sm); color:var(--accent); font-size:var(--text-xs); font-weight:600; text-decoration:none; }
.support-chat__foot { padding:0 18px 14px; color:var(--text-muted); font-size:var(--text-xs); line-height:1.5; }
.support-chat__error { padding:8px 18px; margin:0; color:var(--danger); font-size:var(--text-xs); }
.support-typing { color:var(--text-muted); font-size:var(--text-xs); animation:support-pulse 1s infinite; }
@keyframes support-enter { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes support-float { 50% { transform:translateY(-3px); } }
@keyframes support-blink { 0%,46%,50%,100% { transform:scaleY(1); } 48% { transform:scaleY(.15); } }
/* Long pauses and short eased glances keep both eyes curious, not jittery. */
@keyframes support-look { 0%,15%,100% { translate:0 0; } 21%,29% { translate:2px -1px; } 35%,45% { translate:0 0; } 51%,59% { translate:-2px 1px; } 65%,74% { translate:0 0; } 80%,88% { translate:1px -1.5px; } 94% { translate:0 0; } }
@keyframes support-smile { 0%,18%,36%,74%,94%,100% { transform:scale(1); } 24%,29%,80%,88% { transform:scale(1.25,1.35); } }
@keyframes support-talk { to { transform:scaleY(.45); } }
@keyframes support-brow-left { 0%,20%,55%,100% { translate:0 0; } 32%,42% { translate:0 1.5px; } 70%,82% { translate:0 -1px; } }
@keyframes support-brow-right { 0%,18%,56%,100% { translate:0 0; } 30%,43% { translate:0 1px; } 68%,80% { translate:0 -1.5px; } }
@keyframes support-wave { 0%,100% { opacity:0; transform:translate(-3px,3px) scale(.7) rotate(0); } 8%,38%,82% { opacity:1; transform:translate(0,0) scale(1) rotate(0); } 14%,26% { opacity:1; transform:translate(0,0) scale(1) rotate(-16deg); } 20%,32% { opacity:1; transform:translate(0,0) scale(1) rotate(12deg); } }
@keyframes support-pulse { 50% { opacity:.45; } }
.support-center { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:20px; align-items:start; }
.support-inbox { display:grid; max-height:650px; overflow:auto; padding:10px; }
.support-inbox button { display:block; text-align:left; width:100%; padding:12px 10px; border:0; border-bottom:1px solid var(--border-subtle); background:none; color:var(--text-primary); cursor:pointer; }
.support-inbox button.is-selected { background:var(--accent-soft); border-radius:var(--radius-sm); }
.support-inbox strong,.support-inbox small { display:block; margin-bottom:5px; }
.support-inbox small { color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-inbox__preview { display:block; color:var(--text-secondary); font-size:var(--text-2xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-inbox-filter { padding:12px 20px 4px; }
.support-inbox__more { margin:0 20px 16px; }
.support-unanswered { margin-bottom:20px; }
.support-unanswered__list { list-style:none; margin:0; padding:4px 20px 20px; display:grid; max-height:420px; overflow:auto; }
.support-unanswered__list li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border-subtle); min-width:0; }
.support-unanswered__list li > div { min-width:0; }
.support-unanswered__list strong { display:block; overflow-wrap:anywhere; }
.support-unanswered__list small { display:block; margin-top:4px; color:var(--text-muted); }
.support-unanswered__list .button { flex-shrink:0; }
@media(max-width:520px) { .support-unanswered__list { padding:4px 18px 18px; } .support-unanswered__list li { flex-direction:column; align-items:stretch; gap:10px; } .support-inbox-filter { padding:12px 18px 4px; } }
.support-admin-thread { height:420px; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:14px; }
.support-admin-composer { display:grid; gap:10px; padding:20px; border-top:1px solid var(--border-subtle); }
.support-answer-list { display:grid; gap:8px; max-height:500px; overflow:auto; padding:20px; }
.support-answer-list button { text-align:left; padding:12px; border:1px solid var(--border-subtle); border-radius:var(--radius-sm); background:var(--surface-1); color:var(--text-primary); cursor:pointer; }
.support-answer-list small { display:block; margin-top:6px; color:var(--text-muted); }
.support-answer-editor { display:grid; gap:14px; padding:20px; }
@media(max-width:760px) { .support-widget { right:16px; bottom:calc(76px + env(safe-area-inset-bottom)); } .support-launcher { width:56px; height:56px; border-radius:20px; } .support-chat { bottom:68px; height:min(540px,calc(100dvh - 172px)); transform-origin:calc(100% - 28px) calc(100% + 40px); } .support-greeting { bottom:68px; } .support-center { grid-template-columns:minmax(0,1fr); } .support-admin-thread { height:350px; } }
@media(max-width:520px) { .support-chat__composer { padding:12px 18px; } .support-chat__composer > small,.support-chat__foot { display:none; } .support-history { top:118px; max-height:min(300px,calc(100% - 170px)); } }
@media(prefers-reduced-motion:reduce) { .support-widget *,.support-message { animation:none !important; transition:none !important; } }
/* Marketing has its own palette; map its existing tokens locally, never load the panel stylesheet. */
.support-widget--public { --surface-1:#fff; --surface-2:var(--soft); --text-primary:var(--ink); --text-secondary:var(--muted); --text-muted:var(--muted); --text-inverse:#fff; --border-default:var(--line); --border-subtle:var(--line); --accent-soft:color-mix(in srgb,var(--accent) 9%,var(--surface-1)); --radius-xs:6px; --radius-sm:8px; --radius-lg:16px; --radius-xl:24px; --text-xs:12px; --text-sm:14px; --shadow-md:0 8px 24px color-mix(in srgb,var(--ink) 8%,transparent); --shadow-lg:0 16px 48px color-mix(in srgb,var(--ink) 14%,transparent); }
.support-widget--public .icon-button { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--surface-1); color:var(--ink); }
@media(max-width:760px) { .support-widget--public { bottom:calc(20px + env(safe-area-inset-bottom)); } .support-widget--public .support-chat { height:min(540px,calc(100dvh - 110px)); } }