/* =====================================================
   MENTOR H · HM CONSULTORES
   Live Chat corporativo
   ===================================================== */

:root{
    --mh-navy:#1b355b;
    --mh-navy-2:#10243f;
    --mh-blue:#285f99;
    --mh-green:#58a846;
    --mh-green-2:#76bd43;
    --mh-mint:#34d399;
    --mh-bg:#f4f7fb;
    --mh-line:#e6ebf2;
    --mh-text:#25364b;
    --mh-muted:#738196;
    --mh-white:#ffffff;
    --mh-danger:#dc3545;
    --mh-shadow:0 22px 60px rgba(15,35,62,.22);
}

.assistant-widget,
.assistant-widget *{
    box-sizing:border-box;
}

.assistant-widget{
    position:fixed;
    left:18px;
    bottom:18px;
    z-index:999999;
    font-family:Inter, "Segoe UI", Arial, sans-serif;
    color:var(--mh-text);
}

/* ---------------- Launcher / Mascota ---------------- */
.mh-launcher{
    width:82px;
    height:92px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    position:relative;
    display:block;
    animation:mhMascotIn .7s ease both, mhFloat 3.2s ease-in-out 1s infinite;
    filter:drop-shadow(0 10px 20px rgba(0,0,0,.20));
}

.mh-launcher img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    transition:transform .28s ease;
}

.mh-launcher:hover img{transform:scale(1.07)}
.mh-launcher:focus-visible{outline:3px solid rgba(88,168,70,.4);outline-offset:4px;border-radius:18px}

.mh-launcher-status{
    position:absolute;
    right:3px;
    bottom:7px;
    width:15px;
    height:15px;
    border-radius:50%;
    background:var(--mh-mint);
    border:3px solid #fff;
    box-shadow:0 0 0 0 rgba(52,211,153,.45);
    animation:mhPulse 2s infinite;
}

.mh-unread{
    position:absolute;
    top:4px;
    right:-2px;
    min-width:23px;
    height:23px;
    padding:0 6px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    font-size:12px;
    font-weight:800;
    line-height:23px;
    text-align:center;
    box-shadow:0 4px 12px rgba(239,68,68,.35);
}

/* ---------------- Invitación ---------------- */
.mh-invite{
    position:absolute;
    left:92px;
    bottom:18px;
    width:274px;
    min-height:64px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 36px 12px 14px;
    border:1px solid rgba(27,53,91,.08);
    border-radius:18px 18px 18px 5px;
    background:#fff;
    box-shadow:0 14px 38px rgba(15,35,62,.16);
    animation:mhInviteIn .55s .65s ease both;
}

.mh-invite .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--mh-mint);
    flex:0 0 10px;
    animation:mhPulse 2s infinite;
}

.mh-invite-copy strong{
    display:block;
    color:var(--mh-navy);
    font-size:14px;
    line-height:1.25;
    margin-bottom:4px;
}

.mh-invite-copy p{
    margin:0;
    color:#66758a;
    font-size:12.5px;
    line-height:1.35;
}

.mh-invite-close{
    position:absolute;
    right:8px;
    top:8px;
    width:22px;
    height:22px;
    border:0;
    border-radius:50%;
    background:#eff3f8;
    color:#708095;
    font-size:17px;
    line-height:20px;
    cursor:pointer;
}

.mh-invite-close:hover{background:#e1e8f0;color:var(--mh-navy)}

/* ---------------- Chat ---------------- */
.mh-chat{
    position:absolute;
    left:0;
    bottom:104px;
    width:min(390px, calc(100vw - 28px));
    height:min(650px, calc(100vh - 135px));
    min-height:520px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(27,53,91,.10);
    border-radius:24px;
    background:#fff;
    box-shadow:var(--mh-shadow);
    transform-origin:left bottom;
    animation:mhChatOpen .28s cubic-bezier(.2,.8,.2,1) both;
}

.mh-chat[hidden]{display:none!important}

/* Header */
.mh-chat-header{
    flex:0 0 auto;
    min-height:82px;
    padding:14px 12px 14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:#fff;
    background:
        radial-gradient(circle at 92% 15%, rgba(118,189,67,.38), transparent 30%),
        linear-gradient(135deg, var(--mh-navy-2), var(--mh-navy) 62%, #22547e);
    position:relative;
    overflow:hidden;
}

.mh-chat-header::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:linear-gradient(90deg,var(--mh-green-2),#98cf5b,var(--mh-blue));
}

.mh-agent{display:flex;align-items:center;gap:11px;min-width:0;position:relative;z-index:1}
.mh-agent-avatar{
    width:50px;
    height:50px;
    border-radius:16px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    position:relative;
    display:grid;
    place-items:center;
    overflow:visible;
}
.mh-agent-avatar img{width:48px;height:48px;object-fit:contain;transform:translateY(2px)}
.mh-agent-online{
    position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;
    background:var(--mh-mint);border:3px solid var(--mh-navy);
}
.mh-agent-copy{min-width:0}
.mh-agent-copy strong{display:block;font-size:16px;font-weight:800;letter-spacing:.1px;line-height:1.2}
.mh-agent-copy span{display:flex;align-items:center;gap:6px;margin-top:4px;color:rgba(255,255,255,.78);font-size:11.5px;white-space:nowrap}
.mh-online-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mh-mint)}

.mh-header-actions{display:flex;gap:3px;position:relative;z-index:1}
.mh-icon-btn{
    width:31px;height:31px;border:0;border-radius:9px;background:rgba(255,255,255,.08);
    color:#fff;font-size:18px;display:grid;place-items:center;cursor:pointer;transition:.2s ease;
}
.mh-icon-btn:hover{background:rgba(255,255,255,.17);transform:translateY(-1px)}
.mh-icon-btn.mh-close:hover{background:rgba(220,53,69,.85)}

/* Context */
.mh-context-bar{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    background:#eef6ea;
    border-bottom:1px solid #dcebd5;
    color:#47643e;
    font-size:11.5px;
    line-height:1.35;
}
.mh-context-bar[hidden]{display:none!important}
.mh-context-icon{font-weight:900;color:var(--mh-green)}

/* Mensajes */
.mh-messages{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding:18px 14px 14px;
    background:
        linear-gradient(rgba(244,247,251,.93),rgba(244,247,251,.93)),
        radial-gradient(circle at 15% 20%,rgba(88,168,70,.08),transparent 20%);
    scrollbar-width:thin;
    scrollbar-color:#c9d2df transparent;
}
.mh-messages::-webkit-scrollbar{width:6px}
.mh-messages::-webkit-scrollbar-thumb{background:#c9d2df;border-radius:10px}

.mh-day-label{
    width:max-content;
    margin:0 auto 14px;
    padding:5px 10px;
    border-radius:999px;
    color:#8792a1;
    background:#e9eef5;
    font-size:10.5px;
    font-weight:700;
}

.mh-message-row{display:flex;align-items:flex-end;gap:8px;margin:0 0 13px;animation:mhMessageIn .22s ease both}
.mh-message-row.user{justify-content:flex-end}
.mh-msg-avatar{
    width:30px;height:30px;border-radius:10px;background:#e6edf6;display:grid;place-items:center;flex:0 0 30px;overflow:hidden;
}
.mh-msg-avatar img{width:30px;height:30px;object-fit:contain}

.mh-bubble-wrap{max-width:79%;min-width:0}
.mh-bubble{
    padding:10px 12px;
    border-radius:16px 16px 16px 5px;
    background:#fff;
    border:1px solid #e6ebf2;
    box-shadow:0 4px 14px rgba(23,48,78,.06);
    color:#33465f;
    font-size:13.2px;
    line-height:1.52;
    overflow-wrap:anywhere;
}
.mh-message-row.user .mh-bubble{
    color:#fff;
    border-color:transparent;
    background:linear-gradient(135deg,var(--mh-navy),#285f99);
    border-radius:16px 16px 5px 16px;
    box-shadow:0 5px 16px rgba(27,53,91,.18);
}
.mh-bubble strong{color:var(--mh-navy)}
.mh-message-row.user .mh-bubble strong{color:#fff}
.mh-bubble a{color:#1e6bb8;font-weight:700;text-decoration:none}
.mh-bubble a:hover{text-decoration:underline}
.mh-msg-time{display:block;margin-top:4px;color:#99a3b1;font-size:9.5px;padding:0 3px}
.mh-message-row.user .mh-msg-time{text-align:right}

.mh-inline-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mh-inline-btn{
    border:1px solid #d9e3ef;
    border-radius:999px;
    background:#fff;
    color:var(--mh-navy);
    padding:7px 10px;
    font-size:11px;
    font-weight:750;
    cursor:pointer;
    line-height:1.2;
    transition:.18s ease;
}
.mh-inline-btn:hover{border-color:var(--mh-green);color:#397c2f;background:#f5fbf1}
.mh-inline-btn.primary{background:var(--mh-green);border-color:var(--mh-green);color:#fff}
.mh-inline-btn.primary:hover{background:#468f37}

/* Typing */
.mh-typing{
    flex:0 0 auto;
    display:flex;
    align-items:flex-end;
    gap:7px;
    padding:0 14px 8px;
    background:var(--mh-bg);
}
.mh-typing[hidden]{display:none!important}
.mh-typing-avatar{width:26px;height:26px;border-radius:9px;background:#e6edf6;overflow:hidden}
.mh-typing-avatar img{width:26px;height:26px;object-fit:contain}
.mh-typing-bubble{display:flex;gap:4px;padding:9px 11px;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid #e6ebf2}
.mh-typing-bubble span{width:5px;height:5px;border-radius:50%;background:#90a0b4;animation:mhTyping 1.1s infinite ease-in-out}
.mh-typing-bubble span:nth-child(2){animation-delay:.15s}
.mh-typing-bubble span:nth-child(3){animation-delay:.30s}

/* Quick actions */
.mh-quick-wrap{
    flex:0 0 auto;
    padding:8px 10px 9px;
    background:#fff;
    border-top:1px solid #edf1f5;
}
.mh-quick-wrap[hidden]{display:none!important}
.mh-quick-actions{display:flex;gap:7px;overflow-x:auto;padding:1px 1px 3px;scrollbar-width:none}
.mh-quick-actions::-webkit-scrollbar{display:none}
.mh-quick-btn{
    flex:0 0 auto;
    max-width:260px;
    border:1px solid #dbe4ef;
    background:#fff;
    color:var(--mh-navy);
    padding:8px 11px;
    border-radius:999px;
    font-size:11.2px;
    font-weight:750;
    white-space:nowrap;
    cursor:pointer;
    transition:.18s ease;
}
.mh-quick-btn:hover{border-color:var(--mh-green);background:#f6fbf3;color:#377a2d;transform:translateY(-1px)}

/* Composer */
.mh-composer{flex:0 0 auto;background:#fff;border-top:1px solid #edf1f5;padding:10px 11px 8px}
.mh-composer form{
    display:flex;
    align-items:flex-end;
    gap:8px;
    border:1px solid #dbe3ed;
    background:#f8fafc;
    border-radius:16px;
    padding:6px 6px 6px 11px;
    transition:.2s ease;
}
.mh-composer form:focus-within{border-color:#9fb6d0;box-shadow:0 0 0 3px rgba(40,95,153,.08);background:#fff}
#mhInput{
    flex:1;
    min-height:34px;
    max-height:92px;
    resize:none;
    border:0;
    outline:0;
    background:transparent;
    color:#25364b;
    font:inherit;
    font-size:13px;
    line-height:1.45;
    padding:7px 0 5px;
}
#mhInput::placeholder{color:#9aa5b2}
.mh-send{
    width:38px;height:38px;border:0;border-radius:12px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--mh-green),var(--mh-green-2));color:#fff;cursor:pointer;
    box-shadow:0 5px 14px rgba(88,168,70,.28);transition:.18s ease;
}
.mh-send:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 7px 17px rgba(88,168,70,.34)}
.mh-send:disabled{opacity:.45;cursor:not-allowed;transform:none}
.mh-footer-note{display:flex;justify-content:space-between;gap:10px;padding:7px 2px 0;color:#9aa5b2;font-size:9.5px}
.mh-footer-note a{color:#4b9140;text-decoration:none;font-weight:800}

/* Estado compacto */
.assistant-widget.mh-open .mh-invite{display:none}
.assistant-widget.mh-open .mh-launcher{animation:none;transform:scale(.93)}

/* Animaciones */
@keyframes mhMascotIn{from{opacity:0;transform:translateX(-45px)}to{opacity:1;transform:translateX(0)}}
@keyframes mhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes mhInviteIn{from{opacity:0;transform:translateX(-16px) scale(.97)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes mhChatOpen{from{opacity:0;transform:translateY(15px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mhMessageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes mhTyping{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
@keyframes mhPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.45)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* Responsive */
@media(max-width:768px){
    .assistant-widget{left:10px;bottom:10px}
    .mh-launcher{width:68px;height:78px}
    .mh-invite{left:75px;bottom:10px;width:min(245px,calc(100vw - 96px));padding:10px 32px 10px 12px}
    .mh-invite-copy strong{font-size:12.5px}
    .mh-invite-copy p{font-size:11.5px}

    .mh-chat{
        position:fixed;
        left:8px;
        right:8px;
        bottom:8px;
        width:auto;
        height:min(680px,calc(100dvh - 16px));
        min-height:0;
        border-radius:20px;
        transform-origin:left bottom;
    }

    .assistant-widget.mh-open .mh-launcher{display:none}
    .mh-chat-header{min-height:74px;padding:11px 9px 11px 12px}
    .mh-agent-avatar{width:44px;height:44px;border-radius:14px}
    .mh-agent-avatar img{width:43px;height:43px}
    .mh-agent-copy strong{font-size:15px}
    .mh-agent-copy span{font-size:10.5px}
    .mh-messages{padding:14px 11px 10px}
    .mh-bubble-wrap{max-width:84%}
    .mh-bubble{font-size:12.6px}
    .mh-composer{padding:8px}
}

@media(max-width:390px){
    .mh-header-actions{gap:1px}
    .mh-icon-btn{width:29px;height:29px}
    .mh-agent-copy span{max-width:155px;overflow:hidden;text-overflow:ellipsis}
}

@media(prefers-reduced-motion:reduce){
    .assistant-widget *,
    .assistant-widget *::before,
    .assistant-widget *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
    }
}