@font-face {
  font-family: 'Rebel System';
  src: local('SF Pro Rounded'), local('SF Pro Display'), local('Segoe UI');
  font-display: swap;
}

@font-face {
  font-family: 'Rebel Bubble';
  src: url('/assets/fonts/RebelBubble-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rebel Bubble Neon';
  src: url('/assets/fonts/RebelBubbleNeon-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: 'Rebel System', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --background: #000e16;
  --card: #061f2b;
  --card-hover: #0a2a37;
  --accent: #00d9ed;
  --accent-ink: #00111a;
  --text: #eaf5f8;
  --muted: #8da7b4;
  --line: #15303c;
  --warning: #f6bd79;
  --error: #ff9b9b;
  --chat-font: 'Rebel System', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sidebar: #02121b;
  --surface: #082431;
  --avatar-bg: #082936;
  --dialog: #031720;
  --hover: #0e3544;
  --selected: #193b48;
  --border: #204351;
  --border-strong: #2e5969;
  --scrollbar: #23414e;
  --text-soft: #c6d8df;
  --faint: #4c798b;
  --accent-hover: #51e6f4;
  --danger-border: #65403d;
  --danger-bg: #301d22;
  --danger-text: #ffceca;
  --banner-bg: #02202a80;
  --warning-bg: #32281970;
  --overlay: #00090fd4;
  --drop-bg: #001923e8;
  --shadow: #0008;
  --shield-a: #062b39;
  --shield-b: #02151f;
  --pressed: #ffffff40;
  --inline-code-bg: #00101970;
  --inline-code: #d2edf2;
  --out-code-bg: #00111a1c;
  --out-code: #002633;
  --out-link: #003e53;
  --out-meta: #166474;
  --out-pressed: #00304318;
  --link: #6beafa;
  --fp-bg: #00131c;
  --fp-text: #8fe0e9;
}

/* Light theme: set by src/theme.js on <html data-theme="light">. */
:root[data-theme='light'] {
  color-scheme: light;
  --background: #f2f6f8;
  --card: #ffffff;
  --card-hover: #e8f1f5;
  --accent: #007887;
  --accent-ink: #ffffff;
  --text: #0b222b;
  --muted: #56727f;
  --line: #d6e2e8;
  --warning: #8a5300;
  --error: #b42318;
  --sidebar: #e9f1f4;
  --surface: #ffffff;
  --avatar-bg: #dcecf2;
  --dialog: #ffffff;
  --hover: #e4eff3;
  --selected: #d3e8ef;
  --border: #cbdbe2;
  --border-strong: #9cb9c5;
  --scrollbar: #b4c8d1;
  --text-soft: #29434f;
  --faint: #86a0ab;
  --accent-hover: #005e69;
  --danger-border: #efb4ae;
  --danger-bg: #fdeeee;
  --danger-text: #8f1d1d;
  --banner-bg: #e3eff380;
  --warning-bg: #fff1d6;
  --overlay: #0b253066;
  --drop-bg: #f4f8faea;
  --shadow: #0b253033;
  --shield-a: #e2f1f6;
  --shield-b: #f8fbfc;
  --pressed: #0b25301f;
  --inline-code-bg: #e3eef2;
  --inline-code: #123340;
  --out-code-bg: #ffffff26;
  --out-code: #ffffff;
  --out-link: #e0fbff;
  --out-meta: #cdebf0;
  --out-pressed: #ffffff2e;
  --link: #006575;
  --fp-bg: #eef6f9;
  --fp-text: #00606d;
}

[data-chat-font='rounded'] { --chat-font: ui-rounded, 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif; }
[data-chat-font='serif'] { --chat-font: ui-serif, Georgia, 'Times New Roman', serif; }
[data-chat-font='mono'] { --chat-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
[data-chat-font='rebelBubble'] { --chat-font: 'Rebel Bubble', 'Rebel System', sans-serif; }
[data-chat-font='rebelBubbleNeon'] { --chat-font: 'Rebel Bubble Neon', 'Rebel System', sans-serif; }
.message-body, .composer-input { font-family: var(--chat-font); font-synthesis: weight style; }
.font-preview { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--background); line-height: 1.6; }
.font-preview .font-signature { font-size: 30px; margin-bottom: 10px; }
.settings-section .field select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body, #app { width: 100%; min-height: 100%; margin: 0; }
body { background: var(--background); color: var(--text); }
button, input, textarea, select { font: inherit; }
.avatar { overflow: hidden; }
.avatar-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.reply-quote, .composer-reply { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border: 0; border-left: 3px solid currentColor; background: #000e1615; border-radius: 7px; color: inherit; text-align: left; max-width: 100%; }
.reply-quote { width: 100%; margin-bottom: 8px; cursor: pointer; }
.reply-quote span, .composer-reply span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.reply-quote strong, .composer-reply strong { font-size: 12px; }
.composer-reply { position: relative; margin-bottom: 10px; color: var(--accent); background: var(--card); padding-right: 44px; }
.composer-reply .icon-button { position: absolute; top: 0; right: 0; }
.message-action { padding: 2px; min-height: 20px; border: none; background: transparent; color: inherit; }
.message-action svg { width: 13px; height: 13px; }
.message-reactions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.reaction-chip { min-height: 26px; border: 1px solid currentColor; border-radius: 14px; padding: 2px 8px; background: transparent; color: inherit; font: 12px system-ui; }
.reaction-chip[aria-pressed='true'] { background: var(--pressed); }
.reaction-menu { position: relative; }
.reaction-menu summary { cursor: pointer; font: 17px system-ui; list-style: none; }
.reaction-menu summary::-webkit-details-marker { display: none; }
.reaction-choices { position: absolute; bottom: 25px; left: 0; z-index: 4; display: grid; grid-template-columns: repeat(4, 36px); gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.reaction-choice { min-height: 34px; border: 0; background: transparent; padding: 3px; font: 21px system-ui; }
.dialog textarea[aria-label='Nachricht bearbeiten'] { width: 100%; min-height: 160px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font-family: var(--chat-font); resize: vertical; }
.chat-search-row { display: flex; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.chat-search-row input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--card); color: var(--text); }
.local-search-heading { padding: 10px 16px; color: var(--muted); font-size: 11px; }
.local-search-hit { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 12px 16px; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--text); }
.local-search-hit span { color: var(--muted); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.avatar.avatar-large { width: 76px; height: 76px; min-width: 76px; font-size: 30px; }
.profile-avatar-controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatar-crop-overlay { z-index: 100; }
.avatar-crop-dialog { max-width: 480px; }
.avatar-crop-content { display: flex; align-items: center; flex-direction: column; gap: 20px; }
.avatar-crop-canvas { width: min(260px, 100%); height: auto; border-radius: 50%; border: 2px solid var(--accent); touch-action: none; cursor: move; }
.avatar-crop-controls { width: 100%; display: grid; gap: 12px; }
.avatar-crop-controls label { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; font-size: 13px; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: default; opacity: .42; }
button, input, textarea, select, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
button { -webkit-user-select: none; user-select: none; }
input, textarea { color: var(--text); caret-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { resize: vertical; }
input, textarea, select { min-width: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
button, a { -webkit-touch-callout: none; }
h1, h2, h3, h4, p { margin: 0; }
img, video { max-width: 100%; }
.icon { width: 21px; height: 21px; flex: 0 0 auto; vertical-align: middle; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 10px 16px; border: 1px solid transparent; border-radius: 11px; background: transparent; font-size: 14px; font-weight: 600; transition: background .15s, border-color .15s, opacity .15s; }
.button:hover:not(:disabled) { background: var(--card-hover); }
.button.primary { color: var(--accent-ink); background: var(--accent); }
.button.primary:hover:not(:disabled) { background: var(--accent-hover); }
.button.secondary { border-color: var(--border); background: var(--surface); }
.button.secondary:hover:not(:disabled) { background: var(--hover); border-color: var(--border-strong); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; min-height: 42px; padding: 0; border: none; border-radius: 12px; background: transparent; color: var(--muted); text-decoration: none; }
.icon-button:hover:not(:disabled) { background: var(--card-hover); color: var(--text); }
.button.text-button { min-height: 36px; padding: 7px 3px; border-radius: 5px; color: var(--accent); font-size: 13px; }
.button.text-button:hover:not(:disabled) { background: transparent; color: var(--accent-hover); }
.button.small-button { min-height: 34px; padding: 7px 11px; font-size: 12px; }
.button.small-button .icon { width: 15px; height: 15px; }
.muted { color: var(--muted); }
.small { font-size: 12px; line-height: 1.65; }
.warning-text { color: var(--warning) !important; }
.error-text, .danger-text { color: var(--error) !important; }
.eyebrow { color: var(--accent); font: 600 9px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 2px; }
.visually-hidden { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; border: 0; clip: rect(0,0,0,0); white-space: nowrap; }
.is-loading { pointer-events: none; }
.is-loading > .icon { animation: pulse 1s ease-in-out infinite; }
.brand { display: flex; align-items: center; justify-content: center; }
.brand img { display: block; object-fit: contain; border-radius: 24px; }
.brand.compact { justify-content: flex-start; gap: 10px; }
.brand.compact img { border-radius: 11px; }
.brand.compact > span { font-size: 21px; font-weight: 750; letter-spacing: -.6px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 auto; background: var(--avatar-bg); color: var(--accent); border: 1px solid var(--border); border-radius: 50%; font-size: 18px; font-weight: 650; }
.notice { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--danger-border); border-radius: 12px; background: var(--danger-bg); color: var(--danger-text); font-size: 13px; line-height: 1.5; }
.notice > span { min-width: 0; overflow-wrap: anywhere; flex: 1; }
.notice > .icon-button { width: 30px; height: 30px; min-height: 30px; color: var(--danger-text); }
#app > .notice { position: fixed; z-index: 30; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(600px, calc(100% - 32px)); box-shadow: 0 12px 45px var(--shadow); }

/* Welcome and browser unlock. */
.auth-page { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100dvh; overflow: hidden; padding: 46px 24px; }
.auth-glow { position: absolute; pointer-events: none; width: 700px; height: 700px; top: -260px; left: calc(50% - 350px); background: radial-gradient(ellipse, #00d9ed0c, transparent 65%); }
.auth-card { position: relative; width: 100%; max-width: 386px; }
.auth-card > .brand { margin-bottom: 33px; }
.auth-heading { margin-bottom: 29px; }
.auth-heading .eyebrow { margin-bottom: 12px; }
.auth-heading h1 { white-space: pre-line; font-size: 39px; line-height: 1.13; letter-spacing: -1.6px; font-weight: 750; }
.auth-heading > .muted { margin-top: 12px; font-size: 15px; line-height: 1.5; }
.auth-card > .notice { margin: 0 0 18px; }
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.segmented { display: flex; padding: 4px; border-radius: 11px; background: var(--card); border: 1px solid var(--border); }
.segmented .segment { flex: 1; min-height: 33px; padding: 6px 12px; border-radius: 7px; font-size: 13px; color: var(--muted); }
.segmented .segment[aria-selected="true"] { color: var(--text); background: var(--selected); box-shadow: 0 1px 3px #0004; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.field input, .field textarea, .field select { width: 100%; min-height: 47px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); font-size: 15px; line-height: 1.5; }
.field input:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px #00d9ed14; }
.field-hint { font-size: 11px; line-height: 1.5; color: var(--muted); }
.auth-submit { min-height: 48px; margin-top: 1px; border-radius: 11px; }
.auth-submit .icon { order: 2; margin-left: auto; width: 18px; height: 18px; }
.auth-alternative { align-self: center; }
.auth-footer { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 25px; color: var(--muted); font-size: 10px; }
.auth-footer .icon { width: 12px; height: 12px; }

/* Conversation rail. */
.app-shell { display: grid; grid-template-columns: 332px minmax(0, 1fr); height: 100dvh; min-height: 0; overflow: hidden; max-width: 1920px; margin: 0 auto; }
.sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); background: var(--sidebar); }
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 27px 24px 31px; }
.brand-shield { width: 19px; height: 19px; color: var(--accent); opacity: .8; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 25px; }
.sidebar-heading h1 { font-size: 27px; line-height: 1.2; font-weight: 730; letter-spacing: -.7px; }
.sidebar-heading .icon-button { width: 35px; height: 35px; min-height: 35px; }
.sidebar-heading .icon { width: 17px; height: 17px; }
.connection-line { display: flex; align-items: center; gap: 6px; padding: 12px 25px 23px; }
.connection-text { min-width: 0; max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--muted); }
.connection-dot { display: block; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--warning); }
.connection-dot.online { background: var(--accent); box-shadow: 0 0 7px #00d9ed36; }
.relay-label { margin-left: auto; color: var(--muted); font: 500 8px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; white-space: nowrap; }
.search-field { display: flex; align-items: center; gap: 10px; margin: 0 20px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; }
.search-field .icon { width: 15px; height: 15px; color: var(--muted); }
.search-field input { display: block; width: 100%; height: 39px; border: none; outline: none; background: transparent; font-size: 12px; }
.search-field:focus-within { border-color: #00d9ed80; }
.section-heading { display: flex; align-items: center; justify-content: space-between; padding: 22px 25px 11px; }
.section-heading h2 { font: 600 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.5px; color: var(--muted); }
.section-heading .text-button { min-height: 24px; padding: 3px 0; font-size: 10px; font-weight: 500; }
.contact-list { min-height: 0; flex: 1; padding: 0 9px 20px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
.contact-row { display: flex; width: 100%; min-height: 82px; justify-content: flex-start; gap: 13px; padding: 15px; margin-bottom: 3px; text-align: left; border-radius: 11px; font-weight: 400; }
.contact-row:hover:not(:disabled) { background: var(--hover); }
.contact-row.selected { background: var(--selected); border-color: var(--border); }
.contact-row.selected .avatar { background: var(--selected); border-color: var(--border); }
.contact-details { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.contact-topline, .contact-bottomline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.contact-topline strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; }
.contact-topline time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.contact-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; line-height: 1.4; }
.unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; color: var(--accent-ink); background: var(--accent); border-radius: 9px; font-size: 9px; line-height: 1; font-weight: 700; }
.empty-contacts { padding: 35px 23px; text-align: center; color: var(--muted); }
.empty-contacts > .icon { width: 33px; height: 33px; color: var(--faint); }
.empty-contacts h3 { margin: 16px 0 9px; color: var(--text-soft); font-size: 15px; font-weight: 600; }
.empty-contacts p { font-size: 12px; line-height: 1.7; }
.empty-contacts .text-button { margin-top: 14px; }
.account-bar { display: flex; gap: 10px; align-items: center; padding: 17px 20px max(17px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.account-bar .avatar { width: 34px; height: 34px; font-size: 13px; background: var(--avatar-bg); }
.account-details { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.account-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.account-details > span { font-size: 10px; }
.account-bar .icon-button { width: 33px; height: 33px; min-height: 33px; }
.account-bar .icon-button .icon { width: 18px; height: 18px; }

/* Active conversation. */
.chat-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--background); }
.chat-pane.drag-over::after { content: 'Datei hier ablegen'; position: absolute; inset: 14px; z-index: 5; display: grid; place-items: center; pointer-events: none; border: 2px dashed var(--accent); border-radius: 20px; background: var(--drop-bg); color: var(--accent); font-size: 21px; font-weight: 600; }
.chat-header { display: flex; align-items: center; min-height: 91px; gap: 13px; padding: 19px 31px; border-bottom: 1px solid var(--line); }
.chat-header .avatar { width: 42px; height: 42px; font-size: 16px; }
.chat-heading { flex: 1; min-width: 0; }
.chat-heading h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 650; letter-spacing: -.1px; }
.chat-heading > span { display: block; margin-top: 6px; font-size: 10px; }
.chat-header > .icon-button:last-child { color: var(--accent); }
.mobile-back { display: none; }
.security-banner { display: flex; justify-content: center; align-items: center; gap: 7px; min-height: 34px; padding: 8px 20px; background: var(--banner-bg); color: var(--muted); font-size: 9px; line-height: 1.6; text-align: center; }
.security-banner .icon { width: 11px; height: 11px; }
.security-banner.security-warning { color: var(--warning); background: var(--warning-bg); }
.messages { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
.message-content { width: 100%; max-width: 1000px; padding: 25px 40px 29px; margin: 0 auto; }
.day-divider { display: flex; justify-content: center; margin: 0 0 25px; padding-top: 7px; }
.day-divider:not(:first-child) { margin-top: 21px; }
.day-divider > span { padding: 5px 11px; border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 9px; line-height: 1.5; }
.message-row { display: flex; justify-content: flex-start; margin: 0 0 14px; }
.message-row.outgoing { justify-content: flex-end; }
.message-bubble { min-width: 84px; max-width: min(82%, 620px); padding: 13px 15px 8px; border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; background: var(--card); box-shadow: 0 1px 2px #0001; }
.message-bubble.outgoing { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); border-radius: 14px 14px 4px 14px; }
.message-bubble.failed { border-color: #e18a7a; }
.message-body { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; white-space: normal; }
.message-body.plain-body { white-space: pre-wrap; }
.message-body > :first-child { margin-top: 0; }
.message-body > :last-child { margin-bottom: 0; }
.message-body p { margin: 0 0 9px; }
.message-body h1, .message-body h2, .message-body h3, .message-body h4, .message-body h5, .message-body h6 { margin: 13px 0 7px; font-size: 17px; line-height: 1.4; font-weight: 700; }
.message-body h1 { font-size: 20px; }
.message-body h3, .message-body h4, .message-body h5, .message-body h6 { font-size: 15px; }
.message-body blockquote { margin: 7px 0; padding: 3px 0 3px 11px; border-left: 3px solid #66b3c6; opacity: .85; }
.message-body ul, .message-body ol { margin: 7px 0; padding-left: 21px; }
.message-body li { margin: 2px 0; }
.message-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 10px 0; font-size: 12px; }
.message-body th, .message-body td { padding: 6px 9px; border: 1px solid #4a7d8b55; text-align: left; }
.message-body th { background: #2b637529; font-weight: 650; }
.message-body hr { border: 0; border-top: 1px solid #6695a444; margin: 13px 0; }
.message-body code { font: .86em/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 2px 5px; border-radius: 4px; background: var(--inline-code-bg); color: var(--inline-code); }
.outgoing .message-body code { background: var(--out-code-bg); color: var(--out-code); }
/* Code blocks keep their own dark surface, also inside outgoing bubbles. */
.outgoing .message-body pre > code { background: transparent; color: inherit; }
.message-body a { color: var(--link); }
.outgoing .message-body a { color: var(--out-link); }
.message-body pre, .code-block { margin: 10px 0; max-width: 100%; border: 1px solid #203b47; border-radius: 8px; background: #03141d; color: #d9eaf0; overflow: hidden; white-space: pre; }
.message-body pre > code { display: block; padding: 12px; overflow-x: auto; background: transparent; color: inherit; font-size: 11px; tab-size: 4; }
.message-body .code-block pre { margin: 0; border: 0; border-radius: 0; }
.message-body .code-header, .message-body .code-block-header { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid #1e3742; color: #7fabbc; background: #0b2430; font-size: 9px; line-height: 1.5; }
.message-body .code-header button, .message-body .code-block-header button { padding: 3px 5px; border: none; border-radius: 4px; background: transparent; color: #96b8c6; font: inherit; }
.message-body .code-header button:hover, .message-body .code-block-header button:hover { color: #00d9ed; background: #123746; }
.message-body .token.comment, .message-body .syntax-comment { color: #6d8c9b; }
.message-body .token.keyword, .message-body .syntax-keyword { color: #e4a3ef; }
.message-body .token.string, .message-body .syntax-string { color: #a4d99b; }
.message-body .token.number, .message-body .syntax-number { color: #e5bf87; }
.message-body .token.function, .message-body .syntax-function { color: #86d3ec; }
.message-body .token.operator, .message-body .syntax-operator { color: #d6e1e8; }
.message-body .token.tag, .message-body .syntax-tag { color: #80cded; }
.message-meta { display: flex; justify-content: flex-end; align-items: center; gap: 5px; min-height: 14px; margin-top: 6px; font-size: 9px; line-height: 1.3; color: var(--muted); }
.outgoing .message-meta { color: var(--out-meta); }
.message-status { display: inline-flex; }
.message-status .icon { width: 13px; height: 13px; }
.retry-button { color: var(--accent-ink); min-height: 30px; padding: 5px 0; font-size: 11px; text-decoration: underline; }
.conversation-start { display: flex; align-items: center; flex-direction: column; gap: 9px; max-width: 350px; margin: 60px auto; color: var(--muted); text-align: center; }
.conversation-start .icon { width: 24px; height: 24px; color: var(--faint); margin-bottom: 7px; }
.conversation-start p { font-size: 13px; }
.conversation-start > span { font-size: 11px; line-height: 1.7; }
.empty-chat { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 35px; text-align: center; }
.empty-shield { display: grid; place-items: center; width: 100px; height: 100px; border: 1px solid var(--border); border-radius: 30px; background: linear-gradient(145deg, var(--shield-a), var(--shield-b)); box-shadow: 0 0 100px #00d9ed09; margin-bottom: 12px; transform: rotate(-7deg); }
.empty-shield .icon { width: 43px; height: 43px; color: var(--accent); transform: rotate(7deg); }
.empty-chat h2 { font-size: clamp(20px, 2.3vw, 28px); font-weight: 650; letter-spacing: -.7px; }
.empty-chat > .muted { max-width: 340px; font-size: 13px; line-height: 1.8; }
.empty-chat > .button { margin-top: 10px; }

/* The composer stays mounted while new messages arrive. */
.composer-area { flex: 0 0 auto; width: 100%; max-width: 1000px; padding: 0 31px max(20px, env(safe-area-inset-bottom)); margin: 0 auto; }
.composer-toolbar { display: flex; align-items: center; gap: 10px; min-height: 35px; padding: 0 3px 6px; }
.composer-toolbar .text-button { min-height: 26px; padding: 3px 0; font-size: 10px; color: var(--muted); font-weight: 400; }
.composer-toolbar .text-button .icon { width: 14px; height: 14px; color: var(--muted); }
.composer-toolbar .text-button[aria-expanded="true"], .composer-toolbar .text-button[aria-pressed="true"] { color: var(--accent); }
.composer-spacer { flex: 1; }
.composer-row { display: flex; align-items: flex-end; gap: 7px; min-height: 58px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.composer-row:focus-within { border-color: var(--border-strong); }
.composer-input { display: block; flex: 1; width: 100%; min-height: 42px; max-height: 150px; padding: 10px 3px; border: 0; outline: none !important; resize: none; background: transparent; font-size: 14px; line-height: 22px; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
.composer-row .icon-button { width: 40px; height: 40px; min-height: 40px; border-radius: 10px; }
.composer-row .attach-button, .composer-row .camera-button { color: var(--muted); }
.composer-row .attach-button .icon { width: 24px; height: 24px; }
.composer-row .mic-button { width: 33px; color: var(--muted); }
.composer-row .mic-button .icon { width: 19px; height: 19px; }
.composer-row .send-button { color: var(--accent-ink); background: var(--accent); border-radius: 11px; }
.composer-row .send-button:hover:not(:disabled) { color: var(--accent-ink); background: var(--accent-hover); }
.composer-row .send-button:disabled { opacity: .32; }
.composer-row .send-button .icon { width: 18px; height: 18px; transform: rotate(-9deg); }
.composer-hint { display: flex; align-items: center; gap: 5px; padding: 9px 4px 0; color: var(--faint); font-size: 8px; line-height: 1.5; }
.composer-hint .icon { width: 9px; height: 9px; }
.keyboard-hint { margin-left: auto; }
.format-tools { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 7px; margin: 0 0 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.format-tool { min-width: 29px; min-height: 28px; padding: 4px 7px; color: var(--text-soft); font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; border-radius: 5px; }
.format-tool.bold { font-weight: 800; }
.format-tool.italic { font-style: italic; }
.format-tool.strike { text-decoration: line-through; }
.format-tool.code-block-button { font-family: inherit; font-size: 10px; font-weight: 500; }
.format-tool.code-block-button .icon { width: 13px; height: 13px; }
.language-select { min-height: 28px; max-width: 173px; margin-left: auto; padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text-soft); font-size: 10px; }
.composer-preview { min-height: 82px; max-height: 260px; overflow-y: auto; padding: 14px; margin-bottom: 9px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 13px; }
.composer-preview .muted { font-size: 12px; }
.recording-panel { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; padding: 11px 13px; background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: 12px; font-size: 12px; }
.recording-panel > strong { font-weight: 500; }
.recording-panel > time { margin-right: auto; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.recording-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #ff8585; animation: pulse 1.5s infinite; }
.recording-panel .button.text-button { font-size: 10px; }

/* Media, downloads and local attachment preview. */
.attachment { min-width: 0; max-width: 360px; overflow: hidden; }
.attachment-image-link { display: block; margin: -3px -5px 8px; border-radius: 8px; overflow: hidden; }
.attachment-image { display: block; width: 100%; max-height: 340px; object-fit: contain; background: #00101933; }
.attachment-video { display: block; max-height: 320px; width: 100%; margin-bottom: 8px; border-radius: 7px; background: #001019; }
.attachment-details { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.attachment-details > .icon { width: 22px; height: 22px; opacity: .7; }
.attachment-description { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.attachment-description strong { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; }
.attachment-description small { font-size: 9px; opacity: .65; }
.attachment-details > .icon-button { width: 30px; height: 30px; min-height: 30px; color: inherit; }
.attachment-details > .icon-button .icon { width: 16px; height: 16px; }
.audio-heading { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11px; }
.audio-heading .icon { width: 14px; height: 14px; }
.attachment audio { display: block; width: min(290px, 100%); height: 34px; filter: saturate(.45); }
.audio-speeds { display: flex; gap: 4px; padding: 7px 0 0; }
.speed-button { min-height: 23px; padding: 3px 6px; border-radius: 5px; color: inherit; font-size: 9px; font-weight: 500; opacity: .6; }
.speed-button[aria-pressed="true"] { background: #85c5d522; opacity: 1; }
.outgoing .speed-button[aria-pressed="true"] { background: var(--out-pressed); }
.pending-attachment { padding: 9px 13px; margin: 0 0 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pending-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.pending-heading .icon-button { width: 26px; height: 26px; min-height: 26px; }
.pending-heading .icon-button .icon { width: 15px; height: 15px; }
.pending-attachment .attachment-image { max-height: 130px; max-width: 200px; width: auto; border-radius: 5px; }
.pending-attachment .attachment-video { max-height: 130px; width: auto; }
.pending-attachment .attachment { max-width: 100%; }
.pending-attachment .attachment-image-link { display: inline-block; margin: 5px 0 0; }
.pending-attachment .attachment-description strong { max-width: min(500px, 58vw); }
.pending-attachment .attachment-details { padding-top: 6px; }

/* Account and identity sheets. */
.modal-overlay { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: center; align-items: center; padding: 32px; background: var(--overlay); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.dialog { display: flex; flex-direction: column; width: min(590px, 100%); max-height: calc(100dvh - 64px); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--dialog); box-shadow: 0 25px 100px var(--shadow); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 24px 26px 21px; border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin-top: 6px; font-size: 23px; font-weight: 650; letter-spacing: -.5px; }
.dialog-content { padding: 0 26px 28px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
.settings-section { display: flex; flex-direction: column; gap: 15px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.settings-section:last-child { padding-bottom: 0; border-bottom: 0; }
.settings-section h3 { font-size: 13px; font-weight: 650; color: var(--text-soft); }
.settings-section h4 { font-size: 11px; font-weight: 500; color: var(--muted); margin-bottom: 9px; }
.settings-section > .button { align-self: flex-start; }
.settings-section .field-label { font-size: 11px; }
.settings-section .field input, .settings-section .field textarea { min-height: 42px; font-size: 13px; }
.settings-section .field textarea { line-height: 1.7; }
.settings-account { display: flex; gap: 12px; align-items: center; }
.settings-account strong { font-size: 15px; font-weight: 600; }
.settings-account p { margin-top: 4px; }
.server-line { display: flex; align-items: center; gap: 7px; color: var(--muted); font: 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.server-line .icon { width: 11px; height: 11px; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.button-row > .button { font-size: 11px; min-height: 36px; padding: 7px 10px; }
.button-row > .button .icon { width: 15px; height: 15px; }
.device-row { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-top: 1px solid var(--border); }
.device-row:first-of-type { border-top: 0; }
.device-row > .icon { width: 20px; height: 20px; color: var(--muted); }
.device-details { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.device-details strong { overflow-wrap: anywhere; font-size: 12px; font-weight: 500; }
.device-details small { font-size: 10px; }
.device-row .text-button { max-width: 120px; font-size: 10px; line-height: 1.5; text-align: right; }
.fingerprint { padding: 14px; margin: 0; border: 1px solid var(--border); border-radius: 9px; color: var(--fp-text); background: var(--fp-bg); font: 11px/1.9 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; letter-spacing: 1px; user-select: text; }
.identity-person { display: flex; align-items: center; gap: 12px; }
.identity-person strong { font-size: 16px; font-weight: 600; }
.checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.7; color: var(--text-soft); }
.checkbox-label input { accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 auto; margin: 2px 0 0; }
.contact-verification-row { justify-content: flex-start; gap: 11px; width: 100%; min-height: 42px; padding: 3px 0; font-size: 12px; font-weight: 500; }
.contact-verification-row > .icon:first-child { width: 17px; height: 17px; color: var(--accent); }
.contact-verification-row > .muted { margin-left: auto; font-size: 10px; }
.contact-verification-row > .icon:last-child { width: 13px; height: 13px; color: var(--muted); }

@keyframes pulse { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }

@media (min-width: 1550px) {
  .app-shell { grid-template-columns: 365px minmax(0, 1fr); border-inline: 1px solid var(--line); }
  .sidebar-brand { padding-top: 31px; }
}

@media (max-width: 1000px) {
  .app-shell { grid-template-columns: 290px minmax(0, 1fr); }
  .sidebar-brand { padding: 23px 20px 26px; }
  .brand.compact { gap: 8px; }
  .brand.compact img { width: 36px; height: 36px; }
  .brand.compact > span { font-size: 19px; }
  .sidebar-heading { padding-left: 21px; }
  .connection-line { padding-inline: 21px; }
  .connection-text { max-width: 104px; }
  .relay-label { font-size: 7px; letter-spacing: .6px; }
  .search-field { margin-inline: 17px; }
  .section-heading { padding-inline: 21px; }
  .contact-row { gap: 10px; padding-inline: 11px; }
  .contact-row .avatar { width: 40px; height: 40px; font-size: 16px; }
  .contact-topline strong { font-size: 13px; }
  .chat-header { padding-inline: 24px; }
  .message-content { padding-inline: 24px; }
  .composer-area { padding-inline: 19px; }
  .message-bubble { max-width: 90%; }
  .keyboard-hint { display: none; }
}

@media (max-width: 700px) {
  .app-shell { display: flex; }
  .sidebar { width: 100%; border: 0; }
  .sidebar-brand { padding: max(21px, env(safe-area-inset-top)) 24px 25px; }
  .brand.compact img { width: 40px; height: 40px; }
  .brand.compact > span { font-size: 22px; }
  .sidebar-heading { padding-inline: 25px; }
  .sidebar-heading h1 { font-size: 31px; letter-spacing: -1px; }
  .connection-line { padding-inline: 25px; }
  .connection-text { max-width: 180px; font-size: 11px; }
  .relay-label { font-size: 8px; letter-spacing: 1px; }
  .search-field { margin-inline: 22px; }
  .search-field input { height: 42px; font-size: 14px; }
  .section-heading { padding-inline: 25px; }
  .section-heading h2 { font-size: 10px; }
  .section-heading .text-button { font-size: 12px; }
  .contact-list { padding-inline: 10px; }
  .contact-row { min-height: 86px; gap: 14px; padding-inline: 15px; }
  .contact-row .avatar { width: 48px; height: 48px; font-size: 19px; }
  .contact-topline strong { font-size: 16px; }
  .contact-topline time { font-size: 10px; }
  .contact-preview { font-size: 12px; }
  .account-bar { padding-inline: 25px; }
  .account-details strong { font-size: 13px; }
  .account-details > span { font-size: 11px; }
  .empty-contacts { max-width: 330px; margin: auto; padding-top: 55px; }
  .chat-pane { display: none; width: 100%; }
  .app-shell.has-active-chat .sidebar { display: none; }
  .app-shell.has-active-chat .chat-pane { display: flex; }
  .mobile-back { display: inline-flex; }
  .chat-header { min-height: 76px; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 12px 12px 8px; }
  .chat-header .mobile-back { width: 29px; height: 38px; min-height: 38px; margin-right: 0; color: var(--accent); }
  .chat-header .avatar { width: 38px; height: 38px; font-size: 15px; }
  .chat-heading h2 { font-size: 16px; }
  .chat-heading > span { font-size: 10px; }
  .chat-header > .icon-button:last-child { width: 34px; height: 38px; min-height: 38px; }
  .security-banner { min-height: 31px; padding: 7px 15px; font-size: 9px; }
  .message-content { padding: 22px 14px 20px; }
  .message-bubble { max-width: 89%; padding: 11px 13px 7px; }
  .message-body { font-size: 15px; }
  .message-body pre > code { font-size: 11px; }
  .message-meta { font-size: 9px; }
  .day-divider { margin-bottom: 23px; }
  .composer-area { padding: 0 10px max(10px, env(safe-area-inset-bottom)); }
  .composer-toolbar { min-height: 31px; padding-inline: 6px; padding-bottom: 5px; }
  .composer-toolbar .text-button { font-size: 11px; }
  .composer-row { min-height: 55px; gap: 5px; padding: 6px; border-radius: 14px; }
  .composer-input { font-size: 16px; line-height: 23px; min-height: 40px; padding-top: 9px; padding-bottom: 8px; }
  .composer-row .attach-button { width: 31px; }
  .composer-row .mic-button { width: 28px; }
  .composer-row .send-button { width: 38px; height: 38px; min-height: 38px; }
  .composer-hint { justify-content: center; padding-top: 7px; font-size: 8px; }
  .language-select { max-width: 155px; }
  .attachment audio { max-width: 245px; }
  .recording-panel { gap: 7px; padding: 9px 10px; }
  .recording-panel > strong { font-size: 11px; }
  .recording-panel > time { font-size: 11px; }
  .recording-panel .button.text-button { padding-inline: 0; }
  .modal-overlay { padding: 0; align-items: stretch; }
  .dialog { width: 100%; max-height: 100dvh; border: none; border-radius: 0; }
  .dialog-header { padding: max(22px, env(safe-area-inset-top)) 22px 20px; }
  .dialog-content { padding: 0 22px max(28px, env(safe-area-inset-bottom)); }
  .field input, .field textarea, .settings-section .field input, .settings-section .field textarea { font-size: 16px; }
  .auth-page { padding-top: max(28px, env(safe-area-inset-top)); padding-bottom: max(35px, env(safe-area-inset-bottom)); }
  .auth-heading h1 { font-size: 37px; }
  .auth-card > .brand { margin-bottom: 28px; }
  .auth-card > .brand img { width: 96px; height: 96px; }
}

@media (max-width: 360px) {
  .auth-page { padding-inline: 20px; }
  .auth-heading h1 { font-size: 33px; }
  .composer-row { gap: 2px; }
  .composer-row .mic-button { width: 25px; }
  .format-tool { min-width: 25px; padding-inline: 5px; }
  .language-select { margin-left: 0; }
  .attachment audio { max-width: 215px; }
}

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

.contact-with-options{position:relative}.chat-preferences{padding:0 12px 8px}.chat-preferences summary{cursor:pointer;color:var(--accent)}.chat-preferences button{font-size:12px}

.media-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.media-overview-item{padding:12px;border:1px solid var(--border);border-radius:12px;min-width:0}.media-overview-item time{display:block;font-size:12px;margin-bottom:8px}.media-overview-item img{max-width:100%}
.message-sender { display: block; margin-bottom: 5px; color: var(--accent); font-size: 11px; font-weight: 600; }
.section-heading .button-row { gap: 14px; }
.invite-share { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.invite-share input { width: 100%; }
.qr-code { width: min(220px, 100%); height: auto; border-radius: 12px; }
.settings-tabs { position: sticky; top: 0; z-index: 1; gap: 2px; margin-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.settings-tabs .segment { flex: 1 0 auto; font-size: 12px; padding: 6px 10px; white-space: nowrap; }
.about-intro { display: flex; align-items: center; gap: 16px; }
.about-intro img { border-radius: 20px; flex: none; }
.about-text { font-size: 15px; line-height: 1.5; }
.about-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13px; }
.about-facts dt { color: var(--muted); }
.about-facts dd { margin: 0; overflow-wrap: anywhere; }
.license-group h4 { margin: 14px 0 6px; }
.license-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.license-list li { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.license-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14px; }
.license-head .muted { font-size: 12px; }
.license-head code { margin-left: auto; color: var(--accent); font-size: 11px; }
.license-link { font-size: 11px; overflow-wrap: anywhere; color: var(--muted); }