/* public/css/chat/layout.css
   Versión corregida: responsive, scoping a #chatView, overflow seguro para sidebars
*/

/* layout base */
.app-layout {
    display: flex;
    height: 100%;
    width: 100%;
}

.sidebar {
    height: 100%;
    background-color: var(--sidebar-bg);
    padding: 1.5rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-section {
    margin-bottom: 2rem;
}

.sidebar-section h2,
.sidebar-section h3 {
    margin-top: 0;
    font-size: 1.4rem;
    color: var(--text-color);
}

.sidebar-section h3 {
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #95a5a6;
    margin-top: 1.5rem;
}

/* ancho por defecto (respetando variables si existen) */
.left-sidebar {
    width: var(--left-sidebar-width, 280px);
    border-right: 1px solid var(--border-color);
    box-sizing: border-box;
}

.right-sidebar {
    width: var(--right-sidebar-width, 280px);
    border-left: 1px solid var(--border-color);
    box-sizing: border-box;
}

.chat-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fafafa;
    overflow: hidden;
}

.chat-header {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    background-color: white;
    color: var(--text-color);
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.chat-header h1 {
    font-size: 1.3rem;
    margin: 0;
    flex-grow: 1;
    text-align: center;
}

.chat-messages {
    flex-grow: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
    align-items: stretch;
    width: 100%;
}

/* formulario de mensaje */
.chat-input-form {
    display: flex;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    gap: 0.75rem;
    background-color: white;
    flex-shrink: 0;
}

/* ocultar formulario cuando no hay sala activa */
.chat-input-form.hidden,
body.no-room .chat-input-form {
    display: none !important;
}

/* -------------------------
   OVERLAY Y RESPONSIVE SIDEBARS
   ------------------------- */

/* overlay móvil (presente siempre; controlado por opacity/pointer-events) */
#mobileOverlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.45);
    z-index: 1001;
    pointer-events: none; /* inactivo por defecto */
    opacity: 0;
    transition: opacity 200ms ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* overlay visible cuando las clases móviles están presentes */
body.left-sidebar-open #mobileOverlay,
body.right-sidebar-open #mobileOverlay,
body.left-open #mobileOverlay,
body.right-open #mobileOverlay {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================
   PREVENCIÓN: sidebars no deben estirarse
   ========================================= */
.left-sidebar,
.right-sidebar {
    box-sizing: border-box;
    height: 100%;
    max-width: var(--left-sidebar-width, 320px);
    width: 100%;
    overflow-y: auto; /* scroll interno */
    -webkit-overflow-scrolling: touch;
}

/* listas internas: no empujan el contenedor, hacen scroll interno */
.room-list,
.user-list,
.private .room-list,
.private-chat-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: calc(100vh - 140px); /* ajustar si header cambia de alto */
    overflow-y: auto;
}

/* romper palabras largas para no empujar ancho */
.left-sidebar .room-list li,
.right-sidebar .user-list li {
    word-break: break-word;
}

/* =========================
   DESKTOP (desktop-first)
   ========================= */
/* por defecto ocultamos los toggles en desktop (específico y fuerte) */
.sidebar-toggle {
    display: none !important;
}

/* para pantallas grandes el overlay no se muestra ni interfiere */
@media (min-width: 769px) {
    #mobileOverlay {
        display: none !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    .left-sidebar,
    .right-sidebar {
        transform: none !important;
        position: static !important;
        box-shadow: none !important;
    }

    /* si tenías regla que mostraba toggles en desktop por error, forzamos ocultarlo */
    #chatView .sidebar-toggle {
        display: none !important;
    }
}

/* =========================
   MÓVIL (solo en #chatView)
   ========================= */
@media (max-width: 768px) {
    /* mostrar toggles solo dentro de la vista de chat (evita iconos en lobby/profile) */
    #chatView .sidebar-toggle {
        display: block !important;
    }

    /* sidebars en móvil: off-canvas y animados */
    .left-sidebar,
    .right-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 1002;
        background: var(--sidebar-bg, #fff);
        transition: transform 0.28s ease;
        height: 100vh;
        width: var(--left-sidebar-width, 280px);
    }

    .left-sidebar {
        left: 0;
        transform: translateX(-100%);
        box-shadow: 5px 0 20px rgba(0,0,0,0.08);
    }

    .right-sidebar {
        right: 0;
        transform: translateX(100%);
        box-shadow: -5px 0 20px rgba(0,0,0,0.08);
    }

    /* clases que activa JS para mostrar sidebars */
    body.left-sidebar-open .left-sidebar,
    body.left-open .left-sidebar {
        transform: translateX(0) !important;
    }

    body.right-sidebar-open .right-sidebar,
    body.right-open .right-sidebar {
        transform: translateX(0) !important;
    }

    /* overlay visible cuando clase mobile-open */
    body.left-sidebar-open #mobileOverlay,
    body.right-sidebar-open #mobileOverlay,
    body.left-open #mobileOverlay,
    body.right-open #mobileOverlay {
        opacity: 1;
        pointer-events: auto;
    }
}

/* -------------------------------------
   Ajuste: ocultar barra derecha si no hay sala (mantener)
   ------------------------------------- */
#rightSidebar.no-room {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

/* Estado vacío (centrado cuando no hay sala activa) */
.empty-chat-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
    color: #7f8c8d;
}