/* Otto — the app's stylesheet.
   Split out of index.html: the shell was a single 476KB file, which meant
   anything that needed to look at the markup had to load the CSS and the whole
   application script with it. Three files, three concerns — read the one you
   actually need. */

  :root {
    --bg: #f3f1ec; --panel: #ffffff; --elevated: #e8e5de; --border: #d2cfc7;
    --text: #1a1917; --dim: #565450; --faint: #908d86;
    --accent: #d97757; --accent-ink: #fff;
    --green: #2a7d32; --red: #c0392b; --amber: #8a6000;
    --brain: #f8f6f2; --me: #d97757; --radius: 14px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  }
  /* ── Task View (default surface): faithful to the "your day, handled"
     prototype — cool, clean, one centred column. The prototype palette is
     applied by REMAPPING the app's CSS vars ONLY under #home-view, so the room
     view keeps its warm theme. In home-mode the app's orange topbar and the
     rooms sidebar hide for the clean look; "Rooms list ›" re-opens the sidebar
     as a drawer. Otto's face + verdict, your-yes, on-your-requests, recently
     done, spend, and a hub-and-spoke rooms map. */
  #home-view {
    display: none; overflow-y: auto; height: 100%; padding: 6px clamp(13px, 5vw, 40px) 96px;
    --bg: #f3f1ec; --panel: #ffffff; --elevated: #e8e5de; --border: #d2cfc7;
    --text: #1a1917; --dim: #565450; --faint: #908d86;
    --accent: #d97757; --accent-ink: #fff; --green: #2a7d32; --red: #c0392b; --amber: #8a6000; --brain: #f8f6f2;
    --tvshadow: 0 1px 2px rgba(40,30,20,.05), 0 4px 16px rgba(40,30,20,.06);
    background: var(--bg); color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    #home-view { --bg: #17130f; --panel: #201a15; --elevated: #2a221b; --border: #3a2f26;
      --text: #f0e9e0; --dim: #b0a394; --faint: #7d7264; --accent: #e08a63; --green: #3cc07f; --red: #ef5a5f; --amber: #e6a53d; --brain: #201a15;
      --tvshadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35); }
  }
  #main.home-mode #home-view { display: block; }
  #main.home-mode #topbar, #main.home-mode #msgs, #main.home-mode #composer, #main.home-mode #typing-bar,
  #main.home-mode #artefacts-strip, #main.home-mode #oren-tabs, #main.home-mode #oren-pane,
  #main.home-mode #inviteBtn, #main.home-mode #loop-ind, #main.home-mode #podcast-bar { display: none !important; }
  /* clean single column — hide the rooms sidebar + stray app chrome (FAB, spinner) in home */
  body.tv-home #fab-new, body.tv-home #global-spinner { display: none !important; }
  body.tv-home #side { display: none; }
  /* "Otto is working" strip — a tidy pill above the composer, shown ONLY while a
     task is live (the .show class now actually gates it; before, it had no CSS at
     all and sat as raw text stuck above the composer even when idle). */
  #global-spinner { display: none; align-items: center; gap: 10px; margin: 0 12px 8px; padding: 9px 13px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 13px; cursor: pointer;
    box-shadow: 0 3px 14px rgba(0,0,0,.18); animation: gs-in .22s ease; -webkit-tap-highlight-color: transparent; }
  #global-spinner.show { display: flex; }
  #global-spinner:hover { border-color: var(--accent); }
  #global-spinner .gs-spin { width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--accent); border-right-color: transparent; animation: gs-rot .8s linear infinite; }
  #global-spinner .gs-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #global-spinner .gs-label .gs-verb { color: var(--dim); font-weight: 500; margin-inline-end: 5px; }
  #global-spinner .gs-count { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, transparent); border-radius: 20px; padding: 2px 9px; }
  #global-spinner .gs-count:empty { display: none; }
  @keyframes gs-rot { to { transform: rotate(360deg); } }
  @keyframes gs-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { #global-spinner .gs-spin { animation: none; } }
  body.tv-home #side.open { display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(84vw, 320px); box-shadow: 0 0 50px rgba(0,0,0,.3); }
  .tv { --yourcall: #7c56e6; --snag: #d83a3f; --onit: #2f74e0; --recover: #d98817; --queued: #8a93a1; --calm: #1f9a63;
    max-width: 500px; margin: 0 auto; }
  /* header + verdict bar (prototype look) */
  .tv-header { display: flex; align-items: center; gap: 10px; padding: 14px 2px 2px; }
  .tv-brandface { width: 28px; height: 28px; flex-shrink: 0; }
  .tv-brand-txt { display: flex; align-items: baseline; gap: 9px; }
  .tv-brand-txt h1 { font-size: 19px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
  .tv-brand-txt .sub { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
  .tv-header .rooms-link { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--accent); background: none; border: 0; cursor: pointer; padding: 4px 2px; }
  .tv-header .rooms-link:hover { text-decoration: underline; }
  .tv-subbar { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--faint); padding: 2px 2px 4px; }
  .tv-hero { display: flex; flex-direction: column; margin-top: 8px; --mood: var(--calm); }
  .tv-hero.attention { --mood: var(--amber); }
  .tv-ottobar { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--panel);
    border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; cursor: pointer; box-shadow: var(--tvshadow); }
  .tv-ottobar .beat { width: 9px; height: 9px; border-radius: 50%; background: var(--mood); flex-shrink: 0; animation: tv-beat 2.4s infinite; }
  .tv-verdict { flex: 1; font-size: 15px; font-weight: 640; letter-spacing: -.01em; }
  .tv-counts { font-family: var(--mono); font-size: 12px; color: var(--dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }
  .tv-talk { margin-top: 12px; width: 100%; border: 0; background: var(--accent); color: var(--accent-ink); font: inherit;
    font-weight: 640; font-size: 15px; padding: 14px; border-radius: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--tvshadow); }
  .tv-talk:active { filter: brightness(.95); }
  .tv-talk.incall { background: var(--red); }
  /* Home has no room selected, so the new-thread FAB is hidden; these two pills
     ARE the front door — talk, or write. "New thread" drops into #hq + opens the composer. */
  .tv-actions { display: flex; gap: 10px; margin-top: 12px; }
  .tv-actions .tv-talk { margin-top: 0; flex: 1; min-width: 0; }
  .tv-new { flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--panel); color: var(--text);
    font: inherit; font-weight: 640; font-size: 15px; padding: 14px; border-radius: 16px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--tvshadow); }
  .tv-new:active { filter: brightness(.97); }
  .otto-face { position: relative; width: 100%; height: 100%; border-radius: 36% / 40%;
    background: linear-gradient(150deg, #42d4c7, #5560ff); box-shadow: 0 8px 22px color-mix(in srgb, #5560ff 30%, transparent); }
  .otto-face .eye { position: absolute; top: 37%; width: 13%; height: 19%; background: #fff; border-radius: 50%;
    transform-origin: center; animation: tv-blink 4.8s infinite; }
  .otto-face .eye.left { left: 27%; } .otto-face .eye.right { right: 27%; }
  .otto-face .mouth { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); width: 32%; height: 15%;
    background: rgba(255,255,255,.92); border-radius: 2px 2px 40px 40px; }
  /* prototype fidelity: rounder cards, ringed orb, bigger type */
  .tvcard { border-radius: 20px; padding: 16px 17px; box-shadow: var(--tvshadow); gap: 15px; }
  .tvcard::before { display: none; }
  .tv-orb { width: 48px; height: 48px; font-size: 21px; }
  .tv-title { font-size: 18px; }
  .tv-time { font-size: 21px; }
  .tv-band-h .n { background: none; }
  .tv-spend, .tv-idle-card { box-shadow: var(--tvshadow); }
  .tv-idle-card { border-radius: 20px; }
  .tv-policy { font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--dim);
    background: color-mix(in srgb, var(--green) 7%, var(--panel)); border: 1px solid var(--border);
    border-radius: 14px; padding: 10px 13px; margin-top: 12px; }
  .tv-band { margin-top: 18px; }
  .tv-band-h { display: flex; align-items: center; gap: 9px; margin: 0 2px 9px; font-family: var(--mono);
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
  .tv-band-h .n { color: var(--faint); background: var(--elevated); border-radius: 20px; padding: 1px 8px; }
  .tv-band-h .rule { flex: 1; height: 1px; background: var(--border); }
  .tv-list { display: flex; flex-direction: column; gap: 9px; }
  /* a task / room card */
  .tvcard { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
    font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border);
    border-radius: 16px; padding: 14px 15px; cursor: pointer; overflow: hidden; --sc: var(--onit); }
  .tvcard:active { background: var(--brain); }
  .tvcard[data-state="yourcall"] { --sc: var(--yourcall); }
  .tvcard[data-state="snag"]     { --sc: var(--snag); }
  .tvcard[data-state="recover"]  { --sc: var(--recover); }
  .tvcard[data-state="queued"]   { --sc: var(--queued); }
  .tvcard.done { --sc: var(--calm); }
  .tvcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sc); }
  .tvcard.yc { border-color: color-mix(in srgb, var(--sc) 34%, var(--border)); }
  .tv-orb { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    font-size: 20px; border: 2px solid var(--sc); box-sizing: border-box; flex-shrink: 0; --tint: var(--sc); }
  .tv-orb-badge { position: absolute; right: -3px; bottom: -3px; min-width: 17px; height: 17px; padding: 0 3px;
    box-sizing: border-box; border-radius: 9px; display: grid; place-items: center; font-size: 9px; line-height: 1;
    background: var(--panel); border: 1px solid var(--border); }
  .tv-orb-badge:empty { display: none; }
  .tv-main { flex: 1; min-width: 0; }
  .tv-title { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .tv-sub { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tv-sub .origin { color: var(--faint); }
  .tv-meta { text-align: right; flex-shrink: 0; font-family: var(--mono); }
  .tv-time { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; color: var(--sc); }
  .tv-tok { font-size: 10.5px; color: var(--faint); margin-top: 5px; }
  .tv-chev { color: var(--faint); font-size: 13px; flex-shrink: 0; }
  /* spend battery */
  .tv-spend { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 11px 14px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px; font-family: var(--mono); font-size: 12px; color: var(--dim); }
  .tv-battery { flex: 1; height: 12px; border-radius: 4px; background: var(--elevated); border: 1px solid var(--border);
    overflow: hidden; position: relative; }
  .tv-battery > span { position: absolute; inset: 0; border-radius: 3px;
    background: linear-gradient(90deg, var(--green), color-mix(in srgb, var(--amber) 80%, var(--green))); }
  .tv-battery.near > span { background: linear-gradient(90deg, var(--amber), var(--red)); }
  .tv-spend b { color: var(--text); font-variant-numeric: tabular-nums; }
  .tv-spend-sub { margin-left: auto; opacity: .62; font-size: 12px; font-variant-numeric: tabular-nums; }
  /* rooms map */
  .tv-rooms { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
  .tv-rooms-h { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 0 2px 4px; }
  .tv-rooms-h .rooms-link { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--accent);
    background: none; border: 0; cursor: pointer; font: inherit; font-size: 11.5px; }
  .tv-rooms-h .rooms-link:hover { text-decoration: underline; }
  .tv-roomsvg { display: block; width: 100%; max-width: 380px; height: auto; margin: 4px auto 0; }
  .tv-rnode { cursor: pointer; }
  .tv-rnode:focus-visible { outline: none; }
  .tv-rnode:hover > circle:first-of-type, .tv-rnode:focus-visible > circle:first-of-type { stroke-width: 3.2; }
  .tv-rd-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 620; margin: 14px 2px 9px; }
  .tv-rd-head .rd-emoji { font-size: 18px; }
  .tv-rd-count { font-family: var(--mono); font-size: 11px; color: var(--faint); font-weight: 400; }
  .tv-rd-empty { font-size: 13.5px; color: var(--dim); padding: 6px 2px; }
  .tv-empty { color: var(--faint); font-size: 14px; text-align: center; padding: 30px 0; }
  .tvcard.done .tv-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tv-recent-time { font-family: var(--mono); font-size: 11px; color: var(--faint); flex-shrink: 0; white-space: nowrap; align-self: flex-start; padding-top: 2px; }
  .tv-idle-rooms { display: flex; flex-direction: column; gap: 9px; }
  .tv-idle-card { display: flex; align-items: flex-start; gap: 13px; padding: 14px 15px; background: var(--panel);
    border: 1px solid var(--border); border-radius: 16px; cursor: pointer; width: 100%; text-align: left; font: inherit; color: var(--text); }
  .tv-idle-card:active { background: var(--brain); }
  .tv-idle-emoji { font-size: 22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    flex-shrink: 0; background: var(--elevated); }
  .tv-idle-body { flex: 1; min-width: 0; }
  .tv-idle-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
  .tv-idle-summary { font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin-top: 4px; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .tv-idle-hint { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 4px; }
  .tv-idle-chev { color: var(--faint); font-size: 13px; flex-shrink: 0; align-self: center; }
  .tv-stats { display: flex; justify-content: center; gap: 14px; font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 8px; }
  .tv-stats b { color: var(--dim); }
  @keyframes tv-aura { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .6; } 50% { transform: translate(-50%,-50%) scale(1.1); opacity: .82; } }
  @keyframes tv-beat { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.5); opacity: 1; } }
  @keyframes tv-blink { 0%,93%,100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }
  @keyframes tv-proud { 0% { transform: scale(1) rotate(0); } 45% { transform: scale(1.16) rotate(-5deg); } 100% { transform: scale(1) rotate(0); } }
  @media (prefers-reduced-motion: reduce) {
    .tv-hero .aura, .tv-counts .beat, .otto-face .eye, .tv-face.proud .otto-face { animation: none !important; }
  }
  /* ── per-task cards + tap-to-peek + your-yes decisions (companion prototype) ── */
  .tv-task { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
    box-shadow: var(--tvshadow); overflow: hidden; --sc: var(--onit); }
  .tv-task[data-state="recover"] { --sc: var(--recover); }
  .tv-task[data-state="queued"]  { --sc: var(--queued); }
  .tv-task.top-focus { border-color: color-mix(in srgb, var(--onit) 45%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--onit) 22%, transparent), var(--tvshadow); }
  .tv-task::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 60%; border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--sc), transparent); opacity: 0; }
  .tv-task[data-state="onit"]::after { opacity: .85; animation: tv-shimmer 2.4s linear infinite; }
  .tv-taskrow { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit;
    color: var(--text); background: none; border: 0; padding: 16px 17px; cursor: pointer; }
  .tv-taskrow:active { background: var(--brain); }
  .tv-orb2 { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
    font-size: 21px; border: 2px solid var(--sc); box-sizing: border-box; flex-shrink: 0; }
  .tv-orb2 .glyph { display: block; animation: tv-breathe 3.4s ease-in-out infinite; }
  .tv-ripple { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sc); opacity: 0; pointer-events: none; }
  .tv-ripple.ping { animation: tv-rippla 1.2s ease-out; }
  .tv-orb2 .tv-orb-badge { position: absolute; right: -3px; bottom: -3px; min-width: 18px; height: 18px; padding: 0 3px;
    box-sizing: border-box; border-radius: 9px; display: grid; place-items: center; font-size: 10px; line-height: 1;
    background: var(--panel); border: 1px solid var(--border); }
  .tv-task[data-state="recover"] .tv-orb-badge { color: var(--recover); border-color: color-mix(in srgb, var(--recover) 45%, var(--border)); }
  .tv-taskmain { flex: 1; min-width: 0; }
  .tv-tasktitle { display: block; font-size: 18px; font-weight: 640; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tv-top-badge { font-family: var(--mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--onit); font-weight: 700; margin-left: 7px; }
  .tv-taskstate { display: block; font-family: var(--mono); font-size: 12px; color: var(--sc); margin-top: 4px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tv-taskstate .tv-origin { color: var(--faint); font-weight: 400; }
  .tv-taskmeta { text-align: right; flex-shrink: 0; font-family: var(--mono); }
  .tv-tasktime { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; color: var(--sc); }
  .tv-tasktok { font-size: 11px; color: var(--faint); margin-top: 5px; }
  .tv-peekchev { color: var(--faint); font-size: 14px; margin-left: 2px; transition: transform .25s; flex-shrink: 0; }
  .tv-task.peek .tv-peekchev { transform: rotate(180deg); }
  .tv-peek { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .tv-task.peek .tv-peek { max-height: 180px; }
  .tv-peek-in { padding: 2px 18px 16px 79px; }
  .tv-peek-step { font-size: 13px; color: var(--dim); }
  .tv-peek-ctl { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
  .tv-peek-ctl button { font-family: var(--mono); font-size: 12px; padding: 7px 12px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
  .tv-peek-ctl button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .tv-peek-ctl button:disabled { opacity: .4; cursor: default; }
  .tv-peek-ctl .tv-openroom:hover { border-color: var(--onit); color: var(--onit); }
  .tv-peek-ctl .tv-stop:hover:not(:disabled), .tv-peek-ctl .tv-stop.armed { border-color: var(--snag); color: var(--snag); }
  .tv-peek-ctl .tv-stop.armed { font-weight: 700; }
  .tv-soon { font-family: var(--mono); font-size: 10px; color: var(--faint); align-self: center; margin-left: 2px; }
  /* your-yes decision cards (read-only in v1) */
  .tv-yc-lead { font-family: var(--mono); font-size: 11px; color: var(--dim); margin: -2px 2px 9px; }
  .tv-yc-lead b { color: var(--yourcall); }
  .tv-yc { position: relative; background: var(--panel); border: 1px solid color-mix(in srgb, var(--yourcall) 32%, var(--border));
    border-radius: 22px; box-shadow: var(--tvshadow); overflow: hidden; }
  .tv-yc-body { padding: 18px; }
  .tv-yc-top { display: flex; align-items: flex-start; gap: 12px; }
  .tv-yc-emoji { font-size: 22px; flex-shrink: 0; }
  .tv-yc-src { font-family: var(--mono); font-size: 10.5px; color: var(--yourcall); font-weight: 600; margin-bottom: 5px; }
  .tv-yc-q { font-size: 16.5px; font-weight: 660; letter-spacing: -.01em; }
  .tv-yc-hint { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 3px; }
  .tv-yc-img { display: block; margin: 12px 0 2px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
  .tv-yc-img img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
  .tv-yc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
  .tv-yc-tag { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
  .tv-yc-tag.draft { color: var(--onit); background: color-mix(in srgb, var(--onit) 13%, transparent); }
  .tv-yc-tag.money { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
  .tv-yc-tag.cust  { color: var(--yourcall); background: color-mix(in srgb, var(--yourcall) 13%, transparent); }
  .tv-yc-opts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
  .tv-yc-opt { font-family: var(--mono); font-size: 11px; color: var(--dim); border: 1px solid var(--border); border-radius: 7px; padding: 3px 9px; }
  .tv-yc-actions { display: flex; gap: 10px; margin-top: 15px; }
  .tv-yc-actions button { flex: 1; padding: 13px; border-radius: 14px; font-size: 15px; font-weight: 640; cursor: pointer;
    border: 1px solid var(--border); background: var(--panel); color: var(--text); }
  .tv-yc-actions .yes { background: var(--yourcall); border-color: var(--yourcall); color: #fff; }
  .tv-yc-actions .other { flex: 0 0 auto; }
  .tv-yc-hint2 { text-align: center; font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 12px; letter-spacing: .03em; }
  .tv-yc { touch-action: pan-y; will-change: transform; }
  .tv-yc-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 17px; font-weight: 700; opacity: 0; pointer-events: none; border-radius: 22px; }
  .tv-yc-overlay.yes { background: color-mix(in srgb, var(--yourcall) 16%, transparent); color: var(--yourcall); }
  .tv-yc-overlay.no { background: color-mix(in srgb, var(--snag) 13%, transparent); color: var(--snag); }
  .tv-yc.commit-yes { animation: tv-flyRight .5s ease forwards; }
  .tv-yc.commit-no { animation: tv-flyLeft .5s ease forwards; }
  @keyframes tv-flyRight { to { transform: translateX(120%) rotate(7deg); opacity: 0; } }
  @keyframes tv-flyLeft { to { transform: translateX(-120%) rotate(-7deg); opacity: 0; } }
  .tv-yc-actions .opt { flex: 1; }
  .tv-yc-other { padding: 0 18px 16px; }
  .tv-yc-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px;
    font: inherit; font-size: 14px; color: var(--text); background: var(--panel); resize: vertical; }
  .tv-yc-input:focus-visible { outline: 2px solid var(--yourcall); outline-offset: 1px; }
  .tv-yc-other-row { display: flex; gap: 10px; margin-top: 10px; }
  .tv-yc-other-row button { flex: 1; padding: 11px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border); background: var(--panel); color: var(--text); }
  .tv-yc-other-row .oc-send { background: var(--yourcall); border-color: var(--yourcall); color: #fff; }
  .tv-toast-wrap { position: fixed; left: 0; right: 0; top: 16px; display: flex; flex-direction: column; align-items: center;
    gap: 8px; pointer-events: none; z-index: 600; padding: 0 12px; }
  .tv-toast { font-family: var(--mono); font-size: 12.5px; padding: 9px 15px; border-radius: 12px; background: rgba(20,26,38,.96);
    color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.28); max-width: 90vw; display: flex; align-items: center; gap: 9px;
    pointer-events: auto; animation: tv-toast-in .3s ease; }
  .tv-toast .tv-undo { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; font-family: var(--mono);
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 8px; cursor: pointer; }
  @keyframes tv-toast-in { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  /* Talk to Otto — compact live-call panel (stays over Home/room, shows transcript) */
  #voice-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 550; display: flex; flex-direction: column;
    max-height: 46vh; background: color-mix(in srgb, #0d1015 92%, transparent); backdrop-filter: blur(12px) saturate(1.3);
    border-top: 1px solid rgba(255,255,255,.12); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.42);
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); color: #e6e9ee; }
  #voice-panel[hidden] { display: none; }
  #voice-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 8px; flex-shrink: 0; }
  #voice-orb { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px;
    background: linear-gradient(150deg, #42d4c7, #5560ff); flex-shrink: 0; }
  #voice-panel.listening #voice-orb { animation: voice-pulse 1.8s infinite; }
  #voice-panel.speaking #voice-orb { animation: voice-pulse .9s infinite; }
  @keyframes voice-pulse { 0% { box-shadow: 0 0 0 0 rgba(85,96,255,.5); } 70% { box-shadow: 0 0 0 10px rgba(85,96,255,0); } 100% { box-shadow: 0 0 0 0 rgba(85,96,255,0); } }
  #voice-status { flex: 1; font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.6); letter-spacing: .02em; }
  #voice-mode-toggle { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85);
    border-radius: 18px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
  #voice-mode-toggle:hover { background: rgba(255,255,255,.18); }
  #voice-mode-toggle.active { background: linear-gradient(135deg, #10b981, #059669); border-color: #34d399; color: #fff; box-shadow: 0 0 10px rgba(16,185,129,.4); }
  #voice-end { background: rgba(204,51,51,.9); border: 0; color: #fff; border-radius: 18px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
  #voice-end:active { background: #aa2222; }
  #voice-convo { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 4px 0 2px; }
  #voice-convo:empty { display: none; }
  #voice-convo .vc { display: flex; flex-direction: column; font-size: 14.5px; line-height: 1.45; padding: 7px 12px; border-radius: 15px; max-width: 82%; word-wrap: break-word; }
  #voice-convo .vc.you { align-self: flex-end; background: rgba(120,86,230,.42); color: #fff; border-bottom-right-radius: 5px; }
  #voice-convo .vc.otto { align-self: flex-start; background: rgba(255,255,255,.1); color: rgba(255,255,255,.94); border-bottom-left-radius: 5px; }
  #voice-convo .vc.you.interim { opacity: .5; font-style: italic; }
  #voice-convo .vc-time { font-family: var(--mono); font-size: 9px; opacity: .5; align-self: flex-end; margin-top: 2px; }
  #voice-convo .vc.otto .vc-time { align-self: flex-start; }
  #voice-convo .vc-time:empty { display: none; }
  @media (prefers-reduced-motion: reduce) { #voice-panel #voice-orb { animation: none !important; } }
  /* ── Voice Lab (POC) — full-screen modal to talk to the REAL Otto (Opus) ── */
  #vl-panel { position: fixed; inset: 0; z-index: 1400; display: flex; flex-direction: column;
    background: radial-gradient(120% 90% at 50% 0%, #12161d 0%, #0a0c10 70%); color: #e6e9ee;
    padding: calc(16px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); }
  #vl-panel[hidden] { display: none; }
  #vl-top { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  #vl-orb { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 19px;
    background: linear-gradient(150deg, #42d4c7, #5560ff); flex-shrink: 0; }
  #vl-panel.listening #vl-orb { animation: voice-pulse 1.8s infinite; }
  #vl-panel.speaking #vl-orb { animation: voice-pulse .9s infinite; }
  #vl-panel.thinking #vl-orb { animation: voice-pulse 1.3s infinite; filter: hue-rotate(40deg); }
  #vl-title { flex: 1; display: flex; flex-direction: column; gap: 1px; }
  #vl-title b { font-size: 15px; font-weight: 700; }
  #vl-title small { font-size: 11px; color: rgba(255,255,255,.5); font-family: var(--mono); }
  #vl-end { background: rgba(204,51,51,.92); border: 0; color: #fff; border-radius: 20px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
  #vl-end:active { background: #a22; }
  #vl-state { flex-shrink: 0; text-align: center; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
    color: rgba(255,255,255,.62); padding: 12px 0 8px; }
  #vl-state.err { color: #ff8a8a; }
  #vl-convo { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 4px 0; }
  #vl-convo .vlc { font-size: 15.5px; line-height: 1.5; padding: 9px 13px; border-radius: 15px; max-width: 86%; word-wrap: break-word; }
  #vl-convo .vlc.you { align-self: flex-end; background: rgba(120,86,230,.4); border-bottom-right-radius: 5px; }
  #vl-convo .vlc.you.interim { opacity: .5; font-style: italic; }
  #vl-convo .vlc.otto { align-self: flex-start; background: rgba(255,255,255,.09); border-bottom-left-radius: 5px; }
  #vl-convo:empty { display: none; }
  #vl-bottom { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
  #vl-metrics { font-family: var(--mono); font-size: 10.5px; color: rgba(255,255,255,.42); text-align: center;
    white-space: pre-wrap; line-height: 1.6; min-height: 14px; }
  #vl-controls { display: flex; gap: 10px; align-items: center; justify-content: center; }
  #vl-interrupt { flex: 1; max-width: 320px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    color: #fff; border-radius: 22px; padding: 13px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .12s; }
  #vl-interrupt:active { background: rgba(255,255,255,.22); }
  #vl-interrupt:disabled { opacity: .35; cursor: default; }
  #vl-lang { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.8);
    border-radius: 22px; padding: 13px 15px; font-size: 13px; cursor: pointer; font-family: var(--mono); }
  @keyframes tv-breathe { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.12); opacity: 1; } }
  @keyframes tv-rippla { 0% { transform: scale(.72); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }
  @keyframes tv-shimmer { 0% { transform: translateX(-160%); } 100% { transform: translateX(320%); } }
  @media (prefers-reduced-motion: reduce) {
    .tv-orb2 .glyph, .tv-task[data-state="onit"]::after, .tv-ripple.ping { animation: none !important; }
  }

  * { box-sizing: border-box; margin: 0; }
  html, body { height: 100%; overscroll-behavior: none; }
  body {
    background: var(--bg); color: var(--text); overflow: hidden;
    font-family: var(--font); -webkit-font-smoothing: antialiased; font-size: 15px;
  }
  ::selection { background: rgba(217,119,87,.3); }
  /* ── login ── */
  #login {
    position: fixed; inset: 0; display: none; flex-direction: column; gap: 20px;
    align-items: center; justify-content: center; text-align: center; padding: 24px;
  }
  #login .mark { width: 46px; height: 46px; border-radius: 12px; background: var(--accent);
    display: grid; place-items: center; font-size: 24px; box-shadow: 0 8px 30px rgba(217,119,87,.25); }
  #login h1 { font-size: 30px; letter-spacing: -0.6px; font-weight: 600; }
  #login p { color: var(--dim); max-width: 340px; line-height: 1.55; }
  #login button {
    background: var(--text); color: var(--accent-ink); border: 0; border-radius: 11px;
    padding: 12px 24px; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: transform .12s, box-shadow .12s;
  }
  #login button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
  /* invite welcome — the FIRST thing a guest sees when they open a ?join= link */
  #inviteWelcome { display: none; animation: iwIn .4s ease; }
  #inviteWelcome .iw-eyebrow { color: var(--accent); font-size: 12.5px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase; }
  #inviteWelcome .iw-room { font-size: 25px; font-weight: 700; letter-spacing: -.4px; margin: 7px 0 5px; }
  #inviteWelcome .iw-sub { color: var(--dim); font-size: 14px; max-width: 320px; line-height: 1.5; margin: 0 auto; }
  @keyframes iwIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  /* not-yet-a-member — a warm "almost in", never a red rejection */
  #denied { display: none; max-width: 340px; }
  #denied .denied-mark { font-size: 32px; margin-bottom: 4px; }
  #denied .denied-title { font-size: 20px; font-weight: 600; color: var(--text); }
  #denied .denied-msg { color: var(--dim); font-size: 14px; line-height: 1.5; max-width: 320px; margin: 6px auto 2px; }
  #denied #requestAccessBtn { background: var(--accent); color: #fff; }
  /* ── layout ── */
  #app { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
  #app.on { display: flex; }
  #side {
    width: 256px; background: var(--panel); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; flex-shrink: 0;
    transition: width .2s ease; overflow-y: auto;
  }
  body.sidebar-collapsed #side { width: 0; border-right-width: 0; }
  #side header {
    padding: 16px 16px 12px; font-weight: 600; letter-spacing: -.2px;
    display: flex; justify-content: space-between; align-items: center; font-size: 15px;
    border-bottom: 1px solid var(--border); transition: border-color .25s;
    position: sticky; top: 0; background: var(--panel); z-index: 2;
  }
  #side header .brand { display: flex; align-items: center; gap: 9px; }
  #side header .brand .dotmark { width: 22px; height: 22px; border-radius: 7px;
    background: var(--accent); display: grid; place-items: center; font-size: 13px; }

  #rooms { flex: 0 0 auto; padding: 6px 8px; }
  .room {
    padding: 9px 11px; border-radius: 9px; cursor: pointer; color: var(--dim);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500;
    transition: background .1s, color .1s;
  }
  .room:hover { background: var(--elevated); color: var(--text); }
  /* Child project rooms nest under their customer */
  .room.child { margin-left: 16px; padding-left: 11px; border-left: 2px solid var(--border);
    border-radius: 0 9px 9px 0; font-size: 13.5px; }
  .room.child .swatch { width: 6px; height: 6px; }
  .room-hint {
    flex: 0 0 100%; font-size: 10.5px; padding-left: 16px;
    overflow: hidden; max-height: 0; opacity: 0;
    transition: max-height .15s, opacity .15s; white-space: nowrap; text-overflow: ellipsis;
  }
  .room:hover .room-hint { max-height: 18px; opacity: 1; }
  .room-hint.due-overdue { color: var(--red); }
  .room-hint.due-soon    { color: var(--amber); }
  .room-hint.due-future  { color: var(--faint); }
  /* The at-a-glance task board lives in ONE place — the #אורן room kanban below.
     It is deliberately NOT repeated in the room drawer: Oren asked to keep every
     "needs you" item in his room, not scattered across every room's menu. */
  /* ── The #אורן home — Oren's single surface. A fixed tab bar sits under the top
     bar: [צריך אותך · שיחה · הלוח · כללים]. שיחה is the real chat feed + composer;
     צריך אותך / הלוח / כללים render into #oren-pane. צריך אותך lights up when a
     decision waits. One ⋯, one +, no competing screens — the two homes are one. */
  #oren-tabs { flex-shrink: 0; display: flex; gap: 5px; padding: 8px 10px; background: var(--panel);
    border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  #oren-tabs::-webkit-scrollbar { display: none; }
  /* the id selector out-specifies the UA [hidden] rule, so restate it or the bar never hides */
  #oren-tabs[hidden], #oren-pane[hidden] { display: none !important; }
  #oren-tabs .otab { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 5px; font: inherit;
    background: var(--elevated); border: 1px solid var(--border); color: var(--dim);
    border-radius: 999px; padding: 7px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer;
    white-space: nowrap; -webkit-tap-highlight-color: transparent; }
  #oren-tabs .otab .otab-emoji { font-size: 12px; }
  #oren-tabs .otab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
  #oren-tabs .otab-badge { background: rgba(0,0,0,.16); border-radius: 999px; padding: 0 7px; font-size: 11.5px; font-weight: 800; }
  #oren-tabs .otab.active .otab-badge { background: rgba(255,255,255,.28); }
  /* "צריך אותך" lights up when a decision waits — a purple ring even when it isn't the active tab */
  #oren-tabs .otab.attn { border-color: #7c56e6; color: #7c56e6; box-shadow: inset 0 0 0 1px #7c56e6; }
  #oren-tabs .otab.attn .otab-badge { background: #7c56e6; color: #fff; }
  #oren-tabs .otab.attn.active { background: #7c56e6; border-color: #7c56e6; color: #fff; box-shadow: none; }
  #oren-tabs .otab.attn.active .otab-badge { background: rgba(255,255,255,.28); }

  /* the content pane for the non-chat tabs (decisions / board / rules) */
  #oren-pane { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px 12px 96px; background: var(--bg);
    /* the reused .tv-yc decision cards read these from the .tv theme scope; #oren-pane
       sits outside it, so define them here or the primary buttons render invisible. */
    --yourcall: #7c56e6; --snag: #d83a3f; --onit: #2f74e0; --recover: #d98817; --queued: #8a93a1; --calm: #1f9a63; }
  /* chat tab keeps the real feed + composer; every other tab swaps them for #oren-pane */
  #main.otab-decision #oren-pane, #main.otab-board #oren-pane, #main.otab-rules #oren-pane { display: block; }
  #main.otab-decision #msgs, #main.otab-board #msgs, #main.otab-rules #msgs,
  #main.otab-decision #composer, #main.otab-board #composer, #main.otab-rules #composer,
  #main.otab-decision #typing-bar, #main.otab-board #typing-bar, #main.otab-rules #typing-bar,
  #main.otab-decision #jump-new, #main.otab-board #jump-new, #main.otab-rules #jump-new { display: none !important; }

  #oren-pane .pv-lead { font-size: 13px; color: var(--dim); margin: 2px 4px 14px; line-height: 1.5; }
  #oren-pane .pv-empty { text-align: center; color: var(--faint); font-size: 14px; padding: 60px 20px; line-height: 1.7; }
  #oren-pane .pv-empty .pv-empty-face { font-size: 30px; display: block; margin-bottom: 12px; }
  #oren-pane .tv-list { display: flex; flex-direction: column; gap: 14px; }
  /* decision actions: a prominent answer row, then a subtle "later / other" row */
  #oren-pane .tv-yc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
  #oren-pane .tv-yc-actions button { flex: 1 1 40%; padding: 15px; border-radius: 15px; font-size: 15.5px; font-weight: 700; }
  #oren-pane .pv-yc-sub { display: flex; gap: 10px; margin-top: 10px; }
  #oren-pane .pv-yc-sub button { flex: 1; padding: 10px; border-radius: 12px; font-size: 13px; font-weight: 600;
    background: var(--elevated); border: 1px solid var(--border); color: var(--dim); cursor: pointer; }
  #oren-pane .pv-yc-sub button:active { background: var(--panel); }
  /* board tab — kanban columns, scroll sideways through the pipeline */
  #oren-pane .ok-cols { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  #oren-pane .ok-col { flex: 0 0 80%; max-width: 280px; scroll-snap-align: start;
    background: var(--elevated); border: 1px solid var(--border); border-radius: 14px; padding: 9px; }
  #oren-pane .ok-colh { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
    color: var(--dim); padding: 2px 4px 8px; border-bottom: 2px solid var(--okc, var(--border)); margin-bottom: 8px; }
  #oren-pane .ok-colh .ok-n { margin-inline-start: auto; color: var(--faint); background: var(--panel);
    border-radius: 20px; padding: 0 7px; font-size: 11px; }
  #oren-pane .ok-empty { font-size: 11px; color: var(--faint); padding: 4px 4px 8px; }
  #oren-pane .ok-card { position: relative; display: block; width: 100%; text-align: start; box-sizing: border-box;
    background: var(--panel); border: 1px solid var(--border); border-radius: 11px;
    padding: 9px 11px 9px 13px; margin-bottom: 7px; cursor: pointer; color: var(--text); overflow: hidden; }
  #oren-pane .ok-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
    width: 4px; background: var(--okc, var(--border)); }
  #oren-pane .ok-card .ok-name { font-weight: 700; font-size: 13px; }
  #oren-pane .ok-card .ok-face { font-size: 12px; }
  #oren-pane .ok-card .ok-cardt { font-size: 11.5px; color: var(--dim); margin-top: 3px; display: block; }
  #oren-pane .ok-col[data-stage="decision"] { --okc: #7c56e6; } #oren-pane .ok-col[data-stage="stuck"] { --okc: var(--red, #d83a3f); } #oren-pane .ok-col[data-stage="paused"] { --okc: var(--amber, #d89a2f); }
  #oren-pane .ok-col[data-stage="stalled"] { --okc: var(--amber, #d98817); } #oren-pane .ok-col[data-stage="working"] { --okc: #2f74e0; }
  #oren-pane .ok-col[data-stage="queued"] { --okc: #8a93a1; } #oren-pane .ok-col[data-stage="done"] { --okc: #2e9e5b; }
  #oren-pane .ok-col[data-stage="done"] .ok-card { opacity: .72; }
  /* rules tab — Oren's plain text, readable, with an edit shortcut */
  #oren-pane .pv-rules { white-space: pre-wrap; font-size: 14.5px; line-height: 1.75; color: var(--text);
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 16px; }
  #oren-pane .pv-rules-edit { margin-top: 14px; width: 100%; padding: 12px; border-radius: 12px; font: inherit;
    font-size: 14px; font-weight: 700; background: var(--elevated); border: 1px solid var(--border); color: var(--text); cursor: pointer; }
  /* the rulebook modal — deliberately black on white, Oren's own plain text */
  #rulebook-modal { position: fixed; inset: 0; z-index: 950; display: none;
    align-items: center; justify-content: center; background: rgba(0,0,0,.55); padding: 16px; }
  #rulebook-modal.open { display: flex; }
  #rulebook-modal .rb-box { background: #fff; color: #111; width: 100%; max-width: 560px;
    max-height: 86vh; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.4); }
  #rulebook-modal .rb-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 10px; }
  #rulebook-modal .rb-titles h2 { margin: 0; font-size: 18px; color: #111; }
  #rulebook-modal .rb-titles p { margin: 4px 0 0; font-size: 12.5px; color: #555; line-height: 1.4; }
  #rulebook-modal .rb-x { margin-inline-start: auto; flex-shrink: 0; background: #f0f0f0; border: none;
    color: #333; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; cursor: pointer; }
  #rulebook-modal .rb-x:hover { background: #e2e2e2; }
  #rulebook-modal #rulebook-text { flex: 1; min-height: 240px; margin: 4px 18px; padding: 14px;
    border: 1px solid #ddd; border-radius: 12px; background: #fff; color: #111;
    font-family: inherit; font-size: 15px; line-height: 1.7; resize: vertical; }
  #rulebook-modal #rulebook-text:focus { outline: 2px solid #7c56e6; border-color: #7c56e6; }
  #rulebook-modal .rb-foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px 18px; }
  #rulebook-modal .rb-status { font-size: 12.5px; color: #2e7d46; }
  #rulebook-modal .rb-save { margin-inline-start: auto; background: #7c56e6; color: #fff; border: none;
    font: inherit; font-weight: 700; font-size: 14px; border-radius: 11px; padding: 9px 22px; cursor: pointer; }
  #rulebook-modal .rb-save:hover { background: #6a45d4; }
  .room.sel { background: var(--elevated); color: var(--text);
    border-left: 3px solid var(--accent); padding-left: 8px; border-radius: 0 9px 9px 0; }
  .room .hash { color: var(--faint); font-weight: 600; }
  .room.sel .hash { color: var(--accent); }
  .room .swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-right: 2px; transition: background .2s; }
  .room .room-icon { font-size: 15px; line-height: 1; flex-shrink: 0; width: 20px; text-align: center; margin-right: -2px; }
  .room .dot { display: none; }
  .room.unread .rname { font-weight: 700; color: var(--text); }
  .room.unread .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0; }
  .room .rpill { display: none; margin-left: auto; flex-shrink: 0; font-size: 11px;
    font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
  .room.waiting .rpill { display: block; background: rgba(217,164,65,.15); color: var(--amber); }
  .room.processing .rpill { display: block; background: rgba(217,119,87,.12); color: var(--accent);
    animation: pill-pulse 1.6s ease-in-out infinite; }
  .room.errored .rpill { display: block; background: rgba(220,60,60,.12); color: var(--red); }
  .room.queued .rpill { display: block; background: rgba(144,141,134,.12); color: var(--faint); }
  /* Status overrides swatch color so you can scan without reading the pill */
  .room.processing .swatch { background: #4caf50 !important; animation: pill-pulse 1.6s ease-in-out infinite; }
  .room.waiting .swatch { background: var(--amber) !important; animation: pill-pulse 1.6s ease-in-out infinite; }
  .room.errored .swatch { background: var(--red) !important; }
  .room.queued .swatch { background: var(--faint) !important; animation: pill-pulse 2s ease-in-out infinite; }
  @keyframes pill-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
  /* ── room groups ── */
  .room-group-hdr {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 10px 3px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .7px; color: var(--faint);
    cursor: pointer; user-select: none; border-radius: 6px; margin-top: 2px;
  }
  .room-group-hdr:hover { color: var(--dim); }
  .room-group-hdr.recent-hdr { cursor: default; color: var(--accent); }
  .room-group-hdr.recent-hdr:hover { color: var(--accent); }
  .room-group-hdr .ghdr-caret { font-size: 8px; transition: transform .16s; flex-shrink: 0; }
  .room-group-hdr.collapsed .ghdr-caret { transform: rotate(-90deg); }
  .room-group-hdr .ghdr-pill {
    margin-left: auto; font-size: 10px; font-weight: 700;
    background: rgba(217,119,87,.15); color: var(--accent);
    padding: 1px 6px; border-radius: 8px;
  }
  .room-group-hdr .ghdr-udot { display: none; }
  .room-group-hdr.has-unread { color: var(--text); font-weight: 800; }
  .room-group-hdr.has-unread .ghdr-udot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0; margin-left: auto;
  }
  .room-group-hdr.has-unread .ghdr-pill { margin-left: 6px; }
  .room-group-rooms.collapsed { display: none; }
  .room-group-hdr .ghdr-count {
    margin-left: auto; font-size: 10px; font-weight: 700; color: var(--faint);
  }
  /* the "more" row — quiet rooms live behind search, not a dumped list */
  .room-more-row {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 11px; margin: 6px 4px 2px; font-size: 12.5px; font-weight: 600;
    color: var(--dim); cursor: pointer; user-select: none;
    border-radius: 9px; border: 1px dashed var(--border);
  }
  .room-more-row:hover { color: var(--text); border-color: var(--faint); background: var(--elevated); }
  .room-more-row .rmr-ico { font-size: 12px; opacity: .75; flex-shrink: 0; }
  .room-more-row .rmr-label { flex: 1; }
  .room-more-row .ghdr-count {
    font-size: 10px; font-weight: 700; color: var(--faint);
    background: var(--elevated); padding: 1px 8px; border-radius: 9px; flex-shrink: 0;
  }
  .room-more-row.has-unread { color: var(--text); border-color: var(--faint); }
  .room-more-row.has-unread .ghdr-udot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
  }
  #newRoom {
    margin: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 9px;
    background: none; color: var(--dim); cursor: pointer; font-size: 13.5px; font-weight: 500;
    transition: background .1s, color .1s, border-color .1s;
  }
  #tv-side-btn { margin: 0 12px 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; }
  #tv-side-btn:hover { background: var(--elevated); color: var(--text); border-color: var(--faint); }
  #newRoom:hover { background: var(--elevated); color: var(--text); border-color: var(--faint); }
  #integrationsBtn, #pipelineBtn { margin: 4px 8px 0; padding: 7px 10px; border: 1px solid var(--border);
    border-radius: 9px; background: none; color: var(--faint); cursor: pointer;
    font-size: 13px; text-align: left; display: flex; align-items: center; gap: 6px;
    transition: background .1s, color .1s; }
  #integrationsBtn:hover, #pipelineBtn:hover { background: var(--elevated); color: var(--text); }
  #integrationsBtn.active, #pipelineBtn.active { color: var(--text); background: var(--elevated); }
  #integrations, #pipeline { padding: 8px 10px 10px; border-top: 1px solid var(--border);
    display: none; flex-direction: column; gap: 5px; }
  #integrations.open, #pipeline.open { display: flex; }
  .int-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
    color: var(--dim); padding: 3px 2px; }
  .int-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .int-dot.on   { background: var(--green); }
  .int-dot.off  { background: var(--faint); opacity: .5; }
  .int-dot.warn { background: var(--amber); }
  #settingsBtn { margin: 4px 8px 6px; padding: 7px 10px; border: 1px solid var(--border);
    border-radius: 9px; background: none; color: var(--faint); cursor: pointer;
    font-size: 13px; text-align: left; display: flex; align-items: center; gap: 6px;
    transition: background .1s, color .1s; }
  #settingsBtn:hover { background: var(--elevated); color: var(--text); }
  #settingsBtn.active { color: var(--text); background: var(--elevated); }
  /* ── ⚙ מתקדם — one collapsed disclosure at the bottom of the drawer that hides
     all the technical plumbing (Integrations / Pipeline / Settings) so the everyday
     drawer is just board · rooms · +new. ── */
  #advanced-wrap { margin-top: auto; border-top: 1px solid var(--border); padding: 4px 0 2px; }
  #advancedBtn { margin: 4px 8px; padding: 7px 10px; width: calc(100% - 16px); border: 0;
    border-radius: 9px; background: none; color: var(--faint); cursor: pointer; font-size: 12.5px;
    text-align: left; font-family: inherit; transition: background .1s, color .1s; }
  #advancedBtn:hover { background: var(--elevated); color: var(--dim); }
  #advancedBtn.active { color: var(--text); }
  #advanced { display: none; }
  #advanced.open { display: block; }
  #settings { padding: 8px; border-top: 1px solid var(--border);
    display: none; flex-direction: column; gap: 6px; }
  #settings.open { display: flex; }
  #safeRow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim);
    cursor: pointer; padding: 4px 2px; user-select: none; }
  #safeRow input { accent-color: var(--accent); width: 15px; height: 15px; }
  #clearStuck { padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: none;
    color: var(--faint); cursor: pointer; font-size: 12.5px; text-align: left; }
  #clearStuck:hover { background: var(--elevated); color: var(--text); }
  #prodLink { display: flex; align-items: center; gap: 5px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 8px; text-decoration: none;
    color: var(--faint); font-size: 12px; font-family: var(--mono); transition: background .1s, color .1s; }
  #prodLink:hover { background: var(--elevated); color: var(--text); }
  #prodLink .ver-sha { margin-left: auto; opacity: .6; }
  #prodLink .ver-ok { margin-left: auto; color: var(--green); }
  #prodLink .ver-stale { margin-left: auto; color: var(--amber); }
  #main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
  #topbar {
    padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,.15); background: var(--accent);
    display: flex; align-items: center; gap: 10px; flex-shrink: 0; position: relative;
  }
  /* ── nav cluster: אורן + לוח grouped as one segmented pill (reads as one control,
     not scattered glyphs). ── */
  #nav-group { display: inline-flex; align-items: center; flex-shrink: 0;
    background: rgba(255,255,255,.14); border-radius: 999px; overflow: hidden; }
  #nav-group button { background: none; border: 0; color: rgba(255,255,255,.92);
    font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 11px; line-height: 1;
    display: inline-flex; align-items: center; gap: 4px; font-family: inherit;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .1s; }
  #nav-group button:hover { background: rgba(255,255,255,.16); }
  #nav-group button + button { box-shadow: inset 1px 0 0 rgba(255,255,255,.18); }
  /* ── ⋯ overflow: invite / TV / relay status tucked behind one button ── */
  #more-wrap { position: static; flex-shrink: 0; }
  #more-btn { background: none; border: 0; color: rgba(255,255,255,.9); font-size: 20px;
    line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 6px;
    transition: background .1s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  #more-btn:hover { background: rgba(255,255,255,.12); }
  #more-btn.alert::after { content: ''; position: absolute; margin: -2px 0 0 -6px;
    width: 7px; height: 7px; border-radius: 50%; background: #ef5a5f; box-shadow: 0 0 0 2px var(--accent); }
  #more-menu { display: none; position: absolute; top: calc(100% + 6px); right: 12px; z-index: 60;
    min-width: 184px; background: var(--panel, #fff); color: var(--text, #1a1a1a);
    border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: 12px; padding: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,.28); }
  #more-menu.open { display: block; }
  #more-menu .more-item { display: flex; align-items: center; gap: 9px; width: 100%;
    background: none; border: 0; color: inherit; font-family: inherit; font-size: 14px;
    font-weight: 500; text-align: right; padding: 9px 10px; border-radius: 8px; cursor: pointer;
    line-height: 1.2; }
  #more-menu button.more-item:hover { background: var(--elevated, rgba(0,0,0,.05)); }
  #more-menu .more-sep { height: 1px; background: var(--border, rgba(0,0,0,.1)); margin: 5px 4px; }
  #more-menu .more-status { font-size: 12.5px; color: var(--dim, #777); font-weight: 600;
    cursor: default; margin: 0; }
  #more-menu .more-status .rdot { width: 8px; height: 8px; border-radius: 50%;
    background: var(--green, #2a7d32); flex-shrink: 0; }
  #more-menu #relay.off .rdot, #more-menu #relay.pending .rdot { background: #ef5a5f; }
  #more-menu #relay { display: flex; margin: 0; }
  /* board / archive / podcast used to be orange-bar pills; inside ⋯ they render
     as plain dark menu rows (their white-on-accent look would be invisible here) */
  #more-menu #board-btn, #more-menu #archive-pill, #more-menu #podcast-pill {
    background: none; border: 0; color: inherit; border-radius: 8px; width: 100%;
    padding: 9px 10px; max-width: none; justify-content: flex-start; font-weight: 500;
    font-size: 14px; box-shadow: none; }
  #more-menu #board-btn:hover, #more-menu #archive-pill:hover, #more-menu #podcast-pill:hover,
  #more-menu #archive-pill.open, #more-menu #podcast-pill.playing {
    background: var(--elevated, rgba(0,0,0,.05)); animation: none; }
  #more-menu #podcast-pill .pod-title { max-width: none; opacity: 1; }
  /* ⚡N status pill — clean translucent chip on the accent bar (was an unstyled native button) */
  #active-count { background: rgba(255,255,255,.16); border: 0; color: #fff; font-size: 12px;
    font-weight: 700; cursor: pointer; padding: 3px 9px; border-radius: 999px; line-height: 1;
    flex-shrink: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .1s; }
  #active-count:hover { background: rgba(255,255,255,.26); }
  /* ── relay liveness + running version ── */
  #relay { display: none; align-items: center; gap: 6px; margin-left: auto;
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7); font-family: var(--mono);
    white-space: nowrap; }
  #relay .rdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6);
    flex-shrink: 0; }
  #relay.pending { color: rgba(255,255,255,.9); }
  #relay.pending .rdot { background: rgba(255,255,255,.9); }
  #relay.off { color: rgba(255,255,255,.9); }
  #relay.off .rdot { background: rgba(255,255,255,.9); }
  #burger { display: block; background: none; border: 0; color: rgba(255,255,255,.9);
    font-size: 20px; cursor: pointer; padding: 2px 6px; border-radius: 6px;
    transition: background .1s; }
  #burger:hover { background: rgba(255,255,255,.12); }
  /* archived-done pill — moved out of the timeline into the header so the top of
     the room stays clean; only shown when a room has archived threads */
  #archive-pill { align-items: center; gap: 4px; background: rgba(255,255,255,.14);
    border: 0; color: rgba(255,255,255,.92); font-size: 12px; font-weight: 600;
    cursor: pointer; padding: 3px 9px; border-radius: 999px; line-height: 1; flex-shrink: 0;
    transition: background .1s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  #archive-pill:hover { background: rgba(255,255,255,.24); }
  #archive-pill.open { background: rgba(255,255,255,.3); }
  /* board button — a labelled, always-visible way to reach Oren's board from any
     room (the icon-only nav glyphs weren't discoverable). One tap → the board. */
  #board-btn { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.14);
    border: 0; color: rgba(255,255,255,.92); font-size: 12px; font-weight: 600;
    cursor: pointer; padding: 3px 10px; border-radius: 999px; line-height: 1; flex-shrink: 0;
    transition: background .1s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  #board-btn:hover { background: rgba(255,255,255,.24); }
  #themeToggle { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
    background: none; color: var(--dim); cursor: pointer; font-size: 16px; line-height: 1;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background .12s, color .12s, border-color .12s; }
  #themeToggle:hover { background: var(--elevated); color: var(--text); border-color: var(--faint); }
  #sideClose { background: none; border: 0; color: var(--dim); font-size: 20px;
    cursor: pointer; padding: 2px 5px; border-radius: 6px; line-height: 1;
    transition: background .1s, color .1s; }
  #sideClose:hover { background: var(--elevated); color: var(--text); }
  #roomName { font-weight: 700; letter-spacing: -.3px; display: flex; align-items: center; gap: 8px;
    color: #fff; font-size: 16px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
  #roomName .rn-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
  #roomName .hash { color: rgba(255,255,255,.4); font-weight: 600; }
  #roomName .room-slug { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.45); }
  #roomName .client-badge { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
    background: rgba(255,255,255,.2); color: #fff; opacity: 1; letter-spacing: .2px; }
  #errbar { display: none; background: #5c2620; color: #ffd7d0; border-bottom: 1px solid #8a3a30;
    padding: 9px 14px; font-size: 13px; line-height: 1.45; word-break: break-word; }
  #errbar.show { display: block; }
  #errbar.note { background: #1e3527; color: #c9ecd2; border-color: #2f5d3f; }
  #send:disabled { opacity: .45; }
  #msgs { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 22px max(20px, calc(50% - 430px)); display: flex; flex-direction: column;
    gap: 14px; scroll-behavior: smooth; }
  /* ── "↓ jump to latest" pill — floats above the composer, centered ── */
  #jump-new { display: none; position: absolute; left: 50%; transform: translateX(-50%);
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 25;
    align-items: center; gap: 7px; padding: 8px 15px 8px 12px;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-radius: 22px;
    box-shadow: 0 6px 22px rgba(0,0,0,.34); cursor: pointer;
    font-size: 13px; font-weight: 600; letter-spacing: .2px; }
  #jump-new.show { display: flex; animation: jumpIn .18s ease; }
  #jump-new .jn-arrow { font-size: 15px; line-height: 1; }
  #jump-new.has-new { background: var(--accent); color: #fff; border-color: transparent; }
  #jump-new.has-new .jn-arrow { animation: jnBounce 1.1s ease infinite; }
  @keyframes jumpIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
  @keyframes jnBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
  #msgs::-webkit-scrollbar, #rooms::-webkit-scrollbar { width: 9px; }
  #msgs::-webkit-scrollbar-thumb, #rooms::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
  .msg { max-width: 720px; width: fit-content; padding: 11px 15px; border-radius: var(--radius);
    font-size: 15px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
  .msg-body { text-align: start; }
  /* Each rendered line is its own bidi-isolated run so mixed Hebrew/English reads
     correctly (base direction set per-line via the dir attribute). */
  .msg-line { unicode-bidi: isolate; }
  .md-table-wrap { overflow-x: auto; margin: 6px 0; white-space: normal; }
  .md-table { border-collapse: collapse; font-size: 13.5px; min-width: 100%; }
  .md-table th, .md-table td { border: 1px solid var(--border); padding: 5px 10px; text-align: start; unicode-bidi: isolate; vertical-align: top; }
  .md-table thead tr { background: var(--elevated); font-weight: 600; }
  .md-table tbody tr:nth-child(even) { background: rgba(0,0,0,.03); }
  .msg .who { font-size: 11.5px; color: var(--dim); margin-bottom: 4px; font-weight: 600;
    letter-spacing: .2px; display: flex; align-items: center; gap: 5px; }
  .msg.me { background: var(--me); color: #fff; border-bottom-right-radius: 5px; max-width: 72%; }
  .msg.them { background: var(--panel); border: 1px solid var(--border);
    border-bottom-left-radius: 5px; }
  .msg.brain { background: var(--brain); border: 1px solid var(--border);
    border-bottom-left-radius: 5px; max-width: 72%; }
  .msg-row.brain { align-self: stretch; }
  .msg.brain .who { color: var(--accent); }
  .msg.system { align-self: center; background: none; color: var(--faint); font-size: 12.5px;
    border: 1px dashed var(--border); padding: 6px 12px; }
  /* ── message row (avatar + bubble) ── */
  .msg-row { display: flex; align-items: flex-end; gap: 8px; }
  .msg-row.me { align-self: flex-end; }
  .msg-row.them, .msg-row.brain { align-self: flex-start; }
  .msg-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: var(--elevated); border: 1px solid var(--border);
    display: grid; place-items: center; font-size: 12px; font-weight: 700;
    color: var(--text); overflow: hidden; }
  .msg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* ── show more / show less ── */
  .show-more { display: block; margin-top: 6px; color: var(--accent); font-size: 13px;
    cursor: pointer; font-weight: 600; user-select: none; opacity: .85; }
  .show-more:hover { opacity: 1; }
  .msg-inline-copy {
    display: none; align-items: center; gap: 4px; margin-top: 8px;
    padding: 4px 10px; border-radius: 7px; border: 1px solid var(--border);
    background: var(--elevated); color: var(--text-secondary); font-size: 12px;
    cursor: pointer; user-select: none; font-weight: 600;
  }
  .msg-inline-copy:active { background: var(--panel); }
  /* Any inline attached image, in the stream (.msg) OR inside a task thread (.t-row),
     must stay a tap-to-enlarge thumbnail — never balloon to full-screen on portrait photos. */
  img.shot { max-width: 100%; max-height: 360px; width: auto; height: auto; object-fit: contain;
    border-radius: 9px; margin-top: 4px; display: block; cursor: zoom-in; border: 1px solid var(--border); }
  /* ── media card: an image-only post where the picture IS the bubble ──
     Sheds the card padding/background/border so nothing competes with the
     image; the sender name and timestamp ride on top as subtle glass chips. */
  .msg.media { padding: 0; background: none; border: none; overflow: hidden;
    position: relative; width: fit-content; max-width: min(560px, 92%);
    border-radius: var(--radius); border-bottom-left-radius: 5px; }
  .msg.media img.shot { max-width: 100%; max-height: 640px; margin: 0; border: none;
    border-radius: inherit; }
  .msg.media .who, .msg.media.brain .who { position: absolute; top: 8px; left: 10px; z-index: 2;
    margin: 0; color: #fff; background: rgba(0,0,0,.42); padding: 3px 9px; border-radius: 999px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    text-shadow: 0 1px 2px rgba(0,0,0,.5); }
  .msg.media .msg-ts { position: absolute; bottom: 8px; right: 10px; z-index: 2; margin: 0;
    opacity: 1; color: #fff; background: rgba(0,0,0,.42); padding: 2px 8px; border-radius: 999px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .msg .expired-img { font-size: .8em; color: var(--ts); font-style: italic; }
  .msg audio.msg-audio { display: block; width: 280px; max-width: 100%; height: 40px; margin-top: 6px; }
  /* ── quick actions ── */
  .msg { position: relative; -webkit-user-select: text; user-select: text; }
  .msg-actions, .msg-act, .q-opts, .q-opt, .brief-acks, .brief-ack { -webkit-user-select: none; user-select: none; }
  .msg-actions {
    position: absolute; top: -14px; right: 8px;
    display: flex; gap: 3px; opacity: 0; transition: opacity .12s;
    pointer-events: none;
  }
  .msg:hover .msg-actions, .msg.tapped .msg-actions { opacity: 1; pointer-events: auto; }
  .msg-act {
    background: var(--elevated); border: 1px solid var(--border);
    border-radius: 7px; width: 26px; height: 26px; display: grid; place-items: center;
    cursor: pointer; font-size: 12px; transition: background .1s;
    line-height: 1;
  }
  .msg-act:hover { background: var(--panel); }
  .msg-act.active { background: var(--accent); border-color: var(--accent); }
  /* ── kebab (⋮) menu button — opens quick actions sheet ── */
  .msg-act-menu {
    opacity: 0; transition: opacity .12s; font-size: 15px; font-weight: 700;
  }
  .msg:hover .msg-act-menu, .msg.tapped .msg-act-menu,
  .t-row:hover .msg-act-menu { opacity: 1; }
  /* Inline kebab inside thread rows blends with the row layout */
  .t-row .msg-act-menu {
    flex-shrink: 0; width: 24px; height: 24px;
  }
  @media (hover: none) {
    .msg-act-menu, .t-row .msg-act-menu { opacity: 1 !important; pointer-events: auto !important; }
  }
  /* ── flag ── */
  .msg-flag { margin-top: 6px; }
  .flag-waiting { font-size: 12px; color: var(--amber); opacity: .85; }
  .flag-acked { font-size: 12px; color: var(--green); }
  .flag-ack-btn {
    margin-top: 6px; padding: 7px 13px; background: var(--amber); color: #1a1200;
    border: none; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer;
    display: block; width: 100%; text-align: left; line-height: 1.35;
  }
  .flag-ack-btn:active { opacity: .8; }
  /* ── quick actions bottom sheet ── */
  .qa-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.38); z-index: 300;
    animation: qaFadeIn .15s;
  }
  .qa-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--elevated); border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
    z-index: 301; box-shadow: 0 -4px 32px rgba(0,0,0,.2);
    animation: qaSlideUp .2s ease-out;
  }
  .qa-handle {
    width: 36px; height: 4px; background: var(--border); border-radius: 2px;
    margin: 0 auto 12px;
  }
  .qa-preview {
    font-size: 13px; color: var(--dim); padding: 0 4px 10px;
    border-bottom: 1px solid var(--border); margin-bottom: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: auto;
  }
  .qa-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px 0;
  }
  .qa-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
    padding: 10px 4px; min-height: 64px; cursor: pointer; color: var(--text); font-size: 11px;
    text-align: center; line-height: 1.2; touch-action: manipulation;
  }
  .qa-btn .qa-icon { font-size: 24px; line-height: 1; }
  .qa-btn:active { opacity: .65; transform: scale(.96); }
  @keyframes qaSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes qaFadeIn  { from { opacity: 0; } to { opacity: 1; } }
  /* ── cards ── */
  .card { align-self: stretch; max-width: 580px; background: var(--panel); position: relative;
    border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
  .card.q { border-left: 3px solid var(--accent); }
  .card.a { border-left: 3px solid var(--amber); }
  /* Every pending card has an escape hatch — dismiss without answering, so a
     question Oren doesn't want never gets stuck pinned at the top of a room. */
  .card .card-dismiss { position: absolute; top: 9px; right: 9px; width: 24px; height: 24px;
    display: grid; place-items: center; background: none; border: 0; border-radius: 7px;
    color: var(--faint); font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
    transition: background .12s, color .12s; }
  .card .card-dismiss:hover { background: var(--elevated); color: var(--text); }
  .card .done .dismissed { color: var(--faint); font-style: italic; }
  .card .tag { font-size: 11px; font-weight: 700; letter-spacing: .8px; color: var(--dim);
    text-transform: uppercase; margin-bottom: 8px; }
  .card .body { white-space: pre-wrap; font-size: 15px; line-height: 1.55; }
  /* Email preview card — reads like a real email so Oren can send from Otto. */
  .email-card .email-head { font-size: 13px; color: var(--dim); border-bottom: 1px solid var(--border);
    padding-bottom: 8px; margin-bottom: 10px; display: grid; gap: 2px; }
  .email-card .email-head .eh-k { display: inline-block; min-width: 58px; color: var(--faint); font-weight: 700; }
  .email-card .email-body { white-space: pre-wrap; font-size: 15px; line-height: 1.55; max-height: 340px; overflow-y: auto; }
  .email-card .email-edit { display: inline-flex; align-items: center; padding: 9px 13px; border-radius: 9px;
    text-decoration: none; color: var(--text); background: var(--elevated); font-size: 14px; font-weight: 600; }
  .card .btns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
  .card button {
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    border-radius: 9px; padding: 9px 15px; font-size: 14px; cursor: pointer; font-weight: 500;
    transition: background .1s, border-color .1s, transform .1s;
  }
  .card button:hover { background: var(--elevated); transform: translateY(-1px); }
  .card button.yes { background: var(--green); border-color: var(--green); color: #06210d; font-weight: 700; }
  .card button.no { color: var(--red); border-color: var(--red); }
  .card .done { margin-top: 12px; font-size: 13.5px; color: var(--dim); }
  .card .done b { color: var(--text); }
  .card .other-row { display: none; align-items: center; gap: 8px; margin-top: 8px; flex: 1 1 100%; }
  .card .other-row.open { display: flex; }
  .card .other-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
    padding: 8px 12px; font-size: 14px; color: var(--text); outline: none; }
  .card .other-input:focus { border-color: var(--accent); }
  .card .other-send { background: var(--accent); border: none; border-radius: 9px; padding: 8px 14px;
    font-size: 14px; color: #fff; cursor: pointer; font-weight: 600; }
  /* ── typing indicator ── */
  #typing-bar { min-height: 24px; padding: 2px 16px; display: flex; gap: 8px; align-items: center; }
  .typing-pill { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); animation: fadein .15s; }
  .typing-pill .tp-init { width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
    color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .typing-dots { display: flex; gap: 3px; align-items: center; }
  .typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--dim);
    animation: tdot 1.2s ease-in-out infinite; }
  .typing-dots span:nth-child(2) { animation-delay: .2s; }
  .typing-dots span:nth-child(3) { animation-delay: .4s; }
  @keyframes tdot { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
  /* ── New-thread entry: floating + FAB → bottom sheet composer ── */
  @keyframes sheetUp {
    from { transform: translateY(110%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  /* ── composer ── */
  #composer { display: none; }
  #composer.sheet-open {
    display: block;
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
    border-radius: 20px 20px 0 0;
    border: 1px solid var(--border); border-bottom: 0;
    background: var(--panel);
    padding-top: 22px;
    animation: sheetUp .24s cubic-bezier(.32,.72,0,1);
  }
  #composer.sheet-open::before {
    content: ''; display: block; width: 38px; height: 4px;
    background: var(--faint); border-radius: 2px;
    position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  }
  #sheet-backdrop {
    display: none; position: absolute; inset: 0; background: rgba(0,0,0,.42); z-index: 9;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  .sheet-active #sheet-backdrop { display: block; }
  #fab-new {
    position: absolute; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 20;
    width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--accent);
    color: #fff; font-size: 26px; font-weight: 300; cursor: pointer; line-height: 1;
    box-shadow: 0 6px 22px rgba(0,0,0,.32); display: flex; align-items: center; justify-content: center;
    transition: transform .15s, box-shadow .15s, opacity .15s;
    /* Own the touch — don't let the browser claim a tap as a scroll and cancel it
       (that swallowed short taps on the Pixel 10 Pro Fold). */
    touch-action: none;
  }
  #fab-new:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 30px rgba(0,0,0,.38); }
  .sheet-active #fab-new { opacity: 0; pointer-events: none; transform: scale(.85); }
  #fab-new::after { content: ''; display: none; position: absolute; top: 2px; right: 2px;
    width: 11px; height: 11px; border-radius: 50%; background: #e5484d;
    border: 2px solid var(--bg); pointer-events: none; }
  #fab-new.has-draft::after { display: block; }
  /* ── Cmd+K room picker ── */
  #room-picker { display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    align-items: flex-start; justify-content: center; padding-top: 15vh; }
  #room-picker.open { display: flex; }
  .rp-box { background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    width: min(440px, 90vw); box-shadow: 0 20px 60px rgba(0,0,0,.4); overflow: hidden; }
  #rp-input { width: 100%; padding: 14px 16px; font-size: 15px; background: none; border: 0;
    border-bottom: 1px solid var(--border); color: var(--text); outline: none; box-sizing: border-box; }
  #rp-list { max-height: 300px; overflow-y: auto; }
  .rp-item { padding: 10px 16px; cursor: pointer; color: var(--text); font-size: 14px;
    display: flex; align-items: center; gap: 8px; }
  .rp-item .rp-hash { color: var(--faint); }
  .rp-item.sel, .rp-item:hover { background: var(--elevated); }
  /* (composer.sheet-open inherits padding from the inline style below) */
  #composer.sheet-open { padding: 22px 16px calc(12px + env(safe-area-inset-bottom)); }
  /* ── room name above the composer input — at the instant you type you can't
     mistake which room the message lands in; tinted with the room --accent ── */
  #composer-room-tag { display: flex; align-items: center; gap: 6px; margin: 0 2px 10px;
    font-size: 12px; font-weight: 700; letter-spacing: -.2px; color: var(--accent);
    user-select: none; -webkit-user-select: none; }
  #composer-room-tag .crt-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
  #composer-room-tag .crt-arrow { color: var(--faint); font-weight: 600; }
  #composer.drag .wrap { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,119,87,.2); }
  #thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  #thumbs:empty { display: none; }
  .thumb { position: relative; width: 56px; height: 56px; border-radius: 9px; overflow: hidden;
    border: 1px solid var(--border); }
  .thumb img { width: 100%; height: 100%; object-fit: cover; }
  .thumb.audio { width: auto; max-width: 180px; height: auto; padding: 8px 10px 8px 8px;
    display: flex; align-items: center; gap: 6px; background: var(--elevated); overflow: visible; }
  .thumb.audio .audio-name { font-size: 12.5px; color: var(--text); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
  .thumb .x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: rgba(0,0,0,.65); color: #fff; border: 0; cursor: pointer; font-size: 11px; line-height: 18px;
    display: grid; place-items: center; }
  .thumb.audio .x { position: static; background: none; color: var(--faint); font-size: 13px;
    width: 16px; height: 16px; flex-shrink: 0; }
  .thumb.up::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5);
    backdrop-filter: blur(1px); }
  .wrap { display: flex; align-items: flex-end; gap: 8px; background: var(--panel);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 6px 6px 8px;
    transition: border-color .12s, box-shadow .12s; }
  .wrap:focus-within { border-color: var(--faint); }
  /* ── plus menu ── */
  #plus-btn { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 22px;
    font-weight: 300; width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
    transition: background .1s, color .1s, transform .2s; display: grid; place-items: center; }
  #plus-btn:hover { background: var(--elevated); color: var(--text); }
  #plus-btn.open { transform: rotate(45deg); color: var(--text); }
  #plus-panel { display: none; position: absolute; left: 12px; bottom: calc(100% + 6px);
    background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
    padding: 10px; grid-template-columns: 1fr 1fr; gap: 6px; width: 210px;
    box-shadow: 0 8px 32px rgba(0,0,0,.45); z-index: 200; animation: pp-in .15s ease-out; }
  #plus-panel.open { display: grid; }
  @keyframes pp-in { from { opacity:0; transform:translateY(8px) scale(.97) } to { opacity:1; transform:none } }
  /* ── slash / @ pickers ── */
  #cmd-picker { display: none; position: absolute; left: 12px; right: 12px; bottom: calc(100% + 6px);
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
    overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.45); z-index: 201;
    animation: pp-in .12s ease-out; max-height: 280px; overflow-y: auto; }
  #cmd-picker.open { display: block; }
  .cpk-item { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px;
    cursor: pointer; transition: background .1s; border: none; width: 100%;
    background: none; text-align: left; color: var(--text); font-size: 14px; }
  .cpk-item:hover, .cpk-item.sel { background: var(--elevated); }
  .cpk-item .cpk-cmd { font-family: monospace; font-weight: 600; color: var(--accent); min-width: 90px; }
  .cpk-item .cpk-desc { color: var(--dim); font-size: 13px; }
  .pp-item { display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 12px 6px; border-radius: 12px; border: 0; background: var(--elevated);
    cursor: pointer; color: var(--text); font-size: 13px; font-weight: 500;
    transition: background .1s, color .1s; text-align: center; width: 100%; }
  .pp-item:hover { background: var(--border); }
  .pp-item .pp-icon { font-size: 22px; line-height: 1; }
  #pp-speak-btn.on .pp-icon { color: var(--accent); }

  /* ── In-app camera modal ── */
  #cam-modal { position: fixed; inset: 0; z-index: 900; background: #000;
    display: flex; flex-direction: column; }
  #cam-modal[hidden] { display: none; }
  #cam-stage { flex: 1; position: relative; overflow: hidden; display: flex;
    align-items: center; justify-content: center; }
  #cam-video, #cam-still { max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; }
  #cam-video.mirror { transform: scaleX(-1); }
  #cam-msg { position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; padding: 32px; text-align: center; color: #fff;
    font-size: 15px; line-height: 1.5; }
  #cam-controls { display: flex; align-items: center; justify-content: center; gap: 40px;
    padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px)); background: #000;
    position: relative; min-height: 92px; }
  #cam-shutter { width: 68px; height: 68px; border-radius: 50%; border: 4px solid #fff;
    background: transparent; cursor: pointer; padding: 4px; }
  #cam-shutter span { display: block; width: 100%; height: 100%; border-radius: 50%;
    background: #fff; transition: transform .08s; }
  #cam-shutter:active span { transform: scale(.88); }
  .cam-side { background: rgba(255,255,255,.12); border: 0; color: #fff; cursor: pointer;
    width: 48px; height: 48px; border-radius: 50%; font-size: 20px; line-height: 1; }
  .cam-side:hover { background: rgba(255,255,255,.22); }
  .cam-txt { background: rgba(255,255,255,.12); border: 0; color: #fff; cursor: pointer;
    padding: 12px 22px; border-radius: 24px; font-size: 15px; font-weight: 600; }
  .cam-txt.cam-use { background: var(--accent); }
  .cam-txt:hover { filter: brightness(1.1); }

  /* ── Reply-box "+" menu (mirrors the new-thread composer) ── */
  .t-reply-plus-wrap { position: relative; flex-shrink: 0; }
  .t-reply-plus-panel { display: none; position: absolute; left: 0; bottom: calc(100% + 8px);
    grid-template-columns: repeat(2, 1fr); gap: 6px; width: 168px; padding: 8px;
    background: var(--elevated); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.28); z-index: 60; }
  .t-reply-plus-panel.open { display: grid; }
  .t-reply-attach.open { transform: rotate(45deg); color: var(--text); }
  #shabbat-banner { display: none; position: fixed; inset: 0; z-index: 600;
    background: linear-gradient(160deg, #1a1200 0%, #2e1f00 60%, #1a0e00 100%);
    flex-direction: column; align-items: center; justify-content: center; gap: 28px;
    animation: shabbat-in .6s ease; }
  #shabbat-banner.show { display: flex; }
  @keyframes shabbat-in { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:none; } }
  #shabbat-text { font-size: clamp(36px, 10vw, 72px); font-weight: 700; color: #f5c842;
    text-align: center; line-height: 1.3; letter-spacing: .02em; direction: rtl;
    text-shadow: 0 0 40px rgba(245,200,66,.35), 0 2px 12px rgba(0,0,0,.8); }
  #shabbat-candles { font-size: clamp(48px, 14vw, 88px); line-height: 1; }
  #shabbat-sub { font-size: clamp(15px, 3.5vw, 22px); color: rgba(245,200,66,.55);
    direction: rtl; text-align: center; }
  #shabbat-dismiss { margin-top: 20px; background: rgba(245,200,66,.12); border: 1px solid rgba(245,200,66,.3);
    color: rgba(245,200,66,.7); border-radius: 24px; padding: 10px 32px; font-size: 15px;
    cursor: pointer; letter-spacing: .03em; transition: background .15s; }
  #shabbat-dismiss:hover { background: rgba(245,200,66,.2); }
  /* reply strip above composer */
  /* The thread the composer is pointed at — so it is obvious where what you
     type will land, without opening the composer to read the reply strip. */
  .task-thread.aimed { box-shadow: inset 2px 0 0 var(--accent); }
  /* Point-and-ask: the whole page becomes a target, and what you are about to
     pick is outlined so you never request a change to the wrong thing. */
  body.pick-mode, body.pick-mode * { cursor: crosshair !important; }
  body.pick-mode *:hover { outline: 2px solid var(--accent); outline-offset: -2px; }

  /* The ask panel opens where you right-clicked, over the thing it is about. */
  #ui-ask { position: fixed; z-index: 70; width: min(340px, 92vw);
    background: var(--elevated); color: var(--text); border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35); padding: 12px; }
  #ui-ask .ua-h { font-weight: 600; margin-bottom: 4px; }
  #ui-ask .ua-sub { font-size: 12px; opacity: .7; margin-bottom: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ui-ask .ua-in { width: 100%; box-sizing: border-box; resize: vertical;
    background: var(--bg); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px; font: inherit; font-size: 14px; }
  #ui-ask .ua-row { display: flex; gap: 8px; margin-top: 8px; }
  #ui-ask .ua-send { background: var(--accent); color: #fff; border: 0;
    border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 13px; }
  #ui-ask .ua-copy { background: var(--panel); color: var(--text); border: 1px solid var(--accent);
    border-radius: 8px; padding: 7px 12px; font: inherit; font-size: 13px; }
  #ui-ask .ua-cancel { background: none; border: 0; color: var(--text);
    opacity: .7; font: inherit; font-size: 13px; padding: 7px 10px; }

  /* The tracker chip — proof the request was taken, and where it got to. */
  #ui-req-chip { position: fixed; left: 50%; transform: translateX(-50%); bottom: 88px; z-index: 60;
    display: flex; align-items: center; gap: 8px; max-width: min(92vw, 420px);
    padding: 8px 12px; border-radius: 999px; background: var(--elevated); color: var(--text);
    box-shadow: 0 6px 24px rgba(0,0,0,.28); font-size: 13px; cursor: pointer; }
  #ui-req-chip .urc-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ui-req-chip .urc-x { background: none; border: 0; color: inherit; opacity: .6; font-size: 13px; padding: 0 2px; }
  #ui-req-chip .urc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
  #ui-req-chip[data-state="working"] .urc-dot { animation: urc-pulse 1.2s ease-in-out infinite; }
  #ui-req-chip[data-state="done"] .urc-dot { background: #33c46b; }
  #ui-req-chip[data-state="failed"] .urc-dot { background: #e5484d; }
  #ui-req-chip[data-state="waiting"] .urc-dot { background: #e0a23c; }
  @keyframes urc-pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
  #replyStrip { display: none; align-items: center; gap: 8px; background: var(--elevated);
    border-left: 3px solid var(--accent); border-radius: 6px; padding: 6px 10px;
    margin-bottom: 8px; font-size: 13px; color: var(--dim); }
  #replyStrip.visible { display: flex; }
  #replyStrip .rq { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
  #replyStrip .rq strong { color: var(--accent); }
  #replyCancel { background: none; border: 0; color: var(--faint); font-size: 16px; cursor: pointer;
    padding: 0 2px; line-height: 1; }
  /* live-streaming reply: blinking cursor while Otto's text grows */
  .stream-cursor { display: inline-block; width: 7px; height: 1em; margin-left: 2px;
    background: var(--accent); vertical-align: text-bottom; border-radius: 1px;
    animation: stream-blink 1s steps(2, start) infinite; }
  @keyframes stream-blink { 50% { opacity: 0; } }
  /* reply button on messages */
  .msg-act.reply { color: var(--faint); }
  #input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); padding: 9px 4px;
    font-size: 15px; line-height: 1.5; outline: none; resize: none; max-height: 180px;
    font-family: var(--font); }
  #input::placeholder { color: var(--faint); }
  #send { background: var(--accent); border: 0; color: #fff; border-radius: 10px;
    height: 38px; padding: 0 18px; flex-shrink: 0; font-size: 14px; font-weight: 600;
    cursor: pointer; display: grid; place-items: center; transition: opacity .1s, transform .1s;
    letter-spacing: .2px; white-space: nowrap; }
  #send:hover { transform: translateY(-1px); }
  #send:disabled { opacity: .4; cursor: default; transform: none; }
  .hint { font-size: 11.5px; color: var(--faint); margin: 6px 4px 0; }
  #studio-vibes { display: none; flex-wrap: wrap; gap: 7px; padding: 8px 12px 4px; }
  .studio-vibe-chip { font-size: 13px; padding: 5px 11px; border-radius: 20px; border: 1px solid var(--border);
    background: var(--elevated); color: var(--text); cursor: pointer; white-space: nowrap; line-height: 1.3;
    transition: background .15s, transform .1s; }
  .studio-vibe-chip:hover { background: var(--border); transform: translateY(-1px); }
  .studio-vibe-chip:active { transform: translateY(0); }
  /* hidden by default; mobile media query below overrides to display:flex/block */
  #focus-view { display: none; }
  #panel-overlay { display: none; }
  #drag-handle { display: none; }
  #panel-close { display: none; }
  @media (max-width: 720px) {
    #side { position: fixed; top: 0; right: 28%; bottom: 0; left: 0; z-index: 10; transform: translateX(-100%);
      transition: transform .2s; width: 72%; box-shadow: 0 0 40px rgba(0,0,0,.18); }
    body.sidebar-collapsed #side { width: 72%; border-right-width: 1px; } /* mobile uses transform, not width */
    #side.open { transform: none; }
    #burger { display: block; }
    .msg { max-width: 100%; }
    .msg-row { max-width: 90%; }
    .hint { display: none; }
    /* ── mobile focus view ── */
    #focus-view { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 50;
      background: var(--bg); cursor: pointer; user-select: none; }
    #focus-view.hidden { display: none; }
    #panel-overlay.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 98; }
    #main { position: fixed; bottom: 0; left: 0; right: 0; height: 92dvh; transform: translateY(100%);
      transition: transform 350ms cubic-bezier(.32,.72,0,1); z-index: 99;
      border-radius: 20px 20px 0 0; overflow: hidden; }
    #main.panel-open { transform: translateY(0); }
    #drag-handle { display: flex; align-items: center; justify-content: center; height: 36px;
      flex-shrink: 0; background: var(--panel); touch-action: none; position: relative;
      cursor: grab; border-radius: 20px 20px 0 0; }
    #drag-handle::before { content: ''; width: 36px; height: 4px; border-radius: 2px; background: var(--border); }
    #panel-close { display: block; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
      background: none; border: 0; color: var(--faint); font-size: 18px; cursor: pointer;
      padding: 6px; line-height: 1; }
    #focus-top { display: flex; align-items: center; gap: 10px; padding: 52px 20px 12px; }
    .focus-av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff;
      display: grid; place-items: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
    #focus-room-name { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.7); }
    #focus-history { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
      padding: 0 20px; gap: 8px; overflow: hidden; }
    .focus-prev { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden;
      text-overflow: ellipsis; line-height: 1.4; }
    #focus-hero { padding: 20px; flex-shrink: 0; }
    .focus-bubble { background: var(--panel); border-radius: 18px; padding: 16px 18px;
      font-size: 17px; line-height: 1.5; color: var(--text); word-wrap: break-word;
      display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
    .focus-bubble.brain { border-bottom-left-radius: 4px; }
    .focus-bubble.me { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
    #focus-hint { text-align: center; color: var(--faint); font-size: 13px;
      padding: 12px 0 calc(24px + env(safe-area-inset-bottom));
      animation: hint-float 2.5s ease-in-out infinite; }
    @keyframes hint-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
    @keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
    .focus-hero-anim { animation: fadeUp .3s ease-out; }
  }
  /* HOTFIX (matches the working deployed build): keep the mobile focus-view
     disabled — the normal chat (#main) renders correctly and the sidebar still
     overlays via the burger. Re-enable focus-view only after it's verified blank-
     free on a real device. */
  @media (max-width: 720px) {
    #focus-view, #panel-overlay, #drag-handle, #panel-close { display: none !important; }
    #main { position: fixed; inset: 0; height: 100dvh; transform: none !important;
      border-radius: 0; z-index: 5; }
  }
  /* ── update banner ── */
  #update { position: fixed; top: 14px; left: 50%; transform: translateX(-50%) translateY(-220%);
    z-index: 50; display: flex; align-items: center; gap: 12px; background: var(--elevated);
    border: 1px solid var(--accent); border-radius: 12px; padding: 9px 10px 9px 16px;
    box-shadow: 0 14px 44px rgba(0,0,0,.5); transition: transform .28s cubic-bezier(.2,.8,.2,1);
    font-size: 14px; max-width: calc(100% - 28px); }
  #update.show { transform: translateX(-50%) translateY(0); }
  #update b { color: var(--accent); }
  #update-note { font-size: 12.5px; color: var(--dim); display: block; margin-top: 1px; }
  #update button { background: var(--accent); color: #fff; border: 0; border-radius: 9px;
    padding: 8px 15px; font-weight: 600; cursor: pointer; font-size: 13.5px; white-space: nowrap; }
  /* ── message timestamp ── */
  .msg-ts { font-size: 11px; margin-top: 5px; opacity: .65; display: flex; align-items: center; gap: 3px; }
  .msg.me .msg-ts { justify-content: flex-end; color: #fff; }
  .msg-ticks { font-size: 13px; line-height: 1; }
  .msg-ticks.sent     { opacity: .55; }
  .msg-ticks.relayed  { opacity: .75; }
  .msg-ticks.read     { color: #4fc3f7; opacity: 1; }
  .model-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; flex-shrink: 0; opacity: .7; }
  .model-dot.opus   { background: #9b6fdd; }
  .model-dot.sonnet { background: #d97757; }
  .model-dot.haiku  { background: #5aaa8e; }
  .model-dot.fable  { background: #4fa3d1; }
  /* ── inline reply box (pinned below each thread) ── */
  .t-reply-wrap { display: flex; flex-direction: column; }
  .t-reply { display: flex; align-items: center; gap: 7px; margin: 4px 10px 2px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
    padding: 5px 6px 5px 12px; transition: border-color .15s, box-shadow .15s; }
  .t-reply:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,141,245,.12); }
  .t-reply::before { content: '↳'; color: var(--faint); font-size: 15px; line-height: 34px; flex-shrink: 0; }
  .t-reply textarea { flex: 1; background: none; border: 0; resize: none; outline: none;
    font-size: 14px; line-height: 1.4; color: var(--text); max-height: 140px; padding: 4px 0; }
  .t-reply textarea::placeholder { color: var(--faint); }
  .t-reply-attach { background: none; border: 0; color: var(--dim); cursor: pointer;
    font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: 8px; flex-shrink: 0;
    transition: transform .12s, color .1s, background .1s; }
  .t-reply-attach:hover { background: var(--elevated); color: var(--text); }
  .t-reply-send { background: var(--accent); border: 0; color: #fff; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    flex-shrink: 0; transition: transform .12s; }
  .t-reply-send:hover { transform: translateY(-1px); }
  .t-reply-send:disabled { opacity: 0; pointer-events: none; transform: none; }
  body:has(.t-reply-wrap textarea:focus) #fab-new { opacity: 0; pointer-events: none; transform: scale(.85); }
  .t-reply-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 12px 0; }
  .t-reply-thumbs:empty { display: none; }
  .t-reply-thumbs .thumb { width: 46px; height: 46px; }
  .thumb .thumb-label { font-size: 11px; line-height: 1.3; color: var(--text); padding: 4px 6px; word-break: break-all; }
  .thumb:has(.thumb-label) { width: auto; max-width: 150px; height: auto; min-height: 46px; padding: 4px 24px 4px 6px; }
  /* ── task card (one per director request) ── */
  .task-thread { align-self: stretch; -webkit-user-select: text; user-select: text; }
  .task-head {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 11px 15px; position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,.09);
  }
  .mlink { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 13px; }
  .task-head .mlink { position: absolute; top: 9px; right: 11px; }
  .task-head .mlink-reply { right: 32px; }
  .flash { animation: eo-flash 2.5s ease-out; }
  @keyframes eo-flash {
    0%, 45% { box-shadow: 0 0 0 2px var(--accent); }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
  .mention { color: var(--accent); font-weight: 600; }
  code { font-family: var(--mono); font-size: .88em; background: rgba(0,0,0,.07);
    border-radius: 5px; padding: 1px 5px; cursor: pointer; user-select: text;
    transition: background .12s; }
  code:active { background: rgba(217,119,87,.22); }
  .archive { display: flex; flex-direction: column; gap: 14px; }
  .archive-head { align-self: center; font-size: 11px; color: var(--dim); cursor: pointer;
    background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
    padding: 3px 10px; user-select: none; }
  .archive-head:hover { color: var(--text); }
  .archive-body { display: none; flex-direction: column; gap: 14px; }
  .archive.open .archive-body { display: flex; }
  /* Clean-slate broom — subtle, sits at the foot of the timeline; only appears
     when there is finished work to file away. Fades in so it never nags. */
  .clear-room { align-self: center; margin: 10px auto 4px; padding: 5px 14px;
    font-size: 11px; color: var(--dim); background: transparent;
    border: 1px solid var(--border); border-radius: 20px; cursor: pointer;
    user-select: none; opacity: .55; transition: opacity .15s, color .15s, background .15s; }
  .clear-room:hover { opacity: 1; color: var(--text); background: var(--panel); }
  .done-collapse { display: flex; flex-direction: column; gap: 14px; }
  .done-collapse-head { align-self: center; font-size: 11px; color: var(--dim); cursor: pointer;
    background: none; border: 1px solid var(--border); border-radius: 20px;
    padding: 3px 10px; user-select: none; font-family: inherit; }
  .done-collapse-head:hover { color: var(--text); }
  .done-collapse-body { display: none; flex-direction: column; gap: 14px; }
  .done-collapse.open .done-collapse-body { display: flex; }
  .task-thread.has-more .task-head { border-radius: var(--radius) var(--radius) 0 0; }
  .task-timer { font-family: var(--mono); font-size: 11px; font-weight: 500;
    text-transform: none; letter-spacing: 0; opacity: .75; }
  .task-badge { display: flex; align-items: center; gap: 6px; margin-bottom: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    padding-right: 44px; /* clear the reply + share buttons pinned top-right */ }
  .task-badge .task-from { margin-left: auto; font-weight: 600; opacity: .75; text-transform: none;
    letter-spacing: 0; font-size: 11px; }
  .task-badge .task-ts { margin-left: 6px; font-weight: 400; text-transform: none;
    letter-spacing: 0; opacity: .6; font-size: 11px; }
  .task-title-row { display: flex; align-items: center; gap: 7px; }
  .task-title { font-size: 15.5px; font-weight: 700; color: var(--text); flex: 1; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
  /* Fold caret: only threads with a body (has-more) can collapse to a title line */
  .t-fold { color: var(--faint); font-size: 10px; line-height: 1; flex-shrink: 0;
    display: none; user-select: none; }
  .task-thread.has-more .t-fold { display: inline-block; }
  /* Collapsed = whole thread folded to just its head/title line. The
     `.task-history` hide lives after `.has-more .task-history` below so it wins
     the specificity tie; the full-radius rule wins its tie here already. */
  .task-thread.collapsed .task-head { border-radius: var(--radius); }
  .task-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .task-foot .t-arr { font-size: 9px; transition: transform .15s; display: inline-block; }
  .task-thread.open .task-foot .t-arr { transform: rotate(90deg); }
  /* ── avatars ── */
  .ava { width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: #fff; overflow: hidden; border: 1.5px solid var(--panel); user-select: none; }
  .ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .ava-stack { display: flex; flex-direction: row-reverse; }
  .ava-stack .ava:not(:last-child) { margin-left: -7px; }
  .task-head-row { display: flex; align-items: center; gap: 8px; padding-right: 50px; }
  .thread-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--faint); }
  .thread-dot.working { background: var(--accent); animation: pulse-dot 1.3s ease-in-out infinite; }
  .thread-dot.waiting { background: var(--amber); }
  .thread-dot.done { background: var(--green); }
  .thread-dot.stuck { background: var(--red); }
  .task-last { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; font-size: 14px; color: var(--text); }
  .task-head-row .task-ts { font-size: 11px; color: var(--faint); flex-shrink: 0; }
  .task-history {
    border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius); padding: 4px 14px 10px;
    background: var(--panel);
  }
  .task-thread.has-more .task-history { display: block; }
  .task-thread.collapsed .task-history { display: none; }
  .t-earlier { display: none; overflow: hidden; }
  .t-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
  .t-row:hover { background: rgba(0,0,0,.02); border-radius: 6px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
  .t-row-body { flex: 1; min-width: 0; }
  .t-row-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
  .t-row-header .t-row-who { font-size: 12px; font-weight: 700; color: var(--text); }
  .t-row-header .t-row-ts { font-size: 10.5px; color: var(--faint); }
  .t-row-text { font-size: 14px; color: var(--text); line-height: 1.55;
    white-space: pre-wrap; word-wrap: break-word; display: block; }
  .t-row-ts { font-size: 11px; color: var(--faint); white-space: nowrap; flex-shrink: 0; }
  .t-row-reply { background: none; border: 0; color: var(--faint); cursor: pointer;
    font-size: 13px; line-height: 1; padding: 0 2px; flex-shrink: 0; opacity: .55; margin-top: 3px; }
  .t-row-reply:hover, .t-row-reply:active { color: var(--accent); opacity: 1; }
  .t-row-trigger { border-left: 2px solid var(--accent); padding-left: 10px; margin-bottom: 4px;
    background: none; border-bottom: 1px solid var(--border); align-items: flex-start; }
  .t-row-trigger .t-row-who { font-size: 11px; font-weight: 700; color: var(--accent);
    letter-spacing: .02em; margin-bottom: 3px; }
  .t-row-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
  .t-row-imgs img { height: 56px; width: 56px; object-fit: cover; border-radius: 6px;
    border: 1px solid var(--border); cursor: pointer; }
  .t-row-hidden { display: none; }
  .t-chip { display: flex; align-items: center; gap: 6px; width: 100%; background: none;
    border: none; border-bottom: 1px solid var(--border); color: var(--accent);
    font-size: 12px; font-weight: 600; padding: 8px 0; cursor: pointer;
    text-align: left; letter-spacing: .01em; transition: opacity .15s; }
  .t-chip:hover { opacity: .7; }
  .t-chip-older { border-bottom: none; border-top: 1px solid var(--border); margin-top: 2px; font-size: 11px; opacity: .8; }
  .t-older-wrap { border-left: 2px solid var(--border); margin-left: 4px; padding-left: 4px; }
  .task-thread.unread .task-head { border-left: 3px solid var(--accent); }
  /* Topic colors — left border when thread is read; unread accent takes priority */
  .task-thread.tp-noga:not(.unread) .task-head   { border-left: 3px solid #c084fc; }
  .task-thread.tp-strata:not(.unread) .task-head { border-left: 3px solid #60a5fa; }
  .task-thread.tp-health:not(.unread) .task-head { border-left: 3px solid #f87171; }
  .task-thread.tp-money:not(.unread) .task-head  { border-left: 3px solid #fbbf24; }
  .task-thread.tp-home:not(.unread) .task-head   { border-left: 3px solid #4ade80; }
  .task-thread.tp-work:not(.unread) .task-head   { border-left: 3px solid #fb923c; }
  /* Swipe-to-archive: the wrapper slides; a green hint appears underneath */
  .task-thread { position: relative; }
  .swipe-hint {
    position: absolute; inset: 0; border-radius: var(--radius);
    display: flex; align-items: center; padding: 0 20px;
    font-size: 13px; font-weight: 600; color: var(--green); opacity: 0;
    pointer-events: none; transition: opacity .1s;
    background: rgba(80,200,120,.08); border: 1.5px solid rgba(80,200,120,.25);
  }
  .swipe-hint.right { justify-content: flex-start; }
  .swipe-hint.left  { justify-content: flex-end; }
  /* ── room digest card ── */
  .digest-card { align-self: stretch; max-width: min(680px, 100%);
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 11px 16px; margin-bottom: 4px; border-left: 3px solid var(--accent); }
  .digest-card.collapsed { padding: 5px 16px; }
  .digest-label { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--accent); margin-bottom: 5px; }
  .digest-card.collapsed .digest-label { margin-bottom: 0; }
  .digest-text { font-size: 13.5px; color: var(--text); line-height: 1.55; }
  .digest-ts { font-size: 11px; color: var(--faint); margin-top: 5px; }
  .digest-card.collapsed .digest-text,
  .digest-card.collapsed .digest-ts { display: none; }
  .digest-toggle { float: right; cursor: pointer; color: var(--accent); font-size: 13px;
    line-height: 1; user-select: none; opacity: 0.7; margin-top: -1px; }
  .digest-toggle:hover { opacity: 1; }
  /* ── time-critical dates card (pinned above the room overview) ── */
  .dates-card { align-self: stretch; max-width: min(680px, 100%);
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 9px 16px; margin-bottom: 4px; border-left: 3px solid #d97757;
    display: flex; flex-wrap: wrap; gap: 5px 14px; align-items: baseline; }
  .dates-label { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: #d97757; }
  .dates-row { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; }
  .dates-when { font-weight: 700; color: var(--text); }
  .dates-row.overdue .dates-when { color: #e5484d; }
  .dates-row.soon .dates-when { color: #d97757; }
  .dates-row.clash .dates-when { color: #c2410c; font-weight: 700; }
  .dates-date { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
  .dates-ctx { font-size: 12px; color: var(--text); opacity: .8; }
  /* ── task status indicator ── */
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.55); }
  }
  .task-badge {
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  }
  .task-badge .bdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .task-badge.working { color: var(--accent); }
  .task-badge.working .bdot { background: var(--accent); animation: pulse-dot 1.3s ease-in-out infinite; }
  .task-badge.waiting { color: var(--amber); }
  .task-badge.waiting .bdot { background: var(--amber); }
  .task-badge.done { color: var(--green); }
  .task-badge.done .bdot { background: var(--green); }
  .task-badge.stuck { color: var(--red); }
  .task-badge.stuck .bdot { background: var(--red); }
  /* Stopped on purpose (safety ceiling / cleared transcript) — amber, not red:
     nothing broke, it just needs one resend. */
  .task-badge.paused { color: var(--amber); }
  .task-badge.paused .bdot { background: var(--amber); }
  .task-badge.pending { color: var(--faint); }
  .task-badge.pending .bdot { background: var(--faint); }
  .task-badge.archived { color: var(--faint); opacity: .6; }
  .task-badge.archived .bdot { background: var(--faint); }
  .task-kill-btn {
    all: unset; cursor: pointer; font-size: 12px; opacity: .55;
    padding: 0 3px; margin-left: 3px; border-radius: 3px; line-height: 1;
    transition: opacity .15s;
  }
  .task-kill-btn:hover { opacity: 1; }
  .task-kill-btn:disabled { opacity: .25; cursor: default; }
  /* artefact preview — the last brain output, shown collapsed so you see the result without opening */
  .task-preview {
    font-size: 13px; color: var(--faint); line-height: 1.45; margin-top: 5px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  /* client comm badge — shown when a thread contains an outgoing client email */
  .task-client-tag {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
    color: var(--accent); background: rgba(217,119,87,.12);
    padding: 2px 8px; border-radius: 20px;
  }
  /* loop badge — shown when a thread has an active scheduled loop */
  .task-loop-tag {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
    color: #7b52c4; background: rgba(123,82,196,.12);
    padding: 2px 8px; border-radius: 20px;
  }
  .task-loop-tag .loop-countdown {
    font-weight: 400; font-family: var(--mono); text-transform: none; letter-spacing: 0; opacity: .8;
  }
  /* room-header loop indicator */
  #loop-ind {
    font-size: 13px; opacity: .75; cursor: default; user-select: none;
    display: none; align-items: center;
  }
  #loop-ind.active { display: flex; }
  /* ── unread badge ── */
  .room .badge { display: none; margin-left: auto; flex-shrink: 0; background: var(--accent);
    color: #fff; border-radius: 10px; font-size: 11px; font-weight: 700;
    padding: 1px 7px; line-height: 18px; }
  .room.unread:not(.waiting):not(.processing):not(.errored):not(.queued) .badge { display: block; }
  /* #decisions room shows a numeric pending-decision count instead of "new" */
  .room.decisions-pending .badge { display: block; }
  /* ── decision card ── */
  .decision-card { align-self: stretch; max-width: min(680px, 100%);
    background: var(--panel); border: 1px solid var(--border);
    border-left: 4px solid #6c8ebf; border-radius: var(--radius); padding: 16px 18px;
    display: flex; flex-direction: column; gap: 12px; }
  .decision-card.pending-decision { border-left-color: var(--amber); }
  .decision-card.pending-decision .decision-tag { color: var(--amber); }
  .decision-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .decision-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: #6c8ebf; }
  .decision-progress { font-size: 11px; color: var(--dim); background: var(--bg);
    border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
  .decision-card .body { font-size: 14.5px; color: var(--text); line-height: 1.6; }
  .decision-source { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
    font-size: 12px; color: var(--accent); text-decoration: none; cursor: pointer;
    background: rgba(217,119,87,.08); border-radius: 4px; padding: 2px 8px;
    transition: background .15s; }
  .decision-source:hover { background: rgba(217,119,87,.16); }
  .decision-slots { display: flex; gap: 10px; }
  .decision-slot { flex: 1; background: var(--bg); border: 1.5px solid var(--border);
    border-radius: 10px; padding: 10px 13px; display: flex; flex-direction: column; gap: 4px; }
  .decision-slot.answered { border-color: #6c8ebf; background: rgba(108,142,191,.07); }
  .decision-slot.slot-waiting { border-style: dashed; opacity: .7; }
  .slot-who { font-size: 10.5px; font-weight: 700; color: var(--faint); text-transform: uppercase;
    letter-spacing: .5px; }
  .slot-val { font-size: 13.5px; color: var(--text); }
  .decision-slot.slot-waiting .slot-val { color: var(--faint); font-style: italic; }
  .decision-status { font-size: 13px; font-weight: 600; padding: 4px 0 2px; }
  .decision-status.consensus { color: var(--green); }
  .decision-status.conflict { color: var(--amber); }
  /* ── needs-your-attention banner ── */
  #attention { display: none; align-items: center; gap: 10px; flex-shrink: 0;
    padding: 8px 18px; background: rgba(217,164,65,.1);
    border-bottom: 1px solid rgba(217,164,65,.45); color: var(--amber);
    font-size: 13.5px; font-weight: 600; cursor: pointer; user-select: none; }
  #attention.show { display: flex; }
  #attention:hover { background: rgba(217,164,65,.16); }
  #attention .attn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
    flex-shrink: 0; box-shadow: 0 0 0 3px rgba(217,164,65,.15); }
  #attention .attn-x { margin-left: auto; background: none; border: 0; color: var(--amber);
    opacity: .6; cursor: pointer; font-size: 14px; padding: 2px 4px; line-height: 1; }
  #attention .attn-x:hover { opacity: 1; }
  /* ── invite acceptance banner ── */
  #invite-banner { display: none; align-items: center; gap: 10px; flex-shrink: 0;
    padding: 10px 18px; background: rgba(99,179,237,.1);
    border-bottom: 1px solid rgba(99,179,237,.4); color: #63b3ed;
    font-size: 13.5px; font-weight: 600; }
  #invite-banner.show { display: flex; }
  #invite-banner .inv-msg { flex: 1; }
  #invite-banner button { padding: 4px 14px; border-radius: 6px; border: 0; cursor: pointer;
    font-size: 12.5px; font-weight: 700; }
  #invite-banner .inv-accept { background: #63b3ed; color: #0d1117; }
  #invite-banner .inv-accept:hover { background: #90cdf4; }
  #invite-banner .inv-dismiss { background: none; border: 1px solid rgba(99,179,237,.4);
    color: #63b3ed; margin-left: 4px; }
  #invite-banner .inv-dismiss:hover { background: rgba(99,179,237,.1); }
  /* ── topbar invite button ── */
  #inviteBtn { background: none; border: 1px solid rgba(255,255,255,.2); border-radius: 6px;
    color: rgba(255,255,255,.7); cursor: pointer; font-size: 12px; padding: 3px 9px;
    margin-left: 6px; display: none; }
  #inviteBtn:hover { background: rgba(255,255,255,.1); color: #fff; }
  #inviteBtn.visible { display: inline-flex; align-items: center; gap: 4px; }
  /* ── links in messages ── */
  a { color: var(--accent); text-decoration: underline; cursor: pointer; }
  a:hover { opacity: .8; }
  /* ── routine link button ── */
  .link-btn { background: var(--accent); color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 14px; cursor: pointer; font-weight: 500; }
  .link-btn:hover { opacity: .85; }
  /* ── morning brief card ── */
  .brief-card {
    align-self: stretch; max-width: 580px;
    background: linear-gradient(160deg, rgba(217,119,87,.07) 0%, var(--panel) 100%);
    border: 1px solid var(--accent) !important;
    border-radius: var(--radius); overflow: hidden;
  }
  .brief-head {
    padding: 13px 16px;
    background: linear-gradient(90deg, var(--accent) 0%, #d9a441 100%);
    display: flex; align-items: center; gap: 10px; color: #fff;
  }
  .brief-head .bh-title { font-weight: 700; font-size: 14px; }
  .brief-head .bh-date { font-size: 12px; opacity: .8; }
  .brief-play {
    margin-left: auto; flex-shrink: 0;
    background: rgba(255,255,255,.2); border: none; border-radius: 50%;
    width: 36px; height: 36px; cursor: pointer; font-size: 15px; color: #fff;
    display: grid; place-items: center; transition: background .12s;
  }
  .brief-play:hover { background: rgba(255,255,255,.3); }
  .brief-play.active { background: rgba(255,255,255,.35); animation: pill-pulse 1.3s ease-in-out infinite; }
  .brief-body {
    padding: 13px 16px 8px;
    font-size: 14.5px; line-height: 1.6; white-space: pre-wrap;
  }
  .brief-tasks {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 0 16px 12px;
  }
  @media (max-width: 500px) { .brief-tasks { grid-template-columns: 1fr; } }
  .brief-col h4 {
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
  }
  .brief-task {
    font-size: 13px; color: var(--dim); line-height: 1.45;
    padding: 4px 0; border-top: 1px solid var(--border);
  }
  .brief-acks {
    display: flex; gap: 8px; padding: 10px 16px 14px;
    border-top: 1px solid var(--border);
  }
  .brief-ack {
    flex: 1; background: var(--elevated); border: 1px solid var(--border);
    border-radius: 9px; padding: 9px 12px; font-size: 13.5px; font-weight: 600;
    color: var(--text); cursor: pointer; transition: background .1s; text-align: center;
  }
  .brief-ack:hover { background: var(--panel); }

  /* ── artefacts strip ── */
  #artefacts-strip {
    display: none; padding: 7px 14px; border-bottom: 1px solid var(--border);
    background: var(--panel); flex-shrink: 0;
    overflow-x: auto; white-space: nowrap; gap: 6px; align-items: center;
    scrollbar-width: none;
  }
  #artefacts-strip::-webkit-scrollbar { display: none; }
  #artefacts-strip.has-items { display: flex; }
  .art-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
    font-size: 12.5px; font-weight: 500; border: 1px solid var(--border);
    background: var(--elevated); color: var(--text); transition: background .1s;
    user-select: none;
  }
  .art-chip:hover { background: var(--border); }
  .art-chip.brief {
    background: linear-gradient(90deg, rgba(217,119,87,.12) 0%, var(--elevated) 100%);
    border-color: rgba(217,119,87,.4);
  }
  .art-chip .art-date { font-size: 11px; opacity: .65; }
  .art-play {
    background: none; border: none; color: var(--accent); font-size: 12px;
    cursor: pointer; padding: 0 1px; line-height: 1; flex-shrink: 0;
  }
  .art-play.active { animation: pill-pulse 1.3s ease-in-out infinite; }

  /* ── podcast top-bar pill ── */
  #podcast-bar {
    display: none; align-items: center; gap: 0; margin-left: auto; flex-shrink: 0;
  }
  #podcast-pill {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
    border-radius: 20px; padding: 4px 10px 4px 8px;
    color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .12s; white-space: nowrap; max-width: 180px;
  }
  #podcast-pill:hover { background: rgba(255,255,255,.28); }
  #podcast-pill .pod-icon { font-size: 14px; flex-shrink: 0; }
  #podcast-pill .pod-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; opacity: .9; max-width: 100px; }
  #podcast-pill .pod-play { font-size: 11px; flex-shrink: 0; opacity: .85; }
  #podcast-pill.playing { background: rgba(255,255,255,.3); animation: pill-pulse 1.3s ease-in-out infinite; }
  #podcast-pill.loading .pod-play { animation: pod-spin 0.8s linear infinite; display: inline-block; }
  #podcast-pill.pod-error { background: rgba(255,80,80,.55); animation: pod-shake 0.4s ease; }
  @keyframes pod-spin { to { transform: rotate(360deg); } }
  @keyframes pod-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

  /* ── podcast message card ── */
  .podcast-card {
    align-self: flex-start; max-width: 380px; width: 100%;
    background: var(--panel); border: 1px solid var(--accent);
    border-radius: var(--radius); overflow: hidden;
  }
  .podcast-head {
    padding: 12px 14px;
    background: linear-gradient(90deg, #5b3a8a 0%, #7b52c4 100%);
    display: flex; align-items: center; gap: 10px; color: #fff;
  }
  .podcast-head .ph-icon { font-size: 20px; flex-shrink: 0; }
  .podcast-head .ph-info { flex: 1; min-width: 0; }
  .podcast-head .ph-label { font-size: 11px; opacity: .75; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
  .podcast-head .ph-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .podcast-play-btn {
    flex-shrink: 0; background: rgba(255,255,255,.2); border: none; border-radius: 50%;
    width: 38px; height: 38px; cursor: pointer; font-size: 16px; color: #fff;
    display: grid; place-items: center; transition: background .12s;
  }
  .podcast-play-btn:hover { background: rgba(255,255,255,.35); }
  .podcast-play-btn.active { background: rgba(255,255,255,.35); animation: pill-pulse 1.3s ease-in-out infinite; }
  .podcast-footer {
    padding: 10px 14px; display: flex; align-items: center; gap: 10px;
    border-top: 1px solid var(--border); font-size: 12px; color: var(--dim);
  }
  .podcast-progress {
    flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; cursor: pointer;
  }
  .podcast-progress-fill { height: 100%; background: #7b52c4; border-radius: 2px; width: 0%; transition: width .5s linear; }
  .podcast-time { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
  .podcast-link { color: var(--accent); text-decoration: underline; font-size: 12px; }

  /* ── trip board card ── */
  .trip-board { align-self: flex-start; max-width: 400px; width: 100%;
    background: var(--panel); border-radius: 16px; overflow: hidden;
    border: 1px solid rgba(0,180,160,.35); box-shadow: 0 2px 16px rgba(0,150,130,.12); }
  .trip-board-head { padding: 14px 16px;
    background: linear-gradient(120deg, #0a7d6e 0%, #11a898 60%, #0a8fa3 100%);
    display: flex; align-items: center; justify-content: space-between; color: #fff; }
  .trip-board-title { font-weight: 700; font-size: 15px; letter-spacing: .01em; }
  .trip-board-days { font-size: 12px; opacity: .8; margin-top: 2px; }
  .trip-board-collapse { background: none; border: none; color: rgba(255,255,255,.7);
    cursor: pointer; font-size: 16px; padding: 0 0 0 8px; line-height: 1; transition: transform .2s; }
  .trip-board.collapsed .trip-board-collapse { transform: rotate(180deg); }
  .trip-board-body { padding: 0 12px 12px; }
  .trip-board.collapsed .trip-board-body { display: none; }
  .trip-section { margin-top: 10px; }
  .trip-section-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--dim); margin-bottom: 5px; }
  .trip-row { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0;
    border-bottom: 1px solid var(--border); font-size: 13.5px; line-height: 1.35; }
  .trip-row:last-child { border-bottom: none; }
  .trip-row-icon { flex-shrink: 0; width: 18px; text-align: center; margin-top: 1px; }
  .trip-row-text { flex: 1; min-width: 0; }
  .trip-row-sub { font-size: 11.5px; color: var(--dim); }
  .trip-row-warn { font-size: 11.5px; color: #d97706; font-weight: 600; }
  .trip-book-btn { flex-shrink: 0; background: var(--accent); color: #fff;
    border: none; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600;
    cursor: pointer; text-decoration: none; display: inline-block; margin-top: 1px;
    transition: opacity .12s; }
  .trip-book-btn:hover { opacity: .82; }

  /* ── alignment card ── */
  .align-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
    overflow: hidden; max-width: 720px; width: 100%; }
  .align-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px;
    border-bottom: 1px solid var(--border); }
  .align-tag { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .03em; }
  .align-done { margin-left: auto; font-size: 12px; color: var(--dim); }
  .align-body { padding: 10px 16px 12px; font-size: 14.5px; line-height: 1.6;
    white-space: pre-wrap; word-wrap: break-word; color: var(--text); }
  .align-cols { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }
  .align-col { padding: 12px 14px; }
  .align-col + .align-col { border-left: 1px solid var(--border); }
  .align-col-label { font-size: 11.5px; font-weight: 700; color: var(--accent);
    margin: 0 0 8px; letter-spacing: .04em; }
  .align-input { width: 100%; box-sizing: border-box; background: var(--elevated);
    border: 1px solid var(--border); border-radius: 9px; color: var(--text);
    font-size: 13.5px; padding: 8px 10px; resize: none; font-family: inherit; line-height: 1.5; }
  .align-input:focus { outline: none; border-color: var(--accent); }
  .align-submit { margin-top: 8px; background: var(--accent); color: #fff; border: 0;
    border-radius: 9px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .align-submit:disabled { opacity: .45; cursor: default; }
  .align-answer { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap;
    word-wrap: break-word; color: var(--text); }
  .align-waiting { font-size: 13px; color: var(--dim); font-style: italic; }
#pp-mic-btn.rec .pp-icon { color:#e5484d; animation:micpulse 1s ease-in-out infinite; }
@keyframes micpulse { 0%,100%{opacity:1} 50%{opacity:.35} }
/* Talk to Otto — always-visible hands-free voice button in the composer */
#talk-btn { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 20px;
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
  transition: background .1s, color .1s, transform .1s; }
#talk-btn:hover { background: var(--elevated); color: var(--text); }
#talk-btn.on { color: #f78bb0; background: #3a1e2a; animation: micpulse 1.2s ease-in-out infinite; }
#talk-btn.on.speaking { color: #6be08f; background: #16351f; animation: none; }
#talk-status { display: block; padding: 5px 14px; font-size: 12.5px; font-weight: 600; color: #f78bb0; direction: auto; }
#talk-status[hidden] { display: none; }
/* streaming STT preview — interim words here before confirmed into textarea */
#stt-preview { display: none; padding: 4px 14px 2px; font-size: 13px;
  color: rgba(255,255,255,0.38); font-style: italic; direction: auto;
  border-bottom: 1px solid rgba(255,255,255,0.06); }
#stt-preview.has-text { display: block; }
#stt-preview::after { content: '▌'; animation: stt-blink .8s steps(2) infinite;
  color: rgba(255,255,255,0.25); font-style: normal; }
@keyframes stt-blink { 0%{opacity:1} 50%{opacity:0} }
/* ── image lightbox ── */
#img-lightbox { display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.88); align-items:center; justify-content:center;
  touch-action:none; }
#img-lightbox.open { display:flex; }
#img-lightbox img { max-width:90vw; max-height:90dvh; border-radius:10px;
  object-fit:contain; user-select:none; -webkit-user-drag:none;
  touch-action:none; will-change:transform; }
#img-lb-close { position:absolute; top:16px; right:18px; background:rgba(255,255,255,.15);
  border:0; color:#fff; font-size:22px; line-height:1; border-radius:50%;
  width:36px; height:36px; cursor:pointer; display:grid; place-items:center; }
#img-lb-close:hover { background:rgba(255,255,255,.28); }
#img-lb-open { position:absolute; bottom:16px; right:18px; background:rgba(255,255,255,.15);
  border:0; color:#fff; font-size:13px; font-weight:600; border-radius:20px;
  padding:6px 14px; cursor:pointer; }
#img-lb-open:hover { background:rgba(255,255,255,.28); }

/* ── Hands-Off Mode ────────────────────────────────── */
#ho-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0a0a0a;
  flex-direction: column;
  font-family: inherit;
  color: #eee;
}
#ho-panel.active { display: flex; }
#ho-video-stage, #ho-guest-video-stage {
  display: none;
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 40vh;
  background: #000;
  overflow: hidden;
}
#ho-video-stage.active, #ho-guest-video-stage.active { display: block; }
#ho-remote-video, #ho-guest-remote-video {
  width: 100%; height: 100%;
  object-fit: cover; background: #000;
}
#ho-local-video, #ho-guest-local-video {
  position: absolute; right: 10px; bottom: 10px;
  width: 26%; max-width: 130px;
  border-radius: 10px; border: 2px solid rgba(255,255,255,.65);
  object-fit: cover; transform: scaleX(-1);
  background: #111; z-index: 2;
}
#ho-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #222;
}
#ho-room-tag {
  font-size: 13px;
  font-weight: 600;
  color: #aaa;
  flex: 1;
}
#ho-invite-btn, #ho-exit-btn {
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}
#ho-invite-btn { background: #1e3a5f; color: #7eb8f7; }
#ho-exit-btn { background: #3a1e1e; color: #f78b7e; }
#ho-transcript {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ho-entry { display: flex; flex-direction: column; gap: 2px; }
.ho-entry.muted { opacity: 0.35; }
.ho-speaker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #666;
}
.ho-entry[data-who="Otto"] .ho-speaker { color: #7eb8f7; }
.ho-text { font-size: 16px; line-height: 1.5; }
#ho-interim {
  padding: 8px 16px;
  font-size: 15px;
  color: #555;
  font-style: italic;
  min-height: 28px;
}
#ho-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #222;
  gap: 8px;
}
#ho-status {
  font-size: 13px;
  color: #666;
  text-align: center;
  min-height: 16px;
}
/* Push-to-listen control */
#ho-listen-btn {
  border: none;
  border-radius: 16px;
  padding: 18px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: background .15s, transform .05s;
  font-family: inherit;
}
#ho-listen-btn:active { transform: scale(.985); }
#ho-listen-btn.idle { background: #16351f; color: #6be08f; }
#ho-listen-btn.listening { background: #3a1e2a; color: #f78bb0; }
#ho-listen-btn.busy { background: #1a1a1a; color: #666; cursor: default; }
#ho-listen-btn.listening::before {
  content: '';
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f0466e;
  vertical-align: middle;
  animation: ho-pulse 1.1s ease-in-out infinite;
}
@keyframes ho-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.7);} }
#ho-lang-toggle {
  align-self: center;
  background: #14243a;
  color: #7eb8f7;
  border: 1px solid #24405f;
  border-radius: 14px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
#ho-listen-badge {
  display: none;
  background: #2a1e0a;
  color: #f0b060;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  align-items: center;
  gap: 6px;
}

/* Guest join page */
#ho-guest-wrap {
  display: none;
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  color: #eee;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: inherit;
  z-index: 300;
}
#ho-guest-wrap.active { display: flex; }
#ho-guest-wrap h2 { font-size: 22px; font-weight: 600; margin: 0; }
#ho-guest-name {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  color: #eee;
  font-size: 16px;
  padding: 10px 16px;
  width: 240px;
  outline: none;
}
#ho-guest-join-btn {
  background: #1e3a5f;
  color: #7eb8f7;
  border: none;
  border-radius: 20px;
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
#ho-guest-panel {
  display: none;
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  color: #eee;
  flex-direction: column;
  font-family: inherit;
  z-index: 300;
}
#ho-guest-panel.active { display: flex; }
#ho-guest-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #222;
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
}
#ho-guest-leave {
  margin-left: auto;
  background: #3a1e1e;
  color: #f78b7e;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}
#ho-guest-transcript {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#ho-guest-footer {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid #222;
  gap: 10px;
}
#ho-guest-status { flex: 1; font-size: 13px; color: #666; }
#ho-guest-interim { font-size: 14px; color: #555; font-style: italic; }

/* allowance battery */
#limit-bat { display: none; align-items: center; gap: 5px; background: rgba(255,255,255,.16); border: 0; color: #fff;
  font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; line-height: 1; flex-shrink: 0; cursor: pointer; }
#limit-bat .lb-body { position: relative; width: 22px; height: 10px; border: 1.5px solid #fff; border-radius: 3px; overflow: hidden; }
#limit-bat .lb-fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: #6fdc8c; }
#limit-bat.mid .lb-fill { background: #ffc94d; }
#limit-bat.low .lb-fill { background: #ef5a5f; }
#limit-bat.low { animation: lbpulse 1.4s ease-in-out infinite; }
@keyframes lbpulse { 50% { opacity: .55; } }

#offline-banner { background: #b3261e; color: #fff; text-align: center; padding: 8px 12px; font-size: 14px; font-weight: 600; }

#fb-pick { position: fixed; left: 8px; bottom: 88px; z-index: 55; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: var(--surface, #222); color: inherit; font-size: 16px; opacity: .4; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); }
#fb-pick:hover, body.pick-mode #fb-pick { opacity: 1; }
body.tv-home #fb-pick { display: none !important; }

.bridge-sw { color: #b8b0a4; font-size: 12px; margin-inline-end: 6px; }
.msg.me .bridge-sw { color: #ffffffb0; }
.msg.bridge-orig { background: #fff8ec !important; }
.msg.bridge-orig .msg-body { color: #7a6a55; font-style: italic; }