/* app.html — estilos da página (antes em <style> inline). */

body { background-color: #f1f5f9; color: #1e293b; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeUp 0.3s ease forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.upload-zone { border: 2px dashed #cbd5e1; background: #f8fafc; transition: all 0.2s; }
.upload-zone:hover { border-color: #0891b2; background: rgba(8,145,178,0.03); }

.premium-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.05), 0 4px 16px rgba(15,23,42,0.04);
    padding: 1.5rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.premium-card:hover { border-color: #bfdbfe; box-shadow: 0 2px 8px rgba(15,23,42,0.07), 0 8px 24px rgba(15,23,42,0.06); }

.dark-input { background: #ffffff; border: 1.5px solid #e2e8f0; color: #0f172a; transition: all 0.15s; }
.dark-input:focus { border-color: #0891b2; box-shadow: 0 0 0 3px rgba(8,145,178,0.1); outline: none; }

select.dark-input, select[class*="dark-input"] { background: #ffffff; color: #0f172a; }

.nav-btn { color: #64748b; transition: all 0.15s; border-left: 3px solid transparent; }
.nav-btn:hover { background: #f1f5f9; color: #0f172a; }
.nav-btn.active { background: rgba(8,145,178,0.08); color: #0891b2; border-left-color: #0891b2; }

/* Sub-abas das telas (role="tablist") */
.subaba-btn { color: #475569; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .6rem .9rem; font-size: .8125rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; border-radius: .5rem .5rem 0 0; transition: all .15s; }
.subaba-btn:hover { color: #0f172a; background: #f1f5f9; }
.subaba-btn[aria-selected="true"] { color: #0891b2; border-bottom-color: #0891b2; background: rgba(8,145,178,0.06); }
.subaba-btn:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }
[data-subaba-painel][hidden], [data-subaba-visivel][hidden] { display: none !important; }

/* ── Overrides de texto dark → light ── */
.text-white { color: #0f172a !important; }
.text-slate-300 { color: #475569 !important; }
.text-slate-400 { color: #5b6b80 !important; }
/* Contraste AA (4.5:1) sobre os fundos claros do painel (#fff, #f8fafc, #f1f5f9, #e8edf3):
   #94a3b8 dava ~2.6:1; #5b6b80 fica entre 4.6 e 5.4. */
.text-slate-500 { color: #5b6b80 !important; }
.text-slate-600 { color: #5b6b80 !important; }

/* Remover neon glows */
.neon-glow { color: #0891b2 !important; text-shadow: none !important; }
/* ── Fundos hardcoded escuros → light ── */
#chat-body, #drawer-body { background: #f8fafc !important; }
/* o '#' precisa de escape no seletor: sem ele a regra inteira era descartada e o chat ficava escuro
   com o texto já clareado para o tema claro (contraste ~2,4:1 — tests/contraste.test.js) */
.bg-\[\#0b0b0e\], .bg-\[\#050505\], .bg-\[\#121214\], .bg-\[\#0a0f1c\] { background: #f8fafc !important; }
.from-\[\#0b0b0e\] { --tw-gradient-from: #f8fafc !important; }
.to-\[\#050505\]   { --tw-gradient-to: #f1f5f9  !important; }

/* Slate backgrounds escuros → claros */
.bg-slate-800   { background-color: #e8edf3 !important; }
.bg-slate-700   { background-color: #f1f5f9 !important; }
.hover\:bg-slate-800:hover, .hover\:bg-slate-700:hover { background-color: #e2e8f0 !important; }
.border-slate-700, .border-slate-800 { border-color: #e2e8f0 !important; }

/* Sidebar rodapé */
aside .border-t { background: #f8fafc !important; }

/* OAuth overlay em light */
#oauth-callback-overlay { background: linear-gradient(135deg, #f0f9ff, #e0f2fe) !important; }
#oauth-callback-overlay > div:first-child { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 4px 20px rgba(8,145,178,0.12) !important; }
#oauth-callback-overlay h2 { color: #0f172a !important; }
#oauth-callback-overlay span { color: #64748b !important; }

/* Scrollbar custom */
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

/* Misc */
button:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
#sidebar.open { transform: translateX(0); }
@media (max-width: 768px) {
    .nav-btn { min-height: 44px; }
    button, [role="button"] { min-height: 44px; }
    .premium-card { padding: 1rem; }
}
#chat-body { overflow-x: hidden; }