:root { --bg0: #1b222b; --bg1: #0c0f13; --fg: #f2f4f7; --muted: #9aa5b1; --accent: #4f8cff; --ok: #36c275; --warn: #f2b33d; --speak: #ff7a59; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: radial-gradient(120% 90% at 50% 35%, var(--bg0), var(--bg1)); color: var(--fg);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; }
#stage { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; touch-action: none; }
.hud { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.status, .mic { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(10, 13, 17, .6); backdrop-filter: blur(8px); font-size: 14px; }
.status .dot, .mic-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.status[data-state="listening"] .dot { background: var(--ok); animation: pulse 1.2s infinite; }
.status[data-state="thinking"] .dot { background: var(--warn); animation: pulse .7s infinite; }
.status[data-state="speaking"] .dot { background: var(--speak); animation: pulse .45s infinite; }
.mic-dot { background: #ff4d4d; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }
.subtitles { position: fixed; left: 16px; right: 16px; bottom: calc(28px + env(safe-area-inset-bottom)); text-align: center; pointer-events: none; }
.subtitles p { margin: 6px auto; max-width: 34em; padding: 8px 14px; border-radius: 12px; background: rgba(10, 13, 17, .62); backdrop-filter: blur(8px); width: fit-content; }
.subtitles p:empty { display: none; }
.sub-user { color: var(--muted); font-size: clamp(14px, 2.2vw, 18px); }
.sub-avatar { font-size: clamp(17px, 2.8vw, 24px); }
.subtitles.off { display: none; }
.controls { position: fixed; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 0 16px; }
button { font: inherit; font-weight: 600; color: #fff; background: var(--accent); border: 0; border-radius: 12px; padding: 14px 22px; min-height: 48px; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.ghost { background: rgba(255, 255, 255, .12); }
.toggle { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 14px; }
.gate { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(8, 10, 13, .72); backdrop-filter: blur(6px); padding: 20px; }
.owner { margin-left: auto; margin-right: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(79, 140, 255, .28); border: 1px solid rgba(79, 140, 255, .7); font-size: 14px; }
.owner[hidden] { display: none; }
.gate[hidden], .mic[hidden], .gate-card input[hidden] { display: none; }
.gate-card { width: min(420px, 100%); background: #171c23; border-radius: 18px; padding: 26px; display: grid; gap: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.gate-card h1 { margin: 0; font-size: 22px; }
.gate-card p { margin: 0; color: var(--muted); }
.gate-card input { font: inherit; padding: 14px; border-radius: 12px; border: 1px solid #2b3440; background: #0f1318; color: var(--fg); }
.gate-error { color: #ff8a8a !important; min-height: 1.4em; }
#backdrop { position: fixed; inset: 0; width: 100vw; height: 100dvh; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
#backdrop.on { opacity: .75; }
.fx { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.emoji { position: absolute; opacity: 0; transform: translate(-50%, 0) scale(.4); animation: emoji-float 2.4s ease-out forwards; will-change: transform, opacity; }
@keyframes emoji-float {
  12% { opacity: 1; transform: translate(-50%, -10px) scale(1.15) rotate(var(--rot)); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -170px) scale(1) rotate(var(--rot)); }
}
/* Modo espera: el avatar queda a la vista y solo hay una invitacion abajo. */
.gate.standby { background: none; backdrop-filter: none; place-items: end center; padding-bottom: max(9vh, 40px); cursor: pointer; }
.gate.standby .gate-card { background: rgba(10, 13, 17, .62); backdrop-filter: blur(8px); box-shadow: none; padding: 14px 22px; width: auto; max-width: min(520px, 92vw); text-align: center; animation: breathe 2.6s ease-in-out infinite; }
.gate.standby h1, .gate.standby #btn-start, .gate.standby .gate-error:empty { display: none; }
.gate.standby #gate-text { color: var(--fg); font-size: clamp(17px, 2.6vw, 22px); }
@keyframes breathe { 50% { transform: translateY(-4px); opacity: .82; } }
/* Tarjeta que el avatar muestra mientras habla (servicio o contacto con QR). */
.card-panel { position: fixed; right: max(18px, 3vw); top: 50%; transform: translateY(-50%); width: min(300px, 30vw); padding: 18px; border-radius: 18px;
  background: rgba(14, 18, 24, .86); backdrop-filter: blur(10px); box-shadow: 0 16px 50px rgba(0, 0, 0, .45); display: grid; gap: 10px; animation: card-in .35s ease-out; }
.card-panel[hidden] { display: none; }
.card-panel h2 { margin: 0; font-size: clamp(17px, 1.6vw, 21px); }
.card-panel ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: #d5dbe3; font-size: 15px; }
.card-panel ul:empty { display: none; }
.card-panel img { width: 100%; max-width: 220px; justify-self: center; border-radius: 12px; background: #fff; padding: 8px; }
.card-panel img[hidden] { display: none; }
.card-panel p { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
.card-panel p:empty { display: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(-50%) translateX(24px); } }
@media (orientation: portrait), (max-width: 760px) { /* kiosco vertical y celular: la tarjeta va abajo, sobre los subtitulos */
  .card-panel { right: 50%; top: auto; bottom: calc(150px + env(safe-area-inset-bottom)); transform: translateX(50%); width: min(420px, 90vw); grid-template-columns: 1fr auto; align-items: center; }
  .card-panel h2, .card-panel ul { grid-column: 1; } .card-panel img { grid-column: 2; grid-row: 1 / span 3; max-width: 130px; } .card-panel p { grid-column: 1 / -1; }
  @keyframes card-in { from { opacity: 0; transform: translateX(50%) translateY(24px); } }
}