/* Sophia docked bar + office (staff app). Copies the BSB pattern: a dark glass pill "Ask Sophia..." with a round green arrow at its right end,
   docked ABOVE the tab bar. Tap or type in it and her office takes the whole screen; the back control shrinks her back to the bar. */
:root{--sophia-bar-bottom:calc(72px + env(safe-area-inset-bottom))}
#sophia-barwrap{position:fixed;left:0;right:0;bottom:var(--sophia-bar-bottom);z-index:4;padding:0 10px 6px;pointer-events:none;display:flex;justify-content:center}
#sophia-barwrap[hidden]{display:none}
#sophia-bar{pointer-events:auto;width:100%;max-width:620px;height:42px;display:flex;align-items:center;gap:8px;padding:0 6px 0 14px;border-radius:999px;background:rgba(10,18,28,.88);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(128,246,178,.28);box-shadow:0 10px 28px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
#sophia-bar input{flex:1 1 auto;min-width:0;min-height:0;height:100%;border:0;background:transparent;color:#eaf4ee;font:600 14px/1 system-ui,sans-serif;padding:0;outline:none}
#sophia-bar input::placeholder{color:#9db0a5}
#sophia-bar .go{flex:0 0 auto;width:30px;height:30px;min-width:30px;min-height:30px;padding:0;border-radius:50%;border:0;display:grid;place-items:center;background:linear-gradient(135deg,#80f6b2,#1cb555);color:#04210f;font-size:14px;font-weight:900;box-shadow:0 2px 8px rgba(28,181,85,.4)}
/* keep page content and its primary buttons clear of the bar: the bar's height is reserved at the bottom of the page */
body.sophia-on #app{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
#sophia-office{position:fixed;z-index:60;background:var(--bg,#fff);color:var(--ink,#111);display:none;flex-direction:column;overflow:hidden;transition:top .32s cubic-bezier(.2,.8,.2,1),left .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1),height .32s cubic-bezier(.2,.8,.2,1),border-radius .32s cubic-bezier(.2,.8,.2,1)}
#sophia-office.on{display:flex}
@media (prefers-reduced-motion:reduce){#sophia-office{transition:none}}
.so-hd{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 6px;background:#04080d;color:#eaf4ee}
.so-rb{min-height:44px;min-width:44px;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1}
.so-rb.big{width:52px;height:52px;font-size:22px}
.so-title{flex:1;font-weight:800;display:flex;align-items:center;gap:8px}
.so-dot{width:9px;height:9px;border-radius:50%;background:#35d07f;box-shadow:0 0 8px #35d07f}
.so-sub{display:flex;align-items:center;gap:8px;padding:2px 14px 6px;background:#04080d;color:#9db0a5;font-size:13px}
.so-status{flex:1}
.so-mute{min-height:32px;min-width:32px;width:32px;height:32px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:15px}
.so-stage{position:relative;flex:1;overflow:hidden;background:#04080d;display:flex;flex-direction:column}
.so-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;opacity:.55}
.so-cards{position:relative;display:flex;gap:8px;padding:8px 12px;flex-wrap:wrap}
.so-card{background:rgba(10,18,28,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(128,246,178,.25);color:#eaf4ee;border-radius:12px;padding:6px 10px;font-size:13px}
.so-card:empty{display:none}
.so-log{position:relative;flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.so-harvest{position:absolute;left:0;right:0;bottom:0;top:44px;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:8px;background:rgba(4,8,13,.82)}
.so-harvest[hidden]{display:none}
.so-m{max-width:88%;padding:9px 12px;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px}
.so-m.s{background:rgba(10,18,28,.8);color:#eaf4ee;border:1px solid rgba(128,246,178,.25);align-self:flex-start}
.so-m.u{background:#1cb555;color:#04210f;align-self:flex-end}
.so-m.n{align-self:center;color:#c8d5cc;font-size:14px;text-align:center;background:rgba(10,18,28,.6)}
.so-ai{font-size:12px;color:#9db0a5;text-align:center;padding:3px 8px;background:#04080d}
.so-ft{display:flex;gap:8px;padding:8px 10px;background:#04080d}
.so-ft[hidden]{display:none}
.so-ft textarea{min-height:48px;height:48px;resize:none;flex:1}
.so-ft button{min-height:48px;min-width:48px;padding:6px 12px}
.so-dock{display:flex;gap:8px;padding:8px 10px calc(10px + env(safe-area-inset-bottom));background:#04080d}
.so-dk{flex:1;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#eaf4ee;padding:6px 2px}
.so-dk.on{background:linear-gradient(135deg,#80f6b2,#1cb555);color:#04210f;border-color:transparent}
.so-di{font-size:22px;line-height:1}.so-dl{font-size:12px;font-weight:800;letter-spacing:.06em}
.so-key{border:2px dashed #1cb555}

/* voice layer: banner, read control, captions, comfort type. Dense small-phone layout: 28px controls, 24px minimum hit area. */
.sv-banner{position:fixed;left:8px;right:8px;top:calc(8px + env(safe-area-inset-top));z-index:50;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#04080d;color:#eaf4ee;border:1px solid #35d07f;border-radius:12px;padding:6px 10px;font-size:14px}
.sv-banner button,.sv-read,.sv-ctl button,.sv-ctl select{min-height:28px;min-width:28px;padding:2px 10px;font-size:14px;border-radius:8px}
.sv-read{margin:6px 0 0;background:transparent;color:inherit;border:1px solid var(--line,#999)}
.sv-ctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.sv-ctl select{min-height:28px;width:auto;border-width:1px;padding:0 6px}
.sv-caps{display:flex;flex-direction:column;gap:6px}
.sv-line{padding:6px 10px;border-radius:10px;background:rgba(10,18,28,.78);color:#fff;font-size:17px;line-height:1.5;border-left:4px solid transparent;text-align:left}
.sv-line.head{font-weight:800}.sv-line.note{color:#e6efe9;font-size:15px}
.sv-line.now{border-left-color:#35d07f;background:#0f2a1c;outline:1px solid #35d07f}
.sv-check{display:flex;align-items:center;gap:8px;margin:8px 0;font-weight:600}.sv-check input{width:24px;min-height:24px;height:24px}
.sv-due{border-color:#f2c14e}
/* easy-reading type: open widely spaced system font, taller lines, left-aligned short lines, high contrast. No outside font is requested. */
body.sophia-dys{font-family:"Atkinson Hyperlegible",Verdana,Tahoma,"Trebuchet MS",system-ui,sans-serif;letter-spacing:0.04em;word-spacing:0.16em;line-height:1.8;text-align:left;color:#111111}
body.sophia-dys #app,body.sophia-dys .so-m,body.sophia-dys .sv-line,body.sophia-dys .card{font-family:inherit;letter-spacing:inherit;word-spacing:inherit;line-height:inherit;text-align:left;max-width:60ch}
body.sophia-dys .muted,body.sophia-dys .small{color:#111111;font-size:16px}

/* HARVEST (talk about your day): calm mic waveform, a Listening line, cut chips. Dense, 28px+ controls. */
.so-hv-top{display:flex;align-items:center;gap:10px}
.so-mic{min-width:48px;min-height:48px;width:48px;height:48px;border-radius:50%;border:0;background:#1cb555;color:#04210f;font-size:22px;padding:0}
.so-mic[aria-pressed="true"]{box-shadow:0 0 0 3px rgba(128,246,178,.45)}
.so-wave{flex:1;height:40px;display:flex;align-items:center;gap:3px}
.so-wave span{flex:1;height:4px;border-radius:2px;background:rgba(128,246,178,.45)}
.so-wave.on span{animation:so-wv 1.6s ease-in-out infinite;background:#80f6b2}
.so-wave.on span:nth-child(3n){animation-delay:.2s}.so-wave.on span:nth-child(3n+1){animation-delay:.5s}.so-wave.on span:nth-child(5n){animation-delay:.9s}
@keyframes so-wv{0%,100%{height:4px}50%{height:26px}}
@media (prefers-reduced-motion:reduce){.so-wave.on span{animation:none;height:14px}}
.so-listen{font-weight:700}
.so-harvest textarea{width:100%;min-height:64px;box-sizing:border-box}
.so-chips{display:flex;flex-wrap:wrap;gap:6px}
.so-chip{min-height:28px;padding:2px 10px;border-radius:14px;border:1px solid rgba(128,246,178,.5);background:rgba(10,18,28,.8);color:#eaf4ee;font-size:14px}
.so-chip.cut{text-decoration:line-through;opacity:.55}
.so-keep{display:flex;align-items:center;gap:8px;color:#eaf4ee;font-size:14px}.so-keep input{width:24px;height:24px;min-height:24px}
.so-dock{gap:6px}.so-dl{font-size:11px}

/* ---- Sophia's Office stage (BSB look): full-bleed photoreal Sophia clip, status line, speaker on the stage, red record button, quick chips. Brand-neutral. Local assets only (/sophia/stage.mp4, stage.jpg). ---- */
.so-portrait{opacity:1;object-fit:cover;object-position:center 22%;background:#04080d}
.so-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,6,11,.55),rgba(2,6,11,0) 22%,rgba(2,6,11,0) 46%,rgba(2,6,11,.82) 100%)}
.so-stage > .so-mute{position:absolute;top:8px;right:10px;z-index:3;min-height:36px;min-width:36px;width:36px;height:36px;background:rgba(4,8,13,.62);border:1px solid rgba(128,246,178,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.so-stage > .so-cards{z-index:2}
.so-stage > .so-log{z-index:2}
.so-stage > .so-harvest{z-index:4}
.so-m.s,.so-m.n{-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3)}
.so-qchips{position:relative;z-index:2;display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 4px;justify-content:flex-start}
.so-qc{min-height:30px;padding:3px 11px;border-radius:15px;border:1px solid rgba(128,246,178,.5);background:rgba(4,8,13,.66);color:#eaf4ee;font-size:13px;font-weight:700;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.so-rec{position:absolute;z-index:3;right:12px;bottom:12px;width:52px;height:52px;min-width:52px;min-height:52px;padding:0;border-radius:50%;border:3px solid rgba(255,255,255,.9);background:rgba(4,8,13,.5);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.so-rec-dot{width:26px;height:26px;border-radius:50%;background:#e5342d;display:block;transition:border-radius .15s,transform .15s}
.so-rec[aria-pressed="true"] .so-rec-dot{border-radius:6px;transform:scale(.8)}
#sophia-office[data-state="listening"] .so-rec{box-shadow:0 0 0 4px rgba(229,52,45,.45),0 6px 18px rgba(0,0,0,.5)}
#sophia-office[data-state="speaking"] .so-status::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#80f6b2}
#sophia-office[data-state="listening"] .so-status::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#e5342d}
.so-dot{animation:so-pulse 1.9s infinite}
@keyframes so-pulse{0%,100%{box-shadow:0 0 4px #35d07f}50%{box-shadow:0 0 12px #35d07f}}
@media (prefers-reduced-motion:reduce){.so-dot{animation:none}.so-rec-dot{transition:none}}
/* light theme: the stage stays a photo; only the strips around it follow the page, so text keeps contrast */
@media (prefers-color-scheme:light){#sophia-office .so-hd,#sophia-office .so-sub,#sophia-office .so-ft,#sophia-office .so-dock,#sophia-office .so-ai{background:#04080d}}

/* ---- Sophia's Office = the BSB office controls (2026-11-01): ONE speaker (top right), FOUR dock buttons SPEAK TYPE EYES HARVEST, a red stop button only while listening.
   The app adds Close (top left) and one briefing button. Source of truth: /opt/sophia-office/public/index.html. ---- */
#sophia-office [hidden]{display:none !important}
.so-stage > .so-x{position:absolute;top:8px;left:10px;z-index:3;min-height:36px;min-width:36px;width:36px;height:36px;padding:0;border-radius:50%;background:rgba(4,8,13,.62);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:16px;line-height:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.so-stage > .so-status{position:absolute;top:16px;left:56px;right:56px;z-index:2;text-align:center;font-size:12px;color:#eaf4ee;text-shadow:0 1px 3px #000;pointer-events:none}
.so-stage > .so-cards{margin-top:52px}
.so-help{font-size:12px;line-height:1.35;padding:6px 10px}
.so-help b{color:#80f6b2}
.so-brief{min-height:36px;padding:4px 14px;border-radius:18px;border:1px solid rgba(128,246,178,.6);background:rgba(4,8,13,.7);color:#eaf4ee;font-size:14px;font-weight:700;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.so-tap{min-height:44px;padding:6px 16px;border-radius:22px;border:0;background:#1cb555;color:#04210f;font-size:16px;font-weight:800}
.so-stage > .so-rec{display:none;left:50%;right:auto;bottom:14px;transform:translateX(-50%);width:64px;height:64px;min-width:64px;min-height:64px}
#sophia-office[data-state="listening"] .so-stage > .so-rec{display:grid}
/* CONVO: the red record button drives the conversation (SophiaConvo), so it stays on the SPEAK screen in every conversation state, not only while listening */
#sophia-office[data-mode="speak"] .so-stage > .so-rec.sc-mic{display:grid}
#sophia-office[data-state="listening"] .so-dock{display:none}
#sophia-office[data-mode="type"] .so-dk[aria-label="SPEAK"],#sophia-office[data-mode="type"] .so-dk[aria-label="EYES"]{visibility:hidden}
.so-dk{min-height:56px}
.so-stage > .so-panel{top:52px}

/* clean office: pull-down history, What are these? */
.so-histbar{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:auto;padding:2px 8px;font-size:12px;color:#c8d5cc;text-shadow:0 1px 3px #000;transition:transform .12s}
.so-histbar.ready{color:#80f6b2}
.so-load{min-height:28px;min-width:28px;padding:2px 10px;border-radius:14px;border:1px solid rgba(128,246,178,.5);background:rgba(4,8,13,.66);color:#eaf4ee;font-size:12px;font-weight:700}
.so-histbox{display:flex;flex-direction:column;gap:8px}
.so-histbox:empty{display:none}
.so-dh{align-self:center;font-size:12px;font-weight:800;color:#eaf4ee;background:rgba(4,8,13,.7);border-radius:10px;padding:2px 10px}
.so-mk{align-self:center;font-size:11px;color:#c8d5cc;text-align:center}
.so-old{opacity:.88}
.so-what{min-height:28px;min-width:28px;align-self:flex-start;padding:2px 12px;border-radius:14px;border:1px solid rgba(128,246,178,.5);background:rgba(4,8,13,.66);color:#eaf4ee;font-size:12px;font-weight:700}
.so-cards{flex-direction:column;align-items:flex-start}
.so-cards .so-card:empty{display:none}

.so-stage{overflow:hidden;overflow:clip} /* a focus or scrollIntoView can never slide the stage (and the Close button) out of place */