/* Voice settings and team conversations. Load after the shell and avatar CSS.
 * Local surface/ink pairs prevent light-shell tokens leaking into dark rooms.
 * Portrait geometry is static: these styles do not add simulated body motion.
 */

#settings-modal {
  --voice-dialog-bg: #101a2b;
  --voice-dialog-well: #17253b;
  --voice-dialog-ink: #eef4ff;
  --voice-dialog-muted: #b3c2d8;
  --voice-dialog-line: #43536c;
  --voice-dialog-accent: #80e7fa;
  color-scheme: dark;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

[data-theme="light"] #settings-modal {
  --voice-dialog-bg: #ffffff;
  --voice-dialog-well: #f1f5fb;
  --voice-dialog-ink: #17243a;
  --voice-dialog-muted: #4b5d77;
  --voice-dialog-line: #aab8cc;
  --voice-dialog-accent: #006d85;
  color-scheme: light;
}

#settings-modal .modal-card {
  box-sizing: border-box;
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 24px;
  border: 1px solid var(--voice-dialog-line);
  border-radius: 18px;
  background: var(--voice-dialog-bg);
  color: var(--voice-dialog-ink);
  box-shadow: 0 24px 90px rgb(0 0 0 / 35%);
}

#settings-modal :is(h2, label, .setting-row > span) {
  color: var(--voice-dialog-ink);
}

#settings-modal h2 { font-size: 1.25rem; line-height: 1.4; }
#settings-modal .setting-row { padding: 14px 0; border-color: var(--voice-dialog-line); line-height: 1.45; }
#settings-modal .setting-row > :is(span, label) { font-weight: 600; }
#settings-modal .setting-row-stack { flex-direction: column; align-items: stretch; gap: 10px; }

#settings-modal :is(.setting-select, .setting-input) {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--voice-dialog-line);
  border-radius: 10px;
  background: var(--voice-dialog-well);
  color: var(--voice-dialog-ink);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: none;
}

#settings-modal #select-voice { display: block; width: 100%; }
#settings-modal select :is(option, optgroup) { background: var(--voice-dialog-bg); color: var(--voice-dialog-ink); }
#settings-modal .setting-input::placeholder { color: var(--voice-dialog-muted); opacity: 1; }
#settings-modal :is(.hx-palette-note, .voice-setting-note, #voice-preview-status) {
  margin: 0;
  color: var(--voice-dialog-muted);
  font-size: .8125rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
#settings-modal .hx-palette-note { margin-top: 8px; }
#settings-modal .setting-inline { display: flex; flex-wrap: wrap; gap: 8px; }
#settings-modal .setting-inline .setting-input { flex: 1 1 200px; width: auto; }
#settings-modal :is(.btn-secondary, #btn-preview-voice) {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--voice-dialog-line);
  border-radius: 10px;
  background: var(--voice-dialog-well);
  color: var(--voice-dialog-ink);
  font: inherit;
  font-weight: 650;
  line-height: 1.35;
  white-space: normal;
  cursor: pointer;
}
#settings-modal #btn-preview-voice { align-self: flex-start; border-color: var(--voice-dialog-accent); }
#settings-modal #btn-preview-voice:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--voice-dialog-accent); }
#settings-modal #btn-preview-voice:disabled { cursor: wait; opacity: .65; }
#settings-modal #voice-preview-status { min-height: 1.55em; }
#settings-modal .modal-actions { flex-wrap: wrap; gap: 10px; margin-top: 20px; }
#settings-modal .modal-actions > button { min-height: 44px; }
#settings-modal :is(button, input, select, summary, a):focus-visible {
  outline: 3px solid var(--voice-dialog-accent);
  outline-offset: 3px;
}

/* Chat voice controls share the same contrast discipline without restyling chat. */
#app {
  --chat-voice-ink: #eef4ff;
  --chat-voice-muted: #b3c2d8;
  --chat-voice-panel: #162237;
  --chat-voice-line: #43536c;
  --chat-voice-accent: #80e7fa;
  --chat-voice-active-bg: #143c37;
  --chat-voice-active-ink: #b9ffdf;
  --chat-voice-active-line: #73e5ae;
}
[data-theme="light"] #app {
  --chat-voice-ink: #17243a;
  --chat-voice-muted: #4b5d77;
  --chat-voice-panel: #eef4fb;
  --chat-voice-line: #aab8cc;
  --chat-voice-accent: #006d85;
  --chat-voice-active-bg: #d7f5e6;
  --chat-voice-active-ink: #0f5135;
  --chat-voice-active-line: #267151;
}
#app .chat-voice-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 2px 2px;
  color: var(--chat-voice-ink);
}
#app :is(#btn-chat-mic, #btn-chat-team, #btn-chat-stop-listen, #btn-chat-voice-settings) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--chat-voice-line);
  border-radius: 10px;
  background: var(--chat-voice-panel);
  color: var(--chat-voice-ink);
  font: inherit;
  font-size: .8125rem;
  font-weight: 650;
  line-height: 1.4;
  white-space: normal;
  cursor: pointer;
}
#app #btn-chat-mic { border-color: var(--chat-voice-accent); }
#app #btn-chat-mic[aria-pressed="true"] {
  border-color: var(--chat-voice-active-line);
  background: var(--chat-voice-active-bg);
  color: var(--chat-voice-active-ink);
  box-shadow: inset 0 0 0 1px var(--chat-voice-active-line);
}
#app :is(#btn-chat-mic, #btn-chat-team, #btn-chat-stop-listen) svg { flex: 0 0 auto; width: 18px; height: 18px; }
#app :is(#btn-chat-mic, #btn-chat-team, #btn-chat-stop-listen, #btn-chat-voice-settings):disabled { opacity: .55; cursor: not-allowed; }
#app #btn-chat-voice-settings { margin-top: 10px; }
#app #chat-voice-status {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  padding: 3px 0;
  color: var(--chat-voice-muted);
  font-size: .75rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#app details.chat-voice-settings {
  flex: 1 0 100%;
  min-width: 0;
  margin: 0;
  border-radius: 10px;
  color: var(--chat-voice-ink);
  font-size: .8125rem;
  line-height: 1.5;
}
#app details.chat-voice-settings > summary {
  box-sizing: border-box;
  min-height: 44px;
  padding: 12px 8px;
  color: var(--chat-voice-muted);
  font-weight: 600;
  cursor: pointer;
}
#app details.chat-voice-settings[open] { padding: 0 10px 10px; border: 1px solid var(--chat-voice-line); background: var(--chat-voice-panel); }
#app details.chat-voice-settings[open] > summary { padding-inline: 0; color: var(--chat-voice-ink); }
#app details.chat-voice-settings label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--chat-voice-ink); }
#app details.chat-voice-settings select {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--chat-voice-line);
  border-radius: 8px;
  background: var(--chat-voice-panel);
  color: var(--chat-voice-ink);
  font: inherit;
}
#app details.chat-voice-settings input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--chat-voice-accent); }
#app details.chat-voice-settings :is(p, small) { color: var(--chat-voice-muted); font-size: .75rem; line-height: 1.5; }
#app :is(#btn-chat-mic, #btn-chat-team, #btn-chat-stop-listen):focus-visible,
#app .chat-voice-controls :is(button, input, select, summary):focus-visible,
#app details.chat-voice-settings :is(button, input, select, summary):focus-visible { outline: 3px solid var(--chat-voice-accent); outline-offset: 3px; }
#app :is(.chat-voice-controls, #btn-chat-mic, #btn-chat-team, #btn-chat-stop-listen, #chat-voice-status, details.chat-voice-settings)[hidden],
:is(#workspace-avatar, #avatar-room) [hidden] { display: none !important; }

/* The room intentionally keeps a dark video-stage palette in either shell theme. */
:is(#workspace-avatar, #avatar-room) {
  --voice-room-ink: #eef4ff;
  --voice-room-muted: #b3c2d8;
  --voice-room-panel: #101a2b;
  --voice-room-well: #0a1220;
  --voice-room-line: #3c4c65;
  --voice-room-accent: #80e7fa;
  --text: var(--voice-room-ink);
  --muted: var(--voice-room-muted);
  --surface: var(--voice-room-panel);
  --avatar-muted: var(--voice-room-muted);
  color: var(--voice-room-ink);
  color-scheme: dark;
  min-width: 0;
}

#app #workspace-avatar .avatar-performance-grid,
#avatar-room .avatar-room-shell {
  grid-template-columns: minmax(240px, .9fr) minmax(340px, 1.1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

#app #workspace-avatar .avatar-stage,
#avatar-room .avatar-stage {
  width: 100%;
  height: clamp(260px, 42vh, 460px);
  height: clamp(260px, 42dvh, 460px);
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 14px;
}

#app #workspace-avatar .avatar-frame,
#avatar-room .avatar-frame { width: 100%; height: 100%; bottom: 0; object-fit: contain; }

#app #workspace-avatar :is(.avatar-conversation-stack, .avatar-conversation-column),
#avatar-room .avatar-conversation-column {
  position: relative;
  top: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-height: none;
  overflow: visible;
  border: 1px solid var(--voice-room-line);
  border-radius: 14px;
  background: var(--voice-room-well);
  color: var(--voice-room-ink);
}

/* The tab panel owns transcript/composer ordering; its outer stack owns tabs. */
#app #workspace-avatar .avatar-conversation-stack > .avatar-conversation-heading { order: 0; }
#app #workspace-avatar .avatar-room-conversation {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-height: none;
  overflow: visible;
}
#app #workspace-avatar .avatar-room-conversation > * { flex-shrink: 0; min-width: 0; }
#app #workspace-avatar .avatar-room-conversation > .avatar-work-controls { order: 6; }
#app #workspace-avatar [data-avatar-mode-note] { margin: 0; padding: 0 14px 12px; color: var(--voice-room-muted); font-size: .75rem; line-height: 1.5; }

:is(#workspace-avatar, #avatar-room) :is(.avatar-conversation-heading, .avatar-console-head) {
  padding: 14px 16px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(100deg, rgb(98 231 255 / 8%), transparent);
}
:is(#workspace-avatar, #avatar-room) :is(.avatar-conversation-heading strong, .avatar-console-head h3) { color: var(--voice-room-ink); font-size: 1rem; }

#app #workspace-avatar .avatar-transcript,
#avatar-room .avatar-transcript {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 160px;
  height: clamp(160px, 24vh, 240px);
  height: clamp(160px, 24dvh, 240px);
  max-height: 320px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: #080f1b;
  scrollbar-gutter: stable;
  scroll-padding-block: 12px;
}

:is(#workspace-avatar, #avatar-room) .avatar-turn { padding: 10px 12px; border-radius: 12px; }
:is(#workspace-avatar, #avatar-room) .avatar-turn strong { font-size: .75rem; }
:is(#workspace-avatar, #avatar-room) .avatar-turn p { font-size: .875rem !important; line-height: 1.55 !important; }
:is(#workspace-avatar, #avatar-room) .avatar-room-status { padding: 10px 14px; font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
#app #workspace-avatar .avatar-composer,
#avatar-room .avatar-composer { min-width: 0; padding: 12px 14px; gap: 10px; }
:is(#workspace-avatar, #avatar-room) .avatar-composer > label { color: var(--voice-room-ink); font-size: .8125rem; line-height: 1.5; }
:is(#workspace-avatar, #avatar-room) .avatar-composer textarea {
  box-sizing: border-box;
  min-height: 72px;
  max-width: 100%;
  padding: 10px 12px;
  border-color: var(--voice-room-line);
  border-radius: 10px;
  background: #080f1b;
  color: var(--voice-room-ink);
  font-size: 1rem;
}
:is(#workspace-avatar, #avatar-room) .avatar-composer textarea::placeholder { color: #a3b4ca; opacity: 1; }

#app #workspace-avatar .avatar-primary-controls,
#avatar-room .avatar-primary-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#app #workspace-avatar .avatar-primary-controls :is(.button, .workspace-button),
#avatar-room .avatar-primary-controls .button {
  min-height: 44px;
  width: 100%;
  margin: 0;
  padding: 10px;
  font-size: .8125rem;
  line-height: 1.35;
  white-space: normal;
}
:is(#workspace-avatar, #avatar-room) .avatar-primary-controls .avatar-mic-button { grid-column: 1 / -1; }
:is(#workspace-avatar, #avatar-room) :is(.avatar-privacy-note, .avatar-live-privacy) {
  color: var(--voice-room-muted) !important;
  font-size: .75rem !important;
  line-height: 1.5 !important;
}

:is(#workspace-avatar, #avatar-room) .avatar-live-voice { margin-top: 0; padding: 12px; gap: 10px; border-radius: 12px; }
:is(#workspace-avatar, #avatar-room) .avatar-live-voice-row > button { flex: 1 1 160px; min-height: 44px; margin: 0; padding: 10px; font-size: .8125rem; line-height: 1.35; }
:is(#workspace-avatar, #avatar-room) .avatar-live-state { color: var(--voice-room-ink); font-size: .8125rem; }
:is(#workspace-avatar, #avatar-room) .avatar-live-voice summary { box-sizing: border-box; min-height: 44px; padding: 12px 0; color: var(--voice-room-ink); font-size: .8125rem; }
:is(#workspace-avatar, #avatar-room) .avatar-live-voice label { font-size: .8125rem; line-height: 1.45; }
:is(#workspace-avatar, #avatar-room) :is(.avatar-live-voice select, .avatar-team-controls select, .avatar-team-settings select) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 1px solid var(--voice-room-line);
  border-radius: 9px;
  background: var(--voice-room-panel);
  color: var(--voice-room-ink);
  font: inherit;
}

#app #workspace-avatar .avatar-roster,
#avatar-room .avatar-roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
#app #workspace-avatar .avatar-person,
#avatar-room .avatar-person { min-width: 0; min-height: 96px; grid-template-rows: 58px auto; border-radius: 10px; }
#app #workspace-avatar .avatar-person img,
#avatar-room .avatar-person img { height: 64px; }
#app #workspace-avatar .avatar-person > span,
#avatar-room .avatar-person > span { padding: 8px 6px; }
:is(#workspace-avatar, #avatar-room) .avatar-person b { color: var(--voice-room-ink); font-size: .75rem; }
:is(#workspace-avatar, #avatar-room) .avatar-subhead strong { color: var(--voice-room-ink); font-size: .8125rem; }
:is(#workspace-avatar, #avatar-room) .avatar-subhead > small { color: var(--voice-room-muted); font-size: .6875rem; }
:is(#workspace-avatar, #avatar-room) .avatar-roster-block { padding: 12px; border-radius: 12px; }

/* Mode switches stay in document flow; all active and disabled states are explicit. */
:is(#workspace-avatar, #avatar-room) .avatar-conversation-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 5px;
  border: 1px solid var(--voice-room-line);
  border-radius: 12px;
  background: var(--voice-room-well);
}
:is(#workspace-avatar, #avatar-room) .avatar-conversation-tabs button {
  flex: 1 1 150px;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--voice-room-muted);
  font: inherit;
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.4;
  cursor: pointer;
}
:is(#workspace-avatar, #avatar-room) .avatar-conversation-tabs button:hover { background: #17253b; color: var(--voice-room-ink); }
:is(#workspace-avatar, #avatar-room) .avatar-conversation-tabs button[aria-selected="true"] { border-color: #548b9a; background: #173742; color: #c3f6ff; }
#app #workspace-avatar:is(.avatar-team-mode, [data-conversation-mode="team"]) .avatar-performance-grid { grid-template-columns: minmax(240px, .72fr) minmax(360px, 1.28fr); }
#app #workspace-avatar:is(.avatar-team-mode, [data-conversation-mode="team"]) .avatar-stage { height: clamp(210px, 30vh, 320px); height: clamp(210px, 30dvh, 320px); }

:is(#workspace-avatar, #avatar-room) .avatar-team-settings { margin: 0; border-top: 1px solid var(--voice-room-line); }
:is(#workspace-avatar, #avatar-room) .avatar-team-settings > summary {
  box-sizing: border-box;
  min-height: 48px;
  padding: 14px;
  color: var(--voice-room-ink);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.45;
  cursor: pointer;
}
:is(#workspace-avatar, #avatar-room) .avatar-team-settings[open] > summary { border-bottom: 1px solid var(--voice-room-line); }
:is(#workspace-avatar, #avatar-room) .avatar-team-console > summary strong { color: var(--voice-room-ink); font-size: .8125rem; }
:is(#workspace-avatar, #avatar-room) .avatar-team-console > p { color: var(--voice-room-muted); font-size: .75rem !important; line-height: 1.5; }
:is(#workspace-avatar, #avatar-room) .team-member-choice { min-height: 48px; border-radius: 9px; }
:is(#workspace-avatar, #avatar-room) .team-member-choice b { color: var(--voice-room-ink); font-size: .8125rem; }
:is(#workspace-avatar, #avatar-room) .team-member-choice small { color: var(--voice-room-muted); font-size: .6875rem; }
:is(#workspace-avatar, #avatar-room) .team-member-choice input { width: 18px; height: 18px; flex: 0 0 auto; }
:is(#workspace-avatar, #avatar-room) .avatar-team-controls { flex-wrap: wrap; gap: 10px; }
:is(#workspace-avatar, #avatar-room) .avatar-team-controls label { color: var(--voice-room-muted); font-size: .75rem; line-height: 1.4; }
:is(#workspace-avatar, #avatar-room) .avatar-team-controls :is(.button, .workspace-button) { min-height: 44px; padding: 10px 14px; font-size: .8125rem; line-height: 1.35; white-space: normal; }
:is(#workspace-avatar, #avatar-room) .avatar-team-proactive { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; color: var(--voice-room-muted); font-size: .75rem; line-height: 1.5; }
:is(#workspace-avatar, #avatar-room) .avatar-team-proactive input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--voice-room-accent); }

:is(#workspace-avatar, #avatar-room) .avatar-work-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
:is(#workspace-avatar, #avatar-room) .avatar-work-controls > :is(button, a, select) {
  flex: 1 1 150px;
  box-sizing: border-box;
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--voice-room-line);
  border-radius: 9px;
  background: var(--voice-room-panel);
  color: var(--voice-room-ink);
  font-size: .8125rem;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
}
:is(#workspace-avatar, #avatar-room) .avatar-work-controls > :is(p, [role="status"]) { flex-basis: 100%; margin: 0; color: var(--voice-room-muted); font-size: .75rem; line-height: 1.5; }
:is(#workspace-avatar, #avatar-room) details.avatar-work-controls { display: block; margin: 0; padding: 0 14px; border-top: 1px solid var(--voice-room-line); }
:is(#workspace-avatar, #avatar-room) details.avatar-work-controls > summary { min-height: 48px; box-sizing: border-box; padding: 14px 0; color: var(--voice-room-ink); font-size: .8125rem; line-height: 1.5; font-weight: 650; cursor: pointer; }
:is(#workspace-avatar, #avatar-room) details.avatar-work-controls > label { display: grid; gap: 6px; margin: 10px 0 6px; color: var(--voice-room-ink); font-size: .8125rem; line-height: 1.5; }
:is(#workspace-avatar, #avatar-room) details.avatar-work-controls :is(select, textarea) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--voice-room-line);
  border-radius: 9px;
  background: var(--voice-room-panel);
  color: var(--voice-room-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
:is(#workspace-avatar, #avatar-room) details.avatar-work-controls textarea { min-height: 104px; resize: vertical; }
:is(#workspace-avatar, #avatar-room) details.avatar-work-controls textarea::placeholder { color: var(--voice-room-muted); opacity: 1; }
:is(#workspace-avatar, #avatar-room) details.avatar-work-controls .avatar-team-controls { padding: 10px 0; }
:is(#workspace-avatar, #avatar-room) details.avatar-work-controls .avatar-team-controls > button { flex: 1 1 140px; margin: 0; }
:is(#workspace-avatar, #avatar-room) details.avatar-work-controls > p { padding-bottom: 14px; }
#app #workspace-avatar .avatar-provider-status { color: #b9edcc !important; background: #101f1c; font-size: .75rem !important; }
:is(#workspace-avatar, #avatar-room) :is(button, input, textarea, select, summary, a, [tabindex]):focus-visible { outline: 3px solid var(--voice-room-accent); outline-offset: 3px; }
:is(#workspace-avatar, #avatar-room) :is(button, select):disabled { cursor: not-allowed; opacity: .55; }

@media (max-width: 1179px) and (min-width: 901px) {
  #app #workspace-avatar .avatar-performance-grid { grid-template-areas: "stage conversation"; grid-template-columns: minmax(220px, .85fr) minmax(320px, 1.15fr); gap: 12px; }
  #app #workspace-avatar:is(.avatar-team-mode, [data-conversation-mode="team"]) .avatar-performance-grid { grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr); }
}

@media (max-width: 900px) {
  #app #workspace-avatar .avatar-performance-grid,
  #app #workspace-avatar:is(.avatar-team-mode, [data-conversation-mode="team"]) .avatar-performance-grid,
  #avatar-room .avatar-room-shell { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #app #workspace-avatar .avatar-stage,
  #app #workspace-avatar:is(.avatar-team-mode, [data-conversation-mode="team"]) .avatar-stage,
  #avatar-room .avatar-stage { height: clamp(180px, 28vh, 280px); height: clamp(180px, 28dvh, 280px); }
  #app #workspace-avatar .avatar-conversation-stack { width: 100%; }
  #app #workspace-avatar .avatar-roster { display: flex; overflow-x: auto; padding: 3px 3px 8px; gap: 8px; scroll-padding-inline: 3px; }
  #app #workspace-avatar .avatar-person { flex: 0 0 100px; }
  #app #workspace-avatar .avatar-transcript,
  #avatar-room .avatar-transcript { height: 200px; min-height: 160px; }
  /* Preserve conversation order in the direct room as well as the main canvas. */
  #avatar-room .avatar-console-head { order: 1; }
  #avatar-room .avatar-composer { order: 2; }
  #avatar-room .avatar-room-status { order: 3; }
  #avatar-room .avatar-transcript { order: 4; }
  #avatar-room :is(.avatar-team-console, .avatar-team-settings) { order: 5; }
}

@media (max-width: 520px) {
  #settings-modal .modal-card { padding: 20px 16px; border-radius: 14px; }
  #settings-modal .hx-palette-row { flex-direction: column; align-items: stretch; }
  #settings-modal #btn-preview-voice { width: 100%; }
  #settings-modal .modal-actions > button { flex: 1 1 130px; }
  #app .chat-voice-controls { gap: 6px; }
  #app .chat-voice-controls :is(#btn-chat-mic, #btn-chat-team) { flex: 1 1 120px; }
  #app .chat-voice-controls #btn-chat-stop-listen { flex: 1 1 100%; }
  #app #chat-voice-status { flex-basis: 100%; }
  #app details.chat-voice-settings select { font-size: 1rem; }
  #app .composer-row:has(#btn-chat-mic) { flex-wrap: wrap; }
  #app .composer-row:has(#btn-chat-mic) #composer-input { flex: 1 0 100%; order: 0; font-size: 1rem; }
  #app .composer-row:has(#btn-chat-mic) > button { order: 1; }
  :is(#workspace-avatar, #avatar-room) .avatar-conversation-tabs { gap: 4px; }
  :is(#workspace-avatar, #avatar-room) .avatar-conversation-tabs button { flex-basis: 110px; padding: 10px 8px; font-size: .8125rem; }
  :is(#workspace-avatar, #avatar-room) .avatar-live-voice label:not(.avatar-live-barge) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  :is(#workspace-avatar, #avatar-room) .avatar-live-voice select { width: 100%; font-size: 1rem; }
  :is(#workspace-avatar, #avatar-room) .avatar-team-controls { align-items: stretch; }
  :is(#workspace-avatar, #avatar-room) .avatar-team-controls > :is(label, button) { flex: 1 1 140px; }
  #avatar-room .avatar-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #settings-modal *,
  :is(#workspace-avatar, #avatar-room) * { scroll-behavior: auto !important; }
  #settings-modal .modal-card { animation: none; transition: none; }
  :is(#workspace-avatar, #avatar-room) .avatar-person { transition: none; }
}

@media (forced-colors: active) {
  #settings-modal,
  :is(#workspace-avatar, #avatar-room) { --voice-dialog-accent: Highlight; --voice-room-accent: Highlight; }
  #app { --chat-voice-accent: Highlight; }
  #settings-modal .modal-card,
  #settings-modal :is(.setting-select, .setting-input, .btn-secondary),
  :is(#workspace-avatar, #avatar-room) :is(.avatar-conversation-tabs, .avatar-conversation-tabs button, .avatar-work-controls > button, .avatar-work-controls > a, .avatar-live-voice select) { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  :is(#workspace-avatar, #avatar-room) .avatar-conversation-tabs button[aria-selected="true"] { border-color: Highlight; background: Highlight; color: HighlightText; }
  #app :is(#btn-chat-mic, #btn-chat-team, #btn-chat-stop-listen, #btn-chat-voice-settings) { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  #app #btn-chat-mic[aria-pressed="true"] { border-color: Highlight; background: Highlight; color: HighlightText; }
}