/* PixelStaff — Grok Bot look-alike */
* { box-sizing: border-box; }
/* Silkscreen (SIL OFL 1.1, fonts/OFL.txt): the PixelStaff wordmark + the optional Pixel face */
@font-face { font-family:"Silkscreen"; src:url("/static/fonts/silkscreen-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
:root, :root[data-theme="dark"] {
  --bg:#0d0d0f; --sidebar:#121214; --panel:#161619; --bubble:#1c1c20; --bubble2:#232329;
  --line:#26262c; --text:#ececf1; --muted:#8c8c96; --faint:#5e5e68;
  --green:#5cd08a; --green2:#3bb673; --blue:#3b82f6; --accent:#5cd08a; --accent2:#3b82f6;
  --warn:#ffb648; --onwarn:#1a1206; --err:#ff6b6b; --ok:#5cd08a;
  --av1:#5cd08a; --av2:#2f9e63;
  /* surfaces (promoted from hardcoded hexes so themes can flip) */
  --input:#15151a; --hover:#1a1a1e; --sel:#202026; --div:#1e1e23; --elev:#1b1b20;
  --card2:#16161a; --deep:#101014; --iconbtn:#2a2a31; --send:#2e2e36;
  --scroll:#2b2b33; --scroll2:#3a3a44; --swoff:#33333a;
  --me:#2b2b31; --redbg:#3a2020; --warnbd:#4a3a1c; --ongreen:#07130c; --okbg:#13261c;
  --shadow:rgba(0,0,0,.4); --overlay:rgba(0,0,0,.6); --eye:#10261a;
}
:root[data-theme="light"] {
  --bg:#ffffff; --sidebar:#f4f4f6; --panel:#ffffff; --bubble:#f0f0f3; --bubble2:#e3e3e9;
  --line:#e3e3e8; --text:#1a1a1f; --muted:#6b6b76; --faint:#a0a0aa;
  --green:#1a9d5c; --green2:#158a4f; --blue:#2563eb; --accent:#1a9d5c; --accent2:#2563eb;
  --warn:#8f5a00; --onwarn:#ffffff; --err:#d64545; --ok:#1a9d5c;   /* ≥4.5:1 on every light surface */
  --av1:#5cd08a; --av2:#2f9e63;
  --input:#f1f1f4; --hover:#ececef; --sel:#e4e4ea; --div:#ececef; --elev:#ffffff;
  --card2:#fafafb; --deep:#f4f4f6; --iconbtn:#e6e6eb; --send:#e0e0e6;
  --scroll:#cfcfd6; --scroll2:#b4b4bd; --swoff:#d0d0d8;
  --me:#e7e7ec; --redbg:#fbe3e3; --warnbd:#e8d3a8; --ongreen:#ffffff; --okbg:#d9f0e3;
  --shadow:rgba(17,24,39,.13); --overlay:rgba(17,24,39,.32); --eye:#ffffff;
}
html,body { margin:0; height:100%; }
body { height:100vh; height:100dvh; height:var(--app-h, 100dvh); display:flex; flex-direction:column; background:var(--bg);
  color:var(--text); font:calc(14px * var(--ui-fs, 1))/1.55 var(--ui-font, -apple-system,"SF Pro Text",Segoe UI,Roboto,sans-serif); overflow:hidden; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.hidden { display:none !important; }
html { scroll-behavior:smooth; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--scroll); border-radius:4px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--scroll2); background-clip:content-box; }
* { scrollbar-width:thin; scrollbar-color:var(--scroll) transparent; }

/* smooth interactions everywhere */
.row-agent, .fbtn, .dt-tabs button, .gtabs button, .sw, .chip, .btn, .picker-row,
.filerow, .connect, .icon, .composer .ic, .opt, .agent, button, select, input, textarea,
.av, .tab, .modal-box, #sidebar, main { transition: background .15s ease, color .15s ease,
  border-color .15s ease, transform .15s ease, opacity .15s ease, box-shadow .15s ease; }
main { transition: grid-template-columns .22s cubic-bezier(.4,0,.2,1); }

/* interactive avatars (blink on inner eyes; outer .eyes tracks the mouse via JS) */
.av .eyes-inner { transform-box:fill-box; transform-origin:center; }
.av .eye { fill:var(--eye); }
/* only the selected agent's avatar blinks; cadence randomized per-avatar via inline style */
.row-agent.sel .av .eyes-inner, .pin-cell.sel .av .eyes-inner,
.chat-head .av .eyes-inner, .dt-head .av .eyes-inner {
  animation-name:blink; animation-iteration-count:infinite; animation-timing-function:ease; }
@keyframes blink { 0%,92%,100%{ transform:scaleY(1); } 96%{ transform:scaleY(.08); } }
.av .eyes { transition: transform .08s ease-out; }
.row-agent:hover .av, .chat-head:hover .av { transform:scale(1.1) rotate(-3deg); }
.dt-head .av:hover { transform:scale(1.04) rotate(3deg); }

main { flex:1; display:grid; grid-template-columns:var(--sb-w,320px) 1fr var(--dt-w,360px); min-height:0; }
main.sb-collapsed { grid-template-columns:68px 1fr var(--dt-w,360px); }
main.dt-wide { grid-template-columns:var(--sb-w,320px) 1fr var(--dt-w2,620px); }
/* Rail-collapse is a DESKTOP concept only — on mobile the right panel is a
   slide-over drawer (main.dt-open, below), so dt-rail must not hide its content
   there. Scope all dt-rail content rules to desktop width. */
@media (min-width:821px) and (min-height:501px), (min-width:821px) and (pointer:fine){
  main.dt-rail { grid-template-columns:var(--sb-w,320px) 1fr 56px; }
  main.dt-rail #detail { overflow:hidden; }
  /* collapsed right panel → narrow icon rail (toggle + avatar stay visible to reopen) */
  main.dt-rail #detail .dt-head .nmrow, main.dt-rail #detail .dt-head .sub,
  main.dt-rail #detail .dt-tabs, main.dt-rail #detail .dt-body, main.dt-rail #detail .resizer { display:none; }
  main.dt-rail #detail .dt-top { justify-content:center; }
  main.dt-rail #detail .dt-head { padding:6px 0; }
  main.dt-rail #detail .dt-head .av { width:36px; height:36px; cursor:pointer; }
  /* Dress up: icon-only like the other rail items (its label wrapped and overflowed); tooltip via data-tip */
  main.dt-rail #detail .dt-head .wd-open { width:40px; height:40px; padding:0; margin-top:6px; justify-content:center; gap:0; background:transparent; border-color:transparent; color:var(--muted); }
  main.dt-rail #detail .dt-head .wd-open:hover { background:var(--hover); color:var(--text); }
  main.dt-rail #detail .dt-head .wd-open span { display:none; }
  main.dt-rail #detail .dt-head .wd-open svg { width:20px; height:20px; }
  main.dt-rail #detail .dt-rail-nav { display:flex; flex-direction:column; align-items:center; gap:7px; margin-top:12px; }
}
.dt-rail-nav { display:none; }
.dt-rail-nav button { width:40px; height:40px; border-radius:4px; color:var(--muted); display:flex; align-items:center; justify-content:center; }
.dt-rail-nav button:hover { background:var(--hover); color:var(--text); }
#sidebar, #detail { position:relative; }
.resizer { position:absolute; top:0; height:100%; width:7px; cursor:col-resize; z-index:30; }
.resizer:hover, .resizer.active { background:rgba(90,156,255,.25); }
#rz-left { right:-3px; } #rz-right { left:-3px; }

/* pinned pin-grid (drag agents here, 3×2, up to 6) */
.pin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:6px 2px 12px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.pin-grid.drag-over { outline:1px dashed var(--accent2); outline-offset:3px; border-radius:4px; }
.pin-cell { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 3px; border-radius:4px; cursor:pointer; }
.pin-cell:hover { background:var(--hover); }
.pin-cell .av { width:44px; height:44px; }
.pin-grid[data-count="1"] { grid-template-columns:1fr !important; justify-items:center; padding:14px 0 16px; }
.pin-grid[data-count="1"] .av { width:76px; height:76px; }
.pin-grid[data-count="1"] .pin-nm { font-size:calc(13px * var(--ui-fs, 1)); color:var(--text); font-weight:600; }
.pin-grid[data-count="2"] .av, .pin-grid[data-count="3"] .av { width:54px; height:54px; }
.pin-hint { grid-column:1/-1; text-align:center; font-size:calc(11px * var(--ui-fs, 1)); color:var(--faint); border:1px dashed var(--line); border-radius:4px; padding:14px; }
.pin-cell .pin-nm { font-size:calc(10px * var(--ui-fs, 1)); color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pin-cell.empty { border:1px dashed var(--line); color:var(--faint); align-items:center; justify-content:center; font-size:calc(18px * var(--ui-fs, 1)); min-height:66px; }
.pin-cell.empty:hover { border-color:var(--accent2); color:var(--accent2); }
.pin-cell .pin-x { position:absolute; top:1px; right:3px; opacity:0; background:none; border:none; color:var(--err); font-size:calc(11px * var(--ui-fs, 1)); cursor:pointer; }
.pin-cell:hover .pin-x { opacity:1; }
.pin-cell .star { position:absolute; top:4px; right:50%; margin-right:-22px; width:15px; height:15px; font-size:calc(8px * var(--ui-fs, 1)); }
.row-agent[draggable="true"] { cursor:grab; } .row-agent.dragging { opacity:.4; }

/* rendered markdown spacing — tight, consistent block margins (override browser defaults) */
.msg-body > :first-child { margin-top:0; }
.msg-body > :last-child { margin-bottom:0; }
.msg-body div { margin:2px 0; }
.msg-body .mdgap { height:8px; margin:0; }
/* big section header — a clear line-break of space above each header, tight below.
   The FIRST element in a bubble (header or not) stays flush (margin-top:0 below). */
.msg-body h3, .msg-body h4, .msg-body h5, .msg-body h6 { margin:24px 0 5px; font-weight:700; line-height:1.25; }
.msg-body h3 { font-size:1.32em; } .msg-body h4 { font-size:1.2em; } .msg-body h5 { font-size:1.1em; } .msg-body h6 { font-size:1.02em; }
.msg-body > :first-child { margin-top:0; }
.msg-body ul, .msg-body ol { margin:4px 0; padding-left:20px; }
.msg-body li { margin:2px 0; }
.msg-body li > ul, .msg-body li > ol { margin:2px 0 4px; }
.msg-body hr { margin:12px 0; border:0; border-top:1px solid var(--line); }
.msg-body .md-tbl { border-collapse:collapse; margin:8px 0; font-size:calc(12.5px * var(--ui-fs, 1)); width:auto; max-width:100%; display:block; overflow-x:auto; }
.msg-body .md-tbl th, .msg-body .md-tbl td { border:1px solid var(--line); padding:5px 10px; text-align:left; vertical-align:top;
  overflow-wrap:normal; word-break:normal; min-width:4.5em; max-width:22em; }
.msg-body .md-tbl th { white-space:nowrap; }
.msg-body .md-tbl th { background:var(--bubble2); font-weight:700; }

/* message hover tools: react · reply · more */
.msg { position:relative; min-width:0; max-width:100%; }
/* Long unbroken text (URLs, ids, hashes) must wrap inside the bubble, never run past it. */
.msg-body { overflow-wrap:anywhere; word-break:break-word; min-width:0; }
.msg-body a { overflow-wrap:anywhere; word-break:break-all; }
.msg-body pre { max-width:100%; overflow-x:auto; white-space:pre; }
.msg-body pre code { white-space:pre; }
.msg-body code { overflow-wrap:anywhere; word-break:break-word; }
.msg-body img { max-width:100%; height:auto; }
.msg-actions { display:flex; gap:2px; margin-top:6px; margin-left:-6px; }
.msg-actions .ma { width:24px; height:22px; border-radius:4px; color:var(--faint); display:flex; align-items:center; justify-content:center; }
.msg-actions .ma svg { width:15px; height:15px; }   /* ~25% smaller than the 20px icon set (owner, Oct 28) */
.msg-actions .ma:hover, .msg-actions .ma:focus-visible { background:var(--hover); color:var(--text); }
.msg-actions .ma.ma-ok { color:var(--green); }
.toast { position:fixed; bottom:96px; left:50%; transform:translateX(-50%); z-index:600; padding:9px 16px; border-radius:4px;
  background:var(--bubble); border:1px solid var(--line); color:var(--text); font-size:calc(13px * var(--ui-fs, 1)); box-shadow:0 6px 24px rgba(0,0,0,.35); }
.msg-pop { position:fixed; z-index:450; background:var(--elev); border:1px solid var(--line); border-radius:4px; padding:4px; box-shadow:0 8px 22px var(--shadow); display:flex; gap:2px; flex-direction:column; }
.msg-pop .mm { display:block; width:100%; text-align:left; padding:8px 14px; border-radius:4px; font-size:calc(13px * var(--ui-fs, 1)); white-space:nowrap; } .msg-pop .mm:hover { background:var(--hover); }
.msg.flash { outline:2px solid var(--accent2); outline-offset:2px; border-radius:4px; }
.msg-foot { display:flex; align-items:center; gap:6px; margin-top:8px; padding-top:7px; border-top:1px solid var(--div); font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--muted); }
.msg-foot .av { width:17px; height:17px; }
/* model-used footer under each reply — lighter than the a2a footer */
.msg-foot.msg-model { margin-top:6px; padding-top:4px; border-top-color:transparent; opacity:.9; }
.reply-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 12px; margin-bottom:6px; background:var(--bubble); border:1px solid var(--line); border-left:3px solid var(--accent2); border-radius:4px; }
.reply-bar .rb-q { font-size:calc(12.5px * var(--ui-fs, 1)); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-bar .rb-x { color:var(--faint); } .reply-bar .rb-x:hover { color:var(--err); }

/* chat file attachment cards */
.attach-bar { display:flex; flex-wrap:wrap; gap:8px; padding:8px 4px 2px; }
.filecard { display:inline-flex; align-items:center; gap:10px; background:var(--bubble); border:1px solid var(--line); border-radius:4px; padding:8px 12px; max-width:320px; }
.filecard .fc-ic { color:var(--muted); display:flex; }
.filecard .fc-thumb { width:34px; height:34px; border-radius:3px; object-fit:cover; }
.filecard .fc-meta { min-width:0; }
.filecard .fc-name { font-size:calc(13px * var(--ui-fs, 1)); font-weight:560; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.filecard .fc-sz { font-size:calc(11px * var(--ui-fs, 1)); color:var(--muted); }
.filecard .fc-dl { color:var(--muted); display:flex; } .filecard .fc-dl:hover { color:var(--text); }
.filecard .fc-x { background:none; border:none; color:var(--faint); cursor:pointer; font-size:calc(12px * var(--ui-fs, 1)); } .filecard .fc-x:hover { color:var(--err); }
.msg-files { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.msg.me .filecard { background:var(--me); }
.msg-img { display:block; line-height:0; border-radius:4px; overflow:hidden; border:1px solid var(--line); cursor:zoom-in; }
.msg-img img { display:block; max-width:min(320px, 100%); max-height:260px; object-fit:contain; }
.img-view { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.85); cursor:zoom-out; }
.img-view img { max-width:100%; max-height:100%; border-radius:4px; }
.msg.bot.ack { opacity:.72; font-size:calc(13px * var(--chat-fs, 1) * var(--ui-fs, 1)); padding:9px 14px; } .msg.bot.ack .meta { opacity:.8; }
/* live-streaming bubble: blinking caret after the last token */
.msg.bot.streaming .msg-body::after { content:"▌"; display:inline-block; margin-left:1px; animation:caret 1s steps(1) infinite; opacity:.7; }
@keyframes caret { 50% { opacity:0; } }

/* detail head subname + pencil */
.dt-head .sub { font-size:calc(12.5px * var(--ui-fs, 1)); color:var(--muted); }
.dt-head .pencil { background:none; border:none; color:var(--muted); cursor:pointer; font-size:calc(13px * var(--ui-fs, 1)); }
.dt-head .pencil:hover { color:var(--text); }
.dt-head .nmrow { display:flex; align-items:center; gap:7px; }
.dt-head input.ed { background:var(--input); border:1px solid var(--line); color:var(--text); border-radius:4px; padding:6px 9px; font:inherit; text-align:center; }

/* ---------- Sidebar ---------- */
#sidebar { background:var(--sidebar); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.sb-top { display:flex; align-items:center; flex-wrap:wrap; gap:8px clamp(6px,1.2vw,14px); padding:14px 16px 8px; color:var(--muted); min-width:0; }
.sb-top > * { flex:none; }   /* never squash an icon; wrap to a 2nd row on a narrow sidebar instead of clipping */
.sb-top .icon { font-size:calc(17px * var(--ui-fs, 1)); opacity:.8; } .sb-top .icon:hover { opacity:1; color:var(--text); }
.sb-top .sp { flex:1; }
.sb-list { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; padding:6px 10px 10px; }
#rows { flex:1; min-height:0; overflow-y:auto; }
.sb-searchrow { display:flex; align-items:center; gap:8px; margin:4px 0 8px; }
#sb-searchbox { flex:1; min-width:0; box-sizing:border-box; padding:9px 12px; border-radius:4px;
  background:var(--input); border:1px solid var(--line); color:var(--text); font-size:calc(13px * var(--ui-fs, 1)); outline:none; }
#sb-searchbox:focus { border-color:var(--accent2); }
.sb-filters { display:flex; align-items:center; gap:0; flex:none; background:var(--hover); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.fbtn { font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); background:none; border:none; padding:6px 11px; cursor:pointer; }
.sb-filters .fbtn + .fbtn { border-left:1px solid var(--line); }
.fbtn.active { background:var(--bubble2); color:var(--text); }

/* ---------- sidebar sections ---------- */
.sec { margin-bottom:6px; }
.sec-h { display:flex; align-items:center; gap:6px; padding:8px 8px 4px; border-radius:4px; }
.sec-h[data-secdrag] { cursor:pointer; }
.sec-h[data-secdrag]:hover { background:var(--hover); }
.sec-h.sec-dragging { opacity:.4; }
.sec-h.sec-drop { outline:1.5px dashed var(--accent2); outline-offset:-1px; }
.sec-caret { color:var(--faint); flex:none; transition:transform .15s ease; }
.sec.collapsed .sec-caret { transform:rotate(-90deg); }
.sec.collapsed .sec-body { display:none; }
.sec-nm { font-size:calc(11px * var(--ui-fs, 1)); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; cursor:default; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sec-h[data-secdrag] .sec-nm { cursor:text; }
.sec-ct { font-size:calc(10px * var(--ui-fs, 1)); color:var(--faint); flex:none; }
.sec-x { opacity:0; background:none; border:none; color:var(--faint); cursor:pointer; font-size:calc(11px * var(--ui-fs, 1)); flex:none; }
.sec-h:hover .sec-x { opacity:1; } .sec-x:hover { color:var(--err); }
.sec-body { border-radius:4px; min-height:2px; }
.sec-body.drop-to { outline:1.5px dashed var(--accent2); outline-offset:-1px; background:var(--hover); }
.sec-empty { font-size:calc(11px * var(--ui-fs, 1)); color:var(--faint); padding:8px 12px; }
.rows-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; padding:48px 24px; color:var(--muted); }
.rows-empty .re-mark { width:40px; height:40px; border-radius:2px; display:flex; align-items:center; justify-content:center; background:var(--okbg); color:var(--green); font-size:calc(20px * var(--ui-fs, 1)); }
.rows-empty .re-msg { font-size:calc(13px * var(--ui-fs, 1)); color:var(--text); max-width:220px; }
.rows-empty .re-sub { font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--faint); max-width:220px; }
.inline-edit { width:100%; font:inherit; font-size:calc(13px * var(--ui-fs, 1)); padding:4px 7px; border-radius:3px; background:var(--input); border:1px solid var(--accent); color:var(--text); outline:none; }
/* Agents org tree */
.team-chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px; }
.team-chip { font-size:calc(11.5px * var(--ui-fs, 1)); }
.agent-row .org-tw { flex:none; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); border-radius:3px; margin-right:2px; }
.agent-row .org-tw:hover { background:var(--hover); color:var(--text); }
.agent-row .org-tw.col svg { transform:rotate(-90deg); }
.agent-row .org-tw.ghost { visibility:hidden; }
.agent-row .org-team { font-size:calc(10px * var(--ui-fs, 1)); color:var(--muted); background:var(--hover); border-radius:3px; padding:1px 6px; margin-left:5px; white-space:nowrap; }

/* ---------- right-click context menu ---------- */
.ctx-menu { position:fixed; z-index:300; min-width:210px; background:var(--elev); border:1px solid var(--line);
  border-radius:4px; padding:5px; box-shadow:0 12px 34px var(--shadow); }
.ctx-menu button { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left;
  padding:8px 11px; border-radius:4px; font-size:calc(13px * var(--ui-fs, 1)); color:var(--text); background:none; border:none; cursor:pointer; white-space:nowrap; }
.ctx-menu button:hover { background:var(--hover); }
.ctx-menu button.danger { color:var(--err); }
.ctx-div { height:1px; background:var(--line); margin:4px 6px; }
.ctx-sub { position:relative; }
.ctx-sub .ctx-submenu { display:none; position:absolute; left:100%; top:0; min-width:180px; max-height:260px; overflow-y:auto;
  background:var(--elev); border:1px solid var(--line); border-radius:4px; padding:5px; box-shadow:0 12px 34px var(--shadow); }
.ctx-sub:hover .ctx-submenu, .ctx-sub.open .ctx-submenu { display:block; }
.ctx-menu { max-width:calc(100vw - 16px); }
.ctx-menu.sub-left .ctx-submenu { left:auto; right:100%; }
/* phones: no hover — the parent toggles .open and the submenu opens inline (it sat off-screen) */
@media (max-width:820px), (pointer:coarse){
  .ctx-sub .ctx-submenu, .ctx-menu.sub-left .ctx-submenu { position:static; box-shadow:none; border:0; padding:0 0 0 10px; min-width:0; }
  .ctx-menu button { white-space:normal; overflow-wrap:anywhere; }
  .ctx-sub:hover .ctx-submenu { display:none; }
  .ctx-sub.open .ctx-submenu { display:block; } }
.ctx-parent span { color:var(--muted); }


.row-agent { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:4px; cursor:pointer; position:relative; }
.row-agent:hover { background:var(--hover); }
.row-agent.sel { background:var(--sel); }
.row-agent .av { width:40px; height:40px; flex:none; }
.row-agent .mid { min-width:0; flex:1; }
.row-agent .nm { font-size:calc(13.5px * var(--ui-fs, 1)); font-weight:560; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-agent .pv { font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-agent.off .nm { color:var(--faint); }
.row-agent .dot { width:8px; height:8px; border-radius:2px; background:var(--blue); flex:none; }

.sb-bottom { padding:10px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.sb-bottom .me { width:30px; height:30px; border-radius:2px; background:linear-gradient(135deg,#777,#444); flex:none; }
.connect { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px; border-radius:4px;
  background:var(--bubble); color:var(--text); font-size:calc(13px * var(--ui-fs, 1)); font-weight:560; border:1px solid var(--line); }
.connect:hover { background:var(--bubble2); }
.connect svg { color:var(--muted); }
.connect:hover svg { color:var(--text); }

/* ---------- Avatars (green blob — inline SVG) ---------- */
.av { border-radius:50%; flex:none; display:block; }
svg.av { overflow:hidden; border-radius:0; }   /* pixel sprite: no circle clip */

/* ---------- Chat ---------- */
#chat { display:flex; flex-direction:column; min-height:0; position:relative; }
.chat-head { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:5;
  display:flex; align-items:center; gap:9px; background:var(--elev); border:1px solid var(--line);
  padding:6px 14px 6px 8px; border-radius:4px; box-shadow:0 4px 18px var(--shadow); }
.chat-head .av { width:26px; height:26px; }
.chat-head .nm { font-size:calc(13.5px * var(--ui-fs, 1)); font-weight:600; }

#feed { flex:1; overflow-y:auto; padding:64px 0 16px; display:flex; flex-direction:column; align-items:center; }
.feed-wrap { width:100%; max-width:1100px; padding:0 40px; display:flex; flex-direction:column; gap:14px; }
/* chat reads at 125% on desktop (owner preference) — only the feed scales; sidebar/composer stay 100% */
@media (min-width:821px) and (min-height:501px), (min-width:821px) and (pointer:fine){ .feed-wrap, .pane-wrap { zoom:1.25; } }

.msg { max-width:88%; padding:13px 16px; border-radius:4px; font-size:calc(14px * var(--chat-fs, 1) * var(--ui-fs, 1)); }
.msg.bot { align-self:flex-start; background:var(--bubble); border-top-left-radius:6px; }
.msg.me  { align-self:flex-end; background:var(--me); border-top-right-radius:6px; }
.msg h3 { margin:6px 0 8px; font-size:calc(16px * var(--chat-fs, 1) * var(--ui-fs, 1)); font-weight:700; }
.msg h4 { margin:2px 0 8px; font-size:calc(14.5px * var(--chat-fs, 1) * var(--ui-fs, 1)); }
/* Section headers inside a reply get breathing room above them — except the reply's
   first header, and the subtitle stacked right under that first title. Higher
   specificity than the generic .msg h3/h4 margins above, which squeezed them to 2-6px. */
.msg .msg-body :is(h3,h4,h5,h6) { margin:18px 0 6px; line-height:1.25; }
/* Header sizes in reply bubbles — a chat reply, not a document: the title is a touch
   above body text and section headers read as small labels, so the content leads. */
.msg .msg-body h3 { font-size:1.18em; }    /* # */
.msg .msg-body h4 { font-size:1.06em; }    /* ## and bold-only section lines */
.msg .msg-body :is(h5,h6) { font-size:.78em; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.msg .msg-body :is(h4,h5,h6) { margin-top:14px; }
/* Comfortable line length for reading (~75 characters) */
.msg.bot .msg-body { max-width:75ch; }
.msg .msg-body > :is(h3,h4,h5,h6):first-child { margin-top:0; }
.msg .msg-body .meta + :is(h3,h4,h5,h6) { margin-top:0; }
.msg .msg-body > :is(h3,h4,h5,h6):first-child + :is(h3,h4,h5,h6) { margin-top:6px; }   /* title + subtitle */
.msg h5, .msg h6 { margin:6px 0 6px; font-size:calc(13px * var(--chat-fs, 1) * var(--ui-fs, 1)); font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0; }
.msg ul, .msg ol { margin:6px 0; padding-left:20px; } .msg li { margin:3px 0; }
.msg ol { list-style:decimal; }
.msg pre { white-space:pre-wrap; word-break:break-word; margin:0; font:inherit; }
.msg code { background:var(--deep); border:1px solid var(--line); border-radius:3px; padding:1px 5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:calc(12.5px * var(--ui-fs, 1)); }
.msg a { color:var(--accent2); text-decoration:underline; }
.msg i { font-style:italic; }
.msg hr { border:none; border-top:1px solid var(--line); margin:10px 0; }
.msg .meta { font-size:calc(11px * var(--ui-fs, 1)); color:var(--muted); margin-bottom:6px; }
/* Model badge — which Claude model produced the message. Opus (flagship) stands out. */
.model-badge { display:inline-block; font-size:calc(9.5px * var(--ui-fs, 1)); font-weight:600; letter-spacing:.02em;
  padding:1px 6px; border-radius:4px; vertical-align:middle; margin-left:2px;
  border:1px solid var(--line); color:var(--muted); }
.model-badge.mb-opus { color:#0b5; border-color:rgba(0,187,85,.45); background:rgba(0,187,85,.10); }
.model-badge.mb-sonnet { color:#7a8; }
.model-badge.mb-haiku { color:var(--faint); }
.daydiv { align-self:center; font-size:calc(11px * var(--ui-fs, 1)); color:var(--faint); margin:4px 0; }

.evt-line { align-self:center; font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--faint); display:flex; gap:7px; align-items:center; }
.evt-line.tool { color:var(--muted); } .evt-line .k { color:var(--green); }
.evt-line.ok { color:var(--muted); } .evt-line.bad { color:var(--err); }
.evt-line.warnline { color:var(--warn); background:color-mix(in srgb, var(--warn) 9%, transparent); border:1px solid var(--warnbd);
  padding:5px 12px; border-radius:4px; font-size:calc(12.5px * var(--ui-fs, 1)); max-width:90%; text-align:center; }
.dc-q { font-size:calc(15px * var(--ui-fs, 1)); line-height:1.5; color:var(--text); margin-bottom:2px; }
.dc-q + .ap { margin:8px 0 0; }                 /* a decision card's WHY block */
.sec-row input { font-size:calc(14px * var(--ui-fs, 1)); }

/* cards */
.card { align-self:stretch; max-width:720px; width:100%; background:var(--bubble); border:1px solid var(--line); border-radius:4px; padding:15px 16px; }
.card.warn { border-color:var(--warnbd); }
.card h4 { margin:0 0 10px; font-size:calc(14px * var(--ui-fs, 1)); }
.card pre { white-space:pre-wrap; word-break:break-word; background:var(--input); padding:9px; border-radius:4px; font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); }
.ap { display:flex; flex-direction:column; gap:6px; margin:2px 0 12px; }
.ap-head { margin-bottom:10px; }
.ap-eyebrow { font-size:calc(11px * var(--ui-fs, 1)); font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--warn); }
.ap-title { font-size:calc(17px * var(--ui-fs, 1)); font-weight:700; color:var(--text); margin-top:3px; }
.ap { display:flex; flex-direction:column; gap:10px; }
.ap-what { font-size:calc(15px * var(--ui-fs, 1)); font-weight:600; color:var(--text); line-height:1.4; }
.ap-why { padding:10px 13px; border-left:3px solid var(--warn); background:var(--input); border-radius:0 4px 4px 0; font-size:calc(14px * var(--ui-fs, 1)); line-height:1.5; }
.ap-why-l { display:block; font-size:calc(11px * var(--ui-fs, 1)); font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.ap-warn { padding:9px 12px; border:1px solid var(--warnbd); border-radius:4px; color:var(--warn); font-size:calc(13px * var(--ui-fs, 1)); line-height:1.45; }
.ap-group { background:var(--card2); border:1px solid var(--line); border-radius:4px; padding:4px 13px; }
.ap-gh { font-size:calc(11px * var(--ui-fs, 1)); font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:9px 0 3px; }
.ap-row { display:flex; gap:14px; font-size:calc(14px * var(--ui-fs, 1)); line-height:1.5; padding:8px 0; border-top:1px solid var(--div); }
.ap-gh + .ap-row, .ap-group > .ap-row:first-child { border-top:none; }
.ap-l { flex:none; width:130px; color:var(--muted); }
.ap-v { flex:1; min-width:0; word-break:break-word; white-space:pre-wrap; color:var(--text); }
.ap-v code, .ap-tech code { font-size:calc(12px * var(--ui-fs, 1)); }
.ap-sep { height:1px; background:var(--line); margin:4px 0; }
.ap-hole { color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent); border-radius:3px; padding:0 4px; }
.ap-dim { color:var(--muted); }
.ap-tech { font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--muted); word-break:break-word; }
.ap-raw summary { cursor:pointer; font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--muted); }
.ap-raw pre { margin:6px 0 0; }
@media (max-width:520px){ .ap-row { flex-direction:column; gap:2px; } .ap-l { width:auto; font-size:calc(12px * var(--ui-fs, 1)); } }
.opt { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:4px; cursor:pointer; }
.opt:hover { background:var(--bubble2); }
.opt .lt { width:26px; height:26px; border-radius:2px; background:var(--iconbtn); display:flex; align-items:center; justify-content:center; font-size:calc(12px * var(--ui-fs, 1)); font-weight:600; flex:none; }
.card .btns { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.dc-opts { display:flex; flex-direction:column; gap:4px; margin-top:10px; }
.dc-opt { border:1px solid var(--line); align-items:flex-start; }
.dc-opt input { flex:none; width:auto; margin:3px 0 0; }   /* radio/checkbox must NOT inherit .card input width:100% */
.dc-opt span { flex:1; min-width:0; }
.dc-opt span.primary { font-weight:640; }
.dc-custom { margin-top:8px; width:100%; }
textarea.dc-custom { resize:none; overflow:hidden; min-height:38px; line-height:1.45; font:inherit; box-sizing:border-box; }
.dc-custom { padding:9px 14px; border-radius:4px; background:var(--input); border:1px solid var(--line); color:var(--text); outline:none; }
.dc-custom::placeholder { color:var(--faint); }
.dc-custom:focus { border-color:var(--accent2); }
.fs-row { display:flex; gap:8px; flex-wrap:wrap; }
.fs-opt { padding:7px 14px; border-radius:4px; border:1px solid var(--line); background:var(--bubble2); font-size:calc(13px * var(--ui-fs, 1)); }
.fs-opt.active { border-color:var(--green); color:var(--green); font-weight:600; }
.tk-f-row { display:flex; gap:12px; margin-top:4px; }
.tk-f-row > div { flex:1; }
.tk-f-row input[type=date], .tk-f-row select { width:100%; }
.tk-row { cursor:pointer; }
.tk-done-h { cursor:pointer; user-select:none; }
.tk-done-h .tk-caret { color:var(--muted); font-size:calc(11px * var(--ui-fs, 1)); }
.btn { padding:8px 16px; border-radius:4px; font-size:calc(13px * var(--ui-fs, 1)); font-weight:560; background:var(--bubble2); }
.btn.green { background:var(--green); color:var(--ongreen); } .btn.red { background:var(--redbg); color:var(--err); }
.card input { width:100%; padding:9px 11px; border-radius:4px; background:var(--input); border:1px solid var(--line); color:var(--text); }
.card input[type=radio], .card input[type=checkbox] { width:auto; padding:0; border-radius:0; }   /* never full-width */

/* composer */
.composer { padding:8px 20px 18px; display:flex; flex-direction:column; }
.composer form { width:100%; max-width:none; margin:0; display:flex; flex-direction:column; gap:6px;
  background:var(--elev); border:1px solid var(--line); border-radius:4px; padding:7px 9px; }
.composer .composer-row { display:flex; align-items:flex-end; gap:6px; }
/* composer attachment thumbnails (inside the input box, grokbot-style) */
.attach-bar { display:flex; flex-wrap:wrap; gap:8px; padding:5px 4px 2px; }
.pending-thumb { position:relative; width:54px; height:54px; border-radius:4px; overflow:hidden; flex:none;
  border:1px solid var(--line); background:var(--bubble2); }
.pending-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.pending-thumb .pt-file { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--muted); gap:2px; }
.pending-thumb .pt-file span { font-size:calc(8px * var(--ui-fs, 1)); font-weight:700; letter-spacing:.03em; }
.pending-thumb.up { opacity:.6; }
.pt-x { position:absolute; top:3px; right:3px; width:17px; height:17px; border-radius:2px; background:rgba(0,0,0,.55);
  color:#fff; font-size:calc(10px * var(--ui-fs, 1)); line-height:1; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; }
.pt-x:hover { background:var(--err); }
.composer textarea { flex:1; background:none; border:none; outline:none; color:var(--text); font:inherit; font-size:calc(15px * var(--chat-fs, 1) * var(--ui-fs, 1));
  resize:none; line-height:1.45; padding:8px 6px; max-height:220px; overflow-y:auto; }
.composer textarea::placeholder { color:var(--faint); }
.composer .ic { width:34px; height:34px; border-radius:2px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); flex:none; background:none; }
.composer .ic:hover { background:var(--iconbtn); color:var(--text); }
.composer .ic.live { color:var(--green); }
.composer .ic.send { color:var(--text); background:var(--send); }
.composer .ic.send:hover { background:var(--scroll2); }

/* ---------- Split chat grid (pane 0 = #chat, + up to 3 drag-dropped panes) ---------- */
#chatgrid { position:relative; display:grid; min-height:0; min-width:0; gap:1px; background:var(--line);
  grid-template-columns:1fr; grid-template-rows:1fr; grid-template-areas:"p0"; }
#chatgrid[data-n="2"] { grid-template-rows:1fr 1fr; grid-template-areas:"p0" "p1"; }
#chatgrid[data-n="3"] { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; grid-template-areas:"p0 p0" "p1 p2"; }
#chatgrid[data-n="4"] { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; grid-template-areas:"p0 p1" "p2 p3"; }
#chat { grid-area:p0; background:var(--bg); }
.pane { grid-area:p1; background:var(--bg); position:relative; display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden; }
.pane.pane-drop, #chat.pane-drop { outline:2px solid var(--green); outline-offset:-2px; }
.pane-close { position:absolute; top:9px; right:11px; z-index:7; width:26px; height:26px; border-radius:2px;
  display:flex; align-items:center; justify-content:center; color:var(--muted); background:var(--iconbtn); font-size:calc(13px * var(--ui-fs, 1)); }
.pane-close:hover { color:var(--text); background:var(--hover); }
.pane-feed { flex:1; overflow-y:auto; padding:52px 0 12px; display:flex; flex-direction:column; align-items:center; }
.pane-wrap { width:100%; max-width:1100px; padding:0 24px; display:flex; flex-direction:column; gap:14px; }
/* split panes reuse the main .composer markup + styles, so they look identical */
/* drop-to-add bar: only while dragging an agent and a slot is free */
.pane-add { display:none; }
body.dragging-agent #chatgrid[data-canadd="1"] .pane-add {
  display:flex; align-items:center; gap:8px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:40; padding:16px 24px; border:2px dashed var(--green); border-radius:4px; color:var(--text);
  background:var(--panel); box-shadow:0 8px 30px var(--shadow); font-size:calc(14px * var(--ui-fs, 1)); pointer-events:auto; }
.pane-add.drop-hot { background:var(--hover); }
.pane-add .pa-plus { font-size:calc(18px * var(--ui-fs, 1)); color:var(--green); }
@media (max-width:820px), (max-height:500px) and (pointer:coarse){ #chatgrid { display:contents; } .pane, .pane-add { display:none !important; } }   /* contents: no empty grid row under the sidebar */

/* ---------- Detail panel ---------- */
#detail { background:var(--sidebar); border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.dt-top { display:flex; align-items:center; justify-content:flex-end; gap:16px; padding:14px 16px; color:var(--muted); }
.dt-top .icon:hover { color:var(--text); }
.dt-head { display:flex; flex-direction:column; align-items:center; gap:5px; padding:0 16px 10px; }
.dt-head .av { width:92px; height:92px; }
.dt-head .nm { font-weight:600; font-size:calc(18px * var(--ui-fs, 1)); margin-top:4px; }
.dt-head .dt { font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); }
.dt-tabs { display:flex; justify-content:center; gap:26px; border-bottom:1px solid var(--line); padding:12px 0; }
.dt-tabs button { color:var(--muted); font-size:calc(14px * var(--ui-fs, 1)); padding-bottom:10px; margin-bottom:-13px; border-bottom:2px solid transparent; }
.dt-tabs button.active { color:var(--text); border-color:var(--text); }
.dt-body { flex:1; overflow-y:auto; padding:14px 16px 24px; }
.dt-body h5 { font-size:calc(12px * var(--ui-fs, 1)); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:16px 0 8px; }
.dt-body h5:first-child { margin-top:2px; }

.rline { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--div); }
.rline .l { min-width:0; }
.rline .l .n { font-size:calc(13.5px * var(--ui-fs, 1)); } .rline .l .s { font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--muted); }
.pillx { font-size:calc(10px * var(--ui-fs, 1)); color:var(--warn); margin-left:6px; }

/* toggle switch */
.sw { width:40px; height:23px; border-radius:4px; background:var(--swoff); position:relative; transition:.15s; flex:none; }
.sw.on { background:var(--green); }
.sw::after { content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:2px; background:#fff; transition:.15s; }
.sw.on::after { transform:translateX(17px); }

.item { padding:10px 0; border-bottom:1px solid var(--div); font-size:calc(13px * var(--ui-fs, 1)); }
.item .s { font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--muted); }
.item .del { float:right; color:var(--err); }
.item .go { float:right; color:var(--green); font-size:calc(12px * var(--ui-fs, 1)); }
.instr { background:var(--input); border:1px solid var(--line); border-radius:4px; padding:10px; font-size:calc(12.5px * var(--ui-fs, 1)); color:var(--muted); white-space:pre-wrap; max-height:220px; overflow-y:auto; }
.taglist span { display:inline-block; font-size:calc(10.5px * var(--ui-fs, 1)); background:var(--input); border:1px solid var(--line); border-radius:4px; padding:2px 8px; margin:0 4px 5px 0; color:var(--muted); }

.badge { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); font-size:calc(11px * var(--ui-fs, 1)); padding:3px 10px; border-radius:4px; background:var(--bubble); border:1px solid var(--line); color:var(--muted); z-index:40; }
.badge.mock { color:var(--warn); }

/* global modal */
#modal { position:fixed; inset:0; background:var(--overlay); display:flex; align-items:center; justify-content:center; z-index:250; }   /* above the phone chat layer (100) + detail drawer (220) */
#modal.hidden { display:none; }
.modal-box { background:var(--sidebar); border:1px solid var(--line); border-radius:4px; width:80vw; height:80vh; overflow:hidden; padding:22px 26px; position:relative; display:flex; flex-direction:column; }
.modal-box > #modal-body { flex:1; min-height:0; display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; }
#modal-body > h3, #modal-body > .gtabs { flex:none; }
#modal-body > :not(#gbody) { flex-shrink:0; }   /* pages without their own scroller (agent editor) scroll the body, not squash */
#gbody { flex:1; min-height:0; overflow-y:auto; }
.modal-box input, .modal-box textarea, .modal-box select {
  width:100%; background:var(--input); color:var(--text); border:1px solid var(--line);
  border-radius:4px; padding:9px 11px; font:inherit; font-size:calc(13.5px * var(--ui-fs, 1)); outline:none; }
.modal-box textarea { resize:vertical; line-height:1.5; }
.modal-box select { appearance:none; cursor:pointer; }
.modal-box input:focus, .modal-box textarea:focus, .modal-box select:focus { border-color:var(--accent2); }
.modal-box .btns input { width:auto; }
#modal-x { position:absolute; top:12px; right:14px; color:var(--muted); font-size:calc(16px * var(--ui-fs, 1));
  min-width:40px; min-height:40px; display:flex; align-items:center; justify-content:center; }
.modal-box h3 { margin:0 0 6px; }
/* Connections (grouped cards) */
.conn-search { width:100%; margin-bottom:10px; padding:10px 14px; border-radius:4px; background:var(--input); border:1px solid var(--line); color:var(--text); font-size:calc(14px * var(--ui-fs, 1)); outline:none; }
/* keep search + category tabs pinned while the grid scrolls */
.conn-sticky { position:sticky; top:0; z-index:12; background:var(--sidebar); padding-top:4px; padding-bottom:2px;
  box-shadow:0 8px 10px -8px var(--shadow); }
/* minmax(0,…): a long one-line status must ellipsize, not widen the column past the screen */
.conn-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (max-width:760px){ .conn-grid { grid-template-columns:minmax(0,1fr); } }
.add-row { display:flex; gap:6px; margin-top:9px; padding-top:9px; border-top:1px dashed var(--div); }
.add-row input { flex:1; min-width:0; padding:6px 9px; border-radius:4px; background:var(--deep); border:1px solid var(--line); color:var(--text); font-size:calc(12px * var(--ui-fs, 1)); }
.cc-open { cursor:pointer; } .cc-open:hover .cc-t { color:var(--accent2); }

#cd-back { color:var(--accent2); background:none; border:none; cursor:pointer; font-size:calc(12.5px * var(--ui-fs, 1)); margin-bottom:6px; }
.cd-head { display:flex; align-items:baseline; gap:12px; margin:6px 0 4px; }
.cd-title { font-size:calc(20px * var(--ui-fs, 1)); font-weight:650; }
.cd-head a { color:var(--accent2); text-decoration:none; }
/* Grok-style Skills cards + Information block */

/* running-tasks strip (non-blocking, stoppable) */
.task-strip { display:flex; flex-wrap:wrap; gap:8px; padding:8px 20px; border-bottom:1px solid var(--line); }
.task-chip { display:inline-flex; align-items:center; gap:8px; max-width:360px; background:var(--card2); border:1px solid var(--line); border-radius:4px; padding:6px 10px; font-size:calc(12px * var(--ui-fs, 1)); }
.task-chip .tc-dot { width:7px; height:7px; border-radius:2px; background:var(--green); animation:workpulse 1.3s ease-in-out infinite; flex:none; }
.task-chip .tc-t { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-chip .tc-stop { color:var(--faint); background:none; border:none; cursor:pointer; font-size:calc(12px * var(--ui-fs, 1)); } .task-chip .tc-stop:hover { color:var(--err); }

/* "Working on it" busy status line (animated avatar) */
.working { display:flex; align-items:center; gap:10px; padding:4px 2px; color:var(--muted); font-size:calc(13px * var(--ui-fs, 1)); align-self:flex-start; }
.working .av { width:26px; height:26px; animation: workpulse 1.4s ease-in-out infinite; }
@keyframes workpulse { 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.12); opacity:1; } }
.working .wdots::after { content:""; animation: wdots 1.4s steps(4,end) infinite; }
@keyframes wdots { 0%{content:"";} 25%{content:"·";} 50%{content:"··";} 75%{content:"···";} }
.conn-card { background:var(--card2); border:1px solid var(--line); border-radius:4px; padding:14px 16px; }
.conn-card.cc-open { cursor:pointer; }
.conn-card.cc-open:hover { border-color:var(--scroll2); background:var(--hover); }
.conn-card .cc-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:0; gap:10px; }
.conn-card .cc-left { display:flex; align-items:center; gap:11px; min-width:0; }
.conn-card .cc-meta { min-width:0; }
.conn-card .cc-t { font-weight:600; font-size:calc(14.5px * var(--ui-fs, 1)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conn-card .cc-btn { flex:none; padding:7px 16px; text-decoration:none; }
.conn-card .cc-left { flex:1; }
.conn-card .cc-meta { flex:1; overflow:hidden; }
.conn-card .cc-meta .s { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conn-card .cc-acts { flex:none; display:flex; align-items:center; gap:8px; }
.conn-card .ca-rm { background:none; border:none; color:var(--faint); cursor:pointer; font-size:calc(12px * var(--ui-fs, 1)); padding:4px; }
.conn-card .ca-rm:hover { color:var(--err); }
.conn-card .cc-client { font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); background:none; border:none; padding:0 4px; cursor:pointer; white-space:nowrap; }
.conn-card .cc-client:hover { color:var(--accent2); }
/* category tabs + headers (original Apps layout) */
.conn-cats { display:flex; gap:7px; margin-bottom:10px; flex-wrap:wrap; align-items:center; }
.conn-cats .fbtn { border:1px solid var(--line); border-radius:4px; }
.conn-cat-h .conn-refresh { margin-left:auto; color:var(--muted); }
.conn-note { margin:10px 2px 14px; }
.conn-cat-sec { margin-bottom:18px; }
.conn-cat-h { font-size:calc(12px * var(--ui-fs, 1)); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600;
  margin:4px 2px 10px; display:flex; align-items:center; gap:10px; }
.conn-cat-h .conn-h-act { text-transform:none; letter-spacing:0; font-weight:500; font-size:calc(12px * var(--ui-fs, 1)); color:var(--accent2);
  text-decoration:none; background:none; border:none; padding:0; cursor:pointer; }
.conn-cat-h .conn-h-act:hover { text-decoration:underline; }
.conn-cat-sec .cx-form { margin-bottom:12px; }
.set-label .set-link { margin-left:8px; text-transform:none; letter-spacing:0; color:var(--accent2);
  text-decoration:none; font-size:calc(12px * var(--ui-fs, 1)); }
.set-label .set-link:hover { text-decoration:underline; }
.cc-ico { width:30px; height:30px; border-radius:4px; flex:none; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cc-ico img { width:19px; height:19px; object-fit:contain; display:block; }
.cc-ico.letter { background:var(--iconbtn); border-color:transparent; }
.cc-ico.letter::after { content:attr(data-l); font-size:calc(13px * var(--ui-fs, 1)); font-weight:700; color:var(--muted); }
.cdot { width:8px; height:8px; border-radius:2px; background:var(--scroll2); flex:none; }
.cdot.on { background:var(--green); box-shadow:0 0 6px var(--green); }

.gtabs { display:flex; gap:8px; margin:10px 0; flex-wrap:wrap; }
.gtabs button { font-size:calc(12.5px * var(--ui-fs, 1)); color:var(--muted); background:var(--hover); border:1px solid var(--line); border-radius:4px; padding:5px 11px; }
.gtabs button.active { background:var(--bubble2); color:var(--text); }

/* ---------- Settings screen (app.js openSettings): section list + one section ----------
   Desktop: a modal, list on the left. Phone: full screen, the list OR a section (data-view).
   Each group has a tone: its icon tiles and the current-section marker use it. */
:root, :root[data-theme="dark"] { --ok-ink:#5cd08a; }
:root[data-theme="light"] { --ok-ink:#12703f; }   /* --green is 3.5:1 on light grey; chips need 4.5:1 */
[data-tone="team"] { --tone:var(--green); } [data-tone="conn"] { --tone:var(--accent2); } [data-tone="ws"] { --tone:var(--warn); }
.modal-box:has(> #modal-body > .st-shell) { width:min(1120px, calc(100vw - 48px)); height:min(860px, calc(100dvh - 48px));
  padding:0; border-radius:2px; }
.modal-box:has(> #modal-body > .st-shell) > #modal-x { top:16px; right:16px; z-index:20; width:40px; height:40px; display:grid; place-items:center; }
#modal #modal-body > .st-shell { flex:1 1 auto; min-height:0; }
.st-shell { display:grid; grid-template-columns:clamp(250px, 29%, 310px) minmax(0,1fr); height:100%; min-height:0; }
.st-nav { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line); background:var(--deep); }
.st-nav-top { display:flex; align-items:center; gap:4px; padding:22px 20px 12px; }
.st-close, .st-back { display:none; }
.st-h { margin:0; font:400 calc(19px * var(--ui-fs, 1))/1.2 var(--px-font); letter-spacing:.04em; outline:none; }
.st-find { position:relative; margin:0 14px 6px; }
.st-find .st-find-ic { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); pointer-events:none; }
.modal-box .st-search { padding-left:35px; min-height:42px; border-radius:2px; }
.modal-box .st-search:focus { border-color:var(--accent2); }
.st-list { flex:1; min-height:0; overflow-y:auto; padding:0 8px 18px; }
.st-grp { margin-top:12px; }
.st-grp-h { font:400 calc(11.5px * var(--ui-fs, 1))/1.2 var(--px-font); letter-spacing:.05em; color:var(--muted); padding:8px 12px 6px; }
.st-item { display:flex; align-items:center; gap:12px; width:100%; min-height:54px; padding:8px 10px 8px 12px; text-align:left;
  border-radius:2px; position:relative; color:var(--text); }
.st-item:hover { background:var(--hover); }
.st-item[aria-current="page"] { background:var(--sel); }
.st-item[aria-current="page"]::before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; background:var(--tone); }
.st-ico, .st-head-ico { flex:none; display:grid; place-items:center; width:36px; height:36px; color:var(--tone);
  background:color-mix(in srgb, var(--tone) 13%, transparent); border:2px solid color-mix(in srgb, var(--tone) 50%, transparent); }
.st-item[aria-current="page"] .st-ico, .st-head-ico { background:var(--tone); border-color:var(--tone); color:var(--bg);
  box-shadow:2px 2px 0 color-mix(in srgb, var(--tone) 45%, #000); }
.st-ico svg { width:20px; height:20px; }
.st-it { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.st-nm { font-weight:600; font-size:calc(14px * var(--ui-fs, 1)); line-height:1.3; }
.st-dc { font-size:calc(12px * var(--ui-fs, 1)); line-height:1.4; color:var(--muted); }
.st-in { white-space:nowrap; }
.st-chev { display:none; flex:none; color:var(--muted); transform:scaleX(-1); }
.st-item-q .st-ico { --tone:var(--muted); }
.st-main { display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--sidebar); }
.st-head { display:flex; align-items:center; gap:14px; padding:20px 72px 16px 26px; border-bottom:1px solid var(--line); flex:none; }
.st-head-ico { width:44px; height:44px; }
.st-head-ico svg { width:20px; height:20px; }
.st-head-t { flex:1; min-width:0; }
.modal-box #st-title { margin:0; font:400 calc(19px * var(--ui-fs, 1))/1.25 var(--px-font); letter-spacing:.03em; outline:none; }
.st-act { flex:none; white-space:nowrap; min-height:40px; }
.st-shell #gbody { padding:8px 26px 28px; }
.st-shell #gbody > .conn-sticky:first-child { margin-top:-8px; padding-top:12px; }
/* pin flush under the header: top:0 sticks inside #gbody's top padding, and rows scrolled through that gap */
.st-shell #gbody .conn-sticky { top:-8px; }
/* the header's primary action replaces the in-list "+" / bottom buttons */
.st-shell #agent-add, .st-shell #rt-new, .st-shell #ppl-add { display:none; }
.st-shell .skill-searchrow .conn-search { margin-right:0; }
.st-item:focus-visible, .st-back:focus-visible, .st-close:focus-visible, .st-act:focus-visible,
.modal-box:has(> #modal-body > .st-shell) > #modal-x:focus-visible { outline:2px solid var(--accent2); outline-offset:-2px; }
/* empty states: say what to do next */
.st-empty { margin:10px 0; padding:16px 16px; border:2px dashed var(--line); color:var(--muted); font-size:calc(13px * var(--ui-fs, 1)); line-height:1.5; max-width:62ch; }
.st-empty b { color:var(--text); font-weight:600; }
/* a search result's setting, marked for a moment */
.st-flash { outline:2px solid var(--warn); outline-offset:4px; animation:st-flash 1.6s steps(4) forwards; }
@keyframes st-flash { 0%, 75% { outline-color:var(--warn); } 100% { outline-color:transparent; } }
/* status chips — one look for Connected / Ready (ok), Needs setup / Limit (warn), Not signed in (bad),
   Coming soon (soon), in every section */
.st-chip, .st-shell .acc-ok, .st-shell .acc-warn, .st-shell .acc-bad, .st-shell .tpl-soon, .st-shell .acc-pill {
  display:inline-block; padding:1px 7px; border:1px solid currentColor; border-radius:0; font-size:calc(11px * var(--ui-fs, 1));
  font-weight:600; line-height:1.5; white-space:nowrap; vertical-align:1px; background:transparent; }
.st-chip.ok, .st-shell .acc-ok { color:var(--ok-ink); }
.st-chip.warn, .st-shell .acc-warn { color:var(--warn); }
/* a warning sentence, not a chip: wrap it (nowrap ran it off the screen) */
.st-shell .acc-note.acc-warn { display:block; white-space:normal; overflow-wrap:anywhere; padding:8px 10px; line-height:1.45; font-weight:400; }
.st-chip.bad, .st-shell .acc-bad { color:var(--err); }
.st-chip.soon, .st-shell .tpl-soon { color:var(--muted); border-style:dashed; }
.st-shell .acc-pill { color:var(--accent2); }
@media (max-width:820px), (max-height:500px) and (pointer:coarse){
  .modal-box:has(> #modal-body > .st-shell) { width:100vw; height:100dvh; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); border:0; }
  .modal-box:has(> #modal-body > .st-shell) > #modal-x { display:none; }   /* the page has its own back button */
  .st-shell { display:block; height:100%; }
  .st-shell[data-view="section"] .st-nav, .st-shell[data-view="home"] .st-main { display:none; }
  .st-nav { height:100%; border-right:0; background:var(--sidebar); }
  .st-nav-top { padding:6px 16px 8px 4px; }
  .st-close, .st-back { display:grid; place-items:center; flex:none; width:44px; height:44px; color:var(--text); }
  .st-h { font-size:calc(20px * var(--ui-fs, 1)); }
  .st-find { margin:2px 16px 4px; }
  .modal-box .st-search { min-height:46px; font-size:calc(16px * var(--ui-fs, 1)); }
  .st-list { padding:0 8px calc(24px + env(safe-area-inset-bottom)); }
  .st-item { min-height:66px; padding:10px 8px 10px 12px; }
  .st-chev { display:block; }
  .st-main { height:100%; }
  /* back · title · action on one row */
  .st-head { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; column-gap:6px; padding:6px 16px 12px 4px; }
  .st-head-ico { display:none; }
  .st-head-t { display:contents; }
  .modal-box #st-title { grid-column:2; grid-row:1; }
  .st-act { grid-column:3; grid-row:1; }
  .modal-box #st-title { font-size:calc(18px * var(--ui-fs, 1)); }
  .st-act { min-height:44px; padding:8px 12px; }
  .st-shell #gbody { padding:6px 15px calc(24px + env(safe-area-inset-bottom)); }
  .st-shell #gbody .conn-sticky { top:-6px; }
}
@media (prefers-reduced-motion: reduce){
  .st-shell, .st-shell * { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
/* agent editor: chips + skill picker */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:calc(11px * var(--ui-fs, 1)); background:var(--input); border:1px solid var(--line);
  border-radius:4px; padding:3px 8px; margin:0 5px 6px 0; color:var(--text); }
.chip button { background:none; border:none; color:var(--err); cursor:pointer; font-size:calc(12px * var(--ui-fs, 1)); padding:0; line-height:1; }
.chip.add { cursor:pointer; color:var(--green); border-color:var(--line); } .chip.add:hover { background:var(--green); color:#fff; }
.picker { position:relative; margin-top:6px; }
.picker-list { display:none; position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:30;
  max-height:280px; overflow-y:auto; border:1px solid var(--line); border-radius:4px; background:var(--panel);
  box-shadow:0 12px 32px var(--shadow); }
.picker.open .picker-list { display:block; }
.picker-row { padding:8px 10px; border-bottom:1px solid var(--div); cursor:pointer; }
.picker-row:hover { background:var(--hover); } .picker-row.sel { background:var(--sel); }
.picker-row .pn { font-size:calc(12.5px * var(--ui-fs, 1)); font-weight:560; } .picker-row .pd { font-size:calc(11px * var(--ui-fs, 1)); color:var(--muted); margin-top:2px; }
.ed-label { display:block; font-size:calc(12px * var(--ui-fs, 1)); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:16px 0 6px; }
.ed-help { margin-top:6px; font-size:calc(12px * var(--ui-fs, 1)); }
.ed-check { display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:calc(13px * var(--ui-fs, 1)); cursor:pointer; }
.ed-check input { width:auto; margin:0; }
.ed-check .s { display:inline; margin-left:4px; }
.rline .l.rl-edit { cursor:pointer; border-radius:4px; padding:2px 6px; margin:-2px -6px; transition:background .12s; }
.rline .l.rl-edit:hover { background:var(--bubble2); }
/* whole-row clickable routine (full width, not just the text) */
.rline.rl-edit { cursor:pointer; border-radius:4px; padding-left:8px; padding-right:8px; margin:0 -8px; transition:background .12s; }
.rline.rl-edit:hover { background:var(--bubble2); }
.rline.rl-edit .sw { cursor:pointer; }
.rt-sched { margin-top:2px; }
.rt-frow { margin-top:8px; }

/* collapsed = narrow avatar rail (Grok-style), toggle stays visible to expand */
main.sb-collapsed { grid-template-columns:68px 1fr 360px; }
#sidebar.collapsed .sb-top { flex-direction:column; align-items:center; gap:10px; }
#sidebar.collapsed .sb-top .sp { display:none; }
#sidebar.collapsed #sb-search, #sidebar.collapsed .sp, #sidebar.collapsed #new-chat,
#sidebar.collapsed #sb-searchbox, #sidebar.collapsed .sb-filters, #sidebar.collapsed .pinned .nm, #sidebar.collapsed .pinned .dt,
#sidebar.collapsed .row-agent .mid, #sidebar.collapsed .row-agent .dot,
#sidebar.collapsed .pinned .star, #sidebar.collapsed .connect span, #sidebar.collapsed .me { display:none; }
#sidebar.collapsed .row-agent, #sidebar.collapsed .pinned { justify-content:center; padding-left:0; padding-right:0; }
#sidebar.collapsed .pinned { border-bottom:none; padding:8px 0; margin-bottom:2px; }
#sidebar.collapsed .pinned .av { width:40px; height:40px; }
#sidebar.collapsed .pinned > div[style] { position:static !important; transform:none !important; }
#sidebar.collapsed .connect { justify-content:center; padding:9px 0; }
#sidebar.collapsed .sb-list { padding:6px 6px 10px; }
#sidebar.collapsed #rows { display:none; }   /* rail shows only the pinned agent */
/* collapsed rail: pinned CoS shrinks to row-avatar size, no name/overflow */
#sidebar.collapsed .pin-grid, #sidebar.collapsed .pin-grid[data-count="1"] { grid-template-columns:1fr !important; padding:8px 0; justify-items:center; }
#sidebar.collapsed .pin-grid .av, #sidebar.collapsed .pin-grid[data-count="1"] .av { width:40px !important; height:40px !important; }
#sidebar.collapsed .pin-nm, #sidebar.collapsed .pin-x, #sidebar.collapsed .pin-hint { display:none !important; }

.tree ul { list-style:none; margin:0; padding-left:14px; border-left:1px solid var(--line); }
.tree li { padding:2px 0; font-size:calc(12.5px * var(--ui-fs, 1)); } .tree .lead{color:var(--green);font-weight:600} .tree .cos{color:var(--warn);font-weight:700}

/* ---------- Settings ---------- */
.set-section { margin-top:16px; max-width:460px; }
.acct-switch { margin:4px 0 14px; max-width:none; }
.acct-switch-row { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.acct-switch-row select { flex:1; min-width:0; }
.acct-switch-row .btn { flex:none; white-space:nowrap; }
.one-cmd { background:var(--deep); border:1px solid var(--line); border-radius:4px; padding:14px 16px; margin-top:6px; display:flex; align-items:flex-start; gap:10px; }
.one-cmd code { flex:1; white-space:pre-wrap; word-break:break-all; font-size:calc(12.5px * var(--ui-fs, 1)); color:var(--text); line-height:1.6; }
.verdict { display:flex; gap:11px; align-items:flex-start; border-radius:4px; padding:13px 15px; margin-bottom:4px; font-size:calc(13px * var(--ui-fs, 1)); line-height:1.5; }
.verdict.ok   { background:var(--okbg); border:1px solid var(--green); }
.verdict.warn { background:var(--hover); border:1px solid var(--line); }
.verdict .v-ic { flex:none; width:22px; height:22px; border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:calc(13px * var(--ui-fs, 1)); font-weight:700; }
.verdict.ok   .v-ic { background:var(--green); color:#04140a; }
.verdict.warn .v-ic { background:var(--line); color:var(--text); }
.verdict .v-list { margin:6px 0 0; padding-left:18px; }
.verdict .v-list li { margin:2px 0; color:var(--muted); }
.verdict code { background:var(--deep); border:1px solid var(--line); border-radius:3px; padding:0 4px; font-size:calc(11px * var(--ui-fs, 1)); }
.set-label { font-size:calc(12px * var(--ui-fs, 1)); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:10px; }
.set-select { width:100%; max-width:320px; background:var(--bubble); color:var(--text); border:1px solid var(--line);
  border-radius:4px; padding:9px 11px; font:inherit; font-size:calc(14px * var(--ui-fs, 1)); outline:none; cursor:pointer; }
.set-grid { display:flex; flex-direction:column; gap:8px; }
.set-opt { display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:4px;
  border:1px solid var(--line); background:var(--input); cursor:pointer; }
.set-opt:hover { background:var(--hover); }
.set-opt.active { border-color:var(--accent); background:var(--hover); }
.set-swatch { width:38px; height:38px; border-radius:4px; flex:none; border:1px solid var(--line); }
.set-swatch.sw-dark { background:linear-gradient(135deg,#1c1c20 50%,#0d0d0f 50%); }
.set-swatch.sw-light { background:linear-gradient(135deg,#ffffff 50%,#e3e3e9 50%); }
.set-swatch.sw-system { background:linear-gradient(135deg,#ffffff 50%,#0d0d0f 50%); }
.set-meta { flex:1; min-width:0; }
.set-nm { font-size:calc(14px * var(--ui-fs, 1)); font-weight:560; }
.set-dc { font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); margin-top:1px; }
.set-tick { color:var(--accent); font-size:calc(15px * var(--ui-fs, 1)); width:16px; text-align:center; flex:none; }

/* help / onboarding box */
.help-box { background:var(--input); border:1px solid var(--line); border-radius:4px; padding:14px 16px; margin-top:4px; }
.help-t { font-size:calc(13px * var(--ui-fs, 1)); font-weight:600; margin-bottom:10px; }
.help-step { display:flex; gap:11px; align-items:flex-start; font-size:calc(12.5px * var(--ui-fs, 1)); color:var(--muted); line-height:1.5; margin-bottom:9px; }
.help-step:last-child { margin-bottom:0; }
.help-n { flex:none; width:20px; height:20px; border-radius:2px; background:var(--bubble2); color:var(--text);
  font-size:calc(11px * var(--ui-fs, 1)); font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.help-box code { background:var(--deep); border:1px solid var(--line); border-radius:3px; padding:1px 5px; font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--text); }
.cmd { display:inline-flex; align-items:center; gap:5px; }
.copy-btn { background:var(--bubble2); border:1px solid var(--line); border-radius:3px; color:var(--muted);
  font-size:calc(12px * var(--ui-fs, 1)); line-height:1; padding:3px 6px; cursor:pointer; }
.copy-btn:hover { color:var(--text); background:var(--iconbtn); }
.copy-btn.ok { color:var(--green); border-color:var(--green); }

/* skills: search row with + create button */
.skill-searchrow { display:flex; gap:8px; align-items:stretch; margin-bottom:10px; }
.skill-searchrow .conn-search { margin-bottom:0; }
.skill-add { flex:none; width:42px; border-radius:4px; background:var(--green); color:var(--ongreen);
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; }
.skill-add:hover { background:var(--green2); }
/* searchable list rows (agents, accounts) */
.agent-row, .acct-row { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer;
  padding:11px 10px; border-radius:4px; border-bottom:1px solid var(--div); }
.agent-row:hover, .acct-row:hover { background:var(--hover); }
.agent-row.arch { opacity:.6; }
.agent-row .ar-main, .acct-row .ar-main { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.agent-row .go, .acct-row .go { flex:none; }
.agent-row[draggable="true"] { cursor:grab; }
.agent-row.dragging { opacity:.4; }
.agent-row.drop-to { outline:2px solid var(--accent2); outline-offset:-2px; background:var(--sel); }
.skill-add.alt { width:auto; padding:0 14px; background:var(--bubble2); color:var(--text); font-size:calc(13px * var(--ui-fs, 1)); font-weight:560; }
.skill-add.alt:hover { background:var(--iconbtn); }

/* ---------- custom themed select (searchable dropdown) ---------- */
.cs { position:relative; flex:0 0 auto; width:100%; min-width:0; }
.cs-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 11px; border-radius:4px; background:var(--input); border:1px solid var(--line);
  color:var(--text); font:inherit; font-size:calc(13.5px * var(--ui-fs, 1)); cursor:pointer; text-align:left; }
.cs-trigger:hover { border-color:var(--scroll2); }
.cs.open .cs-trigger { border-color:var(--accent); }
.cs-val { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-val.ph { color:var(--faint); }
.cs-car { color:var(--muted); flex:none; transition:transform .15s ease; }
.cs.open .cs-car { transform:rotate(180deg); }
.cs-pop { position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:70;
  background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:6px;
  box-shadow:0 10px 30px var(--shadow); max-height:280px; display:flex; flex-direction:column; }
.cs-search { width:100%; padding:8px 10px; margin-bottom:6px; border-radius:4px; flex:none;
  background:var(--deep); border:1px solid var(--line); color:var(--text); font:inherit; font-size:calc(13px * var(--ui-fs, 1)); outline:none; }
.cs-search:focus { border-color:var(--accent); }
.cs-list { overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:1px; }
.cs-row { flex:none; padding:8px 10px; border-radius:3px; font-size:calc(13px * var(--ui-fs, 1)); line-height:1.3; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs-row:hover { background:var(--hover); }
.cs-row.sel { background:var(--sel); color:var(--text); font-weight:560; }
.cs-empty { padding:10px; font-size:calc(12.5px * var(--ui-fs, 1)); color:var(--faint); text-align:center; }

/* ======================= Mobile (end-to-end) ======================= */
.m-back { display:none; }
@media (max-width:820px), (max-height:500px) and (pointer:coarse){
  main, main.sb-collapsed, main.dt-wide, main.dt-rail, main.dt-hidden { grid-template-columns:minmax(0,1fr) !important; }
  #sidebar, #sidebar.collapsed { width:100% !important; border-right:none; }
  .resizer, #sb-toggle, .dt-rail-nav { display:none !important; }
  .sb-top { padding:12px 14px 6px; }

  /* list is the home view; chat slides over it, detail slides over chat */
  #chat { position:fixed; inset:0; z-index:100; background:var(--bg);
    transform:translateX(100%); transition:transform .25s ease; will-change:transform; }
  main.show-chat #chat { transform:translateX(0); }
  .m-back { display:flex; position:absolute; top:12px; left:12px; z-index:8;
    width:38px; height:38px; border-radius:2px; align-items:center; justify-content:center;
    color:var(--text); background:var(--elev); border:1px solid var(--line); box-shadow:0 2px 10px var(--shadow); }
  .chat-head { left:auto; right:14px; transform:none; max-width:62%; }
  .chat-head .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .feed-wrap { padding:0 16px; }
  .composer form { margin:0 12px; }

  #detail { position:fixed; top:0; right:0; bottom:0; width:90vw; max-width:420px; z-index:220;
    transform:translateX(100%); transition:transform .25s ease; border-left:1px solid var(--line); }
  main.dt-open #detail { transform:translateX(0); }
  main.dt-open #detail .dt-top { justify-content:space-between; }
  #scrim { position:fixed; inset:0; background:var(--overlay); z-index:200; }

  /* Settings modal → fullscreen sheet */
  #modal { padding:0; }
  .modal-box { width:100vw; height:100dvh; max-width:none; border-radius:0; padding:18px 15px;
    padding-top:calc(18px + env(safe-area-inset-top)); padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  #modal-x { top:calc(6px + env(safe-area-inset-top)); right:6px; }
  .conn-grid { grid-template-columns:minmax(0,1fr); }
  .gtabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .gtabs button { flex:none; }
  .instr { max-height:none; }
}
@media (max-width:420px){
  .pin-grid[data-count="1"] .av { width:64px; height:64px; }
  .skill-add.alt { padding:0 10px; }
}

/* ======================= Universal search ======================= */
#search-modal { position:fixed; inset:0; z-index:400; background:var(--overlay); display:flex; align-items:flex-start; justify-content:center; padding:7vh 0; }
.search-box { width:80vw; height:80vh; max-width:none; background:var(--sidebar); border:1px solid var(--line);
  border-radius:4px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px var(--shadow); }
.search-head { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); color:var(--muted); }
#search-input { flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text); font:inherit; font-size:calc(17px * var(--ui-fs, 1)); }
#search-input::placeholder { color:var(--faint); }
#search-x { color:var(--muted); font-size:calc(15px * var(--ui-fs, 1)); } #search-x:hover { color:var(--text); }
.search-results { flex:1; min-height:0; overflow-y:auto; padding:8px; }
.sr-cat { font-size:calc(11px * var(--ui-fs, 1)); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; padding:12px 10px 6px; }
.sr-row { display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:4px; cursor:pointer; }
.sr-row:hover, .sr-row.sr-active { background:var(--hover); }
.sr-row .av { width:34px; height:34px; flex:none; }
.sr-ic { width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center; font-size:calc(16px * var(--ui-fs, 1)); border-radius:4px; background:var(--bubble2); }
.sr-ic .cc-ico { width:34px; height:34px; }
.sr-main { min-width:0; flex:1; }
.sr-t { font-size:calc(14px * var(--ui-fs, 1)); font-weight:560; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-d { font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-empty { padding:22px; text-align:center; color:var(--faint); font-size:calc(13px * var(--ui-fs, 1)); }
@media (max-width:820px), (max-height:500px) and (pointer:coarse){ .search-box { width:100vw; height:100dvh; border-radius:0; } #search-modal { padding:0; } }
.search-tabs { display:flex; gap:7px; padding:11px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.search-tabs .fbtn { border:1px solid var(--line); border-radius:4px; }
.search-tabs .fbtn.active { background:var(--bubble2); color:var(--text); }

/* themed confirm dialog */
.confirm-scrim { position:fixed; inset:0; z-index:500; background:var(--overlay); display:flex; align-items:center; justify-content:center; }
.confirm-box { background:var(--elev); border:1px solid var(--line); border-radius:4px; padding:20px; max-width:360px; width:90%; box-shadow:0 20px 50px var(--shadow); }
.confirm-msg { font-size:calc(14px * var(--ui-fs, 1)); line-height:1.5; margin-bottom:16px; }
.confirm-btns { display:flex; justify-content:flex-end; gap:9px; }
.confirm-btns .btn { background:var(--bubble2); }

/* Manages grouped by section */
.mg-sec { margin-bottom:10px; }
.mg-h { font-size:calc(10.5px * var(--ui-fs, 1)); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; margin:4px 0 6px; }
.dt-scroll { max-height:200px; overflow-y:auto; border:1px solid var(--line); border-radius:4px; padding:10px; background:var(--input); }
/* collapsible Skills/Memory sections in Details */
.dt-h { cursor:pointer; display:flex; align-items:center; gap:6px; }
.dt-h .dt-caret { color:var(--muted); font-size:calc(11px * var(--ui-fs, 1)); transition:transform .12s; }
.dt-h.dd-collapsed .dt-caret { transform:rotate(-90deg); }
.dt-h .go { margin-left:auto; }
.dt-ddbody.collapsed { display:none; }
/* change log data table */
.cl-tbl { border-collapse:collapse; width:100%; font-size:calc(12.5px * var(--ui-fs, 1)); }
.cl-tbl th, .cl-tbl td { border-bottom:1px solid var(--div); padding:8px 10px; text-align:left; vertical-align:top; }
.cl-tbl thead th { position:sticky; top:0; z-index:1; background:var(--elev); color:var(--muted); font-weight:600; font-size:calc(11px * var(--ui-fs, 1)); text-transform:uppercase; letter-spacing:.3px; }
.cl-tbl tbody tr:hover { background:var(--bubble2); }
.cl-tbl td { overflow-wrap:anywhere; }
.cl-tbl .cl-nowrap { white-space:nowrap; color:var(--muted); }
.dt-scroll .mg-sec:last-child { margin-bottom:0; }
.cd-head { display:flex; align-items:center; gap:11px; }

/* ---- Per-agent task lists + change log (native) ---- */
.sb-bottom-split { gap:6px; }
.sb-bottom-split .connect { flex:1; min-width:0; justify-content:center; }
.sb-bottom-split .connect span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.tk-add { display:flex; gap:7px; margin-bottom:12px; }
.tk-add input { flex:1; background:var(--input); border:1px solid var(--line); border-radius:4px; padding:7px 10px; color:var(--text); font-size:calc(13px * var(--ui-fs, 1)); }
.tk-row { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--div); }
.tk-chk { width:18px; height:18px; flex:none; margin-top:1px; border:1.6px solid var(--muted); border-radius:3px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:calc(12px * var(--ui-fs, 1)); color:var(--green); line-height:1; transition:background .12s,border-color .12s; }
.tk-chk:hover { border-color:var(--green); }
.tk-done .tk-chk { background:var(--green); border-color:var(--green); color:#fff; }
.tk-main { min-width:0; } .tk-t { font-size:calc(13.5px * var(--ui-fs, 1)); } .tk-s { font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--muted); margin-top:2px; }
.tk-verifying { color:var(--accent, #2f7de1); font-weight:600; }
.tk-done .tk-t { text-decoration:line-through; color:var(--muted); }
.tk-overdue { color:var(--err); font-weight:600; }
#sprint-view { position:fixed; inset:0; z-index:300; background:var(--bg); display:none; flex-direction:column;
  padding:calc(10px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom)); }
#sprint-view.on { display:flex; }
body.sv-lock { overflow:hidden; }
.sv-top { display:flex; align-items:flex-start; gap:12px; flex:none; padding:6px 0 12px; }
.sv-prog { flex:1; font-size:calc(12px * var(--ui-fs, 1)); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.sv-bar { height:4px; border-radius:4px; background:var(--line); margin-top:8px; overflow:hidden; }
.sv-bar i { display:block; height:100%; background:var(--green); border-radius:4px; transition:width .3s; }
.sv-x { width:36px; height:36px; border-radius:4px; color:var(--muted); font-size:calc(17px * var(--ui-fs, 1)); flex:none; }
.sv-x:hover { background:var(--hover); color:var(--text); }
.sv-body { flex:1; overflow-y:auto; display:flex; flex-direction:column; -webkit-overflow-scrolling:touch; }
.sv-card { max-width:720px; width:100%; margin:0 auto; padding:20px 18px; }
.sv-card h4 { font-size:calc(21px * var(--ui-fs, 1)); line-height:1.3; margin:4px 0 8px; }
.sv-card .dc-detail { font-size:calc(14.5px * var(--ui-fs, 1)); }
.sv-card .opt { padding:15px 14px; font-size:calc(15.5px * var(--ui-fs, 1)); }
.sv-card .dc-kicker .dc-full, .dc-card .dc-full { float:right; text-transform:none; letter-spacing:0; font-weight:500; color:var(--accent2); cursor:pointer; }
.sv-card.dc-collapsed { opacity:.6; }
.sv-done { margin:auto; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; }
.sv-done-ic { width:56px; height:56px; border-radius:2px; background:var(--okbg); color:var(--green); font-size:calc(28px * var(--ui-fs, 1)); display:flex; align-items:center; justify-content:center; }
.msg-pop .mm-sub { font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--muted); margin-top:2px; }
.msg-pop .mm-sep { height:1px; background:var(--line); margin:6px 8px; }
.msg-pop .mm-h { font-size:calc(11px * var(--ui-fs, 1)); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:4px 14px 2px; }
.tk-tags { display:inline-flex; flex-wrap:wrap; gap:4px; vertical-align:middle; }
.tk-tag { font-size:calc(11px * var(--ui-fs, 1)); line-height:1.5; padding:0 7px; border-radius:3px; border:1px solid var(--line);
  color:var(--muted); cursor:pointer; white-space:nowrap; }
.tk-tag:hover { color:inherit; border-color:currentColor; }
.tk-tag-static, .tk-tag-static:hover { cursor:default; color:var(--muted); border-color:var(--line); }

#changelog-modal { position:fixed; inset:0; z-index:400; background:var(--overlay); display:flex; align-items:flex-start; justify-content:center; padding:7vh 0; }
#changelog-box { width:70vw; height:78vh; max-width:none; background:var(--sidebar); border:1px solid var(--line);
  border-radius:4px; display:flex; flex-direction:column; overflow:hidden; }
.cl-search { flex:none; padding:8px 14px 0; }
.cl-search #cl-q { margin-bottom:8px; }
.changelog-list { flex:1; min-height:0; overflow-y:auto; padding:0 14px 8px; }
.cl-row { padding:11px 4px; border-bottom:1px solid var(--div); }
.cl-s { font-size:calc(13.5px * var(--ui-fs, 1)); } .cl-m { font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--muted); margin-top:3px; }

/* ---- Task priority + snooze ---- */
.tk-row { position:relative; }
.tk-acts { display:flex; gap:2px; opacity:0; align-items:center; }
.tk-row:hover .tk-acts { opacity:1; }
.tk-ic { width:26px; height:24px; border-radius:3px; color:var(--muted); font-size:calc(13px * var(--ui-fs, 1)); display:flex; align-items:center; justify-content:center; }
.tk-ic:hover { background:var(--hover); color:var(--text); }
.tk-snoozed { opacity:.6; }
.tk-priosel { background:var(--input); border:1px solid var(--line); border-radius:4px; color:var(--text); font-size:calc(12.5px * var(--ui-fs, 1)); padding:0 6px; }
.pr-pill { font-size:calc(9.5px * var(--ui-fs, 1)); font-weight:700; letter-spacing:.02em; padding:1px 6px; border-radius:4px; vertical-align:middle; }
.pr-high { color:#ff6b6b; background:rgba(255,107,107,.13); border:1px solid rgba(255,107,107,.4); }
.pr-med  { color:var(--muted); background:var(--bubble2); border:1px solid var(--line); }
.pr-low  { color:var(--faint); background:transparent; border:1px solid var(--line); }

/* ---- Password gate ---- */
#login-overlay { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:var(--bg,#0d0d0f); }
#login-card { width:320px; max-width:86vw; display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:34px 30px; background:var(--sidebar,#15151a); border:1px solid var(--line,#26262e); border-radius:4px;
  box-shadow:0 18px 60px rgba(0,0,0,.5); }
#login-card .login-logo { opacity:.95; }
#login-card h2 { margin:2px 0 0; font:400 calc(20px * var(--ui-fs, 1))/1.3 "Silkscreen",ui-monospace,monospace;
  letter-spacing:.02em; color:var(--text,#ececf1); }
#login-card .login-logo img { image-rendering:pixelated; }
#login-card .login-sub { margin:0 0 6px; font-size:calc(13px * var(--ui-fs, 1)); color:var(--muted,#8a8a93); }
#login-pass, #login-name { width:100%; box-sizing:border-box; padding:11px 13px; border-radius:4px; font-size:calc(14px * var(--ui-fs, 1));
  background:var(--input,#1d1d24); border:1px solid var(--line,#2a2a33); color:var(--text,#ececf1); outline:none; }
#login-pass:focus, #login-name:focus { border-color:var(--teal,#2dd4bf); box-shadow:0 0 0 3px rgba(45,212,191,.18); }
#login-btn { width:100%; padding:11px; font-size:calc(14px * var(--ui-fs, 1)); font-weight:600; border-radius:4px; cursor:pointer; }
.login-err { width:100%; text-align:center; font-size:calc(12.5px * var(--ui-fs, 1)); color:#ff6b6b; }
#login-sb { width:100%; display:flex; flex-direction:column; gap:10px; }
#login-sb input { width:100%; box-sizing:border-box; padding:11px 13px; border-radius:4px; font-size:calc(14px * var(--ui-fs, 1));
  background:var(--input,#1d1d24); border:1px solid var(--line,#2a2a33); color:var(--text,#ececf1); outline:none; }
#login-sb input:focus { border-color:var(--teal,#2dd4bf); box-shadow:0 0 0 3px rgba(45,212,191,.18); }
#login-sb .btn { width:100%; padding:11px; font-size:calc(14px * var(--ui-fs, 1)); font-weight:600; border-radius:4px; cursor:pointer; }
#login-gg { width:100%; display:flex; flex-direction:column; gap:10px; }
#login-gg .login-google { display:flex; align-items:center; justify-content:center; gap:9px; }
#login-gg .login-google svg { flex:none; }
.login-or { display:flex; align-items:center; gap:10px; margin:6px 0 2px; color:var(--muted,#8a8a93);
  font-size:calc(12px * var(--ui-fs, 1)); }
.login-or::before, .login-or::after { content:""; flex:1; border-top:1px solid var(--line,#2a2a33); }
.login-sb-msg { text-align:center; font-size:calc(12.5px * var(--ui-fs, 1)); color:var(--muted,#8a8a93); }
.login-sb-msg.bad { color:#ff6b6b; }
/* hosted sign-in on: Google + email/username only, no owner password box */
#login-pw { display:contents; }
#login-card.hosted #login-pw, #login-card.hosted #login-gg > .login-or { display:none; }
#login-out { width:100%; padding:11px; font-size:calc(14px * var(--ui-fs, 1)); font-weight:600; border-radius:4px; cursor:pointer; }

/* decision-sprint custom-instruction row (last option) */
.dc-customrow { display:flex; gap:8px; align-items:center; margin-top:10px; }
.dc-customrow .dc-custom { margin-top:0; flex:1; min-width:0; }
.dc-customrow .btn { flex:none; }

/* routing hand-off pill (delegate event) */
.delegate-pill-wrap { display:flex; justify-content:center; margin:10px 0; }
.delegate-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 13px; border-radius:3px;
  background:var(--okbg); color:var(--green); border:1px solid rgba(0,187,85,.35);
  font-size:calc(12px * var(--ui-fs, 1)); font-weight:600; letter-spacing:.01em; }
.delegate-pill .dp-arrow { opacity:.7; font-weight:400; }

/* decision-sprint card — richer context */
.dc-card .dc-kicker { font-size:calc(10.5px * var(--ui-fs, 1)); text-transform:uppercase; letter-spacing:.07em; color:var(--green); font-weight:700; margin-bottom:3px; }
.dc-card .dc-meta { color:var(--muted); font-size:calc(12px * var(--ui-fs, 1)); margin-bottom:8px; }
.dc-card .dc-owner { color:var(--green); cursor:pointer; text-decoration:none; }
.dc-card .dc-owner:hover { text-decoration:underline; }
.dc-card .dc-chosen { margin-top:10px; font-size:calc(13px * var(--ui-fs, 1)); font-weight:600; color:var(--green); }
.dc-card .dc-chosen.err { color:var(--err); }
.dc-card .dc-detail { font-size:calc(13px * var(--ui-fs, 1)); color:var(--text); background:var(--bubble2); border-radius:4px; padding:9px 11px; margin:6px 0 10px; line-height:1.45; }
.dc-card .dc-link { display:inline-block; font-size:calc(12.5px * var(--ui-fs, 1)); color:var(--accent2); margin:0 0 10px; }
.dc-card .dc-help { font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); margin:4px 0 6px; }
.dc-card .opt-txt { display:flex; flex-direction:column; gap:1px; }
.dc-card .opt-sub { font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--muted); }

/* ========================= Mobile / touch polish ========================= */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
* { -webkit-tap-highlight-color:transparent; }
#feed, #rows, .dt-body, .modal-box, .search-results, .cd-tlist { -webkit-overflow-scrolling:touch; }
/* stop the browser's own pull-to-refresh/overscroll so ours + the layout stay put */
body, #feed { overscroll-behavior:contain; }

@media (max-width:820px), (max-height:500px) and (pointer:coarse){
  /* safe-area insets for notch / home indicator */
  .sb-top { padding-top:calc(12px + env(safe-area-inset-top)); }
  /* keep a real gap above Android's nav bar / iOS home indicator — env() alone is 0 when
     the browser reports no inset, which left the composer flush against the system bar */
  .composer { padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
  .sb-bottom { padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  .m-back { top:calc(12px + env(safe-area-inset-top)) !important; }
  #detail { padding-top:env(safe-area-inset-top); }

  /* messages: let the browser scroll vertically; we own horizontal (swipe-to-reply) */
  .msg, #feed .card { touch-action:pan-y pinch-zoom; position:relative; transition:transform .22s cubic-bezier(.3,0,.2,1); }
  .msg.swiping, #feed .card.swiping { transition:none; }
  /* reply affordance revealed as you swipe a bubble right */
  .msg .swipe-reply, #feed .card .swipe-reply { position:absolute; left:-42px; top:50%; transform:translateY(-50%) scale(.6);
    width:30px; height:30px; border-radius:2px; background:var(--okbg); color:var(--green);
    display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s, transform .15s; font-size:calc(15px * var(--ui-fs, 1)); }
  .msg.swipe-armed .swipe-reply, #feed .card.swipe-armed .swipe-reply { opacity:1; transform:translateY(-50%) scale(1); }
  /* thread affordance revealed as you swipe a message left */
  .msg .swipe-thread { position:absolute; right:-42px; top:50%; transform:translateY(-50%) scale(.6);
    width:30px; height:30px; border-radius:2px; background:var(--card2); color:var(--accent);
    display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s, transform .15s; }
  .msg .swipe-thread svg { width:18px; height:18px; }
  .msg.swipe-left .swipe-reply { display:none; }
  .msg:not(.swipe-left) .swipe-thread { display:none; }
  .msg.swipe-left.swipe-armed .swipe-thread { opacity:1; transform:translateY(-50%) scale(1); }
  /* bigger tap targets on touch */
  .msg-actions .ma { width:36px; height:32px; }   /* icon shrinks, the tap target doesn't */
}

/* pull-to-refresh spinner */
#ptr { position:absolute; left:50%; top:8px; transform:translateX(-50%) translateY(-44px); z-index:30;
  width:30px; height:30px; border-radius:2px; background:var(--elev); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted); box-shadow:0 2px 10px var(--shadow);
  transition:transform .18s ease, opacity .18s; opacity:0; pointer-events:none; }
#ptr.show { opacity:1; }
#ptr svg { width:17px; height:17px; }
#ptr.spin svg { animation:ptrspin .7s linear infinite; }
@keyframes ptrspin { to { transform:rotate(360deg); } }
@media (max-width:820px), (max-height:500px) and (pointer:coarse){ .msg { -webkit-touch-callout:none; } }

/* collapsed (answered) decision card — compact one-liner */
.card.dc-collapsed { padding:11px 14px; opacity:.9; }
.dc-c-row { display:flex; align-items:center; gap:11px; }
.dc-c-ic { width:24px; height:24px; border-radius:2px; flex:none; display:flex; align-items:center; justify-content:center; font-size:calc(13px * var(--ui-fs, 1)); font-weight:700; }
.dc-c-ic.ok { background:var(--okbg); color:var(--green); }
.dc-c-ic.err { background:rgba(255,107,107,.15); color:#ff6b6b; }
.dc-c-ic.warn { background:color-mix(in srgb, var(--warn) 15%, transparent); color:var(--warn); font-size:calc(12px * var(--ui-fs, 1)); }
.stall-card[data-aid] { cursor:pointer; }
.stall-go { flex:none; font-size:calc(12px * var(--ui-fs, 1)); color:var(--accent2); white-space:nowrap; }
.stall-card[data-aid]:hover .stall-go { text-decoration:underline; }
.dc-c-main { min-width:0; flex:1; }
.dc-c-t { font-size:calc(13.5px * var(--ui-fs, 1)); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-c-a { font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); margin-top:1px; }


/* voice-to-text mic button */


/* clickable agent names in an a2a message footer */
.foot-agent { color:var(--accent2); cursor:pointer; }
.foot-agent:hover { text-decoration:underline; }

/* inline editable email/draft approval card (grokbot-style) */
.eml { display:flex; flex-direction:column; gap:7px; margin:6px 0 12px; }
.eml-row { display:flex; align-items:flex-start; gap:9px; }
.eml-l { flex:none; width:54px; padding-top:9px; font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--muted); text-align:right; }
.eml-f { flex:1; min-width:0; box-sizing:border-box; padding:8px 11px; border-radius:4px; background:var(--input); border:1px solid var(--line); color:var(--text); font:inherit; font-size:calc(13.5px * var(--ui-fs, 1)); outline:none; }
.eml-f:focus { border-color:var(--teal,#2dd4bf); }
.eml-bodyrow .eml-l { padding-top:9px; }
textarea.eml-body { resize:vertical; min-height:120px; line-height:1.5; white-space:pre-wrap; }

/* reply quote header inside a sent bubble (click → jump to original) */
.reply-quote { display:flex; flex-direction:column; gap:1px; padding:5px 9px; margin-bottom:6px; border-left:3px solid var(--accent2); border-radius:3px; background:var(--bubble2); cursor:pointer; }
.reply-quote:hover { background:var(--hover); }
.reply-quote .rq-who { font-size:calc(11px * var(--ui-fs, 1)); font-weight:600; color:var(--accent2); }
.reply-quote .rq-t { font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px; }
/* Global search scope switch: Everywhere | In: <agent> */
.search-scope { display:flex; gap:6px; padding:0 18px 10px; }
.search-scope .sc-btn { font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); background:none; border:1px solid var(--line); border-radius:3px; padding:4px 11px; cursor:pointer; max-width:60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-scope .sc-btn.active { background:var(--bubble2); color:var(--text); border-color:var(--accent2, var(--line)); }
.card .btns .dc-close { color:var(--muted); margin-left:auto; }
/* Apps: custom connector form + per-agent toggles */
.cx-form { display:flex; flex-direction:column; gap:10px; margin:10px 0 14px; }
.cx-form .set-select { max-width:none; width:100%; }
.cx-form .cx-lbl { width:100%; }
.cx-form.hidden, #cx-token.hidden { display:none; }
.cx-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cc-acts { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.app-grp { font-size:calc(11px * var(--ui-fs, 1)); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin:10px 0 4px; }
.app-tog { display:flex; align-items:center; gap:8px; padding:6px 2px; cursor:pointer; }
.app-tog.locked { opacity:.45; cursor:not-allowed; }
.app-tog .app-ic { width:20px; height:20px; display:inline-flex; }
.app-tog .app-nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-tog input { position:absolute; opacity:0; width:0; height:0; }
.app-tog .sw { width:32px; height:18px; border-radius:3px; background:var(--line); position:relative; flex:none; transition:background .15s; }
.app-tog .sw::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:2px; background:#fff; transition:transform .15s; }
.app-tog input:checked + .sw { background:var(--green, #3fb27f); }
.app-tog input:checked + .sw::after { transform:translateX(14px); }

/* Apps: one card per app, its accounts as rows inside */
.app-card .cc-toggle { cursor:pointer; }
.app-card .cc-chev { color:var(--faint); font-size:calc(12px * var(--ui-fs, 1)); width:12px; text-align:center; flex:none; }
.conn-grid { align-items:start; }        /* an open card grows alone; its neighbour keeps its height */
.acct-list { margin-top:12px; border-top:1px solid var(--line); padding-top:6px; }
.acct-row { display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px dashed var(--div); }
.acct-row .acc-meta { flex:1; min-width:0; }
.acct-row .acc-n { font-weight:600; font-size:calc(13.5px * var(--ui-fs, 1)); padding:0; background:none; border:0; color:inherit; text-align:left; cursor:pointer; }
.acct-row .acc-st { line-height:1.45; }
.acc-bizchips { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:5px 0 4px; padding:0; background:none; border:0; cursor:pointer; text-align:left; }
.biz-chip { font-size:calc(12px * var(--ui-fs, 1)); line-height:1; padding:5px 8px; border-radius:3px; background:var(--hover); border:1px solid var(--line); color:var(--text); white-space:nowrap; }
.biz-edit { font-size:calc(12px * var(--ui-fs, 1)); color:var(--accent2); padding:0 2px; }
.acct-row .cc-btn.sm { padding:5px 12px; font-size:calc(12.5px * var(--ui-fs, 1)); }
.acct-add { margin-top:8px; font-size:calc(12.5px * var(--ui-fs, 1)); color:var(--accent2); background:none; border:none; cursor:pointer; padding:2px; }
.conn-cat-h.conn-top { margin-bottom:4px; }
.conn-card { min-width:0; }
@media (max-width:760px){
  .conn-card { padding:12px; }
  .acct-row { flex-wrap:wrap; }
  .acct-row .cc-acts { margin-left:auto; }
  .acct-row .acc-meta { flex-basis:calc(100% - 24px); }   /* name, chips, status get the full width; buttons wrap below */
}

/* in-app dialog (uiDialog) — sits above the Settings modal */
.ui-dlg { position:fixed; inset:0; z-index:520; background:var(--overlay); display:flex; align-items:center; justify-content:center; padding:16px; }
.ui-dlg-box { width:min(440px,100%); background:var(--sidebar); border:1px solid var(--line); border-radius:4px;
  padding:20px 22px; box-shadow:0 20px 50px var(--shadow); display:flex; flex-direction:column; gap:14px;
  max-height:100%; overflow-y:auto; overscroll-behavior:contain; }   /* a long form scrolls on a phone */
.ui-dlg-box > * { flex-shrink:0; }
.ui-dlg-t { font-size:calc(16px * var(--ui-fs, 1)); font-weight:650; }
.ui-dlg-x { font-size:calc(13px * var(--ui-fs, 1)); color:var(--muted); line-height:1.5; }
.ui-dlg-x code { display:block; margin-top:6px; padding:7px 10px; border-radius:4px; background:var(--input); border:1px solid var(--line);
  color:var(--text); font-size:calc(12px * var(--ui-fs, 1)); word-break:break-all; user-select:all; }
.ui-dlg-f { display:flex; flex-direction:column; gap:6px; font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); }
.ui-dlg-f input, .ui-dlg-f select { width:100%; padding:10px 12px; border-radius:4px; background:var(--input); border:1px solid var(--line);
  color:var(--text); font-size:calc(14px * var(--ui-fs, 1)); outline:none; }
.ui-dlg-f input:focus, .ui-dlg-f select:focus { border-color:var(--accent2); }
.ui-dlg-f em { font-style:normal; color:var(--faint); font-size:calc(11.5px * var(--ui-fs, 1)); }
.ui-dlg-b { display:flex; justify-content:flex-end; gap:8px; margin-top:2px; }
.eff-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:8px; }
@media (max-width:760px){ .eff-grid { grid-template-columns:minmax(0,1fr); } }
.eff-f { display:flex; flex-direction:column; gap:6px; font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); }
.eff-f select { padding:9px 11px; border-radius:4px; background:var(--input); border:1px solid var(--line); color:var(--text); font-size:calc(13.5px * var(--ui-fs, 1)); }
.eff-auto { grid-column:1 / -1; }
/* Settings › Accounts */
.acc-note { margin:0 2px 12px; }
.conn-grid + .acc-note { margin:16px 2px 0; color:var(--muted); font-size:calc(12.5px * var(--ui-fs, 1)); line-height:1.5; }
.acc-card.active { border-color:var(--green); }
.acc-eff { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.acc-eff .eff-f { gap:5px; }
.acc-eff .eff-f select { padding:7px 9px; font-size:calc(13px * var(--ui-fs, 1)); }
@media (max-width:520px){ .acc-eff { grid-template-columns:minmax(0,1fr); } }
.acc-av { width:30px; height:30px; border-radius:2px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--iconbtn); color:var(--text); font-weight:700; font-size:calc(13px * var(--ui-fs, 1)); }
.acc-pill { font-size:calc(10px * var(--ui-fs, 1)); padding:1px 7px; border-radius:4px; background:var(--okbg); color:var(--green); margin-left:6px; }
.acc-ok { color:var(--green); } .acc-warn { color:var(--warn); } .acc-bad { color:var(--err); }
.acc-steps { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; font-size:calc(13px * var(--ui-fs, 1)); color:var(--muted); line-height:1.5; }
.acc-steps a.btn { display:inline-block; text-decoration:none; }

/* Change log on phones: full screen like Settings, entries as cards (no sideways table) */
@media (max-width:820px), (max-height:500px) and (pointer:coarse){
  #changelog-modal { padding:0; align-items:stretch; }
  #changelog-box { width:100vw; max-width:none; height:100dvh; max-height:none; border-radius:0;
    padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
  .cl-tbl, .cl-tbl tbody { display:block; width:100%; }
  .cl-tbl thead { display:none; }
  .cl-tbl tr { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:3px 8px;
    padding:12px 4px; border-bottom:1px solid var(--div); }
  .cl-tbl td { border:none; padding:0; min-width:0; }
  .cl-tbl td:nth-child(1) { font-weight:600; font-size:calc(13px * var(--ui-fs, 1)); }
  .cl-tbl td:nth-child(2) { grid-column:1 / -1; grid-row:2; font-size:calc(13.5px * var(--ui-fs, 1)); line-height:1.45; overflow-wrap:anywhere; }
  .cl-tbl td:nth-child(3), .cl-tbl td:nth-child(4) { font-size:calc(11.5px * var(--ui-fs, 1)); align-self:center; }
}

/* ---- connection state · failed sends · time chips ---- */
.conn-banner { position:fixed; top:calc(10px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:650;
  font-size:calc(12px * var(--ui-fs, 1)); padding:5px 12px; border-radius:4px; background:var(--elev); border:1px solid var(--warnbd);
  color:var(--warn); box-shadow:0 4px 14px var(--shadow); cursor:pointer; }
.daydiv.timediv { margin:2px 0; font-size:calc(10.5px * var(--ui-fs, 1)); }
.msg.me.failed { opacity:.85; border:1px solid var(--err); }
.msg-fail { display:flex; align-items:center; gap:10px; margin-top:6px; font-size:calc(12px * var(--ui-fs, 1)); color:var(--err); }
.msg-fail .msg-retry { padding:3px 10px; border-radius:4px; background:var(--redbg); color:var(--err); font-weight:600; font-size:calc(12px * var(--ui-fs, 1)); }

/* ---- Needs-you inbox ---- */
.ny-btn { position:relative; }
.ny-badge { position:absolute; top:-6px; right:-8px; min-width:16px; height:16px; padding:0 4px; border-radius:4px;
  background:var(--err); color:#fff; font-size:calc(10px * var(--ui-fs, 1)); font-weight:700; line-height:16px; text-align:center; }
.m-back[data-count]::after { content:attr(data-count); position:absolute; top:-4px; right:-6px; min-width:15px; height:15px;
  padding:0 3px; border-radius:4px; background:var(--warn); color:var(--onwarn); font-size:calc(9.5px * var(--ui-fs, 1)); font-weight:700; line-height:15px; text-align:center; }
.ny-from { font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--muted); margin:10px 2px 6px; line-height:1.3; }
.ny-from:empty { display:none; }
.ny-from a { color:var(--accent2); cursor:pointer; }
.ny-detail { font-size:calc(13px * var(--ui-fs, 1)); color:var(--muted); margin-bottom:10px; }
.ny-detail ol, .ny-detail ul { margin:6px 0; padding-left:22px; }
.ny-detail li { margin:4px 0; color:var(--text); line-height:1.45; }

/* ---- Settings › Usage ---- */
.us-top { display:flex; align-items:center; gap:12px; margin:4px 0 10px; }
.us-top .conn-h-act { margin-left:auto; color:var(--accent2); font-size:calc(12.5px * var(--ui-fs, 1)); }
.us-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:6px 0 18px; }
.us-kpi { background:var(--card2); border:1px solid var(--line); border-radius:4px; padding:10px 12px; }
.us-v { font-size:calc(19px * var(--ui-fs, 1)); font-weight:650; font-variant-numeric:tabular-nums; }
.us-l { font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--muted); }
.us-more { text-transform:none; letter-spacing:0; font-weight:500; color:var(--faint); margin-left:6px; }
.us-tbl-wrap { overflow-x:auto; }
.us-tbl { width:100%; border-collapse:collapse; font-size:calc(13px * var(--ui-fs, 1)); font-variant-numeric:tabular-nums; }
.us-tbl th { font-size:calc(11px * var(--ui-fs, 1)); font-weight:600; color:var(--muted); text-align:right; padding:4px 8px; border-bottom:1px solid var(--line); }
.us-tbl td { text-align:right; padding:6px 8px; border-bottom:1px solid var(--div); white-space:nowrap; }
.us-tbl th:first-child, .us-tbl td.us-k { text-align:left; }
.us-tbl td.us-k { white-space:normal; overflow-wrap:anywhere; min-width:120px; }
.us-sub { display:block; font-size:calc(11px * var(--ui-fs, 1)); color:var(--faint); }
.us-run { display:flex; flex-direction:column; gap:6px; }
.us-run-row { display:flex; align-items:center; gap:10px; background:var(--card2); border:1px solid var(--line); border-radius:4px; padding:9px 12px; }
.us-run-main { flex:1; min-width:0; }
.us-run-a { font-weight:600; font-size:calc(13.5px * var(--ui-fs, 1)); }
.us-run-t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.us-el { flex:none; font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); font-variant-numeric:tabular-nums; }
.us-run-row .btn.sm { padding:5px 12px; font-size:calc(12.5px * var(--ui-fs, 1)); flex:none; }
.us-pause { display:flex; align-items:center; gap:14px; margin-top:12px; background:var(--card2); border:1px solid var(--line);
  border-radius:4px; padding:11px 14px; cursor:pointer; }
.us-pause > div:first-child { flex:1; }
.us-pause .sw { cursor:pointer; }
.us-msg { white-space:normal !important; color:var(--faint); }
.us-alert { margin:0 2px 10px; }
@media (max-width:760px){
  .us-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .us-tbl th:nth-child(5), .us-tbl td:nth-child(5) { display:none; }   /* drop Output on phones */
}

/* phone: header icon buttons + close buttons get a ≥40px tap target */
@media (max-width:820px), (max-height:500px) and (pointer:coarse){ #sidebar .icon, #changelog-x { min-width:40px; min-height:40px; } }

/* Settings › Businesses */
.biz-intro { margin:2px 0 12px; line-height:1.5; max-width:640px; }
.biz-list { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.biz-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:4px; }
.biz-dot { width:10px; height:10px; border-radius:2px; flex:none; }
.biz-meta { flex:1; min-width:0; }
.biz-n { font-weight:600; }
.biz-code { font-size:calc(11px * var(--ui-fs, 1)); font-weight:500; color:var(--muted); border:1px solid var(--line); border-radius:3px; padding:1px 6px; margin-left:6px; }
.biz-acts { display:flex; align-items:center; gap:10px; }
.biz-add .set-select { flex:1; min-width:140px; }
.biz-add .biz-code-in { flex:0 0 140px; min-width:0; }
/* Apps › which businesses an account serves */
.acc-biz { font-size:inherit; color:var(--accent2); padding:0; }
.cx-checks, .ui-dlg-checks { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.cx-checks label, .ui-dlg-checks label { white-space:normal; min-width:0; overflow-wrap:anywhere; display:flex; align-items:center; gap:6px; color:var(--text); font-size:calc(13px * var(--ui-fs, 1)); cursor:pointer; }
.ui-dlg-f .ui-dlg-checks input { width:auto; padding:0; }

.tc-filters { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.tc-filters .conn-search { margin-bottom:0; flex:1; min-width:0; }
.tc-filters .cs, .tc-filters select { flex:none; max-width:45%; }
.tc-list { list-style:none; margin:0; padding:0; }
.tc-row { width:100%; text-align:left; display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:2px 10px; align-items:baseline;
  padding:8px 6px; border-bottom:1px solid var(--div); font-size:calc(13px * var(--ui-fs, 1)); border-radius:0; }
.tc-row:hover { background:var(--hover); }
.tc-when { color:var(--muted); font-size:calc(12px * var(--ui-fs, 1)); white-space:nowrap; font-variant-numeric:tabular-nums; }
.tc-agent { color:var(--muted); white-space:nowrap; }
.tc-tool { font-weight:560; overflow-wrap:anywhere; }
.tc-w { display:inline-block; margin-left:6px; font-size:calc(10.5px * var(--ui-fs, 1)); font-weight:600; padding:0 6px; border-radius:4px; vertical-align:1px;
  color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, transparent); border:1px solid var(--warnbd); }
.tc-args { grid-column:1 / -1; font:calc(12px * var(--ui-fs, 1))/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-row.open .tc-args { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); }
@media (max-width:820px), (max-height:500px) and (pointer:coarse){ .tc-row { grid-template-columns:auto minmax(0,1fr); } .tc-tool { grid-column:1 / -1; }
  .tc-row { min-height:44px; } }
/* "## Routed to X" relays → a small label above the answer */
.routed-chip { display:inline-block; font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); border:1px solid var(--line);
  border-radius:3px; padding:2px 10px; margin:0 0 8px; }
/* > quoted copy: template / draft text with copy + character count */
.md-quote { margin:8px 0; padding:10px 12px; border-left:3px solid var(--accent2); background:var(--input);
  border-radius:4px; }
.md-quote .mq-text { white-space:pre-wrap; }
.md-quote .mq-foot { display:flex; justify-content:space-between; align-items:center; margin-top:8px;
  font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--faint); }
.md-quote .mq-copy { font-size:calc(12px * var(--ui-fs, 1)); color:var(--accent2); }

/* Refresh button inside the chat-head pill */
.chat-head .ch-refresh { display:flex; align-items:center; justify-content:center; width:28px; height:28px;
  margin:-4px -8px -4px 2px; border-radius:2px; color:var(--muted); background:none; border:0; cursor:pointer; }
.chat-head .ch-refresh:hover { color:var(--text); background:var(--hover); }
.chat-head .ch-refresh.spin svg { animation:ch-spin .8s linear infinite; }
@keyframes ch-spin { to { transform:rotate(360deg); } }

/* a message sent mid-reply: read in one follow-up turn afterwards */
.msg.me .msg-queued { margin-top:6px; font-size:calc(11.5px * var(--ui-fs, 1)); color:var(--muted); }

/* phone tap targets ≥40px: compact controls get an invisible hit area (pseudo-element);
   tabs/buttons in scrollers or cards grow for real (a pseudo would be clipped there) */
@media (max-width:820px), (max-height:500px) and (pointer:coarse){
  .ca-rm, .fc-x, .rb-x, .sw, .go { position:relative; }
  .ca-rm::before, .fc-x::before, .rb-x::before, .pt-x::before, .sw::before, .go::before {
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:max(100%,44px); height:max(100%,44px); }
  .gtabs button, .card .btns .btn, .card .btns .go, .app-tog { min-height:40px; }
  /* card actions wrap into rows of one-line buttons — they ran off the right edge
     (Reject unreachable) with each label squeezed to three lines */
  .card .btns .btn { flex:1 1 calc(50% - 9px); min-width:0; white-space:nowrap; padding-left:10px; padding-right:10px; }
}

.dev-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* ---------- Phone pass (portrait + landscape): readable, tappable, nothing under the bars ---------- */
@media (max-width:820px), (max-height:500px) and (pointer:coarse) {
  /* iOS zooms the page when a focused field is under 16px */
  input, select, textarea, .set-select, .composer textarea,
  .modal-box input, .modal-box textarea, .modal-box select, .sec-val { font-size:calc(16px * var(--ui-fs, 1)); }
  /* messages scroll under a soft fade, not straight under the floating pills */
  #chat::before { content:""; position:absolute; left:0; right:0; top:0; z-index:4; pointer-events:none;
    height:calc(64px + env(safe-area-inset-top)); background:linear-gradient(var(--bg) 55%, transparent); }
  /* composer: full width inside its margins; cap its height so the chat stays visible */
  .composer form { width:auto; }
  .composer textarea { max-height:30vh; }
  .composer textarea::placeholder { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* tap targets ≥ 40px */
  .composer .ic { width:42px; height:42px; }
  .chat-head .ch-refresh { width:36px; height:36px; }
  .pt-x, .rb-x, .reply-x { min-width:32px; min-height:32px; }
  #dt-expand, .dt-head .pencil { min-width:40px; min-height:40px; }
  .tk-chk { width:24px; height:24px; }
  .go { display:inline-flex; align-items:center; min-height:36px; }
  .gtabs { display:none; }   /* phone: no section tabs, more room for the content */
  .sw { width:46px; height:28px; }
  /* bubbles use the width a phone has */
  .msg { max-width:96%; }
  .set-select { max-width:none; }
  /* hover-only controls are always visible on touch */
  .sec-x, .sec-del { opacity:1 !important; }
  /* account cards: the action wraps under the header instead of truncating it */
  .conn-card .cc-head { flex-wrap:wrap; }
  /* details drawer: compact header so the tabs show without scrolling */
  .dt-head .av { width:56px; height:56px; }
  .dt-head { padding-bottom:6px; }
  /* small text */
  .model-badge, .prio, .sec-ct { font-size:calc(11px * var(--ui-fs, 1)); }
  .tk-acts { opacity:1; }
  /* long-press menus on rows: no iOS callout / text selection */
  .row-agent, .pin-cell, .tk-row { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
}

/* agent→agent messages in the sender's chat: one collapsed row per run */
.a2a-group { align-self:flex-start; max-width:720px; width:100%; border:1px solid var(--line); border-radius:4px;
  background:transparent; font-size:calc(13px * var(--ui-fs, 1)); }
.a2a-group > summary { cursor:pointer; padding:8px 12px; color:var(--muted); list-style:none; }
.a2a-group > summary::-webkit-details-marker { display:none; }
.a2a-group > summary::before { content:"▸ "; color:var(--faint); }
.a2a-group[open] > summary::before { content:"▾ "; }
.a2a-items { padding:0 12px 10px; display:flex; flex-direction:column; gap:10px; }
.a2a-item { border-top:1px solid var(--div); padding-top:8px; }
.a2a-to { font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); margin-bottom:4px; }

/* Needs-you task cards: every action on the card */
.ny-reply { margin-top:12px; }
.ny-reply textarea { width:100%; background:var(--input); border:1px solid var(--line); border-radius:4px;
  color:var(--text); font:inherit; padding:9px 11px; resize:vertical; }
.ny-reply.hidden { display:none; }

/* long replies fold to a readable height */
.msg-body.clamped { max-height:26em; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 80%, transparent); mask-image:linear-gradient(#000 80%, transparent); }
.msg-more { margin-top:6px; color:var(--accent); font-weight:600; font-size:13px; padding:4px 10px; }
.msg-more:hover, .msg-more:focus-visible { color:var(--green2); }


/* Needs-you: filter tasks by business; "asked" note under a card */
.ny-asked { margin-top:10px; }
.ny-asked a { color:var(--accent2); cursor:pointer; }

/* Needs-you: cards saved for later (collapsed by default) */

/* Needs-you: email drafts collapse to one row until opened */
.card.eml-closed .eml, .card.eml-closed > .btns { display:none; }
.eml-sum { display:flex; align-items:center; gap:10px; margin:6px 0 2px; cursor:pointer; }
.eml-sum-t { flex:1; min-width:0; font-size:calc(13px * var(--ui-fs, 1)); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eml-tog { flex:none; white-space:nowrap; }
.card:not(.eml-closed) .eml-sum-t { display:none; }
/* email draft: the original Gmail thread it answers, opened on demand */
.card.eml-closed .eml-thr { display:none; }
.eml-thr { margin:8px 0 4px; }
.eml-thr-body { margin-top:6px; max-height:420px; overflow:auto; border:1px solid var(--line); border-radius:4px; }
.eml-thr-body.hidden { display:none; }
.eml-thr-note { padding:10px 12px; color:var(--muted); font-size:13px; }
.eml-msg { padding:10px 12px; border-bottom:1px solid var(--line); }
.eml-msg:last-of-type { border-bottom:0; }
.eml-msg-h { display:flex; gap:10px; justify-content:space-between; font-size:13px; }
.eml-msg-h span { color:var(--muted); white-space:nowrap; }
.eml-msg-to { color:var(--muted); font-size:12px; margin-top:2px; overflow-wrap:anywhere; }
.eml-msg-b { margin-top:6px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.45; }
.eml-thr-link { display:block; padding:8px 12px; border-top:1px solid var(--line); color:var(--accent2); font-size:13px; }

/* Settings › Accounts: GitHub read-only tokens */
.gh-ro-have { margin:4px 2px 10px; display:flex; flex-wrap:wrap; gap:6px; }
.gh-ro-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto; gap:8px; }
.gh-ro-row input { padding:9px 11px; border-radius:4px; background:var(--input); border:1px solid var(--line); color:var(--text); }
@media (max-width:620px){ .gh-ro-row { grid-template-columns:minmax(0,1fr); } }

/* master pause */
#swarm-pause-btn .sp-play { display:none; }
body.swarm-paused #swarm-pause-btn { color:var(--warn); opacity:1; }
body.swarm-paused #swarm-pause-btn .sp-pause { display:none; }
body.swarm-paused #swarm-pause-btn .sp-play { display:inline; }
.pause-banner { display:flex; align-items:center; gap:10px; margin:0 0 8px; padding:8px 12px; border-radius:4px;
  background:var(--elev); border:1px solid var(--warnbd); color:var(--warn); font-size:calc(13px * var(--ui-fs, 1)); }
.pause-banner.hidden { display:none; }
.pause-banner span { flex:1; }
.pause-banner button { border:0; border-radius:4px; padding:5px 12px; background:var(--warn); color:var(--onwarn); font-weight:600; cursor:pointer; }
body.routines-paused #swarm-pause-btn { color:var(--warn); opacity:1; }
.spend-chip { border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:3px;
  padding:2px 8px; font-size:calc(11.5px * var(--ui-fs, 1)); font-variant-numeric:tabular-nums; cursor:pointer; }
.spend-chip:hover { color:var(--text); background:var(--hover); }
.spend-chip.warn { color:var(--warn); border-color:var(--warnbd); }
.spend-chip.hidden, #sidebar.collapsed .spend-chip { display:none; }
.pause-menu { position:fixed; z-index:1000; width:290px; max-width:calc(100vw - 16px); padding:6px; border-radius:4px;
  background:var(--elev); border:1px solid var(--line); box-shadow:0 10px 30px var(--shadow); }
.pause-menu .pm-spend { padding:6px 10px 8px; font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); border-bottom:1px solid var(--line); margin-bottom:4px; }
.pause-menu .pm-mode { display:block; width:100%; text-align:left; border:0; background:transparent; color:var(--text);
  padding:8px 10px; border-radius:4px; cursor:pointer; }
.pause-menu .pm-mode:hover { background:var(--hover); }
.pause-menu .pm-mode.on { background:var(--sel); }
.pause-menu .pm-mode b { display:block; font-size:calc(13px * var(--ui-fs, 1)); font-weight:600; }
.pause-menu .pm-mode span { display:block; font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); }
.pause-menu .pm-for { padding:8px 10px 4px; font-size:calc(12px * var(--ui-fs, 1)); color:var(--muted); border-top:1px solid var(--line); margin-top:4px; }
.pause-menu .pm-for .sb-filters { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.pause-menu .pm-note { padding:4px 10px 6px; font-size:calc(12px * var(--ui-fs, 1)); color:var(--warn); }
.ua-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.ua-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:4px; }
.ua-row .ua-main { flex:1; min-width:0; font-size:calc(13px * var(--ui-fs, 1)); }
.ua-row.done { opacity:.55; }

/* decision card: files attached to the typed answer */
.dc-att { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:6px; }
.dc-att .dc-clip { font-size:calc(12.5px * var(--ui-fs, 1)); }
.dc-files { display:flex; flex-wrap:wrap; gap:6px; }
.dc-file { display:inline-flex; align-items:center; gap:6px; max-width:240px; font-size:calc(12px * var(--ui-fs, 1)); padding:3px 6px 3px 9px;
  border:1px solid var(--line); border-radius:3px; background:var(--input); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-file.up { opacity:.6; }
.dc-file button { background:none; border:none; color:var(--faint); cursor:pointer; font-size:calc(11px * var(--ui-fs, 1)); padding:0; }
.dc-file button:hover { color:var(--err); }

/* secret card: multi-line paste (.env, JSON, PEM) kept intact, still masked on screen */
.sec-val { width:100%; resize:vertical; font-family:ui-monospace, Menlo, monospace; font-size:calc(12.5px * var(--ui-fs, 1));
  background:var(--input); color:var(--text); border:1px solid var(--line); border-radius:4px; padding:10px 12px; outline:none;
  -webkit-text-security:disc; text-security:disc; }
.sec-val:focus { border-color:var(--accent2); }
.ui-dlg-b .btn svg { width:14px; height:14px; vertical-align:-2px; }
.ui-dlg-b .btn:disabled { opacity:.45; cursor:not-allowed; }

/* keyboard access: visible focus ring on clickable rows + switches */
.row-agent:focus-visible, .agent-row:focus-visible, .tk-row[data-task]:focus-visible, .rl-edit:focus-visible,
.sr-row:focus-visible, .sw[role=switch]:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.sw[role=switch]:focus-visible { outline-offset:2px; }
.row-agent:focus:not(:focus-visible), .agent-row:focus:not(:focus-visible), .tk-row:focus:not(:focus-visible),
.rl-edit:focus:not(:focus-visible), .sr-row:focus:not(:focus-visible), .sw:focus:not(:focus-visible) { outline:none; }
/* Settings › General › Font: typeface picker */
.face-row { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; }
.face-opt { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; border-radius:4px;
  border:1px solid var(--line); background:var(--elev); color:var(--text); text-align:left; }
.face-opt span { font-size:calc(18px * var(--ui-fs, 1)); color:var(--muted); }
.face-opt.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
/* Action Center: the sprints ⋯ beside the search box, same height as it */
/* Inbox deck (full-screen sprint): header buttons, bottom nav, slide-in, find sheet */
#sprint-view .sv-top { align-items:center; }
.sv-ic { width:36px; height:36px; border-radius:4px; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; flex:none;
  font-size:calc(18px * var(--ui-fs, 1)); }
.sv-ic:hover { background:var(--hover); color:var(--text); }
.sv-body { transition:transform .18s ease; }
.sv-item { max-width:720px; width:100%; margin:0 auto; padding:4px 2px 12px; }
.sv-item > .card:not(.sv-card) { padding:18px; }
.sv-in-r { animation:svInR .22s ease; } .sv-in-l { animation:svInL .22s ease; }
@keyframes svInR { from { transform:translateX(40px); opacity:.3; } to { transform:none; opacity:1; } }
@keyframes svInL { from { transform:translateX(-40px); opacity:.3; } to { transform:none; opacity:1; } }
.sv-extra { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.sv-extra .go.red { color:var(--err); }
.sv-nav { display:flex; align-items:center; gap:10px; flex:none; padding:8px 0 calc(8px + env(safe-area-inset-bottom)); max-width:720px; width:100%; margin:0 auto; }
.sv-nb { width:48px; height:40px; border-radius:4px; border:1px solid var(--line); background:var(--elev); color:var(--text); font-size:calc(22px * var(--ui-fs, 1)); line-height:1; }
.sv-nb:disabled { opacity:.35; }
.sv-hint { flex:1; text-align:center; color:var(--muted); font-size:calc(12px * var(--ui-fs, 1)); }
.sv-find { position:absolute; inset:0; background:var(--bg); display:flex; flex-direction:column; padding:inherit; z-index:2; }
.sv-find-top { display:flex; gap:10px; align-items:center; padding:6px 0 10px; }
.sv-find-top input { flex:1; min-width:0; }
.sv-find-list { flex:1; overflow-y:auto; }
.sv-fr { display:flex; gap:10px; align-items:flex-start; padding:10px 8px; border-radius:4px; cursor:pointer; }
.sv-fr:hover, .sv-fr.cur { background:var(--hover); }
.sv-fr.done { opacity:.55; }
.sv-fk { flex:none; min-width:62px; font-size:calc(11px * var(--ui-fs, 1)); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding-top:2px; }
.sv-fm { min-width:0; } .sv-ft { overflow-wrap:anywhere; }
.sv-fr:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
/* Undo bar: shown for 5 s after an answer, above everything (the inbox deck included) */
.undo-bar { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(76px + env(safe-area-inset-bottom)); z-index:400;
  display:flex; align-items:center; gap:14px; max-width:calc(100vw - 32px); padding:10px 10px 10px 16px; border-radius:4px;
  background:var(--elev); border:1px solid var(--line); box-shadow:0 12px 34px var(--shadow); }
.ub-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ub-b { flex:none; padding:7px 12px; border-radius:4px; background:var(--accent); color:#0b0b0d; font-weight:700; }
.ub-n { opacity:.7; font-weight:600; margin-left:2px; }
/* Change log: heading + bullets + link chips */
.cl-h { font-weight:600; }
.cl-ul { margin:4px 0 0; padding-left:18px; color:var(--muted); }
.cl-ul li { margin:2px 0; }
.cl-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.cl-chip { font-size:calc(12px * var(--ui-fs, 1)); padding:2px 8px; border-radius:3px; border:1px solid var(--line); color:var(--accent2); text-decoration:none; }
/* card details: nothing runs off the card (long links, ids) */
.dc-detail, .dc-q, .ny-detail { overflow-wrap:anywhere; }
.dc-detail a { word-break:break-all; }
.dc-detail ul { margin:2px 0 8px; padding-left:20px; }
.dc-detail p { margin:6px 0 2px; }
.dc-detail h1, .dc-detail h2, .dc-detail h3, .dc-detail h4, .dc-detail h5, .dc-detail h6 {
  font-size:calc(11.5px * var(--ui-fs, 1)); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); margin:12px 0 3px; }
.dc-detail > :first-child { margin-top:0; }
/* card details: readable links on dark cards; paused-routine card like the others */
.dc-detail a, .ny-detail a, .dc-q a { color:var(--accent2); }
.sv-item .ny-report { margin-top:8px; padding:8px 10px; border-radius:4px; background:var(--bubble2); font-size:calc(12.5px * var(--ui-fs, 1)); color:var(--muted); }
.sv-item .ny-report span { font-weight:600; color:var(--text); }
.sv-item .card.warn .dc-kicker { color:var(--warn); font-size:calc(11px * var(--ui-fs, 1)); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

/* inbox deck: copyable card ID (paste to Claude → /api/lookup) */
.sv-id-row { display:flex; justify-content:flex-start; margin:6px 0 0 4px; }
.sv-id { opacity:.6; }
.sv-id-row { gap:6px; align-items:center; }
.sv-ask { width:auto !important; padding:0 12px 0 8px; gap:6px; display:inline-flex; align-items:center;
  border:1px solid var(--line); border-radius:3px; color:var(--text); }
.sv-ask span { font-size:calc(13px * var(--ui-fs, 1)); font-weight:600; }
.sv-id:hover, .sv-id:focus { opacity:1; }

/* code blocks: Copy button; the owner's own bubble wraps long lines (a long JSON line
   showed only its tail in the narrow bubble) */
.code-wrap { position:relative; }
.code-wrap .code-copy { position:absolute; top:4px; right:4px; z-index:1; font-size:12px; padding:2px 8px; opacity:.85; }
.msg.me .msg-body pre, .msg.me .msg-body pre code { white-space:pre-wrap; word-break:break-word; overflow-x:visible; }

/* thread view: one topic of a chat, full screen, its own composer */
.thread-view { position:fixed; inset:0; z-index:350; display:flex; flex-direction:column; background:var(--bg); color:var(--text); }
.th-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line, rgba(127,127,127,.25)); }
.th-x { border:0; background:transparent; color:inherit; font-size:20px; padding:4px 8px; cursor:pointer; }
.th-t { font-weight:600; display:flex; flex-direction:column; min-width:0; flex:1; }
.th-t .th-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.th-who { font-weight:400; font-size:12px; opacity:.65; }
.th-list { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.th-msg { max-width:100%; padding:10px 12px; border-radius:4px; background:var(--bubble); overflow-wrap:anywhere; }
.th-msg.me { align-self:flex-end; max-width:88%; background:var(--me); }
.th-msg.me pre { white-space:pre-wrap; margin:0; font:inherit; }
.th-msg.pending { opacity:.6; }
.th-from { font-size:12px; opacity:.6; margin-bottom:4px; }
.th-sep { text-align:center; font-size:12px; opacity:.55; padding:2px 0; border-bottom:1px solid var(--line, rgba(127,127,127,.2)); }
.th-empty { opacity:.6; text-align:center; padding:24px 0; }

/* chat header: Inbox + Search on phones (the agent list's top nav, inside every chat) */
.ch-nav { display:none; position:relative; border:0; background:transparent; color:inherit; padding:6px; cursor:pointer; opacity:.85; }
.ch-badge { position:absolute; top:-2px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:4px;
  background:var(--err); color:#fff; font-size:10px; line-height:16px; font-weight:700; text-align:center; }
@media (max-width:820px), (max-height:500px) and (pointer:coarse) { .ch-nav { display:inline-flex; align-items:center; } }
@media (max-width:820px), (max-height:500px) and (pointer:coarse) {
  .chat-head { max-width:calc(100% - 84px); }
  .chat-head .nm { min-width:0; flex:1 1 auto; }
}
.th-id { margin-left:auto; border:1px solid var(--line); border-radius:3px; background:transparent; color:var(--muted);
  font:12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; padding:5px 10px; cursor:pointer; }
.th-id:hover, .th-id:focus { color:var(--text); }
.th-list .msg.pending { opacity:.6; }
#sprint-view .sv-item .card.dc-collapsed { cursor:pointer; }
/* inbox: one place, two views */
.sv-modes { display:flex; gap:4px; margin:0 16px 10px; padding:3px; border-radius:4px; background:var(--input); border:1px solid var(--line); }
.sv-modes button { flex:1; border:0; background:transparent; color:var(--muted); font:inherit; font-size:13px; font-weight:600; padding:7px 0; border-radius:4px; cursor:pointer; }
.sv-modes button.on { background:var(--bubble2); color:var(--text); }
.ppl-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ppl-row .btns { display:flex; gap:6px; flex-wrap:wrap; }
/* partner login: owner-only controls hidden (the server refuses them anyway) */
body.member #sb-add, body.member #swarm-pause-btn, body.member #settings-btn, body.member #pause-banner { display:none !important; }
.msg.me .me-by { font-size:12px; opacity:.7; margin-bottom:4px; }
/* agent names inside a reply open that agent's chat */
.ag-link { background:none; border:0; padding:0; font:inherit; color:var(--accent, #6ea8fe); cursor:pointer;
  text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
.ag-link:hover { text-decoration-style:solid; }
/* inbox deck: the conversation under a card; the box sticks to the bottom while it scrolls */
.sv-convo { display:flex; flex-direction:column; margin-top:6px; }
.sv-convo .th-list { flex:none; overflow:visible; padding:6px 0 4px; }
.sv-convo .th-list:empty { display:none; }
.sv-askbar { max-width:720px; width:100%; margin:0 auto; padding:0 2px; box-sizing:border-box; }
.sv-askbar.hidden { display:none; }
/* an agent's restated instruction in a thread: Confirm / Change it */
.th-confirm { align-self:flex-start; max-width:720px; width:100%; border:1px solid var(--accent); border-radius:4px; padding:10px 12px; }
.th-confirm .th-cf-t { font-weight:600; margin-bottom:8px; }
.th-confirm .btns { display:flex; gap:8px; }
#sprint-view .card .msg-actions [data-reply] { display:none; }   /* the deck has its own box under each card */
/* inbox deck: swipe moves between cards; the ‹ Swipe to skip › bar is gone (owner, Oct 24) */
#sprint-view .sv-nav { display:none !important; }
/* a card's small actions (snooze, save for later, open chat, copy ID) — like a message's */
.card-mini { display:flex; gap:6px; margin:8px 0 0 2px; }
.ap-why.muted { opacity:.7; }
/* snooze length picker */
.snz-pick { display:flex; flex-direction:column; gap:6px; padding:8px; min-width:150px; }
.snz-pick .snz-t { font-size:12px; opacity:.6; padding:0 2px 2px; }
.snz-pick .btn { width:100%; }
.th-held { align-self:stretch; border:1px dashed var(--warn); color:var(--warn); border-radius:4px; padding:8px 12px; font-size:13px; display:flex; gap:10px; align-items:center; justify-content:space-between; }
.th-confirm .th-cf-ed { width:100%; box-sizing:border-box; resize:none; border-radius:4px; padding:8px 10px; background:var(--input); color:inherit; border:1px solid var(--line); font:inherit; font-weight:600; margin-bottom:8px; }
.th-confirm.old { opacity:.55; border-style:dashed; } .th-confirm .th-cf-note { font-size:12px; margin-top:4px; }
/* inbox deck: back to the top of a long card / conversation */
.sv-totop { position:absolute; right:16px; bottom:90px; z-index:6; padding:8px 14px; border-radius:3px;
  background:var(--elev); color:var(--text); border:1px solid var(--line); box-shadow:0 4px 14px var(--shadow); font-weight:600; font-size:13px; }
.sv-totop.hidden { display:none; }
.th-confirm .th-cf-h { font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.6; margin-bottom:4px; } .th-confirm .th-cf-t ul { margin:0; padding-left:18px; }
/* thread + inbox-card boxes: the main chat's composer (same pill, + and send), minus its page padding */
.thread-view .th-comp.composer { padding:8px 12px calc(10px + env(safe-area-inset-bottom)); }
.sv-askbar .th-comp.composer { padding:6px 0 10px; }
.sv-askbar .th-comp.composer form { margin:0; }   /* full card width, like the cards above */
.th-comp .ic.send:disabled { opacity:.5; }
/* menus never run off a phone screen: long items wrap */
.msg-pop { max-width:calc(100vw - 16px); }
.msg-pop .mm { white-space:normal; overflow-wrap:anywhere; }
/* inbox header: one line, ellipsis if still long */
#sprint-view .sv-prog { min-width:0; }
/* inbox header: "Waiting on you" + "X of Y" — one line on desktop; two lines on a phone (no "·"), so it fits beside pause/search/⋯/✕ at 360px */
.sv-prog .sv-cnt { white-space:nowrap; }
@media (max-width:820px), (max-height:500px) and (pointer:coarse) {
  #sprint-view .sv-top { gap:6px; }
  .sv-prog .sv-sep { display:none; }
  .sv-prog .sv-lbl { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sv-prog .sv-cnt { display:block; margin-top:2px; }
}
.sec-existing { margin:8px 0; padding:10px 12px; border:1px solid var(--accent); border-radius:4px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .sec-existing .btn { margin-left:auto; }

/* owner messages sent through Claude: a small label instead of the raw "[sent from Claude]" tag */
.msg.me .via-claude{font-size:11px;font-weight:600;letter-spacing:.02em;opacity:.65;margin:0 0 6px}

/* a sideways swipe in the inbox deck changes cards — never the browser's back/forward */
html, body, #sprint-view, #sprint-view .sv-body { overscroll-behavior-x:none; }

/* a task card that came back after the owner answered it */
.dc-prior { margin:8px 0 10px; padding:8px 12px; border-left:3px solid var(--accent); border-radius:4px; background:var(--elev); font-size:14px; }
.dc-prior .s { opacity:.7; font-size:12.5px; }

/* a task-card choice that was sent as a reply (the card stays open) */
.opt.picked { outline:2px solid var(--accent, #4f8cff); }
/* a choice was sent: the set is locked until the agent offers new options (owner, Oct 27) */
.opt.locked { cursor:default; opacity:.45; pointer-events:none; }
.opt.locked.picked { opacity:1; }
.opt.locked.picked .opt-lbl::after { content:" · Sent"; color:var(--green); font-weight:600; }

/* the run state in the inbox header: pause bars while running, a play arrow (warn colour) when paused */
#sprint-view .sv-pause .sp-play { display:none; }
body.swarm-paused #sprint-view .sv-pause, body.routines-paused #sprint-view .sv-pause { color:var(--warn); opacity:1; }
body.swarm-paused #sprint-view .sv-pause .sp-pause { display:none; }
body.swarm-paused #sprint-view .sv-pause .sp-play { display:inline; }
body.member #sprint-view .sv-pause { display:none !important; }
body.member .sv-card [data-del] { display:none !important; }   /* DELETE /api/tasklist is owner-only */
body.member #tk-addbtn { display:none !important; }   /* POST /api/agents/{id}/tasks is owner-only (review r3) */

/* more of the card / its thread below what you're reading */
.sv-tobottom { position:absolute; right:16px; bottom:90px; z-index:6; padding:8px 14px; border-radius:3px;
  background:var(--elev); color:var(--text); border:1px solid var(--line); box-shadow:0 4px 14px var(--shadow); font-weight:600; font-size:13px; }
.sv-tobottom.hidden { display:none; }
.sv-tobottom.new { border-color:var(--accent, #4f8cff); color:var(--accent, #4f8cff); font-weight:600; }
/* the card needs your confirmation and its buttons are below the fold (owner, Oct 27) */
.sv-tobottom.act { background:var(--green); border-color:var(--green); color:var(--ongreen); font-weight:700; }
/* a task waiting on an agent, not on you: muted kicker (Oct 26) */
.dc-kicker.dc-k-team, .dc-card .dc-kicker.dc-k-team { color:var(--muted); }
/* outside-message mark as a chip, not raw "[outside message · …]" text (Oct 26) */
.out-chip { display:inline-block; font-size:calc(10.5px * var(--ui-fs, 1)); font-weight:600; padding:1px 7px; border-radius:3px;
  color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 45%, transparent); background:color-mix(in srgb, var(--warn) 10%, transparent);
  vertical-align:middle; white-space:nowrap; }
.ap-why a, .dc-detail a { color:var(--accent2); }
.out-line { margin:0 0 4px; }
/* "From an outside message": the same pill, muted — a provenance note, not an alarm (owner, Oct 27) */
.out-chip.out-muted { color:var(--muted); font-weight:500; border-color:var(--line); background:transparent; }

/* ---- PixelStaff pixel accents: names, headings and chrome go 8-bit; body text stays a
   normal face so long messages read easily ---- */
:root, :root[data-theme="dark"] { --px-font:"Silkscreen",ui-monospace,SFMono-Regular,Menlo,monospace; --grid:rgba(255,255,255,.035); }
:root[data-theme="light"] { --grid:rgba(17,24,39,.055); }
.row-agent .nm, .chat-head .nm, .dt-head .nm, .modal-box h3, .sec-nm, .pin-cell .pin-nm {
  font-family:var(--px-font); font-weight:400; letter-spacing:.02em; }
.sec-nm { letter-spacing:.06em; }
/* a faint pixel grid behind the conversation */
#chat { background-image:linear-gradient(var(--grid) 1px, transparent 1px),
                         linear-gradient(90deg, var(--grid) 1px, transparent 1px);
        background-size:16px 16px; }
/* chunky "pressable" primary buttons: a hard offset shadow, no blur */
.btn.green { box-shadow:0 3px 0 var(--green2); }
.btn.green:active { transform:translateY(2px); box-shadow:0 1px 0 var(--green2); }
/* spinners tick round in 8 steps, like an 8-bit loader */
#ptr svg { width:20px; height:20px; }
#ptr.spin svg, .chat-head .ch-refresh.spin svg { animation-timing-function:steps(8); }
/* pixel icons: no sub-pixel rotation blur on the collapsible carets */
.sec-caret, .cs-car { shape-rendering:crispEdges; }
/* pixel characters: dark eyes on skin in both themes; hover is a 2px hop, never a rotate
   (rotating pixel art blurs it) */
.av .eye { fill:#1b1b20; }
.row-agent:hover .av, .chat-head:hover .av, .dt-head .av:hover { transform:translateY(-2px); }
/* Dress up (agent wardrobe) */
.wd-open { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:5px 12px; }
.wd-open svg { width:14px; height:14px; }
.modal-box:has(.wd) { width:min(760px, calc(100vw - 32px)); max-width:none; }
.wd { display:flex; gap:18px; align-items:flex-start; }
.wd-preview { flex:none; position:sticky; top:0; width:156px; height:156px; display:flex; align-items:center;
  justify-content:center; background:var(--deep); border:1px solid var(--line); border-radius:4px;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:12px 12px; }
.wd-big { width:140px; height:140px; }
.wd-opts { flex:1; min-width:0; max-height:min(62vh, 560px); overflow-y:auto; padding-right:4px; }
.wd-sec { margin-bottom:12px; }
.wd-row { display:flex; flex-wrap:wrap; gap:6px; }
.wd-opt { display:flex; flex-direction:column; align-items:center; gap:2px; width:64px; padding:5px 2px 4px;
  border:1px solid var(--line); border-radius:4px; background:var(--card2); color:var(--muted);
  font-size:calc(10px * var(--ui-fs, 1)); line-height:1.2; }
.wd-opt:hover { border-color:var(--faint); color:var(--text); }
.wd-opt.on { border-color:var(--accent); color:var(--text); box-shadow:0 2px 0 var(--accent); }
.wd-mini { width:40px; height:40px; }
.wd-sw { width:26px; height:26px; border-radius:2px; border:2px solid var(--line); }
.wd-sw.auto { width:auto; padding:0 8px; font-size:calc(11px * var(--ui-fs, 1)); color:var(--muted); background:var(--card2); }
.wd-sw.on { border-color:var(--text); box-shadow:0 2px 0 var(--accent); }
.wd-actions { display:flex; gap:8px; align-items:center; margin-top:14px; }
.wd-actions .sp { flex:1; }
@media (max-width:600px) { .wd { flex-direction:column; align-items:center; } .wd-preview { position:static; } .wd-opts { max-height:none; } }
/* round-head characters (pxicons.js pxAgent): small avatars are a square head-and-shoulders
   crop; .full is the whole body (44×76 cells) — the detail header, the wardrobe, the site */
svg.av.full { aspect-ratio:44 / 76; }
.dt-head .av.full { width:auto; height:152px; }          /* 2px per cell */
main.dt-rail #detail .dt-head .av.full { width:auto; height:56px; }
.wd-preview { height:244px; }
.wd-big.full { width:auto; height:228px; }          /* 3px per cell */
.wd-mini.full { width:44px; height:76px; }          /* 1px per cell */
.wd-opt { width:68px; }
@media (max-width:820px), (max-height:500px) and (pointer:coarse) { .dt-head .av.full { width:auto; height:76px; } }

/* ---- Team templates (Settings › Templates): pixel cards, the team as characters ---- */
.tpl-searchrow { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.tpl-searchrow .conn-search { flex:1; margin-bottom:0; }
.tpl-cats { margin-top:8px; flex-wrap:wrap; width:max-content; max-width:100%; }
.tpl-intro { margin:10px 2px 14px; line-height:1.5; }
.tpl-card { display:flex; flex-direction:column; gap:9px; box-shadow:0 3px 0 var(--line); transition:transform .06s steps(2); }
.tpl-card:hover { transform:translateY(-2px); box-shadow:0 5px 0 var(--scroll2); }
.tpl-top { display:flex; align-items:center; gap:11px; min-width:0; }
.tpl-ico { flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:2px;
  color:var(--accent); background:var(--deep); border:1px solid var(--line); box-shadow:inset 0 -3px 0 var(--line); }
.tpl-ico.big { width:58px; height:58px; }
.tpl-nm, .tpl-hero-nm, .tpl-agent-nm { font-family:var(--px-font); font-weight:400; letter-spacing:.02em; }
.tpl-tag { color:var(--text); font-size:calc(13px * var(--ui-fs, 1)); line-height:1.45; }
.tpl-team { display:flex; gap:4px; min-height:36px; align-items:flex-end; }
.tpl-av { width:34px; height:34px; background:var(--deep); border:1px solid var(--line); border-radius:2px; }
.tpl-av-big { width:56px; height:56px; background:var(--deep); border:1px solid var(--line); border-radius:2px; }
.tpl-apps { display:flex; flex-wrap:wrap; gap:5px; }
.tpl-app { font-size:calc(11px * var(--ui-fs, 1)); padding:3px 7px; border-radius:2px; border:1px solid var(--line); color:var(--muted); background:var(--hover); }
.tpl-app.req { color:var(--text); border-color:var(--scroll2); }
.tpl-app.soon { border-style:dashed; }
.tpl-upd { font-size:calc(10.5px * var(--ui-fs, 1)); padding:2px 6px; border:1px solid var(--warnbd); color:var(--warn); border-radius:2px; }
.tpl-inst-row .biz-acts { gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.tpl-inst-row .btn.sm { padding:5px 12px; font-size:calc(12.5px * var(--ui-fs, 1)); }
/* detail */
.tpl-hero { display:flex; align-items:center; gap:14px; margin:12px 0 6px; }
.tpl-hero-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.tpl-hero-nm { font-size:calc(19px * var(--ui-fs, 1)); }
.tpl-dljson { flex:none; color:var(--muted); }
.tpl-desc { color:var(--muted); line-height:1.55; margin:4px 0 6px; font-size:calc(13px * var(--ui-fs, 1)); }
.tpl-agents { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (max-width:760px){ .tpl-agents { grid-template-columns:minmax(0,1fr); } }
.tpl-agent { display:flex; gap:12px; padding:12px; background:var(--card2); border:1px solid var(--line); border-radius:4px; box-shadow:0 3px 0 var(--line); }
.tpl-agent-av { flex:none; }
.tpl-agent-meta { min-width:0; display:flex; flex-direction:column; gap:4px; }
.tpl-agent-nm { font-size:calc(13px * var(--ui-fs, 1)); }
.tpl-agent-d { font-size:calc(12.5px * var(--ui-fs, 1)); line-height:1.45; }
.tpl-skills { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.tpl-skill { font-size:calc(10.5px * var(--ui-fs, 1)); padding:2px 6px; border-radius:2px; background:var(--hover); color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.tpl-badge { font-size:calc(10px * var(--ui-fs, 1)); padding:2px 6px; border-radius:2px; border:1px solid var(--line); color:var(--muted); vertical-align:2px; margin-left:4px; font-weight:500; }
.tpl-badge.req { color:var(--warn); border-color:var(--warnbd); }
.tpl-soon { font-size:calc(10.5px * var(--ui-fs, 1)); padding:3px 8px; border:1px dashed var(--scroll2); color:var(--muted); border-radius:2px; flex:none; }
.tpl-appcard .cc-meta .s { white-space:normal; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tpl-note { color:var(--faint); font-size:calc(11px * var(--ui-fs, 1)); }
.tpl-acct { background:var(--input); color:var(--text); border:1px solid var(--line); border-radius:2px; padding:3px 6px; font:inherit; max-width:100%; }
.tpl-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; }
@media (max-width:760px){ .tpl-form { grid-template-columns:minmax(0,1fr); } }
.tpl-q { display:flex; flex-direction:column; gap:5px; font-size:calc(12.5px * var(--ui-fs, 1)); color:var(--muted); min-width:0; }
.tpl-q:has(textarea) { grid-column:1/-1; }
.tpl-q input, .tpl-q select, .tpl-q textarea { background:var(--input); border:1px solid var(--line); color:var(--text); border-radius:2px;
  padding:8px 10px; font:inherit; font-size:calc(13px * var(--ui-fs, 1)); outline:none; width:100%; resize:vertical; }
.tpl-q input:focus, .tpl-q select:focus, .tpl-q textarea:focus { border-color:var(--accent2); }
.tpl-q em { font-style:normal; color:var(--faint); font-size:calc(11px * var(--ui-fs, 1)); }
.tpl-req { color:var(--warn); font-weight:600; }
.tpl-made { margin:0; padding-left:18px; line-height:1.7; font-size:calc(13px * var(--ui-fs, 1)); }
.tpl-install { position:sticky; bottom:-1px; display:flex; align-items:center; gap:14px; justify-content:flex-end; margin-top:18px; padding:12px 0 4px;
  background:linear-gradient(transparent, var(--panel) 30%); }
.tpl-status { flex:1; font-size:calc(12.5px * var(--ui-fs, 1)); line-height:1.5; }
.tpl-bad { color:var(--warn); }
.tpl-install .btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.tpl-errs { margin:8px 0; padding-left:18px; font-size:calc(12.5px * var(--ui-fs, 1)); line-height:1.5; color:var(--muted); text-align:left; }
.tpl-done { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:26px 8px; }
.tpl-done-team { display:flex; gap:6px; }
.tpl-done-team .av { animation:tplHop .6s steps(2) 3; }
@keyframes tplHop { 50% { transform:translateY(-4px); } }
.tpl-done-acts { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
/* team data */
.td-grid { margin:12px 0 4px; }
.td-desc { margin-top:6px; white-space:normal; }
.td-tbl th, .td-tbl td { text-align:left; max-width:260px; overflow:hidden; text-overflow:ellipsis; }
.td-tbl td.td-acts { text-align:right; white-space:nowrap; }
.td-tbl td.td-acts .go { margin-right:6px; }
.tpl-warn { color:var(--warn); font-size:calc(11.5px * var(--ui-fs, 1)); line-height:1.4; }
.tpl-review .s { margin-bottom:8px; line-height:1.5; }
.tpl-rv { border:1px solid var(--line); border-radius:2px; background:var(--card2); margin:6px 0; }
.tpl-rv summary { cursor:pointer; padding:8px 10px; font-size:calc(12.5px * var(--ui-fs, 1)); }
.tpl-rv pre { margin:0; padding:10px 12px; border-top:1px solid var(--line); white-space:pre-wrap; word-break:break-word;
  max-height:340px; overflow:auto; font-size:calc(12px * var(--ui-fs, 1)); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.tpl-ack { display:flex; gap:8px; align-items:center; margin-top:10px; font-size:calc(13px * var(--ui-fs, 1)); }
/* template roles: the install picker and Team tools (one card per role) */
.tpl-roles { margin-top:8px; }
.tpl-role { display:flex; flex-direction:column; gap:8px; min-width:0; }
.tpl-role-h .s { white-space:normal; line-height:1.45; margin-top:3px; }
.tpl-role-who { color:var(--faint); }
.tpl-rsel { background:var(--input); color:var(--text); border:1px solid var(--line); border-radius:2px; padding:8px 10px;
  font:inherit; font-size:calc(13px * var(--ui-fs, 1)); width:100%; min-height:40px; }
.tpl-rsel:focus { border-color:var(--accent2); outline:none; }
.tpl-role-note { font-size:calc(12px * var(--ui-fs, 1)); line-height:1.45; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tpl-role-note:empty { display:none; }
.tpl-role-idle, .tpl-connect { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tpl-connect { padding-top:8px; border-top:1px dashed var(--line); }
.tpl-connect.hidden { display:none; }
.tpl-ctx textarea { min-height:84px; }
.tpl-opt { font-style:normal; color:var(--faint); font-size:calc(11px * var(--ui-fs, 1)); }

/* a held app call on an approval card: the full arguments, never truncated */
.ap-held .ap-args{white-space:pre-wrap;word-break:break-word;font-size:12px;margin:4px 0 0;padding:6px 8px;background:var(--bg2,rgba(0,0,0,.06));border-radius:6px}
/* commerce approval cards: before → after diff */
.ap-diff { margin:6px 0; overflow-x:auto; }
.ap-diff table { width:100%; border-collapse:collapse; font-size:calc(13px * var(--ui-fs, 1)); }
.ap-diff th, .ap-diff td { text-align:left; padding:4px 6px; border-top:1px solid var(--line); vertical-align:top; word-break:break-word; }
.ap-diff td.ap-diff-b, .ap-diff td.ap-diff-a { white-space:pre-wrap; font-family:ui-monospace, monospace; font-size:12px; max-width:40ch; }
.ap-diff td > .ap-diff-scroll { max-height:16em; overflow:auto; }
.ap-diff th { color:var(--muted, #999); font-weight:500; border-top:none; }
.ap-diff-b { color:var(--muted, #999); }
.ap-diff-a { color:var(--text); font-weight:600; }

/* chat + thread content use up to 80% of the pane on desktop (owner, Oct 28); phones keep 96% */
@media (min-width:821px) and (min-height:501px), (min-width:821px) and (pointer:fine){
  .msg, .th-msg.me { max-width:80%; }
  .msg.bot .msg-body { max-width:none; }
  #feed .card, .pane-wrap .card, .thread-view .card, .th-confirm { max-width:80%; }
}
/* fast custom tooltip ([data-tip], app.js) — replaces the slow native title on icon buttons */
.ui-tip { position:fixed; z-index:11000; pointer-events:none; padding:4px 8px; border-radius:4px; background:var(--card2, #222); color:var(--text);
  border:1px solid var(--line); font-size:12px; line-height:1.3; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transition:opacity .08s; }
.ui-tip.on { opacity:1; visibility:visible; }
/* Settings › Use from Claude: numbered setup steps */
.mcp-steps { margin:2px 0 10px; padding-left:22px; line-height:1.6; font-size:calc(13px * var(--ui-fs, 1)); }
.mcp-steps li { margin:0 0 4px; }