.esfm-chatbot-root { position: fixed; right: 20px; bottom: 20px; z-index: 99999; font-family: -apple-system, "Segoe UI", Arial, sans-serif; }
.esfm-chatbot-toggle { width: 56px; height: 56px; border-radius: 50%; background: #0c2d48; color: #fff; border: none; font-size: 24px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.esfm-chatbot-toggle:hover, .esfm-chatbot-toggle:focus-visible { background: #145da0; }
.esfm-chatbot-panel { position: absolute; right: 0; bottom: 70px; width: 320px; max-width: calc(100vw - 40px); max-height: 480px; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); display: flex; flex-direction: column; overflow: hidden; }
/* Sin esta regla, el atributo hidden queda sin efecto visual: el UA
   stylesheet aplica [hidden] { display: none } en el origen "user agent",
   pero la regla de arriba (.esfm-chatbot-panel { display: flex }) es de
   origen "author", y el origen siempre pesa más que la especificidad en la
   cascada -- una declaración normal de author gana sobre CUALQUIER
   declaración normal de UA sin importar selectores. Verificado en el
   sandbox: sin esta línea, el panel aparecía visible, con layout real
   (getBoundingClientRect con ancho/alto > 0) y sus controles alcanzables
   por teclado, incluso con hidden/aria-expanded="false" recién cargada la
   página, contradiciendo el estado que el propio HTML y el JS (que no
   activa el trap de foco hasta openPanel()) dan por hecho. */
.esfm-chatbot-panel[hidden] { display: none; }
.esfm-chatbot-header { background: #0c2d48; color: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; }
.esfm-chatbot-close { background: transparent; border: none; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; }
.esfm-chatbot-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.esfm-chatbot-bubble { max-width: 85%; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; }
.esfm-chatbot-bubble--user { align-self: flex-end; background: #c58a00; color: #fff; }
.esfm-chatbot-bubble--bot { align-self: flex-start; background: #eff4ff; color: #0b1c30; }
.esfm-chatbot-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.esfm-chatbot-chip { background: #eff4ff; border: 1px solid #cbd5e1; border-radius: 999px; padding: 4px 10px; font-size: 11px; cursor: pointer; color: #0c2d48; }
.esfm-chatbot-chip:hover, .esfm-chatbot-chip:focus-visible { background: #dde9ff; }
.esfm-chatbot-form { display: flex; border-top: 1px solid #e2e8f0; }
.esfm-chatbot-input { flex: 1; border: none; padding: 10px 12px; font-size: 13px; }
.esfm-chatbot-input:focus { outline: none; }
.esfm-chatbot-form button[type="submit"] { background: #0c2d48; color: #fff; border: none; padding: 0 16px; cursor: pointer; font-size: 13px; }
.esfm-chatbot-form button[type="submit"]:hover { background: #145da0; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; width: 1px; }
@media (max-width: 480px) { .esfm-chatbot-panel { width: calc(100vw - 24px); right: -8px; } }