/* ============================================================================
   Capi Când-IA Pro — Light Mode (Fase 2.8)
   Paleta neutra/fria (branco puro + grafite + ouro escuro), inspirada
   Vercel/Linear light. Substitui o cream warm rejeitado anteriormente.

   Ativa quando body NÃO tem .dark-mode (toggle existente do JS).
   ============================================================================ */

body:not(.dark-mode) {
  /* ─── Surfaces · bg neutro claro com surfaces brancas (Notion/Linear-style) ─── */
  --ds-bg:        #f4f4f2;
  --ds-surface:   #ffffff;
  --ds-surface-2: #e8e8e6;
  --ds-surface-3: #d8d8d6;

  /* ─── Bordas ─── */
  --ds-border:    rgba(0,0,0,0.08);
  --ds-border-2:  rgba(0,0,0,0.14);

  /* ─── Texto ─── */
  --ds-text:        #0a0a0a;
  --ds-text-2:      #555555;
  --ds-text-muted:  #888888;

  /* ─── Gold ─── */
  --ds-gold:        #B8860B;
  --ds-gold-hover:  #9C7008;
  --ds-gold-dim:    rgba(184,134,11,0.10);
  --ds-gold-border: rgba(184,134,11,0.30);
  --ds-gold-glow:   rgba(184,134,11,0.30);
  --ds-gold-text:   #ffffff;

  /* ─── Estados ─── */
  --ds-success:  #15803d;
  --ds-error:    #dc2626;
  --ds-warning:  #d97706;

  /* ─── Sombras (mais leves no light) ─── */
  --ds-shadow-button-inset: inset 0 1px 0 rgba(255,255,255,0.30);
  --ds-shadow-button-drop:  0 1px 2px rgba(0,0,0,0.08);
  --ds-shadow-focus-gold:   0 0 0 3px rgba(184,134,11,0.12);
  --ds-glow-gold-ambient:   radial-gradient(ellipse at top center, rgba(184,134,11,0.04) 0%, transparent 50%);
}

/* ═══════════════════════ LIGHT MODE OVERRIDES NO FORCE-FINAL ═══════════════════════ */

/* HTML/BODY no light */
html body:not(.dark-mode),
html body:not(.dark-mode).capi-ambient,
html body:not(.dark-mode).capi-input-glass {
  background: #f4f4f2 !important;
  color: #0a0a0a !important;
}

/* SIDEBAR — aplica no /app (#chatScreen) E nas páginas internas (body.ds-page) */
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .sidebar,
html body:not(.dark-mode) :is(#chatScreen.ds-shell, body.ds-page) .ds-sidebar {
  background: #f4f4f2 !important;
  border-right: 1px solid rgba(0,0,0,0.08) !important;
  color: #555 !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-sidebar-header,
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .sidebar-header {
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-sidebar-footer,
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .sidebar-footer {
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  background: #f4f4f2 !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-sidebar-divider {
  background: rgba(0,0,0,0.08) !important;
}

/* Brand mark no light */
html body:not(.dark-mode) .ds-brand-mark-title {
  color: #0a0a0a !important;
}

html body:not(.dark-mode) .ds-brand-mark-badge {
  color: #888 !important;
  border-color: rgba(0,0,0,0.10) !important;
}

/* Nav items no light */
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-nav-item,
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) a.ds-nav-item,
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) button.ds-nav-item {
  color: #555 !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-nav-item:hover {
  background: rgba(0,0,0,0.04) !important;
  color: #0a0a0a !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-nav-item-primary {
  color: #B8860B !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-nav-item-primary:hover {
  background: rgba(184,134,11,0.06) !important;
  color: #9C7008 !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-nav-item-shortcut {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.06) !important;
  color: #888 !important;
}

/* Section labels */
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-section-label {
  color: #888 !important;
}

/* Conversation rows */
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .conv-item {
  color: #555 !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .conv-item:hover {
  background: rgba(0,0,0,0.04) !important;
  color: #0a0a0a !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .conv-item.active {
  background: rgba(184,134,11,0.08) !important;
  border-left-color: #B8860B !important;
  color: #B8860B !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .conv-item-date {
  color: #999 !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .conv-item.active .conv-item-date {
  color: #B8860B !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .conv-item-title {
  color: inherit !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .conv-empty {
  color: #999 !important;
}

/* Footer user info no light */
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-sidebar-footer-name,
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .user-name-s {
  color: #0a0a0a !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-sidebar-footer-email,
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .user-email-s {
  color: #888 !important;
}

html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-avatar,
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .user-avatar {
  background: rgba(184,134,11,0.10) !important;
  border-color: rgba(184,134,11,0.35) !important;
  color: #B8860B !important;
}

/* TOPBAR */
html body:not(.dark-mode) #chatScreen .chat-header,
html body:not(.dark-mode) #chatScreen .ds-topbar {
  background: #f4f4f2 !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

html body:not(.dark-mode) #chatScreen .header-status,
html body:not(.dark-mode) #chatScreen .ds-topbar-status {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #555 !important;
}

html body:not(.dark-mode) #chatScreen .ds-bell {
  border-color: rgba(0,0,0,0.10) !important;
  color: #555 !important;
}

html body:not(.dark-mode) #chatScreen .ds-bell:hover {
  border-color: rgba(0,0,0,0.18) !important;
  color: #0a0a0a !important;
}

/* MAIN AREA */
html body:not(.dark-mode) #chatScreen .chat-main,
html body:not(.dark-mode) #chatScreen.ds-shell .ds-shell-main {
  background: #f4f4f2 !important;
}

html body:not(.dark-mode) #chatScreen .chat-main::before {
  background: radial-gradient(ellipse at center top, rgba(184,134,11,0.025) 0%, rgba(184,134,11,0.008) 15%, transparent 30%) !important;
}

/* WELCOME STATE */
html body:not(.dark-mode) #chatScreen .ds-welcome-title {
  color: #0a0a0a !important;
}

html body:not(.dark-mode) #chatScreen .ds-welcome-title-accent,
html body:not(.dark-mode) #chatScreen .ds-welcome-title .hl {
  color: #B8860B !important;
}

html body:not(.dark-mode) #chatScreen .ds-welcome-sub {
  color: #555 !important;
}

/* PILLS */
html body:not(.dark-mode) #chatScreen .ds-pill,
html body:not(.dark-mode) #chatScreen .suggestion-chip {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: #333 !important;
}

html body:not(.dark-mode) #chatScreen .ds-pill:hover,
html body:not(.dark-mode) #chatScreen .suggestion-chip:hover {
  border-color: rgba(184,134,11,0.45) !important;
  background: rgba(184,134,11,0.04) !important;
  color: #0a0a0a !important;
}

html body:not(.dark-mode) #chatScreen .ds-pill svg,
html body:not(.dark-mode) #chatScreen .suggestion-chip svg {
  stroke: #888 !important;
}

html body:not(.dark-mode) #chatScreen .ds-pill:hover svg,
html body:not(.dark-mode) #chatScreen .suggestion-chip:hover svg {
  stroke: #B8860B !important;
}

/* CHAT INPUT */
html body:not(.dark-mode) #chatScreen .chat-input-container,
html body:not(.dark-mode) #chatScreen .ds-chat-input-wrap {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
}

html body:not(.dark-mode) #chatScreen #chatInput.chat-input {
  color: #0a0a0a !important;
}

html body:not(.dark-mode) #chatScreen #chatInput.chat-input::placeholder {
  color: #999 !important;
}

html body:not(.dark-mode) #chatScreen .upload-btn,
html body:not(.dark-mode) #chatScreen #micBtn.mic-btn,
html body:not(.dark-mode) #chatScreen #saveTemplateBtn.header-action-btn {
  color: #555 !important;
}

html body:not(.dark-mode) #chatScreen #sendBtn.btn-send {
  background: linear-gradient(180deg, #B8860B 0%, #9C7008 100%) !important;
  color: #ffffff !important;
}

/* MESSAGE BUBBLES */
html body:not(.dark-mode) #chatScreen .message-user .message-bubble,
html body:not(.dark-mode) #chatScreen .message.user .message-bubble {
  background: rgba(184,134,11,0.10) !important;
  border: 1px solid rgba(184,134,11,0.25) !important;
  color: #0a0a0a !important;
}

html body:not(.dark-mode) #chatScreen .message-assistant .message-bubble {
  color: #1a1a1a !important;
}

html body:not(.dark-mode) #chatScreen .message-assistant .message-bubble strong {
  color: #B8860B !important;
}

/* MSG ACTIONS */
html body:not(.dark-mode) #chatScreen .msg-action-btn,
html body:not(.dark-mode) #chatScreen .msg-more-btn {
  border-color: rgba(0,0,0,0.10) !important;
  color: #555 !important;
}

html body:not(.dark-mode) #chatScreen .msg-action-btn:hover,
html body:not(.dark-mode) #chatScreen .msg-more-btn:hover {
  border-color: rgba(184,134,11,0.30) !important;
  color: #B8860B !important;
  background: rgba(184,134,11,0.06) !important;
}

/* TIMESTAMP */
html body:not(.dark-mode) #chatScreen .msg-timestamp {
  color: #888 !important;
}

/* LIQUID GLASS (dropdowns) · LIGHT — cinza com contraste alto */
html body:not(.dark-mode) .ds-dropdown,
html body:not(.dark-mode) #chatScreen .msg-more-menu,
html body:not(.dark-mode) .ds-spotlight-panel {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 60%),
    rgba(220,220,218,0.85) !important;
  border-color: rgba(0,0,0,0.12) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.18),
    0 6px 18px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.40) !important;
  color: #0a0a0a !important;
}

html body:not(.dark-mode) .ds-dropdown-item,
html body:not(.dark-mode) #chatScreen .msg-more-menu .msg-action-btn,
html body:not(.dark-mode) .ds-spotlight-result {
  color: #1a1a1a !important;
}

html body:not(.dark-mode) .ds-dropdown-item:hover,
html body:not(.dark-mode) .ds-spotlight-result:hover,
html body:not(.dark-mode) .ds-spotlight-result.is-selected {
  background: rgba(0,0,0,0.08) !important;
  color: #0a0a0a !important;
}

html body:not(.dark-mode) .ds-dropdown-item-danger {
  color: #c12626 !important;
}

html body:not(.dark-mode) .ds-dropdown-item-danger:hover {
  background: rgba(220,38,38,0.10) !important;
}

html body:not(.dark-mode) .ds-dropdown-header,
html body:not(.dark-mode) .ds-spotlight-section-label {
  color: #555 !important;
}

html body:not(.dark-mode) .ds-spotlight-input {
  color: #0a0a0a !important;
}

html body:not(.dark-mode) .ds-spotlight-input::placeholder {
  color: #888 !important;
}

html body:not(.dark-mode) .ds-spotlight-hint,
html body:not(.dark-mode) .ds-spotlight-footer,
html body:not(.dark-mode) .ds-spotlight-footer kbd {
  color: #555 !important;
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* ═══════════════════════ ELEMENTOS NOVOS · LIGHT MODE ═══════════════════════ */

/* Saudação dinâmica do welcome */
html body:not(.dark-mode) #chatScreen .ds-welcome-greeting {
  color: #888 !important;
}
html body:not(.dark-mode) #chatScreen .ds-welcome-greeting .dot {
  background: #B8860B !important;
  box-shadow: 0 0 8px rgba(184,134,11,0.5) !important;
}

/* Avatar do Capi no welcome — borda mais discreta no light */
html body:not(.dark-mode) #chatScreen .ds-welcome-avatar,
html body:not(.dark-mode) #chatScreen .welcome-avatar {
  border-color: rgba(184,134,11,0.45) !important;
  box-shadow: 0 0 24px rgba(184,134,11,0.18), 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* ─── STARTER CARDS · light mode ─── */
html body:not(.dark-mode) #chatScreen .ds-starter-card {
  background: rgba(0,0,0,0.025) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 4px 13px rgba(0,0,0,0.10) !important;
}

html body:not(.dark-mode) #chatScreen .ds-starter-card:hover {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(184,134,11,0.40) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.12),
    0 0 0 1px rgba(184,134,11,0.18) !important;
}

html body:not(.dark-mode) #chatScreen .ds-starter-card-icon {
  background: rgba(184,134,11,0.06) !important;
  border-color: rgba(184,134,11,0.55) !important;
  color: #B8860B !important;
}
html body:not(.dark-mode) #chatScreen .ds-starter-card-icon svg {
  stroke: #B8860B !important;
}

html body:not(.dark-mode) #chatScreen .ds-starter-card-cat {
  color: #B8860B !important;
}

/* ⚠️ Fix principal: título estava #F5F5F5 (branco) hardcoded */
html body:not(.dark-mode) #chatScreen .ds-starter-card-title {
  color: #0a0a0a !important;
}

/* Mascote — sombra menos pesada no fundo claro */
html body:not(.dark-mode) #chatScreen .ds-starter-card-mascot {
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.15)) !important;
}

/* ─── Mini chips (Script · Criar peça) ─── */
html body:not(.dark-mode) #chatScreen .ds-starter-mini {
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: #555 !important;
}
html body:not(.dark-mode) #chatScreen .ds-starter-mini:hover {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(184,134,11,0.40) !important;
  color: #0a0a0a !important;
}
html body:not(.dark-mode) #chatScreen .ds-starter-mini svg {
  stroke: #555 !important;
}

/* ─── Welcome hint (atalhos de teclado) ─── */
html body:not(.dark-mode) #chatScreen .ds-welcome-hint {
  color: #888 !important;
}
html body:not(.dark-mode) #chatScreen .ds-welcome-hint kbd {
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: #555 !important;
}

/* ─── Botão ⋮ (menu de conversa) ─── */
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .conv-item .conv-item-menu-btn {
  color: #888 !important;
}
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .conv-item .conv-item-menu-btn:hover {
  background: rgba(0,0,0,0.06) !important;
  color: #0a0a0a !important;
}

/* ─── Conversa fixada · bolinha dourada ─── */
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .conv-item.pinned-conv .conv-item-title > span:first-child {
  color: #B8860B !important;
}

/* ─── Galaxy canvas · ainda mais discreta no light (opacity já estava 0.4) ─── */
html body:not(.dark-mode) #chatScreen .ds-galaxy-bg,
html body:not(.dark-mode) #chatScreen .ds-galaxy-fg {
  opacity: 0.18 !important;
  mix-blend-mode: multiply !important;
}

/* Background do chat-main no light */
html body:not(.dark-mode) #chatScreen .chat-main,
html body:not(.dark-mode) #chatScreen.ds-shell .ds-shell-main {
  background: #f4f4f2 !important;
}

/* ─── Chat input · light ajuste ─── */
html body:not(.dark-mode) #chatScreen .chat-input-area {
  background: transparent !important;
}

/* ─── Pinned section label · light ─── */
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .pinned-section-label {
  color: #888 !important;
}

/* ─── Projects section label · light ─── */
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .projects-section .ds-section-label {
  color: #888 !important;
}
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-section-label-count {
  color: #999 !important;
}

/* ─── Sidebar nav primary (Nova conversa) — gold ─── */
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-nav-item-primary .ds-nav-item-shortcut,
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .ds-nav-item-primary {
  color: #B8860B !important;
}

/* ─── Sidebar PROJETOS · light ─── */
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .projects-header {
  color: #888 !important;
}
html body:not(.dark-mode) :is(#chatScreen, body.ds-page) .projects-header:hover {
  color: #0a0a0a !important;
}

/* ─── Liquid glass conv menu (⋮ → dropdown) cores no light já vêm de .ds-dropdown ─── */

/* (Theme toggle iPhone-style — estilos completos no force-final.css, sem override aqui) */

/* ─── Bell · contagem badge ─── */
html body:not(.dark-mode) #chatScreen .ds-bell-badge {
  background: #B8860B !important;
  color: #ffffff !important;
}

/* ─── Markdown content em mensagens — links, code, etc. ─── */
html body:not(.dark-mode) #chatScreen .message-bubble a {
  color: #B8860B !important;
}
html body:not(.dark-mode) #chatScreen .message-bubble code {
  background: rgba(0,0,0,0.05) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: #6B4F08 !important;
}

/* ─── Welcome avatar pulse animation · light (sombra dourada mais leve) ─── */
@keyframes dsWelcomePulseLight {
  0%, 100% { box-shadow: 0 0 24px rgba(184,134,11,0.15), 0 2px 8px rgba(0,0,0,0.15); }
  50%      { box-shadow: 0 0 32px rgba(184,134,11,0.25), 0 2px 8px rgba(0,0,0,0.15); }
}
html body:not(.dark-mode) #chatScreen .ds-welcome-avatar {
  animation-name: dsWelcomePulseLight !important;
}