/* Shared geometry and hierarchy. Appearance still owns artwork and colours. */
:root {
  --ui-divider: color-mix(in srgb, var(--theme-line) 65%, transparent);
  --ui-control: color-mix(in srgb, var(--theme-soft) 70%, var(--theme-surface));
  --call-feedback-clearance: 168px;
}
#chat {
  gap: 8px;
  padding: 8px;
}
#sidebar,
#content,
#peopleRail {
  border: 0;
  border-radius: 12px;
}
#sidebar,
#peopleRail {
  border: 1px solid var(--ui-divider);
}
#content {
  border: 1px solid var(--ui-divider);
  overflow: hidden;
}
html:not([data-custom-theme]) #content {
  background: color-mix(in srgb, var(--theme-content) 96%, var(--theme-surface));
}
.chat-header {
  min-height: 60px;
  border-color: var(--ui-divider);
}
#sidebar .brand > div {
  font-size: 16px;
  font-weight: 650;
}
#communityTagline {
  font-size: 12px;
  line-height: 1.5;
}
#sidebar .section-title,
#onlineSection .section-title,
#offlineTitle {
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.045em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--theme-quiet);
}
#sidebar .section-title {
  margin-top: 20px;
}
#onlineSection .people-title {
  min-height: 32px;
  margin-inline: 8px;
}
#offlineTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  margin: 0 8px 6px;
  padding-block: 6px;
  list-style: none;
}
#offlineTitle::-webkit-details-marker {
  display: none;
}
#offlineTitle::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-right: 3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  flex-shrink: 0;
}
#offlinePeople[open] > #offlineTitle::after {
  transform: rotate(45deg);
}
#sidebar .channel {
  font-size: 14px;
  font-weight: 400;
  border-radius: 8px;
}
#sidebar .channel.active :is(.text-channel-name, .voice-channel-name) {
  font-weight: 600;
}
#sidebar .voice-channel-card,
#sidebar .voice-channel-card.occupied {
  background: transparent;
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}
#sidebar .channel {
  border-color: transparent;
}
#sidebar .channel.voice:hover:not(:disabled):not(.active) {
  background: var(--theme-hover);
}
#sidebar .channel.voice.active {
  background: var(--theme-selected);
}
.channel-hint,
.voice-occupancy,
.sidebar-hint,
.person-copy small,
.people-group-title,
#offlineTitle,
#peopleButtonLabel,
.retention-badge,
.msg time,
.meta .you,
.day-divider,
.composer-meta,
.screen-hint,
.call-options label,
.call-options select,
#communityTagline {
  font-size: 12px;
}
.meta b,
.person-copy strong,
#accountButton strong {
  font-weight: 600;
}
.meta b {
  font-size: 14px;
}
.messageBody {
  font-size: 15px;
  line-height: 1.65;
}
.msg {
  column-gap: 12px;
  padding-top: 10px;
}
.msg + .msg {
  margin-top: 10px;
}
.msg.grouped {
  margin-top: 0;
  padding-top: 3px;
}
#messages {
  padding-top: 14px;
}
.day-divider {
  font-weight: 500;
}
.day-divider::before,
.day-divider::after {
  background: var(--ui-divider);
}
.person-row {
  font-size: 13px;
}
#sidebar #participants .participant-avatar,
.voice-preview-people .presence-avatar {
  width: 28px;
  height: 28px;
}
#sidebar #participants li {
  font-size: 13px;
}
#sidebar #participants li.speaking .participant-avatar {
  outline-width: 2px;
  outline-offset: 3px;
}
#sidebar .voice-preview-people .person-row {
  min-height: 36px;
}
.media-indicators .media-status {
  color: var(--theme-quiet);
}
.media-indicators .media-status[aria-label='Deafened'],
.call-person-indicators .media-status[aria-label='Deafened'] {
  color: var(--theme-bad);
}
.compose-box {
  align-items: center;
  padding: 8px;
  border-color: var(--ui-divider);
  border-radius: 15px;
  box-shadow: none;
}
/* Drafts and optional feedback grow upward; the send/attach targets retain
   their bottom edge while the textarea gains lines. */
.compose-box > :is(#attachMedia, #send) {
  align-self: flex-end;
}
#message {
  min-height: 36px;
  padding: 7px 4px;
  font-size: 15px;
  line-height: 22px;
}
#sidebar #voiceStatus {
  padding: 12px;
  background: var(--theme-card);
  border: 1px solid var(--ui-divider);
  border-radius: 12px;
}
#sidebar .voice-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
#sidebar .voice-actions .compact-icon {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 0;
  background: var(--ui-control);
  color: var(--theme-ink);
  border-radius: 8px;
}

#accountButton .account-copy {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
#accountButton strong {
  flex: 1;
  min-width: 0;
}
#accountButton .avatar,
#accountVoice {
  flex: none;
}
#accountVoice .media-indicators {
  gap: 3px;
}
#accountButton.speaking .avatar {
  outline: 2px solid var(--theme-ok);
  outline-offset: 2px;
}
#accountButton.speaking strong {
  color: var(--theme-ok);
}
#callSettings {
  border-color: var(--ui-divider);
}
#sidebar .voice-actions :is(#muteVoice, #deafenVoice)[aria-pressed='true'],
:is(#stageMuteVoice, #stageDeafenVoice, #mobileMuteVoice, #mobileDeafenVoice)[aria-pressed='true'] {
  color: var(--theme-bad);
  background: var(--theme-bad-bg);
}
:is(#muteVoice, #stageMuteVoice, #mobileMuteVoice)[data-caption]:not([data-caption='']) {
  flex-direction: column;
  gap: 1px;
  padding-block: 3px;
}
:is(#muteVoice, #stageMuteVoice, #mobileMuteVoice)[data-caption]:not([data-caption='']) .ui-icon {
  width: 17px;
  height: 17px;
}
:is(#muteVoice, #stageMuteVoice, #mobileMuteVoice)[data-caption]:not([data-caption=''])::after {
  content: attr(data-caption);
  font-size: 9px;
  line-height: 10px;
  font-weight: 600;
}
:is(#muteVoice, #stageMuteVoice, #mobileMuteVoice):is(
  [data-microphone-phase='permission'],
  [data-microphone-phase='requesting'],
  [data-microphone-phase='stopped']
) {
  color: var(--theme-accent);
  background: var(--ui-control);
}
#sidebar .voice-actions :is(#shareCamera, #shareScreen)[aria-pressed='true'],
:is(#stageShareCamera, #stageShareScreen)[aria-pressed='true'] {
  color: var(--theme-on-accent);
  background: var(--theme-accent);
}
#sidebar .voice-actions #callSettingsToggle[aria-expanded='true'],
#stageCallSettings[aria-expanded='true'] {
  background: var(--theme-selected);
  color: var(--theme-ink);
}
#sidebar .voice-actions #leaveVoice,
#stageLeaveVoice,
#mobileLeaveVoice {
  color: var(--theme-bad);
  background: var(--theme-bad-bg);
}
.voice-actions button:hover:not(:disabled),
.stage-call-controls button:hover:not(:disabled) {
  filter: brightness(0.96);
}
#chatWorkspace {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
#conversation {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
#callStage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 20px;
  gap: 12px;
  overflow: hidden;
}
.call-stage-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 44px;
}
.call-stage-heading > div:first-child {
  flex: 1;
  min-width: 0;
}
.call-stage-heading h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.call-stream-navigation {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
#callStreamCount {
  font-size: 11px;
  color: var(--theme-quiet);
  font-variant-numeric: tabular-nums;
}
#collapseCall,
.call-stream-navigation .compact-icon {
  width: 32px;
  min-width: 32px;
  height: 36px;
  min-height: 36px;
}
#expandCall {
  margin-inline-end: var(--sidebar-action-inset);
}
#callMedia {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}
#callStream {
  width: 100%;
  height: clamp(340px, 50dvh, 620px);
  margin-bottom: 14px;
}
#callStream:fullscreen {
  height: 100%;
  margin: 0;
}
.call-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 10px;
  align-content: start;
}
.call-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 170px;
  padding: 20px 14px 46px;
  background: var(--theme-card);
  border-radius: 10px;
}
.call-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 22px;
}
.call-tile.speaking {
  box-shadow: inset 0 0 0 2px var(--theme-ok);
}
.call-person-caption {
  position: absolute;
  inset: auto 12px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.call-person-name {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
}
.call-person-indicators {
  flex-shrink: 0;
}
.call-tile-actions {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  gap: 4px;
  z-index: 1;
}
.call-tile-actions .compact-icon {
  background: transparent;
  border: 0;
  padding: 4px;
  min-width: 28px;
  width: 28px;
  min-height: 32px;
  height: 32px;
}
.call-tile-actions .ui-icon {
  width: 15px;
  height: 15px;
}
.call-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--theme-back);
  border-radius: inherit;
}
.call-tile video.mirrored {
  transform: scaleX(-1);
}
.call-tile.has-video .call-avatar {
  display: none;
}
.call-tile.has-video .call-person-caption {
  background: var(--theme-surface);
  color: var(--theme-ink);
  border-radius: 6px;
  padding: 5px 8px;
}
.call-tile.has-video .call-tile-actions {
  background: var(--theme-surface);
  border-radius: 6px;
}
.call-video-retry {
  position: absolute;
  inset: 35% 12% auto;
  z-index: 2;
}
.has-focus .call-tile.focused {
  grid-column: 1 / -1;
  min-height: 280px;
}
.stage-call-controls {
  position: relative;
  order: 3;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}
.stage-call-controls .compact-icon {
  border: 0;
  background: var(--ui-control);
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 10px;
}
#stageAudioHint {
  min-height: 0;
  overflow: auto;
  margin: 0;
  color: var(--theme-quiet);
  line-height: 1.5;
}
#stageEnableAudio {
  flex-shrink: 0;
  align-self: center;
}
#stageCallFeedback {
  max-width: 420px;
  margin-inline: auto;
}
.call-expanded #chatWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 36%);
}
.call-expanded #conversation {
  border-left: 1px solid var(--ui-divider);
}
@media (min-width: 701px) {
  #chat {
    grid-template-columns: 236px minmax(0, 1fr);
  }
}
@media (min-width: 1100px) {
  #chat {
    grid-template-columns: 236px minmax(0, 1fr) 218px;
  }
  #chat:has(.call-expanded) {
    grid-template-columns: 236px minmax(0, 1fr);
  }
  #chat:has(.call-expanded) #peopleRail {
    display: none;
  }
  .call-expanded #peopleButton {
    display: inline-flex;
  }
}
@media (max-width: 1000px) {
  .call-expanded #chatWorkspace {
    display: flex;
    flex-direction: column;
  }
  .call-expanded #callStage {
    flex: 1;
  }
  .call-expanded #conversation {
    display: none;
  }
  .call-expanded #mobileCallStrip {
    display: none;
  }
}
@media (max-width: 700px) {
  #chat {
    padding: 0;
    gap: 0;
  }
  #content {
    border: 0;
    border-radius: 0;
  }
  #sidebar {
    border-radius: 0;
  }
  #sidebar .channel {
    min-height: 44px;
  }
  .chat-header {
    min-height: 56px;
  }
  #message {
    min-height: 44px;
    padding-block: 11px;
    font-size: 16px;
  }
  #callStage {
    padding: 10px;
    gap: 10px;
  }
  .call-stage-heading {
    gap: 5px;
  }
  .call-stage-heading h2 {
    font-size: 14px;
  }
  #collapseCall,
  .call-stream-navigation .compact-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  #callStream {
    height: max(340px, 48dvh);
  }
  .call-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .call-tile {
    min-height: 145px;
    padding-inline: 8px;
  }
  .call-avatar {
    width: 48px;
    height: 48px;
  }
  .stage-call-controls {
    gap: 5px;
  }
  #mobileCallStrip:not([hidden]) {
    padding: 4px;
    background: var(--theme-card);
    border-color: var(--ui-divider);
    gap: 4px;
  }
  #mobileCallLabel {
    font-size: 12px;
  }
  #mobileCallStrip #mobileCallOpen {
    min-width: 0;
    padding-inline: 5px;
  }
  #sidebar .voice-actions .compact-icon {
    min-height: 44px;
    height: 44px;
  }
  .stage-call-controls .compact-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
}
@media (pointer: coarse) {
  #sidebar .watch-screen-indicator,
  #onlineSection .watch-screen-indicator {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  #sidebar .voice-actions .compact-icon,
  .stage-call-controls .compact-icon,
  .call-tile-actions .compact-icon {
    min-height: 44px;
    height: 44px;
  }
  .call-tile-actions .compact-icon {
    min-width: 44px;
    width: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .voice-actions button,
  .stage-call-controls button {
    transition: none;
  }
}

/* The feedback panel stays above the dock without changing channel geometry. */
#sidebar #voiceStatus {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  overflow: visible;
}
#sidebar .call-toolbar {
  flex: 0 0 auto;
}
#sidebar:has(#voiceStatus:not([hidden])) nav,
#callMedia {
  padding-block-end: var(--call-feedback-clearance);
}
#sidebar:has(#voiceStatus:not([hidden]) #callFeedback:not([hidden])) nav,
#callStage:has(#stageCallFeedback:not([hidden])) #callMedia {
  scroll-padding-block-end: var(--call-feedback-clearance);
}
.call-feedback {
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% + 8px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: calc(var(--call-feedback-clearance) - 8px);
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--ui-divider);
  border-radius: 10px;
  background: var(--theme-surface);
  box-shadow: 0 4px 16px var(--theme-shade);
  overflow: hidden;
}
.call-feedback-messages {
  min-height: 0;
  overflow: auto;
}
.call-feedback-actions {
  display: grid;
  gap: 6px;
  flex-shrink: 0;
}
.call-feedback-messages:not(
  :has(.screen-hint:not([hidden]):not(:empty)[data-alert='true'], #transportHint:not([hidden]))
),
.call-feedback-actions:not(:has(button:not([hidden]))) {
  display: none;
}
.call-feedback > .call-health {
  flex-shrink: 0;
}
#sidebar .call-feedback .screen-hint {
  margin: 0;
}
.call-feedback .screen-hint + .screen-hint:not(:empty) {
  margin-top: 6px;
}

.call-health {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  min-height: 18px;
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 18px;
  color: var(--theme-quiet);
}
.call-health > .ui-icon {
  flex: none;
  width: 13px;
  height: 13px;
}
.call-health > .call-health-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-health[data-tone='good'] {
  color: var(--theme-ok);
}
.call-health[data-tone='warning'] {
  color: var(--theme-bad);
}
#callHealth[data-phase='connected'] {
  display: none;
}
#mobileCallOpen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 44px;
  padding-block: 4px;
}
#mobileCallLabel {
  width: 100%;
}
#mobileCallHealth {
  width: 100%;
  font-size: 10px;
  height: 14px;
  min-height: 14px;
  line-height: 14px;
}
#mobileCallHealth > .ui-icon {
  width: 11px;
  height: 11px;
}
#sidebar #voiceLabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sidebar .voice-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  gap: 4px;
}
.voice-channel-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  border-radius: 10px;
}
.voice-channel-heading:has(.channel.active) {
  background: var(--theme-selected);
}
.voice-channel-heading > .channel {
  flex: 1;
  min-width: 0;
}
.voice-call-details {
  display: grid;
  gap: 5px;
  margin: 4px 0 8px;
  padding-inline: 29px 4px;
}
#callParticipants:not(:has(li)) {
  display: none;
}
#sidebar #callParticipants #participants {
  padding: 0;
}
.voice-channel-preview {
  overflow: hidden;
}
.voice-channel-preview:empty,
.voice-channel-preview:has(.voice-occupancy[hidden] + .voice-preview-people:empty) {
  display: none;
}
.voice-channel-preview .voice-occupancy {
  line-height: 32px;
  margin: 0 10px 0 36px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.voice-channel-preview .voice-occupancy:not([hidden]) + .voice-preview-people {
  display: none;
}
.voice-preview-people {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 0 0 4px;
  padding: 0 0 0 29px;
  border: 0;
  min-width: 0;
}
#sidebar .voice-preview-people .person-row {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 36px;
  padding-block: 0;
  white-space: nowrap;
}
.voice-preview-people .person-copy strong {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}