/* User Settings > Appearance (client/js/appearanceBoot.js applies the choices to <html>;
   client/js/appearance.js draws the page). */

/* ---- Light theme: every token in styles.css :root, swapped. ---- */
:root[data-theme="light"] {
  --bg-rail: #e3e5e8;
  --bg-sidebar: #f2f3f5;
  --bg-chat: #ffffff;
  --bg-input: #ebedef;
  --bg-hover: #e6e8eb;
  --bg-active: #d4d7dc;
  --bg-mention: rgba(250, 166, 26, 0.14);
  --border: #dcdee2;
  --text: #2e3338;
  --text-muted: #4f535a;
  --text-strong: #060607;
  --accent: #4b5ae0;
  --accent-hover: #3b48c4;
  --danger: #d22d30;
  --online: #23864a;
  --link: #0062d1;
  --bg-panel: #ebedef;
  --warning: #a35f00;
  --status-idle: #d99a1e;
  --status-offline: #747881;
  --mention-bg: rgba(75, 90, 224, 0.15);
  --mention-text: #3440b0;
  --overlay-subtle: rgba(6, 6, 7, 0.07);
  --spoiler-hidden: #c4c8cd;
  --spoiler-hidden-hover: #b3b8be;
  --text-faint: rgba(92, 95, 102, 0.55);
  --auth-glow: #b9c0f7;
  color-scheme: light;
}

/* The call view stays black in both themes (like Discord's), so it keeps the dark text colours. */
:root[data-theme="light"] .call-view { --text: #e3e5ea; --text-muted: #9a9ea8; --text-strong: #ffffff; --bg-sidebar: #23262e; --bg-active: #41444e; --bg-hover: #353841; --warning: #faa61a; color: var(--text); }

/* Things drawn on the chat background that need more weight on white. */
:root[data-theme="light"] .message:hover,
:root[data-theme="light"] .message.menu-target { background: rgba(6, 6, 7, 0.035); }
:root[data-theme="light"] .auth-card,
:root[data-theme="light"] .toast,
:root[data-theme="light"] .context-menu,
:root[data-theme="light"] .popout { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
:root[data-theme="light"] .settings::backdrop,
:root[data-theme="light"] .modal::backdrop { background: rgba(0, 0, 0, 0.5); }
/* The profile card's role picker on white, so its highlighted role (--bg-active) stands out. */
:root[data-theme="light"] .role-picker { background: var(--bg-chat); }

/* ---- Chat font scaling and space between message groups ---- */
.messages { font-size: var(--chat-font-size, 16px); }
#composer-input { font-size: var(--chat-font-size, 16px); }
.message.group-start { margin-top: var(--group-spacing, 16px); }

/* ---- Compact message display: "12:34 PM Name message" on one line, like IRC. ---- */
/* The compact timestamp (renderMessage adds it to the first message of each group) only shows here. */
.message .gutter .compact-time { display: none; }
:root[data-message-display="compact"] .message { grid-template-columns: 64px minmax(0, 1fr); padding-top: 1px; padding-bottom: 1px; }
:root[data-message-display="compact"] .message .gutter { align-items: flex-start; }
:root[data-message-display="compact"] .message .gutter .avatar { display: none; }
:root[data-message-display="compact"] .message .gutter time { padding-top: 0; line-height: calc(var(--chat-font-size, 16px) * 1.375); }
:root[data-message-display="compact"] .message.group-start .gutter .compact-time { display: inline; visibility: visible; }
:root[data-message-display="compact"] .message .meta { float: left; margin-right: 0.35em; line-height: 1.375; }
:root[data-message-display="compact"] .message .meta time { display: none; }
/* Attachments, embeds and reactions start below the line with the name. */
:root[data-message-display="compact"] .message .meta ~ :not(.content) { clear: left; }
:root[data-message-display="compact"] .reply-preview { margin-left: 64px; }
:root[data-message-display="compact"] .reply-preview::before { display: none; }

/* ---- Accessibility ---- */
/* Links in messages are underlined on hover, as on Discord, or always with "Always underline links".
   Mention and in-app link pills keep their pill look. */
.content a:not(.app-link):not(.mention) { text-decoration: none; }
.content a:not(.app-link):not(.mention):hover { text-decoration: underline; }
:root[data-underline-links="on"] .content a:not(.app-link):not(.mention),
:root[data-underline-links="on"] .embed a.title,
:root[data-underline-links="on"] .file-card .file-name { text-decoration: underline; }

/* Reduced Motion: the app's own switch (or the system's, when synced). */
:root[data-reduced-motion="reduce"] *,
:root[data-reduced-motion="reduce"] *::before,
:root[data-reduced-motion="reduce"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}
:root[data-reduced-motion="reduce"] .message.jump-flash { animation: none; background: rgba(91, 108, 240, 0.2); }
:root[data-reduced-motion="reduce"] .incoming-call-ring { animation: none; box-shadow: 0 0 0 4px rgba(59, 165, 93, 0.6); }

/* ---- the Appearance page ---- */
.appearance-page { display: flex; flex-direction: column; gap: 20px; max-width: 680px; }
.appearance-page h3 { margin: 8px 0 -8px; color: var(--text-strong); font-size: 16px; }
.appearance-preview { border-radius: var(--radius); background: var(--bg-chat); border: 1px solid var(--border); padding: 4px 0 12px; pointer-events: none; overflow: hidden; }
.appearance-preview .message:hover { background: none; }
.appearance-preview .message .actions { display: none; }
.theme-options { display: flex; gap: 16px; flex-wrap: wrap; }
.theme-option { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--text-muted); font-size: 13px; }
.theme-swatch { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; }
.theme-swatch.dark { background: #2c2f37; }
.theme-swatch.light { background: #ffffff; }
.theme-swatch.system { background: linear-gradient(135deg, #ffffff 50%, #2c2f37 50%); }
.theme-swatch.neon-grid {
  background:
    linear-gradient(135deg, transparent 42%, #54e5f7 43%, #54e5f7 46%, transparent 47%, transparent 58%, #ffb454 59%, #ffb454 62%, transparent 63%),
    repeating-linear-gradient(0deg, transparent 0 9px, #17404e 9px 10px),
    repeating-linear-gradient(90deg, transparent 0 9px, #17404e 9px 10px),
    #070e18;
}
.theme-swatch.cybergrid {
  background: radial-gradient(circle, #050508 23%, #00dffc 25%, #00dffc 29%, #050508 31%, #050508 47%, #ff6600 49%, #050508 51%);
}
.theme-swatch.automaton {
  background: linear-gradient(135deg, #080806 10%, #d4af37 12%, #080806 17%, #12120e 42%, #c0c0c0 45%, #080806 49%, #12120e 70%, #d4af37 73%, #080806 79%);
}
.theme-swatch.premier {
  background: radial-gradient(circle, #c4953a 7%, #0a0812 9%, #0a0812 22%, #7b68ee 24%, #0a0812 26%, #0a0812 38%, #c4953a 40%, #0a0812 42%, #0a0812 58%, #7b68ee 60%, #0a0812 62%);
}
.theme-option[aria-checked="true"] { color: var(--text-strong); }
.theme-option[aria-checked="true"] .theme-swatch { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-option:focus-visible { outline: none; }
.theme-option:focus-visible .theme-swatch { box-shadow: 0 0 0 3px var(--link); }
.radio-list { display: flex; flex-direction: column; gap: 8px; }
.radio-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; background: var(--bg-input); cursor: pointer; color: var(--text); }
.radio-row:hover { background: var(--bg-active); }
.radio-row input { accent-color: var(--accent); margin: 0; }
.radio-row .muted { margin-left: auto; font-size: 13px; }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row input[type="range"] { flex: 1; accent-color: var(--accent); padding: 0; background: none; }
.range-row output { min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: 600; }
.spacing-options { display: flex; gap: 8px; flex-wrap: wrap; }
.spacing-options button { min-width: 52px; padding: 6px 10px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); }
.spacing-options button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.zoom-hint { margin-top: 4px; }