/*
 * BOT.de alternate rooms.
 * Classic deliberately has no theme attribute and keeps index.css untouched.
 * Hell is an open, paper-white room with sea-glass and tangerine details;
 * Darkmode is the same room after dusk, not an inverted photograph.
 */

/* Shared, deliberately compact control. The label wraps the Palette icon,
   .theme-picker-label, and the native select. */
.theme-picker {
  --picker-bg: hsl(var(--card));
  --picker-ink: hsl(var(--foreground));
  --picker-line: hsl(var(--border));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  padding: 5px 7px 5px 10px;
  border: 1px solid var(--picker-line);
  border-radius: 10px;
  background: var(--picker-bg);
  color: var(--picker-ink);
  font: 600 11px/1.2 var(--app-font-sans);
  white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.theme-picker:hover {
  border-color: hsl(var(--ring) / .65);
  transform: translateY(-1px);
}
.theme-picker:focus-within {
  border-color: hsl(var(--ring));
  outline: 3px solid hsl(var(--ring) / .22);
  outline-offset: 2px;
}
.theme-picker > svg { width: 15px; height: 15px; flex: none; color: hsl(var(--ring)); }
.theme-picker-label { color: hsl(var(--muted-foreground)); }
.theme-picker select {
  appearance: auto;
  min-width: 0;
  max-width: 110px;
  padding: 4px 1px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--picker-ink);
  font: 700 11px/1.2 var(--app-font-sans);
  cursor: pointer;
}
.theme-picker select:focus-visible { outline: 0; }
.theme-picker select option { color: #263b47; background: #fff; }
.auth-theme-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
}
.bot-header .header-meta,
.personal-topbar { min-width: 0; }
.bot-header .header-meta > *,
.personal-topbar > * { flex-shrink: 0; }
.personal-topbar .topbar-crumb { flex: 1 1 auto; min-width: 0; }

html[data-bot-theme='light'] {
  color-scheme: light;
  --background: 0 0% 100%;
  --foreground: 205 35% 18%;
  --border: 198 25% 85%;
  --card: 0 0% 100%;
  --card-foreground: 205 35% 18%;
  --card-border: 198 27% 86%;
  --sidebar: 190 36% 94%;
  --sidebar-foreground: 205 35% 18%;
  --sidebar-border: 192 29% 83%;
  --sidebar-primary: 185 58% 29%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 188 40% 88%;
  --sidebar-accent-foreground: 205 35% 18%;
  --sidebar-ring: 185 58% 29%;
  --popover: 0 0% 100%;
  --popover-foreground: 205 35% 18%;
  --popover-border: 198 27% 86%;
  --primary: 186 59% 27%;
  --primary-foreground: 0 0% 100%;
  --secondary: 184 39% 90%;
  --secondary-foreground: 190 55% 24%;
  --muted: 193 35% 95%;
  --muted-foreground: 201 19% 39%;
  --accent: 18 76% 52%;
  --accent-foreground: 0 0% 100%;
  --destructive: 5 62% 42%;
  --destructive-foreground: 0 0% 100%;
  --input: 196 25% 79%;
  --ring: 185 58% 32%;
  --chart-1: 185 58% 32%;
  --chart-2: 18 76% 52%;
  --chart-3: 205 35% 18%;
  --chart-4: 42 76% 50%;
  --chart-5: 150 42% 35%;
  --room: #ffffff;
  --room-alt: #f3f9f8;
  --room-line: #dce9e8;
  --room-ink: #253d47;
  --room-soft: #587078;
  --room-accent: #bd552e;
  --room-primary: #12676e;
  --room-primary-hover: #0b535b;
  --room-on-primary: #ffffff;
  --room-chip: #e7f4f1;
  --room-chat: #f0f6f5;
  --room-user: #d8efeb;
  --room-danger: #a64036;
  --room-danger-bg: #fff1ed;
  --room-good: #256552;
  --room-good-bg: #eaf6ef;
  --room-shadow: 0 16px 45px #174a4d12, 0 2px 8px #174a4d0a;
}
html[data-bot-theme='dark'] {
  color-scheme: dark;
  --background: 203 28% 11%;
  --foreground: 181 25% 93%;
  --border: 198 18% 28%;
  --card: 202 27% 16%;
  --card-foreground: 181 25% 93%;
  --card-border: 198 18% 29%;
  --sidebar: 205 31% 9%;
  --sidebar-foreground: 181 25% 93%;
  --sidebar-border: 198 19% 27%;
  --sidebar-primary: 174 48% 65%;
  --sidebar-primary-foreground: 205 31% 9%;
  --sidebar-accent: 198 24% 23%;
  --sidebar-accent-foreground: 181 25% 93%;
  --sidebar-ring: 174 48% 65%;
  --popover: 202 27% 17%;
  --popover-foreground: 181 25% 93%;
  --popover-border: 198 18% 29%;
  --primary: 174 48% 65%;
  --primary-foreground: 205 31% 9%;
  --secondary: 199 22% 24%;
  --secondary-foreground: 181 25% 93%;
  --muted: 201 20% 22%;
  --muted-foreground: 188 16% 70%;
  --accent: 22 86% 72%;
  --accent-foreground: 205 31% 9%;
  --destructive: 7 76% 72%;
  --destructive-foreground: 205 31% 9%;
  --input: 198 17% 39%;
  --ring: 174 48% 65%;
  --chart-1: 174 48% 65%;
  --chart-2: 22 86% 72%;
  --chart-3: 181 25% 93%;
  --chart-4: 42 76% 65%;
  --chart-5: 150 42% 64%;
  --room: #20333a;
  --room-alt: #192b31;
  --room-line: #38515a;
  --room-ink: #e8f2ef;
  --room-soft: #adc3c2;
  --room-accent: #ffad85;
  --room-primary: #8dd4c6;
  --room-primary-hover: #a5e4d6;
  --room-on-primary: #102b30;
  --room-chip: #29464b;
  --room-chat: #293e44;
  --room-user: #315a5b;
  --room-danger: #ffa396;
  --room-danger-bg: #492e31;
  --room-good: #a0ddbd;
  --room-good-bg: #244237;
  --room-shadow: 0 18px 45px #07171b55, 0 2px 8px #07171b33;
}

/* Common surfaces: variable-based classic rules inherit a full palette;
   these address the fixed cream/navy values in the original stylesheet. */
html:is([data-bot-theme='light'], [data-bot-theme='dark']) {
  background: hsl(var(--background));
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) body {
  background: hsl(var(--background));
  color: var(--room-ink);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .bot-app {
  background: hsl(var(--background));
}
html[data-bot-theme='light'] .bot-app {
  background: radial-gradient(circle at 91% 5%, #dff4ee 0, transparent 30rem),
              radial-gradient(circle at 7% 86%, #fff1e9 0, transparent 24rem), #ffffff;
}
html[data-bot-theme='dark'] .bot-app {
  background: radial-gradient(circle at 84% 2%, #214442 0, transparent 31rem),
              radial-gradient(circle at 8% 94%, #382e32 0, transparent 26rem), #152329;
}
html[data-bot-theme='dark'] .bot-app::before { opacity: .12; mix-blend-mode: soft-light; }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .brand-name span,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .intro h1 em,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-heading h1 em,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .thread-empty h2 em,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .identity-row h2 span,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .auth-story h1 em {
  color: var(--room-accent);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .avatar {
  box-shadow: 0 8px 19px hsl(var(--primary) / .16);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .avatar::before,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .avatar::after { background: hsl(var(--primary-foreground)); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .avatar-face { border-color: var(--room-accent); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .avatar-antenna,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .avatar-antenna::before { background: var(--room-accent); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .chat-card,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-chat {
  background: var(--room);
  border-color: var(--room-line);
  box-shadow: var(--room-shadow);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .suggestion,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-ideas button {
  color: var(--room-ink);
  background: var(--room-alt);
  border-color: var(--room-line);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .suggestion:hover,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-ideas button:hover {
  background: var(--room-chip);
  border-color: var(--room-primary);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .message-bubble,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-bubble {
  background: var(--room-chat);
  color: var(--room-ink);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .message-row.user .message-bubble {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-message.user .personal-bubble {
  background: var(--room-user);
  color: var(--room-ink);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .composer,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-composer {
  background: var(--room);
  border-color: hsl(var(--input));
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .composer:focus-within,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-composer:focus-within {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / .16);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-composer textarea {
  color: var(--room-ink);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-composer textarea::placeholder {
  color: var(--room-soft);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .send-button:hover:not(:disabled),
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-composer button:hover:not(:disabled) {
  background: var(--room-primary-hover);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-composer button,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .empty-start {
  background: var(--room-primary);
  color: var(--room-on-primary);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .public-auth-link {
  color: var(--room-ink);
  background: var(--room);
  border-color: var(--room-line);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .public-auth-link:hover { background: var(--room-chip); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .public-auth-link.primary {
  color: var(--room-on-primary);
  background: var(--room-primary);
  border-color: var(--room-primary);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .public-auth-link.primary:hover {
  background: var(--room-primary-hover);
  border-color: var(--room-primary-hover);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .error-note,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-alert {
  color: var(--room-danger);
  background: var(--room-danger-bg);
  border-color: hsl(var(--destructive) / .35);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-notice {
  color: var(--room-good);
  background: var(--room-good-bg);
  border-color: hsl(150 40% 50% / .28);
}

/* The private room: its three spatial zones stay intact. */
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-app {
  background: hsl(var(--background));
  color: var(--room-ink);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-sidebar {
  background: hsl(var(--sidebar));
  color: hsl(var(--sidebar-foreground));
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-sidebar .brand,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-sidebar .brand-name { color: hsl(var(--sidebar-foreground)); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-sidebar .brand-mark {
  background: hsl(var(--sidebar-primary));
  color: hsl(var(--sidebar-primary-foreground));
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .sidebar-hello .mini-label,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .sidebar-section-label span,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .conversation-select svg,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .privacy-note svg,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .sidebar-state button {
  color: var(--room-primary);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .sidebar-create {
  background: hsl(var(--sidebar-primary));
  color: hsl(var(--sidebar-primary-foreground));
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .sidebar-create:hover {
  background: var(--room-primary-hover);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .sidebar-section-label,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .sidebar-state,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .privacy-note,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .signout-button,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .conversation-delete {
  color: var(--room-soft);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .conversation-select { color: hsl(var(--sidebar-foreground)); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .conversation-item:hover { background: hsl(var(--sidebar-accent) / .7); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .conversation-item.active { background: hsl(var(--sidebar-accent)); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .sidebar-bottom { border-color: hsl(var(--sidebar-border)); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .conversation-delete:hover,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .signout-button:hover { color: var(--room-danger); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-main { background: hsl(var(--background)); }
html[data-bot-theme='light'] .personal-main {
  background: radial-gradient(circle at 87% 1%, #e9f7f2 0, transparent 29rem), #ffffff;
}
html[data-bot-theme='dark'] .personal-main {
  background: radial-gradient(circle at 87% 0, #203e3c 0, transparent 29rem), #152329;
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-topbar,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-chat-head,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-composer-wrap { border-color: var(--room-line); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .topbar-crumb,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .topbar-private,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-heading p,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-footer,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .composer-under,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .message-by,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .thread-empty p,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .thread-state,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-chat-head .mini-label {
  color: var(--room-soft);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .topbar-crumb span { color: var(--room-accent); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .head-spark,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-mobile-button {
  color: var(--room-primary);
  background: var(--room-chip);
  border-color: var(--room-line);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .empty-avatar { background: var(--room-chip); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .thread-empty .mini-label { color: var(--room-primary); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .thread-state h2 { color: var(--room-ink); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .thread-state button {
  color: var(--room-primary);
  background: var(--room-chip);
  border-color: var(--room-line);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-bubble.waiting i { background: var(--room-soft); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .personal-skeleton span {
  background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--secondary)), hsl(var(--muted)));
}

/* Memory is a quiet second surface rather than a different visual system. */
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-panel {
  color: var(--room-ink);
  background: var(--room-alt);
  border-color: var(--room-line);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-top,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .bot-identity .mini-label,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .summary-head,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .summary-empty,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-explainer,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-foot,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .bot-identity p,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-edit > span { color: var(--room-soft); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-portrait { background: var(--room-chip); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .portrait-orbit { border-color: hsl(var(--ring) / .3); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-divider { background: var(--room-line); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-foot { border-color: var(--room-line); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-control-head svg,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .summary-empty svg { color: var(--room-accent); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-foot svg { color: var(--room-primary); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-summary {
  background: var(--room);
  border-color: var(--room-line);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-summary > p { color: var(--room-ink); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .identity-row button,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .summary-head button {
  color: var(--room-primary);
  background: var(--room);
  border-color: var(--room-line);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .identity-row button:hover,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .summary-head button:hover {
  background: var(--room-chip);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-switch { background: hsl(var(--input)); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-switch.on { background: var(--room-primary); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-switch span { background: var(--room-on-primary); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-switch:not(.on) span { background: var(--room); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .summary-empty button { color: var(--room-primary); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .clear-memory { color: var(--room-danger); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .inline-edit input,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-edit textarea {
  color: var(--room-ink);
  background: var(--room);
  border-color: hsl(var(--input));
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .inline-edit button,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-edit button {
  color: var(--room-on-primary);
  background: var(--room-primary);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .inline-edit button:last-child,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .memory-edit button:last-child {
  color: var(--room-soft);
  background: transparent;
}

/* Confirmation stays legible above both rooms. */
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .confirm-backdrop {
  background: #10282cbf;
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .confirm-dialog {
  color: var(--room-ink);
  background: var(--room);
  border: 1px solid var(--room-line);
  box-shadow: var(--room-shadow);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .confirm-x,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .confirm-dialog p { color: var(--room-soft); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .confirm-icon {
  color: var(--room-danger);
  background: var(--room-danger-bg);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .confirm-dialog .mini-label { color: var(--room-danger); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .confirm-actions button {
  color: var(--room-ink);
  background: var(--room-alt);
  border-color: var(--room-line);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .confirm-actions button:hover { background: var(--room-chip); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .confirm-actions .confirm-danger {
  color: #ffffff;
  background: #aa453b;
  border-color: #aa453b;
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .confirm-actions .confirm-danger:hover { background: #8e352e; }
html[data-bot-theme='dark'] .confirm-actions .confirm-danger { color: #231b1e; background: #ffa396; border-color: #ffa396; }
html[data-bot-theme='dark'] .confirm-actions .confirm-danger:hover { background: #ffb7aa; }

/* Auth controls follow the same themed room palette as the rest of the site. */
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .auth-page,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .auth-loading { background: hsl(var(--background)); color: var(--room-ink); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .auth-story {
  color: var(--room-ink);
  background: var(--room-alt);
  border-right: 1px solid var(--room-line);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .auth-story .brand { color: var(--room-ink); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .auth-story .brand-mark {
  color: var(--room-on-primary);
  background: var(--room-primary);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .auth-story-body .mini-label,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .auth-form-intro .mini-label { color: var(--room-primary); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .auth-story p,
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .auth-story-foot { color: var(--room-soft); }
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .auth-decoration {
  border-color: hsl(var(--ring) / .25);
  box-shadow: 0 0 0 55px hsl(var(--ring) / .04), 0 0 0 115px hsl(var(--ring) / .035);
}
html:is([data-bot-theme='light'], [data-bot-theme='dark']) .auth-back { color: var(--room-primary); }
html[data-bot-theme='dark'] .theme-picker select option { color: #e8f2ef; background: #20333a; }

/* Narrow headers: wrap the control onto its own line before buttons squeeze
   below touch-safe widths. This applies in Classic too. */
@media (max-width: 900px) {
  .bot-header { height: auto; min-height: 76px; flex-wrap: wrap; gap: 8px 16px; padding-top: 12px; padding-bottom: 12px; }
  .bot-header .header-meta { flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; }
}
@media (max-width: 620px) {
  .bot-header { min-height: 68px; }
  .bot-header .header-meta { flex-basis: 100%; justify-content: flex-start; gap: 7px; }
  .bot-header .header-meta .theme-picker { margin-left: auto; }
  .personal-topbar { height: auto; min-height: 61px; flex-wrap: wrap; gap: 5px 8px; padding-top: 9px; padding-bottom: 9px; }
  .personal-topbar .topbar-crumb { flex-basis: calc(100% - 50px); }
  .personal-topbar .theme-picker { margin-left: auto; }
  .auth-theme-tools { margin-bottom: 12px; }
}
@media (max-width: 380px) {
  .theme-picker { gap: 4px; padding: 4px 6px; }
  .theme-picker-label { display: none; }
  .theme-picker select { max-width: 84px; }
  .bot-header .header-meta { gap: 4px; }
  .bot-header .header-meta .theme-picker { margin-left: 0; }
}