/* Andrea: guía flotante. Reposo = asomada por el borde inferior; al hablar sube y muestra el globo. */
.sa { position: fixed; right: 12px; bottom: calc(var(--sa-elevar, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 9; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.sa > * { pointer-events: auto; }
.sa__globo { position: relative; max-width: min(340px, calc(100vw - 70px)); min-width: min(260px, calc(100vw - 70px)); background: rgba(255, 255, 255, .64); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); color: #0f1b2d; border: 1px solid rgba(195, 205, 219, .7); border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .25); padding: 11px 30px 11px 13px; font-size: 13.5px; line-height: 1.45; margin-right: 6px; opacity: 0; transform: translateY(8px) scale(.96); transform-origin: bottom right; transition: opacity .2s ease-out, transform .25s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .25s; }
.sa__globo::after { content: ''; position: absolute; right: 38px; bottom: -6px; width: 10px; height: 10px; background: rgba(255, 255, 255, .64); border-right: 1px solid rgba(195, 205, 219, .7); border-bottom: 1px solid rgba(195, 205, 219, .7); transform: rotate(45deg); }
.sa__chat { display: flex; flex-direction: column; gap: 6px; max-height: min(56dvh, 460px); min-height: 120px; overflow-y: auto; overscroll-behavior: contain; margin-top: 8px; }
.sa__chat[hidden], .sa__form[hidden], .sa__nota[hidden], .sa__mic[hidden] { display: none; }
.sa__lin { font-size: 14px; line-height: 1.45; padding: 7px 10px; border-radius: 10px; max-width: 92%; }
.sa__lin--yo { align-self: flex-end; background: rgba(219, 232, 247, .78); color: #0f1b2d; }
.sa__lin--ella { align-self: flex-start; background: rgba(238, 241, 245, .72); color: #0f1b2d; }
.sa__form { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sa__campo { flex: 1 1 100%; font: inherit; font-size: 14px; color: #0f1b2d; background: rgba(255, 255, 255, .78); border: 1px solid #c3cddb; border-radius: 9px; padding: 8px 10px; min-width: 0; }
.sa__mic, .sa__enviar { font: inherit; font-size: 13px; font-weight: 700; border-radius: 9px; padding: 8px 12px; cursor: pointer; border: 1px solid #c3cddb; background: #fff; color: #0f1b2d; }
.sa__enviar { flex: 1; background: #0b5fae; border-color: #0b5fae; color: #fff; }
.sa__nota { margin: 6px 0 0; font-size: 11px; color: #5b6b82; }
.sa__cerrar { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: #5b6b82; font-size: 16px; line-height: 1; cursor: pointer; }
.sa__cuerpo { position: relative; width: 92px; height: 112px; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translateY(62%); transition: transform .45s cubic-bezier(.16, 1, .3, 1); -webkit-tap-highlight-color: transparent; }
.sa__flota { filter: drop-shadow(0 4px 6px rgba(15, 27, 45, .28)); display: block; width: 100%; height: 100%; animation: sa-flota 3.4s ease-in-out infinite; }
.sa__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0; transition: opacity .18s ease-out; user-select: none; -webkit-user-drag: none; }
.sa__img--on { opacity: 1; }
.sa--abierta .sa__cuerpo { transform: translateY(0); }
.sa--abierta .sa__globo { opacity: 1; transform: none; }
.sa__globo[hidden] { display: none; }
.sa--pequena .sa__cuerpo { width: 70px; height: 86px; }
@keyframes sa-flota { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) {
  .sa__flota { animation: none; }
  .sa__cuerpo, .sa__globo, .sa__img { transition: none; }
}

/* Botones dentro de la respuesta */
.sa__acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sa__btn { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 9px; background: #0b5fae; color: #fff; text-decoration: none; border: 1px solid #0b5fae; }
.sa__btn:hover { background: #094e91; }
/* Vuelo con estela hasta el elemento señalado */
.sa--vuela { visibility: hidden; }
.sa__estela { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 59; pointer-events: none; }
.sa__vuelo { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; will-change: transform; }
.sa__vuelo img { display: block; width: 100%; height: 100%; object-fit: fill; filter: drop-shadow(0 4px 6px rgba(15, 27, 45, .28)); }
.sa__vuelo--flota img { animation: sa-flota-fina 1.6s ease-in-out infinite; }
@keyframes sa-flota-fina { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.sa-resalte { outline: 3px solid #1480c4 !important; outline-offset: 3px; animation: sa-late 1.1s ease-in-out infinite; }
@keyframes sa-late { 0%, 100% { box-shadow: 0 0 0 0 rgba(20, 128, 196, .55); } 50% { box-shadow: 0 0 0 12px rgba(20, 128, 196, 0); } }
@media (prefers-reduced-motion: reduce) { .sa-resalte { animation: none; } .sa__vuelo--flota img { animation: none; } }

/* Globo cerrado: no solo transparente, sino fuera de juego (ni se ve ni recibe toques, para no tapar la pantalla). */
.sa:not(.sa--abierta) .sa__globo { visibility: hidden; pointer-events: none; }
.sa--abierta .sa__globo { visibility: visible; transition-delay: 0s; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sa__globo, .sa__globo::after { background: #ffffff; } .sa__lin--ella { background: #eef1f5; } .sa__lin--yo { background: #dbe8f7; } }