/* Original Tutou held-recording sheet. Bars are driven ONLY by captured audio samples. */
.vg-hold-button {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  min-height: 44px;
}
.vg-sheet,
.vg-sheet * { box-sizing: border-box; }
.vg-sheet[hidden], .vg-sheet [hidden] { display: none !important; }
.vg-sheet {
  --vg-red: #ef4148;
  --vg-ink: #17181b;
  --vg-level: 0;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  border: 0;
  z-index: 2147483600;
  display: grid;
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  background: rgb(23 24 27 / 40%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--vg-ink);
  font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
}
.vg-sheet::backdrop { background: transparent; }
.vg-sheet p { padding: 0; background: none; border-radius: 0; }
.vg-card {
  width: min(100%, 460px);
  max-height: 100%;
  overflow: auto;
  border: 1px solid rgb(255 255 255 / 85%);
  border-radius: 32px;
  padding: 26px 24px 20px;
  background: rgb(255 255 255 / 95%);
  box-shadow: 0 24px 100px rgb(0 0 0 / 20%);
  text-align: center;
  animation: vg-enter 160ms ease-out;
}
.vg-brand { display: block; font-size: 11px; font-weight: 800; letter-spacing: .24em; color: #b8252c; }
.vg-title { font-size: clamp(21px, 5vw, 26px); font-weight: 750; letter-spacing: -.04em; margin: 8px 0; }
.vg-timer { display: block; font-size: 16px; font-variant-numeric: tabular-nums; color: #65666d; }
.vg-orb {
  display: grid; place-items: center;
  position: relative;
  width: 86px; height: 86px;
  border-radius: 30px;
  margin: 34px auto 10px;
  background: var(--vg-red); color: white;
  box-shadow: 0 0 0 calc(8px + var(--vg-level) * 18px) rgb(239 65 72 / 9%);
  transform: scale(calc(1 + var(--vg-level) * .08));
}
.vg-logo { display:block; width:100%; height:100%; object-fit:contain; border-radius:inherit; pointer-events:none; -webkit-user-drag:none; }
/* Decorative breathing indicates waiting; it is not presented as a waveform/audio measurement. */
.vg-sheet[data-status="requesting"] .vg-orb,
.vg-sheet[data-meter="unavailable"][data-status="recording"] .vg-orb { animation: vg-breathe 1.8s ease-in-out infinite; }
.vg-wave { height: 52px; display: flex; align-items: center; justify-content: center; gap: 3px; margin: 14px auto; }
.vg-bar { display: block; flex: 0 1 5px; height: 3px; border-radius: 4px; background: var(--vg-red); }
.vg-sheet[data-meter="unavailable"] .vg-wave { opacity: .25; }
.vg-caption { min-height: 3em; max-height: 7.5em; overflow: auto; overflow-wrap: anywhere; margin: 16px 0 12px; font-size: 18px; line-height: 1.5; }
.vg-hint { font-size: 14px; color: #55565e; margin: 12px 0; }
.vg-keyboard, .vg-private { color: #696a73; font-size: 12px; line-height: 1.5; margin: 14px 0 0; }
.vg-targets { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; margin: 20px 0 12px; }
.vg-sheet button {
  min-height: 44px;
  min-width: 44px;
  padding: 11px 16px;
  border: 1px solid #e1e1e7;
  border-radius: 16px;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  background: white;
  color: var(--vg-ink);
  cursor: pointer;
  touch-action: manipulation;
}
.vg-targets button { flex: 1; border: 2px dashed #dddde3; background: #fafafa; transition: transform 140ms, background 140ms, color 140ms; }
.vg-sheet[data-intent="cancel"] .vg-cancel { background: var(--vg-ink); border-color: var(--vg-ink); color: white; transform: translate(-3px, -6px); }
.vg-sheet[data-intent="text"] .vg-convert { background: var(--vg-red); border-color: var(--vg-red); color: white; transform: translate(3px, -6px); }
.vg-sheet[data-intent="cancel"] .vg-orb { background: var(--vg-ink); }
.vg-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.vg-actions .vg-sendAudio, .vg-actions .vg-sendText { background: var(--vg-red); border-color: var(--vg-red); color: white; flex: 1; }
.vg-sheet button:disabled { opacity: .45; cursor: default; }
.vg-sheet button:focus-visible, .vg-editor:focus-visible { outline: 3px solid #b8252c; outline-offset: 3px; }
.vg-editor {
  display: block;
  width: 100%;
  min-height: 120px;
  max-height: 32dvh;
  margin: 12px 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d9d9e0;
  background: #fff;
  color: var(--vg-ink);
  font: inherit;
  font-size: 16px;
  resize: vertical;
}
.vg-preview { width: 100%; min-height: 44px; margin: 8px 0 16px; }
@keyframes vg-enter { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes vg-breathe { 50% { box-shadow: 0 0 0 16px rgb(239 65 72 / 6%); } }
@media (max-height: 650px) {
  .vg-card { padding: 18px; border-radius: 24px; }
  .vg-orb { width: 64px; height: 64px; margin-top: 24px; }
  .vg-caption { min-height: 1.5em; margin: 8px 0; }
  .vg-targets { margin: 12px 0; }
  .vg-private { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-sheet *, .vg-sheet *::before, .vg-sheet *::after { animation: none !important; transition: none !important; }
  .vg-orb { transform: none; }
}

/* Suppress native mobile selection/callouts only in the recording interaction. */
.vg-hold-button *, .vg-sheet, .vg-sheet * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
html.vg-press-active, html.vg-press-active * {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
.vg-sheet .vg-editor {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
  touch-action: auto;
}