/* 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}
body.vh-on.sc-listening .vh-orb{box-shadow:0 0 0 2px rgba(255,199,102,.55),0 0 48px rgba(255,199,102,.22);animation:vh-listen 1.6s ease-out infinite}
@keyframes vh-listen{0%{box-shadow:0 0 0 2px rgba(255,199,102,.55),0 0 0 0 rgba(255,199,102,.35)}100%{box-shadow:0 0 0 2px rgba(255,199,102,.55),0 0 0 22px rgba(255,199,102,0)}}

/* ---------- 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}}

/* ---------- 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 .vh-orb{animation:none}
  body.vh-on #stage{transition:none}
}