/* =====================================================================
   LIGHT THEME FIXES
   Loaded LAST (after every other stylesheet). The base stylesheets were
   written dark-first with many hard-coded white / black colors, which
   made text, icons and buttons invisible on the light background.
   Everything here is scoped to .theme-light so dark mode is untouched.
   ===================================================================== */

.theme-light {
  --app-bg: #f7f7f5;
  --app-surface: #ffffff;
  --app-surface-2: #efefed;
  --app-border: rgba(0,0,0,.12);
  --app-text: #141414;
  --app-text-dim: rgba(20,20,20,.62);

  --chat-accent: #1a73e8;
  --chat-accent-soft: rgba(26,115,232,.10);
  --chat-bg: #f7f7f5;
  --chat-surface: rgba(0,0,0,.035);
  --chat-surface-hover: rgba(0,0,0,.07);
  --chat-border: rgba(0,0,0,.12);
  --chat-text: rgba(20,20,20,.92);
  --chat-text-dim: rgba(20,20,20,.62);
  --chat-text-faint: rgba(20,20,20,.42);
  --chat-danger: #d93025;
  --chat-warn: #b26a00;
  --chat-success: #0b8a5f;
}

/* ---------- Page / hero ---------- */
.theme-light body,
body.theme-light,
.theme-light .hero { background: var(--app-bg); color: var(--app-text); }

/* Greeting ("Good Morning, ...") */
.theme-light .ai-badge { color: #141414; }

/* ---------- Search bar ---------- */
.theme-light .search-bar {
  background: #ffffff;
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.theme-light .search-bar:hover { background: #fafafa; }
.theme-light .input-dock.file-drag .search-bar {
  background: #eaf2ff;
  border-color: rgba(26,115,232,.6);
}

.theme-light .typed-text {
  color: #141414;
  caret-color: #1a73e8;
}
.theme-light .typed-text::placeholder { color: rgba(20,20,20,.45); }

/* Chat / Photos segmented toggle */
.theme-light .mode-toggle { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); }
.theme-light .mode-toggle-btn { color: rgba(20,20,20,.62); }
.theme-light .mode-toggle-btn.active { color: #1a73e8; }
.theme-light .mode-toggle-btn:not(.active):hover { color: #141414; }
.theme-light .mode-toggle-thumb {
  background: rgba(26,115,232,.12);
  border-color: rgba(26,115,232,.4);
}

/* Round icon buttons inside the bar */
.theme-light .plus-btn,
.theme-light .mic-btn,
.theme-light .image-gen-btn,
.theme-light .dropdown-toggle-btn { background: rgba(0,0,0,.06); }
.theme-light .plus-btn:hover { background: rgba(26,115,232,.14); }
.theme-light .mic-btn:hover { background: rgba(26,115,232,.14); }
.theme-light .image-gen-btn:hover { background: rgba(0,150,120,.14); }
.theme-light .dropdown-toggle-btn:hover { background: rgba(0,0,0,.11); }

.theme-light .plus-btn svg { stroke: #333; }
.theme-light .mic-btn svg,
.theme-light .image-gen-btn svg { stroke: rgba(20,20,20,.75); }
.theme-light .dropdown-toggle-btn svg { fill: rgba(20,20,20,.7); }
.theme-light .dropdown-toggle-btn[aria-expanded="true"] svg { fill: #1a73e8; }
.theme-light .mic-btn.listening svg { stroke: #d93025; }
.theme-light .image-gen-btn.loading { background: rgba(0,150,120,.14); }
.theme-light .image-gen-btn.loading svg { stroke: #0b8a5f; }

.theme-light .send-btn { background: rgba(26,115,232,.12); }
.theme-light .send-btn:hover { background: rgba(26,115,232,.22); }
.theme-light .send-btn svg { stroke: #1a73e8; }
.theme-light .send-btn.loading { background: rgba(0,0,0,.06); }
.theme-light .send-btn.stop-mode { background: rgba(217,48,37,.12); }
.theme-light .send-btn.stop-mode svg { stroke: #d93025; fill: #d93025; }
.theme-light .send-btn.stop-mode:hover { background: rgba(217,48,37,.2); }

/* Attached file chip */
.theme-light .plus-btn.has-file { background: rgba(11,138,95,.14); }
.theme-light .file-badge-remove { color: #0b8a5f; }
.theme-light .file-preview-image { border-color: rgba(0,0,0,.14); }

/* Tooltips keep a dark pill with white text (readable on light too) */
.theme-light .mode-toggle-btn::after,
.theme-light .plus-btn::after,
.theme-light .send-btn::after,
.theme-light .mic-btn::after,
.theme-light .image-gen-btn::after,
.theme-light .theme-toggle-btn::after,
.theme-light .new-chat-btn::after {
  background: rgba(30,30,30,.92);
  color: #fff;
  border-color: transparent;
}

/* Dropdown menu (+ / more actions) */
.theme-light .dropdown-menu {
  background: #ffffff;
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.theme-light .dropdown-item { color: rgba(20,20,20,.85); }
.theme-light .dropdown-item:hover { background: rgba(26,115,232,.10); color: #0b57d0; }

/* Bottom dock (mobile): fade to the light background, not black */
@media (max-width: 759px) {
  .theme-light .input-dock {
    background: linear-gradient(to top, #f7f7f5 65%, rgba(247,247,245,0));
  }
}

/* ---------- Sidebar ---------- */
.theme-light .app-sidebar { background: #ffffff; }
.theme-light .app-sidebar.open { box-shadow: 0 0 40px rgba(0,0,0,.14); }
.theme-light .sidebar-backdrop { background: rgba(0,0,0,.3); }
.theme-light .sidebar-btn.new-chat-sidebar-btn { color: #7e22ce; background: rgba(168,85,247,.10); border-color: rgba(168,85,247,.32); }
.theme-light .sidebar-btn.new-chat-sidebar-btn:hover { background: rgba(168,85,247,.18); }
.theme-light .sidebar-footer-avatar { color: #7e22ce; background: rgba(168,85,247,.18); }
.theme-light .sidebar-recent-more:hover { color: #141414; background: rgba(0,0,0,.07); }
.theme-light .sidebar-tile { background: #f0f0ee; }
.theme-light .sidebar-tile:hover { background: rgba(168,85,247,.12); }
.theme-light .sidebar-tile svg { stroke: #7e22ce; }
.theme-light .sidebar-tile.active { background: rgba(168,85,247,.16); border-color: rgba(168,85,247,.5); }
.theme-light .sidebar-upgrade-card { background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(236,72,153,.08)); border-color: rgba(168,85,247,.3); }
.theme-light .sidebar-upgrade-card svg { stroke: #7e22ce; }
.theme-light .sidebar-section-btn:hover { background: rgba(0,0,0,.06); }

/* Popups created by sidebar.js (chat menu + search chats) */
.theme-light .mano-menu,
.theme-light .mano-search-box { background: #ffffff; color: #141414; border-color: rgba(0,0,0,.12); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.theme-light .mano-menu button:hover,
.theme-light .mano-search-item:hover,
.theme-light .mano-search-item.focused { background: rgba(0,0,0,.06); }
.theme-light .mano-search-input { border-bottom-color: rgba(0,0,0,.1); }
.theme-light .mano-toast { background: #ffffff; color: #141414; }

/* ---------- Chat messages ---------- */
.theme-light .chat-turn:hover { background: rgba(0,0,0,.025); }
.theme-light .chat-user-bubble {
  background: rgba(26,115,232,.10);
  border-color: rgba(26,115,232,.22);
  color: #141414;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.theme-light .chat-user-avatar.is-letter { background: var(--accent-color, #7c83ff); color: #fff; border-color: transparent; }
.theme-light .chat-user-avatar { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.1); color: #141414; }
.theme-light .chat-user-edit-actions button:hover { border-color: rgba(0,0,0,.22); }
.theme-light .actions-and-time-wrapper { border-top-color: rgba(0,0,0,.08); }
.theme-light .reaction-group { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
.theme-light .reaction-btn:hover { background: rgba(0,0,0,.08); }

.theme-light .suggestion-chip {
  border-color: rgba(0,0,0,.2);
  color: rgba(20,20,20,.78);
}
.theme-light .suggestion-chip:hover {
  color: #0b57d0;
  border-color: rgba(26,115,232,.5);
  background: rgba(26,115,232,.07);
}

.theme-light .scroll-to-bottom-btn { box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.theme-light .chat-image-unavailable { color: rgba(20,20,20,.62); }

/* Code blocks */
.theme-light .code-block-wrap { background: #f3f4f6; border: 1px solid rgba(0,0,0,.1); }
.theme-light .code-block-wrap pre { color: #1f2328; }
.theme-light .code-block-header { background: rgba(0,0,0,.05); }

/* Generated images & viewer overlays: keep dark photo-style chrome */
.theme-light .ai-response-image-wrap:hover { box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.theme-light .chat-user-image:hover { box-shadow: 0 6px 16px rgba(0,0,0,.18); }

/* ---------- Sign-in modal ---------- */
.theme-light .modern-signin-modal { background: rgba(240,240,238,.96); }
/* The sign-in layout is now a two-column page (see signin-modal.css): the left
   column is NOT a card any more, so no white box / border / shadow here.
   The white card is .signin-card, styled in signin-modal.css. */
.theme-light .signin-modal-content {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.theme-light .signin-modal-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); }
.theme-light .signin-heading { color: #141414; }
.theme-light .signin-subtitle { color: rgba(20,20,20,.62); }
.theme-light .signin-divider-line { background: rgba(0,0,0,.14); }
.theme-light .signin-divider-text { color: rgba(20,20,20,.5); }
.theme-light .signin-continue-btn {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.16);
  color: rgba(20,20,20,.9);
}
.theme-light .signin-continue-btn:hover {
  background: rgba(0,0,0,.09);
  border-color: rgba(0,0,0,.26);
  color: #000;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.theme-light .signin-fallback { color: rgba(20,20,20,.55); }

/* ---------- Sponsored cards ---------- */
.theme-light .sponsored-card { background: rgba(0,0,0,.03); }
.theme-light .sponsor-card { background: #ffffff; box-shadow: 0 3px 12px rgba(0,0,0,.1); }
.theme-light .sponsor-skip:hover { color: #141414; }
.theme-light .sponsor-btn:hover { color: #ffffff; }
.theme-light .sponsor-name { color: #141414; }
.theme-light .sponsor-tagline,
.theme-light .sponsor-features { color: rgba(20,20,20,.65); }

/* ---------- Settings / profile modals ---------- */
.theme-light .profile-modal-content,
.theme-light .settings-modal-content {
  --modal-bg: #ffffff;
  --input-bg: #f3f3f1;
  --border-color: rgba(0,0,0,.12);
  --text-primary: #141414;
  --text-secondary: #5f6368;
}
.theme-light .profile-modal-content,
.theme-light .settings-modal-content { box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.theme-light .profile-input,
.theme-light .settings-select,
.theme-light .settings-radio-option,
.theme-light .settings-action-btn,
.theme-light .profile-btn-secondary {
  background: #f3f3f1;
  border-color: rgba(0,0,0,.14);
  color: #141414;
}

/* ---------- Voice mode overlay ---------- */
.theme-light .voice-mode-overlay { background: #f7f7f5; }
.theme-light .voice-close-btn,
.theme-light .voice-mute-btn,
.theme-light .voice-end-btn {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.14);
  color: rgba(20,20,20,.85);
}
.theme-light .voice-close-btn:hover,
.theme-light .voice-close-btn:focus-visible,
.theme-light .voice-mute-btn:hover,
.theme-light .voice-mute-btn:focus-visible,
.theme-light .voice-end-btn:hover,
.theme-light .voice-end-btn:focus-visible { background: rgba(0,0,0,.12); color: #000; }
.theme-light .voice-close-btn svg,
.theme-light .voice-mute-btn svg { stroke: #141414; }
.theme-light .voice-close-btn:focus-visible,
.theme-light .voice-mute-btn:focus-visible,
.theme-light .voice-end-btn:focus-visible { outline-color: rgba(26,115,232,.7); }
.theme-light .voice-status-pill { background: rgba(0,0,0,.06); color: rgba(20,20,20,.65); }
.theme-light .voice-status-dot,
.theme-light .voice-mode-overlay[data-state="connecting"] .voice-status-dot { background: rgba(0,0,0,.35); }
.theme-light .voice-orb::after { border-color: rgba(0,0,0,.14); }
.theme-light .voice-waveform span { background: rgba(20,20,20,.5); }
.theme-light .voice-status { color: rgba(20,20,20,.6); }
.theme-light .voice-caption { color: #141414; }
.theme-light .voice-hint { color: rgba(20,20,20,.45); }

/* Photo source dropdown */
.theme-light .photo-source-btn { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); color: rgba(20,20,20,.62); }
.theme-light .photo-source-btn:hover,
.theme-light .photo-source-btn[aria-expanded="true"] { color: #141414; border-color: rgba(26,115,232,.45); }
.theme-light .photo-source-menu { background: #ffffff; border-color: rgba(0,0,0,.12); box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.theme-light .photo-source-option:hover,
.theme-light .photo-source-option:focus-visible { background: rgba(0,0,0,.06); }
.theme-light .photo-source-option svg { stroke: #1a73e8; }
/* Image viewer: fit the whole image inside the screen */
.image-viewer-container {
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
}
.image-viewer-image {
  width: auto !important;
  height: auto !important;
  max-width: 94vw !important;
  max-height: 88vh !important;
  max-height: 88dvh !important;
  object-fit: contain !important;
  transform: none !important;
  display: block;
}
.image-viewer-close {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 10;
}
/* =====================================================================
   ACCENT COLOUR — everything below follows Settings > Accent colour
   ===================================================================== */
html:root,
html.theme-light:root {
  --mano-accent: var(--accent-color, #a855f7);
  --mano-accent-soft: color-mix(in srgb, var(--mano-accent) 14%, transparent);
  --mano-accent-soft-2: color-mix(in srgb, var(--mano-accent) 24%, transparent);
  --mano-accent-border: color-mix(in srgb, var(--mano-accent) 40%, transparent);
  /* chat.css / light-theme.css variables now follow the accent too */
  --chat-accent: var(--mano-accent);
  --chat-accent-soft: var(--mano-accent-soft);
}

/* ---------- SIDEBAR ---------- */
html body .app-sidebar .sidebar-btn.new-chat-sidebar-btn {
  background: var(--mano-accent-soft);
  border-color: var(--mano-accent-border);
  color: var(--mano-accent);
}
html body .app-sidebar .sidebar-btn.new-chat-sidebar-btn:hover { background: var(--mano-accent-soft-2); }

html body .app-sidebar .sidebar-tile svg { stroke: var(--mano-accent); }
html body .app-sidebar .sidebar-tile:hover { background: var(--mano-accent-soft); }
html body .app-sidebar .sidebar-tile.active {
  background: var(--mano-accent-soft-2);
  border-color: var(--mano-accent-border);
}

html body .app-sidebar .sidebar-upgrade-card {
  background: linear-gradient(135deg, var(--mano-accent-soft-2), var(--mano-accent-soft));
  border-color: var(--mano-accent-border);
}
html body .app-sidebar .sidebar-upgrade-card:hover {
  background: linear-gradient(135deg, var(--mano-accent-border), var(--mano-accent-soft-2));
}
html body .app-sidebar .sidebar-upgrade-card svg { stroke: var(--mano-accent); }

html body .app-sidebar .sidebar-footer-avatar {
  background: var(--mano-accent-soft-2);
  color: var(--mano-accent);
}
html body .app-sidebar .sidebar-section-btn:hover { color: var(--mano-accent); }
html body .app-sidebar :focus-visible,
html body .sidebar-toggle-btn:focus-visible { outline-color: var(--mano-accent); }

/* Popups made by sidebar.js */
html body .mano-search-item:hover,
html body .mano-search-item.focused { background: var(--mano-accent-soft); }
html body .mano-toast { border-color: var(--mano-accent-border); }

/* ---------- SEARCH BAR BUTTONS ---------- */
html body .search-bar .typed-text { caret-color: var(--mano-accent); }

/* Send / mic / search button (stop + loading states keep their own colours) */
html body .search-bar .send-btn:not(.stop-mode):not(.loading) { background: var(--mano-accent-soft); }
html body .search-bar .send-btn:not(.stop-mode):not(.loading):hover { background: var(--mano-accent-soft-2); }
html body .search-bar .send-btn:not(.stop-mode) svg { stroke: var(--mano-accent); }

/* + attach button, mic */
html body .search-bar .plus-btn:hover,
html body .search-bar .mic-btn:hover { background: var(--mano-accent-soft-2); }

/* Chat / Photos toggle */
html body .search-bar .mode-toggle .mode-toggle-thumb {
  background: var(--mano-accent-soft);
  border-color: var(--mano-accent-border);
}
html body .search-bar .mode-toggle .mode-toggle-btn.active { color: var(--mano-accent); }

/* AI image / Pexels source dropdown */
html body .search-bar .photo-source-btn:hover,
html body .search-bar .photo-source-btn[aria-expanded="true"] { border-color: var(--mano-accent-border); }
html body .search-bar .photo-source-option svg { stroke: var(--mano-accent); }

/* Drag-and-drop highlight */
html body .input-dock.file-drag .search-bar {
  border-color: var(--mano-accent-border);
  background: var(--mano-accent-soft);
}

/* ---------- CHAT AREA (hard-coded blues in light-theme.css) ---------- */
html body .chat-turn .chat-user-bubble {
  background: var(--mano-accent-soft);
  border-color: var(--mano-accent-border);
}
html body .suggestion-chip:hover {
  color: var(--mano-accent);
  border-color: var(--mano-accent-border);
  background: var(--mano-accent-soft);
}
html body .dropdown-menu .dropdown-item:hover {
  background: var(--mano-accent-soft);
  color: var(--mano-accent);
}
/* ---------- STOP BUTTON: solid and clearly visible ---------- */
html body .search-bar .send-btn.stop-mode {
  background: #ef4444;
  box-shadow: 0 2px 10px rgba(239, 68, 68, .45);
  opacity: 1;
}
html body .search-bar .send-btn.stop-mode:hover {
  background: #dc2626;
  transform: scale(1.06);
}
html body .search-bar .send-btn.stop-mode:active { transform: scale(.92); }
html body .search-bar .send-btn.stop-mode svg {
  stroke: #ffffff;
  fill: #ffffff;
  animation: none;
}

/* Light theme: slightly deeper red so it stands out on white */
html.theme-light body .search-bar .send-btn.stop-mode {
  background: #d93025;
  box-shadow: 0 2px 10px rgba(217, 48, 37, .35);
}
html.theme-light body .search-bar .send-btn.stop-mode:hover { background: #b3261e; }
/* Web search tile: no outline when selected, just a soft accent tint */
html body .app-sidebar .sidebar-tile.active,
html body .app-sidebar .sidebar-tile[aria-pressed="true"] {
  outline: none !important;
  border-color: transparent !important;
  background: var(--mano-accent-soft-2);
}

/* No focus ring after a mouse click (keyboard focus still shows one) */
html body .app-sidebar .sidebar-tile:focus:not(:focus-visible) {
  outline: none !important;
}
/* "Web search is on" toast: no outline, background follows the accent colour */
html body .mano-toast {
  border: none !important;
  outline: none !important;
  background: color-mix(in srgb, var(--mano-accent, #a855f7) 24%, #141414);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

/* Light theme version */
html.theme-light body .mano-toast {
  background: color-mix(in srgb, var(--mano-accent, #a855f7) 16%, #ffffff);
  color: #141414;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}