:root {
  color-scheme: light;
  --ink: var(--text);
}

:root[data-ui-mode="night"] {
  color-scheme: dark;
  --bg: #101216;
  --surface: rgba(19, 22, 27, 0.9);
  --surface-strong: #181c22;
  --surface-muted: #20252d;
  --surface-muted-strong: #2a303a;
  --line: rgba(232, 237, 243, 0.1);
  --line-strong: rgba(232, 237, 243, 0.2);
  --text: #eff3f7;
  --ink: #eff3f7;
  --muted: #a7b0bb;
  --accent: #8bd8c1;
  --accent-soft: rgba(139, 216, 193, 0.16);
  --success: #7dd7ae;
  --warn: #ff9b90;
  --code-bg: rgba(232, 237, 243, 0.1);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

:root[data-ui-mode="night"] body {
  background:
    radial-gradient(circle at top, rgba(70, 87, 101, 0.24), transparent 38%),
    radial-gradient(circle at 12% 18%, rgba(139, 216, 193, 0.14), transparent 24%),
    linear-gradient(180deg, #12151a 0%, #0f1115 48%, #090a0d 100%);
}

:root[data-ui-mode="night"] input,
:root[data-ui-mode="night"] select,
:root[data-ui-mode="night"] textarea {
  background: #151920;
  border-color: var(--line);
  color: var(--text);
}

:root[data-ui-mode="night"] input:focus,
:root[data-ui-mode="night"] select:focus,
:root[data-ui-mode="night"] textarea:focus {
  border-color: rgba(139, 216, 193, 0.48);
  box-shadow: 0 0 0 3px rgba(139, 216, 193, 0.13);
}

:root[data-ui-mode="night"] .header-btn,
:root[data-ui-mode="night"] .mode-link,
:root[data-ui-mode="night"] .status-pill,
:root[data-ui-mode="night"] .mobile-nav-btn,
:root[data-ui-mode="night"] .mobile-nav-link,
:root[data-ui-mode="night"] .settings-scope-switch,
:root[data-ui-mode="night"] .top-panel,
:root[data-ui-mode="night"] .mobile-screen-bar,
:root[data-ui-mode="night"] .mobile-screen-back,
:root[data-ui-mode="night"] .mobile-screen-action,
:root[data-ui-mode="night"] .quick-field,
:root[data-ui-mode="night"] .toggle-card,
:root[data-ui-mode="night"] .developer-instructions-actions > button,
:root[data-ui-mode="night"] .doc-link-button,
:root[data-ui-mode="night"] .working-artifact-download,
:root[data-ui-mode="night"] .sheet-section,
:root[data-ui-mode="night"] .account-usage-bucket,
:root[data-ui-mode="night"] .thread-card,
:root[data-ui-mode="night"] .message-command-shell,
:root[data-ui-mode="night"] .message-group-history-card,
:root[data-ui-mode="night"] .empty-state,
:root[data-ui-mode="night"] .modal-window,
:root[data-ui-mode="night"] .modal-option {
  background: rgba(27, 32, 39, 0.78);
}

:root[data-ui-mode="night"] .chat-frame[data-mobile-view="threads"] .mobile-threads-view,
:root[data-ui-mode="night"] .chat-frame[data-mobile-view="settings"] .mobile-settings-view,
:root[data-ui-mode="night"] .chat-frame[data-mobile-view="experiments"] .mobile-experiments-view {
  background: rgba(18, 21, 26, 0.98);
}

:root[data-ui-mode="night"] .primary,
:root[data-ui-mode="night"] #autoContinueBtn[aria-pressed="true"],
:root[data-ui-mode="night"] .settings-scope-btn.active {
  color: #071412;
}

:root[data-ui-mode="night"] .secondary,
:root[data-ui-mode="night"] .ghost {
  color: var(--text);
}

:root[data-ui-mode="night"] .banner,
:root[data-ui-mode="night"] .danger,
:root[data-ui-mode="night"] .primary[data-primary-action="interrupt"],
:root[data-ui-mode="night"] .message.error,
:root[data-ui-mode="night"] .message.user.status-failed,
:root[data-ui-mode="night"] .message.approval.status-declined {
  background: rgba(92, 38, 42, 0.62);
  border-color: rgba(255, 155, 144, 0.26);
  color: #ffd2cc;
}

:root[data-ui-mode="night"] .account-usage-window-danger,
:root[data-ui-mode="night"] .account-usage-summary-window-danger,
:root[data-ui-mode="night"] .account-usage-reached {
  background: rgba(92, 38, 42, 0.62);
  border-color: rgba(255, 155, 144, 0.26);
  color: #ffd2cc;
}

:root[data-ui-mode="night"] .state-confirmation {
  background: rgba(24, 65, 52, 0.96);
  border-color: rgba(125, 215, 174, 0.28);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
  color: #caf4df;
}

:root[data-ui-mode="night"] .settings-save-status {
  background: rgba(24, 65, 52, 0.72);
  border-color: rgba(125, 215, 174, 0.28);
  color: #caf4df;
}

:root[data-ui-mode="night"] .settings-save-status[data-status="saving"] {
  background: rgba(47, 45, 39, 0.74);
  border-color: rgba(255, 255, 255, 0.1);
  color: #c6beb1;
}

:root[data-ui-mode="night"] .settings-save-status[data-status="error"] {
  background: rgba(92, 38, 42, 0.62);
  border-color: rgba(255, 155, 144, 0.26);
  color: #ffd2cc;
}

:root[data-ui-mode="night"] .dot {
  background: #58616c;
}

:root[data-ui-mode="night"] .dot.live {
  box-shadow: 0 0 0 6px rgba(125, 215, 174, 0.14);
}

:root[data-ui-mode="night"] .message {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

:root[data-ui-mode="night"] .message.user {
  background: linear-gradient(180deg, #9fe2ce 0%, #72c7ad 100%);
  color: #071412;
}

:root[data-ui-mode="night"] .message.user .message-head {
  color: rgba(7, 20, 18, 0.68);
}

:root[data-ui-mode="night"] .message.user .message-time {
  color: rgba(7, 20, 18, 0.58);
}

:root[data-ui-mode="night"] .message.user.status-queued,
:root[data-ui-mode="night"] .message.user.status-submitting {
  background: rgba(42, 48, 58, 0.92);
  color: var(--text);
  border-color: var(--line-strong);
}

:root[data-ui-mode="night"] .message.system,
:root[data-ui-mode="night"] .message-attachment-image,
:root[data-ui-mode="night"] .message-attachment-file-icon {
  background: rgba(27, 32, 39, 0.62);
}

:root[data-ui-mode="night"] .message.approval.status-pending {
  background: rgba(81, 56, 28, 0.62);
}

:root[data-ui-mode="night"] .message.approval.status-accepted {
  background: rgba(28, 65, 51, 0.62);
}

:root[data-ui-mode="night"] .message-markdown blockquote {
  border-left-color: var(--line-strong);
}

:root[data-ui-mode="night"] .message-markdown code,
:root[data-ui-mode="night"] .message-markdown pre,
:root[data-ui-mode="night"] .message-markdown th {
  background: rgba(232, 237, 243, 0.09);
}

:root[data-ui-mode="night"] .message-markdown th,
:root[data-ui-mode="night"] .message-markdown td {
  border-color: var(--line-strong);
}

:root[data-ui-mode="night"] .message-markdown hr {
  background: var(--line-strong);
}

:root[data-ui-mode="night"] .message.user .message-markdown code,
:root[data-ui-mode="night"] .message.user .message-markdown pre,
:root[data-ui-mode="night"] .message.user .message-markdown th {
  background: rgba(7, 20, 18, 0.13);
}

:root[data-ui-mode="night"] .message.user .message-markdown th,
:root[data-ui-mode="night"] .message.user .message-markdown td {
  border-color: rgba(7, 20, 18, 0.2);
}

:root[data-ui-mode="night"] .message-markdown a.message-file-link {
  background: rgba(139, 216, 193, 0.14);
}

:root[data-ui-mode="night"] .composer-wrap {
  background: rgba(13, 15, 19, 0.92);
}

:root[data-ui-mode="night"] .composer {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

:root[data-ui-mode="night"] .attachment-file-icon {
  background:
    linear-gradient(135deg, rgba(239, 243, 247, 0.14), rgba(239, 243, 247, 0.04)),
    rgba(239, 243, 247, 0.06);
}

:root[data-ui-mode="night"] .attachment-remove,
:root[data-ui-mode="night"] .primary[data-primary-action="steer"] {
  background: #eff3f7;
  color: #11161c;
}

:root[data-ui-mode="night"] #voiceInputBtn[aria-pressed="true"] {
  background: rgba(255, 155, 144, 0.16);
  color: #ffd2cc;
}

:root[data-ui-mode="night"] .toggle-track::after {
  background: #eef3f7;
}

:root[data-ui-mode="night"] .thread-card.active {
  border-color: rgba(139, 216, 193, 0.38);
  background: rgba(32, 55, 48, 0.78);
  box-shadow: inset 0 0 0 1px rgba(139, 216, 193, 0.08);
}

:root[data-ui-mode="night"] .doc-link-button:hover {
  background: rgba(38, 45, 54, 0.92);
}

:root[data-ui-mode="night"] .doc-link-button:focus-visible {
  outline-color: rgba(139, 216, 193, 0.44);
}

:root[data-ui-mode="night"] .modal-overlay {
  background: rgba(2, 4, 7, 0.64);
}

@media (max-width: 720px) {
  :root[data-ui-mode="night"] .mobile-nav-btn,
  :root[data-ui-mode="night"] .mobile-nav-link {
    background: rgba(27, 32, 39, 0.78);
  }

  :root[data-ui-mode="night"] .chat-frame[data-mobile-view="threads"] .mobile-threads-view,
  :root[data-ui-mode="night"] .chat-frame[data-mobile-view="settings"] .mobile-settings-view,
  :root[data-ui-mode="night"] .chat-frame[data-mobile-view="experiments"] .mobile-experiments-view {
    background: rgba(18, 21, 26, 0.98);
  }

  :root[data-ui-mode="night"] .composer-wrap {
    background: linear-gradient(180deg, rgba(13, 15, 19, 0) 0%, rgba(13, 15, 19, 0.96) 22%);
  }

  :root[data-ui-mode="night"] #sendBtn[data-primary-action="steer"]::after {
    background: #11161c;
    box-shadow: 0 0 0 1px rgba(17, 22, 28, 0.96);
  }
}