/* ══════════════════════════════════════════════════════
   DENTARA — Hannah (burbuja de chat del sitio dentaracore.com)

   A diferencia del asistente interno (chatbot/assets/css/chatbot.css),
   este panel NO puede apoyarse en los tokens var(--dg-*) de Dentara
   Core — dentaracore.com es el sitio de marketing, no corre Core — así
   que la paleta va fija acá (mismo índigo de marca, #4f46e5, usado en
   todo el resto del sistema).

   Mismo criterio de blindaje ya probado en el asistente interno
   (rondas 15/21/28/32 del otro plugin, ver ese archivo para el
   diagnóstico completo): un tema de WordPress cualquiera puede traer
   resets genéricos para <button>/<svg> con !important e igual o mayor
   especificidad que la nuestra. En vez de esperar a que aparezca el
   mismo bug acá, todas las reglas de color/tamaño/forma de íconos y
   botones se blindan desde el día uno con selectores antepuestos por
   el ID real del panel/FAB (#dhwFab, #dhwPanel — asignados en
   hannah-web.js, únicos en la página).

   Efecto "cristal": igual patrón que el asistente interno — color
   sólido primero (fallback), color-mix() translúcido + backdrop-filter
   después, como segunda declaración de la misma propiedad (si el
   navegador no soporta color-mix()/backdrop-filter, la segunda
   declaración se ignora entera y queda el sólido, sin romper nada).
   ══════════════════════════════════════════════════════ */

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

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

:root {
    --dhw-blue: #4f46e5;
    --dhw-blue-dark: #4338ca;
    --dhw-ink: #1e2130;
    --dhw-muted: #6b7280;
}

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

/* ── Panel ── */
.dhw-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 82%, transparent);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 24px 64px rgba(20,20,40,.22), 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;
}
.dhw-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

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

/* ── Header ── */
.dhw-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--dhw-blue);
    background: color-mix(in srgb, var(--dhw-blue) 92%, transparent);
    color: #fff;
    flex-shrink: 0;
}
.dhw-head-title { font-weight: 700; font-size: 15px; line-height: 1.2; }
.dhw-head-sub { font-size: 11.5px; opacity: .85; }
.dhw-head-spacer { flex: 1; }
#dhwPanel .dhw-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;
}
#dhwPanel .dhw-head button:hover { background: rgba(255,255,255,.18) !important; }
#dhwPanel .dhw-head svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: #fff !important; stroke-width: 2 !important; }
/* fill/stroke se HEREDAN — un <path>/<circle> sin regla propia toma el
   valor del <svg> ancestro, pero un valor heredado pierde contra
   CUALQUIER regla que matchee al hijo directamente (con o sin
   !important del lado del ancestro). Hay que blindar el path/circle
   también, no solo el <svg> contenedor — mismo diagnóstico que el
   asistente interno, ronda 21 (ver chatbot.css). */
#dhwPanel .dhw-head svg path, #dhwPanel .dhw-head svg circle, #dhwPanel .dhw-head svg rect {
    fill: none !important;
    stroke: #fff !important;
}

/* ── Cuerpo / mensajes ── */
.dhw-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dhw-msg { display: flex; }
.dhw-msg.assistant { justify-content: flex-start; }
.dhw-msg.user { justify-content: flex-end; }
.dhw-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;
}
.dhw-msg.assistant .dhw-msg-bubble {
    background: #eef0ff;
    background: color-mix(in srgb, #eef0ff 82%, transparent);
    color: var(--dhw-ink);
    border-bottom-left-radius: 4px;
}
.dhw-msg.user .dhw-msg-bubble {
    background: var(--dhw-blue);
    background: color-mix(in srgb, var(--dhw-blue) 88%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.dhw-msg-bubble strong { font-weight: 700; }
.dhw-msg-bubble em { font-style: italic; }

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

/* ── Pie / input ── */
.dhw-foot {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(0,0,0,.06);
    flex-shrink: 0;
}
#dhwPanel textarea.dhw-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(--dhw-ink);
}
#dhwPanel textarea.dhw-input:focus { outline: none; border-color: var(--dhw-blue) !important; }
#dhwPanel button.dhw-send {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    border: none !important;
    background: var(--dhw-blue) !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#dhwPanel button.dhw-send:disabled { opacity: .5; cursor: default; }
#dhwPanel button.dhw-send svg { width: 17px !important; height: 17px !important; fill: #fff !important; stroke: none !important; }
#dhwPanel button.dhw-send svg path, #dhwPanel button.dhw-send svg circle, #dhwPanel button.dhw-send svg rect {
    fill: #fff !important;
    stroke: none !important;
}

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