:root {
  color-scheme: light dark;
  --ink: #2b1736;
  --muted: #75647f;
  --paper: #fff6fc;
  --panel: #fffefe;
  --line: #ead7e8;
  --hot: #ff4fa3;
  --acid: #8ee9ff;
  --blue: #7657ff;
  --sun: #ffe179;
  --link: #3d36c9;
  --visited: #8b3d92;
  --danger: #b7244e;
  --console-bg: #160d20;
  --console-ink: #9df4d2;
  --shadow: 0 18px 55px rgb(15 16 14 / 16%);
  --button-surface: color-mix(in srgb, var(--panel) 78%, var(--acid));
  --button-surface-hover: color-mix(in srgb, var(--panel) 58%, var(--acid));
  --button-border: color-mix(in srgb, var(--line) 55%, var(--blue));
  --radius: 4px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --visual-viewport-width: 100vw;
  --visual-viewport-height: 100dvh;
  --visual-viewport-left: 0px;
  --visual-viewport-top: 0px;
  --masthead-height: 58px;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Liberation Mono", monospace;
  font-synthesis: none;
}

@font-face {
  font-family: "OpenMoji Color";
  src: url("/assets/openmoji/openmoji-color-17.0.0.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "OpenMoji Black";
  src: url("/assets/openmoji/openmoji-black-17.0.0.woff2") format("woff2");
  font-display: swap;
}

:root[data-theme="dark"] {
  --ink: #fff4fc;
  --muted: #c7a9c4;
  --paper: #140d1c;
  --panel: #21152b;
  --line: #49324f;
  --hot: #ff69b6;
  --acid: #72dff7;
  --blue: #a48aff;
  --link: #8ee9ff;
  --visited: #e7a6ff;
  --danger: #ff8eae;
  --console-bg: #09060d;
  --console-ink: #a5f4d4;
  --shadow: 0 18px 60px rgb(0 0 0 / 42%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #fff4fc;
    --muted: #c7a9c4;
    --paper: #140d1c;
    --panel: #21152b;
    --line: #49324f;
    --hot: #ff69b6;
    --acid: #72dff7;
    --blue: #a48aff;
    --link: #8ee9ff;
    --visited: #e7a6ff;
    --danger: #ff8eae;
    --console-bg: #09060d;
    --console-ink: #a5f4d4;
    --shadow: 0 18px 60px rgb(0 0 0 / 42%);
  }
}

:root[data-scheme="lagoon"] { --hot: #12a7aa; --acid: #93ead8; --blue: #176fc1; --paper: #f0fcfb; --panel: #fff; --line: #b9dfda; --ink: #112e35; --muted: #526d70; --link: #075dab; --visited: #6553a4; }
:root[data-scheme="ember"] { --hot: #e35c2f; --acid: #ffd075; --blue: #a94377; --paper: #fff8ee; --panel: #fffdf8; --line: #ecd6bd; --ink: #382018; --muted: #796158; --link: #a84223; --visited: #794a92; }
:root[data-scheme="graphite"] { --hot: #4774db; --acid: #a9c9ff; --blue: #5157b8; --paper: #f5f7fa; --panel: #fff; --line: #d7dce5; --ink: #202733; --muted: #626c7c; --link: #2557b7; --visited: #6b4ba0; }
:root[data-theme="dark"][data-scheme="lagoon"] { --hot: #55d6cf; --acid: #1d6e72; --blue: #84bfff; --paper: #07191c; --panel: #0e262a; --line: #295158; --ink: #ebfffd; --muted: #a2c7c4; --link: #7fdfff; --visited: #d1b4ff; }
:root[data-theme="dark"][data-scheme="ember"] { --hot: #ff8968; --acid: #765625; --blue: #ef9ac2; --paper: #1c110d; --panel: #2a1913; --line: #5a382b; --ink: #fff7ed; --muted: #d6b7a7; --link: #ffb58d; --visited: #e6b2ff; }
:root[data-theme="dark"][data-scheme="graphite"] { --hot: #8eb0ff; --acid: #35466d; --blue: #abb6ff; --paper: #10141b; --panel: #1a202a; --line: #384252; --ink: #f4f7ff; --muted: #b6c0cf; --link: #9ac5ff; --visited: #d6b8ff; }

:root[data-emoji="openmoji-color"] .emoji-surface { font-family: "OpenMoji Color", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
:root[data-emoji="openmoji-black"] .emoji-surface { font-family: "OpenMoji Black", system-ui, sans-serif; color: var(--ink); }
:root[data-emoji="openmoji-color"] #message-input { font-family: system-ui, "OpenMoji Color", sans-serif; }
:root[data-emoji="openmoji-black"] #message-input { font-family: system-ui, "OpenMoji Black", sans-serif; }

* { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--hot) 70%, var(--muted)) color-mix(in srgb, var(--panel) 82%, transparent); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: color-mix(in srgb, var(--panel) 82%, transparent); }
*::-webkit-scrollbar-thumb { border: 2px solid var(--panel); border-radius: 999px; background: linear-gradient(var(--hot), var(--blue)); }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--paper); color: var(--ink); }
button, input, textarea, select { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; filter: saturate(.45); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hidden { display: none !important; }
.row { display: flex; align-items: center; }
.gap { gap: 10px; }
.eyebrow { margin: 0 0 6px; color: var(--hot); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.error { min-height: 1.2em; color: #d84040; font-size: 12px; }
.form-feedback { min-height: 1.2em; margin-block: 12px 0; border-left: 3px solid transparent; padding-left: 9px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.form-feedback[data-state="empty"] { visibility: hidden; }
.form-feedback[data-state="checking"] { border-left-color: var(--line); }
.form-feedback[data-state="valid"] { border-left-color: var(--acid); color: var(--ink); }
.form-feedback[data-state="error"] { border-left-color: var(--danger); color: var(--danger); }

.setup {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; overflow: auto;
  padding: 28px 18px; background: var(--ink);
  background-image: radial-gradient(circle at 18% 13%, rgb(255 79 163 / 42%), transparent 25%), radial-gradient(circle at 83% 78%, rgb(114 223 247 / 22%), transparent 28%);
}
.setup-card { width: min(560px, 100%); margin-block: auto; padding: 34px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.setup-card.recovery-card { width: min(760px, 100%); }
.recovery-card h1 { max-width: 13ch; font-size: clamp(38px, 8vw, 68px); }
.recovery-section { margin: 24px 0; border: 1px solid var(--line); padding: 16px; background: var(--paper); }
.recovery-section h2 { margin: 0 0 10px; font-family: system-ui, sans-serif; }
.recovery-section p { color: var(--muted); font-size: 12px; line-height: 1.55; }
.recovery-section.danger-section { border-color: color-mix(in srgb, var(--danger) 70%, var(--line)); }
.recovery-status-grid { grid-template-columns: repeat(4, 1fr); }
.recovery-status-grid div { border-bottom: 0; }
.recovery-status-grid div:nth-child(even) { border-right: 1px solid var(--line); }
.recovery-status-grid div:last-child { border-right: 0; }
.setup-path { display: grid; gap: 10px; margin: 20px 0; border: 1px solid var(--line); padding: 16px; background: var(--paper); }
.setup-path h2,.setup-path p { margin: 0; }
.setup-path p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.setup-application { margin-top: 30px; }
.version-evidence { display: grid; gap: 0; margin: 12px 0; border: 1px solid var(--line); }
.version-evidence div { min-width: 0; display: grid; grid-template-columns: minmax(115px,.7fr) minmax(0,1.3fr); gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.version-evidence div:last-child { border-bottom: 0; }
.version-evidence dt { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.version-evidence dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 10px; font-weight: 800; }
.version-status { margin: 10px 0 14px; border-left: 4px solid var(--muted); padding: 9px 11px; background: color-mix(in srgb, var(--muted) 7%, var(--panel)); color: var(--muted); font-size: 11px; line-height: 1.5; }
.version-status[data-state="current"] { border-left-color: var(--acid); }
.version-status[data-state="client-assets-stale"],.version-status[data-state="client-protocol-stale"] { border-left-color: var(--sun); }
.version-status[data-state="server-deployment-inconsistent"],.version-status[data-state="protocol-incompatible"],.version-status[data-state="unavailable"] { border-left-color: var(--danger); }
.file-button.prominent { min-height: 48px; justify-content: center; border: 2px solid var(--blue); }
.mark, .brand-mark { display: grid; place-items: center; background: var(--hot); color: #171816; font-weight: 950; }
.mark { width: 58px; height: 58px; margin-bottom: 44px; font-size: 32px; transform: rotate(-3deg); }
.setup h1 { margin: 0; max-width: 8ch; font-family: system-ui, sans-serif; font-size: clamp(42px, 10vw, 74px); line-height: .88; letter-spacing: -.07em; }
.lede { max-width: 42ch; margin: 20px 0 30px; color: var(--muted); line-height: 1.5; }
label { display: grid; gap: 7px; margin: 15px 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 0; padding: 12px; background: var(--paper); font-size: 14px; line-height: 1.4; text-transform: none; resize: vertical; }
.warning { margin: 20px 0 0; border-left: 3px solid var(--hot); padding: 9px 12px; background: rgb(255 90 54 / 9%); color: var(--muted); font-size: 11px; line-height: 1.5; }
.primary, .secondary, .danger, .file-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid var(--button-border); padding: 0 16px; box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 14%, transparent); font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; transition: background .16s, border-color .16s, transform .1s, box-shadow .1s; }
.primary { border-color: color-mix(in srgb, var(--hot) 65%, var(--ink)); background: linear-gradient(135deg, var(--hot), color-mix(in srgb, var(--hot) 55%, var(--acid))); color: #250f2d; }
.secondary, .file-button { background: linear-gradient(135deg, var(--button-surface), color-mix(in srgb, var(--panel) 92%, var(--button-surface))); color: var(--ink); }
.danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--panel)); color: var(--danger); }
.primary:hover:not(:disabled),.secondary:hover:not(:disabled),.file-button:hover,.danger:hover:not(:disabled) { border-color: var(--hot); background-color: var(--button-surface-hover); box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 16%, transparent); transform: translateY(-1px); }
.primary:active:not(:disabled),.secondary:active:not(:disabled),.danger:active:not(:disabled) { box-shadow: none; transform: translateY(1px); }
.file-button { position: relative; margin: 0; cursor: pointer; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.self-host { color: var(--muted); font-size: 12px; }
.inline-action { color: var(--link); font-weight: 800; }
.inline-action:not([href]) { cursor: default; opacity: .72; }
.inline-action span { margin-left: 5px; font-size: 9px; text-transform: uppercase; }

.app { position: fixed; top: var(--visual-viewport-top); left: var(--visual-viewport-left); width: min(100%, var(--visual-viewport-width)); height: min(100dvh, var(--visual-viewport-height)); max-width: 100%; max-height: 100dvh; display: grid; grid-template: var(--masthead-height) minmax(0,1fr) / 330px minmax(0,1fr); overflow: hidden; background: var(--paper); touch-action: pan-x pan-y; }
.masthead { grid-column: 1 / -1; display: grid; grid-template-columns: 330px 1fr auto auto auto auto; align-items: stretch; border-bottom: 1px solid var(--line); background: var(--panel); z-index: 10; }
.brand { display: flex; align-items: center; gap: 12px; border-right: 1px solid var(--line); padding: 0 16px; background: transparent; color: var(--ink); font-weight: 950; letter-spacing: .18em; }
.brand-mark { width: 28px; height: 28px; font-size: 17px; }
.protocol-badge { align-self: center; justify-self: start; margin-left: 17px; color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.connection { display: flex; align-items: center; gap: 8px; padding: 0 17px; background: transparent; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.connection i { width: 8px; height: 8px; border-radius: 50%; background: #777; box-shadow: 0 0 0 4px rgb(119 119 119 / 12%); }
.connection[data-state="online"] i { background: var(--acid); box-shadow: 0 0 0 4px rgb(183 239 69 / 18%); }
.connection[data-state="syncing"] i { background: var(--hot); animation: pulse 1s infinite; }
.connection[data-state="degraded"] i { background: #f2b94b; }
.connection[data-state="waiting-access"] i,.connection[data-state="update-required"] i { background: var(--sun); }
.connection[data-state="trust-changed"] i,.connection[data-state="auth-rejected"] i,.connection[data-state="sync-error"] i { background: var(--danger); }
.header-update { min-width: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-left: 1px solid var(--line); padding: 0 13px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; white-space: nowrap; }
.header-update::before { content: "↻"; font-size: 17px; line-height: 1; }
.header-update[data-state="available"],.header-update[data-state="ready"],.header-update[data-state="required"] { background: color-mix(in srgb, var(--acid) 17%, var(--panel)); color: var(--ink); }
.header-update[data-state="required"],.header-update[data-state="failed"] { border-left-color: var(--danger); color: var(--danger); }
.header-update[data-state="preparing"]::before,.header-update[data-state="applying"]::before { animation: rotate .8s linear infinite; }
.icon-button { display: grid; min-width: 48px; place-items: center; background: transparent; color: var(--ink); font-size: 22px; }
.help-button { text-decoration: none; }
.masthead > .icon-button { border-left: 1px solid var(--line); }

.sidebar { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.section-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 16px; }
.section-head h2 { margin: 0; font-family: system-ui, sans-serif; font-size: 22px; letter-spacing: -.04em; }
.round-button { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 23px; transition: transform .25s var(--ease), background .25s; }
.round-button:hover { transform: rotate(90deg); background: var(--hot); color: #171816; }
.conversation-list { flex: 1; overflow: auto; padding: 0 9px 16px; overscroll-behavior: contain; touch-action: pan-y; }
.requests-entry { width: calc(100% - 18px); min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 9px 8px; border: 1px solid color-mix(in srgb, var(--sun) 70%, var(--line)); padding: 8px 11px; background: color-mix(in srgb, var(--sun) 13%, var(--panel)); color: var(--ink); font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.requests-entry strong { min-width: 24px; border-radius: 999px; padding: 4px 7px; background: var(--sun); color: #211029; text-align: center; }
.requests-entry[aria-pressed="true"] { outline: 2px solid var(--sun); outline-offset: -2px; background: color-mix(in srgb, var(--sun) 27%, var(--panel)); }
.conversation { width: 100%; display: grid; grid-template-columns: 43px 1fr auto; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); padding: 13px 10px; background: transparent; color: var(--ink); text-align: left; transition: background .18s, transform .25s var(--ease); }
.conversation:hover { background: rgb(127 127 127 / 8%); transform: translateX(3px); }
.conversation[data-active="true"] { background: linear-gradient(105deg, var(--acid), color-mix(in srgb, var(--hot) 28%, var(--acid))); color: #211029; }
.avatar { display: grid; width: 42px; height: 42px; place-items: center; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 900; }
.conversation[data-active="true"] .avatar { background: #171816; color: var(--acid); }
.conversation-copy { min-width: 0; display: grid; gap: 4px; }
.conversation-copy strong { overflow: hidden; font-family: system-ui, sans-serif; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-copy small, .conversation time { color: var(--muted); font-size: 9px; }
.conversation[data-active="true"] small, .conversation[data-active="true"] time { color: #41443c; }
.conversation.contact-request { border-left: 4px solid var(--sun); background: color-mix(in srgb, var(--sun) 13%, var(--panel)); }
.request-label { display: inline-block; border: 1px solid color-mix(in srgb, var(--sun) 70%, var(--ink)); border-radius: 999px; padding: 2px 6px; background: color-mix(in srgb, var(--sun) 24%, var(--panel)); color: var(--ink); font-size: 8px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.empty-state { margin: auto; padding: 30px; text-align: center; }
.empty-state h3 { margin: 12px 0 5px; font-family: system-ui, sans-serif; }
.empty-state p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.empty-glyph { font-size: 52px; color: var(--hot); }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 13px 18px; color: var(--muted); font-size: 10px; }
.sidebar-footer button { background: transparent; color: var(--muted); font-size: 9px; text-decoration: underline; }

.chat { min-width: 0; position: relative; overflow: hidden; background-color: var(--paper); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; }
.chat::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 70% 32%, var(--paper) 0 14%, transparent 40%); opacity: .9; }
.chat-placeholder { position: relative; z-index: 1; height: 100%; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; }
.chat-placeholder h2 { margin: 2px; font-family: system-ui, sans-serif; font-size: clamp(28px, 5vw, 52px); letter-spacing: -.06em; }
.chat-placeholder p { max-width: 46ch; color: var(--muted); font-size: 12px; line-height: 1.55; }
.access-card { width: min(520px,100%); display: grid; justify-items: center; border: 1px solid var(--line); border-top: 4px solid var(--hot); padding: 24px; background: var(--panel); box-shadow: var(--shadow); text-align: center; }
.access-card p { margin-inline: auto; }
.access-card[data-state="pending"] { border-top-color: var(--sun); }
.access-card[data-state="refused"],.access-card[data-state="error"] { border-top-color: var(--danger); }
.signal-orbit { width: 110px; height: 110px; position: relative; margin-bottom: 30px; border: 1px solid var(--line); border-radius: 50%; animation: rotate 8s linear infinite; }
.signal-orbit::before, .signal-orbit::after { content: ""; position: absolute; inset: 19px; border: 1px solid var(--line); border-radius: 50%; }
.signal-orbit::after { inset: 39px; background: var(--hot); border: 0; }
.signal-orbit i { position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--acid); }
.chat-active { position: relative; z-index: 2; height: 100%; min-height: 0; display: grid; grid-template: "head" 72px "messages" minmax(0,1fr) "composer" auto / minmax(0,1fr); background: color-mix(in srgb, var(--paper) 95%, transparent); }
.chat-active[data-contact-request="true"],.chat-active[data-recipient-notice="true"] { grid-template: "head" 72px "notice" auto "messages" minmax(0,1fr) "composer" auto / minmax(0,1fr); }
.chat-head { grid-area: head; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); padding: 0 20px; background: linear-gradient(110deg, color-mix(in srgb, var(--panel) 94%, var(--acid)), color-mix(in srgb, var(--panel) 94%, var(--hot))); color: var(--ink); backdrop-filter: blur(12px); }
.chat-head .back { display: none; }
.chat-title { min-width: 0; appearance: none; -webkit-appearance: none; border: 0; border-radius: var(--radius); padding: 5px 7px; background: transparent; color: var(--ink); font: inherit; text-align: left; }
.chat-title:hover { background: color-mix(in srgb, var(--button-surface-hover) 62%, transparent); }
.chat-title:active { background: color-mix(in srgb, var(--acid) 48%, var(--panel)); color: var(--ink); }
.chat-title:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; background: var(--button-surface); }
.chat-title h2 { margin: 0; padding: 0; background: transparent; color: inherit; font-family: system-ui, sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -.025em; text-align: left; }
.chat-title p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.chat-head > .secondary { min-height: 30px; margin-left: auto; padding: 0 9px; }
.expiry { margin-left: auto; border: 1px solid var(--line); padding: 7px 9px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.chat-head > .secondary + .expiry { margin-left: 0; }
.contact-request-notice,.recipient-readiness-notice { grid-area: notice; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; border-bottom: 1px solid color-mix(in srgb, var(--sun) 65%, var(--line)); padding: 12px 20px; background: color-mix(in srgb, var(--sun) 16%, var(--panel)); }
.contact-request-notice p,.recipient-readiness-notice p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.recipient-readiness-notice[data-state="checking"] { border-bottom-color: color-mix(in srgb, var(--acid) 65%, var(--line)); background: color-mix(in srgb, var(--acid) 10%, var(--panel)); }
.compact-menu { min-width: 42px; margin-left: auto; font-size: 15px; letter-spacing: .08em; }
.message-list { grid-area: messages; position: relative; z-index: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 28px clamp(16px, 6vw, 80px); scroll-behavior: smooth; overscroll-behavior: contain; touch-action: pan-y; isolation: isolate; }
.day-divider { align-self: center; margin: 14px 0 8px; border: 1px solid var(--line); padding: 5px 9px; background: var(--paper); color: var(--muted); font-size: 9px; text-transform: uppercase; }
.message { position: relative; flex: 0 0 auto; max-width: min(74%, 620px); padding: 12px 14px 8px; box-shadow: 0 6px 18px rgb(0 0 0 / 7%); }
.message.is-new { animation: message-in .4s var(--ease) both; }
.message-body { margin: 0; font-family: system-ui, sans-serif; font-size: 15px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-body.emoji-only { padding: 4px 2px; font-size: clamp(42px, 8vw, 62px); line-height: 1.05; letter-spacing: .04em; }
.message-body:not(.emoji-only) .emoji-surface { display: inline-block; font-size: 1.32em; line-height: .82; vertical-align: -.14em; }
.message-body a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.message-body a:visited { color: var(--visited); }
.message-body a:hover, .message-body a:focus-visible { text-decoration-thickness: 2px; }
.message-body code { border-radius: 4px; padding: 1px 4px; background: color-mix(in srgb, var(--console-bg) 12%, transparent); font-size: .9em; }
.message h1,.message h2 { margin: 0 0 .35em; max-width: 100%; font-family: system-ui,sans-serif; line-height: 1.15; overflow-wrap: anywhere; }
.message h1 { font-size: 1.35rem; }
.message h2 { font-size: 1.12rem; }
.message h1:not(:first-child),.message h2:not(:first-child) { margin-top: .75em; }
.message[data-selected="true"] { outline: 3px solid var(--blue); outline-offset: 3px; }
.message[data-selectable="true"] { cursor: default; }
.message-body,.selectable-text { cursor: text; user-select: text; -webkit-user-select: text; }
.message footer { min-height: 14px; display: flex; align-items: baseline; gap: 9px; margin-top: 7px; }
.message-footer-right { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 9px; margin-left: auto; opacity: .62; font-size: 8px; text-transform: uppercase; }
.message-audio-time { flex: 0 0 auto; min-width: 82px; color: inherit; font-size: 10px; line-height: 1; text-transform: none; white-space: nowrap; }
.message-select { position: absolute; z-index: 2; top: 3px; width: 32px; min-width: 32px; height: 32px; min-height: 32px; margin: 0; border-radius: 50%; padding: 0; background: transparent; color: inherit; font-size: 0; }
.message.mine > .message-select { right: 3px; }
.message.theirs > .message-select { left: 3px; }
.message.mine { padding-right: 40px; }
.message.theirs { padding-left: 40px; }
.message-select::before { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .62; transform: translate(-50%,-50%); }
.message-select:hover::before,.message-select:focus-visible::before { width: 9px; height: 9px; opacity: 1; }
.message.is-queued { transition: min-height .26s var(--ease),padding .26s var(--ease); }
.message.delivery-failed { outline: 1px solid var(--danger); }
.message.delivery-waiting { outline: 1px solid color-mix(in srgb, var(--sun) 72%, var(--line)); }
.recipient-waiting-copy { margin: 8px 0 2px; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); padding-top: 7px; font-family: system-ui,sans-serif; font-size: 11px; line-height: 1.35; }
.delivery-status { display: inline-flex; align-items: center; gap: 4px; }
.queue-spinner { width: 9px; height: 9px; border: 1px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rotate .75s linear infinite; }
.delivery-retry { border-bottom: 1px solid currentColor; padding: 0; background: transparent; color: inherit; font-size: inherit; text-transform: uppercase; }
.pending-operation { min-width: 180px; min-height: 52px; overflow: visible; flex-shrink: 0; transition: padding .28s var(--ease),opacity .2s; }
.pending-operation-copy { display: flex; align-items: center; gap: 9px; color: currentColor; font-family: system-ui,sans-serif; font-size: 12px; }
.pending-operation-copy .queue-spinner { width: 16px; height: 16px; flex: 0 0 auto; border-width: 2px; }
.pending-attachment { display: grid; gap: 7px; margin-bottom: 8px; }
.pending-attachment img { width: min(290px,68vw); max-height: 300px; border-radius: 9px; object-fit: contain; background: var(--console-bg); }
.pending-album { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pending-album img { width: 100%; height: 130px; object-fit: cover; }
.message.mine { align-self: flex-end; border-radius: 16px 4px 16px 16px; background: linear-gradient(135deg, var(--hot), #ff91c8); color: #25102e; transform-origin: 100% 100%; }
.message.theirs { align-self: flex-start; border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; background: var(--panel); transform-origin: 0 100%; }
.message.has-reactions { margin-bottom: 18px; }
.reaction-summary { position: absolute; z-index: 2; right: 10px; bottom: -17px; display: flex; gap: 3px; min-height: 0; }
.reaction-summary:empty { display: none; }
.reaction-summary > span { min-width: 38px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: 0 3px 10px rgb(0 0 0 / 12%); }
.reaction-summary .emoji-surface { font-size: 22px; line-height: 1; }
.reaction-count { min-width: 1ch; color: var(--ink); font-family: system-ui, sans-serif; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.forward-marker { position: absolute; top: 5px; right: 8px; opacity: .58; font-size: 12px; }
.contains-link::after { content: "⌁"; position: absolute; top: 5px; left: 8px; opacity: .55; font-size: 11px; }
.reaction-actions { position: absolute; z-index: 3; right: 0; bottom: calc(100% - 3px); width: max-content; max-width: calc(100vw - 28px); display: flex; flex-wrap: nowrap; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 4px; background: var(--panel); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity .16s, transform .16s; }
.message.theirs .reaction-actions { right: auto; left: 0; }
.message[data-reaction-picker="true"] .reaction-actions { opacity: 1; pointer-events: auto; transform: translateY(0); }
.message-list[data-selection-mode="true"] .reaction-actions { display: none; }
.reaction-actions button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border-radius: 50%; background: transparent; font-size: 20px; }
.reaction-actions button:hover { background: color-mix(in srgb, var(--hot) 20%, transparent); transform: scale(1.12); }
.quoted-message { width: 100%; margin-bottom: 8px; border: 0; border-left: 3px solid var(--blue); border-radius: 0; padding: 7px 9px; background: color-mix(in srgb, var(--panel) 70%, transparent); color: var(--muted); font-size: 12px; text-align: left; cursor: pointer; }
.quoted-message:hover,.quoted-message:focus-visible { background: color-mix(in srgb, var(--blue) 14%, var(--panel)); color: var(--ink); }
.reply-preview-content { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 8px; }
.reply-preview-content > img,.reply-preview-content > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--blue) 16%, var(--panel)); object-fit: cover; font-style: normal; font-size: 17px; }
.reply-preview-content > i.reply-file-badge { border: 1px solid color-mix(in srgb, currentColor 38%, var(--line)); background: color-mix(in srgb, var(--blue) 12%, var(--panel)); font-size: 8px; font-weight: 950; letter-spacing: -.02em; }
.reply-preview-content > span { min-width: 0; display: grid; gap: 2px; }
.reply-preview-content strong,.reply-preview-content > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview-content strong { color: currentColor; font-size: 11px; }
.reply-target-highlight { animation: reply-target-pulse 1.7s var(--ease); }
.contact-share-card { display: grid; gap: 4px; min-width: 230px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); padding: 12px; background: color-mix(in srgb, var(--panel) 75%, transparent); text-align: left; }
.contact-share-card strong { font-family: system-ui,sans-serif; }
.authority-notice { display: grid; gap: 8px; border-left: 4px solid var(--sun); padding: 10px 12px; background: color-mix(in srgb, var(--sun) 18%, var(--panel)); }
.authority-notice > strong { font-family: system-ui,sans-serif; font-size: 15px; }
.media-card { display: grid; gap: 8px; min-width: min(310px,70vw); }
.media-card img { display: block; width: 100%; max-height: 420px; border-radius: 8px; object-fit: contain; background: var(--console-bg); }
.mine .media-meta { color: #3a1534; }
.media-download { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 10px; border: 1px solid currentColor; padding: 11px; color: inherit; text-decoration: none; }
.media-icon { display: grid; width: 40px; aspect-ratio: 1; align-self: center; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--blue) 22%, transparent); font-size: 20px; line-height: 1; }
.file-copy { min-width: 0; display: grid; gap: 5px; }
.file-name { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-weight: 800; line-height: 1.25; }
.file-size { justify-self: end; color: currentColor; opacity: .72; font-size: 10px; }
.audio-player { display: grid; grid-template-columns: 40px minmax(100px,1fr) auto 40px; align-items: center; gap: 7px; min-width: min(390px, 76vw); }
.audio-player > audio { display: none; }
.audio-player button { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: white; }
.audio-progress { min-width: 0; display: grid; grid-template-columns: 1fr; align-items: center; gap: 6px; }
.audio-progress input { grid-column: 1 / -1; }
.audio-player .audio-speed { width: auto; min-width: 42px; border-radius: 999px; padding: 0 8px; background: color-mix(in srgb, var(--blue) 18%, var(--panel)); color: var(--ink); font-size: 10px; }
.audio-player .audio-download { background: transparent; color: var(--ink); font-size: 18px; }
.audio-player { --audio-track: color-mix(in srgb, var(--muted) 38%, var(--panel)); --audio-progress-color: var(--blue); --audio-thumb: var(--ink); }
.message.mine .audio-player { --audio-track: rgb(37 16 46 / 34%); --audio-progress-color: #25102e; --audio-thumb: #fff; }
.audio-player input[type="range"] { width: 100%; min-width: 0; height: 22px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.audio-player input[type="range"]::-webkit-slider-runnable-track { height: 6px; border: 1px solid color-mix(in srgb, var(--audio-thumb) 42%, transparent); border-radius: 999px; background: linear-gradient(to right,var(--audio-progress-color) 0 var(--audio-position,0%),var(--audio-track) var(--audio-position,0%) 100%); }
.audio-player input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; appearance: none; -webkit-appearance: none; border: 3px solid var(--audio-thumb); border-radius: 50%; background: var(--audio-progress-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel) 72%, transparent); }
.audio-player input[type="range"]::-moz-range-track { height: 6px; border: 1px solid color-mix(in srgb, var(--audio-thumb) 42%, transparent); border-radius: 999px; background: var(--audio-track); }
.audio-player input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--audio-progress-color); }
.audio-player input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid var(--audio-thumb); border-radius: 50%; background: var(--audio-progress-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel) 72%, transparent); }
.audio-player input[type="range"]:focus-visible { outline: 2px solid var(--audio-thumb); outline-offset: 2px; }
.audio-player input[type="range"]:disabled { cursor: not-allowed; opacity: .58; }
.audio-player .audio-time { grid-column: 1 / -1; justify-self: end; min-width: 82px; color: inherit; font-size: 10px; }
.album-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 3px; overflow: hidden; border-radius: 9px; }
.album-grid button { position: relative; min-height: 120px; background: var(--console-bg); }
.album-grid img { width: 100%; height: 100%; max-height: 220px; object-fit: cover; }
.album-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(10 5 15 / 58%); color: white; font-size: 26px; font-weight: 900; }
.media-placeholder { display: grid; min-height: 130px; place-items: center; border: 1px dashed currentColor; padding: 18px; background: color-mix(in srgb, var(--panel) 70%, transparent); text-align: center; }
.media-meta { color: var(--muted); font-size: 11px; }
.load-older { align-self: center; }
.composer { grid-area: composer; position: relative; z-index: 10; display: grid; grid-template-columns: 46px 1fr auto 46px; align-items: center; gap: 7px; border-top: 1px solid var(--line); padding: 12px clamp(12px, 4vw, 50px) max(12px, env(safe-area-inset-bottom)); background: var(--panel); }
.composer-restriction { grid-area: composer; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 14px clamp(12px, 4vw, 50px) max(14px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--sun) 10%, var(--panel)); color: var(--muted); font-size: 12px; }
.composer-restriction strong { flex: 0 0 auto; color: var(--ink); }
.selection-toolbar { position: fixed; z-index: 40; max-width: calc(var(--visual-viewport-width) - 20px); overflow-x: auto; display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 7px 5px 16px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: var(--shadow); transform: translateX(-50%); overscroll-behavior: contain; touch-action: pan-x; scrollbar-width: none; backdrop-filter: blur(16px); }
.selection-toolbar::-webkit-scrollbar { display: none; }
.selection-toolbar strong { margin-right: auto; font-size: 10px; text-transform: uppercase; }
#selection-count { flex: 0 0 auto; min-width: max-content; white-space: nowrap; }
.selection-toolbar button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; border-radius: 50%; background: transparent; color: var(--ink); font-size: 23px; }
.selection-toolbar button:hover { background: var(--acid); color: #211029; }
.reply-preview { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; border-left: 3px solid var(--blue); padding: 7px 10px; background: var(--paper); color: var(--muted); font-size: 12px; }
.reply-preview button { background: transparent; color: var(--ink); font-size: 18px; }
.composer-tools { display: flex; height: 46px; align-items: center; }
.composer.has-text { grid-template-columns: 46px 1fr 0 48px; }
.composer.has-text .composer-tools { visibility: hidden; opacity: 0; pointer-events: none; }
.composer.editing { grid-template-columns: 46px 1fr auto 46px; }
.composer.editing .composer-tools { visibility: visible; opacity: 1; pointer-events: auto; }
.composer-tools { transition: opacity .18s, visibility .18s; }
.composer-tools .icon-button { min-width: 34px; height: 46px; font-size: 18px; }
.ui-icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#record-audio.recording { background: var(--danger); color: white; }
.composer > .icon-button,.composer > .send-button { width: 46px; height: 46px; align-self: center; line-height: 1; }
.command-suggestions { position: absolute; z-index: 8; right: clamp(12px,4vw,50px); bottom: calc(100% + 8px); left: clamp(12px,4vw,50px); max-height: 260px; overflow: auto; border: 1px solid var(--line); padding: 6px; background: var(--panel); box-shadow: var(--shadow); }
.command-suggestions button,.pick-list button { width: 100%; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 11px; background: transparent; color: var(--ink); text-align: left; }
.command-suggestions button[data-active="true"],.command-suggestions button:hover,.pick-list button:hover { background: var(--acid); color: #211029; }
.composer textarea { height: 46px; min-height: 46px; max-height: 160px; overflow-y: hidden; resize: none; border: 0; border-bottom: 1px solid var(--line); padding-block: 12px; background: var(--paper); line-height: 21px; }
#message-input { font-size: 17px; }
.send-button { width: 46px; height: 46px; background: var(--acid); color: #171816; font-size: 22px; transition: transform .18s var(--ease); }
.send-button:hover { transform: translate(2px, -2px); }
.emoji-picker { position: absolute; z-index: 2; bottom: calc(100% + 8px); left: clamp(8px, 4vw, 50px); width: min(360px, calc(var(--visual-viewport-width) - 16px)); max-height: calc(var(--visual-viewport-height) - var(--masthead-height) - 78px); overflow: hidden; padding: 9px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); touch-action: pan-y; }
.emoji-picker input { margin-bottom: 7px; padding: 9px 10px; }
#emoji-results { max-height: min(240px, calc(var(--visual-viewport-height) - var(--masthead-height) - 142px)); overflow-y: auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; overscroll-behavior: contain; }
.emoji-picker button { height: 40px; background: transparent; font-size: 21px; }
.emoji-picker button:hover { background: var(--line); }

.settings { position: fixed; z-index: 30; top: calc(var(--visual-viewport-top) + var(--masthead-height)); right: max(0px, calc(100vw - var(--visual-viewport-left) - var(--visual-viewport-width))); bottom: auto; width: min(430px, var(--visual-viewport-width)); height: max(0px, calc(var(--visual-viewport-height) - var(--masthead-height))); overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); visibility: hidden; pointer-events: none; transform: translateX(105%); transition: transform .42s var(--ease), visibility 0s linear .42s; touch-action: pan-y; }
.settings-open .settings { visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
.sticky { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--line); background: var(--panel); }
.settings-block { padding: 20px; border-bottom: 1px solid var(--line); }
.identity-fields,.identity-actions,.storage-actions { display: grid; gap: 10px; }
.blocked-account { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 0; }
.blocked-account div { min-width: 0; display: grid; gap: 4px; }
.blocked-account code { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; }
.identity-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
.identity-actions > * { min-width: 0; }
.identity-registration { display: grid; gap: 8px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.identity-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; border: 1px solid var(--line); border-left: 4px solid var(--muted); padding: 11px; font-size: 11px; }
.identity-status[data-state="accepted"] { border-left-color: var(--acid); }
.identity-status[data-state="pending"] { border-left-color: var(--sun); }
.identity-status[data-state="refused"],.identity-status[data-state="error"] { border-left-color: var(--danger); }
.backup-callout { margin: 14px 0; border: 1px solid color-mix(in srgb, var(--hot) 55%, var(--line)); border-left: 5px solid var(--hot); padding: 14px; background: color-mix(in srgb, var(--hot) 9%, var(--panel)); }
.backup-callout.critical { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, var(--panel)); }
.backup-callout p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.confirm-row,.radio-row { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 10px 0; text-transform: none; letter-spacing: 0; line-height: 1.4; }
.confirm-row input,.radio-row input { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; accent-color: var(--hot); }
.replica-list { display: grid; gap: 7px; margin-top: 14px; }
.replica-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; border: 1px solid var(--line); padding: 10px; }
.replica-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replica-item code,.replica-item small { color: var(--muted); font-size: 9px; }
.admin-storage { display: grid; gap: 8px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.settings-section > summary,.dialog-section > summary { cursor: pointer; font-family: system-ui,sans-serif; font-size: 13px; font-weight: 850; list-style: none; }
.settings-section > summary::after,.dialog-section > summary::after { content: "+"; float: right; color: var(--hot); font-size: 18px; }
.settings-section[open] > summary::after,.dialog-section[open] > summary::after { content: "−"; }
.settings-section > summary + *,.dialog-section > summary + * { margin-top: 16px; }
.dialog-section { border-top: 1px solid var(--line); padding: 17px 0; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.switch-row input { appearance: none; position: relative; width: 46px; height: 26px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 0; background: var(--paper); cursor: pointer; transition: background .2s; }
.switch-row input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .22s var(--ease),background .2s; }
.switch-row input:checked { background: var(--hot); }
.switch-row input:checked::after { background: #25102e; transform: translateX(20px); }
.key-list { display: grid; gap: 6px; }
.key-list code { display: block; overflow: hidden; border: 1px solid var(--line); padding: 9px; color: var(--muted); text-overflow: ellipsis; }
.key-panel { display: grid; gap: 7px; margin: 12px 0; border: 1px solid var(--line); padding: 12px; }
.key-panel span { color: var(--hot); font-size: 9px; }
.key-panel code { overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
.key-panel small, .microcopy, .about { color: var(--muted); font-size: 10px; line-height: 1.5; }
.notification-status { margin: 12px 0; border-left: 4px solid var(--muted); padding: 9px 11px; background: color-mix(in srgb, var(--muted) 8%, var(--panel)); color: var(--muted); font-size: 11px; line-height: 1.45; }
.notification-status[data-state="ready"] { border-left-color: var(--acid); color: var(--ink); }
.notification-status[data-state="denied"],.notification-status[data-state="unsupported"] { border-left-color: var(--danger); }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0 0 16px; }
.stats div { display: grid; gap: 5px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px; }
.stats div:nth-child(even) { border-right: 0; }
.stats div:nth-last-child(-n + 2) { border-bottom: 0; }
.stats dt { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.stats dd { margin: 0; font-family: system-ui, sans-serif; font-size: 18px; font-weight: 800; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.45; }
#diagnostics { max-height: 220px; overflow: auto; margin: 0; padding: 12px; border: 1px solid var(--line); background: var(--console-bg); color: var(--console-ink); font-size: 9px; line-height: 1.55; white-space: pre-wrap; }
.compact { min-height: 30px; padding: 0 9px; }
.wrap { flex-wrap: wrap; }
.help-link { margin-top: 12px; text-decoration: none; }
.theme-row { display: flex; align-items: center; justify-content: space-between; }

dialog { width: min(590px, calc(var(--visual-viewport-width) - 28px)); max-width: calc(var(--visual-viewport-width) - 28px); max-height: calc(var(--visual-viewport-height) - 28px); overflow: hidden; border: 1px solid var(--line); border-radius: 0; padding: 0 20px 20px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); touch-action: pan-y; }
dialog:not(.image-viewer-dialog) > form { max-height: calc(var(--visual-viewport-height) - 50px); overflow: auto; overscroll-behavior: contain; }
dialog:not(.image-viewer-dialog) > form > .section-head { position: sticky; top: 0; z-index: 5; background: var(--panel); }
dialog input[type="range"] { touch-action: none; }
@media (min-width: 721px) {
  #contact-dialog,#conversation-menu-dialog { width: min(430px,var(--visual-viewport-width)); height: calc(var(--visual-viewport-height) - var(--masthead-height)); max-height: none; margin: calc(var(--visual-viewport-top) + var(--masthead-height)) max(0px, calc(100vw - var(--visual-viewport-left) - var(--visual-viewport-width))) 0 auto; border-width: 0 0 0 1px; }
  #contact-dialog > form,#conversation-menu-dialog > form { max-height: 100%; }
  #contact-dialog::backdrop,#conversation-menu-dialog::backdrop { background: rgb(10 10 10 / 28%); }
}
.wide-dialog { width: min(900px,calc(var(--visual-viewport-width) - 28px)); }
.pick-list { max-height: 360px; overflow: auto; margin-top: 10px; }
.storage-summary { margin-bottom: 16px; border: 1px solid var(--line); padding: 12px; color: var(--muted); font-size: 12px; }
.media-tabs { display: flex; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.media-tabs button { flex: 1; border-bottom: 3px solid transparent; padding: 11px 5px; background: transparent; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.media-tabs button[aria-current] { border-color: var(--hot); color: var(--ink); }
.media-direction { width: fit-content; display: flex; gap: 2px; margin: 0 0 14px auto; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.media-direction button { min-height: 34px; border-radius: 999px; padding: 5px 12px; background: transparent; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.media-direction button[aria-pressed="true"] { background: var(--acid); color: #171816; }
.media-direction-label { width: fit-content; border: 1px solid var(--line); border-radius: 999px; padding: 3px 7px; color: var(--muted); font-size: 10px; }
.media-direction-label.sent { border-color: color-mix(in srgb,var(--hot) 55%,var(--line)); }
.media-direction-label.received { border-color: color-mix(in srgb,var(--blue) 55%,var(--line)); }
.mutation-status { min-width: min(300px,80%); border: 1px dashed currentColor; opacity: .86; }
.media-gallery { display: flex; flex-direction: column; gap: 10px; max-height: min(62vh, calc(var(--visual-viewport-height) - 250px)); overflow: auto; overscroll-behavior: contain; padding: 4px; }
.media-day { position: sticky; top: 0; z-index: 2; margin: 20px 0 2px; border-bottom: 1px solid var(--line); padding: 8px 4px; background: var(--panel); color: var(--muted); font-size: 12px; }
.gallery-item { display: grid; gap: 7px; border: 1px solid var(--line); padding: 10px; background: var(--paper); }
.gallery-item img { width: 100%; max-height: min(68vh,680px); object-fit: contain; background: var(--console-bg); }
.gallery-item small { color: var(--muted); }
.album-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
.album-strip figure { min-width: min(82vw,760px); margin: 0; scroll-snap-align: center; }
.album-strip img { width: 100%; max-height: 70vh; object-fit: contain; background: var(--console-bg); }
.image-viewer-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; padding: 0; background: #08050c; }
.image-viewer-dialog form { height: 100%; }
.image-viewer-stage { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; }
.image-viewer-track { width: 100%; height: 100%; display: flex; will-change: transform; }
.image-viewer-track.is-animating { transition: transform .34s var(--ease); }
.viewer-slide { min-width: 100%; height: 100%; display: grid; place-items: center; padding: 54px 62px 82px; overflow: hidden; }
.viewer-slide img { display: block; max-width: none; max-height: none; object-fit: contain; transform-origin: center; will-change: transform; }
.image-viewer-tools { position: fixed; z-index: 4; right: 50%; bottom: max(20px,env(safe-area-inset-bottom)); display: flex; gap: 5px; border-radius: 999px; padding: 6px; background: rgb(20 13 28 / 72%); opacity: .28; transform: translateX(50%); transition: opacity .25s; backdrop-filter: blur(16px); }
.image-viewer-tools button { width: 42px; height: 42px; border-radius: 50%; background: transparent; color: white; font-size: 20px; }
.image-viewer-tools button:active:not(:disabled) { background: var(--hot); color: #25102e; transform: scale(.94); }
.image-viewer-tools button:focus-visible,.viewer-close:focus-visible,.viewer-nav:focus-visible { outline-color: white; }
.viewer-close { position: fixed; z-index: 6; top: max(12px,env(safe-area-inset-top)); right: max(12px,env(safe-area-inset-right)); width: 52px; height: 52px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 50%; background: rgb(20 13 28 / 78%); color: white; font-size: 30px; line-height: 1; backdrop-filter: blur(12px); }
dialog::backdrop { background: rgb(10 10 10 / 65%); backdrop-filter: blur(3px); }
.update-notice { position: fixed; z-index: 190; top: max(calc(var(--visual-viewport-top) + 14px),env(safe-area-inset-top)); left: calc(var(--visual-viewport-left) + var(--visual-viewport-width) / 2); width: min(680px,calc(var(--visual-viewport-width) - 24px)); max-height: calc(var(--visual-viewport-height) - 28px); overflow: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-top: 4px solid var(--acid); padding: 14px 16px; background: var(--panel); box-shadow: var(--shadow); transform: translateX(-50%); }
.update-notice p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.toast-region { position: fixed; z-index: 200; inset: max(calc(var(--visual-viewport-top) + 16px),env(safe-area-inset-top)) auto auto calc(var(--visual-viewport-left) + var(--visual-viewport-width) / 2); width: min(420px,calc(var(--visual-viewport-width) - 24px)); max-height: calc(var(--visual-viewport-height) - 32px); margin: 0; border: 0; padding: 0; overflow: visible; background: transparent; color: inherit; pointer-events: none; transform: translateX(-50%); }
.toast-region:popover-open { display: grid; gap: 8px; }
.toast-region[data-visible="true"] { display: grid; gap: 8px; }
.toast { max-width: 330px; border-left: 4px solid var(--acid); padding: 13px 16px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow); font-size: 11px; animation: toast-in .3s var(--ease); }
.toast.error { border-color: var(--hot); }
.recording { color: var(--hot); animation: pulse .8s infinite; }
.recording-strip { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; color: var(--hot); }
.recording-strip canvas { width: 100%; height: 34px; }
.composer.recording-active > textarea,.composer.recording-active > #emoji-button,.composer.recording-active > .send-button,.composer.recording-active > .composer-tools button:not(#record-audio) { display: none; }
.composer.recording-active { grid-template-columns: 1fr 46px; }
.composer.recording-active .recording-strip { grid-column: 1; }
.composer.recording-active .composer-tools { grid-column: 2; }

.doc-body { min-height: 100%; overflow: auto; background: var(--paper); }
.doc-shell { width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 70px; }
.doc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.doc-nav a { border: 1px solid var(--line); padding: 8px 11px; color: var(--ink); text-decoration: none; font-size: 11px; }
.doc-nav a[aria-current="page"] { border-color: var(--hot); background: var(--hot); color: #25102e; }
.doc-shell h1,.doc-shell h2 { font-family: system-ui,sans-serif; letter-spacing: -.04em; }
.doc-shell h1 { font-size: clamp(38px,8vw,72px); line-height: .9; }
.doc-shell.user-guide h1 { font-size: clamp(52px,11vw,104px); }
.doc-shell h2 { margin-top: 38px; }
.doc-shell p,.doc-shell li { max-width: 78ch; line-height: 1.65; }
.doc-shell code { background: var(--panel); padding: 2px 5px; }
.doc-shell pre { overflow: auto; border: 1px solid var(--line); padding: 14px; background: var(--console-bg); color: var(--console-ink); }
.doc-shell > img { display: block; width: 100%; height: auto; margin: 24px 0; border: 1px solid var(--line); background: var(--panel); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 12px; }
.doc-card { display: block; border: 1px solid var(--line); padding: 18px; background: var(--panel); color: var(--ink); text-decoration: none; }
.doc-card:hover { border-color: var(--hot); transform: translateY(-2px); }

.segmented { display: flex; flex-wrap: wrap; gap: 5px; }
.segmented label { display: inline-flex; flex: 1; min-width: 115px; align-items: center; justify-content: center; margin: 0; border: 1px solid var(--line); padding: 9px; cursor: pointer; text-align: center; }
.segmented input { width: auto; margin: 0 7px 0 0; accent-color: var(--hot); }
.contact-sections details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.contact-sections summary { cursor: pointer; font-family: system-ui,sans-serif; font-weight: 750; }
.expiry-detail { border-left: 3px solid var(--acid); padding: 8px 10px; color: var(--muted); font-size: 12px; }
.expiry-detail.expired { border-color: var(--danger); color: var(--danger); }
.qr-output { display: grid; place-items: center; min-height: 260px; margin: 14px 0; background: white; }
.qr-output img { width: min(360px, 82vw); height: auto; image-rendering: pixelated; }
.camera-stage { display: grid; min-height: 280px; place-items: center; overflow: hidden; background: var(--console-bg); }
.camera-stage video { width: 100%; max-height: 62vh; object-fit: contain; }
.file-preview-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 10px; max-height: min(58vh, calc(var(--visual-viewport-height) - 210px)); overflow: auto; overscroll-behavior: contain; }
.file-preview-item { position: relative; display: grid; gap: 5px; border: 1px solid var(--line); padding: 7px; background: var(--paper); }
.file-preview-item.invalid { border: 2px solid var(--danger); }
.file-preview-item.invalid small { color: var(--danger); white-space: normal; }
.file-preview-item img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--console-bg); }
.file-preview-item button { position: absolute; top: 3px; right: 3px; width: 32px; height: 32px; border-radius: 50%; background: var(--danger); color: white; }
.file-preview-item small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.link-search { margin: 0 0 12px; }
.viewer-nav { position: fixed; z-index: 4; top: 50%; width: 50px; height: 64px; background: rgb(20 13 28 / 55%); color: white; font-size: 28px; transform: translateY(-50%); }
.viewer-nav.previous { left: 10px; }
.viewer-nav.next { right: 10px; }
.image-viewer-caption, .viewer-caption { position: fixed; z-index: 4; top: max(12px,env(safe-area-inset-top)); left: 50%; max-width: min(76vw,740px); padding: 7px 12px; background: rgb(20 13 28 / 62%); color: white; font-size: 11px; transform: translateX(-50%); }
.dialog-note { color: var(--muted); font-size: 12px; line-height: 1.5; }
.key-expiry { border-left: 3px solid var(--acid); padding: 8px 10px; color: var(--muted); font-size: 12px; }
.key-expiry.expired { border-color: var(--danger); color: var(--danger); }
.public-qr { display: block; width: min(360px, 86vw); margin: 12px auto; border: 12px solid white; background: white; }
.qr-camera { display: block; width: 100%; min-height: 280px; max-height: 62vh; background: var(--console-bg); object-fit: contain; }
.stack { display: grid; gap: 9px; }
.gallery-item .media-card > img, .gallery-item .album-grid { width: 100%; }

@media (max-width: 720px) {
  .update-notice { align-items: stretch; flex-direction: column; }
  .update-notice .row { justify-content: end; }
  .recovery-status-grid { grid-template-columns: 1fr; }
  .recovery-status-grid div,.recovery-status-grid div:nth-child(even) { border-right: 0; border-bottom: 1px solid var(--line); }
  .recovery-status-grid div:last-child { border-bottom: 0; }
  .audio-player { grid-template-columns: 40px minmax(72px,1fr) 42px 40px; min-width: min(360px,80vw); gap: 5px; }
  .audio-player .audio-speed { min-width: 42px; padding: 0 5px; }
  .viewer-nav { width: 42px; height: 54px; opacity: .55; }
  .viewer-slide { padding: 58px 10px 86px; }
  .image-viewer-tools { bottom: max(14px,env(safe-area-inset-bottom)); gap: 7px; opacity: .78; }
  .image-viewer-tools button { width: 48px; height: 48px; font-size: 22px; }
  .viewer-close { width: 58px; height: 58px; }
  .compact-menu { margin-left: auto; }
}

@keyframes pulse { 50% { opacity: .25; transform: scale(.72); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes message-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes reply-target-pulse { 0%,100% { outline-color: transparent; } 20%,70% { outline: 4px solid var(--blue); outline-offset: 5px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 720px) {
  :root { --masthead-height: 54px; }
  .app { grid-template: var(--masthead-height) minmax(0,1fr) / minmax(0,1fr); }
  .masthead { grid-template-columns: 1fr auto auto auto auto; }
  .brand { border: 0; }
  .protocol-badge { display: none; }
  .connection { padding: 0 8px; }
  .connection span { display: none; }
  .header-update { padding-inline: 9px; }
  .header-update span { display: none; }
  .sidebar, .chat { position: absolute; top: var(--masthead-height); right: 0; bottom: 0; left: 0; max-width: 100%; overflow: hidden; border: 0; transition: transform .42s var(--ease), opacity .28s, visibility 0s linear .42s; }
  .sidebar { z-index: 2; }
  .chat { z-index: 3; visibility: hidden; pointer-events: none; transform: translateX(100%); }
  .app[data-view="chat"] .sidebar { visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(-22%); }
  .app[data-view="chat"] .chat { visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
  .app[data-view="list"] .sidebar { visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .chat-head .back { display: grid; margin-left: -9px; }
  .chat-head { padding: 0 10px; }
  .chat-head .avatar { width: 37px; height: 37px; }
  .expiry { display: none; }
  .message-list { padding: 18px 12px; }
  .message { max-width: 86%; }
  .contact-request-notice,.recipient-readiness-notice { grid-template-columns: 1fr; padding: 10px 12px; }
  .composer { padding: 9px 8px max(9px, env(safe-area-inset-bottom)); }
  .composer-tools .icon-button { min-width: 30px; }
  .emoji-picker { left: 8px; }
  #emoji-results { grid-template-columns: repeat(7, 1fr); }
  .settings { top: calc(var(--visual-viewport-top) + var(--masthead-height)); }
  .toast-region { top: max(10px, env(safe-area-inset-top)); right: auto; left: 50%; }
  .toast { max-width: none; }
  .setup-card { padding: 25px 20px; }
  .identity-actions { grid-template-columns: 1fr; }
}

@media (max-width: 340px) {
  .composer:not(.has-text),.composer.editing { grid-template-columns: 46px minmax(0,1fr) 46px; }
  .composer:not(.has-text) > .composer-tools,.composer.editing > .composer-tools { grid-column: 1 / -1; justify-self: center; order: 2; }
  .composer-tools .icon-button { min-width: 44px; }
}

@media (hover: hover) and (pointer: fine) {
  .image-viewer-tools:hover,.image-viewer-tools:focus-within { opacity: 1; }
  .image-viewer-tools button:hover:not(:disabled) { background: var(--hot); color: #25102e; }
}

@media (pointer: coarse) {
  .viewer-zoom { display: none; }
}