/* Appearance is a member preference. The controls below only change presentation. */
:root { --faint: #85858f; }

.rail-tooltip {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  max-width: min(260px, calc(100vw - 80px));
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 8px 24px #0005;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Side drawers scroll normally without a permanent thumb crossing their content. */
.drawer:not(.page) { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.drawer:not(.page):has(:focus-visible) { scrollbar-color: var(--line) transparent; }
.drawer:not(.page)::-webkit-scrollbar { width: 8px; background: transparent; }
.drawer:not(.page)::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.drawer:not(.page)::-webkit-scrollbar-thumb:hover,
.drawer:not(.page):has(:focus-visible)::-webkit-scrollbar-thumb { background: var(--line); }
html[data-theme="daylight"] {
  color-scheme: light;
  --bg: #f7f8fa;
  --rail: #ffffff;
  --panel: #ffffff;
  --line: #c8ccd7;
  --line-soft: #dce0e8;
  --text: #17202f;
  --muted: #4b5668;
  --faint: #596477;
  --bubble: #ffffff;
  --bubble-user: #e8ebf8;
  --accent: #304ec7;
  --alert-info: #315ab7;
  --alert-warning: #8a5a00;
  --alert-critical: #ad292a;
  --danger: #ad292a;
  --ok: #176c45;
  --appearance-surface: #f0f2f6;
  --appearance-hover: #e4e8f0;
  --appearance-selected: #dce3f6;
  --appearance-drawer: #ffffff;
  --appearance-composer: #ffffff;
  --appearance-deep: #f8f9fb;
  --appearance-accent-tint: #e8edff;
  --appearance-danger-tint: #ffebeb;
  --appearance-ok-tint: #e5f4ec;
  --appearance-warning-tint: #fff2d5;
  --appearance-shadow: #26334a30;
  --appearance-button-text: #ffffff;
  --connection-divider: var(--line);
}
html[data-theme="contrast"] {
  color-scheme: dark;
  --bg: #000000;
  --rail: #080808;
  --panel: #080808;
  --line: #9fa9b7;
  --line-soft: #737d8b;
  --text: #ffffff;
  --muted: #d8e0ea;
  --faint: #b9c5d4;
  --bubble: #101820;
  --bubble-user: #1a2440;
  --accent: #ffe075;
  --alert-info: #85bcff;
  --alert-warning: #ffe075;
  --alert-critical: #ffaaa4;
  --danger: #ffaaa4;
  --ok: #9df5bd;
  --appearance-surface: #111821;
  --appearance-hover: #263241;
  --appearance-selected: #243552;
  --appearance-drawer: #050505;
  --appearance-composer: #101820;
  --appearance-deep: #050505;
  --appearance-accent-tint: #172849;
  --appearance-danger-tint: #381b1b;
  --appearance-ok-tint: #123521;
  --appearance-warning-tint: #382c10;
  --appearance-shadow: #000000b3;
  --appearance-button-text: #080808;
  --connection-divider: var(--line);
}

/* Legacy surfaces still carry literal Graphite colors in home.css. */
html[data-theme="daylight"], html[data-theme="contrast"] {
  --appearance-input: var(--appearance-surface);
}
html[data-theme="daylight"] button:not(.secondary):not(.icon):not(.quiet):not(.rail-link):not(.bot-item):not(.recent-item):not(.tab):not(.chip):not(.template):not(.group-item):not(.page-back):not(.alert-filter):not(.feedback-choice):not([role="radio"]),
html[data-theme="contrast"] button:not(.secondary):not(.icon):not(.quiet):not(.rail-link):not(.bot-item):not(.recent-item):not(.tab):not(.chip):not(.template):not(.group-item):not(.page-back):not(.alert-filter):not(.feedback-choice):not([role="radio"]) {
  color: var(--appearance-button-text);
}
html[data-theme="daylight"] .secondary, html[data-theme="contrast"] .secondary,
html[data-theme="daylight"] .icon:hover, html[data-theme="contrast"] .icon:hover,
html[data-theme="daylight"] .chip, html[data-theme="contrast"] .chip,
html[data-theme="daylight"] .template, html[data-theme="contrast"] .template,
html[data-theme="daylight"] .rail-link .glyph, html[data-theme="contrast"] .rail-link .glyph,
html[data-theme="daylight"] .step-mark, html[data-theme="contrast"] .step-mark {
  background: var(--appearance-surface);
  color: var(--text);
}
html[data-theme="daylight"] .secondary:hover, html[data-theme="contrast"] .secondary:hover,
html[data-theme="daylight"] .chip:hover, html[data-theme="contrast"] .chip:hover,
html[data-theme="daylight"] .rail-link:hover, html[data-theme="contrast"] .rail-link:hover,
html[data-theme="daylight"] .bot-item:hover, html[data-theme="contrast"] .bot-item:hover,
html[data-theme="daylight"] .recent-item:hover, html[data-theme="contrast"] .recent-item:hover,
html[data-theme="daylight"] .group-item:hover, html[data-theme="contrast"] .group-item:hover,
html[data-theme="daylight"] .tab:hover, html[data-theme="contrast"] .tab:hover {
  background: var(--appearance-hover);
}
html[data-theme="daylight"] .bot-item.active, html[data-theme="contrast"] .bot-item.active,
html[data-theme="daylight"] .recent-item.active, html[data-theme="contrast"] .recent-item.active,
html[data-theme="daylight"] .group-item.active, html[data-theme="contrast"] .group-item.active {
  background: var(--appearance-selected);
}
html[data-theme="daylight"] .search, html[data-theme="contrast"] .search,
html[data-theme="daylight"] .bot-item .bot-tag, html[data-theme="contrast"] .bot-item .bot-tag,
html[data-theme="daylight"] .icon-picker button, html[data-theme="contrast"] .icon-picker button,
html[data-theme="daylight"] .security-title-logo, html[data-theme="contrast"] .security-title-logo,
html[data-theme="daylight"] .company-logo-preview, html[data-theme="contrast"] .company-logo-preview,
html[data-theme="daylight"] code, html[data-theme="contrast"] code,
html[data-theme="daylight"] .drawer input, html[data-theme="contrast"] .drawer input,
html[data-theme="daylight"] .drawer select, html[data-theme="contrast"] .drawer select,
html[data-theme="daylight"] .drawer textarea, html[data-theme="contrast"] .drawer textarea,
html[data-theme="daylight"] .login-card input, html[data-theme="contrast"] .login-card input,
html[data-theme="daylight"] .security-card input, html[data-theme="contrast"] .security-card input,
html[data-theme="daylight"] .security-card select, html[data-theme="contrast"] .security-card select,
html[data-theme="daylight"] .provider-form, html[data-theme="contrast"] .provider-form,
html[data-theme="daylight"] .connection-actions, html[data-theme="contrast"] .connection-actions {
  background: var(--appearance-input);
  color: var(--text);
}
html[data-theme="daylight"] .composer, html[data-theme="contrast"] .composer { background: var(--appearance-composer); }
html[data-theme="daylight"] .drawer, html[data-theme="contrast"] .drawer,
html[data-theme="daylight"] .login-card, html[data-theme="contrast"] .login-card {
  background: var(--appearance-drawer);
  box-shadow: -12px 0 48px var(--appearance-shadow);
}
html[data-theme="daylight"] .chat-answer.md .md-table th, html[data-theme="contrast"] .chat-answer.md .md-table th,
html[data-theme="daylight"] .composer .icon, html[data-theme="contrast"] .composer .icon {
  background: var(--appearance-hover);
}
html[data-theme="daylight"] .chat-answer.md .md-table tr:nth-child(even) td,
html[data-theme="contrast"] .chat-answer.md .md-table tr:nth-child(even) td,
html[data-theme="daylight"] .device-facts, html[data-theme="contrast"] .device-facts,
html[data-theme="daylight"] .invitation-link, html[data-theme="contrast"] .invitation-link {
  background: var(--appearance-deep);
}
html[data-theme="daylight"] .notice, html[data-theme="contrast"] .notice,
html[data-theme="daylight"] .security-steps li.next a, html[data-theme="contrast"] .security-steps li.next a,
html[data-theme="daylight"] .icon-picker button[aria-checked="true"], html[data-theme="contrast"] .icon-picker button[aria-checked="true"] {
  background: var(--appearance-accent-tint);
}
html[data-theme="daylight"] .error, html[data-theme="contrast"] .error,
html[data-theme="daylight"] .security-message.error, html[data-theme="contrast"] .security-message.error {
  background: var(--appearance-danger-tint);
}
html[data-theme="daylight"] .security-message.ok, html[data-theme="contrast"] .security-message.ok,
html[data-theme="daylight"] .pill.ok, html[data-theme="contrast"] .pill.ok {
  background: var(--appearance-ok-tint);
}
html[data-theme="daylight"] .pill.wait, html[data-theme="contrast"] .pill.wait {
  background: var(--appearance-warning-tint);
  color: var(--text);
}
html[data-theme="daylight"] .screen .desktop-placeholder, html[data-theme="contrast"] .screen .desktop-placeholder {
  color: var(--muted);
}
html[data-theme="daylight"] #mobile-navigation, html[data-theme="contrast"] #mobile-navigation {
  background: var(--rail);
}

.appearance-settings { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 4px; }
.appearance-settings fieldset { border: 0; padding: 0; margin: 14px 0; }
.appearance-settings legend { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.appearance-options { display: flex; flex-wrap: wrap; gap: 8px; }
.appearance-options button { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); }
.appearance-options button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text); }
.appearance-preview {
  --preview-bg: #0f0f11; --preview-rail: #151517; --preview-card: #25252b;
  --preview-accent: #7c8cff; --preview-text: #e8e8ec;
  display: grid; grid-template-columns: 25% minmax(0, 1fr) 24%;
  height: 98px; margin: 16px 0 12px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--preview-bg); color: var(--preview-text);
}
.appearance-preview.daylight { --preview-bg: #f7f8fa; --preview-rail: #ffffff; --preview-card: #e8ebf8; --preview-accent: #304ec7; --preview-text: #17202f; }
.appearance-preview.contrast { --preview-bg: #000000; --preview-rail: #080808; --preview-card: #1a2440; --preview-accent: #ffe075; --preview-text: #ffffff; }
.appearance-preview.focus { grid-template-columns: 13% minmax(0, 1fr) 0; }
.appearance-preview > span { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 0; }
.appearance-preview .preview-rail { background: var(--preview-rail); border-right: 1px solid var(--preview-accent); }
.appearance-preview .preview-rail i { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--preview-accent); }
.appearance-preview .preview-chat { justify-content: center; }
.appearance-preview .preview-chat i { display: block; height: 12px; max-width: 70%; border-radius: 8px; background: var(--preview-card); }
.appearance-preview .preview-chat i:nth-child(2) { align-self: flex-end; width: 45%; }
.appearance-preview .preview-chat i:nth-child(3) { width: 60%; }
.appearance-preview .preview-panel { background: var(--preview-rail); border-left: 1px solid var(--preview-accent); }
.appearance-preview .preview-panel i { display: block; width: 100%; height: 45px; border: 1px solid var(--preview-accent); border-radius: 5px; }
.appearance-preview.focus .preview-panel { display: none; }
.appearance-preview.focus .preview-rail { align-items: center; padding: 10px 4px; }
.appearance-preview.focus .preview-rail i { width: 18px; height: 18px; }
.appearance-save { margin-top: 2px; }

@media (min-width: 701px) {
  html[data-layout="focus"] .app,
  html[data-layout="focus"] .app.panel-hidden,
  html[data-layout="focus"] .app.panel-shown { grid-template-columns: 68px minmax(0, 1fr); }
  html[data-layout="focus"] .app > .rail .rail-top,
  html[data-layout="focus"] .app > .rail .search,
  html[data-layout="focus"] .app > .rail .recent-chats { display: none; }
  html[data-layout="focus"] .app > .rail .bot-list { padding: 8px 6px; }
  html[data-layout="focus"] .app > .rail .bot-item { justify-content: center; align-items: center; min-height: 52px; padding: 6px; gap: 0; }
  html[data-layout="focus"] .app > .rail .bot-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-layout="focus"] .app > .rail .rail-bottom { padding: 8px 6px; }
  html[data-layout="focus"] .app > .rail .rail-link { justify-content: center; height: 48px; padding: 6px; font-size: 0; overflow: hidden; }
  html[data-layout="focus"] .app > .rail .rail-link .glyph { flex: none; }
  html[data-layout="focus"] .app > .rail .account-name { display: none; }
  html[data-layout="focus"] .app > .rail .rail-link.account .avatar { flex: none; }
  html[data-layout="focus"] .app .panel { display: none; }
  html[data-layout="focus"] .app.panel-shown .panel {
    display: flex; position: fixed; right: 0; top: 0; bottom: 0; z-index: 38;
    width: min(380px, calc(100vw - 68px)); box-shadow: -12px 0 48px #0006;
  }
  html[data-layout="focus"] #chat-history { max-width: none; }
  html[data-layout="focus"] .composer { width: calc(100% - 36px); margin: 0 auto 16px; }
  html[data-layout="focus"] .app #show-panel { display: inline-flex !important; }
  html[data-layout="focus"] .app.panel-shown #show-panel { display: none !important; }
  html[data-layout="focus"] .mobile-navigation-control { display: inline-grid; flex-shrink: 0; }
  html[data-layout="focus"] #mobile-navigation {
    margin: 0; width: min(340px, calc(100vw - 32px)); height: 100dvh;
  }
  html[data-layout="focus"] #mobile-navigation .rail { display: flex; height: 100%; }
  html[data-layout="focus"] #mobile-navigation .icon,
  html[data-layout="focus"] #mobile-navigation .rail-link,
  html[data-layout="focus"] #mobile-navigation .bot-item { min-height: 44px; }
}