/* Semantic interaction states load last so theme/accent layers cannot recolour them.
   Product accent is for branding; mute/deafen/offline/danger/success retain their own meaning. */

:root {
  --rift-state-danger:#f23f43;
  --rift-state-danger-bright:#ff7f84;
  --rift-state-danger-bg:#4b161b;
  --rift-state-danger-light-bg:#fde7e8;
  --rift-state-danger-light:#c42f38;
}

/* Current-user controls: mute/deafen and disabled activity sharing are semantic red states. */
#ui0212-user-controls button[data-r22='mute'].active,
#ui0212-user-controls button[data-r22='deafen'].active,
#ui0212-user-controls button[data-r22='activity'].activity-off,
.ui0212-user-controls button[data-r22='mute'].active,
.ui0212-user-controls button[data-r22='deafen'].active,
.ui0212-user-controls button[data-r22='activity'].activity-off {
  background:var(--rift-state-danger-bg) !important;
  color:var(--rift-state-danger-bright) !important;
  border-color:color-mix(in srgb,var(--rift-state-danger-bright),transparent 75%) !important;
  box-shadow:inset 0 0 0 1px rgba(255,127,132,.14) !important;
}

#ui0212-user-controls button[data-r22='mute'].active .ui0212-slash,
#ui0212-user-controls button[data-r22='deafen'].active .ui0212-slash,
.ui0212-user-controls button[data-r22='mute'].active .ui0212-slash,
.ui0212-user-controls button[data-r22='deafen'].active .ui0212-slash {
  background:currentColor !important;
  transform:rotate(-45deg) scaleX(1) !important;
}

#ui0212-user-controls button[data-r22='activity'].activity-off::after,
.ui0212-user-controls button[data-r22='activity'].activity-off::after {
  background:currentColor !important;
}

/* Voice-page mute state follows the same semantic language. */
.ui0212-call-btn[data-r22-call='mute'].active,
#r021-call-mute.active,
.r021-call-button.muted,
.r021-call-button[data-muted='true'] {
  background:var(--rift-state-danger-bg) !important;
  color:var(--rift-state-danger-bright) !important;
  border-color:color-mix(in srgb,var(--rift-state-danger-bright),transparent 72%) !important;
}

.ui0212-call-btn[data-r22-call='mute'].active .ui0212-slash,
#r021-call-mute.active .ui0212-slash {
  background:currentColor !important;
  transform:rotate(-45deg) scaleX(1) !important;
}

/* Disconnect/destructive controls are always danger red rather than the selected Rift accent. */
.ui0212-call-btn.leave,
.r021-call-button.disconnect,
.ui0212-vc-top-actions .leave,
.voice-connection-actions .danger,
[data-r22-vc='leave'] {
  color:#fff !important;
  background:var(--rift-state-danger) !important;
  border-color:var(--rift-state-danger) !important;
}

.ui0212-call-btn.leave:hover:not(:disabled),
.r021-call-button.disconnect:hover:not(:disabled),
.ui0212-vc-top-actions .leave:hover:not(:disabled),
.voice-connection-actions .danger:hover:not(:disabled),
[data-r22-vc='leave']:hover:not(:disabled) {
  background:#d83439 !important;
  border-color:#d83439 !important;
  color:#fff !important;
}

/* Light mode keeps the state obvious without introducing dark blocks. */
html[data-rift-effective-theme='light'] #ui0212-user-controls button[data-r22='mute'].active,
html[data-rift-effective-theme='light'] #ui0212-user-controls button[data-r22='deafen'].active,
html[data-rift-effective-theme='light'] #ui0212-user-controls button[data-r22='activity'].activity-off,
html[data-rift-effective-theme='light'] .ui0212-user-controls button[data-r22='mute'].active,
html[data-rift-effective-theme='light'] .ui0212-user-controls button[data-r22='deafen'].active,
html[data-rift-effective-theme='light'] .ui0212-user-controls button[data-r22='activity'].activity-off,
html[data-rift-effective-theme='light'] .ui0212-call-btn[data-r22-call='mute'].active,
html[data-rift-effective-theme='light'] #r021-call-mute.active {
  background:var(--rift-state-danger-light-bg) !important;
  color:var(--rift-state-danger-light) !important;
  border-color:#efb9bd !important;
  box-shadow:inset 0 0 0 1px rgba(196,47,56,.08) !important;
}

/* Presence remains semantic too, regardless of the selected accent. */
:is(.presence-dot,.dm-presence-dot,.self-presence-dot,.profile-presence,.r021-profile-presence,.ui0212-presence,.ui0213-head-presence,.rift-server-profile-presence,.rift-full-profile-presence):is(.online,.presence-online,.ui0212-online) {
  background:#23a55a !important;
}
:is(.presence-dot,.dm-presence-dot,.self-presence-dot,.profile-presence,.r021-profile-presence,.ui0212-presence,.ui0213-head-presence,.rift-server-profile-presence,.rift-full-profile-presence):is(.idle,.presence-idle,.ui0212-idle) {
  background:#f0b232 !important;
}
:is(.presence-dot,.dm-presence-dot,.self-presence-dot,.profile-presence,.r021-profile-presence,.ui0212-presence,.ui0213-head-presence,.rift-server-profile-presence,.rift-full-profile-presence):is(.dnd,.presence-dnd,.ui0212-dnd) {
  background:#f23f43 !important;
}