/* voice-yours scenes: styles for js/scenes/voice-yours.js only, every class prefixed vy-. */
.vy-col { display: flex; flex-direction: column; gap: 12px; }
.vy-ttl { display: inline-flex; align-items: center; gap: 8px; }
.vy-ttl .ic { font-size: 16px; }
.vy-cd { position: absolute; padding: 12px 14px; border-radius: 12px; background: #1c1d22; border: 1px solid #2f3036; z-index: 3;
  animation: vy-pop 420ms var(--sp-reward) backwards; transition: opacity 350ms, scale 350ms var(--ease-inout); }
.vy-cd.gone, .vy-sp.gone { opacity: 0; scale: .92; }
@keyframes vy-pop { from { opacity: 0; scale: .88; } }
@keyframes vy-in { from { opacity: 0; translate: 0 -6px; } }
.vy-cap { position: absolute; translate: -50% 0; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.55); font: 600 12px/1 -apple-system, system-ui; white-space: nowrap; }

/* Notes */
.vy-list { display: grid; gap: 6px; }
.vy-nr { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 14px; border-radius: 12px; background: rgba(255,255,255,.05);
  transition: background 300ms; animation: vy-in 360ms var(--ease-out) backwards; }
.vy-nr.pin { background: rgba(10,132,255,.16); }
.vy-nt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vy-nt b, .vy-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vy-tag { font-size: 11px; color: var(--notch-text-2); }
.vy-pn { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--notch-text-2); transition: background 200ms, color 200ms, transform 160ms var(--ease-quint); }
.vy-pn::after { content: ""; position: absolute; inset: -6px; }
.vy-pn:hover { background: rgba(255,255,255,.1); }
.vy-pn:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }
.vy-pn.press { transform: scale(.88); }
.vy-pn .ic { font-size: 15px; }
.vy-pn[aria-pressed="true"] { color: var(--notch-blue); }
.vy-pn[aria-pressed="true"] .ic { fill: currentColor; }
.vy-bellc { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--notch-amber); color: #000; font-size: 15px; flex: none; }

/* Voice notes */
.vy-vn { display: flex; gap: 14px; }
.vy-rc { width: 84px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.vy-rb { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); }
.vy-rb::after { content: ""; position: absolute; inset: -8px; }
.vy-rb:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 3px; }
.vy-rb i { width: 40px; height: 40px; border-radius: 50%; background: var(--notch-red); transition: border-radius 240ms var(--ease-out), scale 240ms var(--ease-out); }
.vy-rb.press { transform: scale(.94); }
.vy-vn.rec .vy-rb i { border-radius: 9px; scale: .5; }
.vy-tm { font-size: 15px; }
.vy-vc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.vy-wv { display: flex; align-items: center; justify-content: center; gap: 3px; height: 30px; }
.vy-wv b { width: 3px; height: var(--h); border-radius: 2px; background: #fff; opacity: .35; scale: 1 .2; transition: scale 400ms var(--ease-out), opacity 400ms; }
.vy-vn.rec .vy-wv b { opacity: 1; animation: say var(--t) var(--ease-inout) var(--o) infinite alternate; }
.vy-tx { margin: 0; min-height: 36px; font-size: 13px; line-height: 1.35; }
.vy-vn:not(.rec):not(.done) .vy-tx { color: var(--notch-text-2); }
.vy-kp { margin-top: auto; gap: 10px; transition: opacity 300ms; }
.vy-kp .t2 { flex: 1; }
.vy-vn:not(.done) .vy-kp { opacity: .35; pointer-events: none; }
.vy-au { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; background: rgba(255,255,255,.1); font: 600 11px/1 -apple-system, system-ui; animation: pop 400ms var(--sp-reward); }
.vy-au[hidden] { display: none; }
.vy-au .ic { font-size: 10px; fill: currentColor; }

/* Scratchpad */
.vy-sp { position: absolute; width: 210px; min-height: 100px; border-radius: 10px; background: #f4e7a1; color: #2b2610; rotate: var(--r); z-index: 3;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); animation: vy-pop 420ms var(--sp-reward) backwards; transition: opacity 350ms, scale 350ms var(--ease-inout); }
.vy-sh { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 6px 0 12px; border-radius: 10px 10px 0 0; background: rgba(0,0,0,.08); font: 600 11px/1 -apple-system, system-ui; }
.vy-x { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: inherit; }
.vy-x::after { content: ""; position: absolute; inset: -6px; }
.vy-x:hover { background: rgba(0,0,0,.12); }
.vy-x:focus-visible { outline: 2px solid var(--notch-blue); }
.vy-x .ic { font-size: 11px; }
.vy-sp p { margin: 0; padding: 10px 12px; min-height: 70px; font: 500 14px/1.35 -apple-system, system-ui; }

/* Text snippets */
.vy-sn button { height: 44px; }
.vy-k { flex: none; padding: 4px 7px; border-radius: 6px; background: rgba(255,255,255,.1); font: 600 12px/1 ui-monospace, Menlo, monospace; }
.vy-tk { color: var(--notch-text-2); }
.vy-ex { border-radius: 4px; animation: vy-flash 1400ms ease-out forwards; }
.vy-ex.done { animation: none; }
@keyframes vy-flash { from { background: rgba(10,132,255,.45); } to { background: transparent; } }

/* Hide the notch: a black edge covers the top and the menu bar sits below it */
.vy-beta { padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 10px; font-weight: 600; color: var(--notch-text-2); }
.vy-cp { margin: 10px 0 0; font-size: 12px; color: var(--notch-text-2); }
.vy-edge { position: absolute; left: 0; right: 0; top: 0; height: 32px; background: #000; }
.vy-mb { background: rgba(8,10,16,.55); translate: 0 32px; animation: vy-down 700ms var(--ease-quint) backwards; }
@keyframes vy-down { from { translate: 0 0; } }

/* Notch pages and favorites */
.vy-g { grid-template-rows: 1fr 1fr; }
.vy-g[hidden], .vy-pl[hidden] { display: none; }
.vy-t { position: relative; transition: background var(--m-base); }
.vy-t u { position: absolute; right: 6px; top: 6px; font-size: 11px; color: var(--notch-blue); opacity: 0; text-decoration: none; transition: opacity 250ms; }
.vy-t u .ic { fill: currentColor; }
.vy-t[aria-pressed="true"] { background: rgba(10,132,255,.2); }
.vy-t[aria-pressed="true"] u { opacity: 1; }
.vy-t.press { scale: .95; }
.vy-nt2 { animation: pop 420ms var(--sp-reward); }
.vy-nt2 .ic { fill: currentColor; }

/* Onboarding */
.vy-ob { display: flex; flex-direction: column; gap: 12px; }
.vy-oh { justify-content: space-between; }
.vy-dots { display: flex; gap: 6px; }
.vy-dots i { width: 18px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); }
.vy-dots i.on { background: var(--notch-blue); }
.vy-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.vy-mid .mark { width: 38px; height: 38px; color: #f5f5f7; --mark-cut: #000; }
.vy-mid .t1 { font-size: 17px; }
.vy-chips { flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px; }
.vy-ch { position: relative; height: 34px; padding: 0 16px; border-radius: 17px; font: 600 13px/1 -apple-system, system-ui; color: var(--notch-text);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); transition: background 250ms, transform 160ms var(--ease-quint); }
.vy-ch::after { content: ""; position: absolute; inset: -4px; }
.vy-ch:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }
.vy-ch.press { transform: scale(.94); }
.vy-ch[aria-pressed="true"] { background: rgba(10,132,255,.78); border-color: rgba(255,255,255,.2); }
.vy-cn { text-align: center; }
.vy-ck { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--notch-green); color: #fff; font-size: 22px; animation: pop 420ms var(--sp-reward); }

/* Permission guide */
.vy-ps { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--notch-text-2); }
.vy-steps { display: grid; gap: 6px; }
.vy-sr { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border-radius: 12px; text-align: left;
  color: var(--notch-text); background: rgba(255,255,255,.05); transition: background 300ms, transform 160ms var(--ease-quint); }
.vy-sr:hover { background: rgba(255,255,255,.09); }
.vy-sr:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }
.vy-sr.press { transform: scale(.97); }
.vy-sr .ct { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vy-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; background: rgba(255,255,255,.12); font: 600 11px/1 system-ui; transition: background 300ms; }
.vy-sr.done .vy-n { background: var(--notch-green); color: #000; font-size: 12px; }
.vy-sr.done .ct { color: var(--notch-text-2); }

/* Settings safety */
.vy-shd { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 16px; flex: none; }
.vy-kept { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; }
.vy-cp2 { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; background: rgba(255,255,255,.08); font-size: 12px; font-weight: 600; }
.vy-cp2 .ic { font-size: 13px; }
.vy-cp2.ok { background: rgba(48,209,88,.16); color: var(--notch-green); animation: pop 400ms var(--sp-reward); }
.vy-h2 { font-size: 17px; }
.vy-opt { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); }

/* Themes and backdrops: two crossfading layers, so the swap is smooth */
.vy-bg { position: relative; overflow: hidden; isolation: isolate; }
.vy-bg::before, .vy-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 700ms var(--ease-inout); }
.vy-bg::before { background: radial-gradient(120% 90% at 18% 115%, rgba(52,211,153,.6), transparent 60%), radial-gradient(100% 80% at 88% -10%, rgba(139,92,246,.55), transparent 60%); }
.vy-bg::after { background: conic-gradient(from 200deg at 30% 130%, transparent, rgba(244,114,182,.5), rgba(129,140,248,.5), transparent 70%); }
.vy-bg[data-bd="aurora"]::before, .vy-bg[data-bd="silk"]::after { opacity: 1; }
.vy-bd { position: absolute; inset: 0; }
.vy-sws { display: flex; gap: 10px; }
.vy-sw { flex: 1; position: relative; display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 11px; font-weight: 600; color: var(--notch-text-2); }
.vy-sw::after { content: ""; position: absolute; inset: -4px; }
.vy-sw:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; border-radius: 9px; }
.vy-sw.press { transform: scale(.96); }
.vy-sw[aria-pressed="true"] { color: var(--notch-text); }
.vy-sm { display: block; width: 100%; height: 34px; border-radius: 9px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); transition: outline-color 200ms; outline: 2px solid transparent; outline-offset: 2px; }
.vy-sw[aria-pressed="true"] .vy-sm { outline-color: var(--notch-blue); }
.vy-win { position: absolute; z-index: 3; border-radius: 12px; background: #1c1d22; border: 1px solid #2f3036; animation: vy-pop 420ms var(--sp-reward) backwards; }
.vy-wb { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; font-size: 11px; color: var(--notch-text-2); border-bottom: 1px solid rgba(255,255,255,.08); }
.vy-wb i { width: 9px; height: 9px; border-radius: 50%; background: #3a3b41; }
.vy-wb span { margin-left: 6px; }
.vy-wr { display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 12px; font-size: 12px; color: var(--notch-text-2); }
.vy-wr b { color: var(--notch-text); }

/* Workflow builder */
.vy-chain { display: flex; align-items: center; gap: 6px; }
.vy-nd { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 14px; text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); transition: background 300ms, border-color 300ms; }
.vy-nd .t1 { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vy-ni { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.1); font-size: 17px; transition: background 300ms, color 300ms; }
.vy-nd.run { border-color: var(--notch-blue); background: rgba(10,132,255,.16); }
.vy-nd.run .vy-ni { animation: vy-beat 700ms var(--ease-inout) infinite alternate; }
.vy-nd.done .vy-ni { background: var(--notch-green); color: #000; }
@keyframes vy-beat { to { scale: 1.12; } }
.vy-ar { display: flex; flex: none; font-size: 14px; color: var(--notch-text-2); }
.vy-wst { text-align: center; }

/* Command Bar */
.vy-qf { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; font-size: 14px; }
.vy-qf .ic { font-size: 16px; color: var(--notch-text-2); }
.vy-qf .aq { flex: 0 1 auto; }
.vy-qf .aq:empty::before { content: "Search or run a command"; color: var(--notch-text-2); }
.vy-qf .aq:empty ~ .caret { display: none; }
.vy-res .sel { background: rgba(255,255,255,.14); }
.vy-res .sel .cc { color: var(--notch-text); }
.vy-res button { position: relative; }
.vy-res button.press { transform: scale(.98); }
.vy-no { padding: 14px; font-size: 13px; color: var(--notch-text-2); }

/* Quick panel */
.vy-qg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.vy-qt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 62px; border-radius: 12px;
  color: #f5f5f7; background: rgba(255,255,255,.07); transition: background 250ms, color 250ms, transform 160ms var(--ease-quint); }
.vy-qt:hover { background: rgba(255,255,255,.12); }
.vy-qt:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }
.vy-qt.press { transform: scale(.94); }
.vy-qt .ic { font-size: 20px; }
.vy-qt small { font-size: 11px; color: var(--notch-text-2); }
.vy-qt.on { background: var(--notch-amber); color: #000; }
.vy-qt.on small { color: #000; }

/* Wallpaper */
.vy-wps { display: flex; gap: 10px; margin-top: 10px; }
.vy-wp { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--notch-text-2); }
.vy-wp:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; border-radius: 9px; }
.vy-wp[aria-pressed="true"] { color: var(--notch-text); }
.vy-th { display: block; width: 100%; height: 66px; border-radius: 9px; background: url(../img/wall.webp) center / cover, #12143a; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 200ms, scale 160ms var(--ease-quint); }
.vy-wp[data-t="dusk"] .vy-th { filter: hue-rotate(-38deg) saturate(1.25); }
.vy-wp[data-t="sea"] .vy-th { filter: hue-rotate(52deg) saturate(1.1) brightness(1.06); }
.vy-wp[aria-pressed="true"] .vy-th { outline-color: var(--notch-blue); }
.vy-wp.press .vy-th { scale: .96; }

@media (prefers-reduced-motion: reduce) {
  .vy-cd, .vy-sp, .vy-win, .vy-nr, .vy-au, .vy-ex, .vy-mb, .vy-nt2, .vy-ck, .vy-cp2.ok, .vy-nd.run .vy-ni, .vy-vn.rec .vy-wv b { animation: none; }
  .vy-cd, .vy-sp, .vy-bg::before, .vy-bg::after, .vy-rb i, .vy-wv b, .vy-sr, .vy-nd, .vy-ni, .vy-qt, .vy-th, .vy-t { transition: none; }
}