/* assets/css/dashboard.css - COMPLETO E CORRIGIDO */
:root { --primary: #FFAA17; --bg: #080808; --card: #0D0D0D; --border: #222; --text: #fff; --text-dim: #666; }

* { box-sizing: border-box; }

body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; margin: 0; display: flex; overflow-x: hidden; }

/* --- SIDEBAR (ASIDE) --- */
aside { 
    width: 260px; height: 100vh; background: #000; border-right: 1px solid var(--border); 
    position: fixed; padding: 20px; z-index: 1001; display: flex; flex-direction: column; 
    overflow-y: auto; overflow-x: hidden;
}

aside ul, aside li { list-style: none; padding: 0; margin: 0; width: 100%; }

nav a, .nav-item { 
    display: flex; align-items: center; gap: 10px; color: var(--text-dim); 
    text-decoration: none; padding: 12px; border-radius: 8px; margin-bottom: 5px; 
    transition: 0.3s; font-size: 14px; cursor: pointer;
}

nav a:hover, nav a.active, .nav-dropdown.open > .nav-item { background: rgba(255,170,23,0.1); color: var(--primary); }

.sidebar-logo { margin-bottom: 30px; text-align: center; width: 100%; }
.sidebar-logo img { max-width: 50%; height: auto; display: inline-block; }

.chevron { margin-left: auto; transition: 0.3s; }
.dropdown-content { display: none; list-style: none; padding-left: 20px; }
.dropdown-content a { font-size: 13px; opacity: 0.7; }
.nav-dropdown.open .dropdown-content { display: block; }
.nav-dropdown.open .chevron { transform: rotate(180deg); }

/* --- ESTRUTURA PRINCIPAL --- */
main { margin-left: 260px; width: calc(100% - 260px); min-height: 100vh; position: relative; }
header { 
    padding: 20px 40px; border-bottom: 1px solid var(--border); display: flex; 
    justify-content: space-between; align-items: center; background: rgba(8,8,8,0.8); 
    backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 1000; 
}
.content { padding: 40px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 25px; }

/* --- BOTÕES E INPUTS PADRONIZADOS --- */
.btn-primary { 
    background: var(--primary) !important; color: #000 !important; border: none !important; 
    padding: 14px 20px !important; border-radius: 10px !important; font-weight: 700 !important; 
    cursor: pointer !important; font-size: 14px !important; transition: 0.2s !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    text-transform: uppercase;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-primary:disabled { background: #444 !important; color: #888 !important; cursor: not-allowed; }
.btn-block { width: 100% !important; display: flex !important; }

input, select, textarea { 
    width: 100%; background: #141414; border: 1px solid var(--border); padding: 14px; 
    color: #fff; border-radius: 10px; box-sizing: border-box; transition: 0.3s;
}
input:focus { border-color: var(--primary); outline: none; background: #1a1a1a; }

.pass-group { position: relative; display: flex; align-items: center; width: 100%; }
.pass-group input { padding-right: 45px; }
.btn-toggle-eye { 
    position: absolute; right: 12px; background: none; border: none; color: var(--text-dim); 
    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: 0.2s; 
}
.btn-toggle-eye svg { width: 20px; height: 20px; }

.nav-user { transition: 0.3s; text-decoration: none; }
.btn-perfil-header { display: block; line-height: 1; margin-top: 2px; }
.nav-user:hover .btn-perfil-header { color: var(--primary) !important; }
.nav-user:hover { background: rgba(255, 255, 255, 0.05); }

/* --- GRID DE SELEÇÃO DE MARCAS --- */
.brand-selection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }

.brand-access-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 15px !important; display: flex !important; align-items: center !important;
    gap: 15px !important; cursor: pointer; transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.brand-access-card:hover { border-color: var(--primary) !important; background: #121212 !important; transform: translateY(-3px); }

.brand-access-card .logo-box {
    width: 48px !important; height: 48px !important; background: #000; border-radius: 8px;
    border: 1px solid #1a1a1a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
}
.brand-access-card .logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }

.brand-access-card .brand-info h4 { margin: 0 !important; font-size: 15px !important; color: #fff !important; font-weight: 600; }
.brand-access-card .brand-info small { color: var(--text-dim) !important; font-size: 10px !important; text-transform: uppercase; display: block; margin-top: 3px; }

/* --- DASHBOARD DE RESULTADOS (QUADROS) --- */
.branding-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dashboard-item { display: flex; flex-direction: column; gap: 12px; }
.dashboard-item label { font-size: 10px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; }
.content-box { font-size: 14px; color: #ccc; line-height: 1.6; min-height: 100px; }
.content-box em { color: #444; font-style: italic; }

/* --- MODAIS GERAIS --- */
.modal-guto { 
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); 
    align-items: center; justify-content: center; z-index: 2000; 
}

/* --- MODAL FULL E CHAT --- */
@keyframes modalShow {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.modal-full {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.98); backdrop-filter: blur(15px); z-index: 9999;
}

.modal-chat-content {
    max-width: 800px; margin: 0 auto; height: 100%; background: #050505;
    display: flex; flex-direction: column; animation: modalShow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

/* NOVO: Cabeçalho do Chat */
.modal-chat-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 30px; background: #0D0D0D; border-bottom: 1px solid var(--border);
}
.modal-chat-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #fff; }
.btn-close-modal { background: none; border: none; color: #888; font-size: 28px; cursor: pointer; transition: 0.2s; line-height: 1; }
.btn-close-modal:hover { color: #ff4444; }

/* NOVO: Área de rolagem das mensagens */
.chat-flow {
    flex: 1; overflow-y: auto; padding: 30px; display: flex; flex-direction: column; gap: 20px;
}
.chat-flow::-webkit-scrollbar { width: 6px; }
.chat-flow::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }

/* NOVO: Rodapé do Chat (Input e Botões) */
.chat-footer {
    padding: 20px 30px; background: #0D0D0D; border-top: 1px solid var(--border);
}

/* NOVO: Input do Chat */
.input-group-custom { display: flex; gap: 10px; width: 100%; }
.input-group-custom input { flex: 1; background: #141414; border: 1px solid var(--border); }
.input-group-custom input:focus { border-color: var(--primary); }

/* Animações e Estilos das Mensagens */
@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.msg { 
    max-width: 85%; padding: 18px; border-radius: 15px; font-size: 15px; 
    line-height: 1.6; animation: msgIn 0.3s ease-out forwards; 
}
.ai-msg { align-self: flex-start; background: #111; color: #eee; border-bottom-left-radius: 2px; border: 1px solid #1a1a1a; }
.user-msg { align-self: flex-end; background: var(--primary); color: #000; font-weight: 600; border-bottom-right-radius: 2px; }

.options-container { display: flex; gap: 10px; flex-wrap: wrap; animation: msgIn 0.5s ease-out forwards; }
.btn-option {
    background: rgba(255, 170, 23, 0.1); border: 1px solid var(--primary); color: var(--primary);
    padding: 10px 20px; border-radius: 30px; font-size: 13px; font-weight: 700; cursor: pointer; transition: 0.3s;
}
.btn-option:hover { background: var(--primary); color: #000; }

/* --- OVERLAY DE CARREGAMENTO E TOASTS --- */
#loading-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9999; display: none;
    flex-direction: column; align-items: center; justify-content: center;
}
.loader-circle {
    width: 60px; height: 60px; border: 3px solid #111; border-top: 3px solid var(--primary); 
    border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.toast { background: #111; border: 1px solid var(--primary); color: #fff; padding: 15px 25px; border-radius: 12px; margin-bottom: 10px; position: relative; z-index: 9999; }
.separator { height: 1px; background: var(--border); margin: 15px 0; list-style: none; }
.btn-logout { color: #ff4444 !important; }

/* Estilização da Barra de Rolagem Global (Webkit - Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #000; /* Fundo da barra */
}

::-webkit-scrollbar-thumb {
    background: #222; /* Cor da "alça" */
    border-radius: 10px;
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary); /* Destaque ao passar o mouse */
}

/* Aplicando especificamente na Sidebar para garantir o visual */
.sidebar-scroll::-webkit-scrollbar {
    width: 4px; /* Ainda mais fina na lateral */
}

.sidebar-scroll {
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #222 #000; /* Firefox */
}