/* ══ W1 (2026-09-30): the in-app WatchFlow Assistant — W dial, bubble, sheet / right panel.
   Tokens follow Settings (Hal's liked style): navy ink, pale-blue selection, hairlines.
   Night / legacy themes use the app tokens; the Day remodel gets the exact Settings palette. ══ */
:root{
  --wfa-ink:var(--white,#f3f6fa);--wfa-ink2:var(--off-white,#c8d2de);--wfa-muted:var(--muted,#8593a4);
  --wfa-line:var(--border,rgba(255,255,255,.10));--wfa-bg:var(--bg-base,#0f141b);--wfa-raised:var(--bg-raised,#161c25);
  --wfa-panel:var(--bg-panel,#1f2733);--wfa-blue:var(--blue,#7ba4c9);--wfa-sel:color-mix(in srgb,var(--blue,#7ba4c9) 18%,var(--bg-raised,#161c25));
  --wfa-sel-ink:var(--white,#f3f6fa);--wfa-primary:var(--accent,#7d97b3);--wfa-primary-fg:var(--bg-void,#0a0e13);
  --wfa-shadow:0 12px 40px rgba(0,0,0,.45);--wfa-font:var(--font-body,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif)}
html[data-remodel="2"][data-remodel-mode="day"]{
  --wfa-ink:#13203a;--wfa-ink2:#23304a;--wfa-muted:#747f93;--wfa-line:#e3e8ee;--wfa-bg:#f5f7fa;--wfa-raised:#ffffff;--wfa-panel:#f4f7fb;
  --wfa-blue:#1f5392;--wfa-sel:#dcebfa;--wfa-sel-ink:#13203a;--wfa-primary:#3d6a96;--wfa-primary-fg:#ffffff;--wfa-shadow:0 12px 40px rgba(19,32,58,.18)}

/* ── the W dial (the assistant's face; its hand is the state) ── */
.wfa-dial{--d:30px;position:relative;display:inline-grid;place-items:center;width:var(--d);height:var(--d);border-radius:50%;
  border:1.6px solid currentColor;color:var(--wfa-ink);flex:none;box-sizing:border-box}
.wfa-dial b{font:700 calc(var(--d)*.4)/1 var(--wfa-font);letter-spacing:-.02em;transform:translateY(calc(var(--d)*.06))}
/* the hand: a short tick at 12 o'clock, above the W; it sweeps (thinking) or ticks (working) around the centre */
.wfa-dial i{position:absolute;left:50%;top:calc(var(--d)*.07);width:1.6px;height:calc(var(--d)*.16);margin-left:-.8px;border-radius:1px;background:currentColor;
  transform-origin:50% calc(var(--d)/2 - var(--d)*.07 - 1.6px);opacity:.6}
.wfa-dial[data-state="thinking"] i{animation:wfa-sweep 1.2s linear infinite;opacity:1}
.wfa-dial[data-state="working"] i{animation:wfa-tick 1.2s steps(12) infinite;opacity:1}
.wfa-dial[data-state="listening"]{animation:wfa-breathe 1.6s ease-in-out infinite}
.wfa-dial[data-state="speaking"]{animation:wfa-pulse .9s ease-in-out infinite}
.wfa-dial[data-state="needs"]{box-shadow:0 0 0 3px var(--wfa-sel)}
.wfa-dial[data-state="muted"],.wfa-dial[data-state="offline"]{opacity:.55}
.wfa-dial[data-state="offline"]{border-style:dashed}
@keyframes wfa-sweep{to{transform:rotate(360deg)}}
@keyframes wfa-tick{to{transform:rotate(360deg)}}
@keyframes wfa-breathe{50%{box-shadow:0 0 0 5px var(--wfa-sel)}}
@keyframes wfa-pulse{50%{transform:scale(1.06)}}

/* phone tab bar: the centre W */
.mobile-nav-item.wfa-tab .mobile-nav-icon{width:30px;height:30px;margin:-4px 0}
.mobile-nav-item.wfa-tab .wfa-dial{--d:30px;color:var(--wfa-ink);background:var(--wfa-raised)}
.mobile-nav-item.wfa-tab.wfa-open .wfa-dial{background:var(--wfa-sel);border-color:var(--wfa-blue);color:var(--wfa-blue)}
.mobile-nav-item.wfa-tab{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* desktop top bar: [W Ask WatchFlow ⌘J] */
.wfa-pill{display:none;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;margin-right:8px;border-radius:999px;
  border:1px solid var(--wfa-line);background:var(--wfa-raised);color:var(--wfa-ink);font:500 13px/1 var(--wfa-font);cursor:pointer}
.wfa-pill .wfa-dial{--d:24px}
.wfa-pill kbd{font:500 11px/1 var(--wfa-font);color:var(--wfa-muted);border:1px solid var(--wfa-line);border-radius:5px;padding:3px 5px;background:transparent}
.wfa-pill:hover{border-color:var(--wfa-blue)}
.wfa-pill:focus-visible,.wfa-root button:focus-visible,.wfa-root textarea:focus-visible{outline:2px solid var(--wfa-blue);outline-offset:2px}
@media (min-width:769px){.wfa-pill{display:inline-flex}}

/* ── the sheet (phone) / right panel (desktop) ── */
.wfa-root{position:fixed;z-index:1200;font-family:var(--wfa-font);color:var(--wfa-ink);display:none}
.wfa-root.wfa-show{display:block}
.wfa-scrim{position:fixed;inset:0;background:rgba(10,14,19,.28);opacity:0;transition:opacity .2s}
.wfa-root.wfa-show .wfa-scrim{opacity:1}
.wfa-sheet{position:fixed;left:0;right:0;bottom:0;height:92vh;height:92dvh;display:flex;flex-direction:column;
  background:var(--wfa-bg);border-radius:18px 18px 0 0;box-shadow:var(--wfa-shadow);transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
  padding-bottom:env(safe-area-inset-bottom,0px);overflow:hidden}
.wfa-root.wfa-show .wfa-sheet{transform:translateY(0)}
.wfa-grab{display:flex;justify-content:center;padding:8px 0 2px;cursor:grab;touch-action:none;min-height:20px}
.wfa-grab span{width:40px;height:5px;border-radius:3px;background:var(--wfa-line)}
@media (min-width:769px){
  .wfa-scrim{background:transparent;pointer-events:none}
  .wfa-sheet{left:auto;top:0;height:100vh;width:420px;border-radius:0;border-left:1px solid var(--wfa-line);transform:translateX(100%)}
  .wfa-root.wfa-show .wfa-sheet{transform:translateX(0)}
  .wfa-grab{display:none}
}
@media (prefers-reduced-motion:reduce){.wfa-sheet,.wfa-scrim{transition:none}.wfa-dial,.wfa-dial i{animation:none!important}}

.wfa-head{display:flex;align-items:center;gap:10px;padding:6px 12px 8px 16px;border-bottom:1px solid var(--wfa-line)}
.wfa-head .wfa-dial{--d:36px}
.wfa-title{flex:1;min-width:0}
.wfa-title h2{margin:0;font:600 16px/1.2 var(--wfa-font);color:var(--wfa-ink);letter-spacing:.005em}
.wfa-status{font-size:12px;color:var(--wfa-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wfa-iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--wfa-ink2);cursor:pointer;flex:none}
.wfa-iconbtn:hover{background:var(--wfa-panel)}
.wfa-iconbtn svg{width:20px;height:20px}
.wfa-tabs{display:flex;gap:4px;padding:8px 16px 0}
.wfa-tabs button{min-height:44px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--wfa-muted);font:500 14px/1 var(--wfa-font);cursor:pointer}
.wfa-tabs button[aria-selected="true"]{background:var(--wfa-sel);color:var(--wfa-sel-ink);font-weight:600}
.wfa-tabs .wfa-count[hidden]{display:none}
.wfa-tabs .wfa-count{display:inline-block;min-width:18px;margin-left:6px;padding:2px 6px;border-radius:9px;background:var(--wfa-blue);color:#fff;font-size:11px}

.wfa-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 8px;-webkit-overflow-scrolling:touch}
.wfa-pane[hidden]{display:none}
.wfa-disclose{font-size:12px;color:var(--wfa-muted);text-align:center;margin:2px 8px 12px;line-height:1.45}
.wfa-msg{margin:10px 0;line-height:1.5;font-size:15px;overflow-wrap:anywhere}
.wfa-msg.wfa-user{display:flex;justify-content:flex-end}
.wfa-msg.wfa-user span{max-width:82%;background:var(--wfa-sel);color:var(--wfa-sel-ink);padding:9px 13px;border-radius:16px 16px 4px 16px;white-space:pre-wrap}
.wfa-msg.wfa-bot{color:var(--wfa-ink);white-space:pre-wrap;max-width:94%}
.wfa-msg.wfa-bot.wfa-err{color:var(--red,#c0413d)}
.wfa-msg.wfa-note{font-size:12.5px;color:var(--wfa-muted);text-align:center}
.wfa-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.wfa-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 10px;border-radius:999px;border:1px solid var(--wfa-line);background:var(--wfa-raised);color:var(--wfa-ink2);font-size:12.5px}
.wfa-chip .wfa-spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--wfa-line);border-top-color:var(--wfa-blue);animation:wfa-sweep .8s linear infinite}
.wfa-chip.wfa-done .wfa-spin{animation:none;border:0;width:auto;height:auto}
.wfa-chip.wfa-done .wfa-spin::before{content:'✓';color:var(--wfa-blue);font-weight:700}
.wfa-chip.wfa-fail .wfa-spin::before{content:'!';color:var(--red,#c0413d)}
.wfa-card{margin:8px 0 12px;border-radius:14px;overflow:hidden}
.wfa-suggest{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.wfa-suggest button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 14px;border:1px solid var(--wfa-line);border-radius:12px;
  background:var(--wfa-raised);color:var(--wfa-ink);font:500 14.5px/1.3 var(--wfa-font);text-align:left;cursor:pointer}
.wfa-suggest button:hover{border-color:var(--wfa-blue)}
.wfa-suggest button::after{content:'›';color:var(--wfa-muted);font-size:18px}
.wfa-off{margin:28px 8px;padding:20px;border:1px solid var(--wfa-line);border-radius:14px;background:var(--wfa-raised);text-align:center}
.wfa-off h3{margin:10px 0 6px;font:600 16px/1.3 var(--wfa-font)}
.wfa-off p{margin:0;color:var(--wfa-muted);font-size:14px;line-height:1.5}

.wfa-foot{border-top:1px solid var(--wfa-line);padding:8px 12px 10px;background:var(--wfa-bg)}
.wfa-mem{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 0 6px 2px;padding:4px 10px;border:1px dashed var(--wfa-line);border-radius:999px;background:transparent;color:var(--wfa-muted);font:500 12px/1 var(--wfa-font);cursor:pointer}
.wfa-compose{display:flex;align-items:flex-end;gap:6px;border:1px solid var(--wfa-line);border-radius:22px;background:var(--wfa-raised);padding:4px 4px 4px 14px}
.wfa-compose:focus-within{border-color:var(--wfa-blue)}
.wfa-compose textarea{flex:1;min-width:0;border:0;outline:0;resize:none;background:transparent;color:var(--wfa-ink);font:15px/1.4 var(--wfa-font);padding:10px 0;max-height:120px}
.wfa-compose textarea:focus-visible{outline:none}
.wfa-compose textarea::placeholder{color:var(--wfa-muted)}
.wfa-send{background:var(--wfa-primary)!important;color:var(--wfa-primary-fg)!important;border-radius:50%!important;width:44px!important;height:44px!important;margin:0}
.wfa-send:disabled{opacity:.4}
.wfa-mic{color:var(--wfa-muted)}

/* the voice bubble (Wave 2 slots in here): floats top-centre, pull down for the transcript */
.wfa-bubble{position:fixed;z-index:1201;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:6px;
  padding:14px 18px 10px;border-radius:24px;background:var(--wfa-raised);border:1px solid var(--wfa-line);box-shadow:var(--wfa-shadow);color:var(--wfa-ink);touch-action:none;max-width:calc(100vw - 32px)}
.wfa-bubble.wfa-show{display:flex}
.wfa-bubble .wfa-dial{--d:56px}
.wfa-bubble .wfa-cap{font-size:13.5px;text-align:center;line-height:1.35;max-width:280px}
.wfa-bubble .wfa-pull{font-size:11.5px;color:var(--wfa-muted);min-height:28px;border:0;background:transparent;cursor:pointer}
.wfa-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.wfa-lock{overflow:hidden}