/* SIDEKICK-BUILD-1027-C · SIDEKICK-VOICE-FACE-1027 — Maven's face: ONE indicator, seven states (INTEGRATION-SPEC §3).
   From the approved mock kit (SIDEKICK-MOCKUPS-1027/pages/kit/face.css + sk.css .holdbtn/.mvnl), self-contained: its own
   --fsf-* tokens (KIT v1.4 values), light and dark (.fs-dark / [data-theme=dark], Mission Control's two switches).
   States: idle · listening · thinking · answering · awaiting_approval · acting · error.  prefers-reduced-motion → colour only.
   Also: the dock launcher's ring (.mvn-fab[data-state]), the hold-to-talk button (.fs-ptt) and its consent line. */
:root{--fsf-line-2:#dbdbea;--fsf-hex-fill:#fff;--fsf-hex-ink:#5b57ef;--fsf-violet:#615dfa;--fsf-violet-soft:#ebeafe;
 --fsf-violet-ink:#514dfa;--fsf-brand-grad:linear-gradient(90deg,#ff2e93 0%,#b23cf5 45%,#6d5cff 100%);--fsf-amber:#8a5300;
 --fsf-amber-soft:#fdf1dc;--fsf-green-dot:#16a34a;--fsf-green-soft:#e3f6ea;--fsf-red:#b42318;--fsf-pink:#e5006f;--fsf-surface:#fff;
 --fsf-ink:#151629;--fsf-ink-2:#3a3c55;--fsf-ink-3:#62647c;--fsf-r:8px;--fsf-t:.25s;
 --fsf-display:"Inter Display","Inter Tight","Inter",ui-sans-serif,system-ui,sans-serif;--fsf-shadow:0 8px 24px rgba(21,22,41,.12)}
.fs-dark,[data-theme=dark]{--fsf-line-2:#33344b;--fsf-hex-fill:#1d1e2b;--fsf-hex-ink:#8683fd;--fsf-violet-soft:#1a2041;--fsf-violet-ink:#a3a0ff;
 --fsf-amber:#f5b54a;--fsf-amber-soft:#30240f;--fsf-green-dot:#22c55e;--fsf-green-soft:#12301f;--fsf-red:#ff8a80;--fsf-pink:#ff2e93;
 --fsf-surface:#1d1e2b;--fsf-ink:#ececf6;--fsf-ink-2:#c5c6d6;--fsf-ink-3:#9b9db4;--fsf-shadow:0 8px 24px rgba(0,0,0,.45)}

/* ── the face ─────────────────────────────────────────────────────────────────────────────────── */
.fs-face{--s:64px;--lvl:0;position:relative;width:var(--s);height:calc(var(--s)*1.1);display:inline-grid;place-items:center;flex:none;vertical-align:middle}
.fs-face .ring,.fs-face .core{position:absolute;inset:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.fs-face .ring{background:var(--fsf-line-2);transition:background var(--fsf-t)}
.fs-face .core{inset:3px;background:var(--fsf-hex-fill);display:grid;place-items:center}
.fs-face .core b{font-family:var(--fsf-display);font-weight:800;font-size:calc(var(--s)*.34);line-height:1;color:var(--fsf-hex-ink);letter-spacing:-.02em}
.fs-face .core img{width:62%;height:62%;object-fit:contain}
.fs-face[data-state=listening] .ring{background:var(--fsf-violet);animation:fsf-breathe 1.6s ease-in-out infinite}
.fs-face[data-state=thinking] .ring{background:conic-gradient(from 0deg,var(--fsf-violet) 0 25%,var(--fsf-line-2) 25% 100%);animation:fsf-orbit 1.1s linear infinite}
.fs-face[data-state=answering] .ring{background:var(--fsf-brand-grad);animation:fsf-pulse .9s ease-in-out infinite}
.fs-face[data-state=awaiting_approval] .ring{background:var(--fsf-amber)}
.fs-face[data-state=acting] .ring{background:conic-gradient(from 0deg,var(--fsf-green-dot) 0 60%,var(--fsf-green-soft) 60% 100%);animation:fsf-orbit 2.4s linear infinite}
.fs-face[data-state=error] .ring{background:var(--fsf-red)}
.fs-face .dot{position:absolute;right:-2px;bottom:4px;width:12px;height:12px;border-radius:3px;background:var(--fsf-amber);border:2px solid var(--fsf-surface);display:none}
.fs-face[data-state=awaiting_approval] .dot{display:block}
.face-label{font-size:12.5px;color:var(--fsf-ink-3);display:inline-flex;align-items:center;gap:6px}
.face-label i{width:8px;height:8px;border-radius:2px;background:var(--fsf-line-2);display:inline-block}
[data-state=listening]+.face-label i,[data-state=thinking]+.face-label i{background:var(--fsf-violet)}
[data-state=answering]+.face-label i{background:var(--fsf-pink)}[data-state=awaiting_approval]+.face-label i{background:var(--fsf-amber)}
[data-state=acting]+.face-label i{background:var(--fsf-green-dot)}[data-state=error]+.face-label i{background:var(--fsf-red)}
/* the launcher card ("Maven · Resting") — mock .mvnl */
.fs-mvnl{position:relative;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 14px 0 6px;border-radius:var(--fsf-r);background:var(--fsf-surface);border:1px solid var(--fsf-line-2);box-shadow:var(--fsf-shadow);font-weight:700;font-size:13px;color:var(--fsf-ink)}
.fs-mvnl .lbl{white-space:nowrap}.fs-mvnl .fs-face{--s:36px}
.fs-cstate{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--fsf-ink-2);margin-left:6px}

/* ── the dock: the live launcher's ring follows the state (fs_maven_bubble, data-state on [data-mvn-fab]) ── */
.mvn-fab[data-state] .mvn-ring::before{transition:border-color var(--fsf-t),opacity var(--fsf-t)}
.mvn-fab[data-state=listening] .mvn-ring::before{border-color:var(--fsf-violet);opacity:1;animation:fsf-breathe 1.6s ease-in-out infinite}
.mvn-fab[data-state=thinking] .mvn-ring::before{border-color:var(--fsf-violet) transparent transparent transparent;opacity:1;animation:fsf-orbit 1.1s linear infinite}
.mvn-fab[data-state=answering] .mvn-ring::before{border-color:#ff2e93 #b23cf5 #6d5cff #b23cf5;opacity:1;animation:fsf-pulse .9s ease-in-out infinite}
.mvn-fab[data-state=awaiting_approval] .mvn-ring::before{border-color:var(--fsf-amber);opacity:1;animation:none}
.mvn-fab[data-state=acting] .mvn-ring::before{border-color:var(--fsf-green-dot) var(--fsf-green-dot) var(--fsf-green-soft) var(--fsf-green-soft);opacity:1;animation:fsf-orbit 2.4s linear infinite}
.mvn-fab[data-state=error] .mvn-ring::before{border-color:var(--fsf-red);opacity:1;animation:none}
/* the state ring drawn on the live launcher's hexagon edge (the hexagon clips anything round outside it) */
.mvn-fab .fsf-hexring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}
.mvn-fab .fsf-hexring polygon{fill:none;stroke:transparent;stroke-width:6;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:stroke var(--fsf-t)}
.mvn-fab[data-state=listening] .fsf-hexring polygon{stroke:var(--fsf-violet)}
.mvn-fab[data-state=listening] .fsf-hexring{animation:fsf-breathe 1.6s ease-in-out infinite}
.mvn-fab[data-state=thinking] .fsf-hexring polygon{stroke:var(--fsf-violet);stroke-dasharray:25 75;animation:fsf-dash 1.1s linear infinite}
.mvn-fab[data-state=answering] .fsf-hexring polygon{stroke:#ff2e93}
.mvn-fab[data-state=answering] .fsf-hexring{animation:fsf-pulse .9s ease-in-out infinite}
.mvn-fab[data-state=awaiting_approval] .fsf-hexring polygon{stroke:var(--fsf-amber)}
.mvn-fab[data-state=acting] .fsf-hexring polygon{stroke:var(--fsf-green-dot);stroke-dasharray:60 40;animation:fsf-dash 2.4s linear infinite}
.mvn-fab[data-state=error] .fsf-hexring polygon{stroke:var(--fsf-red)}
@keyframes fsf-dash{to{stroke-dashoffset:-100}}
.mvn-fab .fsf-qd{position:absolute;right:-4px;top:-4px;width:12px;height:12px;border-radius:3px;background:var(--fsf-amber);border:2px solid var(--fsf-surface);display:none;z-index:3}
.mvn-fab[data-state=awaiting_approval] .fsf-qd{display:block}
.mvn-hd .fs-face{--s:30px;margin-right:2px}
.mvn-hd [data-face-text]{color:var(--fsf-ink-3)}
[data-mvn-panel][data-state=listening] .mvn-hd [data-face-text],[data-mvn-panel][data-state=thinking] .mvn-hd [data-face-text]{color:var(--fsf-violet-ink)}
[data-mvn-panel][data-state=awaiting_approval] .mvn-hd [data-face-text]{color:var(--fsf-amber)}
[data-mvn-panel][data-state=error] .mvn-hd [data-face-text]{color:var(--fsf-red)}

/* ── hold to talk (mock .holdbtn) ─────────────────────────────────────────────────────────────── */
.fs-ptt{height:40px;min-width:40px;padding:0 12px;border-radius:var(--fsf-r);display:inline-flex;align-items:center;justify-content:center;gap:8px;
 font:700 13px/1 Inter,ui-sans-serif,system-ui,sans-serif;background:var(--fsf-violet-soft);color:var(--fsf-violet-ink);
 border:1px solid color-mix(in oklab,var(--fsf-violet) 40%,transparent);cursor:pointer;white-space:nowrap;flex:none;touch-action:none;user-select:none;-webkit-user-select:none}
.fs-ptt svg{width:16px;height:16px;flex:none}
.fs-ptt:focus-visible{outline:2px solid var(--fsf-violet);outline-offset:2px}
.fs-ptt.held,.fs-ptt[aria-pressed=true]{background:var(--fsf-violet);color:#fff}
.fs-ptt.busy{opacity:.7;cursor:progress}
.fs-ptt .lbl:empty{display:none}
.fs-ptt-tip{position:fixed;z-index:2147483000;max-width:min(340px,calc(100vw - 32px));padding:10px 12px;border-radius:var(--fsf-r);background:var(--fsf-ink);color:var(--fsf-surface);
 font:600 13px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;box-shadow:var(--fsf-shadow)}
.fs-ptt-tip .row{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
.fs-ptt-tip button{height:32px;padding:0 12px;border-radius:var(--fsf-r);font:700 12.5px Inter,ui-sans-serif,sans-serif;cursor:pointer;border:1px solid transparent}
.fs-ptt-tip .ok{background:var(--fsf-violet);color:#fff}
.fs-ptt-tip .no{background:transparent;color:inherit;border-color:color-mix(in oklab,currentColor 35%,transparent)}
.fs-ptt-cap{font:600 12px/1.3 Inter,ui-sans-serif,sans-serif;color:var(--fsf-ink-3)}
.fs-face-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@keyframes fsf-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes fsf-orbit{to{transform:rotate(360deg)}}
@keyframes fsf-pulse{0%,100%{transform:scale(1)}50%{transform:scale(calc(1.02 + var(--lvl,0)*.08))}}
@media (prefers-reduced-motion:reduce){
 .fs-face .ring,.mvn-fab[data-state] .mvn-ring::before,.mvn-fab .fsf-hexring,.mvn-fab .fsf-hexring polygon{animation:none!important;transform:none!important}
 .mvn-fab .fsf-hexring polygon{stroke-dasharray:none!important}
 .fs-face[data-state=thinking] .ring{background:var(--fsf-violet)}.fs-face[data-state=acting] .ring{background:var(--fsf-green-dot)}
 .mvn-fab[data-state=thinking] .mvn-ring::before{border-color:var(--fsf-violet)}.mvn-fab[data-state=acting] .mvn-ring::before{border-color:var(--fsf-green-dot)}}