/* ============================================================
   web-theme.css — light mode redesign
   Inspired by Claude (warm cream, organic) + DeepSeek (clean, minimal)
   Overrides all dark/gaming aesthetics from ai.css
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600&display=swap");

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Backgrounds — clean white like main marketing page */
  --bg-dark: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f5f5f5;
  --bg-sidebar: #ffffff;

  /* Text — match main page (#1a1a1a / #6b6b6b) */
  --text-primary: #1a1a1a;
  --text-secondary: #6b6b6b;
  --text-muted: #9c9c9c;

  /* Accent — black primary (match main page btn-primary) */
  --primary-light: #5a6af0;
  --primary-color: #1a1a1a;
  --secondary-color: #5a6af0;

  /* Borders — match main page (#e0e0e0 / #e8e8e8) */
  --border-color: #e0e0e0;
  --border-color-light: #e8e8e8;

  /* Status */
  --success-color: #2e9e5b;
  --warning-color: #c97a2a;
  --danger-color: #d94f4f;

  /* Remove all blur effects */
  --backdrop-blur: none;
}

/* ── Reset dark globals ─────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  background: var(--bg-dark) !important;
  color: var(--text-primary) !important;
  height: 100vh;
  overflow: hidden;
}

body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  background: var(--bg-dark) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.typing-mode,
body.fade-mode {
  background: var(--bg-dark) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Header — left sidebar ──────────────────────────────────── */
.header {
  background: #ffffff !important;
  border-right: 1px solid #e0e0e0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 100vh !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 12px 0 !important;
  padding-top: 70px !important;
  -webkit-app-region: no-drag !important;
  overflow: hidden !important;
  transition: width 0.3s ease !important;
}

.header.sidebar-open {
  width: 60px !important;
}

.title {
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}

.text-wrapper {
  display: none !important;
}

.text-wrapper span:first-child {
  color: var(--text-secondary) !important;
  font-weight: 400 !important;
}

.header-controls {
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  height: auto !important;
  padding-bottom: 0 !important;
}

.learner-ai-group {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.learner-ai-group small {
  font-size: 9px !important;
  font-weight: 500 !important;
  color: var(--primary-light) !important;
  letter-spacing: 0 !important;
}

/* ── Window controls ────────────────────────────────────────── */
.window-controls {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.window-control-btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  width: 42px !important;
  height: 36px !important;
  font-size: 13px !important;
  transition:
    background 0.12s,
    color 0.12s !important;
}

.window-control-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--text-primary) !important;
}

.close-btn:hover {
  background: #c42b1c !important;
  color: #fff !important;
}

/* Header icon buttons */
.history-menu-button {
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
  padding: 6px !important;
  border-radius: 7px !important;
  transition:
    background 0.12s,
    color 0.12s !important;
}

.history-menu-button:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--text-primary) !important;
}

.history-menu-button svg {
  fill: currentColor !important;
}

/* New chat button */
.new-chat-button {
  background: transparent !important;
  border: 1px solid var(--border-color-light) !important;
  color: var(--text-secondary) !important;
  border-radius: 7px !important;
  font-size: 17px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition:
    background 0.12s,
    color 0.12s !important;
}

.new-chat-button::after {
  display: none !important;
}

.new-chat-button:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--text-primary) !important;
  transform: none !important;
  box-shadow: none !important;
}

.settings-button {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--text-secondary) !important;
}
.settings-button:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--text-primary) !important;
  transform: none !important;
  box-shadow: none !important;
}

.settings-modal-content {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
.settings-modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
.settings-modal-header h2 {
  color: #18181b !important;
}
.settings-modal-close {
  color: #71717a !important;
}
.settings-modal-close:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #18181b !important;
}

.settings-nav {
  border-right-color: rgba(0, 0, 0, 0.06) !important;
}
.settings-nav-item {
  color: #71717a !important;
}
.settings-nav-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #3f3f46 !important;
}
.settings-nav-item.active {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #18181b !important;
}

.settings-panel-section + .settings-panel-section {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}
.settings-panel-section-title {
  color: #71717a !important;
}

.settings-theme-card {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  color: #71717a !important;
}
.settings-theme-card:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #3f3f46 !important;
}
.settings-theme-card.selected {
  background: rgba(79, 172, 254, 0.1) !important;
  border-color: rgba(79, 172, 254, 0.35) !important;
  color: #4facfe !important;
}

.settings-row + .settings-row {
  border-top-color: rgba(0, 0, 0, 0.04) !important;
}
.settings-row-label {
  color: #18181b !important;
}
.settings-row-desc {
  color: #71717a !important;
}
.settings-row-value {
  color: #52525b !important;
}
.settings-row-placeholder {
  color: #a1a1aa !important;
}

.settings-select {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #18181b !important;
}

.settings-btn-outline {
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #3f3f46 !important;
}
.settings-btn-outline:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

.settings-btn-danger-outline {
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #ef4444 !important;
}
.settings-btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}
.settings-btn-danger {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #ef4444 !important;
}
.settings-btn-danger:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

/* MCP connectors modal */
.mcp-intro {
  color: var(--text-secondary) !important;
}
.mcp-input {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #18181b !important;
}
.mcp-input:focus {
  border-color: rgba(90, 106, 240, 0.4) !important;
}
.mcp-input::placeholder {
  color: #a1a1aa !important;
}
.mcp-add-form {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}
.mcp-add-form .settings-btn {
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #3f3f46 !important;
}
.mcp-add-form .settings-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}
.mcp-add-form .settings-btn:disabled {
  color: #a1a1aa !important;
}
.mcp-status.success {
  color: var(--success-color) !important;
}

/* MCP connector directory (Browse tab) */
.mcp-tabs {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
.mcp-tab {
  color: #6b6b72 !important;
}
.mcp-tab:hover {
  color: #18181b !important;
}
.mcp-tab.active {
  color: #18181b !important;
  border-bottom-color: #18181b !important;
}
.mcp-tab-count {
  color: #6b6b72 !important;
  background: rgba(0, 0, 0, 0.06) !important;
}
.mcp-chip {
  color: #6b6b72 !important;
}
.mcp-chip:hover {
  color: #18181b !important;
  background: rgba(0, 0, 0, 0.05) !important;
}
.mcp-chip.active {
  color: #18181b !important;
  background: rgba(0, 0, 0, 0.07) !important;
}
.mcp-search {
  background: rgba(0, 0, 0, 0.03) !important;
}
.mcp-item + .mcp-item,
.mcp-server-item + .mcp-server-item {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}
.mcp-row:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}
.mcp-row-name {
  color: #18181b !important;
}
.mcp-row-desc,
.mcp-row-hint {
  color: #6b6b72 !important;
}
.mcp-row-hint a {
  color: #5a6af0 !important;
}
.mcp-row-badge {
  color: #9c9ca3 !important;
}
.mcp-row-btn {
  border-color: rgba(0, 0, 0, 0.14) !important;
  color: #3f3f46 !important;
}
.mcp-row-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.22) !important;
}
.mcp-row-btn.added {
  color: #15803d !important;
}
.mcp-row-expand {
  border-top-color: rgba(0, 0, 0, 0.07) !important;
}
.mcp-text-btn {
  color: #6b6b72 !important;
}
.mcp-text-btn:hover {
  color: #18181b !important;
}
.mcp-text-btn.danger:hover {
  color: #dc2626 !important;
}
.mcp-custom {
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}
.mcp-custom-toggle {
  color: #6b6b72 !important;
}
.mcp-custom-toggle:hover {
  color: #18181b !important;
}

/* Attachment menu (+ button popup) — match the light dropdowns */
.attachment-menu {
  background: #ffffff !important;
  border-color: var(--border-color-light) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12) !important;
}
.attachment-menu-item {
  color: var(--text-secondary) !important;
}
.attachment-menu-item:hover {
  background: #f5f3ef !important;
  color: var(--text-primary) !important;
}
.attachment-menu-item svg {
  color: var(--text-muted) !important;
}

.settings-toggle-slider {
  background: rgba(0, 0, 0, 0.12) !important;
}
.settings-toggle-slider::before {
  background: #a1a1aa !important;
}
.settings-toggle input:checked + .settings-toggle-slider::before {
  background: #4facfe !important;
}

/* ── Main container ─────────────────────────────────────────── */
.container {
  background: var(--bg-dark) !important;
}

.content {
  background: var(--bg-dark) !important;
  padding: 0 !important;
}

.feature-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 18px 12px !important;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.06) !important;
}

.feature-card:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,0.1) !important;
}

.feature-icon {
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto 10px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid !important;
}

.feature-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.feature-label {
  color: #1a1a1a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.feature-desc {
  color: #6b6b6b !important;
  font-size: 11px !important;
}

.welcome-header {
  padding: 48px 32px 16px !important;
}

.welcome-header h1 {
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-primary) !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
}

/* ── Messages ───────────────────────────────────────────────── */
.message {
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 720px !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 4px !important;
}

/* Wrapper around each message content */
.message-wrapper {
  border-left: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* User messages — flex column aligned right so footer sits under bubble */
.user-message .message-wrapper,
.message.user-message .message-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  background: transparent !important;
  border: none !important;
  padding: 18px 0 !important;
}

.user-message .message-header,
.message.user-message .message-header {
  align-self: flex-end !important;
}

.user-message .message-content,
.message.user-message .message-content {
  background: #e8e4dc !important;
  border-radius: 14px 14px 4px 14px !important;
  padding: 12px 16px !important;
  max-width: 88% !important;
  float: none !important;
  clear: none !important;
}

/* AI messages — clean, no bubble */
.ai-response .message-wrapper,
.message.ai-response .message-wrapper {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* Remove float clearfix — no longer needed */
.message::after {
  display: none !important;
}

.message-header {
  margin-bottom: 6px !important;
}

.message-type {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text-muted) !important;
}

.model-label {
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* Message text */
.message-content {
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  color: var(--text-primary) !important;
}

.message-content p {
  margin-bottom: 12px !important;
  margin-top: 0 !important;
  color: var(--text-primary) !important;
}

.message-content p:last-child {
  margin-bottom: 0 !important;
}

.message-content ul,
.message-content ol {
  padding-left: 22px !important;
  margin-bottom: 12px !important;
  margin-top: 4px !important;
}

.message-content li {
  margin-bottom: 4px !important;
  color: var(--text-primary) !important;
  line-height: 1.65 !important;
}

.message-content li > ul,
.message-content li > ol {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.message-content hr {
  border: none !important;
  border-top: 1px solid var(--border-color-light) !important;
  margin: 16px 0 !important;
}

.message-content blockquote {
  border-left: 3px solid var(--primary-light) !important;
  margin: 8px 0 !important;
  padding: 4px 12px !important;
  color: var(--text-secondary) !important;
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4 {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 8px !important;
  margin-top: 18px !important;
}

.message-content strong {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  display: inline !important;
}

.message-content a {
  color: var(--primary-light) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Inline code */
.message-content code {
  background: #eeece8 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
  font-size: 13px !important;
  color: #c23b22 !important;
  font-family: "Fira Code", "Menlo", "Consolas", monospace !important;
}

/* Code blocks */
.message-content pre {
  background: #f0ede8 !important;
  border: 1px solid var(--border-color-light) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  overflow-x: auto !important;
  margin: 10px 0 !important;
}

.message-content pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #3d2b1f !important;
}

/* Streaming progress bar */
.message.streaming::after {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--primary-light), transparent) !important;
  opacity: 0.5 !important;
}

/* Message footer & edit */
.message-footer {
  margin-top: 4px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* Edit button sits bottom-right under the user bubble */
.user-message .message-footer,
.message.user-message .message-footer {
  justify-content: flex-end !important;
}

.message-edit-btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  opacity: 1 !important;
  transition: color 0.12s !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

.message:hover .message-edit-btn:hover {
  color: var(--text-primary) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

/* ── Edit mode toolbar ───────────────────────────────────────── */
.message-edit-container {
  width: 100% !important;
}

.message-edit-input {
  width: 100% !important;
  min-height: 80px !important;
  max-height: 300px !important;
  resize: vertical !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  border: 1px solid rgba(90, 106, 240, 0.3) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--text-primary) !important;
  outline: none !important;
  margin-bottom: 8px !important;
  box-sizing: border-box !important;
}

.message-edit-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.message-edit-toolbar .ai-dropdown-container {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.message-edit-input {
  background: #fff !important;
  border: 1px solid rgba(90, 106, 240, 0.3) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
}

.edit-save-btn {
  background: var(--primary-light) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
}

.edit-cancel-btn {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color-light) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
}

/* Stopped message */
.message.stopped {
  border-left: 2px solid rgba(217, 79, 79, 0.35) !important;
  padding-left: 12px !important;
}

.message-stopped {
  color: rgba(217, 79, 79, 0.8) !important;
  font-size: 11px !important;
  background: transparent !important;
}

/* ── Input area ─────────────────────────────────────────────── */
.chat-input-container {
  background: var(--bg-dark) !important;
  border-top: none !important;
  padding: 12px 24px 18px !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Peak pricing notice above chat input (DeepSeek API peak hours) */
.peak-pricing-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px 14px;
  background: rgba(201, 122, 42, 0.1) !important;
  border: 1px solid rgba(201, 122, 42, 0.35) !important;
  border-radius: 10px !important;
  color: var(--warning-color) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.peak-pricing-banner svg {
  flex-shrink: 0;
}

.peak-pricing-banner-upcoming {
  background: rgba(90, 106, 240, 0.08) !important;
  border-color: rgba(90, 106, 240, 0.35) !important;
  color: var(--secondary-color) !important;
}

.chat-input-wrapper {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  transition:
    border-color 0.15s,
    box-shadow 0.15s !important;
}

.chat-input-wrapper:focus-within {
  border-color: rgba(90, 106, 240, 0.35) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08) !important;
}

#chatInput {
  background: transparent !important;
  color: var(--text-primary) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  caret-color: var(--primary-light) !important;
  font-family:
    "Inter",
    -apple-system,
    sans-serif !important;
}

#chatInput::placeholder {
  color: var(--text-muted) !important;
}

.ai_chat_box_row {
  padding: 6px 8px !important;
}

/* Send button */
.send-button {
  background: #1a1a1a !important;
  border: none !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  color: #fff !important;
  box-shadow: none !important;
  transition: background 0.12s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.send-button:hover:not(:disabled) {
  background: #333 !important;
  box-shadow: none !important;
  transform: none !important;
}

.send-button:disabled {
  background: #d4d2ce !important;
  color: #a8a5a0 !important;
}

.send-button svg {
  width: 14px !important;
  height: 14px !important;
}

.spinner {
  border-color: rgba(255, 255, 255, 0.3) !important;
  border-top-color: #fff !important;
}

/* Attachment button */
.attachment-button {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-radius: 6px !important;
  transition:
    color 0.12s,
    background 0.12s !important;
}

.attachment-button:hover {
  color: var(--text-secondary) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Context+ toggle */
.context-plus-toggle {
  background: transparent !important;
  border: 1px solid var(--border-color-light) !important;
  border-radius: 5px !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  transition: all 0.12s !important;
}

.context-plus-toggle:hover,
.context-plus-toggle.active {
  background: rgba(90, 106, 240, 0.06) !important;
  border-color: rgba(90, 106, 240, 0.25) !important;
  color: var(--primary-light) !important;
}

/* Sign in button */
.sign-in-button {
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  height: 32px !important;
  line-height: 20px !important;
  transition: background 0.12s !important;
  box-shadow: none !important;
}

.sign-in-button:hover {
  background: #333 !important;
}

/* ── History / sidebar panel ────────────────────────────────── */
.history-panel {
  background: #eeece8 !important;
  border-right: 1px solid var(--border-color) !important;
  border-left: none !important;
  box-shadow: none !important;
  width: 260px !important;
  left: -260px !important;
  pointer-events: none !important;
}

.history-panel.show {
  left: 60px !important;
  pointer-events: auto !important;
}

.history-header {
  background: #eeece8 !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 14px 16px !important;
}

.history-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

.close-history {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: color 0.12s !important;
}

.close-history:hover {
  color: var(--text-primary) !important;
}

.history-search {
  padding: 10px 12px !important;
}

.search-input {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid var(--border-color-light) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  font-size: 13px !important;
  padding: 7px 11px !important;
  box-shadow: none !important;
  transition:
    border-color 0.12s,
    background 0.12s !important;
}

.search-input:focus {
  background: #fff !important;
  border-color: rgba(90, 106, 240, 0.3) !important;
  outline: none !important;
  box-shadow: none !important;
}

.search-input::placeholder {
  color: var(--text-muted) !important;
}

/* Search field wrapper: icon + clear button (light theme) */
.search-field-icon {
  color: var(--text-muted) !important;
}

.history-search .search-input {
  padding-left: 32px !important;
  padding-right: 30px !important;
}

.search-clear-btn {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--text-muted) !important;
}

.search-clear-btn:hover {
  background: rgba(0, 0, 0, 0.15) !important;
  color: var(--text-primary) !important;
}

/* Search modal (light theme) */
.search-modal-overlay {
  background: rgba(60, 55, 48, 0.28) !important;
}

.search-modal {
  background: #ffffff !important;
  border: 1px solid var(--border-color-light) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16) !important;
}

.search-modal .history-search {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--border-color-light) !important;
}

.search-modal .search-input {
  font-size: 15px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.search-modal .search-input:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.search-modal .search-clear-btn {
  background: transparent !important;
}

/* Claude-style search results (light theme) */
.search-results-list .topic-header {
  background: transparent !important;
}

.search-results-list .topic-header:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

.search-result-icon {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--text-secondary) !important;
}

.search-result-title {
  color: var(--text-primary) !important;
}

.search-result-date {
  color: var(--text-muted) !important;
}

.search-result-snippet {
  color: var(--text-secondary) !important;
}

.search-result-snippet mark {
  color: var(--text-primary) !important;
}

/* Topics in sidebar */
.topic-header {
  background: transparent !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  transition: background 0.12s !important;
}

.topic-header:hover,
.topic-header.expanded {
  background: rgba(0, 0, 0, 0.05) !important;
}

.topic-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}

.subtopic-list {
  padding-left: 12px !important;
}

.subtopic-item {
  background: transparent !important;
  border-radius: 5px !important;
  margin: 1px 0 !important;
  transition: background 0.12s !important;
}

.subtopic-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  transform: none !important;
}

.subtopic-item.active,
.subtopic-item.selected {
  background: rgba(90, 106, 240, 0.08) !important;
}

.subtopic-title {
  font-size: 12.5px !important;
  color: var(--text-secondary) !important;
  line-height: 1.4 !important;
}

.subtopic-item:hover .subtopic-title,
.subtopic-item.active .subtopic-title {
  color: var(--text-primary) !important;
}

.subtopic-count {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--text-muted) !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 10px !important;
}

/* ── File / content blocks ──────────────────────────────────── */
.content-block {
  background: #ffffff !important;
  border: 1px solid var(--border-color-light) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.content-block.file-block:hover {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.block-header {
  background: #faf9f7 !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 10px 14px !important;
}

.block-header:hover {
  background: #f5f3ef !important;
}

.block-header.collapsed {
  border-radius: 10px !important;
  border-bottom: none !important;
}

.block-icon {
  background: #f0ede8 !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
}

.block-icon svg,
.block-icon span {
  color: var(--text-secondary) !important;
}

.filename {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  font-family: "Fira Code", "Menlo", monospace !important;
}

.block-meta span {
  background: #f0ede8 !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
}

/* Block buttons */
.block-btn {
  background: #f5f3ef !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color-light) !important;
  border-radius: 5px !important;
  font-size: 11.5px !important;
  transition:
    background 0.12s,
    color 0.12s !important;
  box-shadow: none !important;
}

.block-btn:hover {
  background: #eeeae4 !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.block-btn.primary {
  background: var(--primary-light) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.block-btn.primary:hover {
  background: #4757e8 !important;
  box-shadow: none !important;
}

.block-btn.danger {
  background: transparent !important;
  color: var(--danger-color) !important;
  border-color: rgba(217, 79, 79, 0.2) !important;
}

.block-btn.danger:hover {
  background: rgba(217, 79, 79, 0.07) !important;
}

/* ── Code view ──────────────────────────────────────────────── */
.code-view,
.code-view-enhanced {
  background: #f7f5f1 !important;
  border-top: 1px solid var(--border-color) !important;
}

.code-view-enhanced code,
.code-view-enhanced pre,
.code-view code {
  color: #2d2826 !important;
  font-family: "Fira Code", "Menlo", "Consolas", monospace !important;
  font-size: 13px !important;
}

/* VS code token overrides for light mode */
.token.comment {
  color: #6e7f5e !important;
}
.token.string {
  color: #b94f25 !important;
}
.token.keyword {
  color: #5a6af0 !important;
}
.token.function {
  color: #8b4aba !important;
}
.token.number {
  color: #217a6f !important;
}
.token.class-name {
  color: #1d7a6f !important;
}
.token.operator {
  color: #a0522d !important;
}
.token.punctuation {
  color: #6b6868 !important;
}

/* Code line numbers */
.code-line::before {
  color: #b0ada8 !important;
}

/* Fold */
.fold-header {
  background: #f2efe9 !important;
  border-left-color: #d0ccc5 !important;
}

.fold-header:hover {
  background: #ebe8e2 !important;
  border-left-color: var(--primary-light) !important;
}

/* Highlight.js override for light */
.hljs {
  background: #f7f5f1 !important;
  color: #2d2826 !important;
}

/* ── AI model dropdown ──────────────────────────────────────── */
.ai-dropdown-button {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid var(--border-color-light) !important;
  border-radius: 7px !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  transition:
    background 0.12s,
    border-color 0.12s !important;
  box-shadow: none !important;
}

.ai-dropdown-button:hover {
  background: rgba(0, 0, 0, 0.07) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.ai-dropdown-button.active {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(90, 106, 240, 0.25) !important;
  color: var(--text-primary) !important;
}

.ai-dropdown-menu {
  background: #ffffff !important;
  border: 1px solid var(--border-color-light) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12) !important;
}

.ai-category-title {
  color: var(--text-muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  padding: 10px 14px 4px !important;
}

.ai-model-item {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  margin: 1px 4px !important;
  transition:
    background 0.1s,
    color 0.1s !important;
}

.ai-model-item:hover {
  background: #f5f3ef !important;
  color: var(--text-primary) !important;
}

.ai-model-item.selected {
  background: rgba(90, 106, 240, 0.07) !important;
  color: var(--primary-light) !important;
}

.check {
  color: var(--primary-light) !important;
}

/* ── Thinking / loading dots ────────────────────────────────── */
.thinking {
  max-width: 720px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 14px 0 !important;
}

.thinking {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 0 !important;
  max-width: 720px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.think-spinner {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(167, 139, 250, 0.25) !important;
  border-top-color: var(--primary-light, #a78bfa) !important;
  border-radius: 50% !important;
  animation: thinkSpin 0.7s linear infinite !important;
  flex-shrink: 0 !important;
}

@keyframes thinkSpin {
  to { transform: rotate(360deg); }
}

.think-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--primary-light, #a78bfa) !important;
  letter-spacing: 0.01em !important;
}

/* ── Clarify card ───────────────────────────────────────────── */
.clarify-card {
  background: #ffffff !important;
  border: 1px solid var(--border-color-light) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05) !important;
  max-width: 560px !important;
}

.clarify-progress {
  color: var(--text-muted) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.clarify-question p {
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.option-btn {
  background: #faf9f7 !important;
  border: 1px solid var(--border-color-light) !important;
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  text-align: left !important;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s !important;
}

.option-btn:hover {
  background: #f0ede8 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--text-primary) !important;
}

.option-btn.selected {
  background: rgba(90, 106, 240, 0.06) !important;
  border-color: rgba(90, 106, 240, 0.3) !important;
  color: var(--primary-light) !important;
}

.option-num {
  background: #f0ede8 !important;
  border: 1px solid var(--border-color-light) !important;
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 4px !important;
}

.option-btn.selected .option-num {
  background: var(--primary-light) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-submit {
  background: var(--primary-light) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.12s !important;
}

.btn-submit:hover {
  background: #4757e8 !important;
}

.btn-skip,
.btn-dismiss {
  background: transparent !important;
  border: 1px solid var(--border-color-light) !important;
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition:
    background 0.12s,
    color 0.12s !important;
}

.btn-skip:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-primary) !important;
}

.btn-dismiss:hover {
  background: rgba(217, 79, 79, 0.07) !important;
  color: var(--danger-color) !important;
  border-color: rgba(217, 79, 79, 0.2) !important;
}

/* ── Live preview modal ─────────────────────────────────────── */
.live-preview-modal {
  background: rgba(0, 0, 0, 0.5) !important;
}

.live-preview-container {
  background: #ffffff !important;
  border: 1px solid var(--border-color-light) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

.live-preview-header {
  background: #faf9f7 !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.preview-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--bg-dark) !important;
}

.preview-btn {
  background: transparent !important;
  border: 1px solid var(--border-color-light) !important;
  border-radius: 6px !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  transition: background 0.12s !important;
}

.preview-btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--text-primary) !important;
}

.preview-btn.close {
  color: var(--danger-color) !important;
  border-color: rgba(217, 79, 79, 0.2) !important;
}

.preview-btn.close:hover {
  background: rgba(217, 79, 79, 0.07) !important;
}

/* ── Streaming states ───────────────────────────────────────── */
.streaming-badge {
  background: #f0ede8 !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-color) !important;
  font-size: 10px !important;
  border-radius: 4px !important;
}

.streaming-indicator {
  color: var(--primary-light) !important;
}

/* File update badges */
.file-block.updated-file,
.file-block.file-updated {
  border-left: 3px solid var(--primary-light) !important;
}

.update-badge {
  background: rgba(90, 106, 240, 0.08) !important;
  color: var(--primary-light) !important;
  border: 1px solid rgba(90, 106, 240, 0.2) !important;
  border-radius: 4px !important;
  font-size: 11px !important;
}

/* ── Scrollbars ─────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12) !important;
  border-radius: 99px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* ── Selection ──────────────────────────────────────────────── */
::selection {
  background: rgba(90, 106, 240, 0.15) !important;
  color: var(--text-primary) !important;
}

/* ── Focus rings ────────────────────────────────────────────── */
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none !important;
}

/* ── Misc fixes ─────────────────────────────────────────────── */

/* Kill all gradient text anywhere */
* {
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
}

/* Re-allow specific white text on colored buttons */
.send-button,
.btn-submit,
.block-btn.primary,
.sign-in-button {
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

/* Token limit indicator */
#token-limit-indicator {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}

/* Hoverable segments in messages */
.hoverable-segment:hover {
  background: rgba(90, 106, 240, 0.07) !important;
  border-radius: 3px !important;
}

/* Platform Mac window controls stay circular colored */
.platform-mac .close-btn {
  background: linear-gradient(#ff6058, #ff4c4c) !important;
}
.platform-mac .minimize-btn {
  background: linear-gradient(#ffbd2e, #ffab00) !important;
}
.platform-mac .maximize-btn {
  background: linear-gradient(#28ca42, #1ac033) !important;
}
.platform-mac .window-control-btn {
  color: transparent !important;
}

/* Loading code view message */
.code-view-enhanced.loading::after {
  background: rgba(247, 245, 241, 0.95) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color-light) !important;
}

/* ── Copy button ────────────────────────────────────────────── */
.copy-btn {
  color: var(--text-muted) !important;
}

.copy-btn:hover {
  color: var(--text-secondary) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

/* ── Clarify card — fixed above input ───────────────────────── */
.clarify-card {
  position: fixed !important;
  bottom: 100px !important; /* sits above the input bar */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 48px) !important;
  max-width: 720px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  z-index: 100 !important;
  background: #ffffff !important;
  border: 1px solid var(--border-color-light) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  margin: 0 !important;
  animation: clarifySlideUp 0.2s ease-out !important;
}

/* When the preview panel is open (right side), constrain clarify card to the chat panel */
#workspace.preview-active .clarify-card {
  left: 21% !important;
  max-width: calc(42% - 48px) !important;
}

@keyframes clarifySlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Minimized: becomes a small pill in the bottom-right corner */
.clarify-card.minimized {
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  left: auto !important;
  right: 24px !important;
  transform: none !important;
  bottom: 100px !important;
  padding: 8px 14px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

.clarify-card.minimized .clarify-question,
.clarify-card.minimized .clarify-actions {
  display: none !important;
}

.clarify-card.minimized .clarify-header {
  margin-bottom: 0 !important;
}

.clarify-card.minimized .clarify-progress {
  margin-bottom: 0 !important;
  font-size: 12px !important;
}

.clarify-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

.clarify-minimize-btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
  transition:
    background 0.12s,
    color 0.12s !important;
}

.clarify-minimize-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--text-primary) !important;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Message side margins so text isn't flush with screen edge */
  .message,
  .thinking,
  .thinking-word-overlay {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .chat-input-container {
    padding: 8px 12px 14px !important;
  }

  /* Shrink AI dropdown button text on small screens */
  .ai-dropdown-button {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* User bubble shouldn't overflow on mobile */
  .user-message .message-content,
  .message.user-message .message-content {
    max-width: 100% !important;
  }
}

/* AI warning / disclaimer — visible on light background */
.ai-warning {
  color: #777 !important;
  font-size: 11px !important;
}

/* AI message control buttons — visible on light background */
.ai-message-controls button {
  color: #666 !important;
}

/* AI message control row spacing */
.ai-message-controls {
  gap: 4px !important;
}

/* Tighter spacing between messages */
.message {
  margin-bottom: 8px !important;
  padding: 8px 16px !important;
}

.message-wrapper,
.user-message .message-wrapper,
.message.user-message .message-wrapper {
  padding: 8px 0 !important;
}

/* ── PPTX preview panel: force light background ─────────────── */
#preview-panel,
#preview-panel > div:first-child {
  background: #e8eaed !important;
}

/* ── Mobile: history panel becomes a slide-in drawer ────────── */
/* Base/desktop rules above pin the panel next to the 60px sidebar;
   on mobile that left it cut off-screen (left:60px + translateX(-100%)).
   Drawer is ~88% wide (not full-screen) so the dimmed strip on the
   right stays tappable — the existing outside-click handler closes it. */
@media (max-width: 768px) {
  .history-panel {
    width: min(88%, 340px) !important;
    left: 0 !important;
    border-right: none !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 2002 !important;
  }

  .history-panel.show {
    left: 0 !important;
    transform: translateX(0) !important;
    /* Dim the rest of the screen behind the open drawer */
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45) !important;
  }

  /* Finger-friendly close button (was ~18px glyph with 4px padding) */
  .close-history {
    font-size: 26px !important;
    padding: 8px 12px !important;
  }

  /* Search button visibility is now handled by the top-actions
     consolidation in ai.css (all seven buttons collapse into the
     "☰" menu on mobile; search lives in that panel). */

  /* ── Mobile: history button unreachable fix ─────────────────────
     The button lives in .header, a 0-width collapsed sidebar that
     nothing ever opens on web, so it sat cut off the left edge and
     could not be tapped. Float it as a chip on the left edge instead
     (mirrors the msg-nav toggle on the right edge). */
  .header {
    overflow: visible !important;
  }

  .header-controls {
    position: fixed !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    z-index: 1500 !important;
    gap: 10px !important;
  }

  .header-controls .window-controls {
    display: none !important;
  }

  .header-controls .history-menu-button {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    color: #555555 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ── Touch devices: always show the row delete × ──────────────
   Base ai.css keeps it at opacity:0 until .topic-item:hover. On iOS a
   hover rule that reveals a child makes the FIRST tap only trigger the
   hover (click is swallowed) — forcing users to tap a chat twice. */
@media (hover: none) {
  .delete-conv-btn,
  .delete-subtopic-btn {
    opacity: 0.6 !important;
  }
}

/* ── Scheduled-task card (light) — replaces the dark brain-approval look ─── */
.schedule-task-card {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  color: #1a1a1a !important;
}
.schedule-task-card .brain-approval-title {
  color: #5a6af0 !important;
}
.schedule-task-card .schedule-task-title {
  color: #1a1a1a !important;
}
.schedule-task-card .schedule-task-cron {
  color: #6b6b6b !important;
}
.schedule-task-card .schedule-task-tz {
  color: #9c9c9c !important;
}
.schedule-task-card .schedule-task-prompt {
  background: #f5f5f5 !important;
  border-color: #e8e8e8 !important;
  color: #3f3f46 !important;
}
.schedule-task-card .brain-approve-btn {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}
.schedule-task-card .brain-approve-btn:hover {
  background: #333333 !important;
}
.schedule-task-card .brain-deny-btn {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  color: #6b6b6b !important;
  border-radius: 8px !important;
}
.schedule-task-card .brain-deny-btn:hover {
  background: #f5f5f5 !important;
  color: #1a1a1a !important;
}
.schedule-task-card .schedule-upgrade-link {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

/* ── Settings: Scheduled panel rows (light) ───────────────────────────────── */
.settings-sched-row {
  border-color: #e0e0e0 !important;
  background: #ffffff !important;
}
.settings-sched-title {
  color: #1a1a1a !important;
}
.settings-sched-row .settings-btn {
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #3f3f46 !important;
  background: transparent !important;
  width: auto !important;
  margin-top: 0 !important;
}
.settings-sched-row .settings-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

.schedule-task-card .schedule-task-precheck {
  color: #5a6af0 !important;
}