/* Visual language borrowed from opencode: monospace throughout, near-black
   surfaces, square corners, and colour used only to carry meaning (state, who
   is speaking, what failed).

   Three depths. The sidebar, header and conversation are the frame (--panel).
   Between them is the stage (--stage): a darker, dotted well where the agent
   lays out panels, which sit on it as raised sheets (--bg). */
:root {
  --bg: #ffffff;
  --panel: #f4f3f0;
  --element: #e9e8e4;
  --stage: #dcdbd6;
  --dots: #c2c1bb;
  --lift: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px -8px rgba(0, 0, 0, 0.18);
  --edge: rgba(0, 0, 0, 0.10);
  --line: #d9d9d9;
  --line-strong: #b8b8b8;
  --text: #1a1a1a;
  --muted: #7a7a7a;
  --primary: #b5651d;
  --on-primary: #ffffff;
  --secondary: #3b7dd8;
  --accent: #7b5bb6;
  --ok: #3d9a57;
  --warn: #b7791f;
  --bad: #d1383d;
  --term-bg: #0a0a0a;
  --mono: "Berkeley Mono", "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0c0c;
    --panel: #1e1e1e;
    --element: #2a2a2a;
    --stage: #050505;
    --dots: #1c1c1c;
    --lift: 0 0 0 1px #000, 0 12px 32px -8px rgba(0, 0, 0, 0.9);
    --edge: rgba(0, 0, 0, 0.7);
    --line: #323232;
    --line-strong: #505050;
    --text: #eeeeee;
    --muted: #808080;
    --primary: #fab283;
    --on-primary: #0a0a0a;
    --secondary: #5c9cf5;
    --accent: #9d7cd8;
    --ok: #7fd88f;
    --warn: #f5a742;
    --bad: #e06c75;
  }
}
/* Dark chosen in Settings, whatever the system says: the same colours as above. */
:root[data-theme="dark"] {
  --bg: #0c0c0c;
  --panel: #1e1e1e;
  --element: #2a2a2a;
  --stage: #050505;
  --dots: #1c1c1c;
  --lift: 0 0 0 1px #000, 0 12px 32px -8px rgba(0, 0, 0, 0.9);
  --edge: rgba(0, 0, 0, 0.7);
  --line: #323232;
  --line-strong: #505050;
  --text: #eeeeee;
  --muted: #808080;
  --primary: #fab283;
  --on-primary: #0a0a0a;
  --secondary: #5c9cf5;
  --accent: #9d7cd8;
  --ok: #7fd88f;
  --warn: #f5a742;
  --bad: #e06c75;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
/* In the desktop app the page is the whole window: it should not slide about when scrolled past its edges. */
html.shell, html.shell body { overflow: hidden; overscroll-behavior: none; }
body { background: var(--bg); color: var(--text); font: 13px/1.5 var(--mono); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
code, pre, .mono { font-family: var(--mono); font-size: 12.5px; }
h1, h2, h3 { margin: 0; font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--primary); color: var(--on-primary); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* The frame is the window and no more: whatever happens inside it, the page itself
   never gains a scroll of its own, which would take the title bar off the top of
   the window and leave the picture behind showing at the foot. */
#app { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: 100dvh; overflow: hidden; }

/* ---- sidebar ---- */
#side { display: flex; flex-direction: column; gap: 12px; padding: 14px 0 10px; border-right: 1px solid var(--line); background: var(--panel); min-height: 0; position: relative; z-index: 2; box-shadow: 8px 0 20px -12px var(--edge); }
.brand { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.logo { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; letter-spacing: -0.01em; }
/* The mark of web/icon.svg, without its tile, in the theme's colour. */
.logo::before { content: ""; flex: none; width: 1.4em; height: 1.05em; background: var(--primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 14 48 36'%3E%3Cg fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M14 20h12c8 0 8 24 16 24h8'/%3E%3Cpath d='M14 44h12c8 0 8-24 16-24h8'/%3E%3C/g%3E%3Ccircle cx='14' cy='20' r='4'/%3E%3Ccircle cx='14' cy='44' r='4'/%3E%3Ccircle cx='50' cy='20' r='4'/%3E%3Ccircle cx='50' cy='44' r='4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 14 48 36'%3E%3Cg fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M14 20h12c8 0 8 24 16 24h8'/%3E%3Cpath d='M14 44h12c8 0 8-24 16-24h8'/%3E%3C/g%3E%3Ccircle cx='14' cy='20' r='4'/%3E%3Ccircle cx='14' cy='44' r='4'/%3E%3Ccircle cx='50' cy='20' r='4'/%3E%3Ccircle cx='50' cy='44' r='4'/%3E%3C/svg%3E") center / contain no-repeat; }
.dot { width: 7px; height: 7px; background: var(--bad); }
.dot.on { background: var(--ok); }
#side > .btn { margin: 0 14px; width: auto; }
#queue { flex: 1; overflow-y: auto; min-height: 0; }
.group { margin: 12px 0 2px; padding: 0 14px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; text-transform: lowercase; }
.group.attn { color: var(--warn); }
.item { display: flex; align-items: baseline; gap: 6px; padding: 4px 14px 4px 12px; border-left: 2px solid transparent; }
.item:hover { background: var(--element); }
.item.sel { background: var(--element); border-left-color: var(--primary); }
.item.attn { border-left-color: var(--warn); }
.item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .ic { flex: none; align-self: center; width: 12px; height: 12px; color: var(--muted); }
.ic svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.item .ic-question, .item .ic-approval, .item .ic-finished { color: var(--warn); }
.item .ic-failed { color: var(--bad); }
.item .ic-standby { color: var(--accent); }
.item .ic-working { color: var(--secondary); }
.ic-working svg { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ic-working svg { animation: none; } }
.more { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; line-height: 1; opacity: 0; }
.item:hover .more, .item.sel .more, .more:focus-visible { opacity: 1; }
.more:hover { color: var(--text); }
@media (hover: none) { .more { opacity: 1; } }
.menu { position: fixed; z-index: 20; width: 200px; background: var(--panel); border: 1px solid var(--line-strong); padding: 4px 0; }
.menu button { display: block; width: 100%; text-align: left; padding: 5px 12px; border: 0; background: none; cursor: pointer; }
.menu button:hover { background: var(--element); }
.menu button.bad { color: var(--bad); }
#machs { border-top: 1px solid var(--line); padding-bottom: 6px; max-height: 30%; overflow-y: auto; }
#machs .group { margin-top: 10px; }
#machs .group:hover { color: var(--text); }
.mach { align-items: center; cursor: default; }
.mach:hover { background: none; }
.health { flex: none; width: 7px; height: 7px; background: var(--muted); opacity: 0.5; }
.health.ok { background: var(--ok); opacity: 1; }
.health.down { background: var(--bad); opacity: 1; }
.mach .note { flex: none; }
.empty { color: var(--muted); padding: 4px 14px; font-size: 12px; opacity: 0.7; }
.side-foot { display: flex; gap: 16px; padding: 10px 14px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; text-transform: lowercase; }
.side-foot a:hover { color: var(--text); }
/* Time in the app without leaving it; see stay.js. */
#stay { font-variant-numeric: tabular-nums; cursor: default; }
#stay.record { color: var(--ok); }
#stayline { margin-top: 14px; font-size: 12px; }
#stayline:empty { display: none; }
/* A new record: a card rises over the count, and squares burst from it. */
.cheer { position: fixed; z-index: 34; display: flex; flex-direction: column; gap: 2px; max-width: min(300px, calc(100vw - 28px)); padding: 9px 13px; border: 1px solid var(--ok); border-radius: 2px; background: var(--panel); color: var(--text); box-shadow: var(--lift); font: inherit; font-size: 12px; text-align: left; cursor: pointer; animation: cheer-in 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both; transition: opacity 0.6s; }
.cheer b { color: var(--ok); font-size: 13px; }
.cheer.out { opacity: 0; }
@keyframes cheer-in { from { transform: translateY(16px) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
.cheer-burst { position: fixed; z-index: 34; width: 0; height: 0; pointer-events: none; }
.cheer-burst i { position: absolute; width: 6px; height: 6px; margin: -3px; background: var(--ok); opacity: 0; animation: fx-burst 1.1s cubic-bezier(0.1, 0.7, 0.3, 1) forwards; }
.cheer-burst i:nth-child(3n) { background: var(--primary); }
.cheer-burst i:nth-child(3n + 1) { background: var(--secondary); }
.cheer-burst i:nth-child(2n) { animation-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) { .cheer { animation: none; } }
#update { display: flex; flex-direction: column; gap: 4px; padding: 0 14px; }
#update[hidden] { display: none; }
.upd { padding: 5px 8px; border: 1px solid var(--warn); border-radius: 2px; background: transparent; color: var(--warn); font-size: 12px; text-align: left; text-transform: lowercase; cursor: pointer; }
.upd:hover { background: var(--element); }
.upd.armed, .upd.armed:hover { background: var(--warn); color: var(--bg); }
.upd-note { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); font-size: 12px; text-transform: lowercase; }
.upd-note.bad { border-color: var(--bad); color: var(--bad); }
.upd-note.ok { border-color: var(--ok); color: var(--ok); }
.upd-note.busy { border-color: var(--warn); color: var(--warn); }
.upd-note.busy::before, .upd-note.bad::before { content: ""; flex: none; width: 9px; height: 9px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .upd-note::before { animation: none !important; } }

/* ---- controls ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 12px; border-radius: 2px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; white-space: nowrap; text-transform: lowercase; }
.btn:hover { background: var(--element); }
.btn.on { border-color: var(--primary); color: var(--primary); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); border-color: transparent; }
.btn.danger:hover { border-color: var(--bad); background: transparent; }
.btn.wide { width: 100%; padding: 6px 12px; }
.btn:disabled { opacity: 0.45; cursor: default; }
input[type=text], select, textarea { width: 100%; padding: 6px 9px; border-radius: 2px; border: 1px solid var(--line); background: var(--bg); }
textarea { resize: vertical; min-height: 40px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); }
.btn:focus-visible { outline: 1px solid var(--primary); outline-offset: 1px; }
::placeholder { color: var(--muted); opacity: 0.7; }
label { display: block; font-size: 12px; color: var(--muted); margin: 14px 0 4px; text-transform: lowercase; }

/* State is a coloured word with a square in front, never a filled badge. */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; background: currentColor; }
.pill.working { color: var(--secondary); }
.pill.working::before { animation: pulse 1.4s ease-in-out infinite; }
.pill.waiting { color: var(--warn); }
.pill.standby { color: var(--accent); }
.pill.idle { color: var(--muted); }
@keyframes pulse { 50% { opacity: 0.25; } }
/* The "is working…" line of the conversation. A pill in the working state carries the same class and is not this. */
.working:not(.pill) { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 11px; color: var(--secondary); }
.working i { width: 7px; height: 7px; background: currentColor; animation: pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .working i { animation: none; } }
@media (prefers-reduced-motion: reduce) { .pill.working::before { animation: none; } }

/* ---- main ---- */
#main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); position: relative; }
/* Going to another thread, before it is drawn: a bar runs along the top, and
   what is being left fades a moment later, so that a quick move does not flicker. */
body.going #main::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; z-index: 9; background: var(--primary); transform-origin: left; animation: going 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite; pointer-events: none; }
body.going #main > :not(.thead) { opacity: 0.45; pointer-events: none; transition: opacity 0.12s 0.08s; }
body.going .thead > :not(h1, .pill, .back) { visibility: hidden; }
@keyframes going { 0% { transform: translateX(-100%) scaleX(0.3); } 60% { transform: translateX(30%) scaleX(0.6); } 100% { transform: translateX(100%) scaleX(0.3); } }
@media (prefers-reduced-motion: reduce) { body.going #main::after { animation: pulse 1.4s ease-in-out infinite; } }
.page { padding: 28px 32px; overflow-y: auto; max-width: 860px; width: 100%; }
.page h1 { font-size: 15px; margin-bottom: 4px; }
.page h1::before { content: "# "; color: var(--muted); }
.page h2 { font-size: 13px; margin: 28px 0 8px; }
.page h3 { font-size: 12px; margin: 18px 0 6px; color: var(--muted); }
.page h2::before { content: "## "; color: var(--muted); }
.page p { color: var(--muted); margin: 4px 0 10px; }
/* Settings: the search box, the menu of its parts, and what is under them. */
.page .setq { margin: 12px 0 0; }
.setwrap { display: flex; gap: 26px; align-items: flex-start; margin-top: 10px; }
.setmenu { flex: 0 0 148px; display: flex; flex-direction: column; gap: 1px; }
.setmenu a { padding: 5px 8px; border-radius: 2px; color: var(--muted); font-size: 13px; text-decoration: none; }
.setmenu a:hover { background: var(--element); }
.setmenu a.on { background: var(--element); color: var(--text); }
.setmenu a.quiet { opacity: 0.35; }
.setbody { flex: 1; min-width: 0; }
.setsec.first h2, .setgroup.first { margin-top: 2px; }
.setgroup { font-size: 11px; color: var(--muted); margin: 24px 0 0; }
.setgroup::before { content: "in "; }
.setgroup + .setsec h2 { margin-top: 6px; }
.setsec h2 mark { background: none; color: var(--primary); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; color: var(--muted); font-weight: 400; text-transform: lowercase; }
td select { width: auto; }
.copy { background: var(--bg); border: 1px solid var(--line); border-left: 2px solid var(--primary); padding: 10px 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.thead { display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-bottom: 1px solid var(--line); min-width: 0; min-height: 41px; position: relative; z-index: 1; }
.thead h1 { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.thead .sp { flex: 1; }
.thead .back { display: none; }
/* Home's title bar: where things stand, in a line, once the canvas has something on it. */
.thead .homenote { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
/* What comes next sits in the title bar, left of the buttons, so that its coming and going moves nothing below. */
.next { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 2px; color: var(--warn); border: 1px solid var(--warn); background: var(--element); font-size: 12px; white-space: nowrap; overflow: hidden; cursor: pointer; }
.next span { flex: none; }
.next:hover { filter: brightness(1.08); }
.next b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }

.tbody { flex: 1; display: flex; min-height: 0; background: var(--stage) radial-gradient(var(--dots) 1px, transparent 1px) 0 0 / 16px 16px; box-shadow: inset 0 10px 16px -12px var(--edge); }
#panels { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.intro { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 0; overflow: auto; }
.introbox { max-width: 460px; display: flex; flex-direction: column; gap: 6px; }
.introbox h2 { font-size: 13px; color: var(--primary); }
.introbox p { color: var(--muted); margin: 0 0 12px; }
.introbox .k { font-size: 12px; color: var(--muted); text-transform: lowercase; }
.ask { text-align: left; padding: 6px 10px; border: 1px solid var(--line); border-left: 2px solid var(--line-strong); background: var(--bg); color: var(--text); cursor: pointer; }
.ask:hover { border-left-color: var(--primary); background: var(--element); }
.tabhost { flex: 1; min-height: 0; padding: 12px; display: flex; }
.tabs { display: flex; gap: 2px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; flex: none; }
.tab { display: flex; align-items: baseline; gap: 8px; padding: 6px 14px 5px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); cursor: pointer; white-space: nowrap; font-size: 12px; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); border-bottom-color: var(--primary); background: var(--element); }
.tab .n { font-size: 11px; color: var(--muted); opacity: 0.7; }
.tab.on .n { color: var(--primary); opacity: 1; }
.tab.plus { padding: 6px 10px 5px; font-size: 14px; line-height: 1; }
.tab .tabx { margin: 0 -6px 0 -2px; padding: 0 3px; color: var(--muted); opacity: 0; }
.tab:hover .tabx, .tab.on .tabx { opacity: 0.7; }
.tab .tabx:hover { opacity: 1; color: var(--text); }
.introbox .k:not(:first-of-type) { margin-top: 10px; }
/* Home with nothing on its canvas yet: what the all-clear screen says, and under it what the page is for. Over a clip, or under glass, each is a card. */
.homeintro { position: relative; overflow: hidden; }
.homecol { position: relative; display: flex; flex-direction: column; align-items: center; gap: 44px; max-height: 100%; }
.homecol > .blank { margin: 0; position: relative; }
.clear-clip + .homecol > *, body.glass .homecol > * { padding: 22px 30px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 72%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
body.glass .homecol > * { background: var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); }
body.glass .homebody.solo #panels { background: none; box-shadow: none; }
.tip { position: fixed; z-index: 40; max-width: min(280px, calc(100vw - 16px)); padding: 5px 10px; font-size: 12px; background: var(--element); color: var(--text); border: 1px solid var(--line-strong); box-shadow: var(--lift); pointer-events: none; }
#chat { width: 460px; display: flex; flex-direction: column; border-left: 1px solid var(--line); min-height: 0; background: var(--panel); box-shadow: -8px 0 20px -12px var(--edge); }
#logwrap { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
#jump { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--panel); box-shadow: var(--lift); color: var(--muted); }
#jump:hover { background: var(--element); color: var(--text); }
#log { flex: 1; overflow-y: auto; padding: 0 0 12px; display: flex; flex-direction: column; min-height: 0; }

/* One block per speaker turn. The user's turns are filled bands with an accent
   bar; the agent's sit on the plain background. */
.turn { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 12px 14px; border-left: 2px solid transparent; }
.turn.you { background: var(--element); border-left-color: var(--primary); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 6px; }
.turn.you:first-child { margin-top: 0; border-top: 0; }
.turn.hub { padding-top: 6px; padding-bottom: 6px; }
/* Said and sent, and not written down yet: the preview, where the message will be. */
.turn.said { border-left-style: dashed; }
.turn.said .who { align-items: center; }
.turn.said .msg { opacity: 0.55; }
#log:has(.said) > .blank { display: none; }
.who { display: flex; gap: 10px; align-items: baseline; font-size: 11px; color: var(--muted); }
.who b { font-weight: 600; text-transform: lowercase; }
.turn.you .who b { color: var(--primary); }
.turn.agent .who b { color: var(--secondary); }

/* ---- layout tree ---- */
.split { display: flex; gap: 12px; flex: 1; min-width: 0; min-height: 0; }
.split.v { flex-direction: column; }
/* A pane has hard edges. Squeezed narrow — five panes in a row, or a lopsided
   split — its heading and its contents are cut off at them, rather than painted
   across the pane beside it: the buttons in the heading and the padding of a
   document each have a width they will not go below. */
.panel { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--line-strong); background: var(--bg); box-shadow: var(--lift); overflow: hidden; }
.panel > header { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--panel); }
.panel > header b { color: var(--text); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel > header .sp { flex: 1; }
.panel > header a:hover { color: var(--text); }
.panel > .pbody { flex: 1; min-height: 0; overflow: auto; }
/* content-box: xterm's fit reads this element's computed height and width as the room it has, and under border-box those include the padding, which costs the last row. */
.panel.terminal > .pbody { background: var(--term-bg); padding: 6px; overflow: hidden; box-sizing: content-box; }
.panel.document > .pbody { padding: 14px 18px; }
.panel.web iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.panel > header.bbar .sp { display: none; }
.panel > header.bbar b { flex: none; max-width: 30%; }
.panel > header .bnav { flex: none; padding: 0 3px; border: 0; background: none; color: inherit; font: inherit; line-height: 1; cursor: pointer; }
.panel > header .bnav:hover { color: var(--text); }
.panel > header .blogins { max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel > header .blogins.bad { color: var(--bad); }
.panel > header .burl { flex: 1; min-width: 0; width: auto; padding: 1px 8px; color: var(--text); font: inherit; }
.panel.web .bhole { height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; color: var(--muted); text-align: center; }
.panel.web .bhole.shot { background: #fff top left / 100% 100% no-repeat; color: transparent; }
.panel.desktop > .pbody { position: relative; overflow: hidden; background: var(--term-bg); }
.panel.desktop .screen { width: 100%; height: 100%; }
.panel.desktop:not(.plugged) .screen { cursor: pointer; }
.panel.desktop.plugged { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--lift); }
.panel.desktop.plugged > header { color: var(--primary); }
.dstate { white-space: nowrap; }
/* A desktop filling the window: over the sidebar and the conversation, under the recap, the switcher and the help. */
.panel.full { position: fixed; inset: 0; z-index: 25; border: 0; }
.pfull { flex: none; display: inline-flex; align-items: center; padding: 3px; margin: -3px -3px -3px 0; border: 0; background: none; color: inherit; cursor: pointer; }
.pfull:hover { color: var(--text); }
.dmsg { height: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: var(--muted); text-align: center; padding: 16px; }
.dlogin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(280px, 90%); display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line-strong); border-left: 2px solid var(--primary); padding: 14px; }
.dlogin input { width: 100%; padding: 6px 9px; border-radius: 2px; border: 1px solid var(--line); background: var(--bg); }
.panel.image > .pbody { overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--term-bg); }
.panel.image img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* What the agent is pointing at: a ring that pulses on arrival and then stays. */
.panel.pointed { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary), var(--lift); }
.panel.pointing { animation: point 1s ease-out 3; }
@keyframes point { from { box-shadow: 0 0 0 2px var(--primary), 0 0 0 2px var(--primary); } to { box-shadow: 0 0 0 2px var(--primary), 0 0 0 14px transparent; } }
@media (prefers-reduced-motion: reduce) { .panel.pointing { animation: none; } }
.pointnote { flex: none; display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 5px 10px; border: 0; border-radius: 0; background: var(--primary); color: var(--on-primary); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.pointnote .what { flex: 1; min-width: 0; font-weight: 600; }
.pointnote .x { opacity: 0.7; }
.pointnote:hover .x { opacity: 1; }
.tab.pointed::after { content: "☞"; color: var(--primary); }
/* The same for a part of the app's own frame: the ring is laid over it and the note hangs beside it. */
.placering { position: fixed; z-index: 28; pointer-events: none; border-radius: 3px; box-shadow: 0 0 0 2px var(--primary); animation: point 1s ease-out 3; }
.placenote { position: fixed; z-index: 28; width: max-content; max-width: min(300px, calc(100vw - 8px)); border-radius: 2px; box-shadow: var(--lift); }
.placering[hidden], .placenote[hidden] { display: none; }
.placenote .hand::before { content: "☝"; }
.placenote[data-side="right"] .hand::before { content: "☜"; }
.placenote[data-side="over"] .hand::before { content: "☟"; }
@media (prefers-reduced-motion: reduce) { .placering { animation: none; } }
/* A pointer's arrival: the dimness is the shadow of a hole that starts as a wide circle and closes in on the target. */
.spot { position: fixed; z-index: 27; pointer-events: none; border-radius: 3px; box-shadow: 0 0 0 200vmax transparent; animation: spot 1.6s cubic-bezier(0.3, 0, 0.2, 1) forwards; }
@keyframes spot {
  0% { transform: scale(var(--sx), var(--sy)); border-radius: 50%; box-shadow: 0 0 0 200vmax rgb(0 0 0 / 0); }
  18% { transform: scale(var(--sx), var(--sy)); border-radius: 50%; box-shadow: 0 0 0 200vmax rgb(0 0 0 / 0.62); }
  62%, 80% { transform: none; border-radius: 3px; box-shadow: 0 0 0 200vmax rgb(0 0 0 / 0.62); }
  100% { transform: none; border-radius: 3px; box-shadow: 0 0 0 200vmax rgb(0 0 0 / 0); }
}
mark.sb-point { background: var(--primary); color: var(--on-primary); padding: 1px 2px; }
:not(mark).sb-point { outline: 2px solid var(--primary); outline-offset: 3px; background: color-mix(in srgb, var(--primary) 16%, transparent); }
.panel.gone { position: relative; }
.panel.gone > .pbody { opacity: .25; filter: grayscale(1); pointer-events: none; }
.gonenote { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90%; padding: 8px 14px; background: var(--panel); border: 1px solid var(--line-strong); border-left: 2px solid var(--bad); color: var(--muted); font-size: 12px; text-align: center; }
.gonenote b { color: var(--text); font-weight: 400; }
.panel > header .stale { color: var(--warn); white-space: nowrap; }
.panel.video > .pbody { overflow: hidden; background: #000; }
.panel.video video { width: 100%; height: 100%; object-fit: contain; display: block; }
.panel.image iframe { width: 100%; height: 100%; border: 0; display: block; }
.panel.html > .pbody { overflow: hidden; }
.panel.html iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- transcript ---- */
.msg { max-width: 100%; overflow-wrap: anywhere; }
.msg.user { white-space: pre-wrap; }
.msg.system { color: var(--muted); font-size: 12px; white-space: pre-wrap; }
.msg.error { color: var(--bad); border-left: 2px solid var(--bad); background: var(--bg); padding: 8px 12px; white-space: pre-wrap; }
.msg.asked { border-left: 2px solid var(--warn); padding: 4px 0 4px 12px; }
.msg.asked .k { font-size: 12px; color: var(--warn); text-transform: lowercase; }
.tool { font-size: 12px; color: var(--muted); }
.tool summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; }
.tool summary::-webkit-details-marker { display: none; }
.tool summary > span:first-child { color: var(--line-strong); }
.tool[open] summary > span:first-child { color: var(--primary); }
.tool summary .n { color: var(--accent); white-space: nowrap; }
.tool summary .a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool summary:hover .a { color: var(--text); }
.tool.err summary .n { color: var(--bad); }
.tool pre { margin: 6px 0 0 14px; padding: 8px 10px; background: var(--bg); border-left: 1px solid var(--line-strong); max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; color: var(--text); font-size: 12px; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md pre, .md table { margin: 8px 0; }
.md h1, .md h2, .md h3 { margin: 16px 0 6px; font-size: 13px; color: var(--primary); }
.md strong { font-weight: 700; }
.md pre { background: var(--bg); border: 1px solid var(--line); padding: 10px 12px; overflow-x: auto; }
.md code { color: var(--ok); }
.md pre code { color: inherit; }
.md a { color: var(--secondary); text-decoration: underline; text-underline-offset: 2px; }
/* A picture comes at whatever size it happens to be, and markdown may ask for any
   size at all. Hold it to the width it is read in, so that one cannot push a
   document pane or a message in the conversation sideways. */
.md img { max-width: 100%; height: auto; }
.md ul, .md ol { padding-left: 22px; }
.md li::marker { color: var(--muted); }
.md table { width: auto; }
.md th, .md td { padding: 4px 14px 4px 0; }
/* A wide table keeps its width, up to a cap, and scrolls sideways; its cells break at spaces only. */
.md .tw { overflow-x: auto; margin: 8px 0; }
.md .tw table { width: max-content; max-width: 110ch; margin: 0; overflow-wrap: normal; }
.md th { white-space: nowrap; }
.md blockquote { margin: 8px 0; padding-left: 12px; border-left: 2px solid var(--line-strong); color: var(--muted); }

/* ---- requests and composer ---- */
/* Several open requests at once are taller than the conversation has room for. A
   flex item will not shrink below its content, so without a cap the cards pushed
   the composer below the foot of the window and squeezed the conversation to a
   line; the browser, reaching for the composer to put the cursor in it, then
   scrolled the whole page. The cards take at most half the column and scroll
   among themselves, leaving the conversation its share. */
#requests { padding: 0 16px; display: flex; flex-direction: column; gap: 8px; min-height: 0; max-height: 55%; overflow-y: auto; }
.req { border: 1px solid var(--line); border-left: 2px solid var(--warn); background: var(--element); padding: 10px 14px; }
.req .k { font-size: 12px; color: var(--warn); margin-bottom: 4px; text-transform: lowercase; }
.req .act { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--line); padding: 8px 10px; margin: 6px 0 10px; max-height: 220px; overflow: auto; font-size: 12px; }
.req .row { margin-top: 10px; }
/* A long option wraps inside the card instead of running off its right edge. */
.req .row .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; justify-content: flex-start; }
.composer { margin: 12px 16px 6px; display: flex; gap: 8px; align-items: flex-end; background: var(--bg); border: 1px solid var(--line); border-left: 2px solid var(--primary); padding: 8px 8px 8px 12px; }
.composer:focus-within { border-color: var(--line-strong); border-left-color: var(--primary); }
.composer textarea { flex: 1; max-height: 200px; resize: none; border: 0; background: transparent; padding: 3px 0; }
/* Voice: the microphone in the message box, and what is said about it above where the words will go. */
.composer .mic { padding: 4px 7px; border-color: transparent; color: var(--muted); }
.composer .mic:hover { color: var(--text); }
.composer .mic.on { color: var(--bad); border-color: var(--bad); }
.mic[hidden] { display: none; }
.voice { position: fixed; z-index: 36; display: flex; flex-direction: column; gap: 6px; padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--panel); color: var(--text); box-shadow: var(--lift); font-size: 12px; pointer-events: none; }
.vrow { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 9px; }
/* In a message box: part of the box, above the line typed on. The words are as large as what is typed. */
.composer { flex-wrap: wrap; }
.voice.inbox { position: static; flex: 0 0 100%; min-width: 0; padding: 0 4px 6px 0; border: 0; border-bottom: 1px solid var(--line); margin-bottom: 2px; background: transparent; box-shadow: none; }
.voice.inbox:is(.bad, .live) { border-color: var(--line); }
.voice.inbox .vwords { color: var(--text); opacity: 0.75; font-size: 13px; max-height: 9em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.vwords { color: var(--muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.vwords[hidden] { display: none; }
.voice.live { border-color: var(--bad); }
.voice.bad { border-color: var(--bad); color: var(--bad); }
.vdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); animation: vdot 1.1s ease-in-out infinite; }
.vdot.busy { background: var(--primary); }
.vdot.off { background: var(--muted); animation: none; }
#spoken { display: flex; flex-direction: column; gap: 4px; padding: 0 14px; }
#spoken[hidden] { display: none; }
#spoken button { font: inherit; text-align: left; cursor: pointer; background: transparent; border: 0; }
.vbar { flex: none; width: 56px; height: 4px; background: var(--element); overflow: hidden; }
.vbar i { display: block; width: 0; height: 100%; background: var(--bad); transition: width 0.08s linear; }
@keyframes vdot { 50% { opacity: 0.3; } }
/* Pictures pasted into a message: waiting above the composer, and in the transcript. */
.shots { display: flex; flex-wrap: wrap; gap: 8px; }
#shots { margin: 10px 16px -4px; }
.shot { position: relative; }
.shot img { display: block; height: 56px; max-width: 140px; object-fit: cover; border: 1px solid var(--line-strong); }
.shot button { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; padding: 0; line-height: 1; border-radius: 50%; background: var(--element); color: var(--text); cursor: pointer; }
.msg.user .shots.after { margin-top: 6px; }
.shot img, .msg.user .shots img { cursor: zoom-in; }
.shotview { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 40px; background: color-mix(in srgb, #000 82%, transparent); cursor: zoom-out; }
.shotview img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; box-shadow: 0 8px 40px #000a; }
.shotview .count { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 12px; color: #ccc; }
.shotview .btn { position: absolute; top: 10px; right: 12px; }
.msg.user .shots img { display: block; max-height: 180px; max-width: 100%; border: 1px solid var(--line); }
.hint { display: flex; gap: 14px; padding: 0 18px 10px; font-size: 11px; color: var(--muted); }
.hint b { color: var(--secondary); font-weight: 400; }
.hint .pick { width: auto; padding: 0 4px; font-size: 11px; border-color: transparent; background: transparent; color: var(--secondary); }
.hint input.pick { color: var(--muted); }
.hint .pick:hover, .hint .pick:focus { border-color: var(--line-strong); }
#log > .blank { font-size: 12px; }
.hint .sp { flex: 1; }

.item .why { flex: none; font-size: 11px; color: var(--muted); }
.dim { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.switcher { position: fixed; z-index: 31; top: 18%; left: 50%; transform: translateX(-50%); width: min(560px, 92vw); max-height: 60vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-strong); padding: 4px 0; }
.sw { display: flex; align-items: baseline; gap: 10px; padding: 6px 14px; border-left: 2px solid transparent; }
.sw.on { background: var(--element); border-left-color: var(--primary); }
.sw .swt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw .note { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The command palette: the switcher's box with a line to type in above the list, which is what scrolls. */
.palette { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.palette .palq { flex: none; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.palette .pall { min-height: 0; overflow-y: auto; padding: 4px 0; }
.palette .sw { cursor: pointer; }
.palette .sw mark { background: none; color: var(--primary); }
.palette .empty { padding: 6px 16px; }
.swipe { position: fixed; z-index: 32; top: 50%; margin-top: -18px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--line-strong); color: var(--muted); pointer-events: none; }
.swipe.go { color: var(--primary); border-color: var(--primary); }
/* The recap: where you left off, over the middle of the screen. Under the shortcut list and the switcher, and under
   a pointer at a part of the app's frame, which is there to be seen first. */
.recapover { position: absolute; inset: 0; z-index: 26; display: flex; padding: 24px; overflow: auto; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.recapcard { margin: auto; width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 10px; padding: 12px 26px 26px; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--lift); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.recapcard .title { margin: 0 -12px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recapcard .what { margin: 8px 0 6px; text-align: center; font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--primary); }
.recapcard .keys { margin: 8px 0 -12px; text-align: center; font-size: 11px; color: var(--muted); }
.help { position: fixed; inset: 0; z-index: 30; display: flex; padding: 16px; overflow: auto; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.helpbox { margin: auto; background: var(--panel); border: 1px solid var(--line-strong); padding: 14px 20px 18px; width: min(880px, 100%); box-shadow: var(--lift); cursor: default; }
.helphead { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.helpcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); column-gap: 32px; }
.helpcols h3 { margin: 12px 0 4px; font-size: 12px; font-weight: normal; color: var(--muted); text-transform: lowercase; }
.hrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; }
.keys { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.hrow > span:first-child { white-space: nowrap; }
.keys kbd { font: inherit; font-size: 12px; min-width: 20px; padding: 0 5px; text-align: center; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 3px; background: var(--element); color: var(--text); }
.keys .or { color: var(--muted); }

/* Effects: a flourish drawn over the main area when the feed moves the user.
   It is placed there by the script, outside the main area, so that it outlives
   a change of screen. It is never in the way of the pointer and removes itself. */
.fx { position: fixed; z-index: 8; pointer-events: none; overflow: hidden; }
/* Next: the new thread is uncovered behind an edge that sweeps across. */
.fx-next { background: var(--panel); border-left: 3px solid var(--primary); transform-origin: right; animation: fx-wipe 0.28s cubic-bezier(0.3, 0.7, 0.2, 1) forwards; }
@keyframes fx-wipe { to { transform: scaleX(0); opacity: 0.5; } }
/* Arrive: something came for the user; the frame glows twice. */
.fx-arrive { animation: fx-glow 0.7s ease-out 2 forwards; }
@keyframes fx-glow { from { box-shadow: inset 0 0 0 3px var(--warn), inset 0 0 70px -10px var(--warn); } to { box-shadow: inset 0 0 0 3px transparent, inset 0 0 70px -10px transparent; } }
/* Clear: squares burst from the heading. */
.fx-clear i { position: absolute; left: var(--x, 50%); top: var(--y, 45%); width: 6px; height: 6px; margin: -3px; background: var(--ok); opacity: 0; animation: fx-burst 0.9s cubic-bezier(0.1, 0.7, 0.3, 1) forwards; }
.fx-clear i:nth-child(3n) { background: var(--primary); }
.fx-clear i:nth-child(3n + 1) { background: var(--secondary); }
@keyframes fx-burst { from { transform: rotate(var(--a)) translateY(-14px); opacity: 1; } to { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(0.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx { display: none; } }
.blank { margin: auto; text-align: center; color: var(--muted); padding: 24px; }
.blank h1 { color: var(--text); font-size: 14px; margin-bottom: 6px; }
.blank .acts { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
/* All clear: a clip fills the main area and the message sits on it as a pane of glass. */
.clear-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2.5s ease-out 0.3s; pointer-events: none; }
.clear-clip.on { opacity: 1; }
/* A still is given a little life: it is held larger than the area and moved slowly across it and back. */
.clear-clip.still { animation: clear-drift 80s ease-in-out infinite alternate; }
#main:has(> .clear-clip.still) { overflow: hidden; }
@keyframes clear-drift { from { transform: scale(1.06) translate(-1.5%, -1%); } to { transform: scale(1.16) translate(1.5%, 1%); } }
.clear-clip + .blank { position: relative; padding: 22px 30px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 72%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
/* Under the all-clear or on-a-break message, outside its pane so the pane stays centred: a line on the picture itself. */
#main > .blank { position: relative; }
/* A small pane of glass of its own, so it reads on any picture. */
.made { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; padding: 5px 10px; font-size: 12px; line-height: 1; white-space: nowrap; color: var(--text); border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 72%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); pointer-events: none; }
body.glass .made { background: var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); }
.blank .made { top: 100%; margin-top: 12px; }
/* On the home page with nothing on it yet: at the foot of the page, in the margin under the column. */
.homeintro > .made { bottom: 8px; }
.made .heart { color: var(--bad); }
.note { font-size: 12px; color: var(--muted); }
.good { color: var(--ok); }
.bad { color: var(--bad); }

/* ---- glass (a trial, on unless Plain is chosen in Settings) ----
   A still lies behind the whole window. The frame is frosted glass over it:
   sidebar, title bar, conversation and pages. The canvas stays solid. The
   frost is on a layer behind each part rather than on the part itself, which
   would otherwise become the box its fixed children are placed in. */
#wall, #wall2 { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease-out; pointer-events: none; }
#wall.on { opacity: 1; }
body.glass { --glass: color-mix(in srgb, var(--panel) 64%, transparent); --frost: blur(22px) saturate(1.25); }
body.glass #main, body.glass #side, body.glass #chat { background: transparent; }
body.glass #chat { position: relative; }
body.glass :is(#side, #chat, .thead)::before, body.glass #main:has(> .page)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); pointer-events: none; }
/* A page is read, not glanced at: its grey text is brought most of the way to the text colour, and the glass behind it lets less of the picture through. */
body.glass .page { --muted: color-mix(in srgb, var(--text) 80%, var(--panel)); }
body.glass #main:has(> .page)::before { background: color-mix(in srgb, var(--panel) 80%, transparent); }
body.glass .tbody { background: none; box-shadow: none; }
body.glass #panels { background: var(--stage) radial-gradient(var(--dots) 1px, transparent 1px) 0 0 / 16px 16px; box-shadow: inset 0 10px 16px -12px var(--edge); }
body.glass #main > .blank { position: relative; padding: 22px 30px; border: 1px solid var(--line); background: var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); }
body.glass .composer { background: color-mix(in srgb, var(--bg) 58%, transparent); }
body.glass :is(.turn.you, .item:hover, .item.sel) { background: color-mix(in srgb, var(--element) 58%, transparent); }
body.glass .mach:hover { background: none; }
/* The picture alone: in front of everything, faded in, and taking the clicks, so that the first one brings the window back. A note says how, and goes. */
body.peek :is(#wall, #wall2) { z-index: 70; pointer-events: auto; animation: peek .45s ease-out; }
@keyframes peek { from { opacity: 0; } }
#peeknote { position: fixed; z-index: 71; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 5px 10px; font-size: 12px; line-height: 1; white-space: nowrap; color: var(--text); border: 1px solid var(--line); background: var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); pointer-events: none; opacity: 0; animation: peeknote 3.2s ease-out; }
@keyframes peeknote { 0%, 100% { opacity: 0; } 15%, 70% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.peek :is(#wall, #wall2) { animation: none; } }
/* Choosing the picture, in Settings. */
.walls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wallpick { position: relative; aspect-ratio: 16 / 10; padding: 0; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--element); overflow: hidden; cursor: pointer; }
.wallpick img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wallpick span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 8px; background: color-mix(in srgb, var(--panel) 80%, transparent); font-size: 12px; text-align: left; text-transform: lowercase; }
.wallpick:hover { border-color: var(--text); }
.wallpick.on { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 1px; }

@media (max-width: 900px) {
  /* minmax(0, …): a bare 1fr is as wide as the longest title in the sidebar, which pushed the page off the side of a phone. */
  #app { grid-template-columns: minmax(0, 1fr); }
  body.in-thread #side { display: none; }
  body:not(.in-thread) #main { display: none; }
  .thead .back { display: inline-flex; }
  /* The buttons go to a second line when the title leaves them no room, so the header never runs off the side. */
  .thead { flex-wrap: wrap; gap: 6px 10px; }
  /* At the top, where the keyboard does not reach it. */
  body > .pair { place-items: start center; padding-top: max(24px, env(safe-area-inset-top)); } /* body >: the rule for .pair itself comes later in this file */
  .next span { display: none; }
  .tbody { flex-direction: column; }
  #panels { flex: none; height: 46dvh; }
  .tbody.solo #panels { display: none; }
  #chat { width: 100%; flex: 1; border-left: 0; border-top: 1px solid var(--line); box-shadow: none; }
  .page { padding: 18px 16px; }
  /* Settings' menu goes above its parts, as a strip that scrolls sideways. */
  .setwrap { flex-direction: column; gap: 8px; }
  .setmenu { flex: none; width: 100%; flex-direction: row; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
  .setmenu a { flex: none; border: 1px solid var(--line); }
  /* Installed on a home screen the page runs to the bottom edge of the glass: keep the last line of each screen above the home indicator. */
  #side { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  #chat, .page { padding-bottom: env(safe-area-inset-bottom); }
  .grid2 { grid-template-columns: 1fr; }
}

/* Document panels are sheets on the stage; code inside them sits on the frame colour. */
.panel .md pre { background: var(--panel); }

/* Safari on a phone zooms the whole page in when a box with text under 16px takes the keyboard, and does not zoom back out. */
@media (pointer: coarse) {
  input, textarea, select { font-size: 16px !important; }
}

/* The Inbox page: a line for each conversation, which opens to what was said. */
.inbox-filters { margin: 16px 0 6px; }
.inbox-row { border-bottom: 1px solid var(--line); padding: 7px 0 7px 8px; border-left: 2px solid transparent; }
.inbox-row.fresh { border-left-color: var(--secondary); }
.inbox-row.open { background: color-mix(in srgb, var(--element) 50%, transparent); }
.inbox-line { display: grid; grid-template-columns: 5em 5.5em minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.inbox-line .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row.open .inbox-line .what { white-space: normal; }
.inbox-row .why, .inbox-detail { margin-left: calc(10.5em + 20px); }
.inbox-detail { margin-top: 10px; margin-bottom: 4px; margin-right: 8px; }
.inbox-msg { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 10px; padding: 2px 0; }
.inbox-msg .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-msg.me .body { color: var(--secondary); }
.verdict { font-size: 11px; padding: 0 7px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.verdict.thread { color: var(--primary); border-color: var(--primary); }
.verdict.digest { color: var(--secondary); border-color: var(--secondary); }
.inbox-rules { font-family: var(--mono); font-size: 12px; }
@media (max-width: 900px) {
  .inbox-line { grid-template-columns: 4.5em minmax(0, 1fr) auto; }
  .inbox-line > .note:nth-child(2) { display: none; }
  .inbox-row .why, .inbox-detail { margin-left: 0; }
}

/* The pairing screen: all a device the hub does not know gets to see. */
.pair { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; place-items: center; padding: 24px; padding-top: max(24px, env(safe-area-inset-top)); overflow: auto; }
.pair form { width: min(100%, 380px); }
.pair input { width: 100%; font-size: 16px; } /* 16px: iOS zooms the page on anything smaller */
.pairing .code { font-family: var(--mono); font-size: 28px; letter-spacing: .12em; margin-top: 14px; }