/*
 * Estilos customizados para o Super Fala
 * Implementação de tema claro/escuro (light/dark mode)
 */

/* 1. Variáveis CSS para Cores */
:root {
    /* Cores primárias */
    --bs-primary: #007bff; /* Azul padrão do Bootstrap */
    --bs-primary-rgb: 0, 123, 255;
    --bs-success: #28a745;
    --bs-danger: #dc3545;
    --bs-info: #17a2b8;
    --bs-warning: #ffc107;

    /* Cores do tema (Light Mode Default) */
    --body-bg: #f8f9fa; /* bg-light */
    --card-bg: #ffffff; /* bg-white */
    --text-color: #212529; /* text-dark */
    --text-muted: #6c757d; /* text-muted */
    --border-color: #dee2e6; /* border-light */
    --sidebar-bg: #343a40; /* bg-dark */
    --sidebar-text: #ffffff;
    --ia-message-bg: #e9ecef;
    --ia-message-text: #212529;
    --user-message-bg: var(--bs-primary);
    --user-message-text: #ffffff;
    --ia-suggestion-bg: #fff3cd;
    --ia-suggestion-border: #ffc107;
}

/* 2. Dark Mode Overrides */
[data-bs-theme="dark"] {
    --bs-body-bg: #212529; /* bg-dark */
    --bs-body-color: #f8f9fa; /* text-light */
    --bs-body-color-rgb: 248, 249, 250;

    --body-bg: #212529;
    --card-bg: #343a40; /* bg-dark */
    --text-color: #f8f9fa;
    --text-muted: #adb5bd;
    --border-color: #495057;
    --sidebar-bg: #212529;
    --sidebar-text: #f8f9fa;
    --ia-message-bg: #495057;
    --ia-message-text: #f8f9fa;
    --user-message-bg: var(--bs-primary);
    --user-message-text: #ffffff;
    --ia-suggestion-bg: #343a40;
    --ia-suggestion-border: #ffc107;
}

/* 3. Estilos Gerais */
body {
    background-color: var(--body-bg);
    color: var(--text-color);
}

.card {
    background-color: var(--card-bg);
    border-color: var(--border-color) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

/* 4. Estilos da Aplicação (MPA) */

/* Sidebar */
.offcanvas-start {
    width: 280px;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
}

.offcanvas-start .nav-link {
    color: var(--sidebar-text);
}

.offcanvas-start .nav-link.active {
    background-color: var(--bs-primary);
    color: #ffffff;
}

.app-topnav {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
}

.app-topnav .navbar-brand,
.app-topnav .nav-link,
.app-topnav .navbar-toggler {
    color: var(--sidebar-text);
}

.app-topnav .nav-link.active,
.app-topnav .nav-link:focus,
.app-topnav .nav-link:hover {
    color: #ffffff;
}

/* Main Content */
.main-content {
    flex-grow: 1;
    background-color: var(--body-bg);
}

.app-content {
    flex: 1 1 auto;
}

/* Oculta o botão de toggle em telas maiores que md */
@media (min-width: 768px) {
    .sidebar-toggle {
        display: none;
    }
    .offcanvas-md {
        transform: none; /* Mantém a sidebar visível em desktop */
        visibility: visible !important;
        position: relative;
    }
}

/* 5. Estilos da Tela de Chat */
.chat-container {
    height: calc(100vh - 56px); /* Altura da tela menos a navbar */
}

.chat-list {
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    background-color: var(--card-bg);
}

.chat-window {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: var(--body-bg);
}

.message-bubble {
    max-width: 75%;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 10px;
    word-wrap: break-word;
}

.user-message {
    background-color: var(--user-message-bg);
    color: var(--user-message-text);
    margin-left: auto;
}

.ia-message {
    background-color: var(--ia-message-bg);
    color: var(--ia-message-text);
    margin-right: auto;
}

.ia-suggestion {
    background-color: var(--ia-suggestion-bg);
    border-left: 3px solid var(--ia-suggestion-border);
    padding: 8px;
    margin-top: 5px;
    font-size: 0.85rem;
    color: var(--text-color);
}

/* Ajuste para mobile: lista de chats e sidebar de FAQ como offcanvas */
@media (max-width: 767.98px) {
    .chat-container {
        height: calc(100vh - 100px); /* Ajuste para o botão de toggle */
    }
    .chat-list-offcanvas {
        width: 80%;
    }
    .faq-sidebar-offcanvas {
        width: 80%;
    }
}

/* 6. Estilos da Tela de Login/Registro */
.login-container, .register-container {
    max-width: 450px;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

/* 7. Estilos da Tela de Escrita */
.editor-container {
    min-height: 70vh;
}

/* 8. Estilos da Tela de Simulação */
.simulation-window {
    height: calc(100vh - 100px); /* Ajuste para o cabeçalho e rodapé */
    display: flex;
    flex-direction: column;
}

.feedback-box {
    border: 1px solid var(--ia-suggestion-border);
    background-color: var(--ia-suggestion-bg);
    padding: 10px;
    border-radius: 5px;
    margin-top: 5px;
    color: var(--text-color);
}

/* 9. Estilos da Tela de Treinador */
.card-training {
    min-height: 250px;
}

/* 10. Estilos do Theme Toggle (Baseado no template) */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.theme-toggle-btn .theme-icon {
    font-size: 1.1rem;
    line-height: 1;
}

html[data-bs-theme="light"] [data-theme-icon="light"] { display: inline-flex; }
html[data-bs-theme="light"] [data-theme-icon="dark"] { display: none; }
html[data-bs-theme="dark"] [data-theme-icon="light"] { display: none; }
html[data-bs-theme="dark"] [data-theme-icon="dark"] { display: inline-flex; }