/* Voice-first Home (see modules/voice-home.js). Everything here only applies while body.vh-on
   (signed in, on Home, style = voice). The classic Home is untouched when the style is 'classic'. */

/* ---------- strip Home down to Secret + two lines ---------- */
body.vh-on .tabs,
body.vh-on .sc-mode-switch,
body.vh-on #view h1,
body.vh-on .banner,
body.vh-on .status-line,
body.vh-on .chat .msg,
body.vh-on .chat .vh-old,
body.vh-on .sc-voice-live,
body.vh-on .sc-bubble-hit{display:none!important}
body.vh-on:not(.vh-typing) .composer{display:none}
body.vh-on #view{padding-block:4px 96px}

/* Secret always big and in the middle on this Home (ID selector beats the mini/floating mode rules) */
body.vh-on #stage{display:block;position:relative;right:auto;bottom:auto;width:min(86vw,50vh,460px);margin:4vh auto 0;
  border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible;z-index:auto;transition:width .4s ease}
body.vh-on.vh-typing #stage{width:min(56vw,30vh,300px);margin-top:1vh}

/* tap target over Secret's body (tap = talk, long-press = type); the + button stays on top when shown */
.vh-orb{display:none}
body.vh-on .vh-orb{display:block;position:absolute;inset:12%;border-radius:50%;border:0;padding:0;background:transparent;
  cursor:pointer;z-index:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.vh-on .plus-hit{z-index:2}
/* listening: Secret stays calm and breathes very slowly (shrinks a little and back), so it is clear she is waiting for you */
body.vh-on.sc-listening #stage{animation:vh-breathe 5s ease-in-out infinite}
@keyframes vh-breathe{0%,100%{transform:scale(1)}50%{transform:scale(.94)}}

/* ---------- captions ---------- */
body:not(.vh-on) .vh-caps,body:not(.vh-on) .vh-choices{display:none}
.vh-caps{display:flex;flex-direction:column;justify-content:flex-end;gap:12px;min-height:7.5em;margin-top:10px}
.vh-line{display:flex;flex-direction:column;gap:2px;max-width:88%;overflow:hidden;animation:vh-in .45s ease-out both}
.vh-secret{align-self:flex-start;text-align:left}
.vh-user{align-self:flex-end;text-align:right}
.vh-who{font-size:.72rem;letter-spacing:.04em;text-transform:none}
.vh-secret .vh-who{color:var(--cyan)}
.vh-user .vh-who{color:var(--gold)}
/* each caption shows at most 3 text lines; a longer reply scrolls up slowly inside it */
.vh-text{display:block;font-size:1.06rem;line-height:1.55;max-height:calc(1.55em * 3);overflow:hidden;white-space:pre-wrap;word-wrap:break-word}
.vh-roll{display:block}
.vh-text.vh-scrolling{-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.vh-text.vh-scrolling .vh-roll{padding:.5em 0 1.2em;animation:vh-roll var(--vh-dur,6000ms) linear 1.2s forwards}
@keyframes vh-roll{to{transform:translateY(calc(var(--vh-scroll,0px) - 1.7em))}}
.vh-live .vh-text{color:var(--muted);font-style:italic}
.vh-note .vh-text,.vh-hint .vh-text{color:var(--muted);font-size:.95rem}
/* the older line drifts up and fades away */
.vh-line.vh-gone{animation:vh-up .85s ease-in forwards}
@keyframes vh-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vh-up{from{opacity:1;transform:none;max-height:8em}to{opacity:0;transform:translateY(-22px);max-height:0;margin-top:-12px}}

/* the user's mark (replaces the word "User") */
.vh-me{align-self:flex-end;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,199,102,.6);color:var(--gold);font-size:.85rem;font-weight:500;position:relative;flex:none}
/* while listening: mic inside, green ring = the 5-second silence window (empties like a clock, then the words are sent) */
.vh-me-live{width:46px;height:46px;border-color:transparent;background:rgba(255,199,102,.08)}
.vh-ring{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg);overflow:visible}
.vh-ring circle{fill:none;stroke-width:3;stroke-linecap:round}
.vh-ring-track{stroke:rgba(95,211,154,.18)}
.vh-ring-time{stroke:var(--ok);stroke-dasharray:100;stroke-dashoffset:0;opacity:.45;animation:vh-wait 2.4s ease-in-out infinite}
.vh-me-live.vh-counting .vh-ring-time{opacity:1;animation:vh-drain var(--vh-ms,5000ms) linear forwards}
@keyframes vh-drain{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}
@keyframes vh-wait{0%,100%{opacity:.25}50%{opacity:.6}}
/* Secret is working on the answer */
.vh-thinking .vh-text{color:var(--muted);animation:vh-pulse 1.4s ease-in-out infinite}
@keyframes vh-pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- choices: ① ② ③ ---------- */
.vh-choices{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.vh-choice{appearance:none;display:flex;align-items:center;gap:12px;width:100%;min-height:48px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px;cursor:pointer;line-height:1.45;
  animation:vh-in .35s ease-out both}
.vh-choice:active{border-color:var(--gold)}
.vh-num{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold);font-size:.9rem}

/* ---------- menu: one button bottom-left + popover ---------- */
.vh-menu-btn,.vh-menu,.vh-scrim{display:none}
body.vh-on .vh-menu-btn{display:grid;place-items:center;position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(11,15,30,.9);color:var(--fg);
  cursor:pointer;z-index:9;padding:0;-webkit-tap-highlight-color:transparent}
body.vh-on .vh-menu-btn[aria-expanded=true]{border-color:var(--gold);color:var(--gold)}
body.vh-on.vh-typing .vh-menu-btn{display:none}
body.vh-on .vh-scrim:not([hidden]){display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:8}
body.vh-on .vh-menu:not([hidden]){display:flex;flex-direction:column;position:fixed;left:16px;bottom:calc(78px + env(safe-area-inset-bottom,0px));
  width:min(300px,calc(100vw - 32px));padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:16px;z-index:10;
  box-shadow:0 12px 32px rgba(0,0,0,.6);transform-origin:0 100%;animation:vh-pop .18s ease-out both}
/* row 1: three looks; row 2: quick actions */
.vh-looks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px 2px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.vh-look{appearance:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;
  border:1px solid transparent;background:transparent;color:var(--muted);font-size:.78rem;cursor:pointer;min-height:64px}
.vh-look[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.vh-quicks{display:flex;gap:6px;padding:2px 2px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.vh-quick{appearance:none;flex:1;text-align:center;padding:10px 6px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--fg);text-decoration:none;font-size:.9rem;cursor:pointer;min-height:42px}
.vh-menu-item{display:block;padding:13px 16px;border-radius:10px;color:var(--fg);text-decoration:none;font-size:1rem}
.vh-menu-item:hover,.vh-menu-item:focus-visible{background:var(--panel-2)}
@keyframes vh-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* ---------- typing mode: input + mic + send sit right above the keyboard ---------- */
body.vh-on.vh-typing .composer{bottom:0;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}

/* ---------- Settings: Home style options ---------- */
.vh-style{appearance:none;background:transparent;color:var(--fg);text-align:left;width:100%}
.vh-style[aria-pressed=true]{border-color:var(--gold)}
.vh-style[aria-pressed=true] span{color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  .vh-line,.vh-choice,body.vh-on .vh-menu:not([hidden]){animation:none}
  .vh-line.vh-gone{animation:none;display:none}
  .vh-text.vh-scrolling .vh-roll{animation:none}
  .vh-text.vh-scrolling{overflow:auto}
  body.vh-on.sc-listening #stage{animation:none}
  .vh-ring-time,.vh-thinking .vh-text{animation:none}
  .vh-me-live.vh-counting .vh-ring-time{animation:vh-drain var(--vh-ms,5000ms) linear forwards}
  body.vh-on #stage{transition:none}
}

/* ---------- Mic test page (modules/voice-test.js) ---------- */
.vt-words{font-size:1.1rem;line-height:1.6;min-height:1.6em;white-space:pre-wrap;word-wrap:break-word}
.vt-log{margin:0;padding-left:1.2em;font-size:.85rem;line-height:1.6;color:var(--muted);max-height:40vh;overflow:auto}