/* ===========================================================================
   Asistente comercial (#tos-asistente), canal web del tema Qualis (seccion 91)
   ---------------------------------------------------------------------------
   Los colores salen de las variables que el layout inyecta desde los helpers
   del tema (--tos-primary / --tos-secondary): ningun acento fijo aca.
   Vive abajo a la derecha; el boton de WhatsApp del tema esta a la izquierda.
   =========================================================================== */

#tos-asistente { position: fixed; right: 24px; bottom: 40px; z-index: 9990; font-family: inherit; }

#tos-asistente .tos-toggle {
    display: flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 18px;
    background: var(--tos-primary); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .25); transition: transform .2s;
}
#tos-asistente .tos-toggle svg { display: block; }
#tos-asistente .tos-toggle:hover { transform: translateY(-2px); }
#tos-asistente .tos-toggle.is-open span { display: none; }

#tos-asistente .tos-panel {
    position: absolute; right: 0; bottom: 64px; width: 370px; max-width: calc(100vw - 40px);
    height: 540px; max-height: calc(100vh - 160px);
    display: flex; flex-direction: column; background: #fff; border-radius: 16px;
    overflow: hidden; box-shadow: 0 20px 60px rgba(17, 24, 39, .22); border: 1px solid #e5e7eb;
}
/* display:flex le ganaria al [hidden] del navegador y el panel apareceria abierto al cargar (bug de Cloudy y Tesy) */
#tos-asistente .tos-panel[hidden] { display: none; }

#tos-asistente .tos-header {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
    background: var(--tos-primary); color: #fff;
}
#tos-asistente .tos-header strong { display: block; font-size: 15px; }
#tos-asistente .tos-header small { display: block; opacity: .88; font-size: 12px; }
#tos-asistente .tos-header-actions { display: flex; gap: 6px; }
#tos-asistente .tos-close, #tos-asistente .tos-reset { border: 0; background: none; color: #fff; cursor: pointer; line-height: 1; padding: 4px; border-radius: 6px; }
#tos-asistente .tos-close svg, #tos-asistente .tos-reset svg { display: block; }
#tos-asistente .tos-reset.is-armado { background: rgba(255, 255, 255, .25); }

#tos-asistente .tos-messages {
    flex: 1; overflow-y: auto; padding: 16px; background: #f8fafc;
    display: flex; flex-direction: column; gap: 10px;
}
#tos-asistente .tos-msg { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-wrap: break-word; }
#tos-asistente .tos-msg-bot { align-self: flex-start; background: #fff; color: #111827; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(17, 24, 39, .08); }
#tos-asistente .tos-msg-user { align-self: flex-end; background: var(--tos-primary); color: #fff; border-bottom-right-radius: 4px; }
#tos-asistente .tos-msg a { color: inherit; text-decoration: underline; }

#tos-asistente .tos-typing span { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #6b7280; animation: tos-bounce 1.2s infinite; }
#tos-asistente .tos-typing span:nth-child(2) { animation-delay: .2s; }
#tos-asistente .tos-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes tos-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }

#tos-asistente .tos-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e5e7eb; background: #fff; }
#tos-asistente .tos-form input { flex: 1; min-width: 0; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; }
#tos-asistente .tos-form input:focus { border-color: var(--tos-primary); }
#tos-asistente .tos-form button { border: 0; border-radius: 10px; width: 44px; flex: 0 0 44px; background: var(--tos-primary); color: #fff; cursor: pointer; display: grid; place-items: center; }
#tos-asistente .tos-form button:disabled { opacity: .5; cursor: default; }

#tos-asistente .tos-footer { text-align: center; padding: 8px 12px 10px; background: #fff; font-size: 12.5px; }
#tos-asistente .tos-footer a { color: #4b5563; text-decoration: none; font-weight: 500; }
#tos-asistente .tos-footer a:hover { color: var(--tos-primary); }

@media (max-width: 575px) {
    #tos-asistente { right: 12px; bottom: 24px; }
    #tos-asistente .tos-panel { width: calc(100vw - 24px); height: 70vh; }
    #tos-asistente .tos-toggle { padding: 12px; }
    #tos-asistente .tos-toggle span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    #tos-asistente .tos-typing span { animation: none; opacity: .7; }
    #tos-asistente .tos-toggle, #tos-asistente .tos-toggle:hover { transition: none; transform: none; }
}