/*
 * 19.13.2 One look with the phone app (Jeremy: "the phone app just looks waaaay better"). Loaded last, after the theme files.
 * Colours, shapes and spacing only: no layout, permission or behaviour change. Every theme keeps its own colours; the built-in
 * looks use the phone's exact palettes (MyHiveAI-Mobile src/ui.tsx), the Dark and hub-made looks the phone's paletteOf() mix.
 * Rules start with :root[data-theme] so they win over theme-rsc.css, theme-quiet.css and a custom look's inline CSS on shape.
 */

/* ---------------------------------------------------------------- tokens */
:root[data-theme] {
  --lk-bg:var(--bg); --lk-panel:var(--panel); --lk-panel2:color-mix(in srgb, var(--panel) 90%, var(--acc)); --lk-line:var(--line);
  --lk-field:color-mix(in srgb, var(--bg) 75%, #000); --lk-ink:var(--ink); --lk-dim:var(--dim); --lk-acc:var(--acc);
  --lk-pri:var(--acc); --lk-on-pri:var(--bg); --lk-ok:var(--ok); --lk-warn:var(--warn); --lk-bad:var(--bad);
  --lk-me-bg:#1d63d8; --lk-me-line:#5b9dff; --lk-me-ink:#fff; --lk-me-who:#d4e5ff;
  --lk-peer-bg:color-mix(in srgb, var(--acc) 8%, transparent); --lk-peer-line:color-mix(in srgb, var(--acc) 50%, transparent);
  --lk-ring:color-mix(in srgb, var(--lk-acc) 30%, transparent);
  --lk-r-btn:14px; --lk-r-card:16px; --lk-r-pane:18px; --lk-r-field:12px;
}
:root[data-theme="hive"] {
  --bg:#06121f; --panel:#0c1c2d; --line:rgba(120,200,230,.18); --ink:#e8f1f5; --dim:#8ea6b8; --acc:#3ef0ff; --ok:#3ddc84; --warn:#ff9b3d; --bad:#ff5a6e;
  --lk-panel2:#10263a; --lk-field:#081624; --lk-pri:#ffc21a; --lk-on-pri:#1a1033;
  --lk-me-bg:rgba(255,194,26,.14); --lk-me-line:rgba(255,194,26,.35); --lk-me-ink:#e8f1f5; --lk-me-who:#ffc21a;
  --lk-peer-bg:rgba(62,240,255,.06); --lk-peer-line:rgba(62,240,255,.45);
}
:root[data-theme="rsc"] {
  --bg:#031a38; --panel:#0c2448; --line:rgba(77,210,210,.30); --ink:#fff; --dim:#a8bed6; --acc:#4dd2d2; --ok:#21ddaa; --warn:#ffb721; --bad:#ff5664;
  --lk-panel2:#12305c; --lk-field:#021530; --lk-pri:#4dd2d2; --lk-on-pri:#031a38;
  --lk-peer-bg:rgba(63,81,181,.14); --lk-peer-line:rgba(120,140,230,.55);
}
:root[data-theme="quiet-signal"] {
  --bg:#0b0d0f; --panel:#171b1e; --line:rgba(174,183,190,.20); --ink:#f5f7f8; --dim:#aeb7be; --acc:#03bbaa; --ok:#21ddaa; --warn:#ffb721; --bad:#ff5664;
  --lk-panel2:#242a2e; --lk-field:#171b1e; --lk-pri:#03bbaa; --lk-on-pri:#0b0d0f;
  --lk-me-bg:#007d73; --lk-me-line:#03bbaa; --lk-me-ink:#fff; --lk-me-who:#fff;
  --lk-peer-bg:#171b1e; --lk-peer-line:rgba(174,183,190,.20);
}

/* ---------------------------------------------------------------- the page: a flat background, as on the phone */
:root[data-theme] { background:var(--lk-bg); }
:root[data-theme] body { background:var(--lk-bg); background-image:none; color:var(--lk-ink); }
:root[data-theme] a { color:var(--lk-acc); }
:root[data-theme] h2, :root[data-theme] .dlg h3 { color:var(--lk-ink); letter-spacing:.03em; font-weight:700; }
:root[data-theme] .sec, :root[data-theme] .pane > .hd { color:var(--lk-dim); letter-spacing:.08em; font-weight:600; }
:root[data-theme] ::selection { background:color-mix(in srgb, var(--lk-acc) 35%, transparent); }

/* header: solid, one hairline; the main tabs are one segmented bar */
:root[data-theme] header.top { background:color-mix(in srgb, var(--lk-bg) 94%, transparent); border-bottom:1px solid var(--lk-line); backdrop-filter:blur(10px); padding:10px 22px; }
:root[data-theme] header.top nav { background:var(--lk-panel2); border:1px solid var(--lk-line); border-radius:15px; padding:4px; gap:3px; }
:root[data-theme] nav button { border:0; border-radius:11px; padding:7px 15px; color:var(--lk-dim); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:none; background:transparent; }
:root[data-theme] nav button:hover { color:var(--lk-ink); }
:root[data-theme] nav button[data-on='1'] { background:var(--lk-panel); color:var(--lk-pri); border:0; box-shadow:0 1px 2px rgba(0,0,0,.25); }
:root[data-theme] .hd-icon { width:38px; height:38px; border-radius:50%; background:var(--lk-panel); border:1px solid var(--lk-line); color:var(--lk-ink); }
:root[data-theme] .hd-icon:hover, :root[data-theme] .hd-icon.on { background:var(--lk-panel2); border-color:var(--lk-acc); color:var(--lk-acc); }
:root[data-theme] .hd-badge { background:var(--lk-pri); color:var(--lk-on-pri); }

/* ---------------------------------------------------------------- buttons: rounded, solid, bold (the phone's Btn) */
:root[data-theme] .btn { background:var(--lk-panel2); border:1px solid var(--lk-line); border-radius:var(--lk-r-btn); color:var(--lk-ink); padding:7px 16px; font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:none; line-height:1.35; transition:background .15s, border-color .15s, filter .15s; }
:root[data-theme] .btn:hover { background:color-mix(in srgb, var(--lk-panel2) 82%, var(--lk-ink)); }
:root[data-theme] .btn:focus-visible { outline:2px solid var(--lk-acc); outline-offset:2px; }
:root[data-theme] .btn.p { background:var(--lk-pri); border-color:var(--lk-pri); color:var(--lk-on-pri); }
:root[data-theme] .btn.p:hover { background:var(--lk-pri); filter:brightness(1.08); }
:root[data-theme] .btn.g { background:transparent; border-color:var(--lk-line); color:var(--lk-dim); }
:root[data-theme] .btn.g:hover { color:var(--lk-ink); background:color-mix(in srgb, var(--lk-panel2) 60%, transparent); }
:root[data-theme] .btn.d { background:transparent; border-color:var(--lk-bad); color:var(--lk-bad); }
:root[data-theme] .btn.d:hover { background:color-mix(in srgb, var(--lk-bad) 12%, transparent); }
:root[data-theme] .btn.s { padding:4px 12px; font-size:11.5px; border-radius:11px; }
:root[data-theme] .cx-btn { border-radius:11px; border-color:var(--lk-line); color:var(--lk-acc); letter-spacing:.05em; font-weight:600; text-transform:none; padding:4px 11px; }
:root[data-theme] .cx-btn:hover { background:var(--lk-panel2); }
/* round icon buttons (attach, voice, conversation, send): the phone's IconBtn */
:root[data-theme] .hib { width:40px; height:40px; background:var(--lk-panel); border:1px solid var(--lk-line); color:var(--lk-ink); }
:root[data-theme] .hib:hover { background:var(--lk-panel2); border-color:color-mix(in srgb, var(--lk-acc) 60%, var(--lk-line)); }
:root[data-theme] .hib-p { background:var(--lk-pri); border-color:var(--lk-pri); color:var(--lk-on-pri); }
:root[data-theme] .hib-p:hover { background:var(--lk-pri); filter:brightness(1.08); }
:root[data-theme] .hib-d { background:var(--lk-panel); color:var(--lk-bad); border-color:var(--lk-bad); }
:root[data-theme] .hib-on { background:var(--lk-panel2); color:var(--lk-ok); border-color:var(--lk-ok); }
:root[data-theme] .hib-off { color:var(--lk-dim); }
:root[data-theme] .cv-btn.cv-icon { width:40px; height:40px; min-width:40px; background:var(--lk-panel); border:1px solid var(--lk-line); color:var(--lk-ink); }

/* ---------------------------------------------------------------- fields */
:root[data-theme] input, :root[data-theme] select, :root[data-theme] textarea { background:var(--lk-field); border:1px solid var(--lk-line); border-radius:var(--lk-r-field); color:var(--lk-ink); padding:8px 12px; box-shadow:none; }
:root[data-theme] input:focus, :root[data-theme] select:focus, :root[data-theme] textarea:focus { outline:0; border-color:var(--lk-acc); box-shadow:0 0 0 3px var(--lk-ring); }
:root[data-theme] input[type=checkbox], :root[data-theme] input[type=radio] { accent-color:var(--lk-acc); box-shadow:none; padding:0; }
:root[data-theme] input[type=range] { padding:0; border:0; background:none; box-shadow:none; accent-color:var(--lk-acc); }
:root[data-theme] ::placeholder { color:var(--lk-dim); opacity:.75; }

/* ---------------------------------------------------------------- surfaces: flat panels, one hairline, soft corners */
:root[data-theme] .card { background:var(--lk-panel); border:1px solid var(--lk-line); border-radius:var(--lk-r-card); padding:16px 18px; box-shadow:none; }
:root[data-theme] .pane { background:var(--lk-panel); border:1px solid var(--lk-line); border-radius:var(--lk-r-pane); box-shadow:none; overflow:hidden; }
:root[data-theme] .pane > .hd { border-bottom:1px solid var(--lk-line); padding:10px 14px; }
:root[data-theme] .login { background:var(--lk-panel); border:1px solid var(--lk-line); border-radius:20px; box-shadow:0 18px 50px rgba(0,0,0,.35); }
:root[data-theme] .modal { background:rgba(0,0,0,.6); backdrop-filter:blur(2px); }
:root[data-theme] .dlg { background:var(--lk-panel); border:1px solid var(--lk-line); border-radius:20px; box-shadow:0 22px 60px rgba(0,0,0,.55); }
:root[data-theme] .dlg > .row:last-child { background:var(--lk-panel); border-top-color:var(--lk-line); }
:root[data-theme] .menu-pop, :root[data-theme] .hd-pop, :root[data-theme] .mn-list { background:var(--lk-panel); border:1px solid var(--lk-line); border-radius:16px; box-shadow:0 14px 40px rgba(0,0,0,.5); }
:root[data-theme] .menu-pop button, :root[data-theme] .user-item { border-radius:10px; }
:root[data-theme] .menu-pop button:hover, :root[data-theme] .user-item:hover, :root[data-theme] .mn-item.on, :root[data-theme] .mn-item:hover { background:var(--lk-panel2); }
:root[data-theme] .bell-item { border-radius:14px; background:var(--lk-panel2); border-color:var(--lk-line); }
:root[data-theme] .bell-item.unread { border-color:color-mix(in srgb, var(--lk-acc) 55%, transparent); }
:root[data-theme] :is(.ai-tile, .hm-tile) { background:var(--lk-panel); border:1px solid var(--lk-line); border-radius:var(--lk-r-card); padding:12px 16px; }
:root[data-theme] :is(.ai-assign, .ai-list, .us-set, .cx-mtags, .up-fb-list, .mcx-tools, .cx-pick, .us-checks) { background:var(--lk-panel); border-color:var(--lk-line); border-radius:var(--lk-r-card); }
:root[data-theme] .ai-arow { border-top-color:var(--lk-line); }
:root[data-theme] :is(.all-bar, .up-side, .us-area, .us-sum, .rt-noprev, .cx-sug) { border-color:var(--lk-line); border-radius:14px; }
:root[data-theme] .warn { border-radius:12px; }
:root[data-theme] :is(pre.log, .ev-code, .hm-pre, .up-notes) { background:var(--lk-field); border:1px solid var(--lk-line); border-radius:12px; }
:root[data-theme] :is(.rt-drop) { border-radius:16px; border-color:var(--lk-line); }

/* tabs: CHAT / HISTORY / LOG and the side tabs are segmented bars; sub-tabs are soft chips */
:root[data-theme] .cx-tabs { background:var(--lk-panel2); border:1px solid var(--lk-line); border-radius:13px; padding:3px; gap:2px; }
:root[data-theme] .cx-tabs button { border:0; border-radius:10px; padding:5px 12px; color:var(--lk-dim); font-weight:600; letter-spacing:.05em; text-transform:none; background:transparent; }
:root[data-theme] .cx-tabs button:hover { color:var(--lk-ink); }
:root[data-theme] .cx-tabs button[data-on='1'] { background:var(--lk-panel); color:var(--lk-pri); border:0; box-shadow:0 1px 2px rgba(0,0,0,.25); }
:root[data-theme] .cx-sidetabs { gap:2px !important; }
:root[data-theme] .subnav { border-bottom:0; gap:4px; }
:root[data-theme] .subnav button, :root[data-theme] .subnav .sub { border:0; border-radius:11px; padding:6px 13px; opacity:1; color:var(--lk-dim); font-weight:600; text-transform:none; letter-spacing:.04em; }
:root[data-theme] .subnav button:hover { color:var(--lk-ink); background:color-mix(in srgb, var(--lk-panel2) 60%, transparent); }
:root[data-theme] .subnav button[data-on='1'], :root[data-theme] .subnav .sub.on { background:var(--lk-panel2); color:var(--lk-pri); border:0; }
:root[data-theme] .set-nav { border-right-color:var(--lk-line); }
:root[data-theme] .set-nav button { border-left:0; border-radius:10px; }
:root[data-theme] .set-nav button[data-on='1'] { background:var(--lk-panel2); color:var(--lk-pri); }
:root[data-theme] .set-gh { color:var(--lk-dim); }
:root[data-theme] :is(.hud-tabs button, .mk-tab, .mk-cat, .uc-tab) { border-radius:11px; }

/* list rows: rounded rows, no rules between them (the phone's flat conversation rows) */
:root[data-theme] .li { border-bottom:0; border-radius:12px; margin:2px 6px; }
:root[data-theme] .li:hover { background:color-mix(in srgb, var(--lk-panel2) 70%, transparent); }
:root[data-theme] .li[data-on='1'] { background:var(--lk-panel2); box-shadow:inset 3px 0 0 var(--lk-acc); }
:root[data-theme] :is(.cx-histrow, .cx-actrow, .brt-card, .bus .e) { border-bottom-color:var(--lk-line); }
:root[data-theme] .cx-histrow[data-on='1'] { background:var(--lk-panel2); }
:root[data-theme] .list .lh { border-color:var(--lk-line); color:var(--lk-dim); }
.cx-pickrow { background:none; border:1px solid transparent; margin:2px 0 !important; }
:root[data-theme] .cx-pickrow { background:var(--lk-panel2); border-color:var(--lk-line); border-radius:14px; padding:10px 14px; }
:root[data-theme] .cx-pickrow:hover, :root[data-theme] .cx-pickrow:focus-visible { border-color:var(--lk-acc); }

/* small labels: pills, tags and chips are fully round */
:root[data-theme] :is(.pill, .cx-tag, .mm-pill, .hm-pill, .brt-kind, .us-count, .mk-tag, .cx-chip, .uc-chip, .cx-att) { border-radius:999px; }
:root[data-theme] .cx-pjsel { border-radius:999px; }
:root[data-theme] .bi-avatar { border-color:var(--lk-line); }
:root[data-theme] .pl-chev, :root[data-theme] .pl-open, :root[data-theme] .pl-ico { border-radius:12px; }
:root[data-theme] .brtp { border-color:var(--lk-line); border-radius:var(--lk-r-pane); }

/* ---------------------------------------------------------------- chat: the phone's conversation */
/* the chat column sits on the page colour, so bot bubbles (panel colour) stand out as they do on the phone */
:root[data-theme] .console > .pane:not([data-pl]) { background:var(--lk-bg); }
:root[data-theme] .console > .pane:not([data-pl]) > .hd { background:var(--lk-bg); }
:root[data-theme] .cx-chat { padding:16px clamp(12px, 2vw, 26px) 10px; gap:14px; background:var(--lk-bg); grid-template-columns:minmax(0, 1fr); overflow-x:hidden; }
:root[data-theme] .cx-empty { color:var(--lk-dim); }
/* what you send: a solid bubble on the right, its tail at the top right */
:root[data-theme] .cx-chat .m.me { justify-self:end; max-width:min(78%, 46rem); background:var(--lk-me-bg); border:1px solid var(--lk-me-line); color:var(--lk-me-ink); border-radius:18px 5px 18px 18px; padding:10px 14px; font-size:14.5px; line-height:1.45; }
:root[data-theme] .cx-chat .m.me a { color:var(--lk-me-who); }
/* a reply: the speaker once, then its bubbles; the first one has the tail at the top left */
:root[data-theme] .cx-chat .m.bot.cx-turn { justify-self:start; display:grid; grid-template-columns:minmax(0, 1fr); gap:6px; max-width:min(88%, 58rem); min-width:0; padding:0; border:0; background:none; border-radius:0; line-height:1.55; white-space:normal; }
:root[data-theme] .cx-chat .m.bot:not(.cx-turn):not(.cx-drafting) { background:var(--lk-panel); border:1px solid var(--lk-line); border-radius:5px 18px 18px 18px; padding:12px 14px; }
.cx-speaker { display:flex; align-items:center; gap:8px; min-width:0; padding-left:2px; }
.cx-speaker .bi-avatar.small { width:26px; height:26px; margin:0; font-size:.8rem; }
.cx-speaker-n { color:var(--lk-acc, var(--acc)); font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cx-speaker .ai-tag { display:inline; margin:0; font-size:10.5px; white-space:nowrap; }
.cx-bubs { display:grid; grid-template-columns:minmax(0, 1fr); gap:6px; justify-items:start; min-width:0; }
.cx-bub pre, .cx-bub .cx-md-table { max-width:100%; }
:root[data-theme] .cx-bub { max-width:100%; min-width:0; box-sizing:border-box; background:var(--lk-panel); border:1px solid var(--lk-line); border-radius:18px; padding:12px 15px; font-size:14.5px; line-height:1.55; overflow-wrap:anywhere; }
:root[data-theme] .cx-bubs > .cx-bub:first-child { border-top-left-radius:5px; }
:root[data-theme] .cx-chat .m.err .cx-bub { color:var(--lk-bad); border-color:color-mix(in srgb, var(--lk-bad) 45%, var(--lk-line)); }
/* progress notes: one small, quiet bubble that folds away once the answer is there */
:root[data-theme] .cx-bub.cx-prog { background:color-mix(in srgb, var(--lk-panel) 50%, var(--lk-bg)); color:var(--lk-dim); font-size:12.5px; line-height:1.45; padding:7px 13px; border-radius:16px; max-width:min(100%, 44rem); }
.cx-prog-head { all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:baseline; gap:8px; width:100%; min-width:0; }
.cx-prog-head:focus-visible { outline:2px solid var(--lk-acc, var(--acc)); outline-offset:3px; border-radius:6px; }
.cx-prog-chev { flex:none; width:10px; font-size:10px; opacity:.8; }
.cx-prog-word { flex:none; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.cx-prog[data-live='1'] .cx-prog-word { color:var(--lk-ok, var(--ok)); }
.cx-prog[data-live='1'] .cx-prog-word::before { content:''; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:currentColor; vertical-align:1px; animation:lkPulse 1.4s ease-in-out infinite; }
.cx-prog-peek { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.75; }
.cx-prog-list { margin:7px 0 2px; padding-left:11px; border-left:2px solid color-mix(in srgb, var(--lk-ok, var(--ok)) 50%, transparent); display:grid; gap:6px; max-height:min(18rem, 40vh); overflow:auto; overscroll-behavior:contain; }
.cx-prog-note.cx-md p, .cx-prog-note.cx-md ul, .cx-prog-note.cx-md ol { margin:0 0 .25em; }
.cx-prog-note.cx-md :last-child { margin-bottom:0; }
.cx-prog-now { color:var(--lk-ink, var(--ink)); }
@keyframes lkPulse { 50% { opacity:.35; } }
/* copy and read aloud: small, under the reply */
:root[data-theme] .cx-chat .m .cx-acts { position:static; display:flex; gap:2px; margin:0 0 0 4px; }
:root[data-theme] .cx-chat .m .cx-acts > button { opacity:.5; border-radius:8px; padding:3px 7px; color:var(--lk-dim); }
:root[data-theme] .cx-chat .m .cx-acts > button:hover, :root[data-theme] .cx-chat .m .cx-acts > button:focus-visible { opacity:1; background:var(--lk-panel); color:var(--lk-ink); }
:root[data-theme] .cx-chat .m.note { color:var(--lk-dim); font-size:12px; text-align:center; }
:root[data-theme] .cx-chat .m.cx-drafting { color:var(--lk-dim); }
:root[data-theme] .cx-chat .m.cx-drafting .bi-avatar { width:30px; height:30px; }
:root[data-theme] .cx-helper { color:var(--lk-dim); padding-left:2px; }
:root[data-theme] .cx-update-link { color:var(--lk-acc); margin:0 0 0 4px; }
.cx-chat .bi-reaction { margin:4px 0 0 auto; }
/* formatted text inside bubbles */
:root[data-theme] .cx-md code { background:color-mix(in srgb, var(--lk-ink) 12%, transparent); border-radius:6px; }
:root[data-theme] .cx-md pre { background:var(--lk-field); border:1px solid var(--lk-line); border-radius:12px; }
:root[data-theme] .cx-md-table { border-color:var(--lk-line); border-radius:12px; }
:root[data-theme] .cx-md th { background:color-mix(in srgb, var(--lk-panel2) 70%, transparent); color:var(--lk-dim); }
:root[data-theme] .cx-md th, :root[data-theme] .cx-md td { border-bottom-color:var(--lk-line); }
:root[data-theme] .cx-md blockquote { border-left-color:var(--lk-acc); }
:root[data-theme] .cx-md-h { color:var(--lk-ink); }
:root[data-theme] .cx-bub .cx-md-h:first-child { margin-top:0; }
/* cards that live in the chat: bot to bot, reports, approvals, questions */
:root[data-theme] .peer-card { background:var(--lk-peer-bg); border:1px dashed var(--lk-peer-line); border-radius:16px; padding:8px 13px; }
:root[data-theme] .hud-card { background:var(--lk-panel2); border:1px solid var(--lk-line); border-radius:14px; padding:10px 14px; }
:root[data-theme] .hud-card:hover { border-color:var(--lk-acc); background:color-mix(in srgb, var(--lk-panel2) 85%, var(--lk-acc)); }
:root[data-theme] .appr-card { border-radius:16px; }
:root[data-theme] .cx-att-pic { border-radius:14px; border-color:var(--lk-line); }
/* the status lines above the box (what each answer is doing) */
:root[data-theme] .cx-statusrow { border-radius:14px; background:var(--lk-panel); border-color:var(--lk-line); padding:7px 12px; }
:root[data-theme] .cx-status { margin:0 12px 6px; }
:root[data-theme] .cv-bar { border-radius:14px; border-color:var(--lk-line); background:var(--lk-panel); }
/* the message box: round buttons either side of a rounded field, on the page colour (no glowing frame) */
:root[data-theme] .cx-compose { margin:0; padding:10px 12px 12px; gap:8px; align-items:flex-end; background:var(--lk-bg); border:0; border-top:1px solid var(--lk-line); border-radius:0; box-shadow:none; }
:root[data-theme] .cx-compose:focus-within { box-shadow:none; }
:root[data-theme] .cx-compose textarea { background:var(--lk-field); border:1px solid var(--lk-line); border-radius:16px; color:var(--lk-ink); padding:10px 13px; font-size:14.5px; line-height:1.45; min-height:64px; }
:root[data-theme] .cx-compose textarea:focus { border-color:var(--lk-acc); box-shadow:0 0 0 3px var(--lk-ring); }
:root[data-theme] .cx-compose textarea::placeholder { color:var(--lk-dim); opacity:.75; }
:root[data-theme] .cx-chips { padding:6px 12px 0; }
:root[data-theme] .cx-chip { background:var(--lk-panel); border-color:var(--lk-line); }
:root[data-theme] .cx-pill { border-radius:999px; background:var(--lk-panel); border-color:var(--lk-line); color:var(--lk-dim); }
:root[data-theme] .cx-drop { background:color-mix(in srgb, var(--lk-bg) 90%, transparent); border-radius:var(--lk-r-pane); }

/* the user console (operators and viewers) and PEOPLE: the same bubbles */
:root[data-theme] :is(.uc-side, .uc-main) { background:var(--lk-panel); border-color:var(--lk-line); border-radius:var(--lk-r-pane); }
:root[data-theme] .uc-log { background:var(--lk-bg); border-radius:14px; padding:12px; }
:root[data-theme] .uc-line.me .uc-text { display:inline-block; text-align:left; background:var(--lk-me-bg); border:1px solid var(--lk-me-line); color:var(--lk-me-ink); border-radius:18px 5px 18px 18px; padding:9px 14px; }
:root[data-theme] .uc-line.me .uc-who { color:var(--lk-dim); }
:root[data-theme] .uc-line.assistant .uc-text { background:var(--lk-panel); border:1px solid var(--lk-line); border-radius:5px 18px 18px 18px; padding:11px 14px; }
:root[data-theme] .uc-line .uc-who { color:var(--lk-acc); }
:root[data-theme] .uc-item { border-radius:12px; }
:root[data-theme] .uc-item.on { background:var(--lk-panel2); border-color:transparent; box-shadow:inset 3px 0 0 var(--lk-acc); }

/* ---------------------------------------------------------------- phones and narrow windows */
@media (max-width:700px) {
  :root[data-theme] header.top { padding:8px 10px; }
  :root[data-theme] header.top nav { border-radius:14px; }
  :root[data-theme] header.top nav button { padding:6px 10px; font-size:11.5px; }
  :root[data-theme] .pane { border-radius:16px; }
  :root[data-theme] .cx-chat { padding:12px 10px 8px; gap:12px; }
  :root[data-theme] .cx-chat .m.bot.cx-turn { max-width:94%; }
  :root[data-theme] .cx-chat .m.me { max-width:86%; }
  :root[data-theme] .cx-bub { padding:11px 13px; }
  :root[data-theme] .btn { min-height:38px; }
  :root[data-theme] .btn.s { min-height:32px; }
  :root[data-theme] .hib, :root[data-theme] .cv-btn.cv-icon { width:44px; height:44px; min-width:44px; }
}
@media (prefers-reduced-motion: reduce) { .cx-prog[data-live='1'] .cx-prog-word::before { animation:none; } :root[data-theme] .btn { transition:none; } }
/* 19.14.0 a routine, flow, playbook or business-plan run: the chip above its messages in the chat */
.cx-run { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:2px 0 6px 2px; min-width:0; font-size:12px; }
.cx-run-kind { font-weight:800; font-size:10.5px; letter-spacing:.06em; padding:2px 8px; border-radius:999px; background:color-mix(in srgb, var(--lk-acc, var(--acc)) 16%, transparent); color:var(--lk-acc, var(--acc)); }
.cx-run-name { font-weight:700; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--lk-ink, inherit); }
.cx-run-state { color:var(--lk-dim, var(--dim)); }
.cx-run[data-status='running'] .cx-run-state { color:var(--lk-acc, var(--acc)); }
.cx-run[data-status='ok'] .cx-run-state { color:var(--lk-ok, var(--ok)); }
.cx-run[data-status='alert'] .cx-run-state { color:var(--lk-warn, var(--warn)); }
.cx-run[data-status='error'] .cx-run-state, .cx-run[data-status='stopped'] .cx-run-state { color:var(--lk-bad, var(--bad)); }
.cx-run-tasks { border:0; background:none; color:var(--lk-acc, var(--acc)); font:inherit; font-size:11px; font-weight:800; letter-spacing:.04em; cursor:pointer; padding:2px 4px; }
.cx-run-tasks:hover, .cx-run-tasks:focus-visible { text-decoration:underline; }
/* 19.14.0 the timeline: routine jobs and jobs from another chat */
.ctp-kind { display:inline-block; margin-right:6px; padding:1px 7px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.06em; background:color-mix(in srgb, var(--lk-acc, var(--acc)) 16%, transparent); color:var(--lk-acc, var(--acc)); vertical-align:1px; }
.ctp-elsewhere { color:var(--lk-dim, var(--dim)); font-size:11px; }

/* ---------------------------------------------------------------- 20.4.0 the phone's clean list, cards and heads (clean.js)
   Jeremy: "take this clean wonderful design and apply it to the hub UI". Rows are the avatar with its status dot, the name and
   its role, the latest message and when; no buttons in them (the row's round ⋯ shows on hover, focus, the open chat and always
   on touch screens). Favourites across the top, chips instead of tabs, a calm chat head and a rounded message box. */
.cln-av { position:relative; display:inline-flex; flex:none; line-height:0; }
.cln-av > .bi-avatar { width:44px; height:44px; margin:0; font-size:1rem; }
.cln-av-l > .bi-avatar { width:56px; height:56px; font-size:1.3rem; }
.cln-av-h > .bi-avatar { width:38px; height:38px; font-size:.95rem; }
.cln-badge { display:inline-flex; align-items:center; justify-content:center; background:var(--lk-panel2, var(--panel)); color:var(--lk-ink, var(--ink)); font-weight:700; letter-spacing:.02em; }
.cln-st { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; box-sizing:border-box; border:2px solid var(--lk-bg, var(--bg)); background:#6f7c88; }
.cln-av-l > .cln-st { width:15px; height:15px; right:1px; bottom:1px; }
.cln-st[data-st='running'] { background:var(--lk-ok, var(--ok)); }
.cln-st[data-st='busy'] { background:var(--lk-warn, var(--warn)); }
.cln-st[data-st='mode'] { background:#ffc21a; box-shadow:0 0 0 2px rgba(255,194,26,.35); }
.cln-fdot { position:absolute; top:0; right:0; width:13px; height:13px; box-sizing:border-box; border-radius:50%; background:#3b8cff; border:2px solid var(--lk-bg, var(--bg)); }
.cln-star { position:absolute; left:-3px; top:-5px; font-size:14px; line-height:1; color:#ffc21a; text-shadow:0 1px 2px rgba(0,0,0,.6); }
/* round icon buttons: search, +, new conversation, ⋯ */
.cln-ib { all:unset; box-sizing:border-box; width:34px; height:34px; border-radius:50%; display:inline-grid; place-items:center; flex:none; cursor:pointer; color:var(--lk-ink, var(--ink)); transition:background .12s; }
.cln-ib:hover, .cln-ib.on, details[open] > summary.cln-ib { background:var(--lk-panel2, rgba(127,127,127,.18)); }
.cln-ib:focus-visible { outline:2px solid var(--lk-acc, var(--acc)); outline-offset:1px; }
.cln-ib.cln-pri { background:var(--lk-pri, var(--acc)); color:var(--lk-on-pri, var(--bg)); }
.cln-ib.cln-pri:hover { filter:brightness(1.08); }
summary.cln-ib { list-style:none; } summary.cln-ib::-webkit-details-marker { display:none; }
.cln-menu .menu-pop { min-width:220px; }
:root[data-theme] .cln-menu .menu-pop button, :root[data-theme] .cln-menu .menu-pop .btn { display:flex; align-items:center; gap:6px; width:100%; text-align:left; background:none; border:0; border-radius:10px; color:var(--lk-ink); font-size:13px; font-weight:500; letter-spacing:.01em; text-transform:none; padding:9px 12px; min-height:0; }
:root[data-theme] .cln-menu .menu-pop button:hover:not(:disabled) { background:var(--lk-panel2); }
:root[data-theme] .cln-menu .menu-pop button:disabled { opacity:.45; cursor:default; }
:root[data-theme] .cln-menu .menu-pop .danger { color:var(--lk-bad); }
:root[data-theme] .cln-menu .menu-pop .btn.p { color:var(--lk-pri); }
.cln-menu .ctp-badge:not(:empty) { margin-left:auto; }
.cln-tech { padding:6px 12px 8px; border-bottom:1px solid var(--lk-line, var(--line)); margin-bottom:4px; overflow-wrap:anywhere; max-width:320px; line-height:1.45; }
/* a dot on the chat head's ⋯ while tasks are running (their count is inside it) */
.cln-chead .cln-menu { position:relative; }
.cln-chead .cln-menu:has(.ctp-badge:not(:empty)) > summary::after { content:''; position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:var(--lk-ok, var(--ok)); }

/* the head of the chat list: Chats, search, + ; the search box; the chips */
:root[data-theme] .pane > .hd.cln-head { display:flex; flex-direction:column; align-items:stretch; gap:9px; padding:12px 12px 8px; border-bottom:0; color:var(--lk-ink); font-size:inherit; letter-spacing:normal; text-transform:none; font-weight:400; }
.cln-hrow { display:flex; align-items:center; gap:4px; min-width:0; }
.cln-title { font-size:19px; font-weight:800; letter-spacing:.005em; color:var(--lk-ink, var(--ink)); }
.cln-gap { flex:1; }
:root[data-theme] .cln-find { width:100%; box-sizing:border-box; border-radius:999px; padding:8px 14px; }
.cln-find[hidden] { display:none; }
.cln-chips { display:flex; gap:6px; flex-wrap:wrap; }
.cln-chips > button { all:unset; box-sizing:border-box; cursor:pointer; padding:5px 13px; border-radius:999px; font-size:12.5px; font-weight:600; letter-spacing:.01em; color:var(--lk-dim, var(--dim)); background:var(--lk-panel2, transparent); border:1px solid var(--lk-line, var(--line)); white-space:nowrap; }
.cln-chips > button:hover { color:var(--lk-ink, var(--ink)); }
.cln-chips > button[data-on='1'] { background:var(--lk-ink, var(--ink)); color:var(--lk-bg, var(--bg)); border-color:var(--lk-ink, var(--ink)); }
.cln-chips > button:focus-visible { outline:2px solid var(--lk-acc, var(--acc)); outline-offset:2px; }
/* favourites */
.cln-favs { display:flex; gap:4px; padding:2px 6px 10px; }
.cln-fav { all:unset; box-sizing:border-box; cursor:pointer; flex:1 1 0; max-width:96px; min-width:0; display:grid; justify-items:center; gap:6px; padding:8px 4px 6px; border-radius:16px; }
.cln-fav:hover, .cln-fav[data-on='1'] { background:var(--lk-panel2, rgba(127,127,127,.15)); }
.cln-fav:focus-visible { outline:2px solid var(--lk-acc, var(--acc)); }
.cln-fname { font-size:12px; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--lk-ink, var(--ink)); }
/* rows */
#cx-bots.cln-list { padding:0 2px 10px; }
:root[data-theme] #cx-bots .li.cln-row, #cx-bots .li.cln-row { display:flex; flex-wrap:nowrap; align-items:center; gap:12px; padding:9px 8px 9px 10px; margin:1px 4px; border:0; border-radius:14px; box-shadow:none; }
:root[data-theme] #cx-bots .li.cln-row:hover { background:color-mix(in srgb, var(--lk-panel2) 65%, transparent); }
:root[data-theme] #cx-bots .li.cln-row[data-on='1'] { background:var(--lk-panel2); box-shadow:none; }
#cx-bots .li.cln-row:focus-visible { outline:2px solid var(--lk-acc, var(--acc)); outline-offset:-2px; }
#cx-bots .li.cln-row[hidden], .cln-favs[hidden], #cx-bots .lh[hidden] { display:none; }
.cln-main { flex:1; min-width:0; display:grid; gap:3px; }
.cln-top, .cln-sub { display:flex; align-items:baseline; gap:6px; min-width:0; }
.cln-sub { align-items:center; }
.cln-name { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:700; color:var(--lk-ink, var(--ink)); }
.cln-role { flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; color:var(--lk-dim, var(--dim)); }
.cln-role::before { content:'·'; margin-right:5px; opacity:.8; }
.cln-time { flex:none; margin-left:auto; padding-left:4px; font-size:11.5px; color:var(--lk-dim, var(--dim)); white-space:nowrap; }
.cln-prev { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; line-height:1.35; color:var(--lk-dim, var(--dim)); }
.cln-prev.cln-dim { opacity:.7; font-style:italic; }
.cln-new .cln-time { color:#3b8cff; font-weight:700; }
.cln-new .cln-prev { color:var(--lk-ink, var(--ink)); }
.cln-dot { flex:none; width:9px; height:9px; border-radius:50%; background:#3b8cff; }
.cln-row > .cln-menu { flex:none; margin-right:-2px; opacity:0; transition:opacity .12s; }
.cln-row > .cln-menu > summary.cln-ib { width:30px; height:30px; }
.cln-row:hover > .cln-menu, .cln-row:focus-within > .cln-menu, .cln-row[data-on='1'] > .cln-menu, .cln-row > .cln-menu[open] { opacity:1; }
@media (hover:none) { .cln-row > .cln-menu { opacity:.75; } }
:root[data-theme] #cx-bots .lh { border:0; padding:12px 14px 4px; font-size:11px; letter-spacing:.1em; }

/* the chat head: avatar, name, what it runs on; the tabs, + and ⋯ */
:root[data-theme] .pane > .hd.cx-head.cln-chead { display:flex; align-items:center; gap:10px; padding:10px 14px; color:var(--lk-ink); font-size:inherit; letter-spacing:normal; text-transform:none; font-weight:400; }
.cln-chead > .cln-av { align-self:center; }
.cln-chead .cx-tt { min-width:0; gap:1px; }
:root[data-theme] .cln-chead #cx-title { font-size:15.5px; font-weight:700; color:var(--lk-ink); letter-spacing:.005em; }
:root[data-theme] .cln-chead #cx-ai { font-size:12px; margin:0; color:var(--lk-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cln-chead > .cln-cacts { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto; min-width:0; }
.cln-chead #cx-rounds { width:auto; padding:5px 8px; }

/* the message box: one rounded field with its round buttons inside, floating on the page colour */
:root[data-theme] .cx-compose { margin:4px 12px 12px; padding:6px 6px 6px 8px; gap:6px; align-items:flex-end; background:var(--lk-panel); border:1px solid var(--lk-line); border-radius:26px; box-shadow:0 6px 18px rgba(0,0,0,.18); }
:root[data-theme] .cx-compose:focus-within { border-color:color-mix(in srgb, var(--lk-acc) 70%, var(--lk-line)); box-shadow:0 0 0 3px var(--lk-ring), 0 6px 18px rgba(0,0,0,.18); }
:root[data-theme] .cx-compose textarea { background:transparent; border:0; border-radius:0; box-shadow:none; min-height:44px; padding:11px 6px; resize:none; }
:root[data-theme] .cx-compose textarea:focus { border:0; box-shadow:none; }
:root[data-theme] .cx-compose .hib, :root[data-theme] .cx-compose .cv-btn.cv-icon { background:transparent; border-color:transparent; }
:root[data-theme] .cx-compose .hib:hover { background:var(--lk-panel2); }
:root[data-theme] .cx-compose .hib-p { background:var(--lk-pri); border-color:var(--lk-pri); color:var(--lk-on-pri); }
:root[data-theme] .cx-compose .hib-d { color:var(--lk-bad); border-color:var(--lk-bad); }
:root[data-theme] .cx-compose .hib-on { color:var(--lk-ok); border-color:var(--lk-ok); }
:root[data-theme] .cx-compose .cx-tools { display:flex; align-items:center; gap:2px; }

/* the BOTS page: the same look as a card */
:root[data-theme] .bot-card.cln-card { display:grid; gap:10px; padding:16px 16px 12px; border-radius:20px; cursor:pointer; transition:border-color .15s, background .15s; }
:root[data-theme] .bot-card.cln-card:hover { border-color:color-mix(in srgb, var(--lk-acc) 45%, var(--lk-line)); }
.cln-card > .bc-head { display:flex; align-items:center; gap:12px; flex-wrap:nowrap; }
.cln-cid { flex:1; min-width:0; display:grid; gap:3px; }
.cln-card .cln-cid h3 { margin:0; font-size:16px; letter-spacing:.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:none; }
.cln-crole { display:flex; align-items:baseline; gap:6px; min-width:0; font-size:12.5px; color:var(--lk-dim, var(--dim)); }
.cln-crole .ai-tag { display:inline; margin:0 !important; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.cln-crole .ai-tag::before { content:'·'; margin-right:6px; }
.cln-cst[data-st='running'] { color:var(--lk-ok, var(--ok)); }
.cln-cst[data-st='busy'] { color:var(--lk-warn, var(--warn)); }
.cln-cst[data-st='mode'] { color:#ffc21a; }
.cln-starbtn { font-size:17px; color:var(--lk-dim, var(--dim)); }
.cln-starbtn.on { color:#ffc21a; }
.cln-card .bc-desc { min-height:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13.5px; line-height:1.45; }
.cln-clast { display:flex; align-items:baseline; gap:8px; min-width:0; padding:9px 12px; border-radius:14px; background:color-mix(in srgb, var(--lk-panel2, var(--panel)) 75%, transparent); }
.cln-clast .cln-prev { color:var(--lk-ink, var(--ink)); opacity:.9; }
:root[data-theme] .cln-card .bc-acts { border-top:0; padding-top:2px; margin-top:0; }
:root[data-theme] .cln-card .bc-warn { margin:0; }

@media (max-width:700px) {
  .cln-favs { padding:0 4px 8px; }
  :root[data-theme] .cx-compose { margin:4px 8px 8px; }
  .cln-chead .cx-tabs button { padding:5px 9px; }
  .cln-row > .cln-menu { opacity:.75; }
}
@media (prefers-reduced-motion: reduce) { .cln-ib, .cln-row > .cln-menu { transition:none; } }
/* 20.4.0 (after the first screenshots) with a mouse the row's ⋯ takes the place of the time while you point at the row, so a
   narrow list keeps its room for the name; the chips stay on one line (they scroll sideways when the list is very narrow); the
   message box keeps its hint on one line; a DESKTOP button in it is a small pill. */
@media (hover:hover) {
  #cx-bots .li.cln-row { position:relative; }
  .cln-row > .cln-menu { position:absolute; right:6px; top:7px; margin:0; }
  .cln-row[data-on='1']:not(:hover):not(:focus-within) > .cln-menu:not([open]) { opacity:0; }
  .cln-row:hover .cln-time, .cln-row:focus-within .cln-time, .cln-row:has(> .cln-menu[open]) .cln-time { visibility:hidden; }
}
.cln-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.cln-chips::-webkit-scrollbar { display:none; }
.cln-chips > button { padding:4px 11px; font-size:12px; flex:none; }
:root[data-theme] .cx-compose textarea:placeholder-shown { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:root[data-theme] .cx-compose > .btn { border-radius:999px; align-self:center; }
/* 20.4.0 a narrow list (tablets, a dragged-in column) gives the name its room: the grey role goes first; 701-1000 px a little wider */
#cx-bots.cln-list { container-type:inline-size; }
@container (max-width:280px) { .cln-role { display:none; } }
@media (min-width:701px) and (max-width:1000px) { :root[data-theme] .console { --pl-tw:clamp(232px,32vw,300px); } }