/* Record in your voice: the app's recording studio (build_app.py #recstudio / .reccard /
   .recrec). The page picture on the left; its words, the big round record button, a live
   waveform and play back on the right. Built by js/components/voice.js. */
.db-voice{container-type:inline-size;border-radius:var(--db-r-lg);background:var(--db-card);border:1px solid rgba(255,255,255,.13);
  box-shadow:var(--db-shadow-2);color:var(--db-ink);font-family:var(--db-font)}
.db-voice__in{padding:14px 18px 16px}
.db-voice__head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.db-voice__head b{flex:1;min-width:0;font-size:1.05rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-voice__count{flex:none;color:var(--db-muted);font-size:.84rem;font-weight:600;font-variant-numeric:tabular-nums}
.db-voice__count .is-rec{color:var(--db-gold)}
.db-voice__body{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@container (min-width:620px){.db-voice__body{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.db-voice__art{position:relative;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--db-stage-deep);border:1px solid rgba(255,255,255,.1)}
.db-voice__art img{width:100%;height:100%;object-fit:cover}
.db-voice__text{margin:0 0 12px;font-size:1.1rem;line-height:1.45;min-height:3em}

.db-voice__ctl{display:flex;align-items:center;gap:12px}
.db-voice__rec{position:relative;width:72px;height:72px;flex:none;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:var(--db-destructive);box-shadow:0 8px 20px color-mix(in srgb,var(--db-destructive) 38%,transparent),0 0 0 4px rgba(255,255,255,.06);
  touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform var(--m-dur-fast) var(--m-ease),background var(--m-dur-fast) var(--m-ease)}
.db-voice__rec:active{transform:scale(.94)}
.db-voice__rec::before{content:"";width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.98);transition:width var(--m-dur-fast) var(--m-ease),height var(--m-dur-fast) var(--m-ease),border-radius var(--m-dur-fast) var(--m-ease)}
.db-voice__rec.is-rec{background:color-mix(in srgb,var(--db-destructive),black 25%)}
.db-voice__rec.is-rec::before{width:22px;height:22px;border-radius:5px}
.db-voice__rec.is-rec::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid color-mix(in srgb,var(--db-destructive) 60%,transparent);
  animation:db-voice-ring calc(var(--m-dur-slow) * 3) ease-out infinite}
@keyframes db-voice-ring{from{transform:scale(.92);opacity:1}to{transform:scale(1.25);opacity:0}}
.db-voice__wave{flex:1;min-width:0;height:56px;border-radius:12px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.07)}
.db-voice__wave canvas{width:100%;height:100%}
.db-voice__play{width:52px;height:52px;flex:none;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:var(--db-ink);transition:background var(--m-dur-fast) var(--m-ease),transform var(--m-dur-fast) var(--m-ease)}
.db-voice__play:hover:not([disabled]){background:rgba(255,255,255,.16)}
.db-voice__play:active:not([disabled]){transform:scale(.94)}
.db-voice__play[disabled]{opacity:.4;cursor:default}
.db-voice__play svg{width:22px;height:22px;fill:currentColor}
.db-voice__rec:focus-visible,.db-voice__play:focus-visible{outline:3px solid var(--db-focus);outline-offset:3px}
.db-voice__state{margin:10px 0 0;min-height:1.4em;font-size:.88rem;font-weight:600;color:var(--db-gold);line-height:1.35;font-variant-numeric:tabular-nums}
.db-voice__nav{display:flex;gap:8px;margin-top:12px}
.db-voice__btn{min-height:44px;padding:0 15px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.07);color:var(--db-ink);
  font:600 .88rem var(--db-font);cursor:pointer}
.db-voice__btn:hover:not([disabled]){background:rgba(255,255,255,.13)}
.db-voice__btn[disabled]{opacity:.42;cursor:default}
.db-voice__priv{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;color:var(--db-muted);font-size:.8rem;line-height:1.45}
.db-voice__priv svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:var(--db-gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.db-voice__priv b{color:var(--db-ink);font-weight:600}

/* the ask: shown before the microphone is ever touched */
.db-voice__ask{margin-top:12px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--db-gold) 8%,transparent);border:1px solid color-mix(in srgb,var(--db-gold) 35%,transparent)}
.db-voice__ask[hidden]{display:none}
.db-voice__ask p{margin:0 0 10px;font-size:.9rem;line-height:1.45}
.db-voice__ask .db-cluster{gap:8px}
@media (prefers-reduced-motion:reduce){
  .db-voice__rec,.db-voice__rec::before,.db-voice__play{transition:none}
  .db-voice__rec.is-rec::after{animation:none;opacity:.8}
  .db-voice__rec:active,.db-voice__play:active:not([disabled]){transform:none}
}