/* 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}