:root {
  /* Dark is "Midnight": deep blue-black with three solid layers - the page,
     the bars and lists, and what sits on them - rather than see-through glass. */
  --bg: #0b0f17;
  --bg-2: rgba(160, 180, 220, .05);
  --bg-3: rgba(160, 180, 220, .085);
  --line: rgba(160, 180, 220, .10);
  --line-2: rgba(160, 180, 220, .20);
  --fg: #e8edf7;
  --fg-dim: #a3afc5;
  --fg-faint: #808ca4;
  --accent: #6ea8fe;
  --accent-rgb: 110, 168, 254;
  --accent-ink: #3f6ea8;
  --accent-dim: #3f6ea8;
  --good: #3ecf8e;
  --warn: #ffb648;
  --bad: #ff6b7a;
  --secret: #b9a2ff;
  --surface: #111725;      /* bars, lists, the composer */
  --raised: #18202f;       /* things that sit on them */
  --sheet: #141b29;        /* pop-ups */
  --field: #0f1521;        /* text boxes */
  --bubble-them: #1a2232;
  --bubble-them-line: rgba(160, 180, 220, .08);
  --bubble-mine: #3a7be6;
  --bubble-mine-line: transparent;
  --bubble-mine-fg: #ffffff;
  --bubble-mine-dim: rgba(255, 255, 255, .74);
  --brand-1: #6ea8fe;
  --brand-2: #a78bfa;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
  --lift: inset 0 1px 0 rgba(255, 255, 255, .09), 0 30px 60px -32px rgba(0, 0, 0, .95);
  --radius: 14px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

/* Light is its own set of steps, not an inversion: translucent white glass
   becomes translucent ink, borders gain weight, and the accent needs a darker
   step before it can carry text. Applied by a data-theme attribute the server
   stamps from a cookie, so there is no flash before the stylesheet lands. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --bg-2: rgba(10, 20, 45, .035);
  --bg-3: rgba(10, 20, 45, .06);
  --line: rgba(10, 20, 45, .11);
  --line-2: rgba(10, 20, 45, .2);
  --fg: #0d1526;
  --fg-dim: #46536b;
  --fg-faint: #6b7a93;
  --good: #0a8f3c;
  --warn: #9a6400;
  --bad: #c0362f;
  --secret: #6d41c8;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7));
  --lift: inset 0 1px 0 rgba(255, 255, 255, .9), 0 16px 34px -22px rgba(10, 20, 45, .4);
  --surface: transparent;
  --raised: rgba(10, 20, 45, .045);
  --sheet: linear-gradient(180deg, #fff, #f7f9fd);
  --field: #ffffff;
  --bubble-them: #ffffff;
  --bubble-them-line: rgba(10, 20, 45, .11);
  --bubble-mine: linear-gradient(165deg, rgba(110, 168, 254, .2), rgba(110, 168, 254, .07));
  --bubble-mine-line: rgba(110, 168, 254, .38);
  --bubble-mine-fg: #16203a;
  --bubble-mine-dim: #6b7a93;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f6fb;
    --bg-2: rgba(10, 20, 45, .035);
    --bg-3: rgba(10, 20, 45, .06);
    --line: rgba(10, 20, 45, .11);
    --line-2: rgba(10, 20, 45, .2);
    --fg: #0d1526;
    --fg-dim: #46536b;
    --fg-faint: #6b7a93;
    --good: #0a8f3c;
    --warn: #9a6400;
    --bad: #c0362f;
    --secret: #6d41c8;
    --glass: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7));
    --lift: inset 0 1px 0 rgba(255, 255, 255, .9), 0 16px 34px -22px rgba(10, 20, 45, .4);

    --surface: transparent;
    --raised: rgba(10, 20, 45, .045);
    --sheet: linear-gradient(180deg, #fff, #f7f9fd);
    --field: #ffffff;
    --bubble-them: #ffffff;
    --bubble-them-line: rgba(10, 20, 45, .11);
    --bubble-mine: linear-gradient(165deg, rgba(110, 168, 254, .2), rgba(110, 168, 254, .07));
    --bubble-mine-line: rgba(110, 168, 254, .38);
    --bubble-mine-fg: #16203a;
    --bubble-mine-dim: #6b7a93;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  color: var(--fg);
  font: 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Ambient light rather than a flat fill: three soft colour washes over ink,
   fixed so they do not slide around while a timeline scrolls. */
body {
  background:
    radial-gradient(1100px 520px at 10% -14%, rgba(110, 168, 254, .07), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

/* A trace of grain stops large dark areas reading as flat plastic. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* App shell: topbar keeps its natural height (it wraps on a phone) and the
   body below fills whatever is left. dvh tracks Safari's collapsing toolbar;
   vh is the fallback for browsers without it. */
body.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  /* The visible part of the screen, set by common.js: on an iPhone that
     excludes the keyboard, which 100dvh does not. */
  height: var(--app-h, 100dvh);
  overflow: hidden;
}
body.app > .topbar { flex: none; }
body.app > .shell,
body.app > .console,
body.app > .main,
body.app > #session-view,
body.app > .center-page { flex: 1; min-height: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: rgba(0, 0, 0, .34);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 9px 12px;
}
button {
  cursor: pointer;
  background: rgba(255, 255, 255, .055);
  white-space: nowrap;
  font-weight: 650;
  transition: background .14s, border-color .14s, transform .14s;
}
button:hover:not(:disabled) { background: rgba(255, 255, 255, .1); transform: translateY(-1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
input:focus, textarea:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--accent-dim); outline-offset: 1px; border-color: var(--accent-dim);
}
textarea { resize: vertical; font-family: var(--mono); font-size: 13px; }

.btn-primary {
  background: linear-gradient(180deg, #8ebbff, var(--accent));
  border-color: #7fb0ff;
  color: #06101f;
  font-weight: 700;
  box-shadow: 0 10px 24px -12px rgba(110, 168, 254, .95);
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #a3c8ff, #7fb4ff); }
.btn-danger { color: #ffb3ba; border-color: rgba(255, 107, 122, .35); background: rgba(255, 107, 122, .09); }
.btn-danger:hover:not(:disabled) { background: rgba(255, 107, 122, .16); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-dim); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-3); color: var(--fg); }
.btn-sm { padding: 4px 8px; font-size: 12px; border-radius: 6px; }

.mono { font-family: var(--mono); }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.good-text { color: var(--good); }
.warn-text { color: var(--warn); }
.row { display: flex; gap: 10px; align-items: center; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- shell ---- */
.topbar {
  display: flex; align-items: center; gap: 13px;
  min-height: 56px; padding: 0 17px;
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.01em; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 9px;
  background: linear-gradient(140deg, var(--brand-1), var(--brand-2));
  display: grid; place-items: center; font-size: 12px; color: #06101f; font-weight: 800;
  box-shadow: 0 6px 16px -7px rgba(110, 168, 254, .9);
  flex: none;
}
.badge {
  font-size: 11px; padding: 4px 9px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--fg-dim); background: rgba(255, 255, 255, .04);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700; white-space: nowrap;
}
.badge-admin { color: #dcc4ff; border-color: rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .13); }
.badge-good { color: #8df0c4; border-color: rgba(62, 207, 142, .35); background: rgba(62, 207, 142, .1); }
.badge-warn { color: #ffd089; border-color: rgba(255, 182, 72, .35); background: rgba(255, 182, 72, .1); }
.badge-bad { color: #ffb3ba; border-color: rgba(255, 107, 122, .35); background: rgba(255, 107, 122, .1); }
.badge-secret { color: #dcc4ff; border-color: rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .13); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-faint); flex: none; }
.dot.on { background: var(--good); animation: beat 2.6s infinite; }
@keyframes beat {
  0% { box-shadow: 0 0 0 0 rgba(62, 207, 142, .5); }
  70% { box-shadow: 0 0 0 8px rgba(62, 207, 142, 0); }
  100% { box-shadow: 0 0 0 0 rgba(62, 207, 142, 0); }
}
.dot.off { background: var(--fg-faint); }

/* ---- cards / panels ---- */
.card { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--lift); }
.card-pad { padding: 16px; }
.panel-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); font-weight: 700; }

/* ---- console layout ---- */
.console { display: grid; grid-template-columns: 290px 1fr; min-height: 0; }
.console.has-rail { grid-template-columns: 290px 1fr 268px; }
.sidebar {
  border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent);
}
.sidebar-head { padding: 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.device-list { overflow-y: auto; flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.device {
  display: flex; gap: 11px; align-items: center; width: 100%; text-align: left;
  padding: 11px; border-radius: 13px; border: 1px solid transparent; background: transparent;
}
.device:hover { background: rgba(255, 255, 255, .045); transform: none; }
.device.active {
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .18), rgba(167, 139, 250, .05));
  border-color: rgba(var(--accent-rgb), .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* What kind of device, as an icon, with a presence dot: which device is
   talking should be readable without reading. */
.device-av {
  width: 36px; height: 36px; border-radius: 11px; flex: none; position: relative;
  display: grid; place-items: center; font: 700 12px var(--mono); color: #0a1020;
  background: linear-gradient(140deg, var(--brand-1), var(--brand-2));
}
.device-av i {
  position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--good); border: 2.5px solid #0b0e15;
}
.device-unread {
  background: linear-gradient(180deg, #8ebbff, var(--accent)); color: #06101f;
  font: 700 10.5px var(--sans); border-radius: 99px; padding: 3px 7px; flex: none;
  box-shadow: 0 6px 14px -7px rgba(110, 168, 254, .9);
}
.device-name { font-weight: 600; font-size: 13px; }
.device-meta { font-size: 11px; color: var(--fg-faint); font-family: var(--mono); }
/* The agent badge sits on the name line and must never push the name out. */
.device .badge { font-size: 9px; padding: 2px 6px; flex: none; }

.sidebar-foot {
  border-top: 1px solid var(--line); padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.sidebar-foot #me { display: block; max-width: 100%; flex: 1; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.main-head { padding: 13px 17px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.dev-name-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
#dev-label { cursor: text; }
.btn-icon { padding: 3px 5px; line-height: 0; flex: none; }
.btn-icon:hover { color: var(--fg); }
.dev-label-input {
  font: 700 14px var(--sans); padding: 3px 8px; margin: -4px 0 -3px -9px;
  width: min(100%, 340px); min-width: 0;
}
.timeline {
  flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px;
  background: radial-gradient(900px 320px at 50% -14%, rgba(110, 168, 254, .06), transparent);
}
.composer {
  border-top: 1px solid var(--line); padding: 14px 18px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .025));
}

/* ---- items ---- */
.item { max-width: min(760px, 92%); display: flex; flex-direction: column; gap: 6px; }
.item.mine { align-self: flex-end; align-items: flex-end; }
.item-head { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--fg-faint); font-family: var(--mono); }
.bubble {
  border: 1px solid var(--line); background: var(--glass); border-radius: 16px;
  padding: 13px 15px; width: 100%; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}
.item.mine .bubble {
  background: linear-gradient(165deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .05));
  border-color: rgba(var(--accent-rgb), .32);
}
.bubble-title { font-weight: 700; font-size: 12px; margin-bottom: 6px; color: var(--fg-dim); }
.bubble pre {
  margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto;
}
.bubble.script { border-left: 2px solid var(--good); }
.bubble.secret {
  border-left: 2px solid var(--secret);
  background: linear-gradient(165deg, rgba(167, 139, 250, .15), rgba(167, 139, 250, .03));
}
.item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* Copy and Delete wait until the message is tapped (items.js). */
.item.selectable { cursor: pointer; outline: none; }
.item.selectable:not(.selected) .item-actions:not(.keep),
.item.selectable:not(.selected) .file-del { display: none; }
.item.selected .bubble { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .55); }
.item.selectable:focus-visible .bubble { box-shadow: 0 0 0 2px var(--accent); }
.item.selectable .bubble a, .item.selectable .bubble button { cursor: pointer; }
.item-actions:empty { display: none; }
.secret-cover { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.secret-cover .lock { font-size: 18px; }
/* Day dividers keep a long session legible. */
.day-divider {
  display: flex; align-items: center; gap: 14px; color: var(--fg-faint);
  font: 700 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.day-divider::before, .day-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.empty { margin: auto; text-align: center; color: var(--fg-faint); max-width: 420px; display: flex; flex-direction: column; gap: 10px; }

/* ---- pairing / modal ---- */
.modal-back {
  position: fixed; inset: 0; background: rgba(5, 8, 13, .76); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 50; padding: 20px;
}
.modal {
  width: 100%; max-width: 440px; border: 1px solid var(--line-2);
  border-radius: 20px; padding: 24px; max-height: 92dvh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(22, 27, 38, .96), rgba(12, 15, 22, .97));
  box-shadow: var(--lift);
}
.qr { background: #fff; padding: 10px; border-radius: 12px; display: block; width: 240px; height: 240px; margin: 0 auto; }
/* The code is the one thing on the page worth looking at. */
.paircode {
  font-family: var(--mono); font-size: 40px; font-weight: 800; letter-spacing: .13em;
  text-align: center; padding: 22px 12px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .16), rgba(167, 139, 250, .06) 60%, transparent);
  border: 1px solid rgba(var(--accent-rgb), .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 50px -30px rgba(var(--accent-rgb), .85);
  background-clip: padding-box;
}
.paircode-label {
  font: 700 11px var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); text-align: center; margin-bottom: 4px; opacity: .9;
}
.paircode-copy {
  display: inline-flex; align-items: center; gap: 7px; align-self: center; margin-top: 8px;
  padding: 7px 16px; border-radius: 999px; font: 600 13px var(--sans);
  color: var(--accent); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .3);
  cursor: pointer;
}
.paircode-copy:hover { background: rgba(var(--accent-rgb), .18); }
.paircode-copy.done { color: var(--good); }
.countdown { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); white-space: nowrap; }
.countdown.urgent { color: var(--warn); }

/* ---- centered single-purpose pages ---- */
.center-page { min-height: 100%; display: grid; place-items: center; padding: 24px; overflow-y: auto; }
.center-card {
  width: 100%; max-width: 560px; border: 1px solid var(--line); border-radius: 22px; padding: 30px;
  background: var(--glass); box-shadow: var(--lift); backdrop-filter: blur(18px);
}
.gbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 11px; font-weight: 600; background: #fff; color: #1f2328; border: none; border-radius: 8px;
}
.gbtn:hover { background: #f1f3f5; }
.code-input {
  font-family: var(--mono); font-size: 28px; font-weight: 700; text-align: center; letter-spacing: .16em;
  text-transform: uppercase; width: 100%; padding: 16px; border-radius: 14px;
}

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-faint); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg-2);
}
td { padding: 9px 10px; border-bottom: 1px solid #1b212e; vertical-align: middle; }
tr:hover td { background: #141924; }
.table-wrap { overflow: auto; max-height: 60vh; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.stat-n { font-size: 26px; font-weight: 700; font-family: var(--mono); line-height: 1.1; }
.stat-l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-faint); font-weight: 600; margin-top: 4px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--fg-dim); padding: 9px 14px; font-weight: 600; }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); }

.page { max-width: 1240px; margin: 0 auto; padding: 20px 16px 60px; }

/* ---- toasts / banners ---- */
.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; align-items: center; }
.toast {
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 14px;
  font-size: 13px; box-shadow: 0 8px 28px rgba(0, 0, 0, .5); animation: pop .16s ease-out;
}
.toast.good { border-color: #255043; color: var(--good); }
.toast.bad { border-color: #4a2a2f; color: var(--bad); }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }

.banner { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-3); font-size: 13px; }
.banner.bad { border-color: #4a2a2f; background: #241416; color: #ffc0c0; }
.banner.warn { border-color: #4e3c1d; background: #241c0f; color: #ffdfa8; }

.typing { font-size: 12px; color: var(--fg-faint); font-style: italic; height: 16px; }

/* A console tab left open across a deploy keeps running the JavaScript it
   loaded hours ago. Nothing looks wrong, which is the problem - a feature
   added since then is simply absent, and the operator blames the feature. */
.stale-bar {
  position: fixed; z-index: 80; left: 50%; transform: translateX(-50%);
  top: calc(12px + env(safe-area-inset-top, 0px)); width: min(440px, calc(100vw - 24px)); box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--sheet); box-shadow: var(--lift), 0 10px 30px -10px rgba(0, 0, 0, .45); color: var(--fg);
  animation: stale-in .25s ease-out;
}
.stale-bar.hidden { display: none; }
.stale-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.stale-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.stale-text b { font-size: 14px; font-weight: 650; }
.stale-text small { font-size: 12px; color: var(--fg-dim); }
.stale-bar .btn-primary { flex: none; padding: 8px 16px; }
@keyframes stale-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { .stale-bar { animation: none; } }

/* A call in trouble says so where the route usually is. */
.call-trouble { color: var(--warn, #f5b04a) !important; font-weight: 600; text-wrap: balance; }

/* ---- terminal agent ----
   An agent has no composer: it is asked for things from a fixed list rather
   than sent things. The list is the allowlist, so there is no field here to
   typo into. */
.agent-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 17px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .025));
}
.agent-panel .btn-sm { font-size: 12.5px; padding: 7px 12px; }
.agent-apps { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; }
.agent-app { display: flex; align-items: center; gap: 11px; padding: 8px 11px; border: 1px solid var(--line);
  border-radius: 10px; background: rgba(255, 255, 255, .03); }
.agent-app .meta { flex: 1; min-width: 0; }
.agent-app b { display: block; font-size: 13px; font-weight: 600; }
.agent-app small { font: 11px var(--mono); color: var(--fg-faint); }
/* An entry the machine cannot take is shown and explained rather than hidden:
   "why is it not there" is a worse question than "why is it greyed out". */
.agent-app.off { opacity: .5; }

/* ---- files ---- */
.file-card { display: flex; align-items: center; gap: 11px; min-width: 0; }
.file-ext {
  width: 38px; height: 44px; flex: none; border-radius: 6px; display: grid; place-items: end center;
  padding-bottom: 6px; font: 800 9px var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-dim); border: 1px solid var(--line-2);
  background: linear-gradient(170deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04));
}
.file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file-meta b { font-size: 13px; font-weight: 600; }
.file-meta small { font: 11px var(--mono); color: var(--fg-faint); overflow-wrap: anywhere; }
/* Download and delete: two matching icon buttons, the safe one in colour. */
.file-btns { display: flex; gap: 6px; flex: none; }
.file-btn {
  width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--bg-3); color: var(--fg-dim); text-decoration: none; cursor: pointer;
}
.file-btn:hover:not(:disabled) { color: var(--fg); text-decoration: none; transform: none; }
.file-get { color: var(--accent); border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .1); }
.file-get:hover { color: var(--accent); background: rgba(var(--accent-rgb), .18); }
.file-del:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); }
/* A picture shows at its own size - never stretched - up to a cap, and opens
   full screen on a tap. */
.file-preview {
  display: block; width: fit-content; max-width: 100%; margin: 0 0 10px; padding: 0; line-height: 0;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-3); cursor: zoom-in;
}
.file-preview:hover:not(:disabled) { transform: none; border-color: var(--line-2); }
.file-preview img { display: block; width: auto; height: auto; max-width: 100%; max-height: 240px; }

/* ---- picture preview (lightbox) ---- */
html.lb-open, html.lb-open body { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: #06080c; color: #fff; animation: lb-in .14s ease-out;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
@keyframes lb-in { from { opacity: 0; } }
.lb-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex: none; }
.lb-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.lb-name { font-size: 14px; font-weight: 600; min-width: 0; }
.lb-count { font: 12px var(--mono); opacity: .6; flex: none; }
.lb-btn {
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center; flex: none; border: 0; border-radius: 11px;
  color: #fff !important; background: rgba(255, 255, 255, .1) !important; cursor: pointer; text-decoration: none;
}
.lb-btn:hover { background: rgba(255, 255, 255, .18) !important; }
.lb-stage {
  flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center;
  padding: 4px 12px 16px; touch-action: pan-y pinch-zoom;
}
/* Fits the screen, but is never enlarged past its own pixels. */
.lb-img {
  max-width: 100%; max-height: calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  height: auto; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none;
}
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  color: #fff !important; background: rgba(255, 255, 255, .12) !important; cursor: pointer;
}
.lb-nav:hover:not(:disabled) { transform: translateY(-50%); background: rgba(255, 255, 255, .22) !important; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }

/* ---- keep a session longer ----
   The header countdown is a button; its menu offers how long to keep the
   pairing, each with the time that works out to. */
.extend-wrap { position: relative; flex: none; }
.extend-btn { padding: 5px 9px; border-radius: 9px; }
.extend-btn:hover:not(:disabled) { background: var(--bg-3); transform: none; }
.extend-btn .countdown { pointer-events: none; }
.extend-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 260px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--lift);
  background: linear-gradient(180deg, rgba(22, 27, 38, .98), rgba(12, 15, 22, .99));
}
.extend-head { font: 700 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); padding: 4px 8px 6px; }
.extend-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; font-size: 13px;
}
.extend-opt:hover:not(:disabled), .extend-opt:focus-visible { background: var(--bg-3); transform: none; }
.extend-opt span { font-size: 12px; }
/* Friend actions carry a sentence each: put it under the name and let it wrap. */
#friend-menu { width: min(280px, calc(100vw - 24px)); }
#friend-menu .extend-opt { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
#friend-menu .extend-opt span { line-height: 1.35; overflow-wrap: anywhere; }
.extend-note { padding: 6px 8px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.pair-keep select { flex: none; width: auto; min-width: 120px; }

/* ---- file cards: type colours, and the name as the way in ---- */
.file-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 0; margin: 0;
  background: transparent !important; border: 0; text-align: left; color: inherit; font: inherit; min-height: 0;
}
.file-main.can-open { cursor: pointer; }
.file-main.can-open:hover b { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.file-main:hover:not(:disabled) { transform: none; }
.file-ext[data-family="pdf"] { color: #ff8a8a; background: linear-gradient(170deg, rgba(255, 90, 90, .22), rgba(255, 90, 90, .05)); }
.file-ext[data-family="doc"] { color: #8ab4ff; background: linear-gradient(170deg, rgba(60, 120, 255, .24), rgba(60, 120, 255, .05)); }
.file-ext[data-family="xls"] { color: #6fe0a5; background: linear-gradient(170deg, rgba(40, 180, 110, .24), rgba(40, 180, 110, .05)); }
.file-ext[data-family="ppt"] { color: #ffb37a; background: linear-gradient(170deg, rgba(255, 140, 60, .24), rgba(255, 140, 60, .05)); }
.file-ext[data-family="img"] { color: #d6a8ff; background: linear-gradient(170deg, rgba(170, 110, 255, .22), rgba(170, 110, 255, .05)); }

/* ---- document preview ----
   PDFs, Word, Excel, slides and text open in the preview frame, on white
   "paper" in either theme - that is what a document looks like, and what its
   author designed for. */
.lightbox.lb-document .lb-stage { padding: 0; align-items: stretch; touch-action: auto; }
.lb-doc { flex: 1; width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; padding: 6px 16px 40px; outline: none; }
.lb-loading, .lb-failed { color: #c7cdd8; text-align: center; padding: 18vh 20px; font-size: 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.lb-failed b { color: #fff; font-size: 15px; }
.lb-failed span { max-width: 48ch; }
.doc-note { color: #9aa3b2; font-size: 12px; text-align: center; margin: 14px auto 0; max-width: 70ch; }

.doc-paper {
  max-width: 820px; margin: 0 auto; padding: 48px 56px; border-radius: 4px; background: #fff; color: #1d2229;
  font: 15px/1.6 var(--sans); box-shadow: 0 10px 40px rgba(0, 0, 0, .45); overflow-wrap: anywhere; white-space: pre-wrap;
}
.doc-paper p { margin: 0 0 .55em; }
.doc-paper h2, .doc-paper h3, .doc-paper h4, .doc-paper h5, .doc-paper h6 { margin: 1.1em 0 .45em; line-height: 1.25; color: #10151c; }
.doc-paper h2 { font-size: 1.7em; } .doc-paper h3 { font-size: 1.35em; } .doc-paper h4 { font-size: 1.15em; }
.doc-paper h5, .doc-paper h6 { font-size: 1em; }
.doc-li { position: relative; }
.doc-li::before { content: "•"; position: absolute; margin-left: -1em; color: #5b6472; }
.doc-link { color: #1a56db; text-decoration: underline; }
.doc-img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
.doc-table-wrap { overflow-x: auto; margin: .6em 0 1em; }
.doc-table { border-collapse: collapse; font-size: .92em; white-space: normal; }
.doc-table td { border: 1px solid #c9ced6; padding: 5px 8px; vertical-align: top; }
.doc-table td p { margin: 0; }

.pdf-pages { display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin: 0 auto; }
.pdf-page { position: relative; width: 100%; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.pdf-canvas { display: block; width: 100%; height: 100%; }
.pdf-fail { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: #5b6472; font-size: 13px; text-align: center; }
.pdf-n {
  position: absolute; right: 8px; bottom: 8px; font: 600 11px var(--mono); color: #fff;
  background: rgba(10, 14, 22, .6); padding: 2px 7px; border-radius: 999px;
}

.sheet-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 2px 0 10px; position: sticky; left: 0; }
.sheet-tab {
  flex: none; padding: 6px 12px; border-radius: 8px; font: 600 12.5px var(--sans); min-height: 0;
  background: rgba(255, 255, 255, .08) !important; color: #c7cdd8 !important; border: 1px solid transparent;
}
.sheet-tab[aria-selected="true"] { background: #fff !important; color: #1d2229 !important; }
.sheet-wrap { overflow: auto; max-height: calc(100dvh - 150px); border-radius: 6px; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
table.sheet { border-collapse: separate; border-spacing: 0; font: 12.5px var(--sans); color: #1d2229; }
table.sheet th, table.sheet td { border-right: 1px solid #e3e6eb; border-bottom: 1px solid #e3e6eb; padding: 4px 8px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
table.sheet thead th { position: sticky; top: 0; z-index: 2; background: #f3f5f8; color: #5b6472; font-weight: 600; text-align: center; }
table.sheet tbody th { position: sticky; left: 0; z-index: 1; background: #f3f5f8; color: #5b6472; font-weight: 500; text-align: right; }
table.sheet th.corner { left: 0; z-index: 3; }
table.sheet td.num { text-align: right; font-variant-numeric: tabular-nums; }

.slide {
  max-width: 820px; margin: 0 auto 14px; padding: 26px 30px 22px; border-radius: 6px; background: #fff; color: #1d2229;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45); font-size: 15px; line-height: 1.5;
}
.slide p { margin: 0 0 .4em; }
.slide p:nth-of-type(1) { font-size: 1.35em; font-weight: 700; color: #10151c; }
.slide .faint { color: #8a93a2; font-size: .9em; font-weight: 400; }
.slide-n { display: block; font: 700 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #8a93a2; margin-bottom: 10px; }

.doc-text {
  max-width: 1000px; margin: 0 auto; padding: 18px 20px; border-radius: 6px; background: #0f131a; color: #dfe4ec;
  border: 1px solid rgba(255, 255, 255, .1); font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.doc-picture { display: flex; justify-content: center; }
.doc-picture img { max-width: 100%; height: auto; background: repeating-conic-gradient(#e9ecf1 0 25%, #fff 0 50%) 0 0 / 16px 16px; }

/* End session: a word on a wide screen, a power icon on a phone. */
.btn-end { display: inline-flex; align-items: center; gap: 6px; }

/* Dragging a file over the conversation: it will be attached, not sent. */
.dropping { position: relative; }
.dropping::after {
  content: "Drop to attach  ·  you can review before sending"; position: absolute; inset: 10px; z-index: 30;
  pointer-events: none; display: grid; place-items: center; border-radius: 16px; font-weight: 700; color: var(--fg);
  border: 2px dashed rgba(var(--accent-rgb), .7); background: rgba(var(--accent-rgb), .12);
  backdrop-filter: blur(2px); text-align: center; padding: 20px;
}

/* ---- attachment tray ----
   Staged files, each a chip. Nothing in here has left the machine yet. */
.btn-attach { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-dim); }
.btn-attach:hover:not(:disabled) { color: var(--fg); background: var(--bg-3); }
.att-tray { display: flex; flex-wrap: wrap; gap: 8px; max-height: 172px; overflow-y: auto; }
.att-chip {
  position: relative; display: flex; align-items: center; gap: 9px; overflow: hidden;
  width: 236px; max-width: 100%; padding: 6px 6px 6px 6px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--bg-3);
}
.att-thumb {
  width: 38px; height: 38px; flex: none; border-radius: 7px; object-fit: cover;
  border: 1px solid var(--line);
}
.att-ext {
  display: grid; place-items: center; font: 800 9px var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-dim); background: linear-gradient(170deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .04));
}
.att-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.att-meta b { font-size: 12.5px; font-weight: 600; }
.att-meta small { font: 11px var(--mono); color: var(--fg-faint); }
.att-remove {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 7px;
  background: transparent; border: 0; color: var(--fg-faint); cursor: pointer;
}
.att-remove:hover { color: var(--fg); background: var(--line); }
.att-chip.bad { border-color: var(--bad); }
.att-chip.bad small { color: var(--bad); }
.att-chip.failed { border-color: var(--warn); }
.att-chip.failed small { color: var(--warn); }
.att-chip.uploading small { color: var(--accent); }
.att-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .15s;
}

/* ---- capability grants ----
   A chip is a live grant with its remaining days on it. Clicking one takes it
   back, so it reads as something held rather than a label. */
.chip-grant {
  font: 700 9.5px var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--bg-3); color: var(--fg-dim);
}
.chip-grant.on { color: #8df0c4; border-color: rgba(62, 207, 142, .4); background: rgba(62, 207, 142, .1); }
/* Break-glass reads as a warning, because that is what it is. */
.chip-grant.brk { color: #ffb3ba; border-color: rgba(255, 107, 122, .4); background: rgba(255, 107, 122, .1); }

@media (max-width: 1100px) {
  .console.has-rail { grid-template-columns: 290px 1fr; }
}

@media (max-width: 760px) {
  /* The list and the conversation take turns filling the screen, as in any
     messenger: tap a row to open it, the back arrow to return (app.js). */
  .console, .console.has-rail { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .place.console > .main { display: none; }
  .place.console.show-detail > .sidebar { display: none; }
  .place.console.show-detail > .main { display: flex; }
  .sidebar { border-right: none; }
  .device-list { max-height: none; }
  .mobile-only { display: inline-flex !important; }

  /* Wrap is the safety net: the console bar fits on one row, the admin bar
     has more controls than a phone can hold and spills onto a second. */
  .topbar { gap: 4px 8px; padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top)); min-height: 46px; flex-wrap: wrap; }
  .topbar .brand { font-size: 14px; }
  /* Measured at 390px: the bar was already full, and the lockup needs 23px it
     does not have. Both names go and the two marks stay - the tenant logo
     still leads, which is the part that has to survive. Same trade the remote
     session header already made, and the one the countdown and #me make. */
  .topbar .co-name, .topbar .brand-wordmark, .topbar .brand-name { display: none; }
  .topbar .brand.co { gap: 7px; }
  .topbar .co-rule { height: 14px; }
  .topbar .co-mark { width: 14px; height: 14px; }
  /* The wide logo has no text to drop, so it gives up width instead. */
  .topbar .brand-logo.wide { height: 22px; max-width: 124px; }
  /* Who you are signed in as does not earn a whole row on a phone; the admin
     console still shows it, and Sign out is right there. */
  .topbar #me { display: none; }
  #ws-status .faint { display: none; }

  /* Long labels do not fit; the short form lives in data-short. */
  .countdown { font-size: 0; }
  .countdown::after { content: attr(data-short); font-size: 11px; font-family: var(--mono); }

  .main-head { padding: 10px 12px; gap: 8px; flex-wrap: nowrap; }
  /* The Admin link already says "admin"; the duplicate badge, the rename
     button and the byte counts all lose to screen space here. */
  #role-badge, .item-head .bytes, #refreshed { display: none; }
  /* Drop the spacer and let the device/operator labels take the slack, so the
     End session button stays on the first row instead of forcing a second. */
  #session-view .topbar .grow { display: none; }
  #session-view .topbar .col { flex: 1; min-width: 0; }
  .timeline { padding: 12px; gap: 12px; }
  .item { max-width: 100%; }
  .bubble pre { max-height: 300px; font-size: 12px; }

  .composer { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 6px; }
  /* Kind and label share a row: stacking them cost a whole field of height
     in a composer that already competes with the conversation. */
  .composer .row.wrap { flex-wrap: nowrap; gap: 6px; }
  .composer select { width: 44%; flex: none; }
  .composer input { flex: 1; min-width: 0; }
  .composer textarea { min-height: 76px; height: 76px; }
  #hint { display: none; }
  /* The type selector gets the whole row; a label is only asked for where it
     helps (not for a plain message), and then on a row of its own. */
  .composer .row.wrap { flex-wrap: wrap; }
  .composer .seg { flex: 1 1 auto; }
  .composer .seg button { flex: 1; padding: 8px 6px; }
  .composer #title { flex: 1 1 100%; }
  .composer[data-kind="text"] #title { display: none; }
  .btn-attach .btn-text { display: none; }
  .btn-attach { padding: 8px 10px; }
  /* Writing is one row, as in any messaging app: paperclip, the box, a round
     send button. The button row underneath held only those two and cost a
     whole row of height. The box grows with what is typed, up to a limit. */
  .composer {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 6px; row-gap: 0; align-items: end;
    grid-template-areas: "kind kind kind" "tray tray tray" "attach body send";
  }
  .composer > .row.wrap { grid-area: kind; margin-bottom: 8px; }
  .composer > .att-tray { grid-area: tray; margin-bottom: 8px; }
  .composer > textarea {
    grid-area: body; min-height: 44px; height: 60px; max-height: 136px; resize: none; padding: 10px 12px;
  }
  @supports (field-sizing: content) {
    .composer > textarea { field-sizing: content; height: auto; }
  }
  .composer > .row:last-child { display: contents; }
  .composer > .row:last-child > :not(#attach):not(#send) { display: none; }
  .composer #attach { grid-area: attach; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  /* The label ("Send secret") stays as the accessible name; the arrow is what shows. */
  .composer #send {
    grid-area: send; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%;
    font-size: 0; display: grid; place-items: center;
  }
  .composer #send::before {
    content: ""; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* "is typing" keeps its row only while someone is. */
  .typing:empty { height: 0; }
  /* The fingerprint is a hover away on a desktop; on a phone it is noise. */
  .file-sha { display: none; }

  /* The remote session bar: the tenant mark, who, the time left, theme, and a
     power icon for End session. The product chevrons and the word go. */
  #session-view .topbar .co-rule, #session-view .topbar .co-product { display: none; }
  .btn-end .btn-text { display: none; }
  .btn-end { padding: 7px 9px; }
  .subtab { padding: 9px 10px; font-size: 12.5px; }
  .subtabs { padding: 0 10px; }
  .lb-nav { width: 38px; height: 38px; }
  .lb-doc { padding: 4px 8px 32px; }
  .doc-paper { padding: 22px 18px; font-size: 14px; }
  .slide { padding: 18px 16px; }
  .extend-menu { width: min(260px, calc(100vw - 24px)); }

  .center-page { padding: 16px; align-items: start; padding-top: max(16px, 6dvh); }
  .center-card { padding: 20px 18px; }
  .code-input { font-size: 22px; letter-spacing: .12em; padding: 12px; }
  .paircode { font-size: 24px; letter-spacing: .08em; padding: 10px; }
  .modal { padding: 16px; border-radius: 14px; }

  .page { padding: 14px 12px 48px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
  .stat { padding: 11px; }
  .stat-n { font-size: 21px; }
  .table-wrap { max-height: none; }
  th, td { white-space: nowrap; }
  .tabs { overflow-x: auto; }

  /* Bottom-anchored toasts sit right on top of the composer and the send
     button on a phone; drop them in from the top instead. */
  .toasts { bottom: auto; top: calc(58px + env(safe-area-inset-top)); }
  .toast { animation: pop-top .16s ease-out; }
}

@keyframes pop-top { from { opacity: 0; transform: translateY(-6px); } }


/* Touch targets: 32px is fine with a mouse, not with a thumb. */
@media (pointer: coarse) {
  button, select { min-height: 40px; }
  .btn-sm { min-height: 34px; padding: 7px 11px; }
  .tab { min-height: 42px; }
  .device { padding: 12px 10px; }
  .item-actions button { min-height: 34px; }
}

.mobile-only { display: none; }

/* ---- utilities ----
   The CSP forbids inline style attributes (style-src 'self'), so every
   one-off spacing/size tweak in the markup lives here instead. */
.m0 { margin: 0; }
.g0 { gap: 0; } .g1 { gap: 1px; } .g5 { gap: 5px; } .g6 { gap: 6px; } .g8 { gap: 8px; }
.g10 { gap: 10px; } .g12 { gap: 12px; } .g14 { gap: 14px; } .g16 { gap: 16px; } .g18 { gap: 18px; }
.pad-h { padding: 0 18px; }
.pad10 { padding: 10px; }
.divider-top { border-top: 1px solid var(--line); padding-top: 14px; }

.t11 { font-size: 11px; } .t12 { font-size: 12px; } .t13 { font-size: 13px; }
.t17 { font-size: 17px; } .t18 { font-size: 18px; } .t28 { font-size: 28px; }
.t32 { font-size: 32px; } .t34 { font-size: 34px; }

.center { text-align: center; }
.jc { justify-content: center; }
.min0 { min-width: 0; min-height: 0; }
.fit { width: auto; }
.vh100 { height: 100vh; height: 100dvh; }
.clip { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w200 { max-width: 200px; } .w220 { max-width: 220px; } .w320 { max-width: 320px; }
.dashed-btn { text-align: center; padding: 9px; border: 1px dashed var(--line-2); border-radius: 8px; }

/* ---- per-tenant branding ----
   Colours come from /brand.css; this is the shape of the mark itself. */
.tenant-tag { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); }

/* Links inside a handed-over payload: visible, and never wide enough to push
   the bubble past the screen on a phone. */
.bubble a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.bubble a:hover { color: var(--fg); }

/* The second door on the login page: same shape as the Google button so both
   read as equal choices, in the app's own colours rather than Google's. */
.gbtn-secondary { background: var(--bg-3); color: var(--fg); border: 1px solid var(--line-2); }
.gbtn-secondary:hover { background: #1f2636; border-color: var(--accent-dim); }

/* ---- per-tenant resources (remote side) ----
   Standard company links, rendered from tenants.json. Public: they show
   before any session exists. */
.resources { display: grid; gap: 10px; }
.resource {
  display: flex; gap: 13px; align-items: center; padding: 14px 15px; border-radius: 15px;
  border: 1px solid var(--line); background: var(--glass); text-decoration: none; color: inherit;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.resource:hover {
  transform: translateY(-2px); border-color: var(--line-2); text-decoration: none;
  box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .95);
}
.resource-ic {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none;
  color: var(--fg); background: linear-gradient(150deg, rgba(var(--accent-rgb), .3), rgba(167, 139, 250, .16));
  border: 1px solid rgba(var(--accent-rgb), .28);
}
.resource b { display: block; font-size: 14px; color: var(--fg); }
.resource small { display: block; font-size: 12.5px; color: var(--fg-faint); margin-top: 2px; }
.resource-go { color: var(--fg-faint); flex: none; }
.resource.primary {
  border-color: rgba(var(--accent-rgb), .45);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .17), rgba(167, 139, 250, .06) 70%, transparent);
}
.resource.primary .resource-ic {
  background: linear-gradient(150deg, rgba(var(--accent-rgb), .75), var(--accent)); color: #06101f;
  border-color: transparent; box-shadow: 0 10px 22px -11px rgba(var(--accent-rgb), .9);
}

/* ---- quick send (operator side) ---- */
.rail { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent); }
.rail-head { padding: 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.rail-list { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.snippet {
  display: flex; gap: 11px; align-items: center; padding: 11px; border-radius: 12px; width: 100%;
  border: 1px solid var(--line); background: var(--glass); text-align: left;
}
.snippet:hover { border-color: rgba(110, 168, 254, .4); transform: translateX(-2px); }
.snippet-ic {
  width: 33px; height: 33px; border-radius: 10px; display: grid; place-items: center; flex: none;
  color: #8df0c4; background: linear-gradient(150deg, rgba(62, 207, 142, .28), rgba(62, 207, 142, .1));
  border: 1px solid rgba(62, 207, 142, .26);
}
.snippet-ic.secret {
  color: #dcc4ff; background: linear-gradient(150deg, rgba(167, 139, 250, .3), rgba(167, 139, 250, .1));
  border-color: rgba(167, 139, 250, .3);
}
.snippet b { display: block; font-size: 12.5px; font-weight: 650; }
.snippet small {
  display: block; font: 10.5px var(--mono); color: var(--fg-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-foot { padding: 13px; border-top: 1px solid var(--line); }

/* ---- segmented control ----
   All three payload kinds visible at once: the choice decides whether the
   payload is destroyed on read, which is too important for a dropdown. */
.seg { display: inline-flex; background: rgba(0, 0, 0, .38); border: 1px solid var(--line-2);
       border-radius: 11px; padding: 3.5px; gap: 3px; }
.seg button {
  background: transparent; border: 0; color: var(--fg-dim); font: 650 12.5px var(--sans);
  padding: 7px 13px; border-radius: 8px; min-height: 0;
}
.seg button:hover:not(:disabled) { transform: none; background: rgba(255, 255, 255, .05); }
.seg button[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
  color: var(--fg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.seg button[aria-pressed="true"][data-kind="secret"] {
  background: linear-gradient(180deg, rgba(167, 139, 250, .38), rgba(167, 139, 250, .16)); color: #eaddff;
}
.seg button[aria-pressed="true"][data-kind="script"] {
  background: linear-gradient(180deg, rgba(62, 207, 142, .32), rgba(62, 207, 142, .13)); color: #a9f3cf;
}

/* ---- waiting state on the remote ---- */
.waiting-row { display: flex; align-items: center; gap: 14px; }
.ring { position: relative; width: 56px; height: 56px; flex: none; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px var(--mono); color: var(--fg-dim); }

@media (max-width: 760px) {
  .rail { display: none; }
  .resource { padding: 11px 12px; }
  .resource-ic { width: 34px; height: 34px; border-radius: 11px; }
  .paircode { font-size: 29px; padding: 16px 10px; }
  .center-card { padding: 20px 18px; border-radius: 18px; }
  .seg button { padding: 8px 11px; font-size: 12px; }
}

/* ---- sub tabs (conversation / resources on the remote) ---- */
.subtabs { display: flex; gap: 3px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
/* The same tabs inside a modal, which supplies its own padding. */
.subtabs.flush { padding: 0; }
/* The command a remote machine has to run. Selectable, scrollable, and never
   wrapped - a line break in a pasted shell command is its own support call. */
.howto { display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, .34);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 10px; }
.howto-cmd { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 12px; color: var(--fg); }
.howto-cmd::-webkit-scrollbar { height: 5px; }
.subtab {
  background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--fg-faint);
  font: 650 13px var(--sans); padding: 12px 12px; border-radius: 0;
}
.subtab:hover:not(:disabled) { background: transparent; color: var(--fg); transform: none; }
.subtab[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--accent); }

/* ---- admin: posture, controls, activity ---- */
.finding { display: flex; gap: 14px; align-items: flex-start; padding: 15px 17px; border-bottom: 1px solid rgba(255, 255, 255, .045); }
.finding:last-child { border-bottom: 0; }
.finding-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.finding b { display: block; font-size: 14px; }
.finding p { margin: 3px 0 0; font-size: 13px; color: var(--fg-dim); max-width: 70ch; }
/* status never travels alone: colour + icon + word */
.lvl { display: inline-flex; align-items: center; gap: 6px; font: 650 12px var(--sans); white-space: nowrap; }
.lvl-good    { color: #5ddc84; } .finding-ic.good    { background: rgba(12, 163, 12, .12);  color: #5ddc84; border: 1px solid rgba(12, 163, 12, .26); }
.lvl-warning { color: #fab219; } .finding-ic.warning { background: rgba(250, 178, 25, .12); color: #fab219; border: 1px solid rgba(250, 178, 25, .26); }
.lvl-serious { color: #ec835a; } .finding-ic.serious { background: rgba(236, 131, 90, .12); color: #ec835a; border: 1px solid rgba(236, 131, 90, .26); }
.lvl-critical{ color: #ff8a8a; } .finding-ic.critical{ background: rgba(208, 59, 59, .14);  color: #ff8a8a; border: 1px solid rgba(208, 59, 59, .3); }

.facets { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.facet { background: rgba(0, 0, 0, .22); border: 1px solid var(--line); border-radius: 15px; padding: 15px; }
.facet h4 { margin: 0; font-size: 13px; }
.facet .cap { font: 11px var(--mono); color: var(--fg-faint); margin: 2px 0 12px; }
.plot { display: flex; align-items: flex-end; gap: 2px; height: 74px; }
.plot .bar { flex: 1; background: #3987e5; border-radius: 4px 4px 0 0; min-height: 2px; }
.plot .bar:hover { filter: brightness(1.35); }
.plot .bar.peak { background: #5aa0f0; }
.facet .axis { display: flex; justify-content: space-between; font: 10px var(--mono); color: var(--fg-faint);
               margin-top: 7px; border-top: 1px solid var(--line); padding-top: 6px; }

.tenant-card { display: flex; gap: 15px; align-items: flex-start; padding: 16px 17px; }
.tenant-card dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 9px 0 0; font-size: 13px; align-items: baseline; }
.tenant-card dt { color: var(--fg-faint); font: 11.5px var(--mono); white-space: nowrap; }
.tenant-card dd { margin: 0; }

/* ---- link payload: a card with a real target, not a line of text ---- */
.link-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px;
  border: 1px solid rgba(255, 182, 72, .3); background: linear-gradient(140deg, rgba(255, 182, 72, .12), transparent 70%);
  text-decoration: none; color: inherit; min-height: 44px;
}
.link-card:hover { border-color: rgba(255, 182, 72, .5); text-decoration: none; }
.link-host { font: 700 13.5px var(--sans); color: var(--fg); flex: none; }
.link-path { font: 12px var(--mono); color: var(--fg-faint); flex: 1; min-width: 0; }
.link-open { font: 650 12.5px var(--sans); color: #ffd089; flex: none; }

/* ---- command palette ---- */
.palette-back {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center;
  padding: 12vh 20px 20px; background: rgba(4, 6, 11, .66); backdrop-filter: blur(4px);
}
.palette {
  width: 100%; max-width: 560px; border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(22, 27, 38, .98), rgba(12, 15, 22, .99));
  box-shadow: var(--lift); display: flex; flex-direction: column; max-height: 70dvh;
}
.palette-input {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
  padding: 17px 19px; font-size: 16px; width: 100%;
}
.palette-input:focus { outline: none; border-color: var(--line); }
.palette-list { overflow-y: auto; padding: 8px; flex: 1; }
.palette-group {
  font: 700 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-faint); padding: 11px 11px 6px;
}
.palette-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 10px 11px;
  font-weight: 500;
}
.palette-item.on {
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .2), rgba(167, 139, 250, .06));
  border-color: rgba(var(--accent-rgb), .36);
}
.palette-item:hover:not(:disabled) { transform: none; }
.palette-item-hint { font: 11.5px var(--mono); color: var(--fg-faint); max-width: 45%; }
.palette-empty { padding: 22px 12px; text-align: center; color: var(--fg-faint); font-size: 13.5px; }
.palette-hint {
  display: flex; gap: 16px; padding: 10px 19px; border-top: 1px solid var(--line);
  font: 11px var(--mono); color: var(--fg-faint);
}
@media (max-width: 760px) { .palette-back { padding-top: 6vh; } }



/* ---- light theme: flat selectors, because relaxed CSS nesting is too
   new to depend on in a tool people open on whatever browser is to hand ---- */
:root[data-theme="light"] body { background: radial-gradient(1100px 580px at 10% -12%, rgba(var(--accent-rgb), .13), transparent 62%), radial-gradient(900px 480px at 90% -6%, rgba(167, 139, 250, .1), transparent 58%), var(--bg); }
:root[data-theme="light"] body::after { opacity: .018; }
:root[data-theme="light"] button { background: rgba(10, 20, 45, .05); }
:root[data-theme="light"] button:hover:not(:disabled) { background: rgba(10, 20, 45, .09); }
:root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { background: #fff; }
:root[data-theme="light"] .topbar { background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .62)); }
:root[data-theme="light"] .sidebar, :root[data-theme="light"] .rail { background: linear-gradient(180deg, rgba(10, 20, 45, .022), transparent); }
:root[data-theme="light"] .bubble pre { color: #16203a; }
:root[data-theme="light"] .modal, :root[data-theme="light"] .palette { background: linear-gradient(180deg, #fff, #f7f9fd); }
:root[data-theme="light"] .extend-menu { background: #fff; }
:root[data-theme="light"] .file-ext[data-family="pdf"] { color: #b42323; }
:root[data-theme="light"] .file-ext[data-family="doc"] { color: #1f4fbf; }
:root[data-theme="light"] .file-ext[data-family="xls"] { color: #147a45; }
:root[data-theme="light"] .file-ext[data-family="ppt"] { color: #b4571b; }
:root[data-theme="light"] .file-ext[data-family="img"] { color: #6c3fc4; }
:root[data-theme="light"] .extend-opt { background: transparent; }
:root[data-theme="light"] .palette-back { background: rgba(20, 28, 48, .4); }
:root[data-theme="light"] .paircode { color: #0d1526; }
:root[data-theme="light"] .toast { background: #fff; color: var(--fg); }
:root[data-theme="light"] .badge-good { color: #0a6e30; background: rgba(10, 143, 60, .12); border-color: rgba(10, 143, 60, .3); }
:root[data-theme="light"] .badge-warn { color: #7d5200; background: rgba(154, 100, 0, .12); border-color: rgba(154, 100, 0, .3); }
:root[data-theme="light"] .badge-bad { color: #9c2b25; background: rgba(192, 54, 47, .12); border-color: rgba(192, 54, 47, .3); }
:root[data-theme="light"] .badge-admin, :root[data-theme="light"] .badge-secret { color: #553098; background: rgba(109, 65, 200, .12); border-color: rgba(109, 65, 200, .3); }
:root[data-theme="light"] .lvl-good { color: #0a6e30; }
:root[data-theme="light"] .lvl-warning { color: #7d5200; }
:root[data-theme="light"] .lvl-serious { color: #9c4a21; }
:root[data-theme="light"] .lvl-critical { color: #9c2b25; }
:root[data-theme="light"] .finding-ic.good { background: rgba(10, 143, 60, .1); color: #0a6e30; border-color: rgba(10, 143, 60, .25); }
:root[data-theme="light"] .finding-ic.warning { background: rgba(154, 100, 0, .1); color: #7d5200; border-color: rgba(154, 100, 0, .25); }
:root[data-theme="light"] .finding-ic.serious { background: rgba(156, 74, 33, .1); color: #9c4a21; border-color: rgba(156, 74, 33, .25); }
:root[data-theme="light"] .finding-ic.critical { background: rgba(192, 54, 47, .1); color: #9c2b25; border-color: rgba(192, 54, 47, .25); }
:root[data-theme="light"] .snippet-ic { color: #0a6e30; background: rgba(10, 143, 60, .12); border-color: rgba(10, 143, 60, .26); }
:root[data-theme="light"] .snippet-ic.secret { color: #553098; background: rgba(109, 65, 200, .12); border-color: rgba(109, 65, 200, .26); }
:root[data-theme="light"] .resource-ic { color: var(--accent-ink); }
:root[data-theme="light"] .link-host { color: var(--fg); }
:root[data-theme="light"] .link-open { color: #7d5200; }
:root[data-theme="light"] .device-av i { border-color: #fff; }
:root[data-theme="light"] tbody tr:hover td { background: rgba(10, 20, 45, .03); }
:root[data-theme="light"] td { border-bottom-color: rgba(10, 20, 45, .07); }
:root[data-theme="light"] a { color: var(--accent-ink); }
:root[data-theme="light"] .btn-primary { color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-ink)); border-color: var(--accent-ink); }
:root[data-theme="light"] .paircode-label { color: var(--accent-ink); }
:root[data-theme="light"] .tab.active { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
:root[data-theme="light"] .subtab[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--accent-ink); }
:root[data-theme="light"] .subtab, :root[data-theme="light"] .subtab:hover:not(:disabled) { background: transparent; }
:root[data-theme="light"] .seg { background: rgba(10, 20, 45, .05); border-color: rgba(10, 20, 45, .1); }
:root[data-theme="light"] .seg button { background: transparent; }
:root[data-theme="light"] .seg button[aria-pressed="true"] { background: #fff; color: var(--fg); box-shadow: 0 1px 3px rgba(10, 20, 45, .14); }
:root[data-theme="light"] .file-get { color: var(--accent-ink); background: rgba(var(--accent-rgb), .1); }
:root[data-theme="light"] .seg button[aria-pressed="true"][data-kind="secret"] { background: #efe7ff; color: #5b34c7; }
:root[data-theme="light"] .seg button[aria-pressed="true"][data-kind="script"] { background: #e3f7ee; color: #12734a; }
:root[data-theme="light"] .seg button[aria-pressed="true"][data-kind="command"] { background: #ffe9ec; color: #b4233a; }
:root[data-theme="light"] .resource b, :root[data-theme="light"] .snippet b, :root[data-theme="light"] .device-name { color: var(--fg); }
:root[data-theme="light"] .qr { box-shadow: 0 16px 34px -22px rgba(10, 20, 45, .5); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body { background: radial-gradient(1100px 580px at 10% -12%, rgba(var(--accent-rgb), .13), transparent 62%), radial-gradient(900px 480px at 90% -6%, rgba(167, 139, 250, .1), transparent 58%), var(--bg); }
  :root:not([data-theme="dark"]) body::after { opacity: .018; }
  :root:not([data-theme="dark"]) button { background: rgba(10, 20, 45, .05); }
  :root:not([data-theme="dark"]) button:hover:not(:disabled) { background: rgba(10, 20, 45, .09); }
  :root:not([data-theme="dark"]) input, :root:not([data-theme="dark"]) textarea, :root:not([data-theme="dark"]) select { background: #fff; }
  :root:not([data-theme="dark"]) .topbar { background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .62)); }
  :root:not([data-theme="dark"]) .sidebar, :root:not([data-theme="dark"]) .rail { background: linear-gradient(180deg, rgba(10, 20, 45, .022), transparent); }
  :root:not([data-theme="dark"]) .bubble pre { color: #16203a; }
  :root:not([data-theme="dark"]) .modal, :root:not([data-theme="dark"]) .palette { background: linear-gradient(180deg, #fff, #f7f9fd); }
  :root:not([data-theme="dark"]) .extend-menu { background: #fff; }
  :root:not([data-theme="dark"]) .file-ext[data-family="pdf"] { color: #b42323; }
  :root:not([data-theme="dark"]) .file-ext[data-family="doc"] { color: #1f4fbf; }
  :root:not([data-theme="dark"]) .file-ext[data-family="xls"] { color: #147a45; }
  :root:not([data-theme="dark"]) .file-ext[data-family="ppt"] { color: #b4571b; }
  :root:not([data-theme="dark"]) .file-ext[data-family="img"] { color: #6c3fc4; }
  :root:not([data-theme="dark"]) .extend-opt { background: transparent; }
  :root:not([data-theme="dark"]) .palette-back { background: rgba(20, 28, 48, .4); }
  :root:not([data-theme="dark"]) .paircode { color: #0d1526; }
  :root:not([data-theme="dark"]) .toast { background: #fff; color: var(--fg); }
  :root:not([data-theme="dark"]) .badge-good { color: #0a6e30; background: rgba(10, 143, 60, .12); border-color: rgba(10, 143, 60, .3); }
  :root:not([data-theme="dark"]) .badge-warn { color: #7d5200; background: rgba(154, 100, 0, .12); border-color: rgba(154, 100, 0, .3); }
  :root:not([data-theme="dark"]) .badge-bad { color: #9c2b25; background: rgba(192, 54, 47, .12); border-color: rgba(192, 54, 47, .3); }
  :root:not([data-theme="dark"]) .badge-admin, :root:not([data-theme="dark"]) .badge-secret { color: #553098; background: rgba(109, 65, 200, .12); border-color: rgba(109, 65, 200, .3); }
  :root:not([data-theme="dark"]) .lvl-good { color: #0a6e30; }
  :root:not([data-theme="dark"]) .lvl-warning { color: #7d5200; }
  :root:not([data-theme="dark"]) .lvl-serious { color: #9c4a21; }
  :root:not([data-theme="dark"]) .lvl-critical { color: #9c2b25; }
  :root:not([data-theme="dark"]) .finding-ic.good { background: rgba(10, 143, 60, .1); color: #0a6e30; border-color: rgba(10, 143, 60, .25); }
  :root:not([data-theme="dark"]) .finding-ic.warning { background: rgba(154, 100, 0, .1); color: #7d5200; border-color: rgba(154, 100, 0, .25); }
  :root:not([data-theme="dark"]) .finding-ic.serious { background: rgba(156, 74, 33, .1); color: #9c4a21; border-color: rgba(156, 74, 33, .25); }
  :root:not([data-theme="dark"]) .finding-ic.critical { background: rgba(192, 54, 47, .1); color: #9c2b25; border-color: rgba(192, 54, 47, .25); }
  :root:not([data-theme="dark"]) .snippet-ic { color: #0a6e30; background: rgba(10, 143, 60, .12); border-color: rgba(10, 143, 60, .26); }
  :root:not([data-theme="dark"]) .snippet-ic.secret { color: #553098; background: rgba(109, 65, 200, .12); border-color: rgba(109, 65, 200, .26); }
  :root:not([data-theme="dark"]) .resource-ic { color: var(--accent-ink); }
  :root:not([data-theme="dark"]) .link-host { color: var(--fg); }
  :root:not([data-theme="dark"]) .link-open { color: #7d5200; }
  :root:not([data-theme="dark"]) .device-av i { border-color: #fff; }
  :root:not([data-theme="dark"]) tbody tr:hover td { background: rgba(10, 20, 45, .03); }
  :root:not([data-theme="dark"]) td { border-bottom-color: rgba(10, 20, 45, .07); }
  :root:not([data-theme="dark"]) a { color: var(--accent-ink); }
  :root:not([data-theme="dark"]) .btn-primary { color: #fff; background: linear-gradient(180deg, var(--accent), var(--accent-ink)); border-color: var(--accent-ink); }
  :root:not([data-theme="dark"]) .paircode-label { color: var(--accent-ink); }
  :root:not([data-theme="dark"]) .tab.active { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }
  :root:not([data-theme="dark"]) .subtab[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--accent-ink); }
  :root:not([data-theme="dark"]) .subtab, :root:not([data-theme="dark"]) .subtab:hover:not(:disabled) { background: transparent; }
  :root:not([data-theme="dark"]) .seg { background: rgba(10, 20, 45, .05); border-color: rgba(10, 20, 45, .1); }
  :root:not([data-theme="dark"]) .seg button { background: transparent; }
  :root:not([data-theme="dark"]) .seg button[aria-pressed="true"] { background: #fff; color: var(--fg); box-shadow: 0 1px 3px rgba(10, 20, 45, .14); }
  :root:not([data-theme="dark"]) .file-get { color: var(--accent-ink); background: rgba(var(--accent-rgb), .1); }
  :root:not([data-theme="dark"]) .seg button[aria-pressed="true"][data-kind="secret"] { background: #efe7ff; color: #5b34c7; }
  :root:not([data-theme="dark"]) .seg button[aria-pressed="true"][data-kind="script"] { background: #e3f7ee; color: #12734a; }
  :root:not([data-theme="dark"]) .seg button[aria-pressed="true"][data-kind="command"] { background: #ffe9ec; color: #b4233a; }
  :root:not([data-theme="dark"]) .resource b, :root:not([data-theme="dark"]) .snippet b, :root:not([data-theme="dark"]) .device-name { color: var(--fg); }
  :root:not([data-theme="dark"]) .qr { box-shadow: 0 16px 34px -22px rgba(10, 20, 45, .5); }
}

/* ---- brand wordmark ----
   Self-hosted rather than fetched from Google: the CSP stays 'self' only, and
   no visitor's address is handed to a third party just to draw a logo.
   One variable file covers the whole weight range. */
@font-face {
  font-family: 'Brand Sans';
  src: url('/fonts/montserrat.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.brand-logo { width: 28px; height: 28px; border-radius: 0; object-fit: contain; flex: none; display: block; }
.brand-name { white-space: nowrap; }
/* A tenant that ships a wordmark gets its own face and spacing. */
.brand-wordmark {
  font-family: 'Brand Sans', var(--sans);
  font-weight: 400;
  letter-spacing: -.4px;
  white-space: nowrap;
}
.brand-wordmark strong { font-weight: 700; }
.center-card .brand-logo, .brand.t18 .brand-logo { width: 40px; height: 40px; }

/* ---- co-brand lockup ----
   Tenant first, product second. The hairline is what keeps them from reading
   as two companies sharing a title bar: it gives the eye a stop, so the second
   half is understood as a label rather than another owner. The mark is in
   the product's blue, as on the app icon. */
.brand.co { gap: 10px; }
.co-rule { width: 1px; height: 17px; background: var(--line-2); flex: none; }
.co-product { display: flex; align-items: center; gap: 6px; color: var(--accent); flex: none; }
.co-mark { width: 15px; height: 15px; display: block; flex: none; }
.co-mark path {
  fill: none; stroke: currentColor; stroke-width: 9;
  stroke-linecap: round; stroke-linejoin: round;
}
.co-name { font-size: 12px; font-weight: 600; color: var(--fg-dim); white-space: nowrap; }
/* The cards have room, so everything steps up with the tenant logo. */
.center-card .co-rule, .brand.t18 .co-rule { height: 24px; }
.center-card .co-mark, .brand.t18 .co-mark { width: 19px; height: 19px; }
.center-card .co-name, .brand.t18 .co-name { font-size: 13px; }

/* ---- wide tenant logos ----
   A horizontal lockup already spells the company name, so it replaces the
   text wordmark and keeps its own aspect instead of being squeezed square.
   max-width is the safety net: a very long lockup must not push the rest of
   the topbar onto a second row. */
.brand-logo.wide { width: auto; height: 26px; max-width: 190px; }
.center-card .brand-logo.wide, .brand.t18 .brand-logo.wide { width: auto; height: 38px; max-width: 260px; }

/* Both variants ship in the markup because the theme can be the operating
   system's choice, which the server never sees. Default to the dark-surface
   artwork and swap only where the page is actually light. */
.brand-logo.for-light { display: none; }
:root[data-theme="light"] .brand-logo.for-light { display: block; }
:root[data-theme="light"] .brand-logo.for-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand-logo.for-light { display: block; }
  :root:not([data-theme="dark"]) .brand-logo.for-dark { display: none; }
}

.center-card .brand-wordmark, .brand.t18 .brand-wordmark { font-size: 1.5rem; }
.center-card .brand, .brand.t18 { gap: 12px; }
.topbar .brand-wordmark { font-size: 1.05rem; }

/* ---- Markdown in a message bubble ----------------------------------------------- */
.md {
  font-size: 14px; line-height: 1.55; overflow-wrap: anywhere;
  max-height: 520px; overflow: auto;
}
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md .md-table, .md .md-pre { margin: 0 0 10px; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 14px 0 6px; line-height: 1.3; font-weight: 700; }
.md h1 { font-size: 19px; }
.md h2 { font-size: 17px; }
.md h3 { font-size: 15px; }
.md h4, .md h5, .md h6 { font-size: 14px; color: var(--fg-dim); }
.md ul, .md ol { padding-left: 22px; }
.md li { margin: 2px 0; }
.md li > ul, .md li > ol { margin: 2px 0; }
.md li.md-task { list-style: none; margin-left: -20px; }
.md li.md-task > input { margin: 0 7px 0 0; vertical-align: -1px; width: auto; }
.md a { color: var(--accent); }
.md code {
  font-family: var(--mono); font-size: 12.5px; padding: 1px 5px; border-radius: 5px;
  background: var(--bg-3); border: 1px solid var(--line);
}
.md .md-pre {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5; white-space: pre;
  overflow: auto; max-height: 360px; padding: 10px 12px; border-radius: 10px;
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line);
}
.md .md-pre code { padding: 0; border: 0; background: none; font-size: inherit; }
.md blockquote {
  padding: 2px 0 2px 12px; border-left: 3px solid var(--line-2); color: var(--fg-dim);
}
.md hr { border: 0; border-top: 1px solid var(--line-2); margin: 12px 0; }
.md .md-table { overflow-x: auto; }
.md table { border-collapse: collapse; font-size: 13px; }
.md th, .md td { border: 1px solid var(--line-2); padding: 5px 9px; text-align: left; vertical-align: top; }
.md th { background: var(--bg-3); font-weight: 700; }
.md .md-center { text-align: center; }
.md .md-right { text-align: right; }
:root[data-theme="light"] .md .md-pre { background: rgba(10, 20, 45, .045); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .md .md-pre { background: rgba(10, 20, 45, .045); }
}
@media (max-width: 640px) {
  .md { font-size: 14.5px; max-height: 420px; }
}

/* ---- end-to-end lock chip and voice calls ----------------------------------------
   The chip carries the safety code; amber until the two people have compared
   it, green after. A call is a card in the corner on a computer and the whole
   screen on a phone, like any phone call. */
.e2e-chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none; min-height: 0;
  font: 650 11.5px var(--mono); letter-spacing: .04em; padding: 4px 9px; border-radius: 999px;
  color: var(--fg-dim); background: var(--bg-3); border: 1px solid var(--line-2);
}
.e2e-chip[data-tone="good"] { color: var(--good); border-color: rgba(62, 207, 142, .45); background: rgba(62, 207, 142, .1); }
.e2e-chip[data-tone="warn"] { color: var(--warn); border-color: rgba(255, 182, 72, .45); background: rgba(255, 182, 72, .1); }
.e2e-chip[data-tone="bad"] { color: var(--bad); border-color: rgba(255, 107, 122, .45); background: rgba(255, 107, 122, .1); }
.e2e-chip svg { flex: none; }
.call-btn { padding: 7px; border-radius: 11px; color: var(--good); }
.call-btn:disabled { color: var(--fg-faint); }

.sas-box {
  border: 1px solid rgba(62, 207, 142, .35); background: rgba(62, 207, 142, .06);
  border-radius: 14px; padding: 12px 16px; text-align: center;
}
.sas-box small { display: block; color: var(--fg-dim); font-size: 12px; }
.sas { font: 750 30px var(--mono); letter-spacing: .14em; color: var(--fg); padding: 4px 0; }
.verify-modal { max-width: 420px; }

.call-sheet {
  /* Top right, clear of the composer and its Send button. */
  position: fixed; right: 20px; top: 76px; z-index: 250; width: 320px;
  animation: pop-top .18s ease-out;
}
.call-card {
  border: 1px solid var(--line-2); border-radius: 22px; padding: 22px 18px 18px; text-align: center;
  background: radial-gradient(320px 220px at 50% 0%, rgba(var(--accent-rgb), .2), transparent 72%), var(--bg);
  box-shadow: var(--lift), 0 24px 60px -20px rgba(0, 0, 0, .7);
  display: flex; flex-direction: column; gap: 18px;
}
.call-sheet[data-state="active"] .call-card { border-color: rgba(62, 207, 142, .45); }
.call-who { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.call-av {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 6px;
  font: 800 21px var(--sans); color: #0a1020; background: linear-gradient(140deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 0 0 8px rgba(var(--accent-rgb), .1);
}
.call-sheet[data-state="incoming"] .call-av, .call-sheet[data-state="outgoing"] .call-av { animation: call-pulse 1.6s ease-in-out infinite; }
@keyframes call-pulse {
  50% { box-shadow: 0 0 0 16px rgba(var(--accent-rgb), .06); }
}
.call-name { margin: 0; font-size: 17px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-status { font-size: 13px; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.call-sheet[data-state="active"] .call-status { font-family: var(--mono); color: var(--fg); }
.call-sas { margin-top: 10px; padding: 7px 14px; border-radius: 12px; border: 1px solid rgba(62, 207, 142, .3); background: rgba(62, 207, 142, .06); }
.call-sas small { display: block; font-size: 10.5px; color: var(--fg-dim); letter-spacing: .06em; text-transform: uppercase; }
.call-sas-code { font: 750 19px var(--mono); letter-spacing: .14em; }
.call-bg-note { display: flex; align-items: flex-start; gap: 8px; max-width: 300px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warn, #f5b04a) 35%, transparent); background: color-mix(in srgb, var(--warn, #f5b04a) 8%, transparent); color: var(--fg-dim); font-size: 12.5px; line-height: 1.45; text-align: left; }
.call-bg-note svg { flex: none; margin-top: 2px; color: var(--warn, #f5b04a); }
.call-bg-note.hidden { display: none; }
.call-lock { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11.5px; color: var(--fg-faint); }
.call-acts { display: flex; justify-content: center; gap: 30px; }
.call-act { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.call-act span { font-size: 11.5px; color: var(--fg-dim); }
.call-round {
  width: 56px; height: 56px; min-height: 56px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--fg);
}
.call-round.call-end { background: #e5484d; border-color: #e5484d; color: #fff; }
.call-round.call-ok { background: #2bb673; border-color: #2bb673; color: #fff; }
.call-round.call-on { background: var(--fg); color: var(--bg); }
.call-round.call-end:hover:not(:disabled) { background: #d13b40; }
.call-round.call-ok:hover:not(:disabled) { background: #22a165; }
.call-audio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* A call in the conversation is one line, centred, not a bubble. */
.item.call-item { align-self: center; max-width: 100%; }
.call-line {
  display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 7px 14px 7px 8px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2);
}
.call-line-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--good); background: rgba(62, 207, 142, .13); }
.call-line-ic.missed { color: var(--bad); background: rgba(255, 107, 122, .12); }
.call-line-text { min-width: 0; }

@media (max-width: 760px) {
  /* A phone call takes the phone. */
  .call-sheet { inset: 0; width: auto; }
  .call-card {
    height: 100%; border: 0; border-radius: 0; justify-content: space-between;
    padding: calc(56px + env(safe-area-inset-top)) 22px calc(40px + env(safe-area-inset-bottom));
  }
  .call-av { width: 92px; height: 92px; border-radius: 28px; font-size: 30px; }
  .call-name { font-size: 22px; margin-top: 10px; }
  .call-status { font-size: 15px; }
  .call-sas-code { font-size: 22px; }
  .call-acts { gap: 54px; }
  .call-round { width: 66px; height: 66px; min-height: 66px; }
  html.call-open, html.call-open body { overflow: hidden; }
  /* The safety code is a tap away on the lock; the header has no room for it. */
  #session-view .topbar .e2e-chip span, .main-head .e2e-chip span { display: none; }
  #session-view .topbar .e2e-chip, .main-head .e2e-chip { padding: 6px 8px; }
}

/* ---- friends (/people, /f/:token) ------------------------------------------ */
/* A person's avatar: initials on a colour fixed by their id. Round, where a
   device's is a rounded square, so a person never looks like a machine. */
.pav {
  width: 36px; height: 36px; border-radius: 50%; flex: none; position: relative;
  display: grid; place-items: center; font: 700 12.5px var(--sans); color: #fff; letter-spacing: .02em;
}
.pav i {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--good); border: 2.5px solid var(--bg);
}
.pav.lg { width: 64px; height: 64px; font-size: 21px; margin: 0 auto; }
.pav.c1 { background: linear-gradient(140deg, #f08a5d, #d9485f); }
.pav.c2 { background: linear-gradient(140deg, #3ecf8e, #1d8f72); }
.pav.c3 { background: linear-gradient(140deg, #a78bfa, #6d4fd8); }
.pav.c4 { background: linear-gradient(140deg, #f5b544, #d98a1c); }
.pav.c5 { background: linear-gradient(140deg, #5aa9ff, #2f6fd6); }
.pav.c6 { background: linear-gradient(140deg, #f472b6, #c2417f); }
.main-head .pav { width: 34px; height: 34px; font-size: 12px; }

.kind-chip {
  font: 700 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; flex: none;
  padding: 2px 7px; border-radius: 999px; color: var(--fg-dim); border: 1px solid var(--line-2);
}
.kind-chip.staff { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .1); }

.notify-card { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 11px 12px; border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .08); }
.notify-btn { padding: 7px; border-radius: 11px; }
.notify-btn[data-state="on"] { color: var(--accent); }
.reqcard {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px; border-radius: 12px;
  border: 1px dashed rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .06);
}
.reqcard small { font-size: 11.5px; }

.people-welcome { max-width: 440px; }
.people-starts { margin-top: 6px; text-align: left; }
.bigbtn {
  display: flex; align-items: center; gap: 12px; padding: 13px; border-radius: 13px; width: 100%;
  border: 1px solid var(--line-2); background: var(--bg-3); color: var(--fg); font-size: 13.5px; text-align: left;
  white-space: normal;
}
.bigbtn > span:last-child { min-width: 0; }
.bigbtn:hover { border-color: rgba(var(--accent-rgb), .55); transform: none; }
.bigbtn .ic {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: rgba(var(--accent-rgb), .16); font-size: 16px;
}
.bigbtn small { display: block; color: var(--fg-faint); font-size: 11.5px; margin-top: 2px; line-height: 1.4; }

.friends-since {
  align-self: center; text-align: center; font-size: 12px; color: var(--fg-faint);
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); max-width: 92%;
}

.linkbox {
  font-size: 12px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line-2);
  color: var(--fg-dim); word-break: break-all; user-select: all;
}
.wa-btn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  background: #25d366; color: #062b14; font-weight: 650; border-radius: 10px; padding: 7px 12px;
}
.wa-btn:hover { background: #2fe072; }
.pending-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); font-size: 13px;
}
.pending-row small { font-size: 11px; }
#add-modal .modal { max-height: 88dvh; overflow-y: auto; }

.invite-card .center { text-align: center; align-items: center; }
.invite-card .gbtn, .invite-card #accept { width: 100%; }



/* ---- the app: Chats and Devices on one page (app.html, app.js) -------------
   A rail on the left on a computer; tabs along the bottom on a phone. */
.shell { display: flex; min-height: 0; }
.shell-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.shell-main > .place { flex: 1; min-height: 0; }
.appnav {
  width: 76px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: calc(14px + env(safe-area-inset-top)) 0 14px; border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);
}
.nav-brand { margin-bottom: 12px; min-height: 28px; display: grid; place-items: center; }
.nav-logo { width: 34px; height: 34px; border-radius: 10px; display: block; }
.nav-logo.bare { width: 36px; height: 36px; border-radius: 0; }
.nav-btn {
  position: relative; width: 60px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0 6px; border-radius: 14px; color: var(--fg-faint); font-size: 11px; font-weight: 650;
}
.nav-btn:hover { color: var(--fg); background: rgba(127, 127, 127, .09); text-decoration: none; }
.nav-btn[aria-current="page"] { color: var(--accent); background: rgba(var(--accent-rgb), .14); }
.nav-ic { display: grid; place-items: center; height: 26px; }
.nav-badge {
  position: absolute; top: 1px; left: calc(50% + 6px); font: 700 10px/1.5 var(--sans); font-style: normal;
  min-width: 18px; padding: 0 5px; border-radius: 999px; text-align: center;
  background: var(--accent); color: #06101f;
}
.nav-badge.nav-warn { background: var(--warn); }
.nav-gap { flex: 1; }
.nav-av { width: 28px; height: 28px; font-size: 10.5px; }
.nav-btn[aria-current="page"] .nav-av { box-shadow: 0 0 0 2px var(--accent); }

.place-title { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -.01em; }
.place-act { padding: 6px; border-radius: 10px; color: var(--accent); }
.ws-chip { font: 650 11px var(--sans); color: var(--warn); white-space: nowrap; }
.list-search { width: 100%; padding: 8px 12px; border-radius: 10px; font-size: 13px; }
.back-btn { display: none; padding: 6px; margin-left: -6px; }

/* ---- Chats: the list ---- */
.chat-row-item { gap: 12px; padding: 10px 11px; }
.chat-row-item .pav { width: 44px; height: 44px; font-size: 14px; }
.chat-row-item .device-name { font-size: 14px; }
.chat-preview { font-size: 12.5px; color: var(--fg-faint); }
.chat-row-item.unread .chat-preview { color: var(--fg); font-weight: 600; }
.chat-preview.missed { color: var(--bad); }
.chat-meta { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; flex: none; align-self: stretch; }
.chat-when { font-size: 11px; color: var(--fg-faint); white-space: nowrap; }
.chat-row-item.unread .chat-when { color: var(--accent); font-weight: 650; }
#friend-meta.is-online { color: var(--good); }

/* ---- Chats: bubbles ----
   Just the message, with its time and ticks inside; kind, size and the exact
   receipt show when it is tapped (items.js). Devices keep the full header. */
.chat-timeline { gap: 6px; padding: 16px 20px; }
.chat-timeline .day-divider { margin: 8px 0 4px; }
.chat-timeline .friends-since { margin-bottom: 6px; }
.item.chat { max-width: min(580px, 80%); gap: 3px; }
.item.chat .bubble {
  width: auto; max-width: 100%; padding: 7px 11px 5px; border-radius: 18px 18px 18px 6px;
}
.item.chat.mine .bubble { border-radius: 18px 18px 6px 18px; }
.item.chat .bubble pre { font-family: var(--sans); font-size: 14.5px; line-height: 1.45; }
.item.chat .bubble-title { font-size: 12px; margin-bottom: 3px; }
.item.chat .item-actions { margin-top: 7px; }
.item.chat .secret-cover { font-size: 13px; gap: 8px; }
/* The bubble's title already says "🔒 Secret". */
.item.chat .secret-cover .lock { display: none; }
.bubble-foot { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font-size: 10.5px; color: var(--fg-faint); white-space: nowrap; }
.ticks { letter-spacing: -.18em; padding-right: .18em; }
.ticks.read { color: var(--accent); }
.bubble-details { display: none; margin-top: 6px; font: 11px var(--mono); color: var(--fg-faint); }
.item.chat.selected .bubble-details { display: block; }

/* ---- Chats: writing ----
   One round box; + holds the photo, file, secret and call; a round send. */
.composer.chat-composer { position: relative; gap: 8px; padding: 10px 14px; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row textarea {
  flex: 1; min-width: 0; resize: none; height: 42px; min-height: 42px; max-height: 160px;
  padding: 10px 15px; border-radius: 21px; font: 14.5px/1.45 var(--sans);
}
@supports (field-sizing: content) {
  .chat-row textarea { field-sizing: content; height: auto; }
}
.round-btn { width: 42px; height: 42px; min-height: 42px; border-radius: 50%; padding: 0; display: grid; place-items: center; flex: none; }
.round-btn:hover:not(:disabled) { transform: none; }
#c-plus { background: var(--bg-3); color: var(--fg-dim); border-color: var(--line-2); transition: transform .15s ease; }
#c-plus.open { transform: rotate(45deg); color: var(--fg); }
.send-btn { background: var(--accent); border-color: transparent; color: #06101f; opacity: .5; }
.send-btn.ready { opacity: 1; }
.send-btn:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
.send-btn[data-kind="secret"] { background: #8b6cf0; color: #fff; }
.chat-hint { padding-left: 54px; }
.chat-hint:empty { display: none; }
.secret-bar {
  display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 11px; border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, .45); background: rgba(167, 139, 250, .1);
}
.secret-tag { font-weight: 700; font-size: 12.5px; color: var(--secret); white-space: nowrap; }
.secret-bar input { padding: 6px 10px; font-size: 13px; min-width: 0; }
.chat-composer[data-kind="secret"] .chat-row textarea { border-color: rgba(167, 139, 250, .6); }

.plus-sheet {
  position: absolute; left: 10px; bottom: calc(100% + 6px); z-index: 30;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px;
  width: min(340px, calc(100% - 20px)); border-radius: 18px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-3)), var(--bg); box-shadow: var(--lift), 0 22px 50px -18px rgba(0, 0, 0, .6);
  animation: pop .14s ease-out;
}
.plus-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px;
  border-radius: 14px; background: var(--bg-3); border: 1px solid transparent; color: var(--fg);
  text-align: center; white-space: normal;
}
.plus-opt:hover:not(:disabled) { transform: none; border-color: rgba(var(--accent-rgb), .45); }
.plus-opt b { font-size: 13px; font-weight: 650; }
.plus-opt small { font-size: 11px; color: var(--fg-faint); line-height: 1.3; }
.oi { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; margin-bottom: 2px; }
.oi-photo { background: linear-gradient(140deg, #f472b6, #c2417f); }
.oi-file { background: linear-gradient(140deg, #5aa9ff, #2f6fd6); }
.oi-secret { background: linear-gradient(140deg, #a78bfa, #6d4fd8); }
.oi-call { background: linear-gradient(140deg, #3ecf8e, #1d8f72); }

/* ---- You ---- */
.you-place { overflow-y: auto; }
.you-wrap { max-width: 560px; margin: 0 auto; padding: 34px 20px 44px; display: flex; flex-direction: column; gap: 18px; }
.you-head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.you-head .pav.lg { width: 76px; height: 76px; font-size: 26px; margin: 0 0 8px; }
.you-head #me { max-width: 100%; overflow-wrap: anywhere; }
.you-head .row { margin-top: 6px; }
.kind-chip.admin { color: #dcc4ff; border-color: rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .13); }
.you-group { border: 1px solid var(--line); border-radius: 16px; background: var(--glass); overflow: hidden; }
.you-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; width: 100%;
  text-align: left; border: 0; border-radius: 0; background: transparent; color: var(--fg); font-size: 14px;
}
.you-group > .you-row:not(.hidden) ~ .you-row { border-top: 1px solid var(--line); }
.you-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.you-what b { font-size: 14px; font-weight: 600; }
.you-what small { font-size: 12px; color: var(--fg-faint); line-height: 1.4; }
.you-link:hover:not(:disabled) { background: rgba(127, 127, 127, .07); transform: none; text-decoration: none; }
.you-go { color: var(--fg-faint); font-size: 22px; line-height: 1; }
.you-row .btn-sm { min-width: 64px; }
.open-link-row { flex-direction: column; align-items: stretch; gap: 10px; }
.open-link-row .btn-sm { align-self: flex-start; }
.you-brand { justify-content: center; opacity: .9; }
.you-signout { align-self: center; min-width: 200px; padding: 10px 20px; }
kbd { padding: 3px 8px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--bg-3); }

/* ---- a call, minimized: a green bar across the top ---- */
.call-card { position: relative; }
.call-min { position: absolute; top: 10px; left: 10px; padding: 6px; border-radius: 10px; }
.call-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; flex: none;
  background: #12784f; color: #fff; border-bottom: 1px solid rgba(62, 207, 142, .5);
}
.call-bar-back {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 4px 6px;
  background: transparent; border: 0; color: inherit; text-align: left;
}
.call-bar-back:hover:not(:disabled) { background: rgba(255, 255, 255, .08); transform: none; }
.call-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.call-bar-time { font-family: var(--mono); font-size: 12.5px; }
.call-bar-go { font-weight: 750; font-size: 12.5px; flex: none; }
.call-bar-end { width: 34px; height: 34px; min-height: 34px; border-radius: 50%; padding: 0; display: grid; place-items: center; flex: none; background: #e5484d; border-color: #e5484d; color: #fff; }
.call-bar-end:hover:not(:disabled) { background: #d13b40; transform: none; }

@media (max-width: 760px) {
  /* Tabs along the bottom, out of the way inside a conversation. */
  .shell { flex-direction: column; }
  .appnav {
    order: 2; width: auto; flex-direction: row; justify-content: space-around; gap: 0;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-2)), var(--bg);
  }
  .nav-brand, .nav-gap, .nav-admin { display: none; }
  .nav-btn { flex: 1; width: auto; max-width: 120px; padding: 5px 0 3px; border-radius: 12px; }
  .nav-btn[aria-current="page"] { background: transparent; }
  body.in-detail .appnav { display: none; }

  .back-btn { display: inline-flex; }
  .place-title { font-size: 24px; }
  .sidebar-head { padding-top: calc(12px + env(safe-area-inset-top)); }
  .main-head { padding-top: calc(10px + env(safe-area-inset-top)); }
  .you-wrap { padding-top: calc(24px + env(safe-area-inset-top)); }
  .call-bar { padding-top: calc(6px + env(safe-area-inset-top)); }
  .call-bar ~ .place .sidebar-head, .call-bar ~ .place .main-head, .call-bar ~ .place .you-wrap { padding-top: 10px; }
  .call-min { top: calc(12px + env(safe-area-inset-top)); left: 12px; }

  .chat-timeline { padding: 12px; }
  .item.chat { max-width: 86%; }
  /* The chat composer is its own row of three; the console composer's grid stays off it. */
  .composer.chat-composer {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .chat-row textarea { font-size: 16px; }
  /* With the keyboard up there is no home bar to keep clear of. */
  body.kb-open .composer { padding-bottom: 8px; }
  .chat-hint { display: none; }
  .plus-sheet { left: 8px; right: 8px; width: auto; }
}

/* Typing on a touch screen means the keyboard is up, whatever the detection says. */
@media (max-width: 760px) and (pointer: coarse) {
  .composer:focus-within { padding-bottom: 8px; }
}

/* Pop-ups sit in the part of the screen you can see (--app-h, common.js):
   with a phone keyboard up, that is the part above it, not behind it. */
.modal-back { bottom: auto; height: var(--app-h, 100%); }
.modal, #add-modal .modal { max-height: calc(var(--app-h, 100dvh) - 24px); }
body.kb-open .modal-back { place-items: start center; padding: 12px; }

/* iOS zooms the page in whenever a focused field is under 16px. Smaller
   sizes set on a class (the chat search, the secret label) used to win over
   a plain element rule, so this one is last and has to win. */
@media (pointer: coarse) {
  input:not(.code-input), select, textarea, .dev-label-input { font-size: 16px !important; }
}

/* ---- profile photos ---- */
.pav > img, .call-av > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.call-av { position: relative; }
.pav.has-photo, .call-av.has-photo { color: transparent; background: var(--bg-3); }
/* The online dot sits on top of the photo, not under it. */
.pav > i { z-index: 1; }
.pav.xl { width: 88px; height: 88px; font-size: 30px; }
.you-photo { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; margin: 0 0 8px; cursor: pointer; }
.you-photo .pav.lg { margin: 0; }
.you-photo-edit {
  position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: var(--fg); background: var(--bg); border: 1px solid var(--line-2);
}
.you-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#you-edit { margin-top: 6px; }
.profile-photo-row { display: flex; align-items: center; gap: 16px; }
.profile-colors { display: flex; gap: 10px; flex-wrap: wrap; }
.pav.swatch { width: 32px; height: 32px; border: 0; padding: 0; cursor: pointer; }
.pav.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.jend { justify-content: flex-end; }

/* Admin sits in the app's shell: the rail stays put, the page scrolls. */
.admin-main { display: block; overflow-y: auto; }
.admin-main > .topbar { background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent), var(--bg); }

/* Sign-in on a chat-only site (data-mode="chat", set by the server). */
body:not([data-mode="chat"]) .chat-only,
body[data-mode="chat"] .full-only { display: none !important; }
.device-help summary { cursor: pointer; }
.device-help p { margin-top: 6px; line-height: 1.5; }

/* ---- other ways to sign in (chat sites) ----
   Each company's button follows its own guidelines: Apple's is black with a
   white mark, Microsoft's and Facebook's are white with their coloured marks. */
.gbtn { text-decoration: none; box-shadow: inset 0 0 0 1px rgba(10, 20, 45, .14); }
.gbtn:hover { text-decoration: none; }
.gbtn-apple { background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.gbtn-apple:hover { background: #1a1a1a; }
.or-rule { display: flex; align-items: center; gap: 10px; color: var(--fg-faint); font-size: 12px; margin-top: 4px; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.email-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.email-link-row .btn-sm { white-space: nowrap; }
/* A grid item grows to its widest content unless told otherwise; the email
   row on the sign-in card was pushing the card past a phone's edge. */
.center-page { grid-template-columns: minmax(0, 1fr); }
.center-card { min-width: 0; }

/* ---- Midnight: solid layers ----
   Every colour here comes from the tokens at the top, so light keeps its own
   look (its tokens reproduce it) and dark gets the Midnight layers. */
.appnav, .sidebar, .main-head, .composer, .admin-main > .topbar { background: var(--surface); }
.timeline { background: var(--bg); }
input, select, textarea { background: var(--field); }
button { background: var(--raised); }
.modal, .palette, .extend-menu { background: var(--sheet); }
.bubble { background: var(--bubble-them); border-color: var(--bubble-them-line); box-shadow: none; }
.item.mine .bubble { border-color: rgba(var(--accent-rgb), .3); }

/* In a chat, your own messages are solid blue with white text, so yours and
   theirs are told apart at a glance rather than by a faint tint. */
.item.chat.mine .bubble:not(.secret) { background: var(--bubble-mine); border-color: var(--bubble-mine-line); color: var(--bubble-mine-fg); }
.item.chat.mine .bubble:not(.secret) pre,
.item.chat.mine .bubble:not(.secret) .md { color: var(--bubble-mine-fg); }
.item.chat.mine .bubble:not(.secret) a { color: var(--bubble-mine-fg); text-decoration: underline; }
.item.chat.mine .bubble:not(.secret) .bubble-foot,
.item.chat.mine .bubble:not(.secret) .bubble-title,
.item.chat.mine .bubble:not(.secret) .bubble-details { color: var(--bubble-mine-dim); }
.item.chat.mine .bubble:not(.secret) .ticks.read { color: var(--bubble-mine-fg); }
.item.chat.mine .bubble:not(.secret) .btn-sm { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: var(--bubble-mine-fg); }
/* Sealed secrets keep their violet edge, so they never look like a message. */
.item.chat .bubble.secret { background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .38); }
.theme-choice { display: flex; }
#profile-theme .theme-choice button { flex: 1; }
@media (max-width: 760px) { .you-row #theme-slot .theme-choice button { padding: 7px 9px; } }