/* ================================================
   LOHMIA CHAT - LAYOUT FINAL v6
   ================================================
   - Burbujas bot: 60px desde borde izquierdo
   - Burbujas usuario: alineadas con "Lohmia:" (dinámico via JS)
   - Input: 20px desde bordes
   ================================================ */

@media screen and (min-width: 769px) {

    /* === MAIN CONTENT === */
    .main-content {
        margin-left: 300px !important;
        width: calc(100vw - 300px) !important;
        padding: 10px 16px !important;  /* optimizado para móvil */
        display: flex !important;
        flex-direction: column !important;
    }

    /* === CHAT CONTAINER - 20px padding === */
    .chat-container {
        width: 100% !important;
        padding: 20px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
    }

    /* === HEADER === */
    .header {
        width: 100% !important;
        padding: 16px 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    /* === MESSAGES CONTAINER === */
    .messages,
    #messagesContainer {
        flex: 1 !important;
        width: 100% !important;
        padding: 10px 16px !important;  /* optimizado para móvil */
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    /* === BURBUJAS BOT - 60px desde borde === */
    .message:not(.user) {
        width: auto !important;
        max-width: calc(100% - 120px) !important;
        margin: 10px 40px !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        align-self: flex-start !important;
    }

    /* === BURBUJAS USUARIO - margin-left dinámico via JS === */
    .message.user {
        width: auto !important;
        max-width: none !important;
        margin-right: 0px !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        align-self: flex-start !important;
    }

    /* === INPUT AREA === */
    .input-area {
        width: 100% !important;
        padding: 16px 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    /* === SIDEBAR === */
    .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 300px !important;
        height: 100vh !important;
        z-index: 100 !important;
    }

    /* === HIDE HAMBURGER === */
    .hamburger-menu,
    #hamburgerMenu {
        display: none !important;
    }
}

/* === SCROLLBAR === */
.messages::-webkit-scrollbar {
    width: 8px;
}
.messages::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}
.messages::-webkit-scrollbar-thumb {
    background: rgba(255, 165, 0, 0.5);
    border-radius: 4px;
}
.messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 165, 0, 0.7);
}