/* ────────────────────────────────────────────────
   CONTENEDOR PRINCIPAL DEL CHAT
   ──────────────────────────────────────────────── */
#maria-camila-chat{
    width:100%;
    max-width:600px;
    min-width:280px;               /* se reduce en móviles */
    margin:20px auto;
    border:1px solid #ddd;
    padding:10px;
    border-radius:10px;
    background:#f9f9f9;
    font-family:Arial, sans-serif;

    height:85vh;                   /* proporción flexible */
    min-height:520px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-sizing:border-box;
}

/* ────────────────────────────────────────────────
   CHATBOX (zona de mensajes)
   ──────────────────────────────────────────────── */
#chatbox{
    flex:1 1 auto;
    overflow-y:auto;
    margin-bottom:10px;
    padding:10px;
    background:#fff;
    border-radius:10px;
    border:1px solid #ddd;
    background-size:cover;
    background-position:center;
}

/* ─── Mensajes ─────────────────────────────────── */
.chat-message-wrapper{display:flex;align-items:flex-start;margin-bottom:15px;max-width:95%;}
.chat-avatar-wrapper{width:80px;height:80px;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center;margin-right:10px;}
.chat-avatar,video.chat-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #ddd;}

.chat-message-content{width:calc(100% - 80px);}
.chat-name{font-weight:bold;font-size:17px;color:#555;margin-bottom:5px;}

.chat-message{
    padding:10px;background:#dcf8c6;border-radius:0 10px 10px 10px;
    font-size:16px;white-space:pre-wrap;word-wrap:break-word;max-width:100%;
}
.user-message{
    background:#e3e3e3;border-radius:10px 0 10px 10px;font-size:16px;
    max-width:340px;white-space:pre-wrap;word-wrap:break-word;align-self:flex-end;padding:10px;
}

/* ─── Formulario ──────────────────────────────── */
#user-input,#send-btn,#mic-btn,#reset-btn{width:100%;margin-bottom:10px;}

#user-input{padding:10px;border-radius:5px;border:1px solid #ddd;font-size:16px;}
#send-btn{padding:10px;background:#25d366;color:#fff;border:0;border-radius:5px;font-size:16px;cursor:pointer;}
#send-btn:hover{background:#128c7e;}

#mic-btn{padding:10px;background:#f39c12;color:#fff;border:0;border-radius:5px;font-size:16px;cursor:pointer;}
#mic-btn:hover{background:#e67e22;}
#mic-btn.listening{animation:blink 1s infinite;}

#reset-btn{padding:10px;background:red;color:#fff;border:0;border-radius:5px;font-size:16px;cursor:pointer;}

@keyframes blink{0%{background:#f39c12;}50%{background:#e67e22;}100%{background:#f39c12;}}
/* ────────────────────────────────────────────────
   TABLET (≤ 768 px)
   ──────────────────────────────────────────────── */
@media (max-width:768px){
    #maria-camila-chat{
        height:90vh;
        min-height:520px;
        margin:10px auto;
        padding:8px;
    }
    #user-input,#send-btn,#mic-btn,#reset-btn{margin-bottom:8px;}
}

/* ────────────────────────────────────────────────
   MÓVIL (≤ 480 px) – todos los ajustes
   ──────────────────────────────────────────────── */
@media (max-width:480px){

    /* ► Modal a pantalla completa */
    #maria-camila-modal{
        top:0;                 /* ← NUEVO: ancla también el borde superior  */
        left:0;
        right:0;
        bottom:0;              /* ← NUEVO: asegúrate de mantener bottom     */
        width:100%;
        height:100vh;
        max-height:100vh;
        border-radius:0;
    }

    /* ► Contenedor interno */
    #maria-camila-modal #maria-camila-chat{
        width:100%;height:100%;
        max-width:none;min-width:0;min-height:0;
        margin:0;padding:8px;overflow:hidden;box-sizing:border-box;
    }

    /* ► Chatbox deja sitio a los controles fijos abajo */
    #maria-camila-modal #chatbox{
        flex:1 1 auto;
        max-height:calc(90vh - 155px);   /*  alto del bloque de controles */
    }

    /* ► Controles pegados abajo */
    #input-container{
        position:sticky;
        bottom:0;
        background:#f9f9f9;
        padding-top:4px;
        z-index:1;
        flex-shrink:0;
    }

    /* ► Dimensiones cómodas para táctil */
    .chat-avatar-wrapper{width:60px;height:60px;}
    .chat-message-content{width:calc(100% - 60px);}

    #user-input{padding:8px;font-size:16px;}
    #send-btn,#mic-btn,#reset-btn{padding:8px 16px;font-size:18px;}
}

/* ────────────────────────────────────────────────
   RESPUESTAS / LISTAS / “ESCRIBIENDO…”
   ──────────────────────────────────────────────── */
.chat-message ul,.user-message ul{list-style:disc inside;margin:.5em 0;padding-left:1.2em;}
.chat-message li,.user-message li{margin-bottom:.4em;}

.chat-typing-indicator{
    display:flex;align-items:flex-start;margin-bottom:15px;max-width:95%;
}
.chat-typing-indicator .chat-avatar-wrapper{
    width:50px;height:50px;margin-right:10px;overflow:hidden;border-radius:50%;
}
.chat-typing-indicator .typing-dots{
    display:inline-block;padding:10px;background:#dcf8c6;
    border-radius:0 10px 10px 10px;font-size:18px;letter-spacing:3px;
}
.chat-typing-indicator .typing-dots span{animation:blink 1s infinite;}
.chat-typing-indicator .typing-dots span:nth-child(2){animation-delay:.2s;}
.chat-typing-indicator .typing-dots span:nth-child(3){animation-delay:.4s;}
.typing-dots::before{content:"Escribiendo ";margin-right:2px;animation:none;}

@keyframes blink{0%,20%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}

/* ────────────────────────────────────────────────
   FAB (botón flotante)
   ──────────────────────────────────────────────── */
#maria-camila-launcher{
    position:fixed;bottom:24px;right:24px;width:70px;height:70px;border-radius:50%;
    overflow:hidden;cursor:pointer;z-index:9999;
    box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .2s ease;
}
#maria-camila-launcher:hover{transform:scale(1.06);}
#maria-camila-launcher img,#maria-camila-launcher video{width:100%;height:100%;object-fit:cover;}

/* ────────────────────────────────────────────────
   MODAL FLOTANTE – escritorio / tablet
   ──────────────────────────────────────────────── */
#maria-camila-modal{
    /* 1 ▸ oculto y SIN ocupar espacio sobre la página
          (para que el botón siga siendo clicable)      */
    display:none;                
    position:fixed;
    inset:0;                     /* top:0; right:0; bottom:0; left:0 */
    margin:auto;                 /* lo centra dentro del viewport    */
    width:55vh;                  /* tamaño base (se respeta max-*)   */
    height:90vh;
    max-width:100vw;
    max-height:90vh;

    background:#fff;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    z-index:9998;
    overflow:hidden;             /* evita barras dobles              */
}

/* 2 ▸ cuando el script añade .open lo mostramos */
#maria-camila-modal.open{
    display:block;
}

/* ────────────────────────────────────────────────
   ELEMENTOS VARIOS
   ──────────────────────────────────────────────── */
#maria-camila-chat p{margin:5px 0;padding:8px;border-radius:5px;}
#maria-camila-chat p:nth-child(odd){background:#f1f1f1;}
#maria-camila-chat p:nth-child(even){background:#e8f5e9;}
#status{font-size:14px;color:green;margin-top:5px;}

/* ───────────────────────────────
   OVERLAY oscuro traslúcido
   ─────────────────────────────── */
#maria-camila-overlay{
    display:none;                 /* se muestra con .open          */
    position:fixed;
    inset:0;                      /* ocupa todo el viewport        */
    background:rgba(0,0,0,.55);   /* negro 55 %                    */
    backdrop-filter:blur(2px);    /* opcional: desenfoque suave    */
    z-index:9997;                 /* justo por detrás del modal    */
}

/* cuando el script añade .open */
#maria-camila-overlay.open{display:block;}