/* SOPHIA LIVE (2026-11-02): the clean office. Conversation, one row of sliding shortcut chips, one Live pill. A soft WHITE veil over Sophia (no black edge, no dark vignette).
   Everything here is scoped to #sophia-office[data-clean="1"]; data-clean="0" (localStorage sophia_office_classic=1) is the old dark layout, untouched.
   Dark theme (phone set to dark, or the app's own Dark switch): a dark-NEUTRAL veil and light text, only there. Dense small-phone layout, 24px minimum hit area. */
#sophia-office[data-clean="1"]{--so-ink:#0f1b24;--so-sub:#465663;--so-card:rgba(255,255,255,.92);--so-card-solid:#fff;--so-line:rgba(15,27,36,.12);--so-glass:rgba(255,255,255,.82);--so-acc:#1cb555;--so-acc-ink:#04210f;
  --so-v0:rgba(255,255,255,.66);--so-v1:rgba(255,255,255,.14);--so-v2:rgba(255,255,255,.10);--so-v3:rgba(255,255,255,.80);--so-v4:rgba(255,255,255,.94);--so-shadow:rgba(20,40,60,.16);
  --office-scrim-alpha:.35;--so-s0:rgb(255 255 255 / calc(.66 * var(--office-scrim-alpha)));--so-s1:rgb(255 255 255 / calc(.14 * var(--office-scrim-alpha)));--so-s2:rgb(255 255 255 / calc(.10 * var(--office-scrim-alpha)));--so-s3:rgb(255 255 255 / calc(.80 * var(--office-scrim-alpha)));--so-s4:rgb(255 255 255 / calc(.94 * var(--office-scrim-alpha)))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #sophia-office[data-clean="1"]{--so-ink:#eef3f7;--so-sub:#b4c0cb;--so-card:rgba(24,30,38,.9);--so-card-solid:#1b232c;--so-line:rgba(255,255,255,.16);--so-glass:rgba(24,30,38,.78);--so-acc:#35d07f;--so-acc-ink:#04210f;
  --so-v0:rgba(16,21,28,.62);--so-v1:rgba(16,21,28,.10);--so-v2:rgba(16,21,28,.08);--so-v3:rgba(16,21,28,.70);--so-v4:rgba(16,21,28,.90);--so-shadow:rgba(0,0,0,.35);--so-s0:var(--so-v0);--so-s1:var(--so-v1);--so-s2:var(--so-v2);--so-s3:var(--so-v3);--so-s4:var(--so-v4)}}
:root[data-theme="dark"] #sophia-office[data-clean="1"]{--so-ink:#eef3f7;--so-sub:#b4c0cb;--so-card:rgba(24,30,38,.9);--so-card-solid:#1b232c;--so-line:rgba(255,255,255,.16);--so-glass:rgba(24,30,38,.78);--so-acc:#35d07f;--so-acc-ink:#04210f;
  --so-v0:rgba(16,21,28,.62);--so-v1:rgba(16,21,28,.10);--so-v2:rgba(16,21,28,.08);--so-v3:rgba(16,21,28,.70);--so-v4:rgba(16,21,28,.90);--so-shadow:rgba(0,0,0,.35);--so-s0:var(--so-v0);--so-s1:var(--so-v1);--so-s2:var(--so-v2);--so-s3:var(--so-v3);--so-s4:var(--so-v4)}

/* the veil and the stage */
#sophia-office[data-clean="1"] .so-stage{background:var(--so-card-solid);color:var(--so-ink)}
#sophia-office[data-clean="1"] .so-portrait{background:var(--so-card-solid);transform:scale(calc(1 + var(--lvl,0) * 0.012));transition:transform .12s linear}
#sophia-office[data-clean="1"] .so-scrim{background:linear-gradient(180deg,var(--so-s0) 0,var(--so-s1) 20%,var(--so-s2) 46%,var(--so-s3) 74%,var(--so-s4) 100%)}
#sophia-office[data-clean="1"] .so-ai,#sophia-office[data-clean="1"] .so-hd,#sophia-office[data-clean="1"] .so-sub{display:none}
#sophia-office[data-clean="1"] .so-ft{background:var(--so-card-solid)}
/* the top controls: three small round buttons, nothing else */
#sophia-office[data-clean="1"] .so-stage > .so-x,#sophia-office[data-clean="1"] .so-stage > .so-mute,#sophia-office[data-clean="1"] .so-stage > .so-menu{background:var(--so-glass);color:var(--so-ink);border:1px solid var(--so-line);box-shadow:0 2px 8px var(--so-shadow)}
.so-stage > .so-menu{display:none}
#sophia-office[data-clean="1"] .so-stage > .so-menu{display:block;position:absolute;top:8px;right:54px;z-index:3;min-height:36px;min-width:36px;width:36px;height:36px;padding:0;border-radius:50%;font-size:18px;line-height:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#sophia-office[data-clean="1"] .so-stage > .so-status{color:var(--so-ink);text-shadow:0 1px 3px var(--so-card-solid)}
#sophia-office[data-clean="1"][data-state="listening"] .so-status::before{background:#e5342d}
/* the conversation */
#sophia-office[data-clean="1"] .so-m.s,#sophia-office[data-clean="1"] .so-m.n{background:var(--so-card);color:var(--so-ink);border:1px solid var(--so-line);box-shadow:0 2px 10px var(--so-shadow)}
#sophia-office[data-clean="1"] .so-m.u{background:var(--so-acc);color:var(--so-acc-ink);border:0}
#sophia-office[data-clean="1"] .so-log{padding-bottom:140px;gap:5px}
#sophia-office[data-clean="1"] .so-stage[data-convo] .so-log{padding-bottom:140px}
#sophia-office[data-clean="1"] .sc-layer{padding-bottom:140px;gap:5px}
#sophia-office[data-clean="1"] .so-m{font-size:15px;line-height:1.35;padding:6px 10px;border-radius:12px}
#sophia-office[data-clean="1"] .sc-card,#sophia-office[data-clean="1"] .sc-you{font-size:15px;padding:6px 10px;border-radius:12px}
#sophia-office[data-clean="1"] .ss-bubble{font-size:15px;padding:6px 10px}
#sophia-office[data-clean="1"] .so-dk{min-height:48px}
#sophia-office[data-clean="1"] .so-stage > .so-x,#sophia-office[data-clean="1"] .so-stage > .so-mute,#sophia-office[data-clean="1"] .so-stage > .so-menu{min-height:32px;min-width:32px;width:32px;height:32px}
#sophia-office[data-clean="1"] .so-stage > .so-menu{right:50px;font-size:15px}
#sophia-office[data-clean="1"] .so-stage > .so-x{font-size:14px}
#sophia-office[data-clean="1"] .so-stage > .so-status{font-size:13px}
#sophia-office[data-clean="1"] .so-log{padding-bottom:100px}
#sophia-office[data-clean="1"] .sc-layer,#sophia-office[data-clean="1"] .so-stage[data-convo] .so-log{padding-bottom:100px}
#sophia-office[data-clean="1"] .sc-card{background:var(--so-card);color:var(--so-ink);border:1px solid var(--so-line);box-shadow:0 2px 10px var(--so-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#sophia-office[data-clean="1"] .sc-card.sc-sys{background:var(--so-glass)}
#sophia-office[data-clean="1"] .sc-you{background:var(--so-acc);color:var(--so-acc-ink);border:0}
#sophia-office[data-clean="1"] .ss-bubble{background:var(--so-card);color:var(--so-ink);border:1px solid var(--so-line);box-shadow:0 2px 10px var(--so-shadow)}
#sophia-office[data-clean="1"] .so-histbar{display:none} /* pulling the chat down still loads earlier talk; the little bar is not shown */
#sophia-office[data-clean="1"] .so-load,#sophia-office[data-clean="1"] .so-what,#sophia-office[data-clean="1"] .so-brief,#sophia-office[data-clean="1"] .so-chip{background:var(--so-card);color:var(--so-ink);border:1px solid var(--so-line)}
#sophia-office[data-clean="1"] .so-dh{background:var(--so-glass);color:var(--so-ink)}
#sophia-office[data-clean="1"] .so-mk{color:var(--so-sub)}
#sophia-office[data-clean="1"] .so-harvest{background:var(--so-v4);color:var(--so-ink)}
/* the old record button, mic dock and explanation: Live replaces them (they stay in the page for the SPEAK button in the menu) */
#sophia-office[data-clean="1"] .so-stage > .so-rec,#sophia-office[data-clean="1"] .sc-dock,#sophia-office[data-clean="1"] .sc-explain{display:none !important}
/* the menu: the four buttons and the little cards live behind the three dots */
#sophia-office[data-clean="1"][data-menu="closed"] .so-cards,#sophia-office[data-clean="1"][data-menu="closed"] .so-dock{display:none}
#sophia-office[data-clean="1"][data-menu="open"] .so-cards{position:absolute;top:50px;left:10px;right:10px;z-index:6;margin:0;padding:8px;max-height:46%;overflow-y:auto;background:var(--so-card-solid);border:1px solid var(--so-line);border-radius:14px;box-shadow:0 8px 24px var(--so-shadow)}
#sophia-office[data-clean="1"][data-menu="open"] .so-cards .so-card{background:transparent;color:var(--so-ink);border:1px solid var(--so-line);-webkit-backdrop-filter:none;backdrop-filter:none}
#sophia-office[data-clean="1"][data-menu="open"] .so-cards .so-card *{color:inherit}
#sophia-office[data-clean="1"][data-menu="open"] .so-dock{position:absolute;left:0;right:0;bottom:0;z-index:7;background:var(--so-card-solid);border-top:1px solid var(--so-line)}
#sophia-office[data-clean="1"][data-menu="open"] .so-dk{background:transparent;color:var(--so-ink);border:1px solid var(--so-line)}
#sophia-office[data-clean="1"][data-menu="open"] .so-dk.on{background:var(--so-acc);color:var(--so-acc-ink)}
#sophia-office[data-clean="1"][data-state="listening"][data-menu="open"] .so-dock{display:flex}

/* the bottom: one row of chips and one Live pill, both var(--d-btn-h) tall. The one-line AI note is OFF (OFFICE_SHOW_AI_NOTE=false in sophia-live.js); .sl-legal stays styled for when it returns. */
.sl-bar{display:none}
#sophia-office[data-clean="1"] .sl-bar{display:flex;position:absolute;left:0;right:0;bottom:0;z-index:5;flex-direction:column;gap:5px;padding:0 0 calc(8px + env(safe-area-inset-bottom));pointer-events:none}
#sophia-office[data-clean="1"][data-menu="open"] .sl-bar{display:none}
.sl-bar > *{pointer-events:auto}
.sl-chips{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;padding:2px 10px 3px;scroll-snap-type:x proximity;scroll-padding:0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x}
.sl-chips::-webkit-scrollbar{display:none}
.sl-chip{flex:0 0 auto;width:clamp(130px,calc((100% - 28px)/2),170px);height:var(--d-btn-h,34px);min-height:var(--d-btn-h,34px);display:flex;align-items:center;gap:6px;padding:2px 8px;border-radius:10px;border:1px solid var(--so-line);background:var(--so-card-solid);color:var(--so-ink);text-align:left;scroll-snap-align:start;box-shadow:0 2px 8px var(--so-shadow);font:inherit}
.sl-ci{flex:0 0 auto;width:18px;text-align:center;font-size:15px;line-height:1}
.sl-ct{display:flex;flex-direction:column;min-width:0;flex:1}
.sl-ct b{font:700 13px/1.15 system-ui,sans-serif;color:var(--so-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-ct small{font:500 12px/1.1 system-ui,sans-serif;color:var(--so-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-prow{display:flex;gap:6px;padding:0 10px;align-items:center}
.sl-pill{flex:1 1 auto;height:var(--d-btn-h,34px);min-height:var(--d-btn-h,34px);padding:0 12px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:18px;border:1px solid var(--so-line);background:var(--so-card-solid);color:var(--so-ink);font:700 14px/1 system-ui,sans-serif;box-shadow:0 2px 10px var(--so-shadow),0 0 0 calc(var(--lvl,0) * 9px) rgba(28,181,85,.22);transition:box-shadow .1s linear}
.sl-mail{flex:0 0 auto;height:var(--d-btn-h,34px);min-height:var(--d-btn-h,34px);min-width:24px;display:flex;align-items:center;gap:5px;padding:0 10px;border-radius:18px;border:1px solid var(--so-line);background:var(--so-card-solid);color:var(--so-ink);font:700 13px/1 system-ui,sans-serif;box-shadow:0 2px 8px var(--so-shadow)}
.sl-mail[hidden],.sl-mailmsg[hidden]{display:none}
.sl-mail{padding:0;min-width:34px;width:34px;justify-content:center;gap:0} /* icon only, 34px (icon OR word, never both) */
.sl-mi{font-size:15px;line-height:1}
.sl-mailmsg{position:absolute;left:10px;right:10px;bottom:100%;margin-bottom:4px;padding:5px 9px;border-radius:10px;background:var(--so-card-solid);border:1px solid var(--so-acc);color:var(--so-ink);font:600 13px/1.25 system-ui,sans-serif;overflow-wrap:anywhere;box-shadow:0 2px 8px var(--so-shadow);pointer-events:none}
.sl-bar[data-live="listening"] .sl-pill{border-color:var(--so-acc)}
.sl-bar[data-live="speaking"] .sl-pill{border-color:var(--so-acc);background:var(--so-card-solid)}
.sl-bar[data-live="thinking"] .sl-pill{border-color:#d6951a}
.sl-bar[data-live="ended"] .sl-txt{color:var(--so-sub)}
.sl-wave{display:flex;align-items:center;gap:3px;height:18px}
.sl-wave i{display:block;width:3px;height:6px;border-radius:2px;background:var(--so-acc);transform-origin:center}
.sl-bar[data-live="idle"] .sl-wave i:nth-child(2n){height:12px}.sl-bar[data-live="idle"] .sl-wave i:nth-child(3){height:18px}
.sl-bar[data-live="ended"] .sl-wave i{background:var(--so-sub)}
.sl-bar[data-live="listening"] .sl-wave i,.sl-bar[data-live="speaking"] .sl-wave i,.sl-bar[data-live="thinking"] .sl-wave i{animation:sl-w 1s ease-in-out infinite}
.sl-bar[data-live="thinking"] .sl-wave i{background:#d6951a;animation-duration:.6s}
.sl-wave i:nth-child(2){animation-delay:.12s!important}.sl-wave i:nth-child(3){animation-delay:.24s!important}.sl-wave i:nth-child(4){animation-delay:.36s!important}.sl-wave i:nth-child(5){animation-delay:.48s!important}
@keyframes sl-w{0%,100%{height:5px}50%{height:16px}}
.sl-ring-w{display:none;width:22px;height:22px}.sl-ring-w svg{width:22px;height:22px}
.sl-bar.sl-counting .sl-ring-w{display:inline-block}
.sl-ring-bg{fill:none;stroke:var(--so-line);stroke-width:2.5}
.sl-ring{fill:none;stroke:var(--so-acc);stroke-width:2.5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:14px 14px;opacity:var(--fade,1)}
.sl-bar.sl-counting .sl-wave{opacity:var(--fade,1)}
.sl-stop{flex:0 0 auto;width:var(--d-btn-h,34px);height:var(--d-btn-h,34px);min-width:var(--d-btn-h,34px);min-height:var(--d-btn-h,34px);padding:0;border-radius:50%;border:0;background:#e5342d;display:grid;place-items:center;box-shadow:0 2px 10px var(--so-shadow)}
.sl-stop[hidden]{display:none}
.sl-stop-dot{width:14px;height:14px;border-radius:3px;background:#fff;display:block}
.sl-legal{text-align:center;font:500 13px/1.2 system-ui,sans-serif;color:var(--so-sub);padding:0 12px;background:var(--so-card)}
/* typing dots while she thinks */
.sc-typing{align-self:flex-start;display:flex;gap:5px;padding:9px 12px;border-radius:16px 16px 16px 4px;background:var(--so-card,rgba(255,255,255,.9));border:1px solid var(--so-line,rgba(0,0,0,.12))}
.sc-typing i{display:block;width:7px;height:7px;border-radius:50%;background:#7b8a96;animation:sl-dot 1s ease-in-out infinite}
.sc-typing i:nth-child(2){animation-delay:.15s}.sc-typing i:nth-child(3){animation-delay:.3s}
@keyframes sl-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.sl-wave i,.sc-typing i{animation:none!important}.sl-pill{transition:none}#sophia-office[data-clean="1"] .so-portrait{transform:none;transition:none}}
/* classic (the old dark layout): none of the new pieces show */
#sophia-office[data-clean="0"] .sl-bar,#sophia-office[data-clean="0"] .so-menu{display:none!important}