/* Yin Yang · widget de Gina. Todas las clases llevan el prefijo yy- para no chocar con el tema. */
.yy-root {
  --yy-accent: #6c4cf5;
  --yy-accent-2: #22c3a6;
  --yy-bg: #ffffff;
  --yy-fg: #1d1d27;
  --yy-muted: #6b6b7b;
  --yy-line: #ececf2;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--yy-fg);
}
@media (prefers-color-scheme: dark) {
  .yy-root { --yy-bg: #1b1b24; --yy-fg: #f2f2f7; --yy-muted: #a5a5b5; --yy-line: #2c2c3a; }
}
.yy-root *, .yy-root *::before, .yy-root *::after { box-sizing: border-box; }

.yy-launcher {
  width: 64px; height: 64px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--yy-accent), var(--yy-accent-2));
  box-shadow: 0 8px 24px rgba(40, 20, 120, .35);
  display: grid; place-items: center; margin-left: auto;
  transition: transform .15s ease;
}
.yy-launcher:hover { transform: scale(1.06); }
.yy-launcher:focus-visible { outline: 3px solid var(--yy-accent-2); outline-offset: 3px; }
.yy-orb { width: 26px; height: 26px; border-radius: 50%; background: #fff; opacity: .92;
  box-shadow: inset -6px -6px 0 rgba(0,0,0,.12); }

.yy-panel {
  position: absolute; right: 0; bottom: 80px; width: min(360px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column;
  background: var(--yy-bg); border: 1px solid var(--yy-line); border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22); overflow: hidden;
}
.yy-panel[hidden] { display: none; }
.yy-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--yy-line); }
.yy-title { font-size: 15px; }
.yy-icon-btn { border: 0; background: transparent; color: var(--yy-fg); font-size: 18px; cursor: pointer; width: 34px; height: 34px; border-radius: 10px; }
.yy-icon-btn:hover { background: var(--yy-line); }
.yy-icon-btn:disabled { opacity: .4; cursor: default; }
.yy-mute.yy-muted { background: #fde2e2; }

.yy-stage { display: flex; flex-direction: column; align-items: center; padding: 18px 12px 8px; gap: 10px; }
.yy-avatar { position: relative; width: 92px; height: 92px; }
.yy-core, .yy-ring { position: absolute; inset: 0; border-radius: 50%; }
.yy-core { inset: 14px; background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--yy-accent) 45%, var(--yy-accent-2)); transition: transform .2s ease; }
.yy-ring { border: 3px solid var(--yy-accent); opacity: .25; }
.yy-status { margin: 0; color: var(--yy-muted); font-size: 13px; min-height: 1.4em; text-align: center; }

/* Estados: Escuchando, Pensando, Reproduciendo audio */
.yy-state-listening .yy-ring { animation: yy-breathe 2.4s ease-in-out infinite; opacity: .5; border-color: var(--yy-accent-2); }
.yy-state-thinking .yy-ring { border-style: dashed; opacity: .7; animation: yy-spin 1.4s linear infinite; }
.yy-state-speaking .yy-core { animation: yy-talk .45s ease-in-out infinite alternate; }
.yy-state-speaking .yy-ring { animation: yy-pulse 1s ease-out infinite; }
.yy-state-connecting .yy-core { opacity: .5; }
.yy-state-error .yy-core { filter: grayscale(1); }
.yy-state-speaking .yy-launcher, .yy-state-listening .yy-launcher { box-shadow: 0 0 0 6px rgba(34,195,166,.25), 0 8px 24px rgba(40,20,120,.35); }

@keyframes yy-breathe { 0%,100% { transform: scale(.94); } 50% { transform: scale(1.04); } }
@keyframes yy-spin { to { transform: rotate(360deg); } }
@keyframes yy-talk { from { transform: scale(.92); } to { transform: scale(1.06); } }
@keyframes yy-pulse { from { transform: scale(.95); opacity: .6; } to { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .yy-root * { animation: none !important; transition: none !important; } }

.yy-log { flex: 1; overflow-y: auto; padding: 4px 14px 10px; display: flex; flex-direction: column; gap: 6px; min-height: 80px; }
.yy-line { margin: 0; padding: 7px 11px; border-radius: 12px; max-width: 85%; word-wrap: break-word; }
.yy-agent { background: var(--yy-line); align-self: flex-start; }
.yy-user { background: var(--yy-accent); color: #fff; align-self: flex-end; }
.yy-partial { opacity: .6; }
.yy-system { align-self: center; color: var(--yy-muted); font-size: 12px; text-align: center; }

.yy-controls { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--yy-line); }
.yy-volume { flex: 1; accent-color: var(--yy-accent); }
.yy-end { border: 1px solid var(--yy-line); background: transparent; color: var(--yy-fg); border-radius: 10px; padding: 6px 10px; cursor: pointer; }
.yy-form { display: flex; gap: 8px; padding: 10px 14px 14px; }
.yy-input { flex: 1; border: 1px solid var(--yy-line); border-radius: 12px; padding: 9px 12px; background: transparent; color: var(--yy-fg); font: inherit; }
.yy-send { border: 0; border-radius: 12px; background: var(--yy-accent); color: #fff; width: 40px; cursor: pointer; }

/* Atributo hidden siempre gana (algunos bloques tienen display propio) */
.yy-root [hidden] { display: none !important; }

/* Aviso de consentimiento */
.yy-consent { padding: 16px 16px 18px; overflow-y: auto; }
.yy-consent-title { font-size: 16px; margin: 0 0 8px; color: var(--yy-fg); }
.yy-consent-text { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--yy-fg); }
.yy-consent-link { display: inline-block; margin-bottom: 12px; font-size: 13px; color: var(--yy-accent); }
.yy-consent-actions { display: flex; flex-direction: column; gap: 8px; }
.yy-accept { border: 0; border-radius: 12px; padding: 11px 14px; background: var(--yy-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.yy-decline { border: 1px solid var(--yy-line); border-radius: 12px; padding: 10px 14px; background: transparent; color: var(--yy-fg); font: inherit; cursor: pointer; }
.yy-accept:focus-visible, .yy-decline:focus-visible { outline: 3px solid var(--yy-accent-2); outline-offset: 2px; }

/* Avisos accionables (activar sonido, reintentar) */
.yy-notice-btn { margin-top: 4px; min-height: 40px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--yy-accent); background: transparent; color: var(--yy-accent); font: inherit; font-weight: 600; cursor: pointer; }
.yy-unlock { background: var(--yy-accent); color: #fff; }
.yy-state-error .yy-status { color: var(--yy-fg); }

/* iOS: un input de menos de 16 px provoca zoom al enfocarlo */
.yy-input { font-size: 16px; }
.yy-root button, .yy-input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.yy-root { right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

/* Teléfonos: panel como hoja inferior a casi todo el ancho */
@media (max-width: 520px) {
  .yy-launcher { width: 58px; height: 58px; }
  .yy-panel {
    position: fixed; left: 8px; right: 8px; width: auto;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px - env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
  }
  .yy-stage { padding: 12px 10px 6px; }
  .yy-avatar { width: 72px; height: 72px; }
  .yy-icon-btn { width: 44px; height: 44px; }
  .yy-send { width: 48px; min-height: 44px; }
  .yy-end { min-height: 44px; }
  .yy-consent { max-height: calc(100dvh - 190px); }
  .yy-accept, .yy-decline { min-height: 48px; }
}

/* ===== Fase 1: posición configurable, minimizar, indicador, privacidad, móvil ===== */
.yy-root {
  right: calc(var(--yy-offset-x, 16px) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--yy-offset-y, 16px) + env(safe-area-inset-bottom, 0px));
}
.yy-root.yy-left { right: auto; left: calc(var(--yy-offset-x, 16px) + env(safe-area-inset-left, 0px)); }
.yy-root.yy-left .yy-launcher { margin-left: 0; margin-right: auto; }
.yy-root.yy-left .yy-panel { right: auto; left: 0; }

.yy-launcher { position: relative; width: 56px; height: 56px; }
.yy-badge { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; display: none; }
.yy-has-conversation .yy-badge { display: block; }
.yy-has-conversation:not(.yy-open) .yy-launcher { box-shadow: 0 0 0 5px rgba(34, 197, 94, .25), 0 8px 24px rgba(40, 20, 120, .35); }
@media (prefers-reduced-motion: no-preference) {
  .yy-has-conversation:not(.yy-open) .yy-badge { animation: yy-blink 1.6s ease-in-out infinite; }
}
@keyframes yy-blink { 50% { opacity: .35; } }

.yy-header { gap: 6px; }
.yy-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yy-privacy { border: 0; background: transparent; color: var(--yy-muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px; }
.yy-min { font-size: 22px; line-height: 1; }
.yy-mute.yy-mic-off { opacity: .55; }

@media (max-width: 480px) {
  .yy-launcher { width: 54px; height: 54px; }
  .yy-panel {
    position: fixed; left: 8px; right: 8px; width: auto;
    bottom: calc(76px + var(--yy-offset-y, 16px) + env(safe-area-inset-bottom, 0px) + var(--yy-kb, 0px));
    max-height: 62vh; max-height: 62dvh;
    border-radius: 18px;
  }
  .yy-root.yy-left .yy-panel { left: 8px; right: 8px; }
  .yy-stage { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 8px 12px 4px; }
  .yy-avatar { width: 60px; height: 60px; flex: 0 0 60px; }
  .yy-core { inset: 10px; }
  .yy-status { font-size: 14px; text-align: left; }
  .yy-log { min-height: 60px; padding: 4px 12px 8px; }
  .yy-line { font-size: 15px; padding: 6px 10px; max-width: 88%; }
  .yy-consent { max-height: none; overflow-y: auto; }
  .yy-consent-text { font-size: 14px; }
  .yy-controls { padding: 6px 12px; }
  .yy-form { padding: 8px 12px 12px; }
  .yy-input { font-size: 16px; }
}

/* ===== Fase 2: navegación guiada ===== */
.yy-highlight { outline: 3px solid #6c4cf5 !important; outline-offset: 4px; border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .yy-highlight { animation: yy-spot 1.1s ease-in-out 3; }
}
@keyframes yy-spot { 0%, 100% { box-shadow: 0 0 0 0 rgba(108, 76, 245, .55); } 50% { box-shadow: 0 0 0 12px rgba(108, 76, 245, 0); } }
.yy-toast {
  position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  z-index: 2147483001; max-width: min(92vw, 420px); padding: 9px 16px; border-radius: 999px;
  background: #1d1d27; color: #fff; font: 600 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25); text-align: center;
}
.yy-toast[hidden] { display: none; }
.yy-action-line { align-self: flex-start; }
.yy-action-link { display: inline-block; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--yy-accent, #6c4cf5); color: var(--yy-accent, #6c4cf5); text-decoration: none; font-weight: 600; }
.yy-action-link.yy-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.yy-nomove.yy-on { background: var(--yy-line); }

/* Fase 3: clics seguros, Detener, enlaces externos y llegada directa a la sección */
.yy-click-pending { outline: 3px dashed #22c3a6 !important; outline-offset: 4px; border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .yy-click-pending { animation: yy-spot-2 .5s ease-in-out 2; }
}
@keyframes yy-spot-2 { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 195, 166, .6); } 50% { box-shadow: 0 0 0 10px rgba(34, 195, 166, 0); } }
html.yy-arriving body { opacity: 0 !important; }
.yy-stop[hidden], .yy-nomove[hidden] { display: none; }
.yy-extcard {
  position: fixed; z-index: 2147483002; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100vw - 32px)); padding: 16px; border-radius: 16px; background: #fff; color: #1d1d27;
  border: 1px solid #ececf2; box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.yy-extcard[hidden] { display: none; }
.yy-extcard p { margin: 0 0 6px; }
.yy-ext-title { font-weight: 700; font-size: 15px; }
.yy-ext-keep { color: #6b6b7b; }
.yy-ext-host { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #6b6b7b; word-break: break-all; }
.yy-ext-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.yy-ext-actions a, .yy-ext-actions button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border-radius: 12px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid #ececf2; background: transparent; color: #1d1d27;
}
.yy-ext-actions .yy-ext-open { background: #6c4cf5; border-color: #6c4cf5; color: #fff; flex: 1 1 100%; }
.yy-ext-actions a:focus-visible, .yy-ext-actions button:focus-visible { outline: 3px solid #22c3a6; outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  .yy-extcard { background: #1b1b24; color: #f2f2f7; border-color: #2c2c3a; }
  .yy-ext-actions a, .yy-ext-actions button { color: #f2f2f7; border-color: #2c2c3a; }
  .yy-ext-keep, .yy-ext-host { color: #a5a5b5; }
}
@media (max-width: 480px) {
  .yy-extcard { left: 8px; right: 8px; width: auto; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  /* Con la hoja inferior abierta, la tarjeta va arriba para no taparla */
  .yy-extcard.yy-ext-sheet { top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto; }
}

/* ===== Etapa 1: presentación, consentimiento compacto, modo acompañante y hoja móvil pequeña ===== */

/* Burbuja de presentación junto al botón */
.yy-intro {
  position: absolute; right: 0; bottom: 70px; width: min(300px, calc(100vw - 32px));
  padding: 14px 14px 12px; border-radius: 16px; background: var(--yy-bg); color: var(--yy-fg);
  border: 1px solid var(--yy-line); box-shadow: 0 14px 40px rgba(0, 0, 0, .2);
}
.yy-intro::after {
  content: ""; position: absolute; right: 22px; bottom: -7px; width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--yy-bg); border-right: 1px solid var(--yy-line); border-bottom: 1px solid var(--yy-line);
}
.yy-root.yy-left .yy-intro { right: auto; left: 0; }
.yy-root.yy-left .yy-intro::after { right: auto; left: 22px; }
.yy-intro-text { margin: 0 22px 10px 0; font-size: 14px; line-height: 1.45; }
.yy-intro-talk {
  width: 100%; min-height: 42px; border: 0; border-radius: 12px; background: var(--yy-accent); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
}
.yy-intro-close {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 10px;
  background: transparent; color: var(--yy-muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.yy-intro-close:hover { background: var(--yy-line); }
.yy-intro-talk:focus-visible, .yy-intro-close:focus-visible { outline: 3px solid var(--yy-accent-2); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .yy-intro:not([hidden]) { animation: yy-pop .22s ease-out; }
  @keyframes yy-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
}

/* Consentimiento compacto: resumen + "Ver detalles"; aceptar y rechazar con la misma prominencia */
.yy-consent-title { font-size: 15px; margin: 0 0 6px; }
.yy-consent-short { font-size: 14px; }
.yy-consent-links { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 0 0 10px; }
.yy-details-btn { border: 0; background: transparent; padding: 0; color: var(--yy-accent); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.yy-consent-links .yy-consent-link { margin: 0; }
.yy-consent-details { border-left: 3px solid var(--yy-line); padding-left: 10px; margin-bottom: 10px; }
.yy-consent-details .yy-consent-text { font-size: 13px; color: var(--yy-fg); }
.yy-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.yy-choice {
  min-height: 48px; padding: 8px 10px; border-radius: 12px; border: 2px solid var(--yy-accent);
  background: transparent; color: var(--yy-fg); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.25; cursor: pointer;
}
.yy-choice:hover { background: var(--yy-line); }
.yy-choice:focus-visible { outline: 3px solid var(--yy-accent-2); outline-offset: 2px; }
.yy-consent-actions .yy-accept, .yy-consent-actions .yy-decline { background: transparent; color: var(--yy-fg); border: 2px solid var(--yy-accent); padding: 8px 10px; }

/* Píldora acompañante: conversación activa, panel recogido */
.yy-pill {
  display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: var(--yy-bg); color: var(--yy-fg);
  border: 1px solid var(--yy-line); box-shadow: 0 10px 30px rgba(40, 20, 120, .25); max-width: calc(100vw - 24px);
}
.yy-pill-main { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 2px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: 999px; min-width: 0; }
.yy-pill-orb { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--yy-accent) 45%, var(--yy-accent-2)); }
.yy-pill-status { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.yy-pill-btn { width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 50%; background: transparent; color: var(--yy-fg); font-size: 17px; cursor: pointer; }
.yy-pill-btn:hover, .yy-pill-main:hover { background: var(--yy-line); }
.yy-pill-btn.yy-muted { background: #fde2e2; }
.yy-pill-end { color: #c92a2a; }
.yy-pill button:focus-visible { outline: 3px solid var(--yy-accent-2); outline-offset: 1px; }
.yy-root.yy-pill-on .yy-launcher { display: none; }
.yy-state-speaking .yy-pill-orb { animation: yy-talk .45s ease-in-out infinite alternate; }
.yy-state-listening .yy-pill-orb { box-shadow: 0 0 0 4px rgba(34, 195, 166, .3); }
.yy-state-thinking .yy-pill-orb { opacity: .75; }

/* Teléfonos: hoja inferior de ~38 % del alto, orbe pequeña, últimas líneas y caja de texto */
@media (max-width: 520px) {
  .yy-root.yy-open .yy-launcher { display: none; }
  .yy-panel {
    position: fixed; left: 8px; right: 8px; width: auto; border-radius: 18px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--yy-kb, 0px));
    max-height: max(38vh, 250px); max-height: max(38dvh, 250px);
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "stage header" "log log" "controls controls" "form form";
  }
  .yy-root.yy-left .yy-panel { left: 8px; right: 8px; }
  .yy-header { grid-area: header; border-bottom: 1px solid var(--yy-line); padding: 6px 6px 6px 0; justify-content: flex-end; }
  .yy-title { display: none; }
  .yy-stage { grid-area: stage; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 8px; padding: 6px 4px 6px 10px; border-bottom: 1px solid var(--yy-line); }
  .yy-avatar { width: 36px; height: 36px; flex: 0 0 36px; }
  .yy-core { inset: 6px; }
  .yy-ring { border-width: 2px; }
  .yy-status { font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; color: var(--yy-fg); }
  .yy-notice-btn { margin: 0; min-height: 36px; padding: 4px 10px; font-size: 13px; }
  .yy-log { grid-area: log; min-height: 44px; padding: 6px 12px; gap: 4px; }
  .yy-line { font-size: 14px; padding: 5px 9px; }
  .yy-controls { grid-area: controls; padding: 4px 10px; gap: 4px; }
  .yy-volume { display: none; }
  .yy-controls .yy-end { margin-left: auto; min-height: 40px; }
  .yy-icon-btn { width: 40px; height: 40px; }
  .yy-form { grid-area: form; padding: 4px 10px 10px; }
  .yy-send { width: 44px; min-height: 42px; }
  .yy-privacy { font-size: 12px; }
  /* Aviso de consentimiento: tarjeta compacta, máx. ~55 % del alto */
  .yy-consent { grid-column: 1 / -1; grid-row: 2 / -1; max-height: calc(55dvh - 52px); overflow-y: auto; padding: 12px 14px 14px; }
  .yy-root.yy-consenting .yy-panel { max-height: 55vh; max-height: 55dvh; }
  .yy-consent-title { font-size: 15px; }
  .yy-intro { position: fixed; left: auto; right: calc(var(--yy-offset-x, 16px) + env(safe-area-inset-right, 0px)); bottom: calc(78px + var(--yy-offset-y, 16px) + env(safe-area-inset-bottom, 0px)); width: min(300px, calc(100vw - 24px)); }
  .yy-root.yy-left .yy-intro { left: calc(var(--yy-offset-x, 16px) + env(safe-area-inset-left, 0px)); right: auto; }
}
@media (max-width: 360px) {
  .yy-pill-status { max-width: 96px; }
  .yy-consent-actions { grid-template-columns: 1fr; }
}