:root{
    --chat-primary: #e9660e; /* color principal */
    --chat-bg: #ffffff53;      /* fondo ventana */
    --chat-text: #0f172a;    /* texto principal */
    --chat-muted: #64748b;   /* texto secundario */
    --chat-shadow: 0 10px 30px rgba(2, 6, 23, .2);
    --chat-radius: 14px;
    }
  /* Botón flotante */
    .chat-fab{
        position: fixed;
        right: 18px;
        bottom: 18px;
        width: 56px; height: 56px;
        border-radius: 50%;
        border: 0;
        cursor: pointer;
        box-shadow: var(--chat-shadow);
        background: var(--chat-primary);
        color: #fff;
        display: grid; place-items: center;
        font-size: 24px;
        z-index: 9999;
    }
    .chat-fab:focus{ outline: 2px solid #fff; outline-offset: 2px; }

    /* Ventana */
    .chat-window{
        position: fixed;
        right: 18px;
        bottom: 86px;
        width: min(360px, 92vw);
        height: 520px;
        background: var(--chat-bg);
        color: var(--chat-text);
        box-shadow: var(--chat-shadow);
        border-radius: var(--chat-radius);
        display: none; /* se muestra al abrir */
        overflow: hidden;
        z-index: 9999;
    }
    .chat-window.open{ display: grid; grid-template-rows: auto 1fr auto; }

    .chat-header{
        padding: 12px 16px;
        background: linear-gradient(0deg, var(--chat-primary), var(--chat-primary));
        color: #fff;
        display: flex; align-items: center; justify-content: space-between;
    }
    .chat-header h3{
        margin: 0; font-size: 16px; font-weight: 600;
    }
    .chat-actions{
        display: flex; gap: 8px;
    }
    .chat-actions button{
        background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 18px;
    }
    .chat-body{
        padding: 12px; overflow-y: auto; background: var(--chat-bg);
    }
    .chat-footer{
        padding: 10px; background: #fff; border-top: 1px solid #e2e8f0;
        display: grid; grid-template-columns: 1fr auto; gap: 8px;
    }
    .chat-input{
        border: 1px solid #cbd5e1; border-radius: 999px; padding: 10px 14px; font-size: 14px;
        color: var(--chat-text);
    }
    .send-btn{
        border: 0; border-radius: 999px; padding: 0 14px; font-weight: 600;
        background: var(--chat-primary); color: #fff; cursor: pointer;
    }
    .send-btn:disabled{ opacity: .5; cursor: not-allowed; }

    /* Mensajes */
    .msg{
        display: inline-block;
        /*max-width: 80%;
        margin: 6px 0;*/
        padding: 8px 12px;
        border-radius: 14px;
        line-height: 1.35;
        font-size: 14px;
        position: relative;
        word-wrap: break-word;
    }
    .msg-row{ display: flex; }
    .msg.user{ background: var(--chat-primary); color: #fff; border-bottom-right-radius: 4px; }
    .msg.bot{ background: #fff; color: var(--chat-text); border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; }
    .msg-row.user{ justify-content: flex-end; }
    .msg-row.bot{ justify-content: flex-start; }
    .msg-time{
        font-size: 11px; color: var(--chat-muted); margin-top: 2px;
    }
    .typing{
        display: inline-flex; gap: 4px; align-items: center; color: var(--chat-muted); font-size: 13px;
    }
    .dot{ width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: bounce 1.2s infinite; }
    .dot:nth-child(2){ animation-delay: .15s; }
    .dot:nth-child(3){ animation-delay: .3s; }
    @keyframes bounce{ 0%, 80%, 100%{ transform: scale(0); } 40%{ transform: scale(1); } }

    /* Accesibilidad visual al foco dentro de la ventana */
    .chat-window :focus-visible{ outline: 2px solid var(--chat-primary); outline-offset: 2px; }

    .msg-name {
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 2px;
        color: var(--chat-muted);
    }