body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #1e293b, #0f172a);
}

/* CONTENEDOR */
.chat-container{
    display:flex;
    flex-direction:column;
    height:100vh;
}

/* HEADER */
.chat-header{
    background: rgba(15,23,42,0.9);
    backdrop-filter: blur(10px);
    color:white;
    padding:15px;
    text-align:center;
    font-size:18px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

/* MENSAJES */
.chat-mensajes{
    flex:1;
    overflow-y:auto;
    padding:25px;
    display:flex;
    flex-direction:column;
    gap:15px;
}

/* BURBUJAS */
.mensaje{
    max-width:65%;
    padding:14px 18px;
    border-radius:18px;
    font-size:14px;
    line-height:1.5;
    animation: fadeIn 0.3s ease;
}

/* USUARIO */
.usuario{
    align-self:flex-end;
    background: linear-gradient(135deg,#3b82f6,#2563eb);
    color:white;
    border-bottom-right-radius:5px;
    box-shadow:0 4px 15px rgba(0,0,0,0.2);
}

/* BOT */
.bot{
    align-self:flex-start;
    background:#1e293b;
    color:#e2e8f0;
    border:1px solid rgba(255,255,255,0.1);
    border-bottom-left-radius:5px;
}

/* INPUT */
.chat-input{
    display:flex;
    padding:15px;
    background:#0f172a;
    border-top:1px solid rgba(255,255,255,0.1);
}

.chat-input input{
    flex:1;
    padding:12px;
    border-radius:25px;
    border:none;
    outline:none;
    background:#1e293b;
    color:white;
}

.chat-input button{
    margin-left:10px;
    padding:10px 20px;
    border:none;
    border-radius:25px;
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    color:white;
    cursor:pointer;
}

/* PRODUCTOS */
.producto{
    background:#0f172a;
    padding:10px;
    margin-top:10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.1);
}

/* ANIMACIÓN */
@keyframes fadeIn {
    from {opacity:0; transform:translateY(10px);}
    to {opacity:1; transform:translateY(0);}
}