/* Voice shares the Roomier surfaces, with captions and controls always in reach. */
#voice-overlay { padding: 22px; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
#voice-overlay .vc-inner { display: flex; flex-direction: column; align-items: stretch; width: min(720px,100%); max-width: 720px; max-height: 100%; gap: 0; padding: 0; text-align: left; overflow: auto; }
.vc-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 6px 2px 18px; }
.vc-eyebrow { font-size: 11px; letter-spacing: .12em; color: var(--text-3); }
.vc-header h2 { margin: 3px 0 0; font-size: 21px; font-weight: 500; }
#voice-overlay #vc-split-toggle { position: static; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 11px; background: var(--fill); flex-shrink: 0; }
.vc-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 10px; text-align: center; }
#voice-overlay .vc-orb { --amp: 0; display: flex; justify-content: center; align-items: center; gap: 7px; width: 90px; min-height: 64px; height: 64px; background: none; box-shadow: none; border-radius: 0; transform: none; animation: none; cursor: default; }
.vc-orb span { display: block; width: 8px; height: calc(16px + var(--amp)*36px); border-radius: 8px; background: var(--text-2); transition: height .12s ease; }
.vc-orb span:nth-child(even) { height: calc(28px + var(--amp)*24px); }
.vc-orb span:nth-child(3) { height: calc(42px + var(--amp)*18px); }
.vc-orb.capture span { background: var(--blue); }
.vc-orb.speak span { animation: voice-wave 1.1s ease-in-out infinite alternate; background: var(--text); }
.vc-orb.speak span:nth-child(even) { animation-delay: -.4s; }
.vc-orb.think span, .vc-orb.transcribe span { animation: voice-wait 1.4s ease-in-out infinite; }
.vc-orb.paused span, .vc-orb.error span { height: 9px; opacity: .5; }
@keyframes voice-wave { to { transform: scaleY(.45); } }
@keyframes voice-wait { 50% { opacity: .35; } }
#voice-overlay .vc-status { font-size: 21px; font-weight: 500; line-height: 1.4; }
#voice-overlay .vc-hint { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.vc-captions { border: 1px solid var(--hairline); border-radius: 18px; padding: 18px; background: var(--panel); min-height: 140px; }
.vc-audio-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 0 0 16px; }
.vc-sound-off { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 0 0 12px; font-size: 14px; color: var(--text-2); }
#voice-overlay #vc-enable-sound { min-height: 44px; padding: 9px 14px; border: 1px solid var(--hairline); border-radius: 10px; color: var(--text); background: var(--panel); font: inherit; cursor: pointer; }
.vc-compact-reply { display: none; }
#voice-overlay .vc-audio-tools button, #voice-overlay .vc-review button { min-height: 44px; padding: 9px 14px; border: 1px solid var(--hairline); border-radius: 10px; color: var(--text); background: var(--panel); font-size: 14px; cursor: pointer; }
#voice-overlay .vc-audio-tools button:disabled { opacity: .4; cursor: default; }
.vc-output-note { font-size: 13px; line-height: 1.6; margin: 0 0 16px; }
.vc-review-setting { display: flex; gap: 10px; align-items: center; min-height: 44px; margin-top: 12px; }
.vc-review-setting input { width: 18px; height: 18px; flex-shrink: 0; }
.vc-review { padding: 16px 0; }
.vc-review label { display: block; font-size: 14px; margin-bottom: 10px; }
#voice-overlay .vc-review textarea { display: block; box-sizing: border-box; width: 100%; resize: vertical; min-height: 90px; padding: 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 16px; }
.vc-review > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.vc-caption-label { color: var(--text-2); font-size: 13px; margin-bottom: 14px; }
#vc-empty { font-size: 15px; color: var(--text-3); margin: 25px 0; }
#voice-overlay .vc-log { display: flex; flex-direction: column; width: 100%; max-height: 31dvh; gap: 15px; }
#voice-overlay .vc-line { flex-shrink: 0; display: flex; flex-direction: column; gap: 7px; padding: 13px 16px; font-size: 16px; line-height: 1.65; border-radius: 17px; white-space: pre-wrap; overflow-wrap: anywhere; }
#voice-overlay .vc-line b { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; }
#voice-overlay .vc-line.you { margin: 0 0 0 30px; align-self: flex-end; background: var(--bubble-user); }
#voice-overlay .vc-line.agent { margin: 0; padding: 4px 0; background: none; }
.vc-preferences { padding: 15px 3px; color: var(--text-2); font-size: 14px; }
.vc-preferences summary { cursor: pointer; min-height: 32px; padding: 5px 0; }
#voice-overlay .vc-out { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#voice-overlay .vc-out-pill { min-height: 42px; padding: 9px 12px; font-size: 14px; border-radius: 10px; }
.vc-out-pill[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
#voice-overlay .vc-settings { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 15px; text-align: left; }
#voice-overlay .vc-settings label { display: grid; gap: 8px; font-size: 14px; }
#voice-overlay .vc-settings select { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; padding: 10px; color: var(--text); background: var(--panel); border: 1px solid var(--hairline); border-radius: 10px; }
.vc-controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0 4px; position: sticky; bottom: 0; background: var(--bg); }
#voice-overlay .vc-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 12px 18px; border: 1px solid var(--hairline); border-radius: 14px; color: var(--text); background: var(--panel); font-size: 15px; cursor: pointer; }
#voice-overlay .vc-controls button:disabled { opacity: .35; cursor: default; }
#voice-overlay #vc-mute { width: 50px; padding: 0; flex-shrink: 0; }
#vc-mute[aria-pressed="true"] { color: var(--blue); border-color: var(--blue); }
#voice-overlay .vc-send { flex: 1; max-width: 250px; }
#voice-overlay #vc-end { color: #ffb6b3; background: #502023; border-color: #ff8e881f; margin: 0; }
.vc-error { border: 1px solid #e8877940; border-radius: 13px; background: var(--panel); padding: 15px 17px; margin-bottom: 16px; font-size: 15px; line-height: 1.6; }
.vc-error p { margin: 0 0 12px; }
#vc-retry { min-height: 44px; padding: 9px 15px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 14px; cursor: pointer; }
#voice-overlay .vc-approval { position: static; margin-bottom: 15px; font-size: 14px; }
#voice-overlay .vc-ap-btns button { min-height: 44px; padding: 10px 15px; font-size: 14px; }
#voice-overlay.split { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); }
#voice-overlay.split .vc-inner { display: grid; grid-template-columns: minmax(0,1fr) 40px; justify-items: stretch; gap: 10px; margin: 0 auto; padding: 12px; border-radius: 20px; max-height: 65dvh; background: var(--panel); box-shadow: none; }
#voice-overlay.split .vc-header { grid-column: 2; grid-row: 1; padding: 0; }
#voice-overlay.split .vc-header > div { display: none; }
#voice-overlay.split #vc-split-toggle { width: 40px; height: 40px; }
#voice-overlay.split .vc-stage { grid-column: 1; grid-row: 1; flex-direction: row; gap: 12px; padding: 0; text-align: left; min-width: 0; }
#voice-overlay.split .vc-orb { width: 28px; min-width: 28px; height: 28px; min-height: 28px; gap: 3px; }
#voice-overlay.split .vc-orb span { width: 3px; height: calc(6px + var(--amp)*14px); }
#voice-overlay.split .vc-orb span:nth-child(even) { height: 14px; }
#voice-overlay.split .vc-orb span:nth-child(3) { height: 22px; }
#voice-overlay.split .vc-status { font-size: 14px; text-align: left; }
#voice-overlay.split .vc-captions, #voice-overlay.split .vc-preferences, #voice-overlay.split .vc-hint { display: none; }
#voice-overlay.split .vc-audio-tools { grid-column: 1 / -1; padding: 0; }
#voice-overlay.split .vc-sound-off { grid-column: 1 / -1; padding: 0; }
#voice-overlay.split .vc-compact-reply:not([hidden]) { display: block; grid-column: 1 / -1; padding: 8px 2px; max-height: 18dvh; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; color: var(--text); }
#voice-overlay.split .vc-controls { grid-column: 1 / -1; grid-row: 2; padding: 0; gap: 8px; position: static; background: none; }
#voice-overlay.split .vc-controls button { min-height: 44px; padding: 10px 12px; font-size: 14px; background: var(--fill); }
#voice-overlay.split #vc-mute { width: 44px; }
#voice-overlay.split .vc-send { max-width: none; }
#voice-overlay.split #vc-end { background: #502023; }
#voice-overlay.split .vc-error, #voice-overlay.split .vc-approval { grid-column: 1 / -1; margin: 0; }
body.vc-split-on #composer-wrap { min-height: var(--voice-dock-height,130px); padding: 0; }
@media (max-width:760px) {
  #voice-overlay:not(.split) { position: fixed; padding: calc(14px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom)); }
  #voice-overlay .vc-inner { max-height: 100%; }
  .vc-header { padding-bottom: 6px; }
  .vc-stage { padding: 12px 0 20px; }
  #voice-overlay .vc-status { font-size: 20px; }
  #voice-overlay.split .vc-status { font-size: 14px; }
  .vc-captions { padding: 15px; }
  #voice-overlay .vc-settings { grid-template-columns: minmax(0,1fr); }
  #voice-overlay .vc-controls { gap: 8px; }
  #voice-overlay .vc-controls button { padding: 12px 14px; }
  #voice-overlay.split { padding-inline: 10px; }
}
@media (prefers-reduced-motion:reduce) { #voice-overlay .vc-orb span { animation: none; transition: none; } }
