/* Agent Swarm — Grok Bot look-alike */
* { box-sizing: border-box; }
: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; --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:#b9771a; --err:#d64545; --ok:#1a9d5c;
  --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; display:flex; flex-direction:column; background:var(--bg);
  color:var(--text); font:14px/1.55 -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:8px; 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){
  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; }
  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:11px; 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:12px; }
.pin-cell { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 3px; border-radius:12px; 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:13px; 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:11px; color:var(--faint); border:1px dashed var(--line); border-radius:12px; padding:14px; }
.pin-cell .pin-nm { font-size:10px; 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:18px; 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:11px; 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:8px; }
.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:12.5px; 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; }
.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 { position:absolute; top:-12px; right:10px; display:none; gap:2px; background:var(--elev); border:1px solid var(--line); border-radius:10px; padding:2px; box-shadow:0 4px 14px var(--shadow); }
.msg:hover .msg-actions { display:flex; }
.msg-actions .ma { width:26px; height:24px; border-radius:7px; color:var(--muted); font-size:13px; display:flex; align-items:center; justify-content:center; }
.msg-actions .ma:hover { background:var(--hover); color:var(--text); }
.msg-rx { display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
.rx-chip { background:var(--bubble2); border:1px solid var(--line); border-radius:10px; padding:1px 7px; font-size:13px; cursor:pointer; }
.msg-pop { position:fixed; z-index:120; background:var(--elev); border:1px solid var(--line); border-radius:12px; padding:4px; box-shadow:0 8px 22px var(--shadow); display:flex; gap:2px; flex-direction:column; }
.msg-pop:has(.rx-pick) { flex-direction:row; }
.msg-pop .rx-pick { font-size:18px; width:34px; height:34px; border-radius:9px; } .msg-pop .rx-pick:hover { background:var(--hover); }
.msg-pop .mm { display:block; width:100%; text-align:left; padding:8px 14px; border-radius:8px; font-size:13px; white-space:nowrap; } .msg-pop .mm:hover { background:var(--hover); }
.msg.flash { outline:2px solid var(--accent2); outline-offset:2px; border-radius:18px; }
.msg-foot { display:flex; align-items:center; gap:6px; margin-top:8px; padding-top:7px; border-top:1px solid var(--div); font-size:11.5px; 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:10px; }
.reply-bar .rb-q { font-size:12.5px; 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:12px; padding:8px 12px; max-width:320px; }
.filecard .fc-ic { color:var(--muted); display:flex; }
.filecard .fc-thumb { width:34px; height:34px; border-radius:7px; object-fit:cover; }
.filecard .fc-meta { min-width:0; }
.filecard .fc-name { font-size:13px; font-weight:560; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.filecard .fc-sz { font-size:11px; 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:12px; } .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.bot.ack { opacity:.72; font-size:13px; 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:12.5px; color:var(--muted); }
.dt-head .pencil { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; }
.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:8px; 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; gap:14px; padding:14px 16px 8px; color:var(--muted); }
.sb-top .icon { font-size:17px; 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:10px;
  background:var(--input); border:1px solid var(--line); color:var(--text); font-size:13px; 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:9px; overflow:hidden; }
.fbtn { font-size:12px; 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:8px; }
.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:11px; 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:10px; color:var(--faint); flex:none; }
.sec-x { opacity:0; background:none; border:none; color:var(--faint); cursor:pointer; font-size:11px; flex:none; }
.sec-h:hover .sec-x { opacity:1; } .sec-x:hover { color:var(--err); }
.sec-body { border-radius:10px; min-height:2px; }
.sec-body.drop-to { outline:1.5px dashed var(--accent2); outline-offset:-1px; background:var(--hover); }
.sec-empty { font-size:11px; 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:50%; display:flex; align-items:center; justify-content:center; background:var(--okbg); color:var(--green); font-size:20px; }
.rows-empty .re-msg { font-size:13px; color:var(--text); max-width:220px; }
.rows-empty .re-sub { font-size:11.5px; color:var(--faint); max-width:220px; }
.inline-edit { width:100%; font:inherit; font-size:13px; padding:4px 7px; border-radius:7px; 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:11.5px; }
.agent-row .org-tw { flex:none; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); border-radius:5px; 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:10px; color:var(--muted); background:var(--hover); border-radius:6px; 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:12px; 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:8px; font-size:13px; 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:12px; padding:5px; box-shadow:0 12px 34px var(--shadow); }
.ctx-sub:hover .ctx-submenu { display:block; }
.ctx-parent span { color:var(--muted); }


.row-agent { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:12px; 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:13.5px; font-weight:560; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-agent .pv { font-size:12px; 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:50%; 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:50%; 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:11px;
  background:var(--bubble); color:var(--text); font-size:13px; 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; }

/* ---------- 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:22px; box-shadow:0 4px 18px var(--shadow); }
.chat-head .av { width:26px; height:26px; }
.chat-head .nm { font-size:13.5px; 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; }

.msg { max-width:88%; padding:13px 16px; border-radius:18px; font-size:14px; }
.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:16px; font-weight:700; }
.msg h4 { margin:2px 0 8px; font-size:14.5px; }
/* 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 — H2-like, clearly above body text. Beats the generic
   .msg h3/h4 rules above (14.5–16px), which made section headers barely larger than text. */
.msg .msg-body h3 { font-size:1.65em; }    /* # */
.msg .msg-body h4 { font-size:1.45em; }    /* ## and bold-only section lines ≈ H2 */
.msg .msg-body h5 { font-size:1.25em; }    /* ### */
.msg .msg-body h6 { font-size:1.1em; }
.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:13px; 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:5px; padding:1px 5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }
.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:11px; 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:9.5px; font-weight:600; letter-spacing:.02em;
  padding:1px 6px; border-radius:9px; 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:11px; color:var(--faint); margin:4px 0; }

.evt-line { align-self:center; font-size:11.5px; color:var(--faint); display:flex; gap:7px; align-items:center; }
.evt-line.tool { color:var(--muted); } .evt-line .k { color:var(--green); }

/* cards */
.card { align-self:stretch; max-width:720px; width:100%; background:var(--bubble); border:1px solid var(--line); border-radius:16px; padding:15px 16px; }
.card.warn { border-color:var(--warnbd); }
.card h4 { margin:0 0 10px; font-size:14px; }
.card pre { white-space:pre-wrap; word-break:break-word; background:var(--input); padding:9px; border-radius:9px; font-size:12px; color:var(--muted); }
.ap { display:flex; flex-direction:column; gap:6px; margin:2px 0 12px; }
.ap-what { font-size:15px; font-weight:600; color:var(--text); margin-bottom:4px; }
.ap-row { display:flex; gap:12px; font-size:13.5px; line-height:1.45; }
.ap-l { flex:none; width:84px; color:var(--muted); }
.ap-v { flex:1; min-width:0; word-break:break-word; }
.ap-v code, .ap-tech code { font-size:12px; }
.ap-dim { color:var(--muted); }
.ap-why { margin-top:4px; padding:8px 11px; border-left:3px solid var(--warnbd); background:var(--input); border-radius:0 9px 9px 0; font-size:13.5px; line-height:1.45; }
.ap-tech { font-size:11.5px; color:var(--muted); margin-top:2px; word-break:break-word; }
.ap-raw summary { cursor:pointer; font-size:11.5px; color:var(--muted); }
.ap-raw pre { margin:6px 0 0; }
.opt { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px; cursor:pointer; }
.opt:hover { background:var(--bubble2); }
.opt .lt { width:26px; height:26px; border-radius:50%; background:var(--iconbtn); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex:none; }
.card .btns { display:flex; 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:11px; 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:10px; border:1px solid var(--line); background:var(--bubble2); font-size:13px; }
.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:11px; }
.btn { padding:8px 16px; border-radius:10px; font-size:13px; 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:10px; 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:24px; 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:12px; 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:8px; 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:50%; background:rgba(0,0,0,.55);
  color:#fff; font-size:10px; 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:15px;
  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:50%; 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:50%;
  display:flex; align-items:center; justify-content:center; color:var(--muted); background:var(--iconbtn); font-size:13px; }
.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; }
.pane-composer { padding:8px 14px 14px; display:flex; align-items:flex-end; gap:6px; }
.pane-composer textarea { flex:1; resize:none; background:var(--bubble); border:1px solid var(--line); border-radius:18px;
  outline:none; color:var(--text); font:inherit; font-size:14px; padding:9px 13px; max-height:160px; }
.pane-composer textarea::placeholder { color:var(--faint); }
/* 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:16px; color:var(--text);
  background:var(--panel); box-shadow:0 8px 30px var(--shadow); font-size:14px; pointer-events:auto; }
.pane-add.drop-hot { background:var(--hover); }
.pane-add .pa-plus { font-size:18px; color:var(--green); }
@media (max-width:820px){ #chatgrid { display:block; } .pane, .pane-add { display:none !important; } }

/* ---------- 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:18px; margin-top:4px; }
.dt-head .dt { font-size:12px; 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:14px; 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:12px; 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; padding:11px 0; border-bottom:1px solid var(--div); }
.rline .l .n { font-size:13.5px; } .rline .l .s { font-size:11.5px; color:var(--muted); }
.pillx { font-size:10px; color:var(--warn); margin-left:6px; }

/* toggle switch */
.sw { width:40px; height:23px; border-radius:12px; 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:50%; background:#fff; transition:.15s; }
.sw.on::after { transform:translateX(17px); }

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

.badge { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); font-size:11px; padding:3px 10px; border-radius:11px; 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:60; }
#modal.hidden { display:none; }
.modal-box { background:var(--sidebar); border:1px solid var(--line); border-radius:16px; 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; }
#modal-body > h3, #modal-body > .gtabs { flex:none; }
#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:9px; padding:9px 11px; font:inherit; font-size:13.5px; 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:16px; }
.modal-box h3 { margin:0 0 6px; }
/* Connections (grouped cards) */
.conn-search { width:100%; margin-bottom:10px; padding:10px 14px; border-radius:11px; background:var(--input); border:1px solid var(--line); color:var(--text); font-size:14px; 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); }
.conn-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (max-width:760px){ .conn-grid { grid-template-columns: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:8px; background:var(--deep); border:1px solid var(--line); color:var(--text); font-size:12px; }
.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:12.5px; margin-bottom:6px; }
.cd-head { display:flex; align-items:baseline; gap:12px; margin:6px 0 4px; }
.cd-title { font-size:20px; 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:11px; padding:6px 10px; font-size:12px; }
.task-chip .tc-dot { width:7px; height:7px; border-radius:50%; 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:12px; } .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:13px; 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:14px; 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:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conn-card .cc-btn { flex:none; padding:7px 16px; }
.cc-ico { width:30px; height:30px; border-radius:8px; 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:13px; font-weight:700; color:var(--muted); }
.cdot { width:8px; height:8px; border-radius:50%; 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:12.5px; color:var(--muted); background:var(--hover); border:1px solid var(--line); border-radius:9px; padding:5px 11px; }
.gtabs button.active { background:var(--bubble2); color:var(--text); }
/* agent editor: chips + skill picker */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:11px; background:var(--input); border:1px solid var(--line);
  border-radius:9px; padding:3px 8px; margin:0 5px 6px 0; color:var(--text); }
.chip button { background:none; border:none; color:var(--err); cursor:pointer; font-size:12px; 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:11px; 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:12.5px; font-weight:560; } .picker-row .pd { font-size:11px; color:var(--muted); margin-top:2px; }
.ed-label { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:16px 0 6px; }
.ed-check { display:flex; align-items:center; gap:8px; margin:10px 0 0; font-size:13px; cursor:pointer; }
.ed-check input { width:auto; margin:0; }
.rline .l.rl-edit { cursor:pointer; border-radius:8px; 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:8px; 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:12.5px; } .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; }
#gbody.hosting .set-section { max-width:none; }
#gbody.hosting .cmd { display:flex; flex-wrap:wrap; }
#gbody.hosting .cmd code { white-space:pre-wrap; word-break:break-all; }
.one-cmd { background:var(--deep); border:1px solid var(--line); border-radius:12px; 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:12.5px; color:var(--text); line-height:1.6; }
.verdict { display:flex; gap:11px; align-items:flex-start; border-radius:12px; padding:13px 15px; margin-bottom:4px; font-size:13px; 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:50%; display:flex; align-items:center; justify-content:center; font-size:13px; 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:5px; padding:0 4px; font-size:11px; }
.set-label { font-size:12px; 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:9px; padding:9px 11px; font:inherit; font-size:14px; 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:12px;
  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:9px; 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:14px; font-weight:560; }
.set-dc { font-size:12px; color:var(--muted); margin-top:1px; }
.set-tick { color:var(--accent); font-size:15px; width:16px; text-align:center; flex:none; }

/* help / onboarding box */
.help-box { background:var(--input); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-top:4px; }
.help-t { font-size:13px; font-weight:600; margin-bottom:10px; }
.help-step { display:flex; gap:11px; align-items:flex-start; font-size:12.5px; 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:50%; background:var(--bubble2); color:var(--text);
  font-size:11px; 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:5px; padding:1px 5px; font-size:11.5px; color:var(--text); }
.cmd { display:inline-flex; align-items:center; gap:5px; }
.copy-btn { background:var(--bubble2); border:1px solid var(--line); border-radius:6px; color:var(--muted);
  font-size:12px; 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:11px; 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:9px; 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:13px; 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:9px; background:var(--input); border:1px solid var(--line);
  color:var(--text); font:inherit; font-size:13.5px; 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:11px; 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:8px; flex:none;
  background:var(--deep); border:1px solid var(--line); color:var(--text); font:inherit; font-size:13px; 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:7px; font-size:13px; 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:12.5px; color:var(--faint); text-align:center; }

/* ======================= Mobile (end-to-end) ======================= */
.m-back { display:none; }
@media (max-width:820px){
  main, main.sb-collapsed, main.dt-wide, main.dt-rail, main.dt-hidden { grid-template-columns: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:50%; 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; }
  .conn-grid { grid-template-columns: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:16px; 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:17px; }
#search-input::placeholder { color:var(--faint); }
#search-x { color:var(--muted); font-size:15px; } #search-x:hover { color:var(--text); }
.search-results { flex:1; min-height:0; overflow-y:auto; padding:8px; }
.sr-cat { font-size:11px; 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:11px; cursor:pointer; }
.sr-row:hover { 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:16px; border-radius:9px; background:var(--bubble2); }
.sr-ic .cc-ico { width:34px; height:34px; }
.sr-main { min-width:0; flex:1; }
.sr-t { font-size:14px; font-weight:560; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-d { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-empty { padding:22px; text-align:center; color:var(--faint); font-size:13px; }
@media (max-width:820px){ .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:9px; }
.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:14px; padding:20px; max-width:360px; width:90%; box-shadow:0 20px 50px var(--shadow); }
.confirm-msg { font-size:14px; 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:10.5px; 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:10px; 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:11px; 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-q { margin-bottom:10px; }
.cl-tbl { border-collapse:collapse; width:100%; font-size:12.5px; }
.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; background:var(--elev); color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.cl-tbl tbody tr:hover { background:var(--bubble2); }
.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:8px; padding:7px 10px; color:var(--text); font-size:13px; }
.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:5px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:12px; 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:13.5px; } .tk-s { font-size:11.5px; color:var(--muted); margin-top:2px; }
.tk-done .tk-t { text-decoration:line-through; color:var(--muted); }

#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:16px; display:flex; flex-direction:column; overflow:hidden; }
.changelog-list { flex:1; min-height:0; overflow-y:auto; padding:8px 14px; }
.cl-row { padding:11px 4px; border-bottom:1px solid var(--div); }
.cl-s { font-size:13.5px; } .cl-m { font-size:11.5px; 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:7px; color:var(--muted); font-size:13px; 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:8px; color:var(--text); font-size:12.5px; padding:0 6px; }
.pr-pill { font-size:9.5px; font-weight:700; letter-spacing:.02em; padding:1px 6px; border-radius:9px; 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:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.5); }
#login-card .login-logo { opacity:.95; }
#login-card h2 { margin:2px 0 0; font-size:19px; font-weight:650; color:var(--text,#ececf1); }
#login-card .login-sub { margin:0 0 6px; font-size:13px; color:var(--muted,#8a8a93); }
#login-pass { width:100%; box-sizing:border-box; padding:11px 13px; border-radius:11px; font-size:14px;
  background:var(--input,#1d1d24); border:1px solid var(--line,#2a2a33); color:var(--text,#ececf1); outline:none; }
#login-pass: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:14px; font-weight:600; border-radius:11px; cursor:pointer; }
.login-err { width:100%; text-align:center; font-size:12.5px; color:#ff6b6b; }

/* 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:999px;
  background:var(--okbg); color:var(--green); border:1px solid rgba(0,187,85,.35);
  font-size:12px; 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:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--green); font-weight:700; margin-bottom:3px; }
.dc-card .dc-meta { color:var(--muted); font-size:12px; 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:13px; font-weight:600; color:var(--green); }
.dc-card .dc-chosen.err { color:var(--err); }
.dc-card .dc-detail { font-size:13px; color:var(--text); background:var(--bubble2); border-radius:10px; padding:9px 11px; margin:6px 0 10px; line-height:1.45; }
.dc-card .dc-link { display:inline-block; font-size:12.5px; color:var(--accent2); margin:0 0 10px; }
.dc-card .dc-help { font-size:12px; color:var(--muted); margin:4px 0 6px; }
.dc-card .opt-txt { display:flex; flex-direction:column; gap:1px; }
.dc-card .opt-sub { font-size:11.5px; 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){
  /* safe-area insets for notch / home indicator */
  .sb-top { padding-top:calc(12px + env(safe-area-inset-top)); }
  .composer { padding-bottom: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 { touch-action:pan-y; position:relative; transition:transform .22s cubic-bezier(.3,0,.2,1); }
  .msg.swiping { transition:none; }
  /* reply affordance revealed as you swipe a bubble right */
  .msg .swipe-reply { position:absolute; left:-42px; top:50%; transform:translateY(-50%) scale(.6);
    width:30px; height:30px; border-radius:50%; background:var(--okbg); color:var(--green);
    display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s, transform .15s; font-size:15px; }
  .msg.swipe-armed .swipe-reply { opacity:1; transform:translateY(-50%) scale(1); }
  /* hover-only action bar is useless on touch — hide; long-press opens the menu instead */
  .msg-actions { display:none !important; }
}

/* 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:50%; 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){ .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:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:13px; 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-main { min-width:0; flex:1; }
.dc-c-t { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-c-a { font-size:12px; color:var(--muted); margin-top:1px; }


/* voice-to-text mic button */
.ic.mic { color:var(--muted); } .ic.mic:hover { color:var(--text); }
.ic.mic.mic-off { opacity:.5; }
.ic.mic.mic-on { color:#ff5a5a; animation:micpulse 1.1s ease-in-out infinite; }
@keyframes micpulse { 0%,100%{ opacity:1; } 50%{ opacity:.35; } }


/* 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:11.5px; color:var(--muted); text-align:right; }
.eml-f { flex:1; min-width:0; box-sizing:border-box; padding:8px 11px; border-radius:9px; background:var(--input); border:1px solid var(--line); color:var(--text); font:inherit; font-size:13.5px; 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:7px; background:var(--bubble2); cursor:pointer; }
.reply-quote:hover { background:var(--hover); }
.reply-quote .rq-who { font-size:11px; font-weight:600; color:var(--accent2); }
.reply-quote .rq-t { font-size:12px; 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:12px; color:var(--muted); background:none; border:1px solid var(--line); border-radius:999px; 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:8px; margin:10px 0 14px; max-width:560px; }
.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:11px; 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:999px; 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:50%; background:#fff; transition:transform .15s; }
.app-tog input:checked + .sw { background:var(--green, #3fb27f); }
.app-tog input:checked + .sw::after { transform:translateX(14px); }