* { box-sizing:border-box; margin:0; padding:0; }

body {
    font-family: 'Inter', sans-serif;
    background-color: #f7f7f8;
    color: #1a1a1a;
    min-height: 100vh;
    margin:0;
}


.dashboard-container {
    display: flex;
    height: 100vh;
    width: 100%;
}


.sidebar {
    width: 240px;
    background-color: #171c24;
    color: #e2e2e2;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid #e0e0e0;
}

.sidebar-header { padding:24px 20px; text-align:center; font-size:1.4em; font-weight:700; }
.sidebar-nav ul { list-style:none; padding:10px; }
.sidebar-nav li a {
    display:block;
    padding:12px 15px;
    color:#c0c0c0;
    text-decoration:none;
    border-radius:8px;
    transition: background-color 0.2s, color 0.2s;
}
.sidebar-nav li a:hover { background-color:#2c333e; color:#fff; }
.sidebar-nav li.active a { background-color:#2563eb; color:#fff; font-weight:500; }
.sidebar-nav li.disabled { opacity:0.5; cursor:not-allowed; }


.main-content {
    flex-grow:1;
    display:flex;
    justify-content:center; /* SOLO DESKTOP: centramos chat */
    align-items:center;
    position:relative;
    padding:20px;
}


.chat-container {
    width:100%;
    max-width:800px;
    border-radius:20px;
    background-color:#f7f7f8;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    height:calc(100vh - 40px);
    position:relative;
    padding-bottom:70px; /* espacio para input */
}

.chat-messages {
    flex-grow:1;
    padding:20px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.chat-welcome-screen { text-align:center; margin:auto; color:#888; }
.welcome-logo { font-size:3rem; margin-bottom:1rem; }

.chat-message {
    padding:12px 18px;
    border-radius:20px;
    max-width:85%;
    word-wrap:break-word;
    font-size:1rem;
    line-height:1.6;
}
.user-message { background-color:#2563eb; color:#fff; align-self:flex-end; border-radius:20px; }
.bot-message { background-color:#fff; color:#1a1a1a; align-self:flex-start; border:1px solid #e5e7eb; border-radius:20px; }


.chat-input-container {
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:800px;
    display:flex;
    align-items:center;
    padding:10px 15px;
    z-index:1001;
}

#user-input {
    flex-grow:1;
    border:1px solid #ccc;
    border-radius:25px;
    padding:15px 50px 15px 20px;
    font-size:1rem;
    outline:none;
    background-color:#fff;
}

#user-input:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,0.2); }

#send-button {
    position:absolute;
    right:25px;
    height:40px;
    width:40px;
    background-color:#2563eb;
    color:#fff;
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:0.3s;
}
#send-button:hover { background-color:#1d4ed8; }
#send-button:disabled { background-color:#93c5fd; cursor:not-allowed; }


.mobile-header { display:none; }
.overlay {
    display:none;
    position:fixed; top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.5);
    z-index:999;
}
.overlay.show { display:block; }

@media(max-width:768px){

    .sidebar {
        position:fixed;
        top:0; left:0;
        transform:translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index:1000;
        height:100%;
        box-shadow:2px 0 15px rgba(0,0,0,0.2);
    }
    .sidebar.show { transform:translateX(0); }

    .main-content {
        width:100%;
        height:100vh;
        justify-content:flex-start;  /* importante: no centrar en m¨®vil */
        align-items:stretch;
        flex-direction:column;
        padding:0;
    }

    .mobile-header {
        display:flex;
        align-items:center;
        padding:10px 15px;
        background-color:#fff;
        border-bottom:1px solid #e5e7eb;
        flex-shrink:0;
        z-index:1100;
    }

    .menu-toggle {
        background:none; border:none; cursor:pointer; padding:5px; margin-right:15px;
    }

    .chat-container {
        max-width:100%;
        height:calc(100vh - 60px);
        border-radius:0;
        padding-bottom:70px;
    }

    .chat-messages { padding:15px 10px; }
    #user-input { padding:12px 45px 12px 15px; font-size:0.9rem; }
    #send-button { right:15px; height:38px; width:38px; }
}