:root {
    --bg: #0f1115; --panel: #171a21; --line: #2a2f3a; --text: #e6e8ee; --muted: #8b93a7;
    --accent: #7c9cff; --me: #23304f; --me-text: var(--text); --on-accent: #0b0d12; --bad: #ff6b6b; --good: #4fd18b;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color-scheme: dark;
  }
  * { box-sizing: border-box; }
  html { height: 100%; overflow: hidden; }
  /* Scrollbars follow the theme (built from its variables, so every theme and the default get them).
     --sb-thumb / --sb-track / --sb-hover can be overridden per area. Standard properties for Firefox and
     Chromium 121+; the ::-webkit-scrollbar rules cover Safari and older Chromium (newer Chromium ignores them
     once scrollbar-color is set). */
  :root { --sb-thumb: color-mix(in srgb, var(--accent) 38%, var(--line)); --sb-hover: color-mix(in srgb, var(--accent) 70%, var(--line)); --sb-track: transparent; }
  * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }
  *:hover { scrollbar-color: var(--sb-hover) var(--sb-track); }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--sb-track); }
  ::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; min-height: 32px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--sb-hover); background-clip: padding-box; }
  ::-webkit-scrollbar-corner { background: transparent; }
  /* the page is exactly the viewport (dvh = minus mobile browser bars); everything inside shrinks or scrolls */
  body { margin: 0; background: var(--bg); color: var(--text); height: 100vh; height: 100dvh; width: 100%; max-width: 100vw; overflow: hidden; display: flex; flex-direction: column; }
  button, input, textarea { font: inherit; color: inherit; }
  button { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 8px; padding: .55rem 1rem; font-weight: 600; cursor: pointer; }
  button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
  button:disabled { opacity: .5; cursor: default; }
  input, textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem; width: 100%; }
  select { font: inherit; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: .45rem .6rem; cursor: pointer; }
  [hidden] { display: none !important; }

  .center { margin: auto; width: min(400px, 92vw); display: flex; flex-direction: column; gap: .75rem; }
  .center h1 { margin: 0 0 .25rem; font-size: 1.8rem; }
  .center p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.4; }
  .err { color: var(--bad); font-size: .9rem; min-height: 1.2em; }
  .status { font-size: .8rem; color: var(--muted); }
  .status.on { color: var(--good); }
  .status.on::before { content: ''; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--good); margin-right: .4rem; vertical-align: middle; box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); animation: livePulse 2s ease-out infinite; }
  @keyframes livePulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); } 70% { box-shadow: 0 0 0 .5rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
  /* ── motion: things ease in and respond to the hand, nothing jumps ── */
  button { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease, box-shadow .15s ease; }
  button:not(:disabled):hover { filter: brightness(1.08); }
  button:not(:disabled):active { transform: scale(.97); }
  button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 1px; }
  input, textarea, select { transition: border-color .15s ease, box-shadow .15s ease; }
  input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
  @keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
  .rmsg.new, .msg.claude, .msg.me { animation: msgIn .26s cubic-bezier(.2,.7,.2,1); }
  #menu .choices button { transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease; }
  #menu .choices button:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
  .cv .dot { position: relative; transition: background-color .2s, opacity .2s; }
  .cv .dot.on::after, .cv .dot.idle::after, .pdot.on::after, .pdot.idle::after { content: ''; position: absolute; right: -.15rem; bottom: -.15rem; width: .42rem; height: .42rem; border-radius: 50%; background: var(--good); border: 2px solid var(--panel); }
  .cv .dot.idle::after, .pdot.idle::after { background: #fcc419; }
  .cv .dot.off, .pdot.off { opacity: .4; }
  .menuWho { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; max-width: min(560px, 92vw); margin: -.4rem 0 .2rem; }
  .whoLbl { width: 100%; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
  .whoChip { display: inline-flex; align-items: center; gap: .4rem; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem .2rem .45rem; font-size: .82rem; animation: msgIn .25s ease; }
  .whoChip.off { color: var(--muted); } .whoChip small { color: var(--muted); font-size: .7rem; }
  .pdot { position: relative; width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
  .roomTop .online { color: var(--good); }
  .typingLine { display: flex; align-items: center; gap: .35rem; padding: .15rem .9rem; font-size: .76rem; color: var(--muted); font-style: italic; animation: msgIn .2s ease; }
  .dots { display: inline-flex; gap: .2rem; margin-left: .35rem; align-items: center; }
  .dots i { width: .32rem; height: .32rem; border-radius: 50%; background: currentColor; opacity: .35; animation: dotPulse 1.2s ease-in-out infinite; }
  .dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
  @keyframes dotPulse { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-.2rem); } }
  .msg.thinking { color: var(--muted); font-style: italic; display: flex; align-items: center; animation: msgIn .2s ease; }
  /* the team chat shows the same bubble while Unity composes (the typing line takes the Work bubble's look) */
  .typingLine.thinking { margin: 0 .8rem .3rem; padding: .5rem .8rem; border-radius: 10px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); align-self: flex-start; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

  #shell { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  header { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  header b { font-size: 1.1rem; }
  header .folder { color: var(--muted); font-size: .85rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Work layout: left rail + resizable panes (files | editor | Claude | team chat) */
  #app { flex: 1; display: flex; min-height: 0; }
  #rail { flex: none; width: 46px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: .25rem; padding: .4rem .3rem; background: var(--panel); transition: width .15s; overflow: hidden; }
  #rail.open { width: 170px; }
  #rail button { background: transparent; color: var(--muted); border: 1px solid transparent; padding: .45rem .35rem; text-align: left; white-space: nowrap; display: flex; align-items: center; gap: .55rem; font-weight: 500; position: relative; }
  #rail button i { font-style: normal; width: 1.4rem; text-align: center; flex: none; }
  #rail button span.lbl { opacity: 0; transition: opacity .15s; }
  #rail.open button span.lbl { opacity: 1; }
  #rail button.on { color: var(--text); border-color: var(--line); background: var(--bg); }
  #rail .badge { position: absolute; top: .05rem; left: 1.45rem; background: var(--bad); color: #fff; border-radius: 999px; font-size: .65rem; padding: 0 .35rem; }
  #rail .grow { flex: 1; }
  #panes { flex: 1; display: flex; min-width: 0; min-height: 0; position: relative; }
  #panes > section { min-height: 0; min-width: 120px; display: flex; flex-direction: column; overflow: hidden; }
  .split { flex: none; width: 6px; cursor: col-resize; background: var(--line); opacity: .55; touch-action: none; }
  .split:hover, .split.drag { background: var(--accent); opacity: 1; }
  #panesEmpty { margin: auto; color: var(--muted); font-size: .9rem; }
  .bar .min { padding: .15rem .5rem; }
  .paneBody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .floatWin { position: fixed; z-index: 15; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.45); resize: both; overflow: hidden; min-width: 280px; min-height: 220px; }
  .floatWin .winBar { cursor: move; user-select: none; }
  #toasts { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 30; display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; pointer-events: none; }
  .toast { pointer-events: auto; cursor: pointer; max-width: min(380px, 80vw); background: var(--panel); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: .5rem .7rem; font-size: .85rem; box-shadow: 0 6px 24px rgba(0,0,0,.35); animation: toastRise var(--toast-s, 6s) ease-in forwards; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toast.mention, .toast.reply { border-width: 2px 2px 2px 4px; border-color: var(--accent); }
  @keyframes toastRise { 0% { transform: translateY(14px); opacity: 0; } 8% { transform: translateY(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-90px); opacity: 0; } }
  .bar { display: flex; gap: .4rem; align-items: center; padding: .5rem; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
  .bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar button { padding: .3rem .6rem; font-size: .8rem; }

  #tree { overflow: auto; flex: 1; padding: .25rem 0; font-size: .9rem; }
  #tree div { padding: .25rem .75rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #tree div:hover { background: var(--panel); }
  #editor { flex: 1; border: 0; border-radius: 0; resize: none; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; line-height: 1.45; tab-size: 2; }

  /* usage bar: 5h / 7d windows + context window meter (green → orange → yellow → red, purple = out of usage) */
  #usageBar { display: flex; align-items: center; gap: .9rem; padding: .35rem .7rem; border-bottom: 1px solid var(--line); font-size: .74rem; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 70%, transparent), transparent); }
  .uItem { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
  .uLbl { color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .66rem; }
  .uTime { font-family: ui-monospace, Consolas, monospace; }
  .uItem.est .uTime::after { content: ' est'; color: var(--muted); font-size: .62rem; }
  .uMini { width: 2.6rem; height: .42rem; border-radius: 999px; background: color-mix(in srgb, var(--line) 80%, transparent); overflow: hidden; }
  .uMini i, .uTrack i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .25s linear, background-color .25s linear, box-shadow .25s linear; }
  .uPctS { min-width: 2.6rem; text-align: right; font-family: ui-monospace, Consolas, monospace; font-weight: 600; }
  .uItem.est .uPctS { color: var(--muted); font-weight: 400; }
  .uCtx { flex: 1; min-width: 9rem; }
  .uTrack { flex: 1; height: .62rem; border-radius: 999px; overflow: hidden; position: relative; background: color-mix(in srgb, var(--line) 80%, transparent); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
  .uTrack i { position: relative; overflow: hidden; }
  .uTrack i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-100%); animation: uShine 2.8s ease-in-out infinite; }
  .uPct { min-width: 6.5rem; text-align: right; font-family: ui-monospace, Consolas, monospace; }
  .uItem.out .uTime, .uItem.out .uPct { color: #b06cff; font-weight: 700; }
  .uItem.out .uTrack i, .uItem.out .uMini i { animation: uPulse 1.2s ease-in-out infinite; }
  @keyframes uShine { 60%, 100% { transform: translateX(100%); } }
  @keyframes uPulse { 50% { filter: brightness(1.5); } }
  @media (max-width: 900px) { #usageBar { flex-wrap: wrap; gap: .5rem .8rem; } }
  #log { flex: 1; overflow: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
  .msg { padding: .6rem .8rem; border-radius: 10px; background: var(--panel); white-space: pre-wrap; word-wrap: break-word; line-height: 1.45; }
  .msg.me { background: var(--me); color: var(--me-text); align-self: flex-end; max-width: 85%; }
  .msg pre { background: #0b0d12; padding: .6rem; border-radius: 6px; overflow-x: auto; white-space: pre; }
  /* ── team board, calendar, Work "My tasks" (web/board.js) ── */
  #board header select { max-width: 12rem; }
  #bdFilter { width: min(280px, 30vw); }
  .bdMine { display: flex; align-items: center; gap: .3rem; font-size: .85rem; white-space: nowrap; } .bdMine input { width: auto; }
  .bdStale { color: var(--bad); font-size: .8rem; }
  #bdMain { flex: 1; min-height: 0; display: flex; }
  #bdCols { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: .6rem; padding: .7rem; overflow-x: auto; }
  .bdCol { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
  .bdCol header { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
  .bdColName { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
  .bdCount { font-size: .72rem; color: var(--muted); }
  .bdAdd { margin-left: auto; padding: .1rem .35rem; }
  .bdCards { flex: 1; min-height: 3rem; overflow-y: auto; padding: .5rem; display: flex; flex-direction: column; gap: .45rem; border-radius: 0 0 10px 10px; transition: background .12s; }
  .bdCards.target { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .bdNone { font-size: .78rem; color: var(--muted); text-align: center; padding: .6rem 0; }
  .bdCard { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .45rem .55rem; cursor: pointer; display: flex; flex-direction: column; gap: .3rem; transition: border-color .12s, transform .12s; }
  .bdCard:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
  .bdCard.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .bdCard.drag { opacity: .45; } .bdCard.insert { box-shadow: 0 -3px 0 var(--accent); }
  .bdCard.held { border-left: 3px solid #f59f00; } .bdCard.stale { border-left: 3px solid var(--bad); }
  .bdTop { display: flex; align-items: center; gap: .35rem; font-size: .7rem; flex-wrap: wrap; }
  .bdId { font-family: ui-monospace, Consolas, monospace; color: var(--muted); font-size: .7rem; }
  .bdPri { border-radius: 4px; padding: 0 .3rem; font-weight: 700; color: #111; background: #ced4da; }
  .bdPri.p3 { background: #ffd43b; } .bdPri.p4 { background: #ffa94d; } .bdPri.p5 { background: #ff6b6b; }
  .bdDue { border-radius: 4px; padding: 0 .3rem; background: color-mix(in srgb, var(--text) 10%, transparent); }
  .bdDue.today { background: #ffd43b; color: #111; } .bdDue.overdue { background: #ff6b6b; color: #111; }
  .bdRecur { color: var(--muted); display: inline-flex; }
  .bdExt { font-family: ui-monospace, Consolas, monospace; font-size: .68rem; color: var(--accent); text-decoration: none; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: 4px; padding: 0 .3rem; } .bdExt:hover { text-decoration: underline; }
  .bdAva { margin-left: auto; width: 1.25rem; height: 1.25rem; border-radius: 50%; color: #111; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; }
  .bdTitle { font-size: .88rem; line-height: 1.35; overflow-wrap: anywhere; }
  .bdLabels { display: flex; flex-wrap: wrap; gap: .25rem; }
  .bdLabel { font-size: .66rem; border: 1px solid var(--line); border-radius: 999px; padding: 0 .4rem; color: var(--muted); }
  .bdClaim { font-size: .72rem; color: #f59f00; } .bdClaim.agent { color: #3ddc84; } .bdClaim.stale { color: var(--bad); }
  #bdDetail { width: min(400px, 42vw); flex: none; border-left: 1px solid var(--line); background: var(--panel); padding: .7rem .9rem; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; }
  .bdDHead { display: flex; align-items: center; gap: .5rem; } .bdDHead button { margin-left: auto; padding: .2rem .4rem; }
  .bdWarn { font-size: .8rem; color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); border-radius: 8px; padding: .45rem .6rem; }
  .bdField { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; color: var(--muted); flex: 1; min-width: 0; }
  .bdField input, .bdField select, .bdField textarea { color: var(--text); font-size: .88rem; }
  .bdBodyWrap { display: flex; flex-direction: column; gap: .25rem; } .bdBodyWrap textarea { resize: vertical; min-height: 8rem; font-size: .88rem; }
  .bdBodyHead { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--muted); }
  .bdTiny { padding: .05rem .5rem; font-size: .72rem; }
  .bdPrev { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; min-height: 6rem; background: var(--bg); font-size: .88rem; }
  .bdRow { display: flex; gap: .6rem; flex-wrap: wrap; }
  .bdPriRow { display: flex; gap: .2rem; } .bdPriRow button { flex: 1; padding: .25rem 0; font-size: .75rem; } .bdPriRow button.on { border-color: var(--accent); color: var(--accent); }
  .bdActs { display: flex; flex-wrap: wrap; gap: .35rem; } .bdActs button { font-size: .8rem; padding: .3rem .6rem; }
  .bdDanger { color: var(--bad); }
  .bdMeta { font-size: .72rem; color: var(--muted); }
  .bdLog { display: flex; flex-direction: column; gap: .2rem; font-size: .74rem; border-top: 1px solid var(--line); padding-top: .5rem; }
  .bdAct { color: var(--muted); } .bdAct.agent { color: color-mix(in srgb, #3ddc84 70%, var(--text)); }
  #bdFoot { display: flex; align-items: center; gap: 1rem; padding: .35rem .8rem; border-top: 1px solid var(--line); background: var(--panel); font-size: .75rem; overflow: hidden; }
  #bdPresence { display: flex; align-items: center; gap: .35rem; flex: none; flex-wrap: wrap; }
  #bdActivity { display: flex; gap: .9rem; overflow: hidden; white-space: nowrap; min-width: 0; }
  .bdChip { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .5rem; } .bdChip.agent { color: #3ddc84; }
  .bdMuted { color: var(--muted); } .bdErr { color: var(--bad); }
  .calTitle { font-weight: 700; min-width: 9rem; text-align: center; }
  #calGrid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); margin: .6rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .calHead { background: var(--panel); text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .3rem 0; }
  .calDay { background: var(--bg); padding: .25rem .3rem; display: flex; flex-direction: column; gap: .2rem; overflow: hidden; cursor: pointer; min-height: 0; }
  .calDay:hover { background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
  .calDay.other { opacity: .45; } .calDay.today .calNum { background: var(--accent); color: var(--on-accent, #fff); border-radius: 999px; padding: 0 .4rem; }
  .calNum { font-size: .75rem; font-weight: 700; align-self: flex-start; }
  .calTask { font-size: .72rem; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px; padding: .05rem .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .calTask.s-done { opacity: .5; text-decoration: line-through; } .calTask.overdue { background: color-mix(in srgb, #ff6b6b 18%, var(--panel)); }
  #tasks { display: flex; flex-direction: column; } #taskPaneBody { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem; display: flex; flex-direction: column; gap: .4rem; }
  .tpHead { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: .4rem; }
  .tpNone { font-size: .78rem; color: var(--muted); }
  .tpItem { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .4rem .5rem; display: flex; flex-direction: column; gap: .25rem; }
  .tpActs { display: flex; gap: .3rem; } .tpActs button { font-size: .75rem; padding: .15rem .45rem; }
  #board, #cal, #notes { overflow: hidden; }
  /* ── My day planner (web/board.js) ── */
  #myDay .box { width: min(680px, 94vw); }
  .mdSect { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: .4rem; display: flex; justify-content: space-between; }
  .mdSect.over { color: var(--bad); }
  .mdItem { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); flex-wrap: wrap; }
  .mdItem .bdTitle { flex: 1; min-width: 10rem; } .mdItem .mdActs { display: flex; gap: .25rem; } .mdItem .mdActs button { padding: .15rem .45rem; font-size: .72rem; }
  .mdSum { color: var(--muted); font-size: .85rem; }
  /* ── team notes (web/notes.js) ── */
  #ntMain { flex: 1; min-height: 0; display: flex; }
  #ntSide { flex: none; width: min(300px, 36%); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: .4rem; padding: .5rem; overflow: hidden; }
  #ntSide input { font-size: .85rem; }
  #ntTree { flex: 1; min-height: 0; overflow: auto; font-size: .85rem; }
  .ntRow { display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem; border-radius: 6px; cursor: pointer; }
  .ntRow:hover { background: var(--panel); } .ntRow.on { background: var(--bg); outline: 1px solid var(--line); }
  .ntRow .ntName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ntRow small { color: var(--muted); font-size: .68rem; white-space: nowrap; }
  .ntFolder .ntName { font-weight: 600; } .ntRow .tiny { opacity: 0; } .ntRow:hover .tiny { opacity: 1; }
  .ntSnip { flex-basis: 100%; font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #ntDoc { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  #ntDoc .bar #ntTitle { flex: 1; color: var(--text); font-weight: 600; } #ntDoc .bar small { color: var(--muted); font-size: .72rem; margin-right: .4rem; white-space: nowrap; }
  #ntEditor { flex: 1; border: 0; border-radius: 0; resize: none; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; line-height: 1.5; padding: 1rem; }
  #ntPreview { flex: 1; overflow: auto; padding: 1rem 1.3rem; }
  #ntEmpty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); }
  @media (max-width: 700px) { #ntMain { flex-direction: column; } #ntSide { width: auto; max-height: 40%; border-right: 0; border-bottom: 1px solid var(--line); } }
  /* ── icons (the sprite at the top of <body>) ── */
  .ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
  .ic.lead { margin-right: .4em; }
  .ic.trail { margin-left: .35em; }
  #rail button i .ic { width: 1.25rem; height: 1.25rem; vertical-align: middle; }
  .tool::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-right: .45em; vertical-align: -.15em; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l1.7 2.4 2.9-.7.7 2.9 2.4 1.7-1.3 2.9 1.3 2.9-2.4 1.7-.7 2.9-2.9-.7L12 21.2l-1.7-2.4-2.9.7-.7-2.9-2.4-1.7L5.6 12 4.3 9.1l2.4-1.7.7-2.9 2.9.7z'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l1.7 2.4 2.9-.7.7 2.9 2.4 1.7-1.3 2.9 1.3 2.9-2.4 1.7-.7 2.9-2.9-.7L12 21.2l-1.7-2.4-2.9.7-.7-2.9-2.4-1.7L5.6 12 4.3 9.1l2.4-1.7.7-2.9 2.9.7z'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3C/svg%3E") center / contain no-repeat; }
  /* ── markdown (web/md.js), shared by the Work chat and the team chat ── */
  .msg.claude { border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
  .md { white-space: normal; line-height: 1.55; }
  .md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
  .md p { margin: .45rem 0; }
  .md .mdh { margin: .9rem 0 .4rem; line-height: 1.25; font-weight: 700; }
  .md h1.mdh { font-size: 1.35rem; padding-bottom: .25rem; border-bottom: 1px solid var(--line); }
  .md h2.mdh { font-size: 1.18rem; padding-bottom: .2rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
  .md h3.mdh { font-size: 1.05rem; } .md h4.mdh, .md h5.mdh, .md h6.mdh { font-size: .95rem; color: var(--muted); }
  .md a { color: color-mix(in srgb, var(--accent) 55%, var(--text)); text-decoration: underline; text-underline-offset: 2px; }
  .md mark { background: color-mix(in srgb, #ffd43b 55%, transparent); color: inherit; border-radius: 3px; padding: 0 .15rem; }
  .md code.mdc { font-family: ui-monospace, Consolas, monospace; font-size: .86em; background: color-mix(in srgb, var(--text) 12%, transparent); padding: .08rem .35rem; border-radius: 5px; }
  .md hr { border: 0; border-top: 1px solid var(--line); margin: .8rem 0; }
  .md .mdlist { margin: .35rem 0; padding-left: 1.5rem; } .md .mdlist li { margin: .15rem 0; } .md .mdlist .mdlist { margin: .1rem 0; }
  .md li.mdtask { list-style: none; margin-left: -1.3rem; } .md li.mdtask input { width: auto; margin: 0 .45rem 0 0; vertical-align: middle; }
  .md blockquote { margin: .5rem 0; padding: .3rem .8rem; border-left: 3px solid var(--muted); color: color-mix(in srgb, var(--text) 85%, var(--muted)); background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: 0 6px 6px 0; }
  .md .mdalert { --ac: #4dabf7; border-left-color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, transparent); }
  .md .mdalert-tip { --ac: #51cf66; } .md .mdalert-important { --ac: #9775fa; } .md .mdalert-warning { --ac: #fcc419; } .md .mdalert-caution { --ac: #ff6b6b; }
  .md .mdalert-t { font-weight: 700; color: var(--ac); margin-bottom: .15rem; }
  .md .mdtable { overflow-x: auto; margin: .5rem 0; border: 1px solid var(--line); border-radius: 8px; }
  .md table { border-collapse: collapse; width: 100%; font-size: .9em; }
  .md th, .md td { padding: .35rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .md th { background: color-mix(in srgb, var(--text) 7%, transparent); font-weight: 700; }
  .md tbody tr:nth-child(even) { background: color-mix(in srgb, var(--text) 3%, transparent); }
  .md tbody tr:last-child td { border-bottom: 0; }
  .md .mdcode { margin: .55rem 0; border: 1px solid color-mix(in srgb, var(--line) 80%, #000); border-radius: 8px; overflow: hidden; background: #0b0d12; }
  .md .mdhead { display: flex; align-items: center; gap: .4rem; padding: .25rem .5rem; font-size: .72rem; color: #9aa4b2; background: #151922; border-bottom: 1px solid #222838; font-family: ui-monospace, Consolas, monospace; }
  .md .mdhead span { flex: 1; text-transform: lowercase; }
  .md .mdbtn { padding: .1rem .5rem; font-size: .7rem; background: transparent; color: #c7cfdb; border: 1px solid #2c3446; border-radius: 5px; }
  .md .mdbtn:hover { background: #222838; }
  .md .mdcode pre { margin: 0; padding: .65rem .75rem; background: transparent; color: #e6e9ef; border-radius: 0; font-size: .82rem; line-height: 1.5; white-space: pre; overflow-x: auto; tab-size: 2; }
  .md .hl-kw { color: #c792ea; } .md .hl-str { color: #c3e88d; } .md .hl-num { color: #f78c6c; } .md .hl-com { color: #697098; font-style: italic; }
  .md .hl-add { color: #8ce99a; background: rgba(81,207,102,.1); } .md .hl-del { color: #ffa8a8; background: rgba(255,107,107,.1); }
  .md .mdmermaid { background: color-mix(in srgb, var(--bg) 80%, var(--panel)); }
  .md .mdmbody { padding: .6rem; overflow-x: auto; text-align: center; color: var(--muted); font-size: .8rem; }
  .md .mdmbody svg { max-width: 100%; height: auto; }
  .md .mdmsrc { margin: 0; padding: .6rem .75rem; border-top: 1px solid var(--line); background: #0b0d12; color: #e6e9ef; font-size: .8rem; white-space: pre; overflow-x: auto; }
  .md .mderr { color: var(--bad); }
  .md .mdmath { margin: .5rem 0; padding: .5rem .75rem; border-radius: 6px; background: color-mix(in srgb, var(--text) 6%, transparent); font-family: ui-monospace, Consolas, monospace; font-size: .85rem; white-space: pre-wrap; text-align: center; overflow-x: auto; }
  .md .mdmath.rendered { font-family: inherit; font-size: 1.05rem; white-space: normal; }
  .md .mdmathi { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 4px; padding: 0 .25rem; }
  .md .mdmathi.rendered { font-family: inherit; font-size: 1em; background: transparent; padding: 0; }
  .md .mdmath.mderr, .md .mdmathi.mderr { outline: 1px dashed var(--bad); }
  .md .mdfnref { cursor: pointer; color: color-mix(in srgb, var(--accent) 55%, var(--text)); font-size: .72em; margin-left: .1rem; }
  .md .mdfns { font-size: .82em; color: var(--muted); } .md .mdfns ol { padding-left: 1.4rem; margin: .3rem 0 0; }
  .md .mdimgwrap { display: inline-block; max-width: 100%; margin: .3rem 0; }
  .md .mdimg { max-width: min(100%, 480px); max-height: 360px; border-radius: 8px; display: block; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 4%, transparent); transition: transform .12s ease, box-shadow .15s ease; }
  .md a.mdimgwrap:hover .mdimg { transform: scale(1.01); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
  .md .mdimg[alt]:not([alt=""]) { min-height: 2rem; }
  .msg.me .md a, .msg.me .md .mdfnref { color: inherit; }
  .tool { font-size: .8rem; color: var(--muted); font-family: ui-monospace, Consolas, monospace; padding: .2rem .5rem; border-left: 2px solid var(--accent); word-break: break-all; }
  .sys { font-size: .8rem; color: var(--muted); text-align: center; }
  .sys.bad { color: var(--bad); }
  #composer { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--line); }
  #composer textarea { resize: none; height: 4.2rem; }
  .sendCol { display: flex; flex-direction: column; gap: .4rem; }
  .sendCol button { white-space: nowrap; min-width: 6.5rem; }
  button.dictate.on { background: var(--bad); color: #fff; border-color: var(--bad); animation: recPulse 1.2s infinite; }
  button.dictate.armed { background: var(--good); color: #111; border-color: var(--good); }
  .msg.me.queued { opacity: .6; border: 1px dashed var(--muted); }
  /* slash-command menu above the Claude box: "/" lists the common commands, filtered as you type */
  #slashMenu { border-top: 1px solid var(--line); background: var(--panel); max-height: 40%; overflow: auto; padding: .3rem; display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; }
  #slashMenu .sl { display: flex; align-items: baseline; gap: .6rem; padding: .35rem .6rem; border-radius: 6px; cursor: pointer; background: transparent; color: var(--text); border: 0; text-align: left; font-weight: 400; }
  #slashMenu .sl:hover, #slashMenu .sl.on { background: var(--line); }
  #slashMenu .sl code { font-family: ui-monospace, Consolas, monospace; font-weight: 700; min-width: 7.5rem; }
  #slashMenu .sl small { color: var(--muted); } #slashMenu .sl .tag { margin-left: auto; font-size: .66rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 .4rem; }
  .msg .unqueue { float: right; margin-left: .5rem; background: transparent; color: var(--muted); padding: 0 .3rem; font-size: .8rem; border: 0; }

  #archive, .modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; z-index: 40; }
  #archive .box, .modal .box { margin: auto; width: min(560px, 94vw); max-height: 86vh; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; }
  #archive .box > .bar, .modal .box > .bar { padding: .75rem 1rem; color: var(--text); }
  .setBody { overflow: auto; padding: 1rem; display: flex; flex-direction: column; gap: .9rem; font-size: .9rem; }
  .setBody label { display: flex; flex-direction: column; gap: .3rem; }
  .setBody label.chk { flex-direction: row; align-items: center; gap: .5rem; }
  .setBody label.chk input { width: auto; }
  .swatches { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
  .swatches button { width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; border: 2px solid transparent; font-size: .7rem; color: var(--text); background: var(--bg); }
  .swatches button.on { border-color: var(--text); }
  .slider { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .6rem; align-items: center; }
  .slider input { padding: 0; }
  .slider button { padding: .2rem .55rem; font-size: .8rem; }
  .setSection { display: flex; flex-direction: column; gap: .5rem; font-size: .85rem; }
  .apiBox, .provBox { display: flex; flex-direction: column; gap: .45rem; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; }
  .apiBox code, .provBox code { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; background: color-mix(in srgb, var(--text) 10%, transparent); padding: .1rem .35rem; border-radius: 4px; overflow-wrap: anywhere; }
  .apiBox .row, .provBox .row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
  .apiBox .row button, .provBox .row button { padding: .3rem .6rem; font-size: .8rem; }
  .apiBox .row select, .provBox .row select, .provBox .row input { width: auto; flex: 1; min-width: 9rem; padding: .35rem .5rem; font-size: .85rem; }
  .apiKeyShow { display: flex; gap: .4rem; align-items: center; } .apiKeyShow input { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
  .provItem { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .3rem 0; border-top: 1px solid var(--line); }
  .provItem:first-child { border-top: 0; } .provItem small { color: var(--muted); }
  #archiveList { overflow: auto; padding: .5rem; display: flex; flex-direction: column; gap: .4rem; }
  .archiveSearch { padding: .5rem .75rem 0; } .archiveSearch input { font-size: .9rem; }
  .conv .snip { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .15rem; }
  .conv .snip.me::before { content: 'you: '; color: var(--text); } .conv .snip.claude::before { content: 'Claude: '; color: var(--text); }
  .conv mark { background: color-mix(in srgb, #ffd43b 55%, transparent); color: inherit; border-radius: 3px; padding: 0 .1rem; }
  .conv { display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; }
  .conv.current { border-color: var(--accent); }
  .conv div { flex: 1; min-width: 0; }
  .conv b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .conv small { color: var(--muted); }
  .conv button { padding: .3rem .6rem; font-size: .8rem; }
  #convTitle { cursor: pointer; }

  .themeWrap { position: relative; }
  #themeMenu { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .3rem; max-height: 70vh; overflow: auto; min-width: 200px; display: flex; flex-direction: column; }
  #themeMenu button { background: transparent; color: var(--text); text-align: left; font-weight: 400; padding: .4rem .6rem; border-radius: 6px; display: flex; align-items: center; gap: .5rem; }
  #themeMenu button:hover { background: var(--line); }
  #themeMenu button.on { outline: 1px solid var(--accent); }
  #themeMenu i { width: 1.6rem; height: .9rem; border-radius: 3px; border: 1px solid rgba(128,128,128,.5); flex: none; }

  /* main menu */
  #menu { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; }
  #menuUser { font-size: 2.6rem; font-weight: 700; margin: 0; letter-spacing: .02em; }
  #menu .choices { display: flex; flex-direction: column; gap: .8rem; align-items: center; }
  #menu .choices button { width: 220px; padding: .9rem 1rem; font-size: 1.15rem; position: relative; }
  #menu .badge { position: absolute; top: -.4rem; right: -.4rem; background: var(--bad); color: #fff; border-radius: 999px; font-size: .75rem; padding: .1rem .45rem; }
  button.back { margin-right: .25rem; }

  /* chat room + admin screens share the header style */
  .screen { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #roomHost, #roomPaneBody, #roomFloatBody { flex: 1; min-height: 0; display: flex; }
  #roomCore { flex: 1; min-width: 0; min-height: 0; display: flex; }
  #roomSide { flex: none; width: 210px; border-right: 1px solid var(--line); overflow: auto; padding: .5rem; display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
  #roomCore.noside #roomSide { display: none; }
  .cv { background: transparent; color: var(--text); font-weight: 500; text-align: left; padding: .4rem .5rem; border-radius: 6px; display: flex; align-items: center; gap: .45rem; position: relative; }
  .cv.on { background: var(--bg); outline: 1px solid var(--line); }
  .cv .dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; background: var(--muted); }
  .cv .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cv small { display: block; color: var(--muted); font-size: .7rem; font-weight: 400; }
  .cv .badge { background: var(--bad); color: #fff; border-radius: 999px; font-size: .68rem; padding: 0 .4rem; }
  #roomSide details { margin-top: .6rem; color: var(--muted); font-size: .72rem; }
  #roomSide details div { margin: .35rem 0; word-break: break-all; }
  .roomMain { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
  .roomTop { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-bottom: 1px solid var(--line); font-size: .85rem; }
  .roomTop button { padding: .2rem .55rem; font-size: .8rem; }
  .roomTop #roomStatus { color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
  #roomLog { flex: 1; overflow: auto; padding: .8rem; display: flex; flex-direction: column; gap: .45rem; }
  .rmsg { cursor: pointer; border-left: 3px solid var(--line); max-width: 92%; align-self: flex-start; }
  .rmsg.me { align-self: flex-end; }
  .rmsg small { display: block; color: var(--muted); font-size: .74rem; margin-bottom: .2rem; }
  .rmsg.me small { color: inherit; opacity: .8; }
  .rmsg.deleted .body { font-style: italic; opacity: .6; }
  .rmsg.flash { outline: 2px solid var(--accent); }
  .rmsg .quote { font-size: .78rem; opacity: .8; border-left: 2px solid var(--muted); padding: .1rem .45rem; margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rmsg .quote:hover { opacity: 1; text-decoration: underline; }
  .rmsg .mention { font-weight: 700; }
  .rmsg .mention.you { background: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 4px; padding: 0 .15rem; }
  .rmsg .seenLine { font-size: .7rem; opacity: .7; margin-top: .25rem; }
  #msgMenu { position: fixed; z-index: 50; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .3rem; display: flex; flex-direction: column; min-width: 190px; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
  #msgMenu button { background: transparent; color: var(--text); text-align: left; font-weight: 400; padding: .4rem .6rem; border-radius: 6px; }
  #msgMenu button:hover { background: var(--line); }
  #msgMenu small { color: var(--muted); padding: .3rem .6rem; font-size: .72rem; }
  #replyBar { display: flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
  #replyBar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #replyBar button { padding: .1rem .5rem; font-size: .8rem; }
  #mentionList { display: flex; gap: .3rem; flex-wrap: wrap; padding: .35rem .75rem 0; }
  #mentionList button { padding: .2rem .55rem; font-size: .8rem; }
  #roomComposer { display: flex; gap: .5rem; padding: .6rem .75rem .75rem; border-top: 1px solid var(--line); }
  #roomComposer textarea { resize: none; height: 3.2rem; }
  #roomComposer .side { display: flex; flex-direction: column; gap: .35rem; }
  /* attachments (web/attach.js): the + button, the tray of picked files, and how sent ones show */
  .attPlus { align-self: flex-start; padding: .45rem; }
  .attTray { display: flex; flex-wrap: wrap; gap: .35rem; padding: .45rem .75rem 0; }
  .attChip { display: inline-flex; align-items: center; gap: .35rem; max-width: 22rem; padding: .2rem .25rem .2rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: .82rem; }
  .attChip .attName, .attHead .attName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .attChip small, .attHead small { color: var(--muted); white-space: nowrap; }
  .atts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
  .att { display: flex; flex-direction: column; gap: .35rem; max-width: min(26rem, 100%); padding: .45rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 85%, transparent); }
  .attHead { display: flex; align-items: center; gap: .4rem; font-size: .85rem; min-width: 0; }
  .attHead .attName { flex: 1; min-width: 0; }
  .attImg { max-width: 100%; max-height: 18rem; border-radius: 8px; cursor: zoom-in; object-fit: contain; background: var(--bg); }
  .attVideo { max-width: 100%; max-height: 22rem; border-radius: 8px; background: #000; }
  .attAudio { width: 100%; }
  .attNote { color: var(--muted); }
  .attModal { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .65); display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
  .attBox { display: flex; flex-direction: column; max-width: min(1100px, 100%); max-height: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .attBox .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
  .attView { overflow: auto; padding: .75rem 1rem; min-width: min(46rem, 90vw); }
  .attBig { max-width: 100%; max-height: calc(100vh - 6rem); object-fit: contain; display: block; margin: auto; }
  /* Files (web/library.js) */
  #library { display: flex; flex-direction: column; }
  #library header input[type="search"] { max-width: 18rem; }
  .libLink { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin: .75rem 1rem 0; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 10px; font-size: .88rem; }
  .libLink code { user-select: all; }
  #libList { flex: 1; overflow: auto; padding: .75rem 1rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
  .libRow { display: grid; grid-template-columns: minmax(12rem, 1.2fr) 2fr auto; gap: .5rem 1rem; align-items: center; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 85%, transparent); }
  .libRow.gone { opacity: .6; }
  .libName { display: flex; align-items: center; gap: .4rem; min-width: 0; } .libName b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .libName small { color: var(--muted); white-space: nowrap; }
  .libMeta { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .82rem; color: var(--muted); } .libMeta .libPath { font-family: ui-monospace, monospace; }
  .libActs { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
  @media (max-width: 820px) { .libRow { grid-template-columns: 1fr; } .libActs { justify-content: flex-start; } }
  .libEdit { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
  .libEdit > div { width: min(60rem, 100%); height: min(46rem, 100%); display: flex; flex-direction: column; gap: .5rem; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
  .libEdit textarea { flex: 1; resize: none; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; white-space: pre; }
  .libEdit .libActs { justify-content: space-between; align-items: center; }
  /* "Newest": sticks to the bottom of a conversation that has new content below while you read further up */
  .jumpNew { position: sticky; bottom: .5rem; align-self: center; z-index: 5; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .8rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
  #micBtn { padding: .35rem .6rem; }
  #recBar { display: flex; align-items: center; gap: .6rem; padding: .4rem .75rem; border-top: 1px solid var(--line); font-size: .85rem; }
  #recBar .dotRec { width: .7rem; height: .7rem; border-radius: 50%; background: var(--bad); animation: recPulse 1s infinite; }
  #recBar span { flex: 1; }
  #recBar button { padding: .25rem .7rem; font-size: .8rem; }
  @keyframes recPulse { 50% { opacity: .3; } }
  #roomSide { gap: 0; padding: 0; flex-direction: row; width: 266px; }
  #sideLists { flex: 1; min-width: 0; overflow: auto; padding: .5rem; display: flex; flex-direction: column; gap: .35rem; }
  #convList { display: flex; flex-direction: column; gap: .25rem; }
  /* ── servers (rail), channels, groups, members (web/guilds.js) ── */
  #serverRail { flex: none; width: 56px; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .5rem 0; background: color-mix(in srgb, var(--bg) 70%, #000); border-right: 1px solid var(--line); overflow-y: auto; }
  #serverRail .srv { position: relative; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; color: #fff; font-weight: 800; font-size: .8rem; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; transition: border-radius .15s ease, transform .1s ease; }
  #serverRail .srv:hover, #serverRail .srv.on { border-radius: 14px; }
  #serverRail .srv.on::before { content: ''; position: absolute; left: -8px; top: 8px; width: 4px; height: 24px; border-radius: 0 4px 4px 0; background: var(--text); }
  #serverRail .srv.dms { background: var(--panel); color: var(--accent); } /* Direct messages: always first, above every server */
  #serverRail .srv.dms.on, #serverRail .srv.dms:hover { background: var(--accent); color: #fff; }
  #serverRail .railSep { flex: none; width: 28px; height: 2px; border-radius: 2px; background: var(--line); }
  #grpList { display: flex; flex-direction: column; gap: .25rem; }
  #serverRail .srv.add { background: var(--panel); color: var(--good); border: 1px dashed var(--line); }
  #serverRail .srv.invites { background: var(--panel); color: var(--accent); border: 1px solid var(--accent); position: relative; }
  #serverRail .srv.invites .badge { position: absolute; top: -4px; right: -4px; }
  /* Server Settings (web/guild-settings.js) */
  .gsetBox { width: min(760px, 96vw) !important; }
  .gsetTabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: 0 1rem .5rem; border-bottom: 1px solid var(--line); }
  .gsetTabs button.on { background: var(--accent); color: var(--on-accent); }
  .gsetMember { display: flex; flex-direction: column; gap: .2rem; padding: .45rem .3rem; border-bottom: 1px solid var(--line); }
  .gsetMember.focus { outline: 1px solid var(--accent); border-radius: 6px; }
  .gsetMember small, .setSection small { color: var(--muted); }
  .gsetPerms { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .15rem .6rem; margin: .3rem 0; }
  .gsetAudit { font-size: .82rem; padding: .15rem 0; border-bottom: 1px dashed var(--line); overflow-wrap: anywhere; }
  .gsetPreview { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; }
  .gsetPreview .srv { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; color: #fff; }
  .gsetIcon { width: 6em; }
  /* Settings tabs + profiles (web/profile.js) */
  .setTabs { display: flex; gap: .25rem; padding: 0 1rem .5rem; border-bottom: 1px solid var(--line); }
  .setTabs button.on { background: var(--accent); color: var(--on-accent); }
  #profileCard { position: fixed; z-index: 46; }
  .pCard { width: 300px; max-width: 94vw; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.45); position: relative; }
  .pBanner { height: 64px; }
  .pAvatar { position: absolute; top: 30px; left: 14px; width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--panel); display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: #fff; }
  .pBody { padding: 2.2rem .9rem .8rem; display: flex; flex-direction: column; gap: .3rem; }
  .pName { font-size: 1.1rem; } .pSub, .pFacts { color: var(--muted); font-size: .82rem; }
  .pStatus { font-style: italic; } .pBio { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; }
  .pHead { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: .3rem; }
  .pLinks, .pRoles { display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: .85rem; }
  .pLinkInputs { display: flex; flex-direction: column; gap: .25rem; }
  #profilePreview { display: flex; justify-content: center; margin-bottom: .6rem; }
  #profilePreview .pCard { box-shadow: none; }
  .pLink { cursor: pointer; } .pLink:hover { text-decoration: underline; }
  .roleChip { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 0 .55rem; font-size: .8rem; font-weight: 600; }
  .mention.role { font-weight: 700; }
  .gsetPerms .cat { grid-column: 1 / -1; font-weight: 700; color: var(--muted); margin-top: .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
  .owRow { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(3, auto); gap: .2rem .5rem; align-items: center; font-size: .85rem; }
  .owRow select { font-size: .8rem; }
  .pinsPop { position: fixed; z-index: 45; width: min(370px, 94vw); max-height: 60vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .5rem; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
  .pinRow { display: flex; flex-wrap: wrap; gap: .3rem; align-items: baseline; padding: .35rem .2rem; border-bottom: 1px solid var(--line); cursor: pointer; }
  .pinRow:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .pinWho { font-weight: 700; } .pinText { flex: 1 1 100%; overflow-wrap: anywhere; } .pinRow small { color: var(--muted); }
  .rmsg.flash { outline: 2px solid var(--accent); border-radius: 8px; }
  #gsetModal textarea { width: 100%; box-sizing: border-box; }
  #serverRail .srv .badge { position: absolute; right: -4px; bottom: -4px; background: var(--bad); color: #fff; border-radius: 999px; font-size: .62rem; padding: 0 .3rem; border: 2px solid var(--bg); }
  .chHead { display: flex; align-items: center; gap: .3rem; padding: .25rem .25rem .4rem; border-bottom: 1px solid var(--line); margin-bottom: .2rem; } .chHead b { flex: 1; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chSect { display: flex; align-items: center; justify-content: space-between; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: .55rem .25rem .15rem; }
  .ghost.tiny { padding: .05rem .3rem; font-size: .7rem; border: 0; } .ghost.tiny.armed { color: var(--bad); }
  .cv.ch { padding: .3rem .45rem; } .cv .dot.hash { background: transparent; color: var(--muted); font-weight: 700; width: 1rem; text-align: center; font-size: .95rem; display: inline-flex; justify-content: center; }
  .cv .chDel { margin-left: auto; opacity: 0; } .cv:hover .chDel { opacity: 1; }
  .chNone { font-size: .75rem; color: var(--muted); padding: .1rem .45rem; }
  #memberList { flex: none; width: 220px; border-left: 1px solid var(--line); overflow-y: auto; padding: .6rem .5rem; background: color-mix(in srgb, var(--panel) 80%, var(--bg)); font-size: .85rem; }
  #memberList .mHead { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: .6rem .3rem .25rem; }
  #memberList .mRow { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem; border-radius: 6px; cursor: pointer; } #memberList .mRow:hover { background: var(--line); }
  #memberList .mName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .botTag { background: var(--accent); color: var(--on-accent); font-size: .6rem; font-weight: 800; border-radius: 4px; padding: 0 .3rem; margin-left: .35rem; vertical-align: middle; letter-spacing: .04em; }
  /* (web/guilds.js shows the member column in app mode and on screens 1500 px and wider while the Chat screen is open) */
  /* ── app mode (index.html?app=1, the installed VibeRoller Chat): chat only, Discord-shaped, fancier ── */
  body.appMode #room header { display: none; }
  body.appMode #room { --panel: color-mix(in srgb, var(--panel) 92%, var(--accent) 3%); --line: color-mix(in srgb, var(--line) 90%, var(--bg)); } /* follows the theme, like the site */
  body.appMode #roomSide { width: 296px; max-width: 42%; }
  body.appMode #sideLists { padding: .6rem .5rem; }
  body.appMode .roomTop { padding: .6rem .9rem; font-size: .95rem; box-shadow: 0 2px 10px rgba(0,0,0,.25); position: relative; z-index: 1; }
  body.appMode #roomLog { padding: 1rem 1.1rem; gap: .35rem; }
  body.appMode .rmsg { max-width: 100%; border-left: 0; background: transparent; padding: .35rem .6rem; border-radius: 8px; }
  body.appMode .rmsg:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
  body.appMode .rmsg.me { align-self: stretch; color: var(--text); }
  body.appMode .rmsg small b { font-size: .95rem; }
  body.appMode #roomComposer { padding: .5rem 1.1rem 1rem; border-top: 0; }
  body.appMode #roomComposer textarea { background: color-mix(in srgb, var(--panel) 80%, var(--text) 5%); border-color: transparent; border-radius: 10px; height: 3rem; }
  body.appMode #memberList { display: block; }
  @media (max-width: 900px) { body.appMode #memberList { display: none; } }
  #callSideHost:empty { display: none; }
  #callCore { display: flex; flex-direction: column; gap: .4rem; font-size: .8rem; min-height: 0; flex: 1; }
  #callFloatBody { flex: 1; min-height: 0; display: flex; padding: .4rem; overflow: auto; }
  .callHead { display: flex; gap: .4rem; align-items: baseline; }
  .callHead span { color: var(--muted); font-size: .72rem; }
  #callTiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; }
  #callSideHost #callTiles { grid-template-columns: 1fr; }
  .tile { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; border: 2px solid transparent; }
  .tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tile.nocam video { visibility: hidden; position: absolute; }
  .tile .ava { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; color: #fff; }
  .tile.nocam .ava { display: flex; }
  .tile .lbl { position: absolute; left: .3rem; bottom: .25rem; background: rgba(0,0,0,.6); color: #fff; border-radius: 4px; padding: 0 .35rem; font-size: .72rem; }
  .tile.self video { transform: scaleX(-1); }
  .tile { transition: box-shadow .15s ease; }
  .tile.speaking { box-shadow: 0 0 0 3px #3ddc84, 0 0 16px 2px rgba(61, 220, 132, .75); }
  .pCtl { position: absolute; right: .3rem; bottom: .25rem; display: flex; align-items: center; gap: .3rem; background: rgba(0,0,0,.6); border-radius: 6px; padding: .1rem .3rem; opacity: 0; transition: opacity .15s; }
  .tile:hover .pCtl, .tile:focus-within .pCtl, .pCtl:has(.off) { opacity: 1; }
  @media (hover: none) { .pCtl { opacity: 1; } }
  .pCtl button { background: transparent; color: #fff; padding: 0 .2rem; font-size: .8rem; border: 0; }
  .pCtl button.off { color: #ff8080; }
  .pCtl input { width: 4.5rem; padding: 0; accent-color: #3ddc84; }
  .callCtl { display: flex; flex-wrap: wrap; gap: .3rem; }
  .callCtl button { padding: .25rem .55rem; font-size: .78rem; }
  .callCtl button.off { color: var(--bad); border-color: var(--bad); }
  #callLeave { background: var(--bad); color: #fff; }
  #callMsg { color: var(--muted); font-size: .72rem; }
  #callBanner { display: flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--good) 14%, transparent); font-size: .8rem; }
  #callBanner span { flex: 1; }
  #callBanner button { padding: .15rem .6rem; font-size: .78rem; }
  #callFloat { min-width: 240px; min-height: 180px; width: 340px; height: 300px; transition: left .18s, top .18s; }
  /* theater: call on the right taking most of the room, chat narrow on the left, conversation list tucked away */
  #callStage { flex: 1 1 62%; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: .6rem; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 85%, #000); }
  #roomCore.theater .roomMain { flex: 0 1 38%; min-width: min(300px, 100%); }
  #roomCore.theater #roomSide { display: none; }
  #callStage #callCore { flex: 1; min-height: 0; }
  #callStage #callTiles { flex: 1; min-height: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-content: center; gap: .6rem; }
  #callStage .tile { border-width: 3px; }
  #callStage .tile .lbl { font-size: .9rem; } #callStage .tile .ava { font-size: 2.6rem; }
  #callStage .callCtl button { padding: .4rem .8rem; font-size: .85rem; }
  #callTheater.on, #callScreen.on { border-color: var(--good); color: var(--good); }
  /* a shared screen: its own tile, full width, whole picture visible (not cropped) */
  .tile.screenTile { grid-column: 1 / -1; aspect-ratio: auto; max-height: 62vh; min-height: 120px; background: #000; cursor: pointer; }
  .tile.screenTile video { object-fit: contain; max-height: 62vh; transform: none; }
  #callSideHost .tile.screenTile { max-height: 160px; }
  @media (max-width: 700px) {
    #roomCore.theater { flex-direction: column; }
    #roomCore.theater .roomMain { flex: 1 1 40%; min-width: 0; }
    #callStage { flex: 1 1 60%; border-left: 0; border-top: 1px solid var(--line); }
  }
  #callFloat.dragging { transition: none; }
  .rmsg audio { display: block; margin-top: .3rem; width: min(320px, 100%); height: 2.2rem; }
  #assistLog { flex: 1; overflow: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
  #assistForm { display: flex; gap: .5rem; padding: .6rem 1rem; border-top: 1px solid var(--line); }
  #assistForm textarea { flex: 1; resize: none; min-height: 2.6rem; max-height: 10rem; }
  #assistAttach, #assistCamBox { display: flex; gap: .6rem; align-items: center; padding: .4rem 1rem; border-top: 1px solid var(--line); }
  #assistAttach[hidden], #assistCamBox[hidden] { display: none; }
  #assistThumb { height: 56px; border-radius: 6px; }
  #assistVideo { height: 180px; border-radius: 8px; background: #000; }
  #assistMic.rec { background: var(--bad); color: #fff; }
  .ytPlayer { display: block; width: min(100%, 480px); aspect-ratio: 16 / 9; border: 0; border-radius: 8px; margin: .3rem 0; }
  .mstat { display: flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .72rem; color: var(--muted); font-style: normal; }
  .mstat .ic { width: .95em; height: .95em; }
  .mstat.working .ic { animation: mstatSpin 1s linear infinite; }
  .mstat.done { color: var(--good); } .mstat.failed { color: var(--bad); }
  @keyframes mstatSpin { to { transform: rotate(360deg); } }
  .hostImg { display: block; max-width: min(100%, 420px); max-height: 60vh; border-radius: 8px; margin: .3rem 0; cursor: pointer; }
  .confirmCard { align-self: flex-start; background: var(--panel); border: 1px solid var(--accent); border-radius: 10px; padding: .6rem .8rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
  #assistNotice { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: flex; flex-direction: column; gap: .5rem; }
  #assistNotice div { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: .6rem .8rem; max-width: 360px; cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
  #adminBody { overflow: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
  #adminBody table { border-collapse: collapse; width: 100%; font-size: .85rem; }
  #adminBody th, #adminBody td { border-bottom: 1px solid var(--line); padding: .45rem .4rem; text-align: left; vertical-align: middle; }
  #adminBody td button { padding: .25rem .5rem; font-size: .75rem; margin: .1rem; }
  #adminBody .row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
  #adminBody .row input { width: auto; flex: 1; min-width: 140px; }
  #adminOut { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; white-space: pre-wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .6rem; min-height: 2.5rem; }

  @media (max-width: 900px) {
    #roomSide { width: 150px; }
    #app { flex-direction: column; }
    #rail, #rail.open { width: auto; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
    #rail button span.lbl, #rail .grow { display: none; }
    #panes { flex-direction: column; overflow: auto; }
    #panes > section { flex: none !important; min-height: 45vh; border-bottom: 1px solid var(--line); }
    #chat { min-height: 70vh !important; order: -1; }
    .split { display: none; }
  }
  /* ── Phones and small tablets (≤ 700 px): one column, drawers instead of side bars, sheets instead of
     side panels, touch-sized controls, no zoom-on-focus. Laptops (≤ 1366 px) only get tighter headers. ── */
  @media (max-width: 1366px) {
    header { padding: .45rem .7rem; gap: .5rem; }
    #roomSide { width: 190px; }
  }
  @media (pointer: coarse) {
    button { min-height: 2.5rem; }
    .bar button, .roomTop button, .callCtl button, .tpActs button, .bdActs button, .conv button, #msgMenu button, .md .mdbtn { min-height: 2.2rem; }
    .cv { padding: .55rem .5rem; }
    .bdCard { padding: .6rem .65rem; }
  }
  @media (max-width: 700px) {
    html { font-size: 15px; }
    input, textarea, select { font-size: 16px; } /* below 16 px iOS zooms the page on focus */
    header { padding: .4rem .55rem; gap: .4rem; }
    header b { font-size: .95rem; }
    header .folder { flex-basis: 100%; order: 9; font-size: .78rem; }
    #shell header #pickFolder, #shell header #newChat, #shell header #saveChat, #shell header #openArchive, #shell header #logout { padding: .35rem .55rem; font-size: .8rem; }
    #menu .choices button { width: min(320px, 86vw); }
    .menuWho { max-width: 94vw; }
    /* chat: the conversation list is a drawer over the messages */
    #roomCore { position: relative; }
    #roomSide { position: absolute; left: 0; top: 0; bottom: 0; z-index: 8; width: min(78vw, 300px); max-width: none; background: var(--panel); box-shadow: 6px 0 24px rgba(0,0,0,.35); border-right: 1px solid var(--line); }
    #roomCore.noside #roomSide { display: none; }
    .rmsg { max-width: 100%; }
    #roomComposer { padding: .5rem .55rem calc(.6rem + env(safe-area-inset-bottom)); }
    #roomComposer textarea { height: 2.9rem; }
    #composer { padding: .5rem .55rem calc(.6rem + env(safe-area-inset-bottom)); }
    .sendCol button { min-width: 5rem; }
    #usageBar { gap: .4rem .6rem; padding: .3rem .5rem; }
    /* work: stacked panes, each tall enough to use */
    #panes > section { min-height: 60vh; }
    #chat { min-height: 75vh !important; }
    .floatWin { left: 8px !important; top: 8px !important; width: calc(100vw - 16px) !important; height: calc(100dvh - 16px) !important; resize: none; }
    /* board: one column at a time, swipe sideways; the task opens as a full-screen sheet */
    #bdCols { grid-auto-columns: 86vw; scroll-snap-type: x mandatory; padding: .5rem; gap: .5rem; }
    .bdCol { scroll-snap-align: start; }
    #bdDetail { position: fixed; inset: 0; width: auto; z-index: 12; border-left: 0; padding: .8rem .9rem calc(.9rem + env(safe-area-inset-bottom)); animation: sheetUp .22s ease; }
    @keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
    #bdFoot { flex-wrap: wrap; } #bdActivity { display: none; }
    #bdFilter { width: 100%; order: 8; }
    /* calendar: an agenda list instead of a 7-column grid (board.js switches the rendering) */
    #calGrid.agenda { display: flex; flex-direction: column; gap: .4rem; background: transparent; border: 0; margin: .5rem; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
    .agDay { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem; display: flex; flex-direction: column; gap: .3rem; }
    .agDay.today { border-color: var(--accent); }
    .agDay .calNum { font-size: .8rem; }
    .agDay .calTask { white-space: normal; }
    /* settings and past sessions fill the screen */
    .modal .box, #archive .box { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
    /* admin: the table scrolls sideways instead of squeezing */
    #adminBody { padding: .6rem; } #adminBody table { display: block; overflow-x: auto; white-space: nowrap; }
    #callTiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    #toasts { right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom)); left: .5rem; align-items: stretch; } .toast { max-width: none; }
  }
  @media (max-width: 700px) and (orientation: landscape) { #panes > section { min-height: 85vh; } }
  /* shared Work sessions */
  #shareBtn { padding: .2rem .6rem; font-size: .75rem; white-space: nowrap; }
  #shareBtn.on { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
  #shareBanner { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .35rem .75rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 14%, transparent); font-size: .8rem; }
  #shareBanner span { flex: 1; min-width: 8rem; }
  #shareBanner button { padding: .15rem .6rem; font-size: .78rem; }
  .watchWin { width: 380px; height: 460px; }
  .watchWin .wLog { flex: 1; min-height: 0; overflow: auto; padding: .6rem; display: flex; flex-direction: column; gap: .45rem; font-size: .85rem; }
  .watchWin .wLive { border-top: 1px solid var(--line); padding: .45rem .6rem; font-size: .8rem; max-height: 35%; overflow: auto; }
  .watchWin .wLive .typing { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font-style: italic; min-height: 1.2em; }
  .watchWin .wLive .typing:empty::before { content: 'not typing'; color: var(--muted); }
  .watchWin .wLive ol { margin: .3rem 0 0; padding-left: 1.2rem; color: var(--muted); }
  .watchWin .wNote { color: var(--muted); font-size: .7rem; padding: .25rem .6rem; border-top: 1px solid var(--line); }
  .watchWin .busyDot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--muted); display: inline-block; }
  .watchWin .busyDot.on { background: var(--good); animation: recPulse 1s infinite; }

  /* ── Stay inside the viewport ──
     Flex / grid children default to min-width/min-height "auto" (= their content), which lets a long
     line, a wide <pre> or a crowded header push the layout past the window. Everything here may
     shrink to fit and scrolls inside itself instead. */
  #shell, #room, #admin, #app, #panes, #panes > section, .paneBody, #roomHost, #roomPaneBody, #roomFloatBody,
  #roomCore, .roomMain, #roomLog, #log, #chat, #edit, #files, #tree, #callFloatBody, #callCore { min-width: 0; min-height: 0; }
  #shell, #room, #admin { overflow: hidden; }
  #panes > section { min-width: min(120px, 22vw); }
  #login, #menu { max-height: 100%; overflow: auto; padding: 1rem 0; }
  header { max-height: 40vh; overflow-y: auto; }
  header > * { min-width: 0; }
  header select { max-width: 14rem; }
  .msg { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
  .msg pre { max-width: 100%; overflow-x: auto; }
  .tool, .sys, #roomStatus, #callMsg, .toast { overflow-wrap: anywhere; }
  #editor { min-width: 0; max-width: 100%; }
  #roomSide { max-width: 42%; }
  #usageBar { flex-wrap: wrap; row-gap: .3rem; min-width: 0; overflow: hidden; }
  .uCtx { min-width: min(9rem, 100%); }
  .floatWin { max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .modal .box, #archive .box { max-width: calc(100vw - 16px); }
  #msgMenu { max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; }
  img, video, audio, canvas { max-width: 100%; }