/* ══════════════════════════════════════════════════════
   SISTEMAS DEL OCCIDENTE — Tony (burbuja de chat del sitio)

   Mismo patrón que el plugin hermano de Dentara
   (dentara-hannah-web/assets/css/hannah-web.css) — blindaje por ID
   (#tonyFab, #tonyPanel) contra resets genéricos de tema en
   fill/stroke/tamaño/forma de íconos y botones (ver ese archivo para el
   diagnóstico completo, probado en producción), y el mismo patrón de
   "cristal" con fallback sólido si el navegador no soporta
   color-mix()/backdrop-filter.

   Paleta: tomada del sitio real (sistemasdeloccidente.com) — navy oscuro
   de la marca + el cian eléctrico que usan en sus propios botones de
   llamada a la acción ("Conoce Nuestros Servicios"), en vez de reusar el
   índigo de Dentara — son productos distintos.
   ══════════════════════════════════════════════════════ */

.tony-fab, .tony-fab *,
.tony-panel, .tony-panel * {
    box-sizing: border-box;
}

.tony-fab, .tony-panel {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

:root {
    --tony-navy: #142a45;
    --tony-navy-dark: #0c1c30;
    --tony-cyan: #00e5ff;
    --tony-ink: #0f172a;
    --tony-muted: #64748b;
}

/* ── Botón flotante ── */
.tony-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99988;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: var(--tony-cyan);
    color: var(--tony-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0,229,255,.35), 0 2px 8px rgba(0,0,0,.2);
    transition: transform .15s ease, box-shadow .15s ease;
}
#tonyFab.tony-fab { width: 58px !important; height: 58px !important; border-radius: 50% !important; background: var(--tony-cyan) !important; border: none !important; padding: 0 !important; margin: 0 !important; }
.tony-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,229,255,.45), 0 2px 8px rgba(0,0,0,.22); }
.tony-fab svg, #tonyFab svg { width: 26px !important; height: 26px !important; fill: none !important; stroke: var(--tony-navy) !important; stroke-width: 2 !important; }
.tony-fab svg path, .tony-fab svg circle,
#tonyFab svg path, #tonyFab svg circle { fill: var(--tony-navy) !important; stroke: var(--tony-navy) !important; }
.tony-fab svg path[data-outline], #tonyFab svg path[data-outline] { fill: none !important; stroke: var(--tony-navy) !important; }

/* ── Panel ── */
.tony-panel {
    position: fixed;
    bottom: 96px;
    right: 24px;
    z-index: 99989;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 140px);
    border-radius: 20px;
    background: #fff;
    background: color-mix(in srgb, #fff 84%, transparent);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 24px 64px rgba(10,20,40,.25), 0 2px 8px rgba(0,0,0,.08);
    border: 1px solid rgba(255,255,255,.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(.98);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.tony-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

@media (max-width: 480px) {
    .tony-panel { right: 16px; left: 16px; width: auto; bottom: 88px; }
    .tony-fab { right: 16px; bottom: 16px; }
}

/* ── Header ── */
.tony-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--tony-navy);
    background: color-mix(in srgb, var(--tony-navy) 92%, transparent);
    color: #fff;
    flex-shrink: 0;
}
.tony-head-title { font-weight: 700; font-size: 15px; line-height: 1.2; }
.tony-head-sub { font-size: 11.5px; opacity: .85; }
.tony-head-spacer { flex: 1; }
#tonyPanel .tony-head button {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
}
#tonyPanel .tony-head button:hover { background: rgba(255,255,255,.18) !important; }
#tonyPanel .tony-head svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: #fff !important; stroke-width: 2 !important; }
#tonyPanel .tony-head svg path, #tonyPanel .tony-head svg circle, #tonyPanel .tony-head svg rect {
    fill: none !important;
    stroke: #fff !important;
}

/* ── Cuerpo / mensajes ── */
.tony-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tony-msg { display: flex; }
.tony-msg.assistant { justify-content: flex-start; }
.tony-msg.user { justify-content: flex-end; }
.tony-msg-bubble {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.tony-msg.assistant .tony-msg-bubble {
    background: #eaf7fb;
    background: color-mix(in srgb, #eaf7fb 82%, transparent);
    color: var(--tony-ink);
    border-bottom-left-radius: 4px;
}
.tony-msg.user .tony-msg-bubble {
    background: var(--tony-navy);
    background: color-mix(in srgb, var(--tony-navy) 88%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.tony-msg-bubble strong { font-weight: 700; }
.tony-msg-bubble em { font-style: italic; }

.tony-typing { display: flex; align-items: center; gap: 4px; padding: 4px 2px; }
.tony-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--tony-muted);
    animation: tony-bounce 1.1s infinite ease-in-out;
}
.tony-typing span:nth-child(2) { animation-delay: .15s; }
.tony-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes tony-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ── Pie / input ── */
.tony-foot {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(0,0,0,.06);
    flex-shrink: 0;
}
#tonyPanel textarea.tony-input {
    flex: 1;
    resize: none;
    border: 1px solid rgba(0,0,0,.12) !important;
    border-radius: 12px !important;
    padding: 9px 12px !important;
    font-size: 13.5px;
    font-family: inherit;
    max-height: 90px;
    background: #fff !important;
    color: var(--tony-ink);
}
#tonyPanel textarea.tony-input:focus { outline: none; border-color: var(--tony-navy) !important; }
#tonyPanel button.tony-send {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    border: none !important;
    background: var(--tony-cyan) !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#tonyPanel button.tony-send:disabled { opacity: .5; cursor: default; }
#tonyPanel button.tony-send svg { width: 17px !important; height: 17px !important; fill: var(--tony-navy) !important; stroke: none !important; }
#tonyPanel button.tony-send svg path, #tonyPanel button.tony-send svg circle, #tonyPanel button.tony-send svg rect {
    fill: var(--tony-navy) !important;
    stroke: none !important;
}

.tony-footnote {
    text-align: center;
    font-size: 10.5px;
    color: var(--tony-muted);
    padding: 4px 10px 8px;
}