/* chat.css — widget del agente de chat. Todo escrito bajo #idai-chat: ni una
 * regla global. Tokens navy copiados de styles.css:642
 * (--brand:#1B3A8C; --brand-2:#4A7BC9; --brand-3:#8FB4EC). Ver
 * _no-subir-al-servidor/AGENTE-CHAT-SPEC.md §10. */

#idai-chat{--brand:#1B3A8C;--brand-2:#4A7BC9;--brand-3:#8FB4EC;--brand-glow:rgba(74,123,201,.22);--idai-chat-lift:0px}

/* Botón flotante */
#idai-chat .idai-chat-launcher{position:fixed;right:20px;bottom:calc(20px + var(--idai-chat-lift));width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none;box-shadow:0 12px 30px rgba(27,58,140,.45);
  color:#fff;display:grid;place-items:center;cursor:pointer;z-index:9400;transition:transform .2s ease,box-shadow .2s ease,bottom .2s ease}
#idai-chat .idai-chat-launcher:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 16px 36px rgba(27,58,140,.55)}
#idai-chat .idai-chat-launcher:focus-visible{outline:2px solid var(--brand-3);outline-offset:3px}
#idai-chat .idai-chat-launcher-icon{width:26px;height:26px}
#idai-chat.is-open .idai-chat-launcher{display:none}

/* Panel */
#idai-chat .idai-chat-panel{position:fixed;right:20px;bottom:calc(90px + var(--idai-chat-lift));width:380px;height:540px;
  max-height:calc(100vh - 110px);display:flex;flex-direction:column;border-radius:20px;
  /* Fondo OPACO del todo. Con .985/.99 el titular blanco del hero se leía por detrás como un
     fantasma: sobre texto tan grande y tan brillante, ese 1,5% se nota. Medido en captura. */
  background-color:#0b0f1c;
  background-image:linear-gradient(150deg,#0f152a,#06070c);border:1px solid rgba(74,123,201,.20);
  box-shadow:0 24px 64px rgba(0,0,0,.55);z-index:9401;opacity:0;transform:translateY(16px) scale(.98);
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1);overflow:hidden}
#idai-chat .idai-chat-panel[hidden]{display:none}
#idai-chat .idai-chat-panel.on{opacity:1;transform:translateY(0) scale(1)}

/* sticky + fondo propio: red de seguridad para que la cabecera (y su ✕) no pueda quedarse
   nunca fuera de la vista, pase lo que pase con el alto del panel. */
#idai-chat .idai-chat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;
  border-bottom:1px solid rgba(74,123,201,.18);flex:0 0 auto;position:sticky;top:0;background:#0b0f1c;z-index:2}
#idai-chat .idai-chat-title{font-size:.98rem;font-weight:700;color:#f4f6fb;margin:0}
#idai-chat .idai-chat-close{width:34px;height:34px;border-radius:10px;background:rgba(74,123,201,.12);
  border:1px solid rgba(74,123,201,.22);color:#c9d3e8;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;
  transition:background .2s,color .2s}
#idai-chat .idai-chat-close:hover{background:rgba(74,123,201,.22);color:#fff}
#idai-chat .idai-chat-close:focus-visible{outline:2px solid var(--brand-3);outline-offset:2px}
#idai-chat .idai-chat-close svg{width:16px;height:16px}

/* Mensajes */
#idai-chat .idai-chat-messages{flex:1 1 auto;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
#idai-chat .idai-chat-msg{display:flex;flex-direction:column;gap:6px;max-width:88%}
#idai-chat .idai-chat-msg-user{align-self:flex-end;align-items:flex-end}
#idai-chat .idai-chat-msg-assistant{align-self:flex-start;align-items:flex-start}
#idai-chat .idai-chat-msg-sys{align-self:center;max-width:96%;font-size:.78rem;color:#8b93a8;text-align:center;padding:2px 0}
#idai-chat .idai-chat-bubble{padding:10px 14px;border-radius:14px;font-size:.9rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
#idai-chat .idai-chat-msg-user .idai-chat-bubble{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-bottom-right-radius:4px}
#idai-chat .idai-chat-msg-assistant .idai-chat-bubble{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#e7eaf2;border-bottom-left-radius:4px}

/* CTA dentro de un mensaje */
#idai-chat .idai-chat-cta{margin-top:2px;padding:9px 16px;border-radius:10px;border:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:.82rem;font-weight:600;
  cursor:pointer;align-self:flex-start;box-shadow:0 6px 16px rgba(27,58,140,.4)}
#idai-chat .idai-chat-cta:hover{filter:brightness(1.1)}
#idai-chat .idai-chat-cta:focus-visible{outline:2px solid var(--brand-3);outline-offset:2px}

/* Chips de fuente */
#idai-chat .idai-chat-sources{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
#idai-chat .idai-chat-source{padding:5px 10px;border-radius:20px;background:rgba(74,123,201,.14);
  border:1px solid rgba(74,123,201,.3);color:var(--brand-3);font-size:.72rem;cursor:pointer;transition:background .2s,color .2s}
#idai-chat .idai-chat-source:hover{background:rgba(74,123,201,.26);color:#fff}
#idai-chat .idai-chat-source:focus-visible{outline:2px solid var(--brand-3);outline-offset:2px}

/* Indicador de "escribiendo" */
#idai-chat .idai-chat-dots{display:flex;gap:4px;padding:13px 14px}
#idai-chat .idai-chat-dots span{width:6px;height:6px;border-radius:50%;background:#9aa4bd;animation:idaiChatDot 1.1s ease-in-out infinite}
#idai-chat .idai-chat-dots span:nth-child(2){animation-delay:.15s}
#idai-chat .idai-chat-dots span:nth-child(3){animation-delay:.3s}
@keyframes idaiChatDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* Acciones rápidas: siempre visibles mientras el panel esté abierto */
#idai-chat .idai-chat-quick{display:flex;gap:8px;padding:10px 16px 0;flex:0 0 auto}
#idai-chat .idai-chat-quick[hidden]{display:none}
#idai-chat .idai-chat-quickbtn{flex:0 0 auto;max-width:100%;padding:9px 14px;border-radius:11px;
  background:rgba(74,123,201,.10);border:1px solid rgba(74,123,201,.26);color:#c9d3e8;
  font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .2s,color .2s}
#idai-chat .idai-chat-quickbtn:hover{background:rgba(74,123,201,.22);color:#fff}
#idai-chat .idai-chat-quickbtn:focus-visible{outline:2px solid var(--brand-3);outline-offset:2px}
#idai-chat .idai-chat-quickbtn.is-cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff}
#idai-chat .idai-chat-quickbtn.is-cta:hover{filter:brightness(1.1)}

/* Aviso proactivo, pegado al botón flotante */
#idai-chat .idai-chat-teaser{position:fixed;right:20px;bottom:calc(90px + var(--idai-chat-lift));
  z-index:9400;max-width:250px;display:flex;align-items:flex-start;gap:2px;padding:4px;
  border-radius:16px;background:#0b0f1c;border:1px solid rgba(74,123,201,.28);
  box-shadow:0 16px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease}
#idai-chat .idai-chat-teaser[hidden]{display:none}
#idai-chat .idai-chat-teaser.on{opacity:1;transform:translateY(0)}
#idai-chat .idai-chat-teaser-body{flex:1 1 auto;padding:9px 6px 9px 12px;background:none;border:none;
  color:#e7eaf2;font-size:.83rem;line-height:1.4;text-align:left;cursor:pointer}
#idai-chat .idai-chat-teaser-body:hover{color:#fff}
#idai-chat .idai-chat-teaser-body:focus-visible{outline:2px solid var(--brand-3);outline-offset:2px;border-radius:12px}
#idai-chat .idai-chat-teaser-x{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:none;
  border:none;color:#7b839c;display:grid;place-items:center;cursor:pointer}
#idai-chat .idai-chat-teaser-x:hover{color:#fff;background:rgba(255,255,255,.06)}
#idai-chat .idai-chat-teaser-x:focus-visible{outline:2px solid var(--brand-3);outline-offset:2px}
#idai-chat .idai-chat-teaser-x svg{width:13px;height:13px}
#idai-chat.is-open .idai-chat-teaser{display:none}

/* Tarjeta de correo (§12). Va dentro del hilo de mensajes, no encima: es una oferta más de la
   conversación, no un modal que tape lo que se está leyendo. */
#idai-chat .idai-chat-mail{align-self:stretch;margin:4px 0 2px;padding:14px;border-radius:14px;
  background:rgba(74,123,201,.08);border:1px solid rgba(74,123,201,.26)}
#idai-chat .idai-chat-mail-title{margin:0 0 4px;font-size:.88rem;font-weight:700;color:#f4f6fb}
#idai-chat .idai-chat-mail-intro{margin:0 0 10px;font-size:.82rem;line-height:1.45;color:#c9d3e8}
#idai-chat .idai-chat-mail-form{display:flex;flex-direction:column;gap:8px}
#idai-chat .idai-chat-mail-input{width:100%;padding:9px 12px;border-radius:11px;
  border:1px solid rgba(74,123,201,.24);background:rgba(255,255,255,.04);color:#f4f6fb;font-size:.85rem}
#idai-chat .idai-chat-mail-input::placeholder{color:#7b839c}
#idai-chat .idai-chat-mail-input:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-glow)}
/* Campo trampa: fuera de la vista y fuera del lector de pantalla, pero rellenable por un bot. */
#idai-chat .idai-chat-mail-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#idai-chat .idai-chat-mail-consent{display:flex;gap:8px;align-items:flex-start;
  font-size:.75rem;line-height:1.4;color:#a8b2c8;cursor:pointer}
#idai-chat .idai-chat-mail-consent input{flex:0 0 auto;margin-top:2px;width:15px;height:15px;accent-color:var(--brand-2)}
#idai-chat .idai-chat-mail-error{margin:0;font-size:.76rem;color:#ff9b9b}
#idai-chat .idai-chat-mail-error[hidden]{display:none}
#idai-chat .idai-chat-mail-actions{display:flex;gap:8px;align-items:center}
/* min-height: el relleno solo dejaba el botón en 33px y en un teléfono eso se falla al tocarlo. */
#idai-chat .idai-chat-mail-send{padding:9px 18px;min-height:40px;border-radius:11px;border:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:.82rem;font-weight:600;cursor:pointer}
#idai-chat .idai-chat-mail-send:hover{filter:brightness(1.1)}
#idai-chat .idai-chat-mail-send:focus-visible{outline:2px solid var(--brand-3);outline-offset:2px}
#idai-chat .idai-chat-mail-send:disabled{opacity:.55;cursor:default;filter:none}
#idai-chat .idai-chat-mail-skip{padding:9px 12px;border-radius:11px;border:none;background:none;
  color:#8b93a8;font-size:.79rem;cursor:pointer}
#idai-chat .idai-chat-mail-skip:hover{color:#c9d3e8}
#idai-chat .idai-chat-mail-skip:focus-visible{outline:2px solid var(--brand-3);outline-offset:2px}
#idai-chat .idai-chat-mail-privacy{font-size:.72rem;color:var(--brand-3);text-decoration:underline;align-self:flex-start}
#idai-chat .idai-chat-mail-privacy:hover{color:#fff}

/* Formulario de envío */
#idai-chat .idai-chat-form{display:flex;gap:8px;padding:14px 16px;border-top:1px solid rgba(74,123,201,.18);flex:0 0 auto}
#idai-chat .idai-chat-input{flex:1 1 auto;min-width:0;padding:10px 13px;border-radius:12px;
  border:1px solid rgba(74,123,201,.24);background:rgba(255,255,255,.04);color:#f4f6fb;font-size:.88rem}
#idai-chat .idai-chat-input::placeholder{color:#7b839c}
#idai-chat .idai-chat-input:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-glow)}
#idai-chat .idai-chat-input:disabled{opacity:.6}
#idai-chat .idai-chat-send{flex:0 0 auto;padding:10px 16px;border-radius:12px;border:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:.85rem;font-weight:600;cursor:pointer}
#idai-chat .idai-chat-send:hover{filter:brightness(1.1)}
#idai-chat .idai-chat-send:focus-visible{outline:2px solid var(--brand-3);outline-offset:2px}
#idai-chat .idai-chat-send:disabled{opacity:.55;cursor:default;filter:none}

/* Móvil: hoja casi completa */
@media(max-width:600px){
  /* 🚨 El alto TIENE que descontar el desplazamiento del banner de cookies. Antes solo se
     movía el `bottom` y el panel crecía hacia arriba hasta salirse: medido en un iPhone de
     844px con el banner visible, el panel quedaba en top:-52px y la cabecera con la ✕ (67px)
     desaparecía entera. En un teléfono no hay tecla Esc, así que el visitante se quedaba sin
     forma de cerrar el chat.
     `dvh` y no `vh`: en Safari móvil `vh` no descuenta la barra del navegador y el recorte
     volvería. El `100vh` de respaldo va antes, para navegadores sin `dvh`. */
  #idai-chat .idai-chat-panel{left:12px;right:12px;bottom:calc(12px + var(--idai-chat-lift));width:auto;
    height:min(640px, calc(100vh - var(--idai-chat-lift) - 24px));
    height:min(640px, calc(100dvh - var(--idai-chat-lift) - 24px));
    max-height:calc(100vh - var(--idai-chat-lift) - 24px);
    max-height:calc(100dvh - var(--idai-chat-lift) - 24px);
    min-height:280px;border-radius:18px}
  #idai-chat .idai-chat-launcher{right:16px;bottom:calc(16px + var(--idai-chat-lift))}
    #idai-chat .idai-chat-quick{padding:10px 14px 0}
  #idai-chat .idai-chat-teaser{right:16px;bottom:calc(84px + var(--idai-chat-lift));
    max-width:calc(100vw - 92px)}
}

/* Sin animación para quien pidió menos movimiento */
@media(prefers-reduced-motion:reduce){
  #idai-chat *{transition:none!important;animation:none!important}
  #idai-chat .idai-chat-panel{transform:none}
}

/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE ENHANCEMENTS (2026-08-21)                                 ║
   ║  100% responsive sin modificar las reglas existentes                  ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREAKPOINT: TABLET (600px - 900px)
   Afina tamaños para pantallas medianas sin cambiar la estructura.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 600px) and (max-width: 900px) {
  #idai-chat .idai-chat-panel {
    width: min(350px, calc(100vw - 40px));
    height: min(500px, calc(100dvh - 100px));
    right: 16px;
    bottom: calc(80px + var(--idai-chat-lift));
    border-radius: 18px;
  }
  
  #idai-chat .idai-chat-launcher {
    width: 54px;
    height: 54px;
    right: 16px;
    bottom: calc(16px + var(--idai-chat-lift));
  }
  
  #idai-chat .idai-chat-teaser {
    right: 16px;
    bottom: calc(76px + var(--idai-chat-lift));
    max-width: calc(100vw - 80px);
  }
  
  #idai-chat .idai-chat-title { font-size: 0.95rem; }
  #idai-chat .idai-chat-bubble { font-size: 0.88rem; padding: 9px 12px; }
  #idai-chat .idai-chat-mail { padding: 12px; }
  #idai-chat .idai-chat-mail-input { font-size: 0.82rem; padding: 8px 11px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREAKPOINT: SMALL TABLET / LARGE MOBILE (600px)
   Transición fluida hacia pantallas más pequeñas.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 600px) {
  #idai-chat .idai-chat-panel {
    left: 12px;
    right: 12px;
    width: auto;
    height: min(640px, calc(100dvh - var(--idai-chat-lift) - 24px));
    max-height: calc(100dvh - var(--idai-chat-lift) - 24px);
    min-height: 280px;
    border-radius: 18px;
  }
  
  #idai-chat .idai-chat-quick {
    padding: 10px 14px 0;
  }
  
  #idai-chat .idai-chat-teaser {
    right: 16px;
    left: auto;
    bottom: calc(84px + var(--idai-chat-lift));
    max-width: calc(100vw - 92px);
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREAKPOINT: MOBILE (< 520px)
   Optimiza espacios y tamaños para móviles estándar.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 520px) {
  #idai-chat .idai-chat-panel {
    left: 10px;
    right: 10px;
    width: auto;
    height: min(600px, calc(100dvh - var(--idai-chat-lift) - 80px));
    border-radius: 16px;
  }
  
  #idai-chat .idai-chat-launcher {
    width: 52px;
    height: 52px;
    right: 14px;
  }
  
  #idai-chat .idai-chat-launcher-icon {
    width: 24px;
    height: 24px;
  }
  
  #idai-chat .idai-chat-teaser {
    left: 12px;
    right: 72px;
    bottom: calc(68px + var(--idai-chat-lift));
    max-width: calc(100vw - 98px);
    border-radius: 14px;
  }
  
  #idai-chat .idai-chat-head {
    padding: 12px 14px;
  }
  
  #idai-chat .idai-chat-title {
    font-size: 0.92rem;
  }
  
  #idai-chat .idai-chat-close {
    width: 32px;
    height: 32px;
  }
  
  #idai-chat .idai-chat-messages {
    padding: 12px 14px;
    gap: 10px;
  }
  
  #idai-chat .idai-chat-bubble {
    font-size: 0.85rem;
    padding: 9px 12px;
  }
  
  #idai-chat .idai-chat-cta {
    font-size: 0.80rem;
    padding: 8px 14px;
  }
  
  #idai-chat .idai-chat-sources {
    gap: 5px;
  }
  
  #idai-chat .idai-chat-source {
    font-size: 0.70rem;
    padding: 4px 9px;
  }
  
  #idai-chat .idai-chat-mail {
    padding: 12px;
    margin: 4px 0 2px;
  }
  
  #idai-chat .idai-chat-mail-title {
    font-size: 0.84rem;
  }
  
  #idai-chat .idai-chat-mail-intro {
    font-size: 0.78rem;
  }
  
  #idai-chat .idai-chat-mail-input {
    font-size: 0.80rem;
    padding: 8px 11px;
  }
  
  #idai-chat .idai-chat-form {
    padding: 12px 12px;
    gap: 6px;
  }
  
  #idai-chat .idai-chat-input {
    font-size: 0.82rem;
    padding: 9px 12px;
  }
  
  #idai-chat .idai-chat-send {
    font-size: 0.78rem;
    padding: 9px 12px;
    min-width: 50px;
  }
  
  #idai-chat .idai-chat-quickbtn {
    font-size: 0.76rem;
    padding: 8px 12px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREAKPOINT: SMALL PHONES (< 360px)
   Comprime elementos sin perder funcionalidad.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 359px) {
  #idai-chat .idai-chat-panel {
    left: 8px;
    right: 8px;
    height: min(550px, calc(100dvh - var(--idai-chat-lift) - 70px));
  }
  
  #idai-chat .idai-chat-launcher {
    width: 48px;
    height: 48px;
    right: 12px;
  }
  
  #idai-chat .idai-chat-messages {
    padding: 10px 12px;
  }
  
  #idai-chat .idai-chat-bubble {
    font-size: 0.80rem;
    padding: 8px 10px;
  }
  
  #idai-chat .idai-chat-form {
    padding: 10px 10px;
    gap: 4px;
  }
  
  #idai-chat .idai-chat-input {
    font-size: 0.78rem;
    padding: 8px 10px;
  }
  
  #idai-chat .idai-chat-send {
    font-size: 0.75rem;
    padding: 8px 10px;
  }
  
  #idai-chat .idai-chat-mail-input {
    font-size: 0.76rem;
    padding: 7px 10px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREAKPOINT: LANDSCAPE MODE (altura < 500px)
   Ajusta para pantalla horizontal en móviles.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-height: 499px) and (orientation: landscape) {
  #idai-chat .idai-chat-panel {
    height: min(380px, calc(100dvh - 60px));
    min-height: 200px;
    border-radius: 14px;
  }
  
  #idai-chat .idai-chat-head {
    padding: 10px 12px;
  }
  
  #idai-chat .idai-chat-title {
    font-size: 0.88rem;
  }
  
  #idai-chat .idai-chat-messages {
    padding: 8px 12px;
    gap: 6px;
  }
  
  #idai-chat .idai-chat-bubble {
    font-size: 0.80rem;
    padding: 7px 10px;
  }
  
  #idai-chat .idai-chat-form {
    padding: 8px 10px;
    gap: 4px;
  }
  
  #idai-chat .idai-chat-input {
    font-size: 0.76rem;
    padding: 7px 10px;
  }
  
  #idai-chat .idai-chat-send {
    font-size: 0.72rem;
    padding: 7px 10px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ACCESSIBILITY: TOUCH-FRIENDLY TARGETS
   Asegura mínimos 44x44px para dispositivos táctiles.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (hover: none) and (pointer: coarse) {
  #idai-chat .idai-chat-launcher {
    min-height: 48px;
    min-width: 48px;
  }
  
  #idai-chat .idai-chat-close,
  #idai-chat .idai-chat-send,
  #idai-chat .idai-chat-mail-send,
  #idai-chat .idai-chat-cta {
    min-height: 44px;
    min-width: 44px;
  }
  
  #idai-chat .idai-chat-source,
  #idai-chat .idai-chat-quickbtn {
    min-height: 40px;
    padding: 8px 12px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ORIENTATION & VH FIXES
   Usa 100dvh en lugar de 100vh para evitar problemas con barras del navegador.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@supports (height: 100dvh) {
  #idai-chat .idai-chat-panel {
    max-height: calc(100dvh - var(--idai-chat-lift) - 110px);
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PERFORMANCE: SMOOTH SCROLLING
   Scroll suave en dispositivos compatibles.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@supports (scroll-behavior: smooth) {
  #idai-chat .idai-chat-messages {
    scroll-behavior: smooth;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   OVERFLOW SAFETY: Previene horizontal scroll
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#idai-chat {
  max-width: 100vw;
  overflow-x: hidden;
}

#idai-chat * {
  max-width: 100%;
  box-sizing: border-box;
}

#idai-chat .idai-chat-bubble {
  word-break: break-word;
  overflow-wrap: break-word;
}