/* Flat dark surfaces; contrast and spacing provide separation. */
body.dark-mode {
  color-scheme: dark;
  --conversation-surface: #1c1d20;
  --conversation-bubble: #303136;
  --conversation-ink: #ededf0;
  --conversation-muted: #adaeb8;
  --conversation-hover: #3c3d44;
  --dark-sidebar: #151619;
  --dark-panel: #26272c;
  --dark-line: rgba(255, 255, 255, 0.09);
  --dark-accent: #a8baff;
  --sidebar-bg: var(--dark-sidebar);
  --sidebar-text: #dedee5;
  --sidebar-hover: #24252a;
  --chat-bg: var(--conversation-surface);
  --message-bg: var(--dark-panel);
  --text-primary: var(--conversation-ink);
  --text-secondary: var(--conversation-muted);
  --border-color: transparent;
  background: var(--conversation-surface);
}

body.dark-mode .sidebar {
  background: var(--dark-sidebar);
  border-right: 0;
  box-shadow: none;
}

body.dark-mode .sidebar-header,
body.dark-mode .sidebar-footer {
  background: transparent;
  border-color: transparent;
}

body.dark-mode .sidebar-nav-item,
body.dark-mode .conversation-item {
  color: #c8c9d1;
  border-color: transparent;
  background: transparent;
}

body.dark-mode .sidebar-nav-item:hover,
body.dark-mode .conversation-item:hover {
  background: #24252a;
  color: #f5f5f7;
  transform: none;
}

body.dark-mode .sidebar-nav-item.active,
body.dark-mode .conversation-item.active {
  background: #2d2e35;
  border-color: transparent;
  color: #ffffff;
  transform: none;
}

body.dark-mode .sidebar-section-label,
body.dark-mode .conversation-meta,
body.dark-mode .user-email {
  color: #999ba7;
}

body.dark-mode .new-chat-btn {
  background: transparent;
  box-shadow: none;
}

body.dark-mode .new-chat-btn-inner {
  background: transparent;
  border: 0;
  color: #f5f5f7;
}

body.dark-mode .new-chat-btn:hover .new-chat-btn-inner {
  background: #303138;
}

body.dark-mode .new-chat-icon {
  color: #c0ccff;
  background: transparent;
  box-shadow: none;
}

body.dark-mode .chat-header {
  background: var(--conversation-surface);
  border-bottom-color: transparent;
  box-shadow: none;
}

body.dark-mode .menu-btn,
body.dark-mode #open-settings-btn,
body.dark-mode .memory-quick-btn,
body.dark-mode .credit-counter {
  color: #d6d7df;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body.dark-mode .menu-btn:hover,
body.dark-mode #open-settings-btn:hover,
body.dark-mode .memory-quick-btn:hover {
  background: var(--conversation-hover);
  color: #ffffff;
  transform: none;
}

body.dark-mode .main-content .textarea-container {
  background: #292a30;
  border: 0;
  box-shadow: none;
}

body.dark-mode .main-content .textarea-container:focus-within {
  background: #2d2e34;
  border-color: transparent;
  box-shadow: none;
}

/* Remove the legacy textarea frame inside the rounded composer. */
body.dark-mode .main-content #user-input,
body.dark-mode .main-content #user-input:focus {
  border: 0;
  outline: none;
  box-shadow: none;
}

body.dark-mode .main-content #user-input:focus-visible {
  outline: 1px solid #777b8d;
  outline-offset: -4px;
}

body.dark-mode .input-box,
body.dark-mode .input-toolbar,
body.dark-mode .model-indicator {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.dark-mode .model-indicator {
  color: var(--conversation-muted);
}

body.dark-mode #deepthink-control.deepthink-active .pill-button {
  border-color: transparent;
}

body.dark-mode .deepthink-popover::after {
  display: none;
}

body.dark-mode .composer-plus-btn,
body.dark-mode #deepthink-control .pill-button,
body.dark-mode #websearch-control .pill-button,
body.dark-mode .quick-model-trigger {
  background: transparent;
  color: #e5e5ed;
  border-color: transparent;
  box-shadow: none;
}

body.dark-mode .composer-plus-btn:hover,
body.dark-mode .quick-model-trigger:hover {
  background: #43454f;
}

body.dark-mode #websearch-control.websearch-active .pill-button {
  background: #3c4a78;
  border-color: transparent;
  color: #ffffff;
}

body.dark-mode .input-tools .submit-btn {
  background: #eeeeF4;
  color: #202126;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

body.dark-mode .input-tools .submit-btn:hover:not(:disabled) {
  background: #ffffff;
  transform: translateY(-1px);
}

body.dark-mode .input-tools .submit-btn:disabled {
  background: #41434c;
  color: #9698a5;
  opacity: 1;
}

body.dark-mode .composer-plus-menu,
body.dark-mode .quick-model-menu,
body.dark-mode .deepthink-popover {
  background: #26272d;
  border: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

body.dark-mode .composer-project-list,
body.dark-mode .composer-skills-list,
body.dark-mode .quick-model-effort-options button {
  background: #202126;
  border-color: transparent;
}

body.dark-mode .composer-plus-action:hover,
body.dark-mode .composer-plus-action:focus-visible,
body.dark-mode .composer-project-option:hover,
body.dark-mode .composer-project-option:focus-visible,
body.dark-mode .quick-model-option:hover,
body.dark-mode .quick-model-option:focus-visible,
body.dark-mode .quick-model-option.active {
  background: #383a44;
}

body.dark-mode .quick-model-option.active::after {
  color: var(--dark-accent);
}

body.dark-mode .welcome-container::before {
  display: none;
}

body.dark-mode .welcome-action,
body.dark-mode .prompt-suggestion {
  background: var(--dark-panel);
  border-color: transparent;
  color: #dedee6;
  box-shadow: none;
}

body.dark-mode .welcome-action:hover,
body.dark-mode .prompt-suggestion:hover {
  background: #30323a;
  border-color: transparent;
}

body.dark-mode .chat-disclaimer {
  color: #999ba7;
}

body.dark-mode #chat-container .message-text a {
  color: #b1c4ff;
}

body.dark-mode #chat-container .prose code:not(pre code) {
  background: #34353d;
  color: #e6ddfa;
}

body.dark-mode #chat-container .prose blockquote {
  background: #262831;
  border-left-color: #879bd7;
}

body.dark-mode :is(.sidebar, .chat-header, .input-container) button:focus-visible,
body.dark-mode #chat-container :is(.feedback-btn, .message-action-btn):focus-visible {
  outline: 2px solid var(--dark-accent);
  outline-offset: 3px;
}

body.dark-mode .chat-container,
body.dark-mode .conversation-list {
  scrollbar-color: #50525d transparent;
}