:root{
  --ink:#f2f5fb; --dim:#8b95a8; --faint:#5b6478;
  --hair:rgba(255,255,255,.09); --hair-2:rgba(255,255,255,.15);
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.1);
  --accent:#3ad9a0; --red:#ff5d5d;
  --r:999px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:#000;color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  letter-spacing:-.011em;-webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;overflow:hidden;
}
.app{
  position:relative;width:min(560px,100%);overflow:hidden;height:100dvh;display:flex;flex-direction:column;
  padding:calc(14px + env(safe-area-inset-top)) 18px calc(12px + env(safe-area-inset-bottom));
  gap:6px;
}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;padding:2px 2px 6px}
.brand{display:flex;align-items:center;gap:9px}
.mark{width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff 0%, #cfd8e6 22%, #4a5568 62%, #0a0d12 100%);
  box-shadow:0 0 14px rgba(255,255,255,.22), inset 0 0 6px rgba(255,255,255,.35)}
.name{font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.tools{display:flex;align-items:center;gap:8px}

button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.ghost{background:var(--glass);border:1px solid var(--hair);color:#e7ecf6;border-radius:var(--r);
  padding:8px 14px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:background .16s}
.ghost:hover{background:var(--glass-2)}
.ghost.sm{font-size:13px;padding:7px 12px}
.count{display:inline-block;min-width:17px;margin-left:6px;padding:0 5px;border-radius:var(--r);
  background:rgba(255,255,255,.12);font-size:11px;color:#cfd8e6;text-align:center}
.circle{width:32px;height:32px;border-radius:50%;background:var(--glass);border:1px solid var(--hair);
  display:grid;place-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
/* one icon language: outlined, 1.75px, currentColor */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;display:block}
.circle .ico{width:19px;height:19px}
.ring .ico{width:27px;height:27px}
.ghost.sm .ico{width:16px;height:16px;opacity:.9}
.ghost.sm{display:inline-flex;align-items:center;gap:7px}
.ghost.sm .lbl{font-size:13px}
.ring.end .ico{stroke-width:1.9}
.circle.sm{width:32px;height:32px}
.pill{background:#fff;color:#000;font-weight:600;border-radius:var(--r);padding:15px 30px;font-size:16px;
  box-shadow:0 8px 30px rgba(255,255,255,.14)}
.pill:active{transform:scale(.99)}
.pill.wide{width:100%}

/* stage */
.stage{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;min-height:0;overflow:hidden}
#orb{width:min(86vw,42dvh,430px);aspect-ratio:1;display:block;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,rgba(0,0,0,.45) 66%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 50%,#000 52%,rgba(0,0,0,.45) 66%,transparent 78%)}
#cam,#screen{position:absolute;right:2%;bottom:4%;width:104px;aspect-ratio:4/3;object-fit:cover;
  border-radius:14px;border:1px solid var(--hair-2);box-shadow:0 18px 50px rgba(0,0,0,.7)}
#screen{bottom:calc(4% + 84px);width:120px}
.emoji{position:absolute;top:50%;left:50%;translate:-50% -56%;font-size:clamp(74px,17vw,120px);line-height:1;
  opacity:0;transition:opacity .25s;pointer-events:none;filter:drop-shadow(0 0 40px rgba(255,255,255,.25))}
.readout{position:relative;text-align:center;padding:0 8px;flex:0 0 auto;display:flex;
  flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.status{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.dot{width:6px;height:6px;border-radius:50%;background:#39414f;transition:.2s}
.status.live .dot{background:var(--accent);box-shadow:0 0 0 3px rgba(58,217,160,.14)}
.status.think .dot{background:#9aa6ff;box-shadow:0 0 0 3px rgba(154,166,255,.14)}
.status.speak .dot{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
/* translator / personality badge: tiny, glass, never competes with the orb */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#98a2b4;background:var(--glass);border:1px solid var(--hair);
  border-radius:var(--r);padding:4px 10px}
.badge b{color:#e7ecf6;font-weight:600}
.caption{margin:0;font-size:15px;color:#d7deea;min-height:1.5em}
.caption .dim{color:#8b95a8}
.caption b{color:#fff;font-weight:600}
.timings{margin-top:1px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#4e5769;
  display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:center;align-items:center;max-width:100%}
.timings i{opacity:.4;font-style:normal}
.timings b{color:#8b95a8;font-weight:500}

/* dock */
.dock{flex:0 0 auto;padding:10px 0 2px;display:grid;place-items:center;min-height:64px}
.dock .idle{width:100%;display:grid;place-items:center}
.dock .live{display:flex;gap:18px;align-items:center;justify-content:center}
.ring{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass-2);border:1px solid var(--hair-2);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  transition:transform .12s, background .16s}
.ring:active{transform:scale(.95)}
.ring[aria-pressed="true"]{background:rgba(58,217,160,.16);border-color:rgba(58,217,160,.45)}
.ring.look{background:rgba(255,255,255,.16)}
.ring.look:hover{background:rgba(255,255,255,.24)}
.ring.end{background:rgba(255,93,93,.9);color:#210404;border-color:rgba(255,93,93,.9);
  box-shadow:0 10px 30px rgba(255,93,93,.28)}
/* the level meter lives *on* the mic: a hairline ring that fills with the voice, nothing else */
.lvl{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);
  transform:rotate(-90deg);pointer-events:none}
.lvl circle{fill:none;stroke-width:2;stroke-linecap:round}
.lvl .track{stroke:rgba(255,255,255,.13)}
.lvl .arc{stroke:var(--accent);stroke-dasharray:188.5;stroke-dashoffset:188.5;
  transition:stroke .22s}
/* her voice: white. yours: the one accent colour, because that means "live". */
.ring.hers .lvl .arc{stroke:#fff}

/* transcript sheet */
.sheet{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;
  gap:8px;padding:0 2px 4px;scrollbar-width:none}
.sheet::-webkit-scrollbar{display:none}
.turn{border-left:1px solid var(--hair-2);padding:2px 0 2px 12px;animation:in .25s ease both}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.turn .who{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#4a5265;margin-bottom:2px}
.turn.user{border-color:rgba(255,255,255,.22)}
.turn.ai{border-color:rgba(58,217,160,.35)}
.turn p{margin:0;font-size:14px;color:#cfd7e4;line-height:1.4}
.turn .meta{font-size:10.5px;color:#4a5265}
.turn.echo{border-color:rgba(255,255,255,.14);opacity:.75}
.turn.note{border-color:rgba(255,255,255,.10);opacity:.8;margin-top:6px}
.turn.note p{font-size:13px;color:#9aa4b8}
.turn.echo .who::after{content:" · te oí"}
/* corregir una transcripción: un lápiz discreto y, si hubo duda, en ámbar */
.turn{position:relative}
.turn .edit{position:absolute;top:0;right:0;padding:2px;color:#39414f;opacity:.7;
  transition:color .15s, opacity .15s}
.turn .edit .ico{width:14px;height:14px}
.turn .edit:hover{color:#cfd8e6;opacity:1}
.turn.unsure .edit{color:#ffcf5d;opacity:1}
.turn.unsure p{color:#f2d99b}
.cedit{width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair-2);
  color:#e7ecf6;font:inherit;font-size:14px;padding:2px 24px 3px 0;outline:none}
.turn .edit.ok{color:#3ad9a0}
/* el otro oído: la versión de whisper, ofrecida sin interrumpir nada */
.verify{display:block;width:100%;text-align:left;margin:7px 0 0;padding:7px 10px;
  border-radius:12px;background:rgba(255,207,93,.1);border:1px solid rgba(255,207,93,.28);
  color:#f2d99b;font-size:12.5px;line-height:1.35;transition:background .15s,border-color .15s}
.verify:hover{background:rgba(255,207,93,.17);border-color:rgba(255,207,93,.45)}
.verify .vlabel{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,207,93,.72);margin-bottom:2px}
.verify b{font-weight:500;color:#fff}
/* reading gate chips + cost meter */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.chip{background:rgba(255,255,255,.1);border:1px solid var(--hair-2);color:#eaf0f9;border-radius:999px;
  padding:7px 14px;font-size:13px;transition:background .15s}
.chip:hover{background:rgba(255,255,255,.18)}
.chip.ghost{background:transparent;color:#9aa6b8}
.meter{margin:2px 0 0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#3f4757;text-align:center}
.thumbs{display:flex;gap:6px;margin-top:6px}
.thumb{width:52px;height:39px;object-fit:cover;border-radius:8px;border:1px solid var(--hair);margin-top:5px;display:block}

/* gate */
.gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(26px) saturate(.9);-webkit-backdrop-filter:blur(26px)}
.gate[hidden]{display:none!important}
.gate-card{width:min(430px,100%);background:rgba(18,20,26,.72);border:1px solid var(--hair-2);
  border-radius:26px;padding:28px 24px 22px;text-align:center;
  box-shadow:0 40px 100px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08)}
.gate-orb{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;
  background:radial-gradient(circle at 40% 34%, #fff, #cfd8e6 26%, #39414f 66%, #06080c 100%);
  box-shadow:0 0 50px rgba(255,255,255,.18)}
.gate-card h2{margin:0 0 8px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.gate-card p{margin:0 0 18px;color:#a8b2c4;font-size:13.5px}
.gate-card b{color:#fff;font-weight:600}
.gate-actions{display:grid;gap:10px;margin-bottom:14px}
.gate-note{margin:0!important;font-size:11.5px;color:#666f82}

/* drawer */
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(420px,100vw);z-index:20;
  background:rgba(6,7,10,.92);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border-left:1px solid var(--hair);transform:translateX(102%);transition:transform .3s cubic-bezier(.22,.8,.2,1);
  display:flex;flex-direction:column}
.drawer[aria-hidden="false"]{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid var(--hair)}
.drawer-head h2{margin:0;font-size:15px;font-weight:600}
.drawer-body{padding:14px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.hist{border:1px solid var(--hair);border-radius:16px;padding:11px 13px;background:rgba(255,255,255,.03)}
.hist .q{margin:0 0 3px;font-size:12.5px;color:#8b95a8}
.hist .a{margin:0 0 6px;font-size:13.5px;color:#e3e9f3}
.hist .m{font-size:10.5px;color:#4a5265;letter-spacing:.06em}
.empty{color:#4a5265;font-size:13px;text-align:center;padding:34px 10px}

/* modal / settings */
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  opacity:0;pointer-events:none;transition:opacity .22s}
.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}
.modal-card{width:min(460px,100%);background:rgba(18,20,26,.78);border:1px solid var(--hair-2);
  border-radius:24px;padding:24px;box-shadow:0 40px 100px rgba(0,0,0,.8);max-height:88dvh;overflow:auto}
.modal-card h2{margin:0 0 4px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.modal-card .lead{margin:0 0 16px;color:#8b95a8;font-size:13px}
.modal-card dl{margin:0 0 16px;display:grid;gap:11px}
.modal-card dt{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#4a5265;margin-bottom:2px}
.modal-card dd{margin:0;color:#cbd4e2;font-size:13px}
.modal-card code{font:12px ui-monospace,SFMono-Regular,monospace;background:rgba(255,255,255,.07);
  padding:1px 5px;border-radius:5px;color:#bfe9d6}
.modal-card .fine{color:#5b6478;font-size:11.5px;margin:0 0 16px}
.modal-card .pill{width:100%}

/* settings: three segmented controls, nothing else */
.field{margin:0 0 15px}
.flabel{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#4a5265;
  margin-bottom:7px}
.seg{display:flex;gap:3px;background:rgba(255,255,255,.055);border:1px solid var(--hair);
  border-radius:13px;padding:3px}
.seg button{flex:1;padding:9px 6px;border-radius:10px;font-size:13px;color:#aab3c4;
  transition:background .16s, color .16s}
.seg button[aria-pressed="true"]{background:rgba(255,255,255,.92);color:#000;font-weight:600}
.hint{margin:8px 0 0;font-size:11.5px;color:#5b6478;line-height:1.4}

body.gated .stage{filter:blur(4px) saturate(.9);opacity:.5}
body.gated .dock,body.gated .sheet,body.gated .meter{opacity:0;pointer-events:none}

@media (min-width:760px){
  body{align-items:center}
  .app{height:min(92dvh,900px);max-height:900px;border:1px solid rgba(255,255,255,.075);
    border-radius:42px;background:#000;margin:auto;
    box-shadow:0 50px 140px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06)}
  #orb{width:min(76%,430px)}
}
@media (max-width:420px){
  .dock .live{gap:9px}
  .ring{width:54px;height:54px}
  .ring .ico{width:24px;height:24px}
  #orb{width:min(82vw,38dvh,360px)}
  .timings{font-size:9.5px;gap:3px 6px}
  .caption{font-size:14px}
}
@media (max-height:720px){
  .timings{display:none}          /* el reloj de fases no cabe: fuera antes que encimarse */
  #orb{width:min(78vw,36dvh,340px)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── onboarding: welcome → mic → voice → prefs → ready ─────────────────────────
   One hero (the orb), one idea per screen, nothing else. Steps fade in place. */
.onboard{position:fixed;inset:0;z-index:60;background:#000;display:grid;place-items:center;
  padding:calc(24px + env(safe-area-inset-top)) 22px calc(74px + env(safe-area-inset-bottom));
  overflow:hidden;transition:opacity .45s ease, transform .45s ease}
.onboard[aria-hidden="true"]{opacity:0;transform:scale(1.02);pointer-events:none}
.ob-inner{width:min(430px,100%);display:flex;flex-direction:column;align-items:center;gap:18px;
  text-align:center;min-height:0}
.ob-hero{position:relative;width:200px;height:200px;display:grid;place-items:center;flex:0 0 auto}
.ob-hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 76%);
  mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 76%)}
.ob-hero canvas.ready{opacity:1}
.ob-hero .ob-orb{transition:opacity .8s ease}
.ob-hero.shader .ob-orb{opacity:0}
.ob-orb{position:relative;width:168px;height:168px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 38% 32%, #fff 0%, #e2e8f4 16%, #8d97a8 44%, #262d39 72%, #05070b 100%);
  box-shadow:0 0 70px rgba(255,255,255,.20), 0 0 160px rgba(160,190,255,.13),
             inset 0 0 26px rgba(255,255,255,.30);
  transform:scale(var(--ob-scale,1));transition:transform .07s linear;
  animation:breathe 6.5s ease-in-out infinite}
/* a slow arc of light around the body: enough to read as "alive", never as a spinner */
.ob-orb::after{content:"";position:absolute;inset:-16px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 58%, rgba(255,255,255,.16) 72%, transparent 88%);
  -webkit-mask:radial-gradient(circle, transparent 61%, #000 63%);
  mask:radial-gradient(circle, transparent 61%, #000 63%);
  animation:obSpin 24s linear infinite}
@keyframes obSpin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{box-shadow:0 0 70px rgba(255,255,255,.18),0 0 160px rgba(160,190,255,.10),inset 0 0 26px rgba(255,255,255,.28)}
  50%{box-shadow:0 0 96px rgba(255,255,255,.28),0 0 200px rgba(160,190,255,.18),inset 0 0 32px rgba(255,255,255,.36)}}
.ob-step{display:none;flex-direction:column;align-items:center;gap:14px;width:100%}
.ob-step.is-on{display:flex;animation:obIn .5s cubic-bezier(.22,.8,.2,1) both}
@keyframes obIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ob-title{margin:0;font-size:27px;line-height:1.15;font-weight:600;letter-spacing:-.03em}
.ob-sub{margin:0;font-size:14.5px;line-height:1.45;color:#98a2b4;max-width:34ch}
.ob-fine{margin:0;font-size:11.5px;color:#5b6478}
.ob-link{font-size:13px;color:#6d7789;padding:6px}
.ob-link:hover{color:#aab3c4}
.ob-brand{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));left:0;right:0;
  text-align:center;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#3a4150}
.ob-brand b{color:#6d7789;font-weight:600}
.ob-dots{position:absolute;bottom:calc(56px + env(safe-area-inset-bottom));left:0;right:0;
  display:flex;gap:7px;justify-content:center}
.ob-dots i{width:5px;height:5px;border-radius:50%;background:#2b3140;transition:background .3s, transform .3s}
.ob-dots i.on{background:#e8eefc;transform:scale(1.35)}
/* mic calibration: a hairline that fills with the live level */
.ob-meter{width:min(320px,100%);height:4px;border-radius:3px;background:rgba(255,255,255,.11);
  overflow:hidden;margin:10px 0 4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.ob-meter i{display:block;height:100%;width:0%;border-radius:3px;background:#3ad9a0;
  transition:width .08s linear, background .3s}
.ob-meter.good i{background:#3ad9a0}
.ob-meter.low i{background:#ffcf5d}
.ob-state{margin:0;font-size:12.5px;color:#8b95a8;min-height:1.3em}
.ob-state.ok{color:#3ad9a0}
/* the agent's name: one field, centred, no box except a hairline */
.ob-input{width:100%;max-width:300px;text-align:center;font:inherit;font-size:22px;font-weight:600;
  letter-spacing:-.02em;color:#fff;background:transparent;border:0;border-bottom:1px solid var(--hair-2);
  border-radius:0;padding:10px 4px;outline:none;transition:border-color .2s}
.ob-input:focus{border-color:rgba(255,255,255,.55)}
.ob-seg{width:100%;max-width:300px}
/* what she remembers, one row per fact: readable, and each one deletable */
.mem-list{display:grid;gap:1px;margin:2px 0 10px;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.06)}
.mem-row{display:flex;align-items:baseline;gap:8px;padding:9px 11px;background:rgba(12,14,18,.9);
  font-size:12.5px;color:#cfd7e4}
.mem-row .k{color:#8b95a8;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  flex:0 0 auto;max-width:45%}
.mem-row .v{flex:1 1 auto;color:#e7ecf6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem-row button{color:#5b6478;font-size:15px;line-height:1;padding:0 2px}
.mem-row button:hover{color:#ff8a8a}
/* destructive link at the bottom of Ajustes */
.danger{color:#ff8a8a;border-color:rgba(255,138,138,.28)}
.danger:hover{background:rgba(255,93,93,.10)}
.ghost.sm.wide{width:100%;justify-content:center;margin-bottom:8px}
/* the call is ending on its own */
.hangup{color:#8b95a8}
/* voice picker */
.ob-voices{width:100%;display:grid;gap:9px;margin:4px 0 2px}
.ob-voice{display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid var(--hair);color:#e7ecf6;text-align:left;
  transition:background .16s, border-color .16s, transform .12s}
.ob-voice:active{transform:scale(.99)}
.ob-voice[aria-pressed="true"]{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}
.ob-voice .nm{font-size:14.5px;font-weight:600;letter-spacing:-.01em;text-transform:capitalize}
.ob-voice .ds{display:block;font-size:11.5px;color:#8b95a8;font-weight:400;margin-top:1px}
.ob-voice .sp{margin-left:auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--hair-2);background:rgba(255,255,255,.06)}
.ob-voice .sp .ico{width:15px;height:15px}
.ob-voice.playing .sp{background:rgba(58,217,160,.18);border-color:rgba(58,217,160,.5)}