/* Room voice: disclosure and labelled controls inspired by shadcn/ui (MIT).
   Uses existing YoMinds theme tokens; no component runtime is required. */
.room-voice-panel {
  margin:0 20px 8px;
  flex-shrink:0;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--panel);
  overflow:hidden;
}
.room-voice-panel [hidden] { display:none !important; }
.room-voice-panel .voice-bar { min-height:60px; gap:12px; padding:10px 12px; }
.room-voice-panel .voice-heading { flex:1; gap:10px; min-width:0; font-size:13px; }
.room-voice-panel .voice-mark { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border:1px solid var(--line); border-radius:10px; background:var(--hover); }
.room-voice-panel .voice-heading .icon { width:17px; height:17px; color:var(--muted); }
.room-voice-panel.voice-connected .voice-mark { border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); background:color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.room-voice-panel.voice-connected .voice-mark .icon { color:var(--accent); }
.room-voice-panel .voice-copy { gap:3px; }
.room-voice-panel .voice-heading strong { max-width:none; overflow:visible; white-space:normal; font-size:13px; line-height:1.3; font-weight:650; }
.room-voice-panel .voice-summary { color:var(--muted); font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
.room-voice-panel .voice-actions { flex-shrink:1; max-width:72%; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.room-voice-panel .voice-control { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:auto; min-width:36px; height:36px; padding:0 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); color:var(--muted); transition:background var(--speed),border-color var(--speed),color var(--speed); }
.room-voice-panel .voice-control > span { display:inline; font-size:12px; line-height:1; font-weight:550; }
.room-voice-panel .voice-control .icon { flex-shrink:0; width:16px; height:16px; }
.room-voice-panel .voice-control:hover:not(:disabled) { transform:none; background:var(--hover); color:var(--text); border-color:var(--line-strong); }
.room-voice-panel .voice-control:focus-visible,.room-voice-panel input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.room-voice-panel .voice-control:disabled { opacity:.5; cursor:not-allowed; }
.room-voice-panel #voiceJoinButton { padding:0 12px; background:var(--primary); border-color:var(--primary); color:var(--on-accent,#fff); }
.room-voice-panel #voiceJoinButton:hover:not(:disabled) { filter:brightness(1.08); color:var(--on-accent,#fff); }
.room-voice-panel #voiceMuteButton[aria-pressed="true"],.room-voice-panel #voiceDeafenButton[aria-pressed="true"] { border-color:var(--line-strong); background:var(--hover); color:var(--text); }
.room-voice-panel #voiceLeaveButton { color:var(--danger,#bd3b52); }
.room-voice-panel #voiceLeaveButton:hover:not(:disabled) { background:color-mix(in srgb, var(--danger,#bd3b52) 8%,var(--panel)); border-color:color-mix(in srgb, var(--danger,#bd3b52) 35%,var(--line)); }
.room-voice-panel #voiceEnableAudioButton { color:var(--accent); }
.room-voice-panel .voice-roster-button { gap:5px; }
.room-voice-panel .voice-roster-button .icon:last-child { width:13px; height:13px; }
.room-voice-panel .voice-roster-button.is-open .icon:first-child { transform:none; }
.room-voice-panel .voice-roster-button.is-open .icon:last-child { transform:rotate(180deg); }
.room-voice-panel .voice-roster-button.is-open { background:var(--hover); color:var(--text); }
.room-voice-panel .voice-count { display:inline; min-width:0; height:auto; padding:0; background:none; color:inherit; font-variant-numeric:tabular-nums; }
.room-voice-panel .voice-status { margin:0; padding:0 12px 10px; font-size:12px; line-height:1.5; color:var(--muted); overflow:visible; white-space:normal; overflow-wrap:anywhere; }
.room-voice-panel.voice-error .voice-status { color:var(--danger,#bd3b52); }
.room-voice-panel .voice-roster { border-top:1px solid var(--line); background:var(--panel); }
.room-voice-panel .voice-roster-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 12px 0; }
.room-voice-panel .voice-roster-heading h3 { margin:0; font-size:12px; font-weight:650; color:var(--text); }
.room-voice-panel #voiceRosterClose { width:32px; min-width:32px; height:32px; padding:0; border-color:transparent; }
.room-voice-panel .voice-participants { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:156px; overflow:auto; margin:0; padding:8px 12px 12px; overscroll-behavior:contain; }
.room-voice-panel .voice-participants li { display:flex; gap:10px; min-height:48px; max-width:none; padding:7px 9px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); font-size:12px; color:var(--text); }
.room-voice-panel .voice-participants li.voice-muted { opacity:1; }
.room-voice-panel .voice-participants li.speaking { border-color:var(--accent); box-shadow:none; background:color-mix(in srgb, var(--accent) 6%,var(--panel)); }
.room-voice-panel .voice-avatar { flex-shrink:0; width:30px; height:30px; font-size:12px; color:var(--muted); }
.room-voice-panel .voice-participants li.speaking .voice-avatar { background:var(--accent); color:var(--on-accent,#fff); }
.room-voice-panel .voice-participant-copy { display:grid; min-width:0; gap:3px; }
.room-voice-panel .voice-participants strong { max-width:none; white-space:normal; overflow:visible; overflow-wrap:anywhere; line-height:1.3; font-weight:550; }
.room-voice-panel .voice-participant-status { font-size:11px; line-height:1.3; color:var(--muted); opacity:1; }
.room-voice-panel .voice-empty { grid-column:1/-1; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px!important; width:auto; min-height:62px!important; border:0!important; padding:8px 0!important; background:none!important; }
.room-voice-panel .voice-empty small { font-size:11px; line-height:1.5; color:var(--muted); }
.room-voice-panel .voice-settings { border-top:1px solid var(--line); padding:12px; }
.room-voice-panel .voice-volume-heading { display:flex; justify-content:space-between; gap:8px; color:var(--text); font-size:12px; }
.room-voice-panel .voice-volume-heading output { color:var(--muted); font-variant-numeric:tabular-nums; }
.room-voice-panel #voiceVolume { display:block; width:100%; height:24px; margin:6px 0 0; padding:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
.room-voice-panel #voiceVolume::-webkit-slider-runnable-track { height:5px; border:1px solid var(--line-strong); border-radius:999px; background:color-mix(in srgb, var(--accent) 34%,var(--hover)); }
.room-voice-panel #voiceVolume::-webkit-slider-thumb { width:16px; height:16px; margin-top:-6.5px; appearance:none; -webkit-appearance:none; border:2px solid var(--panel); border-radius:50%; background:var(--accent); box-shadow:0 1px 3px color-mix(in srgb, var(--text) 22%,transparent); }
.room-voice-panel #voiceVolume::-moz-range-track { height:5px; border:1px solid var(--line-strong); border-radius:999px; background:var(--hover); }
.room-voice-panel #voiceVolume::-moz-range-progress { height:5px; border-radius:999px; background:var(--accent); }
.room-voice-panel #voiceVolume::-moz-range-thumb { width:12px; height:12px; border:2px solid var(--panel); border-radius:50%; background:var(--accent); box-shadow:0 1px 3px color-mix(in srgb, var(--text) 22%,transparent); }
.room-voice-panel #voiceVolume:hover:not(:disabled)::-webkit-slider-thumb { transform:scale(1.08); }
.room-voice-panel #voiceVolume:hover:not(:disabled)::-moz-range-thumb { transform:scale(1.08); }
.room-voice-panel #voiceVolume:disabled { opacity:.45; cursor:not-allowed; }
.room-voice-panel .voice-privacy { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
@media (max-width:1200px) {
  .room-voice-panel #voiceMuteButton > span,.room-voice-panel #voiceDeafenButton > span,.room-voice-panel #voiceLeaveButton > span { display:none; }
  .room-voice-panel #voiceMuteButton,.room-voice-panel #voiceDeafenButton,.room-voice-panel #voiceLeaveButton { width:36px; padding:0; }
}
@media (max-width:720px) {
  .speech-input-button { width:44px; height:44px; min-height:44px; }
  .room-composer-input textarea,.composer-field textarea { padding-right:60px; }
  .room-voice-panel { margin:0 12px 8px; }
  .room-voice-panel .voice-bar { min-height:60px; padding:9px 10px; gap:8px; }
  .room-voice-panel .voice-heading { gap:8px; }
  .room-voice-panel .voice-mark { display:none; }
  .room-voice-panel .voice-heading strong { max-width:none; font-size:12px; }
  .room-voice-panel .voice-summary { font-size:10px; }
  .room-voice-panel .voice-actions { gap:4px; }
  .room-voice-panel .voice-control { height:44px; min-height:44px; min-width:44px; padding:0 8px; }
  .room-voice-panel #voiceMuteButton,.room-voice-panel #voiceDeafenButton,.room-voice-panel #voiceLeaveButton { width:44px; min-width:44px; }
  .room-voice-panel #voiceRosterClose { width:44px; min-width:44px; height:44px; }
  .room-voice-panel .voice-control > span { font-size:11px; }
  .room-voice-panel #voiceJoinButton { padding:0 9px; }
  .room-voice-panel #voiceEnableAudioButton > span { display:none; }
  .room-voice-panel .voice-participants { grid-template-columns:1fr; max-height:135px; }
  .room-voice-panel .voice-roster { max-height:min(280px,35dvh); overflow:auto; overscroll-behavior:contain; }
  .room-voice-panel .voice-roster-button .icon:last-child { display:none; }
  .room-voice-panel.voice-connecting .voice-bar { flex-wrap:wrap; }
  .room-voice-panel.voice-connecting .voice-heading { flex-basis:100%; }
  .room-voice-panel.voice-connecting .voice-actions { justify-content:flex-start; max-width:100%; }
}
@media (max-width:380px) {
  .room-voice-panel.voice-connected .voice-bar { flex-wrap:wrap; }
  .room-voice-panel.voice-connected .voice-heading { flex-basis:100%; }
  .room-voice-panel.voice-connected .voice-actions { max-width:100%; justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  .room-voice-panel .voice-control,.room-voice-panel .voice-control .icon { transition:none; }
}