/* Theme variables apply to the complete application, including the sign-in gate. */
:root { --message-font-size: 13px; color-scheme: light; }
:root[data-theme="dark"] {
  --ink: #e5edf8;
  --muted: #a0b1c7;
  --line: #30425c;
  --canvas: #0f1827;
  --panel: #172438;
  --panel-soft: #20324b;
  --accent: #087aaf;
  --accent-strong: #8bd6f7;
  --accent-soft: #173f57;
  --shadow: 0 18px 52px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

.message-text, .matrix-mode .message-text, .channel-post-text, .composer input { font-size: var(--message-font-size); }
.appearance-screen { max-width: 620px; }
.appearance-heading { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 24px; }
.appearance-heading h2 { margin: 0 0 7px; font-size: 23px; letter-spacing: -.03em; }
.appearance-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.appearance-back { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--accent-strong); background: var(--panel); font-size: 23px; }
.appearance-back:hover { background: var(--accent-soft); }
.appearance-section { min-width: 0; padding: 0; margin: 0 0 24px; border: 0; }
.appearance-section legend { display: flex; gap: 12px; align-items: center; width: 100%; margin-bottom: 12px; padding: 0; font-size: 13px; font-weight: 650; }
.appearance-section output { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
.appearance-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.appearance-theme-choice, .appearance-sizes label { position: relative; display: block; min-width: 0; cursor: pointer; }
.appearance-theme-choice input, .appearance-sizes input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.appearance-theme-card { display: block; padding: 6px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); }
.appearance-theme-choice input:checked + .appearance-theme-card { border-color: var(--accent); }
.appearance-theme-choice input:focus-visible + .appearance-theme-card, .appearance-sizes input:focus-visible + span { outline: 3px solid var(--accent-strong); outline-offset: 3px; }
.appearance-theme-sample { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 134px; overflow: hidden; padding: 43px 13px 32px; border-radius: 8px; background: #e8f0f9; }
.sample-header { position: absolute; top: 0; right: 0; left: 0; height: 29px; border-bottom: 1px solid #dae4ef; background: #fff; }
.sample-header::before { position: absolute; top: 7px; left: 12px; width: 15px; height: 15px; border-radius: 50%; background: #6399e4; content: ''; }
.sample-header::after { position: absolute; top: 11px; left: 34px; width: 42%; height: 6px; border-radius: 3px; background: #92aac8; content: ''; }
.sample-bubble { display: block; width: 75%; height: 18px; border-radius: 4px 8px 8px; background: #fff; }
.sample-bubble.sample-mine { width: 62%; margin-left: auto; background: #bfd9ff; }
.sample-compose { position: absolute; right: 10px; bottom: 10px; left: 10px; height: 14px; border-radius: 5px; background: #fff; }
.sample-dark { background: #101d30; }
.sample-dark .sample-header { background: #172438; border-color: #30425c; }
.sample-dark .sample-bubble, .sample-dark .sample-compose { background: #243850; }
.sample-dark .sample-mine { background: #2b4e79; }
.appearance-choice-caption { display: flex; align-items: center; justify-content: space-between; min-height: 35px; padding: 5px 7px 0; font-size: 12px; font-weight: 600; }
.appearance-choice-check { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--line); border-radius: 50%; color: transparent; font-size: 12px; }
input:checked + .appearance-theme-card .appearance-choice-check { border-color: var(--accent); color: #fff; background: var(--accent); }
.appearance-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.appearance-sizes label > span { display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 76px; padding: 11px 4px; border: 2px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--muted); font-size: 11px; }
.appearance-sizes input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.appearance-size-sample { display: grid; place-items: center; height: 25px; color: var(--ink); }
.appearance-size-sample.size-small { font-size: 13px; }
.appearance-size-sample.size-medium { font-size: 15px; }
.appearance-size-sample.size-large { font-size: 17px; }
.appearance-help { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.appearance-preview { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid #d0dfef; border-radius: 14px; background: #e8f0f9; background-image: radial-gradient(rgba(77,117,171,.13) .7px, transparent .7px); background-size: 16px 16px; }
.appearance-preview-day { align-self: center; margin: 0 0 3px; color: var(--muted); font-size: 10px; }
.appearance-preview-bubble { align-self: flex-start; max-width: 90%; padding: 10px 12px; border-radius: 4px 12px 12px; background: var(--panel); font-size: var(--message-font-size); line-height: 1.48; overflow-wrap: anywhere; }
.appearance-preview-bubble.preview-mine { align-self: flex-end; border-radius: 12px 4px 12px 12px; background: #dceaff; }
.appearance-preview-bubble small { display: block; margin-top: 5px; color: var(--muted); text-align: right; font-size: 10px; }
.appearance-status { min-height: 35px; margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.appearance-status.error { color: #a14d55; }

/* Keep the existing colored avatars and room icons; replace only surfaces and text. */
:root[data-theme="dark"] :is(.sidebar, .details-panel, .conversation-header, .topic-grid, .topic-card, .channel-post, .contact-list, .settings-list, .matrix-profile-address, .matrix-profile-fields, .matrix-profile-field, .matrix-profile-rooms, .matrix-profile-room, .matrix-device-details, .modal-card, .composer, .message-bubble, .security-back, .security-section, .security-request-notice, .matrix-session-bar button, .channel-reaction) { background: var(--panel); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .bottom-tabs { background: var(--panel) !important; }
:root[data-theme="dark"] .bottom-tabs-global { border-color: var(--line); }
:root[data-theme="dark"] :is(.message-pane, .appearance-preview) { background-color: #101d30; background-image: radial-gradient(rgba(118,155,204,.1) .7px, transparent .7px); border-color: var(--line); }
:root[data-theme="dark"] :is(.message-row.mine .message-bubble, .appearance-preview-bubble.preview-mine) { background: #264466; color: var(--ink); }
:root[data-theme="dark"] :is(.chat-row:hover, .topic-card:hover, .contact-card:hover, .settings-row:hover, .matrix-profile-room:hover, button.matrix-profile-field:not(:disabled):hover, .create-option:hover, .ghost-button:hover) { background: var(--panel-soft); }
:root[data-theme="dark"] .chat-row.active { background: var(--accent-soft); }
:root[data-theme="dark"] .chat-row.active :is(.chat-preview, .chat-time) { color: #abcdf6; }
:root[data-theme="dark"] .chat-row-saved { background: #352f26; }
:root[data-theme="dark"] .chat-row-saved:hover { background: #433925; }
:root[data-theme="dark"] .chat-row-saved.active { background: #52432b; }
:root[data-theme="dark"] .chat-row-saved .chat-name { color: #f0d194; }
:root[data-theme="dark"] .chat-row-saved :is(.chat-preview, .chat-time) { color: #ccb993; }
:root[data-theme="dark"] :is(.forum-strip, .security-note, .reply-preview, .channel-hero, .profile-card, .topic-card.pinned, .channel-post.pinned, .matrix-profile-editor, .security-form, .security-sas-emoji, .security-button.secondary, .channel-composer, .message-unavailable-action) { background: var(--panel-soft); border-color: var(--line); }
:root[data-theme="dark"] :is(.forum-chip, .pinned-label, .subscribe-button.subscribed, .matrix-profile-room-tabs button[aria-selected="true"] span) { color: var(--accent-strong); background: var(--accent-soft); }
:root[data-theme="dark"] .matrix-profile-room-tabs button span { background: var(--panel-soft); }
:root[data-theme="dark"] :is(.matrix-connect-form input, .matrix-profile-editor input, .matrix-profile-editor textarea, .security-form textarea, .security-form input[type="password"], .search-box kbd) { color: var(--ink); background: var(--canvas); border-color: var(--line); }
:root[data-theme="dark"] :is(.security-button.secondary:hover, .message-unavailable-action:hover) { background: var(--accent-soft); }
:root[data-theme="dark"] :is(.subscribe-button:not(.subscribed), .security-button:not(.secondary):not(.danger), .send-button, .compose-fab):hover { color: #fff; background: #3278cc; }
:root[data-theme="dark"] .matrix-security-warning { color: #f1d49c; background: #382e21; border-color: #685434; }
:root[data-theme="dark"] .matrix-security-warning p { color: #d9c394; }
:root[data-theme="dark"] .matrix-security-warning.settings-security-neutral { color: var(--ink); background: var(--panel-soft); border-color: var(--line); }
:root[data-theme="dark"] .matrix-security-warning.settings-security-neutral p { color: var(--muted); }
:root[data-theme="dark"] .security-state.verified { color: #9cdfbd; background: #1a413a; }
:root[data-theme="dark"] .security-state.pending { color: #efd092; background: #49391f; }
:root[data-theme="dark"] :is(.security-confirm, .security-button.danger.secondary) { color: #ffabb3; background: #412831; border-color: #6c3d49; }
:root[data-theme="dark"] .security-button.danger.secondary:hover { background: #52323d; }
:root[data-theme="dark"] :is(.matrix-connect-status.error, .matrix-send-status.error, .security-status.error, .appearance-status.error) { color: #ffacb8; }
:root[data-theme="dark"] .matrix-connect-status.success { color: #9cdfbd; }
:root[data-theme="dark"] :is(.message-unavailable-content, .message-unavailable-heading .message-meta, .message-meta, .message-row.mine .message-meta, .security-note small, .topic-stats, .day-divider) { color: var(--muted); }
:root[data-theme="dark"] .message-unavailable-icon { color: #f28b9e; }
:root[data-theme="dark"] .matrix-session-bar { color: var(--accent-strong); background: var(--panel-soft); border-color: var(--line); }
:root[data-theme="dark"] .matrix-session-bar.has-error { color: #f1d49c; background: #382e21; }
:root[data-theme="dark"] .settings-screen .settings-row:disabled:not(.settings-account-row) { color: var(--muted); background: #18283e; }
:root[data-theme="dark"] .settings-screen .settings-account-row:disabled:hover { background: transparent; }
:root[data-theme="dark"] .avatar[data-presence]::after, :root[data-theme="dark"] .presence-dot, :root[data-theme="dark"] .matrix-profile-camera { border-color: var(--panel); }
:root[data-theme="dark"] .modal-backdrop { background: rgba(3, 9, 18, .62); }
:root[data-theme="dark"] body.auth-gated #matrixConnectModal { background: #101d30; }
:root[data-theme="dark"] body.auth-gated .matrix-connect-card { background: var(--panel); border-color: var(--line); }
:root[data-theme="dark"] .create-option { color: var(--ink); }
:root[data-theme="dark"] .matrix-destructive .settings-copy strong { color: #ffacb8; }

@media (max-width: 420px) {
  .appearance-heading { margin-bottom: 19px; }
  .appearance-heading h2 { font-size: 21px; }
  .appearance-themes { gap: 9px; }
  .appearance-theme-sample { min-height: 123px; padding-right: 9px; padding-left: 9px; }
  .appearance-section legend { font-size: 12px; }
  .appearance-preview { padding: 13px; }
}