/* ==========================================================================
   1. VARIÁVEIS E BASE
   ========================================================================== */
[data-theme="dark"] {
    --chat-bg: #121212;
    --chat-surface: #1e1e1e;
    --chat-border: #2c2c2c;
    --chat-text: #e0e0e0;
    --chat-text-muted: #a0a0a0;
    --chat-sidebar-hover: #2a2a2a;
    --chat-dropdown-bg: #1e1e1e;
}

[data-theme="dark"] html,
[data-theme="dark"] body {
    background: var(--chat-bg);
    color: var(--chat-text);
}

/* ==========================================================================
   2. ESTRUTURA GERAL DA INTERFACE (HEADER, SIDEBAR, FOOTER)
   ========================================================================== */
[data-theme="dark"] #ai-chat-sidebar,
[data-theme="dark"] .ai-chat-header,
[data-theme="dark"] #ai-chat-footer,
[data-theme="dark"] header.navbar.bg-white {
    background: var(--chat-surface) !important;
    border-color: var(--chat-border) !important;
    color: var(--chat-text) !important;
}

[data-theme="dark"] header h5 {
    color: var(--chat-text) !important;
}

/* Sidebar e Divisores */
[data-theme="dark"] #ai-chat-sidebar .border-bottom,
[data-theme="dark"] #ai-chat-sidebar .border-top {
    border-color: var(--chat-border) !important;
}

[data-theme="dark"] #ai-chat-sidebar hr {
    border-color: var(--chat-border) !important;
    opacity: 1;
}

[data-theme="dark"] #ai-chat-sidebar .p-3.border-bottom img {
    filter: invert(1) grayscale(1) brightness(2);
    transition: filter 0.3s ease;
}

[data-theme="dark"] .ai-conversation-section,
[data-theme="dark"] aside h6,
[data-theme="dark"] .text-secondary {
    color: var(--chat-text-muted) !important;
}

[data-theme="dark"] .ai-conversation:hover,
[data-theme="dark"] #ai-conversations .list-group-item:hover {
    background-color: var(--chat-sidebar-hover);
}

/* ==========================================================================
   3. MENSAGENS E BALÕES DO CHAT
   ========================================================================== */
[data-theme="dark"] .ai-message.assistant {
    background: rgba(30, 30, 30, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .ai-message.user {
    background: rgba(13, 110, 253, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   4. FORMULÁRIOS, INPUTS E DROPDOWNS
   ========================================================================== */
[data-theme="dark"] .form-control {
    background-color: #2a2a2a;
    border-color: var(--chat-border);
    color: var(--chat-text);
}

[data-theme="dark"] .form-control::placeholder {
    color: #888888;
    opacity: 1;
}

[data-theme="dark"] .form-control:focus {
    background-color: #2a2a2a;
    color: var(--chat-text);
    border-color: var(--chat-primary);
}

/* Dropdowns com efeito Glass */
[data-theme="dark"] .dropdown-menu {
    background: rgba(30, 30, 30, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .dropdown-menu .dropdown-item-text,
[data-theme="dark"] .dropdown-menu .dropdown-item-text strong,
[data-theme="dark"] .dropdown-item {
    color: var(--chat-text) !important;
}

[data-theme="dark"] .dropdown-menu .dropdown-item-text .text-secondary {
    color: var(--chat-text-muted) !important;
}

[data-theme="dark"] .dropdown-menu .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
    opacity: 1;
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--chat-sidebar-hover);
    color: var(--chat-text);
}

[data-theme="dark"] .dropdown-menu .dropdown-item.text-danger {
    color: #ff6b6b !important;
}

[data-theme="dark"] .dropdown-menu .dropdown-item.text-danger:hover {
    background-color: rgba(255, 107, 107, 0.15) !important;
    color: #ff8787 !important;
}

/* ==========================================================================
   5. BOTÕES E AÇÕES DO FOOTER
   ========================================================================== */
[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-outline-secondary {
    background-color: #2a2a2a;
    border-color: var(--chat-border);
    color: var(--chat-text);
}

[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #333333;
    color: #ffffff;
}

/* Botões de Voz e Live */
[data-theme="dark"] #btn-voice,
[data-theme="dark"] #btnLive {
    background-color: var(--chat-surface) !important;
    border-color: var(--chat-border) !important;
    color: var(--chat-text) !important;
}

[data-theme="dark"] #btn-voice i,
[data-theme="dark"] #btnLive svg,
[data-theme="dark"] #btnLive .live-icon {
    color: var(--chat-text) !important;
    stroke: var(--chat-text) !important;
}

[data-theme="dark"] #btn-voice:hover,
[data-theme="dark"] #btnLive:hover {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

[data-theme="dark"] #btnLive:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

[data-theme="dark"] #btn-voice:disabled,
[data-theme="dark"] #btnLive:disabled {
    background-color: #181818 !important;
    border-color: var(--chat-border) !important;
    opacity: 0.35;
    cursor: not-allowed;
}

[data-theme="dark"] #ai-chat-send:disabled {
    background-color: #2c2c2c !important;
    border-color: #2c2c2c !important;
    opacity: 0.4;
}

/* ==========================================================================
   6. COMPONENTES E OVERLAYS (CARDS, TOASTS, CARREGAMENTO)
   ========================================================================== */
[data-theme="dark"] #pwa-install-bar {
    background: rgba(30, 30, 30, 0.85);
    border: 1px solid var(--chat-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--chat-text);
}

[data-theme="dark"] .ai-limit-card {
    background: var(--chat-surface) !important;
    border-color: var(--chat-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
    color: var(--chat-text) !important;
}

[data-theme="dark"] .ai-limit-card p {
    color: var(--chat-text) !important;
}

[data-theme="dark"] .ai-limit-overlay {
    background: rgba(18, 18, 18, 0.65) !important;
}

[data-theme="dark"] #voice-loading,
[data-theme="dark"] #live-loading {
    color: var(--chat-text) !important;
}

[data-theme="dark"] #voice-loading .spinner-border,
[data-theme="dark"] #live-loading .spinner-border {
    color: var(--chat-primary) !important;
}

/* Toasts */
[data-theme="dark"] .toast,
[data-theme="dark"] .toast-container .toast,
[data-theme="dark"] .toast-header {
    background-color: var(--chat-surface) !important;
    border-color: var(--chat-border) !important;
    color: var(--chat-text) !important;
}

[data-theme="dark"] .toast {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .toast-header {
    border-bottom: 1px solid var(--chat-border) !important;
}

[data-theme="dark"] .toast-header strong,
[data-theme="dark"] .toast-body {
    color: var(--chat-text) !important;
}

[data-theme="dark"] .toast .btn-close,
[data-theme="dark"] #modalFeedback .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==========================================================================
   7. MODAIS (FEEDBACK E CONFIRMAÇÃO)
   ========================================================================== */
[data-theme="dark"] #modalFeedback .modal-content,
[data-theme="dark"] #modalConfirmacao .modal-content {
    background-color: var(--chat-surface) !important;
    border-color: var(--chat-border) !important;
    color: var(--chat-text) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] #modalFeedback .modal-header,
[data-theme="dark"] #modalFeedback .modal-footer,
[data-theme="dark"] #modalConfirmacao .modal-header,
[data-theme="dark"] #modalConfirmacao .modal-footer {
    border-color: var(--chat-border) !important;
}

[data-theme="dark"] #modalFeedback .modal-title,
[data-theme="dark"] #modalFeedback .form-check-label,
[data-theme="dark"] #modalConfirmacao .modal-title,
[data-theme="dark"] #modalConfirmacao .modal-body {
    color: var(--chat-text) !important;
}

[data-theme="dark"] #modalFeedback .form-check-input {
    background-color: #2a2a2a;
    border-color: var(--chat-border);
}

[data-theme="dark"] #modalFeedback .form-check-input:checked {
    background-color: var(--chat-primary);
    border-color: var(--chat-primary);
}

[data-theme="dark"] #modalFeedback .btn-secondary,
[data-theme="dark"] #modalConfirmacao .btn-secondary {
    background-color: #2a2a2a;
    border-color: var(--chat-border);
    color: var(--chat-text);
}

[data-theme="dark"] #modalFeedback .btn-secondary:hover,
[data-theme="dark"] #modalConfirmacao .btn-secondary:hover {
    background-color: #333333;
    color: #ffffff;
}

/* ==========================================================================
   8. EFEITO WEBGL E LAYOUT MODO LIVE
   ========================================================================== */
#ai-chat-main {
    position: relative !important;
    overflow: hidden !important;
}

.live-webgl-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.35;
}

#ai-chat-main > header,
#ai-chat-footer {
    position: relative;
    z-index: 2;
}

#ai-chat-messages {
    position: relative !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 30px !important;
    z-index: 1 !important;
    background: transparent !important;
}

#ai-chat-messages .ai-message {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   9. RESPONSIVIDADE
   ========================================================================== */
@media (max-width: 768px) {
    #ai-chat-sidebar {
        background: var(--chat-surface);
    }
}