/* ==========================================================================
   STACIONMUSIC · ASISTENTE VIRTUAL · LIGHT PANEL V2
   Módulo aislado de la web pública.
   ========================================================================== */

.sm-assistant{
    --sma-ink:#102a4a;
    --sma-ink-2:#29486c;
    --sma-muted:#7188a2;
    --sma-cyan:#24d0d8;
    --sma-blue:#2b9fe2;
    --sma-violet:#6240d7;
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:120;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.sm-assistant *,
.sm-assistant *::before,
.sm-assistant *::after{box-sizing:border-box}

/* BOTÓN FLOTANTE */
.sm-assistant__launcher{
    position:relative;
    width:64px;
    height:64px;
    padding:0;
    border:1px solid rgba(116,225,239,.58);
    border-radius:21px;
    display:grid;
    place-items:center;
    cursor:pointer;
    color:#fff;
    background:linear-gradient(140deg,#24d0d8 0%,#2b9fe2 48%,#7048ea 100%);
    box-shadow:
        0 18px 45px rgba(0,0,0,.40),
        0 0 0 7px rgba(36,208,216,.055),
        inset 0 1px 0 rgba(255,255,255,.32);
    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}

.sm-assistant__launcher:hover{
    transform:translateY(-3px);
    filter:brightness(1.06);
    box-shadow:
        0 22px 52px rgba(0,0,0,.44),
        0 0 0 9px rgba(36,208,216,.07),
        inset 0 1px 0 rgba(255,255,255,.36);
}

.sm-assistant__launcher-icon{
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    font-size:25px;
    line-height:1;
}

.sm-assistant__launcher::after{
    content:"";
    position:absolute;
    top:8px;
    right:8px;
    width:10px;
    height:10px;
    border:2px solid #eefaff;
    border-radius:50%;
    background:#43ca7d;
}

/* PANEL */
.sm-assistant__panel{
    position:absolute;
    right:0;
    bottom:80px;
    width:min(400px,calc(100vw - 32px));
    height:min(590px,calc(100vh - 125px));
    min-height:470px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(125,183,221,.54);
    border-radius:24px;
    color:var(--sma-ink);
    background:
        radial-gradient(circle at 90% 0,rgba(98,64,215,.10),transparent 29%),
        radial-gradient(circle at 3% 10%,rgba(36,208,216,.12),transparent 28%),
        linear-gradient(155deg,#f7fbff 0%,#edf5ff 52%,#e8f1ff 100%);
    box-shadow:
        0 30px 85px rgba(0,0,0,.46),
        0 0 45px rgba(43,159,226,.12);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(14px) scale(.97);
    transform-origin:bottom right;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}

.sm-assistant.is-open .sm-assistant__panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
}

/* CABECERA */
.sm-assistant__header{
    min-height:82px;
    padding:16px 16px 15px 18px;
    display:flex;
    align-items:center;
    gap:12px;
    border-bottom:1px solid rgba(48,107,158,.12);
    background:linear-gradient(115deg,rgba(255,255,255,.88),rgba(224,238,255,.88));
}

.sm-assistant__avatar{
    flex:0 0 auto;
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    border:1px solid rgba(43,159,226,.28);
    border-radius:15px;
    color:#fff;
    font-size:20px;
    background:linear-gradient(145deg,#0b3657,#116d91 56%,#234e9c);
    box-shadow:0 8px 18px rgba(23,83,127,.18);
}

.sm-assistant__identity{min-width:0;flex:1}

.sm-assistant__identity strong{
    display:block;
    margin-bottom:4px;
    color:#112c51;
    font-size:14px;
    letter-spacing:-.01em;
}

.sm-assistant__status{
    display:flex;
    align-items:center;
    gap:7px;
    color:#55718e;
    font-size:11px;
}

.sm-assistant__status::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#3dcc7b;
    box-shadow:0 0 9px rgba(61,204,123,.34);
}

.sm-assistant__close{
    flex:0 0 auto;
    width:36px;
    height:36px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid transparent;
    border-radius:11px;
    cursor:pointer;
    color:#526e8f;
    background:transparent;
    font-size:22px;
    line-height:1;
    transition:color .18s ease,background .18s ease,border-color .18s ease;
}

.sm-assistant__close:hover{
    color:#18395f;
    border-color:rgba(37,91,139,.10);
    background:rgba(255,255,255,.65);
}

/* CONVERSACIÓN */
.sm-assistant__body{
    flex:1;
    min-height:0;
    padding:20px 18px 18px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(56,125,178,.24) transparent;
}

.sm-assistant__body::-webkit-scrollbar{width:5px}
.sm-assistant__body::-webkit-scrollbar-track{background:transparent}
.sm-assistant__body::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(56,125,178,.24);
}

.sm-assistant__message{
    position:relative;
    max-width:92%;
    margin-bottom:18px;
    padding:14px 16px;
    border:1px solid rgba(63,125,178,.13);
    border-radius:17px 17px 17px 6px;
    color:#244260;
    background:rgba(255,255,255,.76);
    box-shadow:0 8px 24px rgba(39,91,136,.07);
    font-size:13px;
    line-height:1.55;
}

.sm-assistant__message::before{
    content:"✦";
    position:absolute;
    left:-11px;
    top:-9px;
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border:1px solid rgba(36,208,216,.30);
    border-radius:10px;
    color:#24bcd0;
    background:#0c3b5e;
    box-shadow:0 5px 12px rgba(25,75,111,.14);
    font-size:11px;
}

.sm-assistant__message strong{color:#102d52}
.sm-assistant__message p{margin:0}
.sm-assistant__message p+p{margin-top:7px}

.sm-assistant__quick-label{
    margin:20px 2px 10px;
    color:#66809b;
    font-size:10px;
    font-weight:850;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.sm-assistant__quick-actions{display:grid;gap:9px}

.sm-assistant__quick{
    position:relative;
    width:100%;
    min-height:47px;
    padding:11px 39px 11px 15px;
    border:1px solid rgba(55,119,172,.14);
    border-radius:13px;
    cursor:pointer;
    color:#18395e;
    text-align:left;
    background:rgba(255,255,255,.76);
    box-shadow:0 5px 16px rgba(36,84,127,.045);
    font:inherit;
    font-size:12px;
    font-weight:800;
    transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}

.sm-assistant__quick::after{
    content:"›";
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-52%);
    color:#2c73ae;
    font-size:22px;
    font-weight:400;
}

.sm-assistant__quick:hover{
    transform:translateX(2px);
    border-color:rgba(36,180,214,.42);
    background:#fff;
    box-shadow:0 8px 20px rgba(36,102,150,.08);
}

/* CAMPO DE TEXTO */
.sm-assistant__composer{
    padding:13px 13px 11px;
    border-top:1px solid rgba(48,107,158,.11);
    background:rgba(237,246,255,.88);
}

.sm-assistant__form{
    display:flex;
    align-items:flex-end;
    gap:8px;
    padding:6px 6px 6px 13px;
    border:1px solid rgba(43,159,226,.30);
    border-radius:16px;
    background:rgba(255,255,255,.82);
    box-shadow:0 5px 18px rgba(37,91,139,.06);
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.sm-assistant__form:focus-within{
    border-color:rgba(36,190,216,.70);
    background:#fff;
    box-shadow:0 0 0 3px rgba(36,208,216,.10),0 7px 20px rgba(37,91,139,.08);
}

.sm-assistant__input{
    width:100%;
    min-width:0;
    min-height:38px;
    max-height:96px;
    padding:9px 0;
    resize:none;
    outline:none;
    border:0;
    color:#17385e;
    background:transparent;
    font:inherit;
    font-size:12px;
    line-height:1.45;
}

.sm-assistant__input::placeholder{color:#7890a8}

.sm-assistant__send{
    flex:0 0 auto;
    width:40px;
    height:40px;
    padding:0;
    display:grid;
    place-items:center;
    border:0;
    border-radius:12px;
    cursor:pointer;
    color:#fff;
    background:linear-gradient(135deg,var(--sma-cyan),var(--sma-blue) 52%,var(--sma-violet));
    box-shadow:0 8px 20px rgba(43,159,226,.22);
    font-size:16px;
    transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}

.sm-assistant__send:hover{
    transform:translateY(-1px);
    filter:brightness(1.05);
    box-shadow:0 10px 24px rgba(43,159,226,.27);
}

.sm-assistant__note{
    margin:8px 4px 0;
    color:#7188a1;
    text-align:center;
    font-size:9px;
    line-height:1.4;
}

/* MOBILE */
@media(max-width:640px){
    .sm-assistant{right:14px;bottom:14px}

    .sm-assistant__launcher{
        width:58px;
        height:58px;
        border-radius:18px;
    }

    .sm-assistant__panel{
        position:fixed;
        right:14px;
        bottom:84px;
        width:calc(100vw - 28px);
        height:min(570px,calc(100dvh - 105px));
        min-height:0;
        border-radius:21px;
    }

    .sm-assistant__header{min-height:74px}
    .sm-assistant__body{padding:18px 15px}
    .sm-assistant__message{max-width:94%}
}

@media(max-height:620px) and (min-width:641px){
    .sm-assistant__panel{
        height:calc(100vh - 105px);
        min-height:0;
    }
}

@media(prefers-reduced-motion:reduce){
    .sm-assistant__panel,
    .sm-assistant__launcher,
    .sm-assistant__quick,
    .sm-assistant__close,
    .sm-assistant__send{
        transition:none;
    }
}


/* ==========================================================================
   STACIONMUSIC · ROBOT AMIGABLE V3
   Ícono oficial del asistente.
   ========================================================================== */

.sm-assistant__launcher-icon,
.sm-assistant__avatar{
    color:#fff;
}

.sm-assistant__launcher-icon svg{
    display:block;
    width:34px;
    height:34px;
}

.sm-assistant__avatar svg{
    display:block;
    width:27px;
    height:27px;
}

/* Robot pequeño junto al primer mensaje */
.sm-assistant__message::before{
    content:"";
    background:
        url("../img/assistant-robot.svg") center / 17px 17px no-repeat,
        #0c3b5e;
}


/* ==========================================================================
   STACIONMUSIC · ETAPA 2 · CONVERSACIÓN + VOZ
   Agregar al final del assistant.css actual.
   ========================================================================== */

.sm-assistant__message--user{
    max-width:84%;
    margin-left:auto;
    border-radius:17px 17px 6px 17px;
    color:#fff;
    background:linear-gradient(135deg,#209fcf 0%,#347bd3 55%,#6447d7 100%);
    border-color:rgba(69,135,218,.24);
    box-shadow:0 8px 22px rgba(45,101,169,.14);
}

.sm-assistant__message--user::before{
    content:none;
    display:none;
}

.sm-assistant__message--bot{
    margin-top:4px;
}

.sm-assistant__listen{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:30px;
    margin-top:11px;
    padding:5px 10px;
    border:1px solid rgba(43,159,226,.18);
    border-radius:999px;
    cursor:pointer;
    color:#32648e;
    background:rgba(231,244,255,.82);
    font:inherit;
    font-size:10px;
    font-weight:800;
    transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.sm-assistant__listen:hover{
    transform:translateY(-1px);
    border-color:rgba(36,190,216,.42);
    background:#fff;
}

.sm-assistant__listen.is-speaking{
    color:#6845bd;
    border-color:rgba(98,64,215,.24);
}

.sm-assistant__action-link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    min-height:34px;
    margin-top:11px;
    padding:6px 12px;
    border-radius:10px;
    color:#fff;
    background:linear-gradient(135deg,#20bfcf,#318edb 55%,#6545d8);
    font-size:10px;
    font-weight:850;
    text-decoration:none;
    box-shadow:0 6px 15px rgba(43,159,226,.13);
}

.sm-assistant__action-link:hover{
    filter:brightness(1.04);
}

@media(max-width:640px){
    .sm-assistant__message--user{max-width:88%}
}


/* ==========================================================================
   STACIONMUSIC · ETAPA 3 · ENTRADA POR VOZ
   ========================================================================== */

.sm-assistant__mic{
    flex:0 0 auto;
    width:34px;
    height:38px;
    margin-left:-5px;
    padding:0;
    display:grid;
    place-items:center;
    align-self:flex-end;
    border:0;
    border-radius:10px;
    cursor:pointer;
    color:#39709a;
    background:transparent;
    font-size:16px;
    transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}

.sm-assistant__mic:hover{
    transform:translateY(-1px);
    background:rgba(43,159,226,.09);
}

.sm-assistant__mic.is-listening{
    background:rgba(36,208,216,.14);
    box-shadow:0 0 0 3px rgba(36,208,216,.09);
    animation:sma-mic-pulse 1.15s ease-in-out infinite;
}

@keyframes sma-mic-pulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.08)}
}

@media(prefers-reduced-motion:reduce){
    .sm-assistant__mic.is-listening{animation:none}
}


/* ==========================================================================
   STACIONMUSIC · ETAPA 4 · GRABACIÓN + TRANSCRIPCIÓN EN SERVIDOR
   ========================================================================== */

.sm-assistant__mic.is-processing{
    cursor:wait;
    opacity:.72;
    background:rgba(98,64,215,.10);
    animation:sma-mic-processing .9s ease-in-out infinite;
}

.sm-assistant__mic:disabled{
    pointer-events:none;
}

@keyframes sma-mic-processing{
    0%,100%{transform:scale(1);opacity:.58}
    50%{transform:scale(1.06);opacity:1}
}

@media(prefers-reduced-motion:reduce){
    .sm-assistant__mic.is-processing{animation:none}
}


/* ==========================================================================
   STACIONMUSIC · CONSULTAS FRECUENTES DESPLEGABLES · V2
   ========================================================================== */
.sm-assistant__faq{margin:20px 0 4px}

.sm-assistant__faq-toggle{
    position:relative;
    width:100%;
    min-height:50px;
    padding:12px 46px 12px 16px;
    border:1px solid rgba(45,166,218,.30);
    border-radius:14px;
    cursor:pointer;
    color:#fff;
    background:linear-gradient(135deg,#0f789f 0%,#258fc9 52%,#5b49d3 100%);
    box-shadow:0 9px 22px rgba(42,119,178,.18),inset 0 1px 0 rgba(255,255,255,.20);
    text-align:left;
    font:inherit;
    font-size:11px;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}

.sm-assistant__faq-toggle::after{
    content:"⌄";
    position:absolute;
    right:17px;
    top:50%;
    transform:translateY(-58%);
    color:#fff;
    font-size:21px;
    line-height:1;
    transition:transform .18s ease;
}

.sm-assistant__faq-toggle:hover{
    transform:translateY(-1px);
    filter:brightness(1.04);
    box-shadow:0 11px 25px rgba(42,119,178,.22),inset 0 1px 0 rgba(255,255,255,.22);
}

.sm-assistant__faq-toggle.is-open::after{
    transform:translateY(-42%) rotate(180deg);
}

.sm-assistant__faq-list{
    max-height:290px;
    margin-top:9px;
    padding:7px;
    overflow-y:auto;
    border:1px solid rgba(55,119,172,.16);
    border-radius:14px;
    background:rgba(247,251,255,.98);
    box-shadow:0 12px 30px rgba(39,91,136,.11);
    scrollbar-width:thin;
    scrollbar-color:rgba(56,125,178,.28) transparent;
}

.sm-assistant__faq-list[hidden]{display:none}

.sm-assistant__faq-item{
    position:relative;
    width:100%;
    min-height:43px;
    padding:10px 34px 10px 12px;
    border:0;
    border-bottom:1px solid rgba(55,119,172,.09);
    border-radius:9px;
    cursor:pointer;
    color:#18395e;
    background:transparent;
    text-align:left;
    font:inherit;
    font-size:11px;
    font-weight:750;
    line-height:1.35;
    transition:background .16s ease,color .16s ease,transform .16s ease;
}

.sm-assistant__faq-item:last-child{border-bottom:0}

.sm-assistant__faq-item::after{
    content:"›";
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-52%);
    color:#258fc9;
    font-size:18px;
}

.sm-assistant__faq-item:hover{
    color:#102d52;
    background:linear-gradient(90deg,rgba(36,208,216,.10),rgba(98,64,215,.06));
    transform:translateX(2px);
}

@media(max-width:640px){
    .sm-assistant__faq-list{max-height:260px}
}

@media(prefers-reduced-motion:reduce){
    .sm-assistant__faq-toggle,
    .sm-assistant__faq-toggle::after,
    .sm-assistant__faq-item{transition:none}
}
