/* ====== Tema Global — Versão 7 (Final com Correção de Sintaxe) ====== */

/* ------------------------------------------- */
/* TEMA CLARO (LIGHT) - Estilo Minimalista/ChatGPT */
/* ------------------------------------------- */
:root {
    /* -- Paleta Principal -- */
    --bg: #ffffff;
    --panel: #fafafa;
    --panel-soft: #f0f0f0;
    --border: #eaeaea;
    --fg: #202123;
    --fg-dim: #757575;
    --accent: #0059d6;
    --text-invert: #ffffff;

    /* -- Variáveis Estruturais do Layout (index.php) -- */
    --bg-primary: var(--bg);
    --bg-secondary: var(--bg);
    --bg-elevated-primary: #ffffff;
    /* Fundo do Header Principal */
    --bg-elevated-secondary: #f7f7f8;
    /* Fundo das Sidebars */
    --border-default: #e5e7eb;
    /* Bordas do Layout Principal */
    --text-primary: var(--fg);
    --text-secondary: var(--fg);
    --icon-secondary: #6b7280;
    /* Ícones do Header/Sidebar */
    --scrollbar-thumb: rgba(0, 0, 0, 0.4);
    /* Scrollbar com mais contraste */

    /* -- Componentes UI -- */
    --btn-bg: #f0f0f0;
    --btn-fg: #202123;
    --btn-br: #d9d9d9;
    --btn-bg-h: #e9e9e9;

    /* -- Bubbles do Chat -- */
    --bubble-user: #e7f1ff;
    --bubble-assist: #f7f7f7;

    /* -- Ícones do Composer -- */
    --icon-primary: #1967d2;
    --icon-fg: #ffffff;

    /* NOVAS VARIÁVEIS DO LOGO */
    --logo-color: var(--fg);
    /* O logo terá a cor do texto principal */
    --logo-glow-color: rgba(0, 0, 0, 0.3);
    /* Um brilho escuro sutil */
}

/* ------------------------------------------- */
/* TEMA ESCURO (DARK) - REFINADO E SUTIL       */
/* ------------------------------------------- */
:root[data-theme="dark"] {
    /* -- Paleta Principal -- */
    --bg: #171717;
    --panel: #212121;
    --panel-soft: #2c2c2c;
    --border: #3a3a3a;
    --fg: #fafafa;
    --fg-dim: #9e9e9e;
    --accent: #8ab4f8;
    --text-invert: #fafafa;

    /* -- Variáveis Estruturais do Layout (index.php) -- */
    --bg-primary: var(--bg);
    --bg-secondary: var(--bg);
    --bg-elevated-primary: #171717;
    /* Fundo do Header Principal */
    --bg-elevated-secondary: #000000;
    /* Fundo das Sidebars */
    --border-default: #333333;
    /* Bordas do Layout Principal */
    --text-primary: var(--fg);
    --text-secondary: var(--fg);
    --icon-secondary: #a0a0a0;
    /* Ícones do Header/Sidebar */
    --scrollbar-thumb: rgba(255, 255, 255, 0.25);
    /* Scrollbar */

    /* -- Componentes UI -- */
    --btn-bg: #2c2c2c;
    --btn-fg: #fafafa;
    --btn-br: #555555;
    --btn-bg-h: #383838;

    /* -- Bubbles do Chat -- */
    --bubble-user: #28354c;
    --bubble-assist: #212121;

    /* -- Ícones do Composer -- */
    --icon-primary: #8ab4f8;
    --icon-fg: #171717;

    /* NOVAS VARIÁVEIS DO LOGO */
    --logo-color: var(--fg);
    /* O logo terá a cor do texto principal (claro) */
    --logo-glow-color: rgba(255, 255, 255, 0.5);
    /* O brilho branco original */
}



/* ================================================================== */
/* ==                  ESTILOS GLOBAIS E ESTRUTURAIS               == */
/* ================================================================== */

/* Base global */
html,
body {
    background: var(--bg-primary);
    /* Usa a variável estrutural */
    color: var(--text-primary);
    /* Usa a variável estrutural */
}

/* Fundos das áreas principais com SINTAXE CORRIGIDA */
.bg-\[var\(--bg-primary\)\] {
    background-color: var(--bg-primary) !important;
}

.dark .dark\:bg-\[var\(--bg-primary\)\] {
    background-color: var(--bg-primary) !important;
}

.bg-\[var\(--bg-secondary\)\] {
    background-color: var(--bg-secondary) !important;
}

.dark .dark\:bg-\[var\(--bg-secondary\)\] {
    background-color: var(--bg-secondary) !important;
}

.bg-\[var\(--bg-elevated-primary\)\] {
    background-color: var(--bg-elevated-primary) !important;
}

.bg-\[var\(--bg-elevated-secondary\)\] {
    background-color: var(--bg-elevated-secondary) !important;
}

/* Bordas e Textos do Layout Principal com SINTAXE CORRIGIDA */
.border-\[var\(--border-default\)\] {
    border-color: var(--border-default) !important;
}

.text-\[var\(--text-primary\)\] {
    color: var(--text-primary) !important;
}

.text-\[var\(--icon-secondary\)\] {
    color: var(--icon-secondary) !important;
}

.hover\:bg-\[var\(--interactive-bg-secondary-hover\)\]:hover {
    background-color: var(--panel-soft) !important;
}

.text-\[var\(--fg\)\] {
    color: var(--fg) !important;
}

.bg-\[var\(--btn-bg\)\] {
    background-color: var(--btn-bg) !important;
}

.hover\:bg-\[var\(--btn-bg-h\)\]:hover {
    background-color: var(--btn-bg-h) !important;
}

.border-\[var\(--btn-br\)\] {
    border-color: var(--btn-br) !important;
}


/* Estilos da Barra de Rolagem */
.overflow-auto,
.overflow-y-auto,
.agents-scroll,
#chat-messages,
#builder-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

.overflow-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.agents-scroll::-webkit-scrollbar,
#chat-messages::-webkit-scrollbar,
#builder-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.overflow-auto::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track,
.agents-scroll::-webkit-scrollbar-track,
#chat-messages::-webkit-scrollbar-track,
#builder-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.overflow-auto::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb,
.agents-scroll::-webkit-scrollbar-thumb,
#chat-messages::-webkit-scrollbar-thumb,
#builder-scroll::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 3px;
}

/* ================================================================== */
/* ==                  ESTILOS DOS COMPONENTES                     == */
/* ================================================================== */

/* Botões genéricos */
.btn {
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-br);
}

.btn:hover {
    background: var(--btn-bg-h);
}

.btn.ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-dim);
}

/* Chips, caixas e bordas de componentes internos */
.chip,
.panel,
.box,
#chat-header {
    background: var(--panel);
    color: var(--fg);
    border-color: var(--border);
}

#chat-header {
    border-bottom: 1px solid var(--border);
}

/* Bubbles do chat */
.bubble.user {
    background: var(--bubble-user) !important;
    color: var(--accent) !important;
}

.bubble.assistant {
    background: var(--bubble-assist) !important;
    color: var(--fg) !important;
}

/* Composer e ferramentas */
#composer .tool-btn {
    color: var(--fg-dim);
}

#composer .tool-btn:hover {
    background: var(--panel-soft);
    border-color: var(--border);
    color: var(--fg);
}

#composer-submit-button,
#composer-send {
    background: var(--icon-primary) !important;
    color: var(--text-invert) !important;
    border: none !important;
}

/* Overrides do Choices.js (dropdown) */
.choices__inner {
    background: var(--panel) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    background: var(--panel) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
}

.choices__item--selectable.is-highlighted {
    background: var(--panel-soft) !important;
}

.choices__input {
    background: var(--panel) !important;
    color: var(--fg) !important;
}