:root { --bms-bot-scale: 1; }

#bmsBot {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width:  calc(108px * var(--bms-bot-scale));
    height: calc(188px * var(--bms-bot-scale));
    z-index: 9999;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    filter: drop-shadow(0 16px 26px rgba(15,23,42,.28))
            drop-shadow(0 0 16px rgba(30,217,220,.48))
            drop-shadow(0 0 34px rgba(30,217,220,.20));
    animation: bmsbot-float 4s ease-in-out infinite;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: filter .35s, width .25s, height .25s,
                top .85s cubic-bezier(.25,.7,.25,1),
                left .85s cubic-bezier(.25,.7,.25,1),
                right .85s cubic-bezier(.25,.7,.25,1),
                bottom .85s cubic-bezier(.25,.7,.25,1),
                margin .85s cubic-bezier(.25,.7,.25,1),
                transform .35s;
}
#bmsBot.dragging,
#bmsBot.pinching {
    cursor: grabbing;
    animation: none;
    transition: filter .3s !important;
    filter: drop-shadow(0 24px 42px rgba(15,23,42,.42))
            drop-shadow(0 0 44px rgba(30,217,220,.48));
}
#bmsBot.pinching { transition: filter .3s; }
#bmsBot.off {
    filter: drop-shadow(0 12px 22px rgba(15,23,42,.24));
    animation: none;
}
#bmsBot:active { cursor: grabbing; }

@keyframes bmsbot-float {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* --- Contenedor SVG / SVG shell --- */
#bmsBot .bot-svg {
    width: 100%; height: 100%; overflow: visible;
    transform-origin: 50% 72%;   /* pivot for the "carcajadas" body rock */
}

/* --- Animación de Antena / Antenna Animation --- */
#bmsBot .antenna {
    transform-origin: 60px 6px;
    animation: bmsbot-antenna 4s ease-in-out infinite;
}
#bmsBot.off .antenna { animation: none; }
@keyframes bmsbot-antenna {
    0%,100% { transform: rotate(-4deg); }
    50%      { transform: rotate( 4deg); }
}
#bmsBot .antenna-tip {
    transform-origin: 60px -11px;
    animation: bmsbot-tip 2s ease-in-out infinite;
}
#bmsBot.off .antenna-tip {
    animation: none;
    fill: #6a7077 !important;
    filter: none !important;
}
@keyframes bmsbot-tip {
    0%,100% { opacity: .9; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.25); }
}

/* --- Cuerpo del Bot / Body (no visible border - drop shadow only) --- */
#bmsBot .body-shape { transition: fill .4s, opacity .4s; }
#bmsBot.off .body-shape { fill: #c9ced3; }

/* Visor: visual (Face-tap movido al label BMS) */
#bmsBot .visor-shape { transition: filter .3s; }
#bmsBot .eye,
#bmsBot .mouth-line,
#bmsBot .expr-brow,
#bmsBot .expr-tear,
#bmsBot .expr-heart,
#bmsBot .icon-layer,
#bmsBot .icon-layer *,
#bmsBot .process-bars,
#bmsBot .process-bars * { pointer-events: none; }

/* --- Ojos / Eyes (Color and glow in CSS, position and blink in JS) --- */
#bmsBot .eye {
    fill: var(--bms-face-color);
    filter: drop-shadow(0 0 6px var(--bms-face-glow));
    transition: fill .4s, filter .4s, opacity .35s;
}
#bmsBot .eye-left {
    transform-origin: 46px 44px;
}
#bmsBot .eye-right {
    transform-origin: 74px 44px;
}
#bmsBot.off .eye { fill: #6a7077; filter: none; opacity: .55; }
#bmsBot.state-listen  .eye { animation: bmsbot-eye-pulse 1s ease-in-out infinite; }
@keyframes bmsbot-eye-pulse {
    0%,100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(1.25); opacity: .88; }
}

/* --- Boca / Mouth (Shape 'd' morphs each frame via JS) --- */
#bmsBot .mouth-line {
    fill: var(--bms-face-color);
    stroke: none;
    filter: drop-shadow(0 0 6px var(--bms-face-glow));
    transition: fill .4s, filter .4s, opacity .35s;
}
#bmsBot.off .mouth-line { fill: #6a7077; stroke: none; filter: none; opacity: .55; }

/* --- Estado Apagado / Off state --- */
#bmsBot.off .process-bars       { opacity: 0; }
#bmsBot.off .power-icon-stroke  { stroke: #8a9099; }
#bmsBot.off .mic-body           { fill: #8a9099; }
#bmsBot.off .mic-stroke         { stroke: #8a9099; }
#bmsBot.off .chat-icon-shape    { fill: #8a9099; }
#bmsBot.off .power-circle       { fill: rgba(180,180,180,0.10); stroke: transparent; }
#bmsBot.off .top-btn-circle     { fill: rgba(180,180,180,0.10); stroke: transparent; }
#bmsBot.off .divider-line       { stroke: #8a9099; filter: none; opacity: .65; }
#bmsBot.off .bms-label          { fill: #737b85; opacity: 1; }
#bmsBot.off .gear-icon-symbol   { opacity: .7; }

/* --- Divisor Central / Divider "T" --- */
#bmsBot .divider-line {
    stroke: #18d9dc;
    stroke-width: 1.4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 1.5px #18d9dc);
    transition: opacity .3s;
}
#bmsBot.state-on .divider-line { animation: bmsbot-line-glow-in .6s ease-out; }
#bmsBot.state-listen  .divider-line,
#bmsBot.state-confirm .divider-line,
#bmsBot.state-process .divider-line { animation: bmsbot-line-pulse 1s ease-in-out infinite; }
@keyframes bmsbot-line-pulse {
    0%,100% { opacity: .6; }
    50%      { opacity: 1;  }
}
@keyframes bmsbot-line-glow-in {
    0%   { opacity: 0; filter: drop-shadow(0 0 8px #18d9dc); }
    100% { opacity: 1; filter: drop-shadow(0 0 1.5px #18d9dc); }
}

/* BMS label  clickable, cycles personality */
#bmsBot .bms-label {
    fill: #12aeb3;
    font-family: system-ui,'Space Grotesk',sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: opacity .3s, fill .2s, filter .2s;
}
#bmsBot .bms-label:hover { fill: #2ee8e8; filter: drop-shadow(0 0 3px rgba(46,232,232,.6)); }
#bmsBot.off .bms-label   { cursor: default; }
#bmsBot.off .bms-label:hover { fill: #737b85; filter: none; }

/* (Smile is no longer a separate element; the parametric mouth-line morphs
    between curves directly via JS each frame.) */

/* ========================================================
   ESTADO DE PROCESAMIENTO / PROCESS STATE
======================================================== */
#bmsBot .process-bars {
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
#bmsBot .process-bars rect {
    fill: #18d9dc;
    filter: drop-shadow(0 0 3px #18d9dc);
}
#bmsBot .process-bars rect:nth-child(n+7) {
    fill: #2e3238;
    filter: none;
}
/* The process state now shows the spinning "processing" status icon
   (set by setState); the visor face is hidden by the bot-has-icon rule. */
#bmsBot.state-process .mouth-line,
#bmsBot.state-process .expr-brow,
#bmsBot.state-process .expr-tear,
#bmsBot.state-process .expr-teeth,
#bmsBot.state-process .expr-sweat { opacity: 0 !important; }
#bmsBot .process-bars rect {
    animation: bmsbot-progress-seg 1.2s ease-in-out infinite;
}
#bmsBot.state-process .process-bars rect:nth-child(1) { animation-delay: 0s; }
#bmsBot.state-process .process-bars rect:nth-child(2) { animation-delay: .08s; }
#bmsBot.state-process .process-bars rect:nth-child(3) { animation-delay: .16s; }
#bmsBot.state-process .process-bars rect:nth-child(4) { animation-delay: .24s; }
#bmsBot.state-process .process-bars rect:nth-child(5) { animation-delay: .32s; }
#bmsBot.state-process .process-bars rect:nth-child(6) { animation-delay: .40s; }
#bmsBot.state-process .process-bars rect:nth-child(7) { animation-delay: .48s; }
#bmsBot.state-process .process-bars rect:nth-child(8) { animation-delay: .56s; }
#bmsBot.state-process .process-bars rect:nth-child(9) { animation-delay: .64s; }
@keyframes bmsbot-progress-seg {
    0%, 70%, 100% { opacity: .25; transform: scaleY(.7); }
    35%           { opacity: 1;   transform: scaleY(1); }
}
#bmsBot .process-bars rect { transform-origin: center 64px; will-change: transform; }

/* Onda de audio / Talk wave - audio-wave style line across the visor while the bot speaks.
   state-talk is held by patchSpeechSynthesis until utterance.onend fires,
   so the animation runs for the full response duration. */
#bmsBot .talk-wave {
    opacity: 0;
    fill: none;
    stroke: #18d9dc;
    stroke-width: 3.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px #18d9dc);
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    transition: opacity .2s;
    pointer-events: none;
}
/* Talk equalizer - the visor "mouth" becomes bouncing frequency bars
   while the bot speaks. Each bar runs the same keyframe at a slightly
   different speed + delay so they never sync, giving a lively meter. */
#bmsBot .talk-bars {
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
#bmsBot .talk-bars rect {
    fill: #18d9dc;
    filter: drop-shadow(0 0 4px #18d9dc);
    transform-origin: center 62.5px;
    transform: scaleY(0.32);
}
#bmsBot.state-talk .talk-bars { opacity: 1; }
#bmsBot.state-talk .talk-bars rect:nth-of-type(1) { animation: bmsbot-eq .84s ease-in-out infinite;        }
#bmsBot.state-talk .talk-bars rect:nth-of-type(2) { animation: bmsbot-eq .68s ease-in-out .15s infinite;   }
#bmsBot.state-talk .talk-bars rect:nth-of-type(3) { animation: bmsbot-eq 1.0s ease-in-out .36s infinite;   }
#bmsBot.state-talk .talk-bars rect:nth-of-type(4) { animation: bmsbot-eq .76s ease-in-out .08s infinite;   }
#bmsBot.state-talk .talk-bars rect:nth-of-type(5) { animation: bmsbot-eq .92s ease-in-out .26s infinite;   }
#bmsBot.state-talk .talk-bars rect:nth-of-type(6) { animation: bmsbot-eq .70s ease-in-out .44s infinite;   }
#bmsBot.state-talk .talk-bars rect:nth-of-type(7) { animation: bmsbot-eq .82s ease-in-out .20s infinite;   }
@keyframes bmsbot-eq {
    0%   { transform: scaleY(0.28); }
    25%  { transform: scaleY(1);    }
    50%  { transform: scaleY(0.45); }
    75%  { transform: scaleY(0.82); }
    100% { transform: scaleY(0.28); }
}
#bmsBot.state-talk .mouth-line,
#bmsBot.state-talk .talk-wave,
#bmsBot.state-talk .expr-brow,
#bmsBot.state-talk .expr-tear,
#bmsBot.state-talk .expr-teeth,
#bmsBot.state-talk .expr-sweat { opacity: 0 !important; }

/* ========================================================
   BOTONES DEL PANEL / CELL-STYLE BUTTONS
======================================================== */
#bmsBot .button-cell { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#bmsBot .cell-bg     { fill: transparent; transition: fill .2s; }
#bmsBot .button-cell:hover  .cell-bg { fill: rgba(24,217,220,.10); }
#bmsBot .button-cell:active .cell-bg { fill: rgba(24,217,220,.18); }

#bmsBot .power-icon-stroke {
    stroke: #dc2626;
    fill: none;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .3s, filter .3s;
}

#bmsBot .mic-body {
    fill: #14191f;
    transition: fill .3s, filter .3s;
}
#bmsBot .mic-stroke {
    fill: none;
    stroke: #14191f;
    stroke-width: 2.2;
    stroke-linecap: round;
    transition: stroke .3s, filter .3s;
}

#bmsBot.state-listen .mic-body   { fill:   #18d9dc; filter: drop-shadow(0 0 4px #18d9dc); }
#bmsBot.state-listen .mic-stroke { stroke: #18d9dc; filter: drop-shadow(0 0 3px #18d9dc); }

/* Chat icon (bottom-left): speech bubble */
#bmsBot .chat-icon-shape {
    fill: #14191f;
    transition: fill .3s, filter .3s;
}
#bmsBot.input-open .chat-icon-shape {
    fill: #18d9dc;
    filter: drop-shadow(0 0 5px #18d9dc);
}

/* --- Voz: mientras escucha, mic -> "procesar" y chat -> "stop" --- */
#bmsBot .send-icon,
#bmsBot .stop-icon { display: none; }
#bmsBot.state-listen .mic-icon  { display: none; }
#bmsBot.state-listen .send-icon { display: block; }
#bmsBot.state-listen .chat-icon { display: none; }
#bmsBot.state-listen .stop-icon { display: block; }
#bmsBot .send-icon-shape {
    fill: #18d9dc;
    filter: drop-shadow(0 0 4px #18d9dc);
    animation: bmsbot-tip 1.4s ease-in-out infinite;
}
#bmsBot .stop-icon-shape {
    fill: #ff5d5d;
    filter: drop-shadow(0 0 4px #ff5d5d);
}

/* --- Botón para detener la voz (TTS) --- */
#bmsBot .bms-tts-stop {
    position: absolute;
    bottom: calc(90% - 7px);
    right: 4px;
    display: none;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    border: 0;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font: 700 10.5px system-ui, sans-serif;
    letter-spacing: .02em;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,.34);
    z-index: 10001;
    white-space: nowrap;
}
#bmsBot.tts-active .bms-tts-stop { display: inline-flex; }
#bmsBot .bms-tts-stop:hover  { background: #dc2626; }
#bmsBot .bms-tts-stop:active { transform: scale(.94); }
#bmsBot .bms-tts-stop svg { display: block; }

/* Oculta los tooltips de las citas del calendario mientras el bot está
   en uso (hover, arrastre o activo) para que no lo tapen. */
body.bms-bot-busy .fc-event-tooltip { display: none !important; }

/* ========================================================
   CONTROLES SUPERIORES / TOP CONTROLS
======================================================== */
#bmsBot .top-btn-circle {
    fill: transparent;
    stroke: transparent;
    stroke-width: 0.7;
    transition: fill .2s, stroke .2s;
}
#bmsBot .button-cell:hover  .top-btn-circle { fill: rgba(24,217,220,0.12); stroke: transparent; }
#bmsBot .button-cell:active .top-btn-circle { fill: rgba(24,217,220,0.18); stroke: transparent; }

#bmsBot .gear-icon          { cursor: pointer; opacity: .92; transition: opacity .2s; }
#bmsBot .gear-icon:hover    { opacity: 1; }
#bmsBot .gear-icon text     { pointer-events: none; }

/* Power circle styling (top-left, replaces bottom power) */
#bmsBot .power-circle {
    fill: transparent;
    stroke: transparent;
    stroke-width: 0.7;
    transition: fill .2s, stroke .2s;
}
#bmsBot .button-cell.power-top:hover  .power-circle { fill: rgba(220,38,38,0.10); stroke: transparent; }
#bmsBot .button-cell.power-top:active .power-circle { fill: rgba(220,38,38,0.16); stroke: transparent; }
#bmsBot.off .power-circle { fill: rgba(180,180,180,0.10); stroke: transparent; }
#bmsBot.off .power-icon-stroke { stroke: #b8b8b8; }

/* ========================================================
   INDICADOR DE ESCALA / SCALE INDICATOR
======================================================== */
#bmsBot .bms-scale-indicator {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: #2ee8e8;
    color: #0a1014;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(46,232,232,.4);
    z-index: 10001;
}
#bmsBot .bms-scale-indicator.visible { opacity: 1; }

/* --- Ondas de Sonido / Sound waves --- */
#bmsBot .sound-waves {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
    width:  calc(52px * var(--bms-bot-scale));
    height: calc(36px * var(--bms-bot-scale));
}
/* Sound waves sit snug against the bot's sides (negative margin tucks
   them in close while listening). */
#bmsBot .sound-waves.left  { right: 100%; margin-right: -15px; }
#bmsBot .sound-waves.right { left: 100%;  margin-left:  -15px; }
/* Sound waves show only while listening (the confirm state shows just
   the success icon - no waves, no orange tint). */
#bmsBot.state-listen .sound-waves { opacity: 1; }
#bmsBot .wave-svg  { width: 100%; height: 100%; overflow: visible; }
#bmsBot .wave-path {
    fill: none;
    stroke: #14a3a6;
    stroke-linecap: round;
    transform-origin: 30px 18px;
    filter: drop-shadow(0 0 4px #18d9dc);
}
#bmsBot .wave-1 { stroke-width: 2;   animation: bmsbot-wave 1s ease-in-out infinite; }
#bmsBot .wave-2 { stroke-width: 1.6; animation: bmsbot-wave 1s ease-in-out infinite .15s; opacity: .65; }
#bmsBot .wave-3 { stroke-width: 1.2; animation: bmsbot-wave 1s ease-in-out infinite .3s;  opacity: .4;  }
@keyframes bmsbot-wave {
    0%,100% { transform: scaleY(.25); opacity: .35; }
    50%      { transform: scaleY(1.4); opacity: 1;   }
}

/* ========================================================
   BURBUJAS DE CHAT / DUAL CHAT BUBBLES
======================================================== */
#bmsBot .bms-bubble {
    position: absolute;
    right: 0;
    padding: 11px 15px;
    border-radius: 14px;
    font-family: system-ui, 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    word-wrap: break-word;
    white-space: normal;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
    width: max-content;
    max-width: 270px;
    z-index: 10000;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}

#bmsBot .bot-bubble {
    bottom: calc(90% + 10px);
    background: #fff;
    color: #1a2030;
    border: 2px solid #1cc7c9;
    -webkit-transform: translate3d(0, 6px, 0);
    transform: translate3d(0, 6px, 0);
}
#bmsBot .bot-bubble.visible { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#bmsBot.state-listen  .bot-bubble.visible { border-color: #a855f7; }

#bmsBot .user-bubble {
    top: calc(100% - 15px) !important;
    background: #111b2d;
    color: #dde4ec;
    border: 2px solid #7c3aed;
    font-style: italic;
    font-size: 12.5px;
    -webkit-transform: translate3d(0, -6px, 0);
    transform: translate3d(0, -6px, 0);
    transition: opacity .3s, transform .3s, top .3s;
}
#bmsBot .user-bubble.visible { opacity: 1; -webkit-transform: translate3d(0, 15%, 0); transform: translate3d(0, 15%, 0); }
/* #bmsBot.input-open .user-bubble { top: calc(100% - 35px) !important; } */

.bms-agent-actions {
    position: fixed;
    /* Default anchor: above the floating bot at bottom-right. JS may override
       left/top once the user drags it. */
    right: 24px;
    bottom: 230px;
    width: min(320px, 88vw);
    max-height: 70vh;
    overflow-y: auto;
    padding: 10px 10px 12px;
    border: 1px solid rgba(20, 163, 166, .35);
    border-radius: 10px;
    background: rgba(255, 255, 255, .99);
    color: #1a2030;
    box-shadow: 0 14px 34px rgba(0,0,0,.30);
    z-index: 10050;
    font-family: system-ui, 'Space Grotesk', sans-serif;
}

/* Draggable header: title on the left, close (X) on the right. */
.bms-agent-actions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: -2px -2px 8px;
    padding: 2px 2px 6px;
    border-bottom: 1px solid rgba(31, 41, 55, .1);
    cursor: grab;
    touch-action: none;
}

.bms-agent-actions__header:active { cursor: grabbing; }

.bms-agent-actions__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #14a3a6;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bms-agent-actions__close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.bms-agent-actions__close:hover {
    background: rgba(220, 38, 38, .12);
    color: #dc2626;
}

.bms-agent-actions.is-dragging {
    box-shadow: 0 18px 44px rgba(0,0,0,.38);
    transition: none;
}

.bms-agent-actions__summary {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bms-agent-actions__voice-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 10px;
    background: rgba(20, 163, 166, .12);
    color: #14a3a6;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.bms-agent-actions__voice-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #14a3a6;
    animation: bmsbot-voice-dot 1.1s ease-in-out infinite;
}

@keyframes bmsbot-voice-dot {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .35; transform: scale(.7); }
}

.bms-agent-actions__cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.bms-agent-actions__card {
    padding: 8px 9px;
    border: 1px solid rgba(31, 41, 55, .12);
    border-radius: 7px;
    background: #fbfcfd;
}

.bms-agent-actions__card[data-complete="false"] {
    border-color: rgba(239, 68, 68, .45);
    background: rgba(254, 242, 242, .65);
}

.bms-agent-actions__card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #1f2937;
}

.bms-agent-actions__card-status {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
}

.bms-agent-actions__card[data-complete="true"]  .bms-agent-actions__card-status {
    color: #047857;
    background: rgba(16, 185, 129, .14);
}

.bms-agent-actions__card[data-complete="false"] .bms-agent-actions__card-status {
    color: #b91c1c;
    background: rgba(239, 68, 68, .14);
}

.bms-agent-actions__field-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bms-agent-actions__field {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px;
    font-size: 11px;
    line-height: 1.3;
    border-radius: 4px;
}

.bms-agent-actions__field-label {
    color: #4b5563;
    font-weight: 600;
    white-space: nowrap;
}

.bms-agent-actions__field-value {
    color: #111827;
    text-align: right;
    word-break: break-word;
}

.bms-agent-actions__field--ok      .bms-agent-actions__field-label::before { content: "✓ "; color: #059669; }
.bms-agent-actions__field--missing .bms-agent-actions__field-label::before { content: "✗ "; color: #dc2626; }
.bms-agent-actions__field--default .bms-agent-actions__field-label::before { content: "→ "; color: #6b7280; }

.bms-agent-actions__field--missing {
    background: rgba(239, 68, 68, .08);
}

.bms-agent-actions__field--missing .bms-agent-actions__field-value {
    color: #b91c1c;
    font-style: italic;
}

.bms-agent-actions__field--default {
    opacity: .82;
}

.bms-agent-actions__field--default .bms-agent-actions__field-value {
    color: #4b5563;
    font-size: 10.5px;
}

.bms-agent-actions__card-warning {
    margin-top: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(251, 191, 36, .18);
    color: #92400e;
    font-size: 10.5px;
    line-height: 1.3;
}

.bms-agent-actions__delete-target {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #b91c1c;
}

.bms-agent-actions__deps {
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(220, 38, 38, .25);
    background: rgba(220, 38, 38, .06);
}

.bms-agent-actions__deps-title {
    font-size: 11px;
    font-weight: 700;
    color: #b91c1c;
    margin-bottom: 3px;
}

.bms-agent-actions__deps-list {
    margin: 0;
    padding-left: 16px;
    font-size: 11px;
    line-height: 1.45;
    color: #7f1d1d;
}

.bms-agent-actions__deps-list li.is-blocking {
    font-weight: 700;
    color: #991b1b;
}

.bms-agent-actions__buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.bms-agent-actions__hint {
    margin-top: 8px;
    font-size: 10.5px;
    line-height: 1.35;
    color: #6b7280;
    text-align: center;
}

.bms-agent-actions__btn {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(31, 41, 55, .18);
    border-radius: 7px;
    background: #f8fafc;
    color: #111827;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.bms-agent-actions__btn--primary {
    border-color: #14a3a6;
    background: #14a3a6;
    color: #fff;
}

.bms-agent-actions__btn--primary:disabled {
    background: #cbd5e1;
    border-color: #cbd5e1;
    color: #6b7280;
    cursor: not-allowed;
}

/* Chat-cell pulse when input panel is open */
#bmsBot.input-open .chat-icon-shape {
    animation: bmsbot-chat-pulse 1.2s ease-in-out infinite;
}
@keyframes bmsbot-chat-pulse {
    0%,100% { opacity: 1;   }
    50%     { opacity: .65; }
}

/* ========================================================
   PANEL DE ENTRADA / INPUT + SEND PANEL
======================================================== */
#bmsBot .bms-input-panel {
    position: absolute;
    top: calc(85% + 10px);
    left: 50%;
    -webkit-transform: translate3d(-50%, -4px, 0);
    transform: translate3d(-50%, -4px, 0);
    width: min(280px, 90vw);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(160deg, rgba(19,28,46,.97) 0%, rgba(10,16,24,.97) 100%);
    border: 1.5px solid #2ee8e8;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 0 24px rgba(46,232,232,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s, transform .22s;
    z-index: 10001;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    will-change: transform, opacity;
    cursor: grab;
    user-select: text;
    -webkit-user-select: text;
    touch-action: auto;
}
#bmsBot .bms-input-panel:active {
    cursor: grabbing;
}
#bmsBot.input-open .bms-input-panel {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    pointer-events: auto;
}
#bmsBot .bms-input-panel textarea {
    width: 100%;
    min-height: 52px;
    max-height: 240px;
    background: rgba(10,16,24,0.6);
    border: 1px solid #2a3a55;
    border-radius: 8px;
    outline: none;
    color: #dde4ec;
    font-family: system-ui,'Space Grotesk',sans-serif;
    font-size: 12px;
    padding: 8px;
    resize: vertical;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: text;
}
#bmsBot .bms-input-panel textarea::-webkit-scrollbar {
    display: none;
}
#bmsBot .bms-input-panel textarea::placeholder { color: #7c8a9c; }
#bmsBot .bms-input-panel textarea:focus {
    border-color: #2ee8e8;
    box-shadow: 0 0 8px rgba(46,232,232,0.25);
}
#bmsBot .bms-input-panel .bms-input-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
#bmsBot .bms-input-panel .bms-action-btn-group {
    display: flex;
    gap: 6px;
}
#bmsBot .bms-input-panel .bms-action-btn {
    background: #1a2435;
    border: 1px solid #2a3a55;
    color: #dde4ec;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .15s;
    font-size: 12px;
}
#bmsBot .bms-input-panel .bms-action-btn:hover {
    background: #21304a;
    border-color: #2ee8e8;
    color: #2ee8e8;
}
#bmsBot .bms-input-panel .bms-action-btn:active {
    transform: scale(0.92);
}
#bmsBot .bms-input-panel .bms-action-btn.recording {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
    animation: bms-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes bms-mic-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(0.94); }
}
#bmsBot .bms-input-panel .bms-send-btn {
    background: #2ee8e8;
    border: 0;
    color: #0a1014;
    cursor: pointer;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .15s;
    padding: 0;
}
#bmsBot .bms-input-panel .bms-send-btn svg { display: block; }
#bmsBot .bms-input-panel .bms-send-btn:hover  { background: #5ff1f1; }
#bmsBot .bms-input-panel .bms-send-btn:active { transform: scale(.92); }

#bmsBot .bot-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 28px;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #1cc7c9;
}
#bmsBot.state-listen  .bot-bubble.visible::after { border-top-color: #a855f7; }

#bmsBot .user-bubble::after {
    content: '';
    position: absolute;
    top: -10px;
    right: 28px;
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #7c3aed;
}

/* --- Modificadores de Ánimo / Mood overrides --- */
#bmsBot.mood-error .mouth-line,
#bmsBot.mood-error .expr-brow,
#bmsBot.mood-error .divider-line,
#bmsBot.mood-error .antenna line { stroke: #e90606 !important; filter: drop-shadow(0 0 6px #e90606) !important; }
#bmsBot.mood-error .eye,
#bmsBot.mood-error .antenna-tip { fill: #e90606 !important; filter: drop-shadow(0 0 7px #e90606) !important; }
#bmsBot.mood-error .wave-path { stroke: #e90606 !important; filter: drop-shadow(0 0 4px #e90606) !important; }
#bmsBot.mood-error .bot-bubble.visible { border-color: #e90606 !important; }
#bmsBot.mood-error .bot-bubble.visible::after { border-top-color: #e90606 !important; }

#bmsBot.mood-success .mouth-line,
#bmsBot.mood-success .expr-brow,
#bmsBot.mood-success .divider-line,
#bmsBot.mood-success .antenna line { stroke: #18d9dc !important; filter: drop-shadow(0 0 6px #18d9dc) !important; }
#bmsBot.mood-success .eye,
#bmsBot.mood-success .antenna-tip { fill: #18d9dc !important; filter: drop-shadow(0 0 7px #18d9dc) !important; }
#bmsBot.mood-success .wave-path { stroke: #18d9dc !important; filter: drop-shadow(0 0 4px #18d9dc) !important; }
#bmsBot.mood-success .bot-bubble.visible { border-color: #18d9dc !important; }
#bmsBot.mood-success .bot-bubble.visible::after { border-top-color: #18d9dc !important; }

#bmsBot.mood-prompt .mouth-line,
#bmsBot.mood-prompt .expr-brow,
#bmsBot.mood-prompt .divider-line,
#bmsBot.mood-prompt .antenna line { stroke: #18d9dc !important; filter: drop-shadow(0 0 6px #18d9dc) !important; }
#bmsBot.mood-prompt .eye,
#bmsBot.mood-prompt .antenna-tip { fill: #18d9dc !important; filter: drop-shadow(0 0 7px #18d9dc) !important; }
#bmsBot.mood-prompt .wave-path { stroke: #18d9dc !important; filter: drop-shadow(0 0 4px #18d9dc) !important; }
#bmsBot.mood-prompt .bot-bubble.visible,
#bmsBot.mood-prompt .user-bubble.visible { border-color: #18d9dc !important; }
#bmsBot.mood-prompt .bot-bubble.visible::after { border-top-color: #18d9dc !important; }
#bmsBot.mood-prompt .user-bubble.visible::after { border-bottom-color: #18d9dc !important; }

/* ========================================================
   ROSTRO PARAMÉTRICO / PARAMETRIC FACE
======================================================== */
/* CSS vars carry the active face color; JS lerps them between emotions.
   Mood / state classes can override them with higher-specificity rules. */
#bmsBot {
    --bms-face-color: #18d9dc;
    --bms-face-glow:  #18d9dc;
}

/* Cejas / Brows - opacity + angle are JS-driven via inline style.
   Color follows the face color. */
#bmsBot .expr-brow {
    stroke: var(--bms-face-color);
    stroke-width: 2.6;
    stroke-linecap: round;
    fill: none;
    opacity: 0;
    filter: drop-shadow(0 0 4px var(--bms-face-glow));
    transition: stroke .35s, filter .35s;
}
#bmsBot.off .expr-brow { stroke: #6a7077; filter: none; opacity: 0 !important; }

/* Lágrima / Tear (sad) - JS toggles opacity */
#bmsBot .expr-tear {
    fill: #6ad8ff;
    opacity: 0;
    filter: drop-shadow(0 0 3px #6ad8ff);
    transition: opacity .3s;
    pointer-events: none;
}
#bmsBot.off .expr-tear { opacity: 0 !important; filter: none; }

/* Ojos de Corazón / Heart eyes (love) - JS toggles opacity, pulse via CSS */
#bmsBot .expr-heart {
    fill: #ff5b8a;
    opacity: 0;
    filter: drop-shadow(0 0 4px #ff5b8a);
    transition: opacity .3s;
    transform-origin: center;
    -webkit-transform-box: fill-box;
    transform-box: fill-box;
    animation: bmsbot-heart-pulse 1.1s ease-in-out infinite;
    pointer-events: none;
}
#bmsBot.off .expr-heart { opacity: 0 !important; animation: none; filter: none; }
@keyframes bmsbot-heart-pulse {
    0%,100% { transform: scale(0.95); }
    50%     { transform: scale(1.12); }
}

/* ── Partes de cara animadas (9 expresiones) / Animated face parts ──
   Eyes and mouth are single morphing vector paths (their 'd' transforms
   each frame) so there is no fade between separate open/closed elements. */
/* Dientes / Teeth (toothy grin) - drawn over the morphing mouth path */
#bmsBot .expr-teeth {
    fill: #ffffff;
    opacity: 0;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.55));
    pointer-events: none;
}
#bmsBot.off .expr-teeth { opacity: 0 !important; filter: none; }

/* Gota de sudor / Sweat drop (relief - nervous) */
#bmsBot .expr-sweat {
    fill: #6ad8ff;
    opacity: 0;
    filter: drop-shadow(0 0 3px #6ad8ff);
    pointer-events: none;
}
#bmsBot.off .expr-sweat { opacity: 0 !important; filter: none; }

/* Mejillas sonrojadas / Blush cheeks - JS morphs opacity */
#bmsBot .expr-blush {
    fill: #ff6f86;
    opacity: 0;
    filter: blur(0.8px) drop-shadow(0 0 2px rgba(255,111,134,.5));
    pointer-events: none;
}
#bmsBot.off .expr-blush { opacity: 0 !important; filter: none; }

/* Aureola / Halo - JS morphs opacity, gentle float via CSS */
#bmsBot .expr-halo {
    fill: none;
    stroke: #cdf6ff;
    stroke-width: 2.6;
    opacity: 0;
    filter: drop-shadow(0 0 4px #18d9dc) drop-shadow(0 0 9px #18d9dc);
    -webkit-transform-box: fill-box;
    transform-box: fill-box;
    transform-origin: center;
    animation: bmsbot-halo 2.6s ease-in-out infinite;
    pointer-events: none;
}
#bmsBot.off .expr-halo { opacity: 0 !important; filter: none; animation: none; }
@keyframes bmsbot-halo {
    0%,100% { transform: translateY(0)      scale(1);    }
    50%     { transform: translateY(-1.6px) scale(1.05); }
}

/* ── Detalles ambientales por emocion / Per-emotion ambient FX ──
   Sparkles, burst lines, motion swooshes and floating hearts around the
   bot. Toggled by the fx-spark | fx-burst | fx-motion | fx-hearts class. */
#bmsBot .deco-spark,
#bmsBot .deco-burst,
#bmsBot .deco-motion,
#bmsBot .deco-hearts,
#bmsBot .deco-drops,
#bmsBot .deco-shake {
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
}
#bmsBot.fx-spark  .deco-spark  { opacity: 1; }
#bmsBot.fx-burst  .deco-burst  { opacity: 1; }
#bmsBot.fx-motion .deco-motion { opacity: 1; }
#bmsBot.fx-hearts .deco-hearts { opacity: 1; }
#bmsBot.fx-drops  .deco-drops  { opacity: 1; }
#bmsBot.fx-shake  .deco-shake  { opacity: 1; }
#bmsBot.off .deco-spark,
#bmsBot.off .deco-burst,
#bmsBot.off .deco-motion,
#bmsBot.off .deco-hearts,
#bmsBot.off .deco-drops,
#bmsBot.off .deco-shake { opacity: 0 !important; }

/* Sparkles - twinkling 4-point stars */
#bmsBot .fx-star {
    fill: #18d9dc;
    filter: drop-shadow(0 0 4px #18d9dc);
    transform-origin: 0px 0px;
}
#bmsBot.fx-spark .fx-star { animation: bmsbot-twinkle 1.9s ease-in-out infinite; }
#bmsBot.fx-spark .fx-star.tw2 { animation-delay: .55s; }
#bmsBot.fx-spark .fx-star.tw3 { animation-delay: 1.15s; }
@keyframes bmsbot-twinkle {
    0%,100% { transform: scale(.3)  rotate(0deg);  opacity: .2; }
    50%     { transform: scale(1)   rotate(45deg); opacity: 1;  }
}

/* Burst lines - radiating emphasis around the head */
#bmsBot .deco-burst line {
    stroke: #18d9dc;
    stroke-width: 2.4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px #18d9dc);
}
#bmsBot .deco-burst {
    -webkit-transform-box: view-box;
    transform-box: view-box;
    transform-origin: 59px 40px;
}
#bmsBot.fx-burst .deco-burst { animation: bmsbot-burst 1s ease-in-out infinite; }
@keyframes bmsbot-burst {
    0%,100% { transform: scale(.82); opacity: .5; }
    50%     { transform: scale(1.1); opacity: 1;  }
}

/* Motion swooshes - movement trails for the belly laugh */
#bmsBot .deco-motion path {
    fill: none;
    stroke: #18d9dc;
    stroke-width: 2.3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px #18d9dc);
}
#bmsBot.fx-motion .deco-motion path {
    animation: bmsbot-swoosh .5s ease-in-out infinite;
}
#bmsBot.fx-motion .deco-motion path:nth-of-type(even) { animation-delay: .25s; }
@keyframes bmsbot-swoosh {
    0%,100% { opacity: .28; }
    50%     { opacity: 1;   }
}

/* Floating hearts - drift up + fade for the love expressions */
#bmsBot .fx-heart {
    fill: #ff5b8a;
    filter: drop-shadow(0 0 3px #ff5b8a);
    transform-origin: 0px 5.5px;
}
#bmsBot.fx-hearts .fx-heart { animation: bmsbot-heartfloat 2.3s ease-in-out infinite; }
#bmsBot.fx-hearts .fx-heart.hb2 { animation-delay: .6s;  }
#bmsBot.fx-hearts .fx-heart.hb3 { animation-delay: 1.1s; }
#bmsBot.fx-hearts .fx-heart.hb4 { animation-delay: 1.6s; }
@keyframes bmsbot-heartfloat {
    0%   { transform: translateY(7px)   scale(.35); opacity: 0; }
    22%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { transform: translateY(-11px) scale(1);   opacity: 0; }
}

/* Falling droplets - spurt out for the anguish gesture */
#bmsBot .fx-drop {
    fill: #6ad8ff;
    filter: drop-shadow(0 0 2px #6ad8ff);
    transform-origin: 0px 0px;
}
#bmsBot.fx-drops .fx-drop { animation: bmsbot-dropfall 1s ease-in infinite; }
#bmsBot.fx-drops .fx-drop.dr2 { animation-delay: .25s; }
#bmsBot.fx-drops .fx-drop.dr3 { animation-delay: .5s;  }
#bmsBot.fx-drops .fx-drop.dr4 { animation-delay: .75s; }
@keyframes bmsbot-dropfall {
    0%   { transform: translateY(-3px) scale(.4); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(15px) scale(1);  opacity: 0; }
}

/* Trembling lines - vibrate beside the head for the fear gesture */
#bmsBot .deco-shake path {
    fill: none;
    stroke: #18d9dc;
    stroke-width: 2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px #18d9dc);
}
#bmsBot.fx-shake .deco-shake path {
    animation: bmsbot-tremble .16s ease-in-out infinite;
}
#bmsBot.fx-shake .deco-shake path:nth-of-type(even) { animation-delay: .08s; }
@keyframes bmsbot-tremble {
    0%,100% { transform: translateX(-1.1px); opacity: .55; }
    50%     { transform: translateX(1.1px);  opacity: 1;   }
}

/* Sleeping Z's - shown while the bot dozes (idle state). All three run
   the same drift-up-and-away loop, staggered, for a steady "Zzz" stream. */
#bmsBot .deco-zzz { opacity: 0; transition: opacity .4s; pointer-events: none; }
#bmsBot.bot-sleeping .deco-zzz { opacity: 1; }
#bmsBot.off .deco-zzz { opacity: 0 !important; }
#bmsBot .zzz {
    fill: #18d9dc;
    font-family: system-ui, 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 11px;
    filter: drop-shadow(0 0 4px #18d9dc);
    transform-origin: 101px 2px;
}
#bmsBot.bot-sleeping .zzz { animation: bmsbot-zfloat 2.7s ease-in-out infinite; }
#bmsBot.bot-sleeping .zzz.z2 { animation-delay: .9s;  }
#bmsBot.bot-sleeping .zzz.z3 { animation-delay: 1.8s; }
@keyframes bmsbot-zfloat {
    0%   { transform: translate(0, 4px)    scale(.45); opacity: 0; }
    25%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translate(13px, -17px) scale(1.3); opacity: 0; }
}

/* Success check icon (confirm state) - ring pops, checkmark draws in. */
#bmsBot g[data-icon="check"] .icon-check-ring {
    transform-origin: 60px 48px;
    animation: bmsbot-check-pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
#bmsBot g[data-icon="check"] .icon-check-mark {
    stroke-dasharray: 26;
    animation: bmsbot-check-draw .4s ease-out .22s both,
               bmsbot-check-glow 1.8s ease-in-out .7s infinite;
}
@keyframes bmsbot-check-pop {
    0%   { transform: scale(0);    opacity: .2; }
    65%  { transform: scale(1.18); opacity: 1;  }
    100% { transform: scale(1);    opacity: 1;  }
}
@keyframes bmsbot-check-draw {
    from { stroke-dashoffset: 26; }
    to   { stroke-dashoffset: 0;  }
}
@keyframes bmsbot-check-glow {
    0%,100% { filter: drop-shadow(0 0 3px #5dffb0); }
    50%     { filter: drop-shadow(0 0 7px #5dffb0); }
}

/* ========================================================
   CAPA DE ICONOS / ICON LAYER
======================================================== */
#bmsBot .icon-layer {
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
#bmsBot.bot-has-icon .icon-layer { opacity: 1; }
#bmsBot .icon-layer > g[data-icon] { display: none; }
#bmsBot .icon-layer > g[data-icon].active { display: block; }

/* When an icon is shown, hide everything else inside the visor */
#bmsBot.bot-has-icon .eye,
#bmsBot.bot-has-icon .mouth-line,
#bmsBot.bot-has-icon .expr-brow,
#bmsBot.bot-has-icon .expr-tear,
#bmsBot.bot-has-icon .expr-teeth,
#bmsBot.bot-has-icon .expr-sweat,
#bmsBot.bot-has-icon .expr-blush,
#bmsBot.bot-has-icon .expr-halo,
#bmsBot.bot-has-icon .talk-wave,
#bmsBot.bot-has-icon .talk-bars,
#bmsBot.bot-has-icon .process-bars { opacity: 0 !important; }
#bmsBot.bot-has-icon .eye { animation: none !important; }
#bmsBot.off .icon-layer { opacity: 0 !important; }

/* Audio bars */
@keyframes bmsbot-aw1 { 0%,100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes bmsbot-aw2 { 0%,100% { transform: scaleY(0.7); } 30% { transform: scaleY(0.2); } 70% { transform: scaleY(0.95); } }
@keyframes bmsbot-aw3 { 0%,100% { transform: scaleY(0.9); } 50% { transform: scaleY(0.35); } }
@keyframes bmsbot-aw4 { 0%,100% { transform: scaleY(0.45); } 40% { transform: scaleY(1); } 80% { transform: scaleY(0.3); } }
@keyframes bmsbot-aw5 { 0%,100% { transform: scaleY(0.3); } 60% { transform: scaleY(0.85); } }
#bmsBot .icon-aw-bar {
    fill: #18d9dc;
    filter: drop-shadow(0 0 3px #18d9dc);
    transform-origin: center 46px;
}
#bmsBot .icon-aw-bar:nth-of-type(1) { animation: bmsbot-aw1 1.1s ease-in-out infinite; }
#bmsBot .icon-aw-bar:nth-of-type(2) { animation: bmsbot-aw2 1.1s ease-in-out infinite .08s; }
#bmsBot .icon-aw-bar:nth-of-type(3) { animation: bmsbot-aw3 1.1s ease-in-out infinite .16s; }
#bmsBot .icon-aw-bar:nth-of-type(4) { animation: bmsbot-aw4 1.1s ease-in-out infinite .24s; }
#bmsBot .icon-aw-bar:nth-of-type(5) { animation: bmsbot-aw5 1.1s ease-in-out infinite .32s; }
#bmsBot .icon-aw-bar:nth-of-type(6) { animation: bmsbot-aw1 1.1s ease-in-out infinite .40s; }

/* Icono de Corazón / Heart icon */
#bmsBot .icon-heart-big {
    fill: #ff5b8a;
    filter: drop-shadow(0 0 5px #ff5b8a);
    transform-origin: 60px 50px;
    animation: bmsbot-heart-pulse 1s ease-in-out infinite;
}

/* Icono de Descarga / Download icon */
@keyframes bmsbot-icon-down { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
#bmsBot .icon-download-arrow {
    transform-origin: 60px 48px;
    animation: bmsbot-icon-down 1.2s ease-in-out infinite;
}

/* Loading dots */
@keyframes bmsbot-loaddot { 0%,100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1); } }
#bmsBot .icon-load-dot {
    fill: #18d9dc;
    filter: drop-shadow(0 0 3px #18d9dc);
    animation: bmsbot-loaddot 1.3s ease-in-out infinite;
}
#bmsBot .icon-load-dot:nth-of-type(1) { transform-origin: 46px 48px; animation-delay: 0s; }
#bmsBot .icon-load-dot:nth-of-type(2) { transform-origin: 60px 48px; animation-delay: .18s; }
#bmsBot .icon-load-dot:nth-of-type(3) { transform-origin: 74px 48px; animation-delay: .36s; }

/* Procesando / Processing - spinning dashed ring */
@keyframes bmsbot-ringspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#bmsBot .icon-proc-ring {
    transform-origin: 60px 48px;
    -webkit-transform-box: view-box;
    transform-box: view-box;
    animation: bmsbot-ringspin 1.6s linear infinite;
}

/* Alert / warning flash */
@keyframes bmsbot-alertflash { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
#bmsBot .icon-alert-grp { animation: bmsbot-alertflash 0.7s ease-in-out infinite; }

/* Mail bob */
@keyframes bmsbot-mailbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
#bmsBot .icon-mail-grp {
    transform-origin: 60px 50px;
    animation: bmsbot-mailbob 1.6s ease-in-out infinite;
}

/* Wi-Fi / music - static, just glow */
#bmsBot .icon-static-cyan {
    fill: none;
    stroke: #18d9dc;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px #18d9dc);
}
#bmsBot .icon-static-cyan-fill {
    fill: #18d9dc;
    filter: drop-shadow(0 0 3px #18d9dc);
}

/* ========================================================
   AUTO-CENTRADO / AUTO-CENTER
======================================================== */
#bmsBot.auto-centered {
    top: 50%;
    left: 50%;
    right: auto !important;
    bottom: auto !important;
    margin-top: calc(-94px * var(--bms-bot-scale));
    margin-left: calc(-54px * var(--bms-bot-scale));
}

/* About modal */
#bmsBotAboutOverlay {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,.7);
    z-index: 10003;
    display: none;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 16px;
}
#bmsBotAboutOverlay.visible { display: flex; }
#bmsBotAboutOverlay .about-card {
    background: linear-gradient(160deg, #131c2e 0%, #0a1018 100%);
    border: 1.5px solid #2ee8e8;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    padding: 24px;
    color: #dde4ec;
    font-family: system-ui,'Space Grotesk',sans-serif;
    box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(46,232,232,.25);
    max-height: 86vh;
    overflow-y: auto;
}
#bmsBotAboutOverlay .about-card h2 {
    color: #2ee8e8; margin: 0 0 10px; font-size: 18px;
}
#bmsBotAboutOverlay .about-card p { font-size: 13px; line-height: 1.55; margin: 8px 0; }
#bmsBotAboutOverlay .about-card ul { margin: 10px 0 16px; padding-left: 20px; }
#bmsBotAboutOverlay .about-card li { margin: 6px 0; font-size: 12.5px; line-height: 1.5; }
#bmsBotAboutOverlay .about-card .close {
    background: #2ee8e8; color: #0a1014; border: 0;
    padding: 9px 18px; border-radius: 8px; cursor: pointer;
    font-weight: 700; margin-top: 6px;
}

/* --- Ocultar botones reemplazados / Hide replaced buttons --- */
body:not(.bms-bot-hidden) #voiceConfirmListenBtn { display: none !important; }

@media (max-width: 720px) {
    #bmsBot    { bottom: 42px; right: 16px; --bms-bot-scale: .78; }
    #bmsBot .bms-bubble { max-width: min(88vw, 270px); }
}

/* Detención explícita de animaciones para navegadores WebKit/Safari */
#bmsBot:not(.state-listen) .eye { -webkit-animation: none !important; animation: none !important; }
#bmsBot:not(.state-listen):not(.state-confirm):not(.state-process) .divider-line { -webkit-animation: none !important; animation: none !important; }
#bmsBot:not(.state-process) .process-bars rect { -webkit-animation: none !important; animation: none !important; }
#bmsBot:not(.state-talk) .talk-bars rect { -webkit-animation: none !important; animation: none !important; }
#bmsBot:not(.state-listen) .sound-waves .wave-path { -webkit-animation: none !important; animation: none !important; }

#bmsBot:not(.fx-spark) .fx-star { -webkit-animation: none !important; animation: none !important; }
#bmsBot:not(.fx-burst) .deco-burst { -webkit-animation: none !important; animation: none !important; }
#bmsBot:not(.fx-motion) .deco-motion path { -webkit-animation: none !important; animation: none !important; }
#bmsBot:not(.fx-hearts) .fx-heart { -webkit-animation: none !important; animation: none !important; }
#bmsBot:not(.fx-drops) .fx-drop { -webkit-animation: none !important; animation: none !important; }
#bmsBot:not(.fx-shake) .deco-shake path { -webkit-animation: none !important; animation: none !important; }
#bmsBot:not(.bot-sleeping) .zzz { -webkit-animation: none !important; animation: none !important; }
#bmsBot:not(.bot-has-icon) .icon-layer * { -webkit-animation: none !important; animation: none !important; }

/* ========================================================
   iOS / TOUCH DEVICE FIXES
======================================================== */
/* On touch-only devices, :hover sticks after a tap and requires a
   second tap to activate. Using @media(hover:none) we apply the
   hover visual on :active instead, giving instant tactile feedback. */
@media (hover: none) {
    #bmsBot .button-cell:active  .cell-bg { fill: rgba(24,217,220,.14); }
    #bmsBot .button-cell.power-top:active .power-circle { fill: rgba(220,38,38,0.14); }
    #bmsBot .bms-label:active { fill: #2ee8e8; filter: drop-shadow(0 0 3px rgba(46,232,232,.6)); }
    #bmsBot .gear-icon:active { opacity: 1; }
    #bmsBot .bms-input-panel .bms-action-btn:active {
        background: #21304a;
        border-color: #2ee8e8;
        color: #2ee8e8;
    }
    #bmsBot .bms-input-panel .bms-send-btn:active { background: #5ff1f1; }
}