/* Super Slava in the browser (task #553): the Telegram app's Mr.X look (control-bot/web/app.css — white page, near-black ink,
   one lime accent, pink for what waits for him, Karantina for the big numbers, the X-buddy per tag), laid out like a chat
   app on a computer: the tasks on the side, the conversation in the middle, and a second screen «מי עובד על מה».
   Hebrew RTL, logical properties only. */
:root {
  --bg: #ffffff; --card: #ffffff; --ink: #0a0b1e; --hint: #5a5d78; --sep: #f0f0f6; --soft: #f5f5f9; --track: #e9e9f0; --line: #e0e0ea;
  --btn: #0a0b1e; --on-btn: #ffffff;
  --lime: #c6ff3d; --lime-hi: #d9ff6b; --lime-bg: #f3ffd6; --lime-ink: #3d5a00;
  --pink: #ff7aa8; --pink-bg: #ffe4ea; --pink-soft: #fff3f7; --pink-ink: #7a0c27;
  --band: #0a0b1e; --band-ink: #ffffff; --band-hint: #b3b5c9;
  --ok: #1a7f37; --bad: #b4123a; --run: #1e4f8f; --link: #1e4f8f;
  --k-video: #fff0e0; --k-video-ink: #8a4b00; --k-code: #e3efff; --k-code-ink: #1e4f8f; --k-design: #efeaff; --k-design-ink: #5b3fb0;
  --k-marketing: #ffe9f3; --k-marketing-ink: #a03a68; --k-research: #e3f9ea; --k-research-ink: #1a6b3a;
  --k-system: #f3ffd6; --k-system-ink: #3d5a00; --k-other: #f0f0f6; --k-other-ink: #5a5d78;
  --cbg: var(--k-other); --cink: var(--k-other-ink); --kf: #e0e0ea;
  --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --top: 60px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0b1e; --card: #14152b; --ink: #f4f5fb; --hint: #a3a6c2; --sep: rgba(255,255,255,.07); --soft: #1b1c33; --track: rgba(255,255,255,.14); --line: rgba(255,255,255,.12);
    --btn: #f4f5fb; --on-btn: #0a0b1e; --lime-bg: #1f2a0c; --lime-ink: #d9ff6b; --pink-bg: #3a1526; --pink-soft: #2a1220; --pink-ink: #ffb3cc;
    --band: #000; --ok: #8fe3a5; --bad: #ff9dbc; --run: #93c5fd; --link: #93c5fd;
    --k-video: #2e2112; --k-video-ink: #ffc48a; --k-code: #13223a; --k-code-ink: #a9cdfd; --k-design: #221c3a; --k-design-ink: #cdbffd;
    --k-marketing: #331a29; --k-marketing-ink: #f9a8d4; --k-research: #12281a; --k-research-ink: #9be8b5; --k-system: #1f2a0c; --k-system-ink: #d9ff6b;
    --k-other: #1b1c33; --k-other-ink: #a3a6c2;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 Heebo, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }

/* the X-buddy (tag mark) and the hero (Super Slava himself) */
.xb { display: block; width: 100%; height: 100%; overflow: visible; }
.xb .xb-b { fill: var(--kf); stroke: #0a0b1e; stroke-width: 8; stroke-linejoin: round; }
.xb ellipse { fill: #0a0b1e; }
.hero { display: block; width: 40px; height: 40px; overflow: visible; }
.hero .cape { fill: var(--pink); stroke: #0a0b1e; stroke-width: 5; stroke-linejoin: round; }
.hero .xb-b { fill: var(--lime); stroke: #0a0b1e; stroke-width: 5; stroke-linejoin: round; }
.hero .mask, .hero .pupil { fill: #0a0b1e; }
.hero .eye { fill: #fff; }
.hero .smile { fill: none; stroke: #0a0b1e; stroke-width: 4; stroke-linecap: round; }
.hero .cheek { fill: var(--pink); }
.c-video { --cbg: var(--k-video); --cink: var(--k-video-ink); --kf: #ffb86b; }
.c-code, .g-site { --cbg: var(--k-code); --cink: var(--k-code-ink); --kf: #93c5fd; }
.c-design { --cbg: var(--k-design); --cink: var(--k-design-ink); --kf: #c4b5fd; }
.c-marketing, .g-marketing { --cbg: var(--k-marketing); --cink: var(--k-marketing-ink); --kf: #f9a8d4; }
.c-research { --cbg: var(--k-research); --cink: var(--k-research-ink); --kf: #86efac; }
.c-system, .g-bot { --cbg: var(--k-system); --cink: var(--k-system-ink); --kf: #c6ff3d; }
.c-other, .g-other { --cbg: var(--k-other); --cink: var(--k-other-ink); --kf: #e0e0ea; }
.g-studio { --cbg: var(--k-design); --cink: var(--k-design-ink); --kf: #c4b5fd; }
.g-video { --cbg: var(--k-video); --cink: var(--k-video-ink); --kf: #ffb86b; }
.bud { width: 34px; height: 34px; border-radius: 50%; background: var(--cbg); display: grid; place-items: center; flex: none; padding: 5px; }
.bud.sm { width: 26px; height: 26px; padding: 4px; }

/* ── the top bar */
.top { position: sticky; top: 0; z-index: 20; height: var(--top); display: flex; align-items: center; gap: 18px; padding-inline: 18px; background: var(--bg); border-block-end: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand b { font-size: 19px; font-weight: 900; letter-spacing: -0.2px; }
.brand b span { background: linear-gradient(transparent 55%, var(--lime) 55%); padding-inline: 2px; }
.tabs { display: flex; gap: 6px; background: var(--soft); border-radius: 999px; padding: 4px; }
.tabs button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font-weight: 700; color: var(--hint); display: flex; gap: 8px; align-items: center; }
.tabs button[aria-selected="true"] { background: var(--btn); color: var(--on-btn); }
.tabs .n { min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 999px; background: var(--pink); color: #0a0b1e; font-size: 12px; display: inline-grid; place-items: center; font-weight: 800; }
.live { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; color: var(--hint); font-size: 13px; }
.live i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.live.stale i { background: var(--bad); }
.out { border: 0; background: transparent; color: var(--hint); font-size: 13px; font-weight: 700; padding: 4px 6px; }
.out:hover { color: var(--ink); }
.stalebar { background: var(--pink-bg); color: var(--pink-ink); padding: 8px 18px; font-size: 14px; font-weight: 600; }

/* ── the chat screen */
.chat { display: grid; grid-template-columns: 340px 1fr; height: calc(100dvh - var(--top)); }
.side { border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--soft); }
.side-head { padding: 14px; display: grid; gap: 10px; }
.newbtn { border: 0; border-radius: var(--r-md); background: var(--lime); color: #0a0b1e; font-weight: 800; padding: 11px 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; }
.newbtn:hover { background: var(--lime-hi); }
.search { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); padding: 9px 12px; width: 100%; }
.list { overflow-y: auto; padding: 0 8px 20px; flex: 1; }
.grp { margin-block: 14px 4px; padding-inline: 8px; font-size: 12px; font-weight: 800; color: var(--hint); display: flex; justify-content: space-between; }
.grp.hot { color: var(--pink-ink); }
.row { color: inherit; text-decoration: none; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; width: 100%; text-align: start; border: 0; background: transparent; border-radius: var(--r-md); padding: 9px 8px; }
.row:hover { background: var(--card); }
.row[aria-current="true"] { background: var(--card); box-shadow: inset 3px 0 0 var(--ink); }
.row .t { font-weight: 700; font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .s { font-size: 12.5px; color: var(--hint); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.row .s.hot { color: var(--pink-ink); font-weight: 700; }
.mini { display: flex; gap: 2px; margin-top: 6px; }
.mini i { height: 4px; flex: 1; border-radius: 2px; background: var(--track); }
.mini i.done, .mini i.skipped { background: var(--ink); }
.mini i.doing { background: var(--lime); }
.mini i.failed { background: var(--bad); }
.mini i.waiting { background: var(--pink); }
.more { border: 0; background: transparent; color: var(--hint); padding: 8px; font-size: 13px; font-weight: 700; }

.conv { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.conv-head { padding: 14px 22px 12px; border-block-end: 1px solid var(--line); display: grid; gap: 8px; }
.conv-head .l1 { display: flex; gap: 12px; align-items: center; }
.conv-head h1 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.25; flex: 1; }
.back { display: none; border: 0; background: var(--soft); border-radius: 50%; width: 38px; height: 38px; font-size: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 800; background: var(--soft); color: var(--hint); white-space: nowrap; }
.chip.working { background: var(--k-code); color: var(--k-code-ink); }
.chip.waiting { background: var(--pink-bg); color: var(--pink-ink); }
.chip.done { background: var(--lime-bg); color: var(--lime-ink); }
.chip.failed { background: var(--pink-bg); color: var(--bad); }
.meta { color: var(--hint); font-size: 13px; }
.prog { display: flex; align-items: center; gap: 12px; }
.prog .bar { flex: 1; display: flex; gap: 3px; }
.prog .bar i { height: 8px; flex: 1; border-radius: 4px; background: var(--track); }
.prog .bar i.done, .prog .bar i.skipped { background: var(--ink); }
.prog .bar i.doing { background: var(--lime); animation: pulse 1.6s ease-in-out infinite; }
.prog .bar i.failed { background: var(--bad); }
.prog .bar i.waiting { background: var(--pink); }
.prog b { font-size: 13px; white-space: nowrap; }
.prog button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 700; }
@keyframes pulse { 50% { opacity: .45; } }
.steps { list-style: none; margin: 0; padding: 4px 0 0; display: grid; gap: 4px; }
.steps li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.steps li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); translate: 0 1px; }
.steps li.done::before, .steps li.skipped::before { background: var(--ink); border-color: var(--ink); }
.steps li.doing::before { background: var(--lime); border-color: #0a0b1e; }
.steps li.failed::before { background: var(--bad); border-color: var(--bad); }
.steps li.waiting::before { background: var(--pink); border-color: var(--pink); }
.steps li.skipped { color: var(--hint); text-decoration: line-through; }
.steps li small { color: var(--hint); }

.msgs { flex: 1; overflow-y: auto; padding: 22px clamp(14px, 4vw, 60px) 30px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: min(720px, 88%); padding: 12px 15px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.msg.me { align-self: flex-end; background: var(--ink); color: var(--bg); border-end-end-radius: 6px; }
.msg.me.pending { opacity: .6; }
.msg.bot { align-self: flex-start; background: var(--soft); border-end-start-radius: 6px; }
.msg .who { display: block; font-size: 12px; font-weight: 800; color: var(--hint); margin-bottom: 4px; white-space: normal; }
.msg.me .who { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.msg .tm { display: block; font-size: 11.5px; opacity: .65; margin-top: 6px; white-space: normal; }
.msg.me a { color: var(--lime); }
.card { align-self: flex-start; max-width: min(760px, 92%); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); padding: 14px 16px; }
.card h3 { margin: 0 0 8px; font-size: 14px; font-weight: 900; display: flex; gap: 8px; align-items: center; }
.card .body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.card.plan { border-color: var(--ink); }
.card.result { background: var(--lime-bg); border-color: transparent; }
.card.err { background: var(--pink-bg); border-color: transparent; }
.card details { margin-top: 10px; }
.card summary { cursor: pointer; font-weight: 700; color: var(--hint); font-size: 13px; }
.card details .body { font-size: 13.5px; color: var(--hint); margin-top: 6px; }
.media { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.media video, .media img { max-width: min(320px, 100%); max-height: 420px; border-radius: 12px; background: #000; }
.media a.lnk { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; text-decoration: none; background: var(--card); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { align-self: center; font-size: 12.5px; color: var(--hint); background: var(--soft); border-radius: 999px; padding: 3px 12px; }
.typing { align-self: flex-start; max-width: min(720px, 88%); border: 1px dashed var(--line); border-radius: 18px; padding: 10px 14px; color: var(--hint); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.typing .dots { display: inline-flex; gap: 4px; margin-inline-end: 6px; }
.typing .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hint); animation: pulse 1.2s infinite; }
.typing .dots i:nth-child(2) { animation-delay: .2s; } .typing .dots i:nth-child(3) { animation-delay: .4s; }
.under { font-size: 12px; opacity: .75; display: block; margin-top: 4px; white-space: normal; }

.dock { border-block-start: 1px solid var(--line); padding: 12px clamp(14px, 4vw, 60px) 16px; display: grid; gap: 10px; background: var(--bg); }
.need { background: var(--pink-soft); border: 1px solid var(--pink-bg); color: var(--pink-ink); border-radius: var(--r-md); padding: 10px 14px; font-size: 14px; }
.need b { display: block; margin-bottom: 4px; }
.need .why { color: var(--hint); font-size: 13px; margin-bottom: 6px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.opt { border: 1px solid var(--ink); background: var(--card); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 14px; text-align: start; }
.opt.star, .opt.go { background: var(--lime); border-color: #0a0b1e; color: #0a0b1e; }
.opt small { display: block; font-weight: 400; color: var(--hint); font-size: 12px; }
.composer { display: flex; gap: 10px; align-items: flex-end; border: 1.5px solid var(--line); border-radius: 18px; padding: 8px 8px 8px 8px; background: var(--card); }
.composer:focus-within { border-color: var(--ink); }
.composer textarea { flex: 1; border: 0; outline: 0; resize: none; background: transparent; min-height: 26px; max-height: 220px; padding: 6px 8px; line-height: 1.5; }
.send { border: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--btn); color: var(--on-btn); font-size: 18px; flex: none; display: grid; place-items: center; }
.send:disabled { opacity: .35; cursor: default; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.acts button { border: 0; background: transparent; color: var(--hint); font-weight: 700; padding: 2px 4px; text-decoration: underline; text-underline-offset: 3px; }
.acts button.danger { color: var(--bad); }

.empty { flex: 1; display: grid; place-items: center; padding: 30px; }
.empty .in { width: min(720px, 100%); display: grid; gap: 18px; text-align: center; }
.empty h2 { margin: 0; font-size: clamp(26px, 3.4vw, 38px); font-weight: 900; }
.empty p { margin: 0; color: var(--hint); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 14px; font-size: 14px; }
.chips button:hover { border-color: var(--ink); }

/* ── the agents screen */
.agents { height: calc(100dvh - var(--top)); overflow-y: auto; padding: 18px clamp(14px, 3vw, 40px) 60px; }
.band { background: var(--band); color: var(--band-ink); border-radius: var(--r-lg); padding: 16px 22px; display: flex; flex-wrap: wrap; gap: 10px 34px; align-items: center; }
.band .k { display: flex; align-items: baseline; gap: 10px; }
.band .k span { font-family: Karantina, Heebo, sans-serif; font-size: 52px; line-height: .9; font-weight: 700; color: var(--lime); }
.band .k.pink span { color: var(--pink); }
.band .k.mute span { color: var(--band-hint); }
.band .k b { font-size: 15px; font-weight: 800; }
.band .macs { margin-inline-start: auto; color: var(--band-hint); font-size: 13px; text-align: end; }
.explain { margin: 14px 2px 0; color: var(--hint); font-size: 14px; }
.rels { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 16px; }
.rels h3, .agroup h2 { margin: 0 0 8px; font-size: 15px; font-weight: 900; }
.rels .morerels { border: 0; background: transparent; color: var(--hint); font-weight: 700; padding: 6px 0 0; }
.rels ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 14px; }
.agroup { margin-top: 26px; }
.agroup h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.agroup h2 small { font-size: 13px; color: var(--hint); font-weight: 700; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.acard { color: inherit; text-decoration: none; text-align: start; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); padding: 14px; display: grid; gap: 9px; align-content: start; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.acard:hover { border-color: var(--ink); transform: translateY(-1px); }
.acard.waiting { border-color: var(--pink); background: var(--pink-soft); }
.acard.quiet { border-style: dashed; }
.acard .h { display: flex; gap: 10px; align-items: flex-start; }
.acard .h b { font-size: 15.5px; line-height: 1.35; font-weight: 800; }
.acard .who { font-size: 12px; color: var(--hint); display: block; margin-top: 2px; }
.acard .now { font-size: 14px; }
.acard .now::before { content: 'עכשיו: '; font-weight: 800; }
.track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.track i { height: 6px; border-radius: 3px; background: var(--track); }
.track i.past { background: var(--ink); }
.track i.cur { background: var(--lime); box-shadow: 0 0 0 1px #0a0b1e inset; animation: pulse 1.8s ease-in-out infinite; }
.tlabel { display: flex; justify-content: space-between; font-size: 12px; color: var(--hint); }
.tlabel b { color: var(--ink); }
.wait { font-size: 13px; font-weight: 700; color: var(--pink-ink); background: var(--pink-bg); border-radius: 999px; padding: 3px 10px; justify-self: start; }
.helpers { font-size: 13px; color: var(--hint); border-top: 1px dashed var(--line); padding-top: 8px; display: grid; gap: 3px; }
.helpers div { display: flex; gap: 6px; align-items: baseline; }
.helpers div::before { content: '↳'; color: var(--ink); }
.foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--hint); }
.idle { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.idle button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--hint); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idle button b { color: var(--ink); font-weight: 700; }
.bg { margin-top: 26px; font-size: 13px; color: var(--hint); }

/* the drawer (one agent) */
.scrim { position: fixed; inset: 0; background: rgba(10, 11, 30, .35); z-index: 40; }
.drawer { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(560px, 100%); background: var(--bg); z-index: 41; overflow-y: auto; padding: 20px 22px 40px; box-shadow: 0 0 40px rgba(0,0,0,.2); display: grid; gap: 16px; align-content: start; }
.drawer .x { justify-self: end; border: 0; background: var(--soft); border-radius: 50%; width: 38px; height: 38px; font-size: 18px; }
.drawer h2 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.3; }
.drawer h3 { margin: 0 0 6px; font-size: 14px; font-weight: 900; }
.drawer .box { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.drawer .box.spec { background: var(--lime-bg); border-color: transparent; }
.drawer details summary { cursor: pointer; color: var(--hint); font-size: 13px; font-weight: 700; margin-top: 8px; }
.drawer details .txt { color: var(--hint); font-size: 13px; margin-top: 6px; }
.drawer .txt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.drawer .recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.drawer .recent li { display: grid; grid-template-columns: 48px 1fr; gap: 8px; overflow-wrap: anywhere; }
.drawer .recent time { color: var(--hint); }
.drawer .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.pbtn { border: 0; border-radius: var(--r-md); background: var(--btn); color: var(--on-btn); font-weight: 800; padding: 10px 16px; }
.pbtn.lime { background: var(--lime); color: #0a0b1e; }
.pbtn.ghost { background: var(--soft); color: var(--ink); }
.toast { position: fixed; inset-block-end: 22px; inset-inline-start: 50%; translate: 50% 0; background: var(--btn); color: var(--on-btn); padding: 10px 18px; border-radius: 999px; font-weight: 700; z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s; }
[dir="rtl"] .toast { translate: 50% 0; }
.toast.on { opacity: 1; }

/* ── phones: one column; the list or the conversation */
@media (max-width: 899px) {
  :root { --top: 56px; }
  .top { gap: 10px; padding-inline: 12px; }
  .brand b { display: none; }
  .tabs button { padding: 7px 12px; font-size: 14px; }
  .live span { display: none; }
  .chat { grid-template-columns: 1fr; }
  .chat .conv { display: none; }
  .chat.open .side { display: none; }
  .chat.open .conv { display: flex; }
  .back { display: grid; place-items: center; }
  .conv-head { padding: 10px 12px; }
  .conv-head h1 { font-size: 17px; }
  .msgs { padding: 14px 12px 20px; }
  .msg, .card { max-width: 94%; }
  .dock { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .grid { grid-template-columns: 1fr; }
  .band { padding: 14px 16px; gap: 8px 22px; }
  .band .k span { font-size: 42px; }
  .band .macs { margin-inline-start: 0; text-align: start; width: 100%; }
  .drawer { width: 100%; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── round 2 (owner 3.11.2026, #553: «שיהיה אינפוגרפי … אני חייב להתאמץ למצוא את המידע, ולא כמו צ'אט GPT»): the bottom line
   first and big, numbers as tiles, tables with bars, every topic a card with an icon, one centred reading column, every
   action a button. Colour only for meaning: lime = good / done, pink = waits for him, ink = neutral. ── */
:root { --read: 800px; }
.dot { inline-size: 10px; block-size: 10px; border-radius: 50%; flex: none; background: var(--track); display: inline-block; }
.dot.wait { background: var(--pink); box-shadow: 0 0 0 3px var(--pink-bg); }
.dot.run { background: var(--lime); box-shadow: 0 0 0 3px var(--lime-bg); animation: pulse 1.8s ease-in-out infinite; }
.dot.ok { background: var(--ink); }
.dot.bad { background: var(--bad); }
.dot.que, .dot.old { background: var(--track); }

/* the side list: mark · title + one line of what came out · a ring or the time */
.row { grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 10px; }
.row .dot { margin-top: 0; }
.row .rb { min-width: 0; }
.row .t { font-size: 14.5px; }
.row .s { -webkit-line-clamp: 2; font-size: 13px; line-height: 1.4; margin-top: 3px; }
.row .rm small { color: var(--hint); font-size: 11.5px; white-space: nowrap; }
.ring { --p: 0; inline-size: 38px; block-size: 38px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ink) calc(var(--p) * 1%), var(--track) 0); }
.ring b { inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: 10.5px; font-weight: 800; }
.grp { align-items: center; margin-block: 18px 6px; }
.grp span:first-child { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.grp .cnt { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: 11.5px; }
.grp.g-waiting { color: var(--pink-ink); }

/* the head of a task: a stepper with every step named */
.stp { display: grid; gap: 8px; }
.stp-top { display: flex; align-items: center; gap: 12px; }
.stp-bar { flex: 1; block-size: 10px; border-radius: 6px; background: var(--track); overflow: hidden; }
.stp-bar i { display: block; block-size: 100%; background: linear-gradient(90deg, var(--ink), #2a2c52); border-radius: 6px; }
[dir="rtl"] .stp-bar i { background: linear-gradient(270deg, var(--ink), #2a2c52); }
.stp-top b { font-size: 14px; white-space: nowrap; }
.stp-now { font-size: 14.5px; }
.stp-now span { font-weight: 800; }
.stp-chips { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.stp-chips li { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 4px; font-size: 12.5px; color: var(--hint); background: var(--card); max-inline-size: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[dir="rtl"] .stp-chips li { padding: 3px 4px 3px 10px; }
.stp-chips .n { inline-size: 20px; block-size: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-weight: 800; font-size: 11px; color: var(--ink); flex: none; }
.stp-chips li.done { color: var(--ink); }
.stp-chips li.done .n { background: var(--ink); color: var(--bg); }
.stp-chips li.doing { border-color: #0a0b1e; color: var(--ink); font-weight: 700; background: var(--lime-bg); }
.stp-chips li.doing .n { background: var(--lime); color: #0a0b1e; }
.stp-chips li.waiting { border-color: var(--pink); color: var(--pink-ink); background: var(--pink-soft); }
.stp-chips li.waiting .n { background: var(--pink); color: #0a0b1e; }
.stp-chips li.failed .n { background: var(--bad); color: #fff; }
.stp-chips li.skipped { text-decoration: line-through; }

/* the conversation: one centred reading column; the bot without a bubble, like ChatGPT */
.msgs { display: block; padding-inline: clamp(12px, 3vw, 40px); }
.col { max-inline-size: var(--read); margin-inline: auto; display: flex; flex-direction: column; gap: 18px; }
.msg { font-size: 15.5px; }
.msg.me { max-width: min(620px, 86%); }
.bb { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.bb .av { inline-size: 34px; block-size: 34px; display: block; }
.bb .av .hero { inline-size: 34px; block-size: 34px; }
.bb .tm { display: block; color: var(--hint); font-size: 11.5px; margin-top: 4px; }
.bb.live .typing { margin: 0; max-width: none; }
.status { display: inline-flex; gap: 8px; align-items: center; max-width: 100%; flex-wrap: wrap; justify-content: center; }
.status .st-t { opacity: .7; }

/* the words of the bot, drawn */
.md { font-size: 15.5px; line-height: 1.7; overflow-wrap: anywhere; }
.md p { margin: 0 0 10px; }
.md p:last-child { margin-bottom: 0; }
.md .md-h { margin: 14px 0 6px; font-size: 15.5px; font-weight: 900; }
.md .md-h.sm { font-size: 14px; color: var(--hint); font-weight: 800; margin: 10px 0 4px; }
.md .md-list { margin: 4px 0 10px; padding-inline-start: 22px; display: grid; gap: 4px; }
.md ul.md-list { list-style: none; padding-inline-start: 18px; }
.md ul.md-list > li { position: relative; }
.md ul.md-list > li::before { content: ''; position: absolute; inset-inline-start: -14px; inset-block-start: .72em; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ink); }
.md ul.md-list.sub > li::before { background: var(--hint); inline-size: 5px; block-size: 5px; }
.md ol.md-list li::marker { font-weight: 800; }
.md .more-items summary { cursor: pointer; color: var(--hint); font-weight: 800; font-size: 13px; padding: 2px 0; }
.md code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .86em; background: var(--soft); border-radius: 6px; padding: 1px 5px; }
.md pre { background: var(--soft); border-radius: 10px; padding: 10px 12px; overflow-x: auto; direction: ltr; text-align: left; }
.md blockquote { margin: 6px 0; padding: 6px 12px; border-inline-start: 3px solid var(--line); color: var(--hint); }
.num.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-weight: 800; background: linear-gradient(transparent 62%, var(--lime-bg) 62%); padding-inline: 1px; white-space: nowrap; }
.lk { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 0 9px; font-size: 13px; text-decoration: none; background: var(--card); color: var(--link); max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: baseline; }
.lk:hover { border-color: var(--link); }
.msg.me .lk { background: transparent; color: var(--lime); border-color: color-mix(in srgb, var(--bg) 30%, transparent); }

/* a table: real rows, the compared column with bars, the total as a band */
.tbl { overflow-x: auto; margin: 8px 0 12px; border: 1px solid var(--line); border-radius: 14px; }
.tbl table { border-collapse: collapse; inline-size: 100%; font-size: 14.5px; }
.tbl th { text-align: start; font-size: 12.5px; color: var(--hint); font-weight: 800; padding: 9px 12px; background: var(--soft); white-space: nowrap; }
.tbl td { padding: 9px 12px; border-top: 1px solid var(--sep); vertical-align: middle; }
.tbl td.bc { position: relative; min-inline-size: 140px; }
.tbl td.bc .bar { position: absolute; inset-block: 7px; inset-inline-start: 6px; background: var(--lime-bg); border-radius: 6px; max-inline-size: calc(100% - 12px); }
.tbl td.bc span { position: relative; font-weight: 800; }
.tbl tr.total td { background: var(--band); color: var(--band-ink); font-weight: 800; border-top: 0; }
.tbl tr.total .num { background: none; color: var(--lime); }

/* an answer / a plan: the bottom line, the tiles, «בקיצור», the topic cards, the next action */
.ans { border: 1px solid var(--line); border-radius: 22px; background: var(--card); padding: clamp(16px, 2.4vw, 26px); display: grid; gap: 16px; }
.ans.plan { border-color: var(--ink); }
.ans.err { background: var(--pink-soft); border-color: var(--pink-bg); }
.kick { font-size: 13px; font-weight: 900; color: var(--hint); letter-spacing: .2px; }
.kick.wait { color: var(--pink-ink); }
.kick.bad { color: var(--bad); }
.hl { margin: 0; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.35; font-weight: 900; }
.hl .num { background: linear-gradient(transparent 60%, var(--lime) 60%); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tile { border-radius: 16px; background: var(--band); color: var(--band-ink); padding: 14px 16px; display: grid; gap: 2px; align-content: start; }
.tile b { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; font-weight: 900; color: var(--lime); overflow-wrap: anywhere; }
.tile span { font-size: 13px; color: var(--band-hint); font-weight: 700; }
.brief { background: var(--lime-bg); border-radius: 16px; padding: 12px 16px; }
.brief .lbl { font-size: 12px; font-weight: 900; color: var(--lime-ink); margin-bottom: 4px; }
.pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15.5px; line-height: 1.6; }
.pts li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; }
.pts li::before { content: '✓'; font-weight: 900; color: var(--lime-ink); }
.pts li.em::before { content: none; }
.pts li.em i { font-style: normal; }
.secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sec { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: var(--bg); min-width: 0; }
.sec.wide { grid-column: 1 / -1; }
.sec h4 { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 900; }
.sec h4 .ic { inline-size: 28px; block-size: 28px; border-radius: 9px; background: var(--soft); display: grid; place-items: center; font-size: 15px; flex: none; }
.sec .md { font-size: 14.5px; }
.alld summary { cursor: pointer; font-weight: 800; color: var(--hint); font-size: 13.5px; }
.alld .secs { margin-top: 10px; }
.pstep { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: none; }
.pstep li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; font-size: 15px; }
.pstep .n { inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-weight: 900; font-size: 13px; }
.nextact { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nextact span { color: var(--hint); font-size: 13px; }
.opt.big { font-size: 15px; padding: 10px 20px; }
.ans .media { margin-top: 0; }

/* agents: every stage named under its piece of the track; the state on the card's edge */
.trk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.trk div { display: grid; gap: 4px; }
.trk i { block-size: 6px; border-radius: 3px; background: var(--track); display: block; }
.trk span { font-size: 10.5px; color: var(--hint); line-height: 1.2; text-align: center; }
.trk .past i { background: var(--ink); }
.trk .cur i { background: var(--lime); box-shadow: 0 0 0 1px #0a0b1e inset; animation: pulse 1.8s ease-in-out infinite; }
.trk .cur span { color: var(--ink); font-weight: 900; }
.acard { border-inline-start: 5px solid var(--track); }
.acard.working { border-inline-start-color: var(--lime); }
.acard.waiting { border-inline-start-color: var(--pink); }
.acard.quiet { border-inline-start-color: var(--bad); }
.acard .h b { font-size: 16.5px; }

@media (max-width: 899px) {
  .secs { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb { grid-template-columns: 28px 1fr; gap: 8px; }
  .bb .av, .bb .av .hero { inline-size: 28px; block-size: 28px; }
  .ans { border-radius: 18px; }
  .stp-chips li { max-inline-size: 200px; }
}