/* EDISON · voz. Negro absoluto, la burbuja y las palabras. Nada compite con la conversación. */
.vx {
  position: relative; height: 100%; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  background: #000; padding: max(10px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
/* Sin capas de fondo: la única luz es la de la burbuja, que ilumina el negro a su alrededor. */
.vx > * { position: relative; z-index: 1; }

/* Tres columnas iguales a los lados: el nombre queda en el centro exacto de la pantalla aunque a la derecha haya
   más botones que a la izquierda (con «space-between» se iba hacia la izquierda). */
.vx-top { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; }
.vx-top-l { justify-self: start; display: flex; gap: 2px; }
/* El espaciado entre letras deja un hueco detrás de la última: el mismo delante lo compensa. */
.vx-brand { justify-self: center; font: 600 12px/1 var(--sans); letter-spacing: .42em; padding-left: .42em; color: rgba(242, 243, 245, .5); text-align: center; white-space: nowrap; }
.vx-top-r { justify-self: end; display: flex; gap: 2px; }
.vx-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--text-2); text-decoration: none; transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease); }
.vx-icon:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.vx-icon:active { transform: scale(.94); }
.vx-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.vx-icon[aria-pressed="true"] { color: var(--amber); border-color: rgba(255, 181, 71, .35); }
.vx-push { color: var(--amber-hi); }

.vx-banner { margin: 6px 0 0; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 179, 64, .3); background: rgba(255, 179, 64, .08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--amber-hi); font: 500 14px/1.3 var(--sans); text-align: center; max-width: min(560px, 100%); animation: vx-rise .45s var(--ease); }

/* Escenario: la burbuja ocupa el mayor cuadrado disponible (unidades de contenedor). */
.vx-stage { flex: 1 1 0; min-height: 190px; width: 100%; max-width: 640px; container-type: size; }
.vx-orb { position: absolute; left: 50%; top: 50%; width: min(118vw, 74dvh); height: min(118vw, 74dvh); width: 136cqmin; height: 136cqmin; transform: translate(-50%, -50%); pointer-events: none; }
.vx-hit { position: absolute; left: 50%; top: 50%; width: min(64vw, 40dvh); height: min(64vw, 40dvh); width: 74cqmin; height: 74cqmin; transform: translate(-50%, -50%); border-radius: 50%; border: 0; background: transparent; touch-action: manipulation; }
.vx-hit:focus-visible { outline: 1.5px solid rgba(255, 179, 64, .6); outline-offset: 6px; }

.vx-state { margin: 4px 0 0; display: flex; align-items: center; gap: 9px; font: 500 15px/1.2 var(--sans); letter-spacing: -.01em; color: var(--amber-hi); min-height: 18px; }
.vx-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.vx[data-state="idle"] .vx-state { color: var(--text-3); }
.vx[data-state="thinking"] .vx-state, .vx[data-state="executing"] .vx-state { color: var(--cool); }
.vx[data-state="error"] .vx-state { color: var(--bad); }
.vx[data-state="muted"] .vx-state { color: var(--text-3); }
.vx-hint { margin: 8px 0 0; min-height: 18px; font: 400 14px/1.35 var(--sans); color: rgba(242, 243, 245, .45); text-align: center; }

.vx-captions { width: min(980px, 100%); margin-top: 18px; min-height: 104px; display: grid; gap: 14px; justify-items: center; align-content: start; text-align: center; }
.vx-heard { margin: 0; max-width: 100%; min-height: 22px; font: 400 clamp(15px, 1.5vw, 17px)/1.4 var(--sans); letter-spacing: -.005em; color: rgba(242, 243, 245, .42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.vx-heard.on { opacity: 1; transform: none; }
.vx-line { margin: 0; width: 100%; max-width: min(92vw, 920px); min-height: 1.3em; font: 400 clamp(25px, 3.1vw, 40px)/1.3 var(--display); letter-spacing: -.022em; color: #f5f5f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(10px); filter: blur(6px); transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); cursor: pointer; }
.vx-line.in { opacity: 1; transform: none; filter: none; }
@keyframes vx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.vx-decision { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.vx-ask { flex: 0 0 100%; margin: 0 auto 2px; max-width: min(92vw, 620px); font: 400 15px/1.45 var(--sans); letter-spacing: -.005em; color: rgba(242, 243, 245, .66); text-align: center; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vx-pill { min-width: 140px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font: 600 15px/1 var(--sans); letter-spacing: -.01em; transition: background .2s var(--ease), border-color .2s var(--ease); }
.vx-yes { border-color: rgba(255, 181, 71, .6); color: var(--amber-hi); }
.vx-yes:hover { background: var(--amber-lo); }
.vx-no:hover { background: rgba(255, 255, 255, .06); }

.vx-type { width: min(620px, 100%); display: flex; gap: 8px; margin-top: 14px; border-bottom: 1px solid var(--line-2); }
.vx-type input { flex: 1; min-width: 0; padding: 12px 4px; border: 0; border-radius: 0; background: transparent; font-size: 17px; font-weight: 400; outline: none; }
.vx-type .vx-icon { width: 44px; height: 44px; font-size: 18px; }

.vx-controls { display: flex; gap: 26px; margin-top: 14px; }
.vx-mode { margin: 10px 0 0; min-height: 14px; font: 500 12px/1.4 var(--sans); letter-spacing: -.005em; color: rgba(242, 243, 245, .28); text-align: center; }
.vx-mic-help-link { margin: 5px 0 0; padding: 4px 8px; border: 0; background: none; color: var(--amber-hi); font: 500 12px/1.3 var(--sans); text-decoration: underline; cursor: pointer; }
.vx-mic-help { position: fixed; inset: 0; margin: auto; width: min(480px, calc(100vw - 28px)); max-height: min(78dvh, 700px); overflow: auto; padding: 24px; border: 1px solid var(--line-2); border-radius: 20px; background: #18181b; color: var(--text); box-shadow: 0 24px 80px #000b; }
.vx-mic-help::backdrop { background: #000b; }
.vx-mic-help h2 { margin: 0 0 14px; font: 600 20px/1.25 var(--sans); }
.vx-mic-help p { margin: 0 0 14px; font: 400 15px/1.5 var(--sans); }
.vx-mic-help-url-label { display: grid; gap: 6px; font: 500 13px/1.3 var(--sans); }
.vx-mic-help-url { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #101014; color: var(--text); font: 400 13px/1.3 var(--sans); }
.vx-mic-help-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.vx-mic-help-actions .vx-pill { min-width: 0; flex: 1 1 170px; }
.vx-devices { margin: 2px 0 0; min-height: 14px; font: 500 11px/1.4 var(--sans); color: rgba(242, 243, 245, .22); text-align: center; max-width: 92vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-toast { position: absolute; top: calc(58px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); margin: 0; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(28, 28, 30, .72); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); font: 500 14px/1.35 var(--sans); color: var(--text); text-align: center; z-index: 5; animation: vx-rise .3s var(--ease); }

/* Conversación completa: hoja de cristal (desde abajo en el móvil, lateral en el PC). */
.vx-sheet { position: fixed; inset: 0; z-index: 20; display: grid; place-items: end center; background: rgba(0, 0, 0, .5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: vx-fade .3s var(--ease); user-select: text; -webkit-user-select: text; }
.vx-sheet[hidden] { display: none; }
.vx-sheet-card { width: min(720px, 100%); height: min(80dvh, 860px); display: grid; grid-template-rows: auto 1fr; background: rgba(20, 20, 22, .88); border: 1px solid rgba(255, 255, 255, .08); border-bottom: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -30px 80px rgba(0, 0, 0, .6); animation: vx-sheet-up .42s var(--ease); }
.vx-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 4px 24px; }
.vx-sheet-head h2 { margin: 0; font: 600 17px/1.2 var(--sans); letter-spacing: -.012em; color: var(--text); }
.vx-thread { overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; padding: 10px 20px 32px; display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; outline: none; }
.vx-msg { max-width: 88%; display: grid; gap: 5px; }
.vx-msg p { margin: 0; font: 400 15.5px/1.55 var(--sans); letter-spacing: -.006em; white-space: pre-wrap; overflow-wrap: anywhere; }
.vx-msg time { font: 500 11px/1 var(--sans); color: rgba(242, 243, 245, .36); }
.vx-msg.kevin { align-self: flex-end; justify-items: end; }
.vx-msg.kevin p { padding: 10px 15px; border-radius: 20px 20px 6px 20px; background: rgba(255, 255, 255, .09); color: var(--text); }
.vx-msg.edison { align-self: flex-start; }
.vx-msg.edison p { color: rgba(242, 243, 245, .9); }
.vx-msg a { color: #9cc0ff; text-decoration: none; border-bottom: 1px solid rgba(156, 192, 255, .35); }
.vx-thread-empty { margin: auto; color: rgba(242, 243, 245, .4); font-size: 14px; }
@keyframes vx-sheet-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes vx-sheet-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes vx-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 900px) {
  .vx-sheet { place-items: stretch end; }
  .vx-sheet-card { width: 460px; height: 100dvh; border: 0; border-left: 1px solid rgba(255, 255, 255, .08); border-radius: 0; animation-name: vx-sheet-in; }
}

/* Capa sobre el panel: se abre desde la burbuja flotante como una ventana de Siri. */
.voice-layer { position: fixed; inset: 0; z-index: 60; background: #000; animation: vx-open .38s var(--ease); }
@keyframes vx-open { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .vx-controls { gap: 18px; }
  .vx-captions { min-height: 84px; }
}
@media (max-height: 620px) {
  .vx-captions { min-height: 64px; margin-top: 8px; }
  .vx-hint { display: none; }
}

/* Sonido bloqueado por el navegador del móvil: un toque lo desbloquea y repite la respuesta. */
.vx-unmute { margin-top: 14px; border-color: rgba(255, 181, 71, .55); color: var(--amber-hi); animation: vx-rise .35s var(--ease); }
.vx-unmute[hidden] { display: none; }

/* Avisos que no deben pasar desapercibidos (voz del dispositivo, IA local): discretos y con cierre */
.vx-notes { display: grid; gap: 8px; justify-items: center; width: min(560px, calc(100vw - 32px)); margin: 6px auto 0; }
.vx-note { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 8px 8px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: rgba(242, 243, 245, .78); font: 400 13.5px/1.4 var(--sans); }
.vx-note .vx-note-btn { margin-left: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255, 179, 64, .5); background: rgba(255, 179, 64, .12); color: #ffd79a; font: 500 13px/1.2 var(--sans); cursor: pointer; }
.vx-note .vx-note-btn:disabled { opacity: .5; }
.vx-note-x { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: rgba(242, 243, 245, .5); font-size: 16px; cursor: pointer; }
.vx-note-x:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* Lista de chats dentro de la conversación de la voz (como ChatGPT): cambiar o empezar una nueva aquí mismo */
.vx-sheet-head h2 { margin-right: auto; }
.vx-sheet-head .vx-newchat { margin-right: 2px; }
.vx-sheet-body { display: grid; grid-template-columns: 224px 1fr; min-height: 0; overflow: hidden; }
.vx-chats { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; border-right: 1px solid rgba(255, 255, 255, .07); padding: 6px 8px 24px; display: grid; gap: 2px; align-content: start; }
.vx-chat { text-align: left; display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; color: rgba(242, 243, 245, .7); cursor: pointer; transition: background .16s var(--ease); }
.vx-chat:hover { background: rgba(255, 255, 255, .05); }
.vx-chat.on { background: rgba(255, 255, 255, .09); }
.vx-chat strong { font: 500 13.5px/1.25 var(--sans); letter-spacing: -.01em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-chat small { font: 400 11px/1 var(--sans); color: rgba(242, 243, 245, .4); }
.vx-chats-empty { padding: 14px 12px; font: 400 12.5px/1.5 var(--sans); color: rgba(242, 243, 245, .4); }
@media (max-width: 640px) {
  .vx-sheet-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .vx-chats { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); grid-auto-flow: column; grid-auto-columns: minmax(148px, 64%); grid-template-columns: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; scroll-snap-type: x mandatory; }
  .vx-chat { scroll-snap-align: start; }
}