/* ============================================================
   ThreadSeek — Temas visuais + fonte/tamanho (camada ADITIVA)
   Carregado DEPOIS de styles.css. O tema Padrão não usa classe
   nenhuma: o visual atual fica intacto. Os tokens de cor-base
   (--accent*, --font-ui, --ui-scale) são definidos no :root de
   styles.css; aqui cada tema só os sobrescreve + traz o papel de
   parede e o "frost" das superfícies. Ortogonal ao dia/noite:
   cada tema tem variante clara (body.theme-X) e escura
   (body.theme-X.dark-mode). Sem imagens externas — só gradientes
   CSS (funciona offline no desktop).
   ============================================================ */

/* ---- Fonte (família): vale pra TODOS os temas, inclusive o Padrão ---- */
body.font-serif { --font-ui:'Georgia','Iowan Old Style','Times New Roman','Noto Serif',serif; }
body.font-mono  { --font-ui:'Cascadia Code','JetBrains Mono','Consolas','SF Mono','Menlo',monospace; }

/* ---- Tamanho: zoom da UI toda (o CSS é px-fixo, então zoom é a alavanca
       global). Normal = 1 (padrão, sem classe). ---- */
body.fs-compact { --ui-scale:.9; }
body.fs-large   { --ui-scale:1.12; }
body.fs-extra   { --ui-scale:1.25; }

/* ============================================================
   Plumbing do "frost": liga SOMENTE quando há um tema ativo
   (body.themed). Lê os tokens que cada tema define abaixo, então
   a lista de seletores aparece uma vez só (DRY). O tema Padrão
   não tem .themed → nada disso se aplica.
   ============================================================ */
body.themed {
  background-image: var(--wallpaper);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.themed .topbar,
body.themed .right-panel,
body.themed .chat-input {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
body.themed .sidebar {
  background: var(--glass-sidebar);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
body.themed .modal {
  background: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
body.themed .card,
body.themed .bubble.ai {
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* No escuro o --accent dos temas é claro (tinta p/ fundo escuro). Superfícies
   com texto BRANCO por cima (balão do usuário, itens ativos/hover, botões)
   ficariam lavadas — escurece o fundo com um mix uniforme p/ legibilidade. */
body.themed.dark-mode .bubble.user,
body.themed.dark-mode .auth-btn,
body.themed.dark-mode .nav-item:hover,
body.themed.dark-mode .nav-item.active,
body.themed.dark-mode .submenu-item:hover,
body.themed.dark-mode .continue-btn:hover,
body.themed.dark-mode .last-thread-summary .btn-continue,
body.themed.dark-mode .add-tag-btn,
body.themed.dark-mode .empty-new-btn,
body.themed.dark-mode .btn-download,
body.themed.dark-mode .insight-num,
body.themed.dark-mode .folder-item.active,
body.themed.dark-mode .icon-opt.selected,
body.themed.dark-mode .restore-all-banner span:hover,
body.themed.dark-mode .prompt-restore-all:hover,
body.themed.dark-mode .code-actions-bottom .preview-inline { background: color-mix(in srgb, var(--accent) 60%, #000); }
body.themed.dark-mode .btn-download:hover { background: color-mix(in srgb, var(--accent) 75%, #000); }
/* Hover do Preview: o literal #6a5de0 é roxo fora do tema; mix mais claro que o
   repouso (60/70%) mantém o feedback de hover dentro da cor do tema. */
body.themed .code-actions-bottom .code-action-btn.preview-inline:hover { background: color-mix(in srgb, var(--accent) 78%, #000); }
/* Claro: o mesmo problema de branco-sobre-accent no item ativo/hover da sidebar
   (que tem texto claro); mix um pouco mais suave que o do escuro. */
body.themed:not(.dark-mode) .nav-item:hover,
body.themed:not(.dark-mode) .nav-item.active,
body.themed:not(.dark-mode) .submenu-item:hover,
body.themed:not(.dark-mode) .code-actions-bottom .preview-inline { background: color-mix(in srgb, var(--accent) 70%, #000); }

/* ============================================================
   Menu de aparência (aba Aparência do settingsModal)
   ============================================================ */
.ts-appearance { margin-top: 10px; }
.ts-appearance > label { font-size: 12px; font-weight: 600; display: block; margin: 10px 0 6px; color: var(--accent); }
.ts-appearance > label:first-child { margin-top: 0; }
.ts-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ts-swatch {
  border: 1px solid rgba(127,127,150,.28); background: transparent; cursor: pointer; color: inherit;
  border-radius: 10px; padding: 7px 10px; display: flex; flex-direction: row; align-items: center; gap: 8px;
  transition: border-color .15s, transform .1s;
}
.ts-swatch:hover { transform: translateY(-1px); }
.ts-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.28); }
/* Préview = bola com o nome ao lado (não retângulo embaixo). O color:inherit
   garante que o nome siga a cor de texto do modal (claro no escuro e vice-versa). */
.ts-swatch-prev { width: 20px; height: 20px; border-radius: 50%; display: block; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ts-swatch-name { font-size: 11px; line-height: 1.2; color: inherit; opacity: .9; text-align: left; }
.ts-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.ts-seg-btn {
  flex: 1 1 auto; min-width: 62px; padding: 7px 10px; font-size: 12px; cursor: pointer;
  border: 1px solid rgba(127,127,150,.3); border-radius: 9px; background: transparent; color: inherit;
  transition: border-color .15s, background .15s;
}
.ts-seg-btn:hover { border-color: var(--accent); }
.ts-seg-btn.active { background: rgba(var(--accent-rgb),.14); border-color: var(--accent); font-weight: 600; }
body.dark-mode .ts-swatch, body.dark-mode .ts-seg-btn { border-color: rgba(200,200,230,.22); }

/* ============================================================
   TEMAS — cada bloco define: accent (família) + papel de parede
   + tokens de frost. Versão clara e, em seguida, .dark-mode.
   ============================================================ */

/* --- Vidro Frostado (teal) --- */
body.theme-frosted {
  --accent:#2aa7a0; --accent-rgb:42,167,160; --accent-hover:#22918b; --accent-deep:#1f7d78;
  --accent-light:#7fd8d2; --accent-soft:#dff3f1; --accent-faint:#f2fbfa;
  --wallpaper:
    radial-gradient(1000px 700px at 12% 8%, #d9f4f1, transparent 60%),
    radial-gradient(900px 600px at 88% 12%, #cfe4ff, transparent 60%),
    radial-gradient(800px 800px at 70% 96%, #e7e0ff, transparent 60%),
    linear-gradient(160deg,#eef6fb,#e9eefb);
  --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.72);
  --glass-sidebar:rgba(20,34,40,.92); --card-bg:rgba(255,255,255,.82);
}
body.theme-frosted.dark-mode {
  --accent:#3fd0c9; --accent-rgb:63,208,201; --accent-hover:#33bcb6; --accent-deep:#2aa7a0;
  --accent-light:#8fe6e0; --accent-soft:#153a3a; --accent-faint:#0f2a2a;
  --wallpaper:
    radial-gradient(1000px 700px at 12% 8%, #1a4247, transparent 60%),
    radial-gradient(900px 600px at 88% 12%, #1c2f52, transparent 60%),
    radial-gradient(800px 800px at 70% 96%, #252247, transparent 60%),
    linear-gradient(160deg,#141a23,#12161e);
  --glass:rgba(28,38,46,.55); --glass-strong:rgba(30,38,46,.72);
  --glass-sidebar:rgba(18,24,28,.7); --card-bg:rgba(32,42,48,.82);
}

/* --- Deserto (âmbar/terracota) --- */
body.theme-deserto {
  --accent:#c2703d; --accent-rgb:194,112,61; --accent-hover:#a85e31; --accent-deep:#9c5730;
  --accent-light:#e6b98f; --accent-soft:#f6e7d6; --accent-faint:#fbf4ec;
  --wallpaper:
    radial-gradient(700px 420px at 78% 4%, #fff0c9, transparent 60%),
    linear-gradient(180deg,#f7e7c9 0%,#eecf9f 48%,#e0b183 100%);
  --glass:rgba(255,250,242,.6); --glass-strong:rgba(255,250,242,.78);
  --glass-sidebar:rgba(40,28,18,.92); --card-bg:rgba(255,251,245,.85);
}
body.theme-deserto.dark-mode {
  --accent:#e0955f; --accent-rgb:224,149,95; --accent-hover:#c9814d; --accent-deep:#b8774a;
  --accent-light:#eec79a; --accent-soft:#3a2a1a; --accent-faint:#2a1f14;
  --wallpaper:
    radial-gradient(700px 420px at 78% 4%, #523c20, transparent 60%),
    linear-gradient(180deg,#2c2219 0%,#221a13 100%);
  --glass:rgba(40,32,24,.55); --glass-strong:rgba(42,33,25,.75);
  --glass-sidebar:rgba(28,22,17,.72); --card-bg:rgba(46,36,27,.82);
}

/* --- Espaço (violeta claro / ciano escuro + starfield) --- */
body.theme-espaco {
  --accent:#6a5cf0; --accent-rgb:106,92,240; --accent-hover:#5648d6; --accent-deep:#4d40c9;
  --accent-light:#a9b4f7; --accent-soft:#e3e6fb; --accent-faint:#f2f3fc;
  --wallpaper:
    radial-gradient(900px 600px at 20% 14%, #e6e2ff, transparent 60%),
    radial-gradient(800px 600px at 86% 28%, #dfe9ff, transparent 60%),
    linear-gradient(160deg,#eeeaff,#e6ecff);
  --glass:rgba(248,248,255,.58); --glass-strong:rgba(248,248,255,.76);
  --glass-sidebar:rgba(24,24,48,.92); --card-bg:rgba(250,250,255,.85);
}
body.theme-espaco.dark-mode {
  --accent:#5fd0ff; --accent-rgb:95,208,255; --accent-hover:#3fb8e6; --accent-deep:#2aa7d6;
  --accent-light:#a5e6ff; --accent-soft:#15263a; --accent-faint:#0f1a2a;
  --wallpaper:
    radial-gradient(1.6px 1.6px at 18% 28%, #fff, transparent), radial-gradient(1.4px 1.4px at 72% 14%, #cfe8ff, transparent),
    radial-gradient(1.8px 1.8px at 44% 62%, #fff, transparent), radial-gradient(1.3px 1.3px at 86% 48%, #dfe, transparent),
    radial-gradient(1.5px 1.5px at 30% 82%, #eaf, transparent), radial-gradient(1.2px 1.2px at 62% 88%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 8% 56%, #cfe8ff, transparent), radial-gradient(1.3px 1.3px at 92% 74%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 52% 22%, #ffd, transparent), radial-gradient(1.2px 1.2px at 24% 44%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 78% 66%, #bfe, transparent), radial-gradient(1.3px 1.3px at 38% 12%, #fff, transparent),
    radial-gradient(1100px 700px at 28% -6%, #333272, transparent 60%),
    radial-gradient(900px 600px at 86% 18%, #1a4262, transparent 55%),
    linear-gradient(180deg,#0e101c,#121528 60%,#0c0e17);
  --glass:rgba(24,26,44,.55); --glass-strong:rgba(26,28,48,.76);
  --glass-sidebar:rgba(16,17,28,.74); --card-bg:rgba(28,30,50,.84);
}

/* --- Campo (verde prado) --- */
body.theme-campo {
  --accent:#4a9d5f; --accent-rgb:74,157,95; --accent-hover:#3d8550; --accent-deep:#367a48;
  --accent-light:#9ed7ac; --accent-soft:#e0f0e3; --accent-faint:#f1faf3;
  --wallpaper:
    radial-gradient(800px 500px at 50% -8%, #f4fbff, transparent 60%),
    linear-gradient(180deg,#e7f3dd 0%,#cfe8bf 45%,#aed6a2 100%);
  --glass:rgba(250,255,248,.58); --glass-strong:rgba(250,255,248,.76);
  --glass-sidebar:rgba(22,38,24,.92); --card-bg:rgba(251,255,249,.85);
}
body.theme-campo.dark-mode {
  --accent:#66c981; --accent-rgb:102,201,129; --accent-hover:#52b56d; --accent-deep:#48a862;
  --accent-light:#a5e6b4; --accent-soft:#15301c; --accent-faint:#0f2415;
  --wallpaper:
    radial-gradient(700px 420px at 78% 2%, #344252, transparent 60%),
    linear-gradient(180deg,#182518,#121c12);
  --glass:rgba(26,38,26,.55); --glass-strong:rgba(28,41,28,.76);
  --glass-sidebar:rgba(18,28,19,.72); --card-bg:rgba(30,44,31,.84);
}

/* --- Oceano (azul) --- */
body.theme-oceano {
  --accent:#2f7fd6; --accent-rgb:47,127,214; --accent-hover:#2669b3; --accent-deep:#1f5c9e;
  --accent-light:#8fc0ee; --accent-soft:#dceaf7; --accent-faint:#eff6fc;
  --wallpaper:
    radial-gradient(900px 500px at 30% 0%, #eaf7ff, transparent 60%),
    linear-gradient(180deg,#dceef8 0%,#b3d9ee 50%,#89c3e2 100%);
  --glass:rgba(248,252,255,.58); --glass-strong:rgba(248,252,255,.76);
  --glass-sidebar:rgba(16,34,50,.92); --card-bg:rgba(249,253,255,.85);
}
body.theme-oceano.dark-mode {
  --accent:#4aa8ff; --accent-rgb:74,168,255; --accent-hover:#3592e6; --accent-deep:#2b80cc;
  --accent-light:#a5d4ff; --accent-soft:#13283a; --accent-faint:#0e1e2e;
  --wallpaper:
    radial-gradient(900px 600px at 50% -10%, #1a425a, transparent 60%),
    linear-gradient(180deg,#0f1b27,#0c1822);
  --glass:rgba(20,32,44,.55); --glass-strong:rgba(22,36,50,.76);
  --glass-sidebar:rgba(14,24,34,.74); --card-bg:rgba(24,40,54,.84);
}

/* ---- Mobile: alvos de toque do menu de aparência maiores (~30px→~38px) ---- */
@media (max-width:640px) {
  .ts-seg-btn { padding:9px 10px; }
  .ts-theme-grid { gap:10px; grid-template-columns:repeat(2,1fr); }
}