/* Ollie workspace. Light and dark themes share one token set. */
/* Inter 4.001 (SIL OFL 1.1, Inter-OFL.txt) comes with the app: the weight axis only, at text size,
   with Latin, Cyrillic and the marks the interface uses. */
@font-face { font-family: Inter; src: url("/app/Inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("/app/Inter-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
:root {
 color-scheme: light;
 --bg:#f3f7fa; --surface:#fff; --ink:#16323f; --muted:#5d7482; --faint:#8a9fab; --line:#e2ebf0; --line-soft:#edf2f5;
 --accent:#0a8fc2; --accent-ink:#fff; --accent-text:#0a7aa6; --amber:#9d5708; --amber-soft:#fff0d9; --blue:#0a6f9a; --blue-soft:#e1f2fa;
 --red:#b83a33; --red-soft:#fdeaea; --ok:#1b7f55; --ok-soft:#e5f5ed; --bad:#b83a33;
 --b-client:#fff; --b-bot:#dff1f9; --b-op:#0a8fc2; --b-op-ink:#fff; --b-op-who:#d7f0fb; --b-op-t:#c6e8f6;
 --feed-bg:#eaf1f5; --day-bg:#fff; --sys-bg:#ffffffb0; --input-bg:#eef4f7; --note-bg:#f7f3ea; --field-bg:#fff; --bar-bg:var(--surface);
 --bub-shadow:0 1px 1px #0f2f4014; --card-shadow:0 2px 12px #0f2f4012; --elev-shadow:0 6px 14px -4px #0f2f4033; --elev-edge:var(--line); --wa:#25d366; --ig:#e1306c; --test-mark:#7b68b8;
 --test:#6a5a9a; --test-soft:#eeeaf8; --people:#0a6f9a; --hot:#e08a12; --hot-ink:#fff; --scrim:#0008;
 font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.45;
 color: var(--ink); background: var(--bg);
}
@media (prefers-color-scheme: dark) {
 :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg:#0d1820; --surface:#14222c; --ink:#e4edf1; --muted:#8ea3af; --faint:#61798a; --line:#22343f; --line-soft:#1a2b36;
  --accent:#43c6e8; --accent-ink:#052430; --accent-text:#72d2f1; --amber:#f3b555; --amber-soft:#3a2b14; --blue:#72d2f1; --blue-soft:#123848;
  --red:#ff8078; --red-soft:#3e1d1d; --ok:#4fd49b; --ok-soft:#12352a; --bad:#ff8078;
  --b-client:#1b2d39; --b-bot:#0f3a4a; --b-op:#34507d; --b-op-ink:#fff; --b-op-who:#c7d7f5; --b-op-t:#a9bbd9;
  --feed-bg:#0d1820; --day-bg:#1b2d39; --sys-bg:#14222c; --input-bg:#1b2d39; --note-bg:#2a2616; --field-bg:#14222c; --bar-bg:#101d26;
  --bub-shadow:none; --card-shadow:0 0 0 1px #43c6e833; --elev-shadow:0 10px 20px -6px #000; --elev-edge:#34505f; --wa:#1faa55; --ig:#c9335f; --test-mark:#6d5ca8;
  --test:#c4b5f5; --test-soft:#2a2440; --people:#a9bdf0; --hot:#f3b555; --hot-ink:#1a1205; --scrim:#000a;
 }
}
:root[data-theme="dark"] {
 color-scheme: dark;
 --bg:#0d1820; --surface:#14222c; --ink:#e4edf1; --muted:#8ea3af; --faint:#61798a; --line:#22343f; --line-soft:#1a2b36;
 --accent:#43c6e8; --accent-ink:#052430; --accent-text:#72d2f1; --amber:#f3b555; --amber-soft:#3a2b14; --blue:#72d2f1; --blue-soft:#123848;
 --red:#ff8078; --red-soft:#3e1d1d; --ok:#4fd49b; --ok-soft:#12352a; --bad:#ff8078;
 --b-client:#1b2d39; --b-bot:#0f3a4a; --b-op:#34507d; --b-op-ink:#fff; --b-op-who:#c7d7f5; --b-op-t:#a9bbd9;
 --feed-bg:#0d1820; --day-bg:#1b2d39; --sys-bg:#14222c; --input-bg:#1b2d39; --note-bg:#2a2616; --field-bg:#14222c; --bar-bg:#101d26;
 --bub-shadow:none; --card-shadow:0 0 0 1px #43c6e833; --elev-shadow:0 10px 20px -6px #000; --elev-edge:#34505f; --wa:#1faa55; --ig:#c9335f; --test-mark:#6d5ca8;
 --test:#c4b5f5; --test-soft:#2a2440; --people:#a9bdf0; --hot:#f3b555; --hot-ink:#1a1205; --scrim:#000a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body { -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: var(--accent-text); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
.i { width: 18px; height: 18px; flex-shrink: 0; }

/* Sign-in */
.login-page { min-height: 100%; display: grid; place-items: center; padding: 16px; overflow: auto; }
.login-card { width: min(380px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.login-card .brand { margin-bottom: 8px; }
.login-card .brand h1 { font-size: 22px; margin: 0; }
.login-card form { display: flex; flex-direction: column; gap: 8px; }
.login-card label { font-size: 13px; color: var(--muted); }
.login-card input { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.login-card button { font-weight: 650; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.login-card button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; margin-top: 8px; }
.login-card button:disabled { opacity: .5; }
#login-error { color: var(--bad); min-height: 1.4em; margin: 0; }

/* Common atoms */
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
.ib { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; flex-shrink: 0; padding: 0; color: var(--ink); }
.ib:hover { background: var(--input-bg); }
.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 650; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.btn .i { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.btn.danger { background: var(--red); border-color: transparent; color: var(--surface); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.small { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 650; color: #fff; flex-shrink: 0; font-size: 15px; background: #5d7482; }
.reason { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 650; padding: 2px 8px 2px 6px; border-radius: 999px; white-space: nowrap; line-height: 1.35; }
.reason .i { width: 13px; height: 13px; }
.r-request { background: var(--amber-soft); color: var(--amber); }
.r-staff { background: var(--blue-soft); color: var(--blue); }
.r-failure { background: var(--red-soft); color: var(--red); }
/* The channel mark sits on the avatar's corner, cut out by a ring of the row's colour. */
.avatar { position: relative; }
.badge { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 2px var(--badge-ring, var(--surface)); transition: box-shadow .15s var(--ease-out); }
.badge .i { width: 62%; height: 62%; }
.avatar .face { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar .face-icon { display: grid; place-items: center; width: 100%; height: 100%; }
.avatar .face-icon .i { width: 48%; height: 48%; }
.t .tick { letter-spacing: -2px; }
.t .tick.read { color: var(--accent-text); }
.side-fields, .linker, .link-actions, .link-event, .link-note, .hist { flex-shrink: 0; }
.side-fields { margin: 0 16px 4px; }
.also { display: flex; gap: 4px; flex-shrink: 0; }
.also-ch { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.also-ch .i { width: 15px; height: 15px; }
.hist.linked { display: flex; align-items: center; gap: 10px; }
.hist.linked .avatar { width: 32px; height: 32px; font-size: 12px; }
.hist.linked small, .link-row small, .link-event small { display: block; color: var(--muted); font-size: 12px; }
.link-note { margin: 0 16px 8px; color: var(--muted); font-size: 13px; }
.link-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 16px 10px; }
.linker { margin: 0 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.link-hint { color: var(--muted); padding: 0 4px; }
.link-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.link-row .avatar { width: 32px; height: 32px; font-size: 12px; }
.link-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.link-row small.warn { color: var(--amber); }
.link-search { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface); color: var(--ink); font-size: 16px; }
.link-event { margin: 0 16px 8px; font-size: 13px; }
.msg-err { margin-top: 4px; font-size: 12px; color: var(--red); overflow-wrap: anywhere; }
.b-test .i { stroke-width: 2.6; }
.b-whatsapp { background: var(--wa); }
.b-instagram { background: var(--ig); }
.b-test { background: var(--test-mark); }
.chline { overflow: hidden; text-overflow: ellipsis; }
/* Who answers: green the bot, amber people until their silence, red people
   until someone returns it. Shape tells them apart as well as colour; --cut
   is the colour behind the crossed-out robot's stroke. */
.st { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 0; padding: 0; flex-shrink: 0; cursor: pointer; background: var(--st-bg); color: var(--st); --cut: var(--st-bg); }
.st .i { width: 20px; height: 20px; }
.s-bot { --st: var(--ok); --st-bg: var(--ok-soft); }
.s-temp { --st: var(--amber); --st-bg: var(--amber-soft); }
.s-kept { --st: var(--red); --st-bg: var(--red-soft); }
.rs { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--st-bg); color: var(--st); --cut: var(--st-bg); }
.rs .i { width: 15px; height: 15px; }
/* The gap around the crossed-out robot's stroke, in the colour behind it. */
.cut { stroke: var(--cut, var(--surface)); stroke-width: 4.6; }
/* The usual state stays quiet in the list: an outline without a disc. */
.rs.s-bot { background: transparent; opacity: .6; }

/* Shell */
/* --app-height: the window height where 100dvh is unreliable (viewport.js). */
.shell { height: var(--app-height, 100dvh); display: flex; flex-direction: column; }
.appbar { height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 18px; padding: 0 16px 0 20px; background: var(--bar-bg); border-bottom: 1px solid var(--line); }
.navs { display: flex; gap: 4px; }
.navs a { padding: 8px 14px; border-radius: 9px; font-weight: 600; color: var(--muted); font-size: 14px; display: flex; gap: 6px; align-items: center; text-decoration: none; }
.navs a.on { background: var(--input-bg); color: var(--ink); }
.cnt { background: var(--hot); color: var(--hot-ink); border-radius: 9px; font-size: 11px; padding: 0 6px; font-weight: 750; line-height: 17px; }
.me { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.tswitch { display: flex; background: var(--input-bg); border-radius: 10px; padding: 3px; gap: 2px; }
.tswitch button { width: 34px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); border: 0; background: transparent; cursor: pointer; padding: 0; }
.tswitch button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px #0002; }
.tswitch .i { width: 16px; height: 16px; }
.body { flex: 1; min-height: 0; display: flex; position: relative; }
.botoff { display: flex; align-items: center; gap: 10px; padding: 9px 20px; background: var(--amber-soft); color: var(--amber); font-size: 13.5px; border-bottom: 1px solid var(--line); flex-shrink: 0; flex-wrap: wrap; }
.botoff .i { width: 17px; height: 17px; }
.botoff small { color: var(--ink); opacity: .8; font-size: 12.5px; }
.botoff[hidden][data-botoff] { display: none !important; }
/* A newer build is on the server: a strip on top of every screen until the
   page reloads. It pushes the screen down and covers nothing. */
.upd { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 16px; background: var(--blue-soft); color: var(--blue); border-bottom: 1px solid var(--line); flex-shrink: 0; font-size: 13.5px; font-weight: 600; }
.upd[hidden] { display: none; }
.upd-short { display: none; }
@media (max-width: 359px) { .upd-long { display: none; } .upd-short { display: inline; } .upd { justify-content: space-between; } }
.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); }
.list-pane { width: 380px; flex-shrink: 0; border-right: 1px solid var(--line); }
.chat-pane { flex: 1; background: var(--feed-bg); }
.side-pane { width: 340px; flex-shrink: 0; border-left: 1px solid var(--line); background: var(--bg); overflow-y: auto; }
.only-narrow { display: none !important; }
.empty-chat { margin: auto; color: var(--muted); font-size: 14px; }

/* List */
.topbar { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 6px; background: var(--bar-bg); border-bottom: 1px solid var(--line); min-height: 56px; flex-shrink: 0; }
.topbar h1 { font-size: 20px; font-weight: 750; flex: 1; margin: 0 0 0 4px; letter-spacing: -.01em; }
.search { margin: 10px 12px 4px; height: 40px; border-radius: 20px; background: var(--input-bg); display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--faint); flex-shrink: 0; }
.search .i { width: 16px; height: 16px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.fold { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); background: var(--bar-bg); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.fold a { padding: 11px 8px 10px; font-size: 13.5px; font-weight: 650; color: var(--muted); border-bottom: 2.5px solid transparent; display: flex; gap: 5px; align-items: center; white-space: nowrap; text-decoration: none; }
.fold a.on { color: var(--ink); border-color: var(--accent); }
.fold .n { background: var(--line); color: var(--ink); border-radius: 9px; font-size: 11px; font-weight: 750; padding: 0 6px; line-height: 17px; }
.fold .n.hot { background: var(--hot); color: var(--hot-ink); }
.scroll { overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.row { display: flex; gap: 11px; padding: 10px 14px; align-items: center; border-bottom: 1px solid var(--line-soft); background: var(--surface); color: var(--ink); text-decoration: none; }
.row:hover { background: var(--input-bg); --badge-ring: var(--input-bg); }
.row.on { background: var(--blue-soft); --badge-ring: var(--blue-soft); }
.r-main { flex: 1; min-width: 0; }
.r-top { display: flex; gap: 6px; align-items: center; }
.r-name { font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.r-time { font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.r-prev { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.r-meta { display: flex; gap: 6px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
.list-note { padding: 28px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.list-sec { padding: 12px 14px 6px; font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.pinmark { display: grid; place-items: center; color: var(--muted); flex-shrink: 0; }
.pinmark .i { width: 15px; height: 15px; }
.more { display: block; margin: 10px auto 16px; }

/* Conversation */
.chead { display: flex; align-items: center; gap: 9px; padding: 8px 10px 8px 8px; background: var(--bar-bg); border-bottom: 1px solid var(--line); flex-shrink: 0; min-height: 56px; }
.chead .avatar { width: 38px; height: 38px; font-size: 13px; --badge-ring: var(--bar-bg); }
.chead .badge { width: 15px; height: 15px; }
.ch-info { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: 0; cursor: pointer; }
.ch-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-sub { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; }
/* Open reasons lie above the feed: a raised layer, so an open request and
   the notes below it never read as one block. */
.attn { display: flex; flex-direction: column; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--elev-edge); max-height: 60%; overflow-y: auto; position: relative; z-index: 1; box-shadow: var(--elev-shadow); }
.attn-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; }
.attn-row + .attn-row { border-top: 1px solid var(--line-soft); }
.attn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; color: inherit; text-decoration: none; }
div.attn-main { cursor: default; }
.attn-text { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.req-card { padding: 0 12px 12px; }
.fields { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.field { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; border-top: 1px solid var(--line); background: var(--field-bg); }
.field:first-child { border-top: 0; }
.f-l { font-size: 11.5px; color: var(--muted); }
.f-v { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.f-v small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 450; }
.copy { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--accent-text); display: grid; place-items: center; padding: 0; cursor: pointer; }
.copy .i { width: 15px; height: 15px; }
.copy.done { color: var(--ok); border-color: var(--ok); }
.req-note { margin-top: 8px; font-size: 13px; background: var(--input-bg); border-left: 3px solid var(--amber); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.req-note b { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
/* The request's actions close the panel: when the card is taller than the
   panel, its fields scroll above them, so the panel never ends mid-text. */
.req-foot { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 1; background: var(--surface); padding: 8px 0 2px; border-top: 1px solid var(--line-soft); }
.req-foot .hint { font-size: 12px; color: var(--muted); flex-basis: 100%; }
/* «Готово» on the right, where the thumb is and away from the other actions. */
.req-foot .btn:last-child { margin-left: auto; }
.feed { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.feed > :first-child { margin-top: auto; }
.day { align-self: center; font-size: 11.5px; color: var(--muted); background: var(--day-bg); padding: 3px 10px; border-radius: 999px; }
.msg { display: flex; }
.m-client { justify-content: flex-start; }
.m-bot, .m-employee { justify-content: flex-end; }
.bubble { max-width: min(84%, 620px); padding: 8px 11px 6px; border-radius: 14px; background: var(--b-client); font-size: 14px; box-shadow: var(--bub-shadow); overflow-wrap: anywhere; }
.m-bot .bubble { background: var(--b-bot); }
.m-employee .bubble { background: var(--b-op); color: var(--b-op-ink); }
.m-employee .bubble a { color: inherit; }
.who { display: flex; gap: 4px; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--accent-text); margin-bottom: 2px; }
.who .i { width: 13px; height: 13px; }
.m-employee .who { color: var(--b-op-who); }
.text { white-space: pre-wrap; }
.text b, .md-h { font-weight: 700; }
.text code, .md-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: color-mix(in srgb, currentColor 10%, transparent); border-radius: 4px; }
.text code { padding: 0 3px; }
.md-code { padding: 6px 8px; margin: 4px 0; overflow-wrap: anywhere; }
.md-quote { border-left: 3px solid color-mix(in srgb, currentColor 35%, transparent); padding-left: 8px; }
.md-li { padding-left: 1.1em; text-indent: -1.1em; }
.md-rule { height: .6em; }
.text a { text-decoration: underline; overflow-wrap: anywhere; }
.t { display: flex; gap: 6px; justify-content: flex-end; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.m-employee .t { color: var(--b-op-t); }
.t .warn { color: var(--red); font-weight: 650; }
.m-employee .t .warn { color: #ffd2cf; }
.m-employee .t .tick.read { color: var(--b-op-ink); font-weight: 700; }
.m-employee .msg-err { color: #ffd2cf; }
.deleted { font-style: italic; color: var(--muted); }
.flash .bubble, .flash.note { outline: 2px solid var(--accent); }
.sys { align-self: center; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); padding: 4px 11px; border-radius: 8px; background: var(--sys-bg); border: 1px dashed var(--line); text-align: center; }
.sys .i { width: 14px; height: 14px; }
.note { align-self: stretch; max-width: 680px; margin: 0 auto; width: 100%; background: var(--note-bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; font-size: 13px; }
.note .who { color: var(--muted); }
.note.ask .who { color: var(--blue); }
.note .text { overflow-wrap: anywhere; }
.note-links { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; }
.photo { display: block; max-width: 260px; max-height: 260px; border-radius: 10px; margin-bottom: 4px; background: var(--input-bg); }
.file { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--input-bg); color: var(--ink); text-decoration: none; margin-bottom: 4px; font-size: 13px; }
.m-employee .file { background: #ffffff26; color: inherit; }
.file small { color: var(--muted); }
.m-employee .file small { color: var(--b-op-t); }
audio { display: block; width: min(280px, 100%); height: 40px; margin-bottom: 4px; }
.transcript { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 13px; white-space: pre-wrap; }
.m-employee .transcript { border-color: #ffffff40; }
.tr-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; font-weight: 700; margin-bottom: 1px; }
.older { align-self: center; }
.composer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); flex-shrink: 0; }
/* The keyboard covers the home indicator: no inset for it (viewport.js). */
.keyboard .composer { padding-bottom: 8px; }
.c-row { display: flex; align-items: flex-end; gap: 6px; }
.c-row textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 40vh; resize: none; border-radius: 20px; background: var(--input-bg); border: 0; padding: 10px 14px; font: inherit; font-size: 14.5px; color: var(--ink); outline: none; line-height: 1.4; }
.c-row .round { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); border: 0; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; padding: 0; }
.c-row .round.rec { background: var(--red); color: #fff; }
.c-row .ib { color: var(--muted); height: 42px; }
.composer.recording .c-row > textarea, .composer.recording .c-row > .ib { display: none; }
.rec-bar { flex: 1; min-width: 0; height: 42px; display: flex; align-items: center; gap: 8px; padding-right: 12px; border-radius: 21px; background: var(--input-bg); }
.rec-bar .ib { color: var(--muted); }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex-shrink: 0; animation: rec-pulse 1.2s ease-in-out infinite; }
@keyframes rec-pulse { 50% { opacity: .25; } }
.rec-time { font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 2.6em; }
.rec-level { flex: 1; min-width: 0; height: 26px; color: var(--muted); }
.voice-file small { display: block; }
.voice { display: flex; align-items: center; gap: 10px; min-width: min(240px, 60vw); padding: 2px 0; }
.voice-play { width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; flex-shrink: 0; display: grid; place-items: center; cursor: pointer; background: var(--accent); color: var(--accent-ink); }
.voice-play .i { width: 18px; height: 18px; }
.voice-bar { flex: 1; min-width: 60px; height: 22px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --played: 0%; --track: color-mix(in srgb, currentColor 22%, transparent); }
.voice-bar::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--played), var(--track) var(--played)); }
.voice-bar::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--played), var(--track) var(--played)); }
.voice-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: var(--accent); border: 0; }
.voice-bar::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 0; }
.voice-bar:disabled { cursor: default; opacity: .5; }
.voice-time { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 6.2em; text-align: right; white-space: nowrap; }
.m-employee .voice-play { background: var(--b-op-ink); color: var(--b-op); }
.m-employee .voice-bar { --accent: var(--b-op-ink); }
.m-employee .voice-time { color: var(--b-op-t); }
.c-status { font-size: 12.5px; color: var(--muted); padding: 0 6px 6px; display: flex; gap: 8px; align-items: center; }
.c-status .btn { margin-left: auto; }
.closed-note { display: flex; gap: 8px; font-size: 12.5px; background: var(--amber-soft); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; line-height: 1.4; }
.closed-note .i { color: var(--amber); }

/* Client panel */
.side-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; min-height: 56px; border-bottom: 1px solid var(--line); background: var(--surface); }
.side-head b { flex: 1; font-size: 16px; }
.profile { padding: 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; background: var(--surface); }
.pf-top { display: flex; gap: 12px; align-items: center; }
.pf-top .avatar { width: 52px; height: 52px; font-size: 17px; }
.pf-top .badge { width: 19px; height: 19px; }
.pf-name { font-weight: 750; font-size: 17px; overflow-wrap: anywhere; }
.pf-sub { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 10px; font-size: 13.5px; align-items: baseline; }
.kv > span:nth-child(odd) { color: var(--muted); }
.link-btn { border: 0; background: transparent; color: var(--accent-text); font-weight: 600; padding: 0; cursor: pointer; font-size: 13px; }
.name-form { display: flex; gap: 6px; }
.name-form input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.side-sec { padding: 14px 16px 6px; font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.hist { display: block; color: var(--ink); text-decoration: none; margin: 0 12px 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; }
.hist-h { display: flex; gap: 6px; align-items: center; font-weight: 650; margin-bottom: 4px; }
.hist-h span { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.hist p { margin: 0; white-space: pre-wrap; color: var(--muted); max-height: 7.2em; overflow: hidden; }

/* Menu and messages */
.drawer-bg { position: fixed; inset: 0; background: var(--scrim); display: flex; z-index: 20; }
.drawer { width: min(300px, 86vw); background: var(--surface); height: 100%; display: flex; flex-direction: column; padding: calc(18px + env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom)); overflow-y: auto; }
.dr-me { display: flex; gap: 10px; align-items: center; padding: 0 18px 16px; border-bottom: 1px solid var(--line); }
.dr-me b { display: block; font-size: 15px; }
.dr-me div span { font-size: 12.5px; color: var(--muted); }
.dr-item { display: flex; gap: 12px; align-items: center; padding: 12px 18px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; }
.dr-item.on { color: var(--accent-text); background: var(--blue-soft); }
.dr-item .cnt { margin-left: auto; }
.dr-bottom { margin-top: auto; }
.dr-item small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); }
.ib.push-on { color: var(--accent-text); }
.dr-sec { padding: 16px 18px 8px; font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); border-top: 1px solid var(--line); margin-top: 8px; }
.theme-seg { display: flex; margin: 0 14px; background: var(--input-bg); border-radius: 12px; padding: 3px; }
.theme-seg button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border-radius: 10px; font-size: 12px; font-weight: 650; color: var(--muted); border: 0; background: transparent; cursor: pointer; }
.theme-seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px #0002; }
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 10px; font-size: 13.5px; max-width: calc(100vw - 32px); z-index: 30; box-shadow: 0 4px 18px #0004; }
.toast.error { background: var(--red); color: #fff; }

/* Rules */
.shell[data-page="rules"] .body { display: none; }
.shell[data-page="rules"] .rules-page { display: flex; }
.rules-page { flex: 1; min-height: 0; flex-direction: column; }
.rules-body { flex: 1; min-height: 0; display: flex; }
.rp-doc { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); border-right: 1px solid var(--line); }
.rp-chat { width: 430px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--surface); min-height: 0; }
.rp-chat .feed { background: var(--feed-bg); }
.pane-h { padding: 14px 18px 12px; font-weight: 750; font-size: 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.rp-sheet { flex: 1; min-height: 0; width: min(820px, calc(100% - 32px)); margin: 16px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px 12px 0 0; display: flex; flex-direction: column; overflow: hidden; }
.rp-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rp-head b { font-size: 16px; }
.rp-head .sub { color: var(--muted); font-size: 12.5px; }
.rp-head .grow { flex: 1; }
.mini-seg { display: flex; background: var(--input-bg); border-radius: 8px; padding: 2px; }
.mini-seg button { padding: 5px 10px; border-radius: 6px; font-weight: 650; font-size: 12.5px; color: var(--muted); border: 0; background: transparent; cursor: pointer; }
.mini-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px #0002; }
.rdoc { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 22px 24px; font-size: 14.5px; line-height: 1.6; }
.rdoc h4 { margin: 18px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rdoc h4:first-child { margin-top: 0; }
.rtext { white-space: pre-wrap; overflow-wrap: anywhere; }
.rtext ins { text-decoration: none; background: var(--ok-soft); box-shadow: inset 0 -2px 0 var(--ok); border-radius: 2px; }
.rtext del { background: var(--red-soft); color: var(--red); text-decoration-color: var(--red); border-radius: 2px; }
.rtext .gap { display: block; color: var(--faint); text-align: center; letter-spacing: .3em; margin: 4px 0; }
.rtext.empty { color: var(--muted); font-style: italic; }
/* The publish bar is in the interface's own soft tones: blue while there are
   changes to publish, amber while asking to confirm. */
.pubbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 16px; background: var(--blue-soft); color: var(--ink); border-top: 1px solid var(--line); flex-shrink: 0; flex-wrap: wrap; }
.pubbar.asking { background: var(--amber-soft); }
/* Two answers stay together on the right; on a phone the text takes its own
   line above them, on a wide screen it shares the line when it fits. */
.pubbar.asking .btn.ghost, .pubbar.two .btn.ghost { margin-left: auto; }
@media (max-width: 899px) { .pubbar.asking > span, .pubbar.two > span { flex-basis: 100%; } }
.pubbar .btn .short { display: none; }
@media (max-width: 359px) { .pubbar .btn .long { display: none; } .pubbar .btn .short { display: inline; } }
.pubbar > span { flex: 1; min-width: 180px; font-size: 13px; line-height: 1.35; }
.pubbar .btn { background: var(--accent); color: var(--accent-ink); border: 0; }
.pubbar .btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.pubbar .btn.confirm { background: var(--hot); color: var(--hot-ink); }
.pubbar .btn.danger { background: var(--red); color: var(--surface); }
.pubbar.quiet { background: var(--surface); color: var(--muted); border-top: 1px solid var(--line); }
.hist-list { display: flex; flex-direction: column; gap: 8px; }
.hist-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); flex-wrap: wrap; }
.hist-row b { font-size: 14px; }
.hist-row span { color: var(--muted); font-size: 12.5px; flex: 1; min-width: 140px; }
.hist-view { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--input-bg); }
.typing { align-self: flex-start; font-size: 12.5px; color: var(--muted); padding: 4px 10px; }
.m-editor { justify-content: flex-start; }
.navs .dot, .dr-item .dot, .rtabs .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hot); margin-left: 5px; }
.rtabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bar-bg); flex-shrink: 0; }
.rtabs a { padding: 10px 0; font-size: 13.5px; font-weight: 650; color: var(--muted); border-bottom: 2.5px solid transparent; white-space: nowrap; text-decoration: none; display: flex; align-items: center; }
.rtabs a.on { color: var(--ink); border-color: var(--accent); }

/* Narrow window and phone: one screen at a time. */
.shell[data-page="tools"] .body { display: none; }
.shell[data-page="tools"] .tools-page { display: flex; }

/* Test conversations: the developer writes as the client or as staff */
.newtest { display: flex; margin: 8px 12px 2px; }
.newtest[hidden][data-tools] { display: none !important; }
.newtest .btn { flex: 1; border-style: dashed; color: var(--test); border-color: var(--test); background: var(--test-soft); }
.author { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--input-bg); flex-shrink: 0; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 650; color: var(--muted); display: flex; gap: 5px; align-items: center; cursor: pointer; }
.seg button .i { width: 14px; height: 14px; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px #0f2f401a; }
.seg button.on.client { background: var(--test); color: var(--surface); }
.author small { color: var(--muted); font-size: 12px; }
.composer.as-client { background: var(--test-soft); border-top: 2px solid var(--test); }
.composer.as-client textarea { background: var(--surface); outline: 1.5px solid var(--test); }
.composer.as-client .round { background: var(--test); color: var(--surface); }
.who.tc { color: var(--test); }
.turnlink { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 0; border: 0; background: transparent; font-size: 11.5px; font-weight: 650; color: var(--accent-text); cursor: pointer; }
.turnlink .i { width: 13px; height: 13px; }
.side-pane[data-turn] { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); }
.turn { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.turn-cap { padding: 10px 16px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); }
.turn-tools { display: flex; gap: 6px; padding: 10px 16px; flex-wrap: wrap; align-items: center; }
.turn-body { flex: 1; min-height: 0; overflow: auto; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.turn-body .sub { color: var(--muted); font-size: 12.5px; }
.reply-box { padding: 10px 12px; border-radius: 10px; background: var(--b-bot); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.det { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.det > summary { padding: 9px 12px; font-size: 13px; font-weight: 650; display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.det > summary::-webkit-details-marker { display: none; }
.det > summary::before { content: "▸"; color: var(--muted); font-size: 11px; }
.det[open] > summary::before { content: "▾"; }
.det > summary small { margin-left: auto; color: var(--muted); font-weight: 500; }
.det pre { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--input-bg); border-radius: 0 0 10px 10px; color: var(--ink); max-height: 60vh; overflow: auto; }
.det-in { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 6px; }

/* Developer tools */
.tools-page { flex: 1; min-height: 0; flex-direction: column; }
.tools-page .rtabs { flex-shrink: 0; }
.tools-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; flex-shrink: 0; }
.tools-head h1 { margin: 0; font-size: 18px; font-weight: 750; }
.tools-head .grow { flex: 1; }
.tools-head .sub { color: var(--muted); font-size: 13px; }
.env { font-size: 11.5px; font-weight: 750; padding: 2px 8px; border-radius: 6px; background: var(--test-soft); color: var(--test); text-transform: uppercase; letter-spacing: .05em; }
.botsw { display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; }
.botsw .st { display: flex; align-items: center; gap: 6px; font-weight: 650; white-space: nowrap; }
.botsw .st::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.botsw.off .st::before { background: var(--hot); }
.botsw small { color: var(--muted); }
.btn.confirm { background: var(--hot); color: var(--hot-ink); border-color: transparent; }
.tools-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ctx-wrap { flex: 1; min-height: 0; display: flex; }
.ctx-nav { width: 230px; flex-shrink: 0; border-right: 1px solid var(--line); background: var(--surface); padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.ctx-nav button { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; border: 0; background: transparent; color: var(--ink); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.ctx-nav button small { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 12px; }
.ctx-nav button.on { background: var(--blue-soft); }
.ctx-nav .grp { font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 4px; }
.ctx-chips { display: none; gap: 6px; overflow-x: auto; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); scrollbar-width: none; flex-shrink: 0; }
.ctx-chips button { flex-shrink: 0; padding: 6px 12px; border-radius: 16px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface); cursor: pointer; }
.ctx-chips button.on { border-color: var(--accent); background: var(--blue-soft); }
.ctx-main { flex: 1; min-width: 0; overflow: auto; padding: 18px 24px 24px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ctx-main > * { max-width: 100%; }
.ctx-main > .recs, .ctx-main > .grid, .ctx-main > .ctx-card, .ctx-main > .ctx-tools, .ctx-main > .alert { width: 100%; }
.ctx-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctx-h h2 { margin: 0; font-size: 18px; }
.ctx-main h3 { margin: 8px 0 0; font-size: 14px; }
.ctx-main .sub { color: var(--muted); font-size: 13px; }
.fresh, .stale { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; font-weight: 650; border-radius: 999px; padding: 2px 9px; }
.fresh { color: var(--ok); background: var(--ok-soft); }
.stale { color: var(--amber); background: var(--amber-soft); }
.fresh .i { width: 13px; height: 13px; }
.alert { margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--amber-soft); color: var(--amber); font-size: 13.5px; }
.ctx-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 14px; }
.ctx-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.ctx-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ctx-tools select { font: inherit; font-size: 13.5px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 0 10px; }
.tsearch { display: flex; align-items: center; gap: 8px; height: 38px; border-radius: 19px; background: var(--surface); border: 1px solid var(--line); padding: 0 14px; color: var(--faint); flex: 1; min-width: 200px; max-width: 420px; }
.tsearch input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); outline: none; }
.recs { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 13.5px; }
.rec-head, .rec summary { display: grid; gap: 12px; padding: 10px 14px; }
.rec-head { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; background: var(--bar-bg); border-bottom: 1px solid var(--line); }
.rec { border-bottom: 1px solid var(--line-soft); }
.rec:last-child { border-bottom: 0; }
.rec summary { cursor: pointer; list-style: none; }
.rec summary::-webkit-details-marker { display: none; }
.rec summary:hover { background: var(--line-soft); }
.rec summary .name { font-weight: 650; }
.rec summary span { overflow-wrap: anywhere; }
.rec .num { text-align: right; }
.rec-kv { padding: 2px 14px 12px; font-size: 13px; }
.cols-1 { grid-template-columns: minmax(0, 1fr); }
.cols-2 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.cols-3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr); }
.cols-4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 60px 100px; }
.rec-head .num { text-align: right; }
table.grid { border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 13.5px; }
table.grid th, table.grid td { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); text-align: left; }
table.grid tr:last-child th, table.grid tr:last-child td { border-bottom: 0; }
table.grid.hours th { font-weight: 600; width: 160px; }
table.grid.hours tr.off td { color: var(--muted); }

/* Simulation */
.chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--input-bg); color: var(--muted); white-space: nowrap; }
.chip.ok { color: var(--ok); background: var(--ok-soft); }
.chip.bad { color: var(--red); background: var(--red-soft); }
.chip.warn { color: var(--amber); background: var(--amber-soft); }
.chip.run { color: var(--blue); background: var(--blue-soft); }
.tally { display: inline-flex; gap: 4px; }
.sim { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 380px minmax(0, 1fr); }
.sim > section { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.sim-runs { background: var(--surface); }
.sim-run { background: var(--bg); }
.sim-case { background: var(--surface); border-right: 0 !important; }
.sim .pane-h { font-size: 15px; flex-shrink: 0; }
.sim .pane-h .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-runs .pane-h { justify-content: space-between; }
.sim-back { display: none; }
.sim-scroll { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.sim-scroll h3 { margin: 8px 2px 0; font-size: 13.5px; }
.sim-scroll .sub, .sim .sub { color: var(--muted); font-size: 12.5px; }
.sim-foot { padding: 10px 16px; font-size: 11.5px; color: var(--faint); border-top: 1px solid var(--line); }
.run { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 10px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.run:hover { background: var(--line-soft); }
.run.on { background: var(--blue-soft); }
.run-top, .run-sub { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 13px; }
.run-sub span:last-child { color: var(--muted); font-size: 12px; }
.sim progress { width: 100%; accent-color: var(--accent); }
.sim-status, .sim-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grid.usage { width: 100%; font-size: 12.5px; }
.grid.usage th, .grid.usage td { padding: 6px 10px; }
.scn { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); text-align: left; cursor: pointer; color: var(--ink); }
.scn.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.scn .i { color: var(--muted); margin-left: auto; }
.scn-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.scn-t small { color: var(--muted); font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; word-break: break-all; }
.sim-intents { padding: 8px 18px 0; }
.sim-case .rtabs { margin-top: 4px; }
.verdict { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border-radius: 10px; background: var(--ok-soft); font-size: 13px; }
.verdict.bad { background: var(--red-soft); }
.sim-feed { flex: none; min-height: auto; padding: 4px 0; overflow: visible; }
.usage-wrap { overflow-x: auto; flex-shrink: 0; }
.finding { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; }
.finding.bad { border-color: var(--red); }
.finding-h { display: flex; align-items: center; gap: 8px; }
.finding p { margin: 6px 0 0; color: var(--muted); }
.evidence { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
pre.code { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--input-bg); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
dialog.sheet { width: min(760px, calc(100vw - 32px)); max-height: calc(var(--app-height, 100dvh) - 48px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); display: flex; flex-direction: column; overflow: hidden; }
dialog.sheet:not([open]) { display: none; }
/* A conversation's menu: a card on a wide screen, a sheet from the bottom on
   a phone. */
dialog.menu { width: min(360px, calc(100vw - 32px)); padding: 8px 0 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--card-shadow); }
dialog.menu::backdrop { background: var(--scrim); }
dialog.menu:focus, dialog.menu:focus-visible { outline: none; }
.m-head { display: flex; gap: 12px; align-items: center; padding: 8px 16px 12px; border-bottom: 1px solid var(--line-soft); }
.m-head .st { cursor: default; }
.m-head b, .m-act b { display: block; font-size: 15px; font-weight: 650; }
.m-head small, .m-act small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.m-act { display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 12px 16px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.m-act > .i { margin-top: 2px; color: var(--muted); --cut: var(--surface); }
.m-act:hover:not(:disabled) { background: var(--input-bg); }
.m-act:hover:not(:disabled) > .i { --cut: var(--input-bg); }
.m-cancel:hover { background: var(--line); }
.m-act:active:not(:disabled) { background: var(--line); }
.m-act.danger b, .m-act.danger > .i { color: var(--red); }
.m-act:disabled { opacity: .5; }
.m-confirm { margin: 14px 16px 6px; }
.m-wide { display: flex; width: calc(100% - 24px); margin: 4px 12px 0; min-height: 44px; }
.m-cancel { display: block; width: calc(100% - 24px); margin: 8px 12px 0; min-height: 44px; border: 0; border-radius: 12px; background: var(--input-bg); font-weight: 650; cursor: pointer; }
dialog.sheet::backdrop { background: var(--scrim); }
dialog.sheet .turn { min-height: 0; overflow: hidden; }
.sim-form { overflow: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.sim-form h3 { margin: 8px 0 0; font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.pick-actions { display: flex; gap: 14px; }
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pick { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; cursor: pointer; }
.pick span { display: flex; flex-direction: column; gap: 2px; }
.pick small { color: var(--muted); font-size: 12px; }
.model-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 110px; gap: 8px; align-items: center; font-size: 13.5px; }
.model-row input, .model-row select { font: inherit; font-size: 13.5px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--field-bg); color: var(--ink); padding: 0 10px; min-width: 0; }

@media (min-width: 900px) and (max-width: 1279px) {
 .sim { grid-template-columns: 270px minmax(0, 1fr); }
 .sim[data-view="case"] .sim-run, .sim:not([data-view="case"]) .sim-case { display: none; }
 .sim-case .sim-back { display: grid; }
}
@media (max-width: 899px) {
 dialog.menu { width: 100vw; max-width: 100vw; margin: auto 0 0; border: 0; border-radius: 18px 18px 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
 .only-narrow { display: flex !important; }
 .only-wide, .appbar { display: none !important; }
 .list-pane { width: 100%; border-right: 0; }
 .chat-pane, .side-pane { display: none; width: 100%; }
 .shell[data-view="chat"] .list-pane, .shell[data-view="side"] .list-pane { display: none; }
 .shell[data-view="chat"] .chat-pane { display: flex; }
 .shell[data-view="side"] .side-pane { display: flex; flex-direction: column; border-left: 0; }
 .search:not(.open) { display: none; }
 .list-pane .search { margin-top: 8px; }
 .rp-chat, .rp-doc { display: none; width: 100%; border-right: 0; }
 .rules-page[data-tab="chat"] .rp-chat, .rules-page[data-tab="draft"] .rp-doc, .rules-page[data-tab="history"] .rp-doc { display: flex; }
 .rp-sheet { width: 100%; margin: 0; border: 0; border-radius: 0; }
 .rp-head .sub { display: none; }
 .rdoc { padding: 12px 16px 20px; }
 .botoff { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 14px; font-size: 13px; }
 .tools-head { padding: 10px 14px; gap: 8px; }
 .tools-head h1, .tools-head .grow { display: none; }
 .botsw { flex: 1; justify-content: space-between; }
 .ctx-nav { display: none; }
 .ctx-chips { display: flex; }
 .ctx-main { padding: 12px 12px 20px; }
 .author small { display: none; }
 .sim { display: flex; flex-direction: column; }
 .sim > section { flex: 1; border-right: 0; }
 .sim:not([data-view="run"]):not([data-view="case"]) .sim-run, .sim:not([data-view="case"]) .sim-case, .sim[data-view="run"] .sim-runs, .sim[data-view="case"] .sim-runs, .sim[data-view="case"] .sim-run { display: none; }
 .sim-back { display: grid; }
 .picks { grid-template-columns: minmax(0, 1fr); }
 .model-row { grid-template-columns: 80px minmax(0, 1fr) 90px; }
 dialog.sheet { width: 100vw; max-width: 100vw; height: var(--app-height, 100dvh); max-height: var(--app-height, 100dvh); border: 0; border-radius: 0; }
 .rec .opt, .rec-head .opt { display: none; }
 .cols-3, .cols-4 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
 .botoff .i { display: none; }
}
@media (max-width: 599px) {
 .chead .btn .label { display: none; }
 .chead .btn { width: 40px; padding: 0; }
}
@media (max-width: 479px) {
 .field { grid-template-columns: 1fr 42px; row-gap: 1px; padding: 8px 8px 8px 12px; }
 .f-l { grid-row: 1; grid-column: 1; }
 .f-v { grid-row: 2; grid-column: 1; font-size: 15px; }
 .field .copy { grid-row: 1 / 3; grid-column: 2; }
 .attn { max-height: 55%; }
}
@media (max-width: 359px) {
 .fold { padding: 0 4px; }
 .fold a { padding: 11px 6px 10px; font-size: 13px; }
}
/* Medium: the client panel opens over the conversation. */
@media (min-width: 900px) and (max-width: 1279px) {
 .side-pane { display: none; position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; box-shadow: -8px 0 24px #0002; }
 .shell[data-view="side"] .side-pane { display: flex; flex-direction: column; }
 .list-pane { width: 340px; }
 .rp-chat { width: 360px; }
}
@media (min-width: 1280px) {
 .side-close { display: none !important; }
 .shell:not([data-conversation]) .side-pane { display: none; }
}
@media (min-width: 900px) {
 .back { display: none !important; }
}
@media (pointer: coarse) {
 .copy { width: 40px; height: 40px; }
}
@media (pointer: coarse) and (min-width: 480px) {
 .field { grid-template-columns: 96px 1fr 42px; }
}

/* Motion and touch: short, native-like, never in the way. */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); }
* { -webkit-tap-highlight-color: transparent; }
.appbar, .topbar, .fold, .rtabs, .row, .btn, .ib, .round, .seg, .drawer, .ctx-nav, .ctx-chips, .run, .scn, .chip, .reason { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Pressed state instead of the gray tap flash; hover only where there is a pointer. */
.btn, .ib, .round, .row, .run, .scn, .seg button, .ctx-nav button, .ctx-chips button, .fold a, .rtabs a, .navs a, .dr-item, .turnlink, .link-btn, .attn-main, .m-act, .m-cancel { transition: background-color .15s var(--ease-out), color .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .12s var(--ease-out), opacity .15s var(--ease-out); }
.btn:active:not(:disabled), .ib:active:not(:disabled), .round:active:not(:disabled) { transform: scale(.96); }
.row:active, .row.pressed, .run:active, .scn:active, .dr-item:active, .m-act:active { background: var(--line); --badge-ring: var(--line); }
.link-btn:active, .turnlink:active { opacity: .6; }
@media (hover: none) {
 .ib:hover, .rec summary:hover, .run:hover, .m-act:hover:not(:disabled) { background: transparent; }
 .m-act:hover:not(:disabled) > .i { --cut: var(--surface); }
 .m-cancel:hover { background: var(--input-bg); }
 .m-act:active:not(:disabled) { background: var(--line); }
 .row:hover { background: var(--surface); --badge-ring: var(--surface); }
 .row.on:hover { background: var(--blue-soft); --badge-ring: var(--blue-soft); }
}

/* iOS zooms into fields with text under 16px on focus. */
@media (pointer: coarse) {
 input, textarea, select, .c-row textarea, .tsearch input { font-size: 16px !important; }
}

/* Screen changes. */
@keyframes vt-in-right { from { transform: translateX(100%); } }
@keyframes vt-out-left { to { transform: translateX(-28%); opacity: .85; } }
@keyframes vt-out-right { to { transform: translateX(100%); } }
@keyframes vt-in-left { from { transform: translateX(-28%); opacity: .85; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; animation-timing-function: var(--ease-in-out); }
:root[data-motion="push"]::view-transition-old(root), :root[data-motion="push"]::view-transition-new(root),
:root[data-motion="pop"]::view-transition-old(root), :root[data-motion="pop"]::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--ease-out); mix-blend-mode: normal; }
:root[data-motion="push"]::view-transition-old(root) { animation-name: vt-out-left; }
:root[data-motion="push"]::view-transition-new(root) { animation-name: vt-in-right; box-shadow: -8px 0 24px #0f2f401f; }
:root[data-motion="pop"]::view-transition-old(root) { animation-name: vt-out-right; z-index: 1; box-shadow: -8px 0 24px #0f2f401f; }
:root[data-motion="pop"]::view-transition-new(root) { animation-name: vt-in-left; }

/* Things that appear. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.97) translateY(6px); } }
.msg.enter, .note.enter, .sys.enter { animation: rise .24s var(--ease-out) both; }
.req-card.enter { animation: drop .2s var(--ease-out) both; }
.toast.leave { opacity: 0; transform: translateX(-50%) translateY(6px); transition: opacity .18s var(--ease-in-out), transform .18s var(--ease-in-out); }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }
.toast:not([hidden]):not(.leave) { animation: toast-in .22s var(--ease-out) both; }
.drawer-bg { transition: background-color .24s var(--ease-out); background: transparent; }
.drawer-bg.open { background: var(--scrim); }
.drawer { transform: translateX(-100%); transition: transform .26s var(--ease-out); box-shadow: 8px 0 30px #0003; }
.drawer-bg.open .drawer { transform: none; }
dialog.sheet[open] { animation: pop-in .22s var(--ease-out); }
dialog.sheet[open]::backdrop, dialog.menu[open]::backdrop { animation: fade .22s var(--ease-out); }
dialog.menu[open] { animation: pop-in .2s var(--ease-out); }
.side-pane[data-turn] .turn, .ctx-main { animation: fade .16s var(--ease-out); }
@media (max-width: 899px) {
 dialog.sheet[open] { animation: sheet-up .3s var(--ease-out); }
 dialog.menu[open] { animation: sheet-up .28s var(--ease-out); }
}

@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; transition: none !important; }
}

/* iOS 26 draws a frosted blur under the status bar of an installed web app,
   ramping about 40 pt into the page, unless a sticky or fixed opaque box
   spanning the width covers the top edge: then WebKit extends that box's
   color instead. Every screen's top bar is such a box; in this layout none
   of them scrolls, so sticky changes nothing else. */
.appbar, .topbar, .chead, .side-head { position: sticky; top: 0; z-index: 2; }

/* The inline icon sprite takes no space. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }