/* Configurações Gerais */
html {
    scroll-behavior: smooth;
}

/* === LAYOUT PADRÃO: DESKTOP === */
/* A tela é 100% funcional, com 3 colunas, por padrão. */
.layout-grid {
    display: grid;
    /* Colunas: Sidebar, Conteúdo Principal e Leitor (com tamanhos iguais) */
    grid-template-columns: 60px 1fr 1fr; 
    grid-template-rows: 100vh;
    gap: 0;
}


/* === LAYOUT RESPONSIVO: TABLET E CELULAR === */
/* Para qualquer tela com largura de 1024px ou menos. */
@media (max-width: 1024px) {
    /* 1. Esconde o menu lateral e o painel de chat */
    .sidebar-menu,
    #main-content-panel {
        display: none !important;
    }

    /* 2. Ajusta o grid para ter apenas uma coluna */
    .layout-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    /* 3. Força a exibição do painel do leitor e remove sua borda */
    .reader-panel {
        display: flex !important; /* Garante que este painel seja exibido */
        border-left: none;
    }
}


/* === ESTILOS ADICIONAIS === */

/* Scrollbar Customizada */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

/* Efeitos e Transições */
.smooth-transition { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.9); }

/* Sombras */
.shadow-soft { box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08); }
.shadow-medium { box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12); }

/* Gradientes */
.gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Efeitos de Hover */
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Estados Iniciais e Classes Utilitárias */
#login-screen, #main-app { transition: opacity 0.3s ease; }
.hidden { display: none !important; }
.desktop-only { display: block; }
@media (max-width: 1024px) {
    .desktop-only { display: none !important; }
}