/* Nullkey: compact controls and a full-width encryption workspace. */
@font-face { font-family: Spectral; src: url('../fonts/spectral-500-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #202428; --surface: #262b30; --surface-2: #2e343a; --field: #1c2024;
  --line: #444c54; --line-strong: #69747e; --text: #edf0f2; --muted: #bac2c9; --faint: #a4afb8;
  --lock: #8dbbff; --lock-fill: #1761c5; --lock-ink: #fff; --lock-soft: #243b56;
  --open: #8dbbff; --open-soft: #243b56; --warn: #f1c478; --bad: #ffaaa4; --bad-soft: #422c2d;
  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
  --font-display: var(--font); --radius: 4px; --radius-sm: 4px; --radius-lg: 4px;
  --page: 1400px; --gutter: 48px; --content-width: min(var(--page), calc(100% - var(--gutter))); --inset: 16px;
}
[data-theme='light'] {
  color-scheme: light;
  --bg: #fff; --surface: #fff; --surface-2: #f5f6f7; --field: #fff;
  --line: #d0d5da; --line-strong: #8b959f; --text: #24292f; --muted: #57616b; --faint: #626d77;
  --lock: #175bba; --lock-fill: #0d60cf; --lock-soft: #edf4ff; --open: #175bba; --open-soft: #edf4ff;
  --warn: #805407; --bad: #b22d25; --bad-soft: #fff0ee;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--lock); text-underline-offset: 3px; }
button, input, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button, a, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
textarea, input { caret-color: var(--lock); }
::selection { background: var(--lock-fill); color: var(--lock-ink); }
:focus-visible { outline: 2px solid var(--lock); outline-offset: 3px; }
[hidden] { display: none !important; }
code, kbd { font-family: var(--font-mono); }
kbd { padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; background: var(--surface); color: var(--muted); font-size: 12px; white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 10px 16px; background: var(--surface); }
.skip-link:focus { top: 8px; }
.icon, .lock, .chevron { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chevron { width: 12px; height: 12px; }
.lock.is-open .lock-shackle { transform: translateY(-2px); }

/* Shared shell. */
.topbar { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.topbar-inner, .page, .footer { width: var(--content-width); margin-inline: auto; }
.topbar-inner { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { color: var(--text); font: 500 29px/1 Spectral, Georgia, serif; letter-spacing: -0.03em; text-decoration: none; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 6px 12px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); text-decoration: none; white-space: nowrap; }
.topbar-id { border-color: var(--line); background: var(--surface); color: var(--text); }
.page { flex: 1; padding-block: 27px 36px; }
.intro { margin-bottom: 24px; }
.intro h1 { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; }
.intro p { margin-top: 6px; color: var(--muted); }
.desk, .thread { min-width: 0; }
.mode-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.mode-tabs button { min-height: 40px; margin-bottom: -1px; padding: 8px 20px; border: 1px solid transparent; border-radius: 4px 4px 0 0; background: transparent; color: var(--muted); }
.mode-tabs [aria-selected='true'] { border-color: var(--line) var(--line) var(--bg); background: var(--bg); color: var(--text); font-weight: 600; }

/* Actions sit directly above the editor, as in Nullbin. */
.panel { min-width: 0; }
.compose-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.to-row { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 220px; }
.to-label { flex: none; font-weight: 500; }
.to-button { min-height: 36px; min-width: 170px; max-width: 460px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); text-align: left; }
.to-button[aria-expanded='true'] { border-color: var(--lock); }
.to-button[aria-expanded='true'] .chevron { transform: rotate(180deg); }
.to-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-avatars { display: flex; gap: 3px; }
.to-avatars:empty { display: none; }
.decrypt-context { flex: 1; color: var(--muted); }
.panel-body { min-width: 0; border: 1px solid var(--line); border-radius: 4px 4px 0 0; overflow: hidden; background: var(--field); }
.editor-heading { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 13px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.editor-heading label { font-weight: 600; }
.editor-shortcut { color: var(--muted); font-size: 12px; }
.message-input { display: block; width: 100%; min-height: 340px; max-height: 70dvh; padding: 16px; border: 0; border-radius: 0; background: var(--field); font: 14px/1.7 var(--font-mono); resize: vertical; overflow-wrap: anywhere; }
.message-input::placeholder { color: var(--faint); }
.message-input:focus-visible { outline-offset: -2px; }
.panel-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 37px; padding: 8px 13px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 4px 4px; background: var(--surface-2); }
.status { min-width: 0; color: var(--muted); font-size: 12px; }
.status[data-tone='warn'] { color: var(--warn); }
.status[data-tone='decrypt'] { color: var(--lock); }
.char-count { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.workspace-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.workspace-meta code { font-size: 12px; }
.sent-result { margin-top: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--lock-soft); }
.sent-result .entry-actions { margin-top: 10px; }
.latest { min-height: 340px; padding: 16px; }
.latest-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.latest-label { color: var(--lock); font-weight: 600; }
.latest.is-error .latest-label { color: var(--bad); }
.latest-body { display: grid; gap: 12px; }
.latest-more { color: var(--muted); font-size: 12px; }
.catch.is-over { outline: 2px dashed var(--lock); outline-offset: -4px; }

/* Recipient selection. Emoji here are real key fingerprints. */
.drawer { margin-bottom: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); }
.panel.is-collapsed .drawer { display: none; }
.onboard { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.onboard p { max-width: 74ch; color: var(--muted); }
.people-hint { margin-bottom: 10px; }
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; margin-bottom: 12px; }
.people:empty { display: none; }
.person { display: flex; min-width: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.person.is-selected { border-color: var(--lock); background: var(--lock-soft); }
.person-pick { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 38px; padding: 6px 10px; border: 0; background: transparent; text-align: left; }
.person-pick { cursor: pointer; }
.person-pick input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--lock-fill); }
.person-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-safety, .person-remove { padding: 6px 10px; border: 0; border-left: 1px solid var(--line); background: transparent; }
.person-safety { white-space: nowrap; }
.person-remove { min-width: 36px; color: var(--muted); font-size: 20px; }
.drawer-done { display: block; min-height: 36px; margin-top: 12px; padding: 6px 18px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.add-form { max-width: 700px; display: grid; gap: 8px; padding-top: 2px; }
.add-form .label:not(:first-child) { margin-top: 4px; }
.avatar { display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 3px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.avatar-you { width: auto; padding-inline: 6px; }

/* One control vocabulary: 36px desktop, 44px touch. */
.label { display: block; margin-bottom: 5px; font-weight: 500; }
.label-optional { margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 400; }
.input { width: 100%; min-width: 0; min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--field); }
textarea.input { resize: vertical; }
.input::placeholder { color: var(--faint); }
.input.is-invalid { border-color: var(--bad); }
.input-mono { font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; }
.hint { color: var(--muted); font-size: 13px; line-height: 1.55; }
.hint[data-tone='bad'] { color: var(--bad); }
.hint[data-tone='warn'] { color: var(--warn); }
.hint[data-tone='good'] { color: var(--lock); }
.note { padding: 12px; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 12px; }
.note-warn { color: var(--warn); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row-even > * { flex: 1; }
.row-fill { flex-wrap: nowrap; }
.row-fill .input { flex: 1; }
.btn, .chip-button, .bar-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text); font-size: 14px; line-height: 20px; font-weight: 400; text-decoration: none; white-space: nowrap; }
.btn-primary, .btn-open { border-color: var(--lock-fill); background: var(--lock-fill); color: var(--lock-ink); }
.btn-danger { border-color: var(--bad); color: var(--bad); }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; }
.btn:disabled, .chip-button:disabled, .to-button:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.is-done, .chip-button.is-done { border-color: var(--lock); color: var(--lock); background: var(--lock-soft); }
.btn.is-busy .btn-label::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-button { min-height: 36px; padding: 5px 0; border: 0; background: transparent; color: var(--lock); text-align: left; }
.icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 5px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); }
@media (hover: hover) {
  .btn:hover, .chip-button:hover, .drawer-done:hover, .to-button:hover, .topbar-link:hover, .person-safety:hover, .icon-button:hover { background: var(--surface-2); border-color: var(--line-strong); }
  .btn-primary:hover, .btn-open:hover { background: #0b53b5; border-color: #0b53b5; }
  .btn-danger:hover, .person-remove:hover { background: var(--bad-soft); color: var(--bad); }
  .link-button:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.label-short, .on-touch { display: none; }

/* Session results and files. */
.recent { margin-top: 22px; border-top: 1px solid var(--line); }
.recent > summary, .how > summary { min-height: 42px; padding-block: 10px; cursor: pointer; font-weight: 500; }
.session-rule { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.timeline { display: grid; gap: 12px; }
.entry { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.entry--error { border-color: var(--bad); }
.entry-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.entry-who { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.entry-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.entry-time { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.meta-pill { padding: 2px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 12px; }
.meta-pill[data-tone='bad'] { color: var(--bad); }
.entry-text { font: 14px/1.7 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.entry--error .entry-text { font-family: var(--font); }
.entry-sent-note, .entry-cipher, .file-sub, .entry-note { margin-top: 7px; color: var(--muted); font-size: 12px; }
.entry-cipher { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 12px; }
.entry-actions-extra { display: contents; }
.entry-note:empty { display: none; }
.more-options > summary { cursor: pointer; min-height: 36px; padding: 7px 10px; }
.options-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.entry-file { display: flex; align-items: center; gap: 12px; }
.file-badge { display: grid; place-items: center; width: 42px; min-height: 42px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font: 12px var(--font-mono); }
.file-info { display: grid; min-width: 0; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); }
.entry-preview { max-width: 100%; max-height: 360px; margin-top: 12px; }
.entry-audio { width: 100%; }
.entry-preview-text { max-height: 280px; overflow: auto; margin: 12px 0 0; padding: 12px; border: 1px solid var(--line); background: var(--field); font: 13px/1.6 var(--font-mono); white-space: pre-wrap; }
.progress { height: 4px; overflow: hidden; margin-top: 12px; border-radius: 2px; background: var(--line); }
.progress span { display: block; height: 100%; background: var(--lock-fill); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filter { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.filter[aria-pressed='true'] { border-color: var(--lock); background: var(--lock-soft); }
.filter-count { color: var(--muted); font-size: 12px; }

/* Modest help, native disclosure controls, compact footer. */
.how { margin-top: 24px; border-top: 1px solid var(--line); }
.help-content { padding-block: 8px 16px; }
.how-cta { display: flex; gap: 8px; margin-bottom: 20px; }
.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 20px; }
.how-steps li { position: relative; padding-left: 30px; }
.step-num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 12px; }
.how-steps h3 { margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.how-steps p, .how-note { max-width: 75ch; color: var(--muted); font-size: 13px; line-height: 1.7; }
.how-note { margin-top: 12px; }
.how-details { margin-top: 20px; }
.details { margin-top: 8px; border-top: 1px solid var(--line); }
.details > summary { min-height: 38px; padding-block: 9px; cursor: pointer; font-weight: 500; }
.details > :not(summary) { margin-top: 8px; }
.details > :last-child { margin-bottom: 12px; }
.defs { max-width: 90ch; display: grid; gap: 14px; padding-bottom: 12px; }
.defs > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; }
.defs dt { font-weight: 600; }
.defs dd, .bullets { color: var(--muted); font-size: 13px; }
.bullets { padding-left: 20px; list-style: disc; }
.bullets li + li { margin-top: 6px; }
.footer { padding-block: 18px; border-top: 1px solid var(--line); color: var(--muted); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-line { display: flex; flex-wrap: wrap; gap: 7px; font-size: 12px; }
.theme-switch { display: inline-flex; }
.theme-option { min-height: 30px; padding: 4px 10px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 12px; }
.theme-option + .theme-option { margin-left: -1px; }
.theme-option:first-child { border-radius: 4px 0 0 4px; }
.theme-option:last-child { border-radius: 0 4px 4px 0; }
.theme-option[aria-pressed='true'] { z-index: 1; border-color: var(--lock); background: var(--lock-soft); color: var(--lock); }

/* Public keys are shareable; secret key backups require an explicit action. */
.dialog { width: min(680px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; overflow: auto; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--text);  }
.dialog::backdrop { background: #0007; }
.dialog-card { padding: 24px; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.dialog-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.dialog-lede { margin-bottom: 20px; color: var(--muted); }
.key-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.key-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.key-heading h3 { font-size: 16px; font-weight: 600; }
.key-tag { color: var(--lock); font-size: 12px; }
.key-tag-secret { color: var(--warn); }
.id-box { display: block; margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.6; word-break: break-all; }
.key-actions { margin-top: 12px; }
.fingerprint-label { margin-top: 18px; font-size: 12px; }
.key-fingerprint { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.transfer-form { margin-top: 18px; }
.transfer-form .link-button { margin-top: 4px; }
.safety-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 8px; margin-bottom: 12px; }
.safety-item { min-width: 0; display: grid; justify-items: center; gap: 3px; text-align: center; }
.safety-emoji { font-size: 25px; }
.safety-name { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

/* Optional tour; no first-run interruption or entrance choreography. */
.tour { width: min(680px, calc(100% - 32px)); }
.tour-card { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); padding: 24px; }
.tour-top, .tour-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tour-count { color: var(--muted); font-size: 12px; }
.tour-step { min-height: 0; overflow-y: auto; padding-block: 16px; }
.tour-visual { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 140px; margin-bottom: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); }
.tour-title { margin-bottom: 12px; font-size: 20px; font-weight: 600; }
.tour-text { max-width: 75ch; color: var(--muted); line-height: 1.7; }
.tour-fine { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.tour-step .label { margin-top: 16px; }
.tour-step .row { margin-top: 12px; }
.tour-nav { padding-top: 16px; border-top: 1px solid var(--line); }
.tour-dots { display: flex; gap: 6px; }
.tour-dots li { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.tour-dots li.is-on { background: var(--lock); }
.flow-side, .flow-mid, .swap-card, .compare-side { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.flow-who, .swap-name, .compare-label { color: var(--muted); font-size: 12px; }
.flow-arrow { flex: none; width: 20px; height: 12px; fill: none; stroke: var(--muted); stroke-width: 1.5; }
.bubble { max-width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: 12px; }
.bubble-cipher { overflow: hidden; font: 12px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.address-card { display: flex; align-items: center; gap: 12px; min-width: 0; width: 100%; }
.address-lines { display: grid; flex: 1; min-width: 0; }
.address-name { font-weight: 600; }
.address-id { overflow: hidden; color: var(--muted); font: 12px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.address-stamp { font-size: 16px; }
.avatar-lg { width: 40px; height: 40px; border: 1px solid var(--line); font-size: 18px; }
.swap-arrows { display: grid; justify-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.swap-arrows svg { width: 64px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.compare { align-items: flex-start; }
.compare-side { flex: 1; }
.compare-emoji { font-size: 23px; overflow-wrap: anywhere; }
.compare-eq { padding-top: 30px; color: var(--muted); }
.twin-card { display: grid; flex: 1; gap: 8px; }
.twin-title { font-weight: 600; }
.twin-step { color: var(--muted); font-size: 12px; }

/* Drop feedback and announcements sit above the workspace and dialogs. */
.dropzone { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: #0009; }
.dropzone-inner { display: grid; grid-template-columns: 1fr 1fr; width: min(700px, 100%); border: 2px dashed var(--lock); border-radius: 4px; background: var(--surface); }
.dropzone-half { padding: 32px; text-align: center; }
.dropzone-half + .dropzone-half { border-left: 1px solid var(--line); }
.dropzone-title { margin-top: 8px; font-weight: 600; }
.toast { position: fixed; inset: auto 16px 24px; z-index: 100; width: fit-content; max-width: min(620px, calc(100% - 32px)); margin: 0 auto; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--text);  opacity: 0; pointer-events: none; }
.toast.is-visible { opacity: 1; }
.toast[data-tone='bad'] { color: var(--bad); }

@media (max-width: 900px) {
  .to-row, .decrypt-context { flex-basis: 100%; }
  .compose-toolbar > .btn { flex: 1; }
  .to-button { flex: 1; max-width: none; }
  .workspace-meta { flex-direction: column; gap: 4px; }
}
@media (max-width: 767px), (pointer: coarse) {
  .btn, .chip-button, .bar-button, .topbar-link, .to-button, .input, .person-pick, .drawer-done, .filter { min-height: 44px; font-size: 16px; }
  .link-button, .theme-option, .person-safety, .person-remove, .more-options > summary, .details > summary, .recent > summary, .how > summary { min-height: 44px; }
  .icon-button { width: 44px; height: 44px; }
  .mode-tabs button { min-height: 44px; font-size: 16px; }
  .input-mono { font-size: 14px; }
  .on-desktop, .editor-shortcut { display: none; }
  .on-touch { display: inline; }
}
@media (max-width: 600px) {
  :root { --gutter: 32px; }
  .topbar-inner { min-height: 66px; gap: 12px; }
  .topbar-actions { gap: 4px; }
  .topbar-link { padding-inline: 10px; }
  .wordmark { font-size: 27px; }
  .page { padding-block: 22px 28px; }
  .intro { margin-bottom: 20px; }
  .intro h1 { font-size: 20px; }
  .intro p { max-width: 43ch; font-size: 13px; line-height: 1.65; }
  .mode-tabs { margin-bottom: 14px; }
  .mode-tabs button { flex: 1; }
  .compose-toolbar { gap: 8px; }
  .compose-toolbar > .btn { flex-basis: 100%; }
  .to-row { min-width: 0; gap: 8px; }
  .to-label { font-size: 13px; }
  .to-button { min-width: 0; }
  .message-input { min-height: 280px; font-size: 14px; }
  .latest { min-height: 280px; }
  .panel-bar { align-items: flex-start; padding-inline: 10px; gap: 8px; }
  .status, .char-count { font-size: 12px; }
  .workspace-meta { margin-top: 10px; font-size: 12px; }
  .workspace-meta code { font-size: 12px; }
  .drawer { padding: 12px; }
  .people { grid-template-columns: minmax(0, 1fr); }
  .onboard p { font-size: 13px; }
  .onboard .btn { width: 100%; font-size: 14px; }
  .person-pick { gap: 6px; }
  .person-safety { padding-inline: 7px; }
  .how-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .defs > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .footer-inner { align-items: flex-start; }
  .theme-option { padding-inline: 9px; }
  .footer-line { padding-top: 12px; }
  .dialog { max-height: calc(100dvh - 24px); }
  .dialog-card, .tour-card { padding: 18px; }
  .key-actions > .btn { flex: 1 0 100%; }
  .row-fill { flex-wrap: wrap; }
  .row-fill > * { flex-basis: 100%; }
  .safety-name { font-size: 12px; }
  .tour-visual { padding: 12px 8px; gap: 6px; }
  .flow-who { font-size: 12px; }
  .bubble { padding: 6px; font-size: 12px; }
  .address-stamp { display: none; }
  .dropzone-inner { grid-template-columns: 1fr; }
  .dropzone-half { padding: 24px; }
  .dropzone-half + .dropzone-half { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 360px) {
  .topbar-id .icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

.recent, .how { padding-top: 8px; }