/* REDNexus CSS bundle: app.css + rednexus-design-v1..v62 in historical load order. */
/* Source layers remain in rednexus-design-v*.css. New overrides go in this file. */

/* ===== app.css ===== */
:root {
  --bg-0: #0f1013;
  --bg-1: #15171b;
  --bg-2: #191b20;
  --bg-3: #202228;
  --bg-4: #292c33;
  --line: #30333a;
  --text: #f1f3f5;
  --muted: #9399a5;
  --red: #df3438;
  --red-dark: #9f272b;
  --green: #43d16d;
  --yellow: #e4b74d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-width: 320px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

button, input { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

.hidden { display: none !important; }

.mobile-only { display: none; }

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(223,52,56,.14), transparent 34%),
    radial-gradient(circle at 80% 80%, rgba(223,52,56,.08), transparent 35%),
    #0f1013;
}

.login-card {
  width: min(430px, 100%);
  padding: 30px;
  border: 1px solid #343840;
  border-radius: 18px;
  background: #181a1f;
  box-shadow: 0 28px 80px rgba(0,0,0,.42);
}

.brand {
  font-weight: 800;
  letter-spacing: -.6px;
}

.brand span { color: var(--red); }

.brand-large {
  font-size: 38px;
  margin-bottom: 4px;
}

.login-subtitle {
  margin-bottom: 24px;
  color: var(--muted);
}

.login-card label {
  display: block;
  margin-bottom: 7px;
  color: #b9bec7;
  font-size: 13px;
  font-weight: 700;
}

.login-card input {
  width: 100%;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #3a3e47;
  border-radius: 10px;
  outline: none;
  background: #111318;
  color: white;
}

.login-card input:focus { border-color: var(--red); }

.password-field {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}

.password-field input {
  margin-bottom: 0;
  padding-right: 46px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8b929c;
  cursor: pointer;
  transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: #edf0f3;
  background: rgba(255, 255, 255, .06);
  outline: none;
}

.password-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
}

.password-toggle .icon-eye-off {
  display: none;
}

.password-toggle.is-visible .icon-eye {
  display: none;
}

.password-toggle.is-visible .icon-eye-off {
  display: block;
}

.login-hint {
  margin-top: 13px;
  color: #7f8692;
  font-size: 12px;
  line-height: 1.45;
}

.btn {
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  color: white;
  cursor: pointer;
  font-weight: 700;
}

.btn:disabled {
  opacity: .45;
  cursor: default;
}

.btn-primary {
  background: var(--red);
}

.btn-primary:not(:disabled):hover {
  background: #ef3d42;
}

.login-card .btn { width: 100%; }

.app-shell {
  display: grid;
  grid-template-columns: 72px 260px minmax(0, 1fr) 250px;
  width: 100vw;
  height: 100vh;
}

.server-rail {
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 12px 10px;
  background: #101115;
  border-right: 1px solid #25282e;
}

.server-logo,
.server-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  color: white;
  cursor: pointer;
  transition: .15s ease;
}

.server-logo {
  border-radius: 15px;
  background: var(--red);
  font-size: 18px;
  font-weight: 800;
}

.server-icon {
  border-radius: 50%;
  background: #292c33;
  font-size: 13px;
  font-weight: 700;
}

.server-icon:hover,
.server-icon.active {
  border-radius: 15px;
  background: var(--red);
}

.server-icon.add {
  font-size: 23px;
  font-weight: 400;
}

.rail-separator {
  width: 34px;
  height: 1px;
  background: #30333a;
}

.channel-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #191b20;
  border-right: 1px solid #2b2e35;
}

.server-header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid #2d3037;
}

.server-name {
  font-weight: 800;
  font-size: 15px;
}

.server-code {
  margin-top: 3px;
  color: #747b87;
  font-size: 11px;
}

.channel-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px 18px;
}

.section-label {
  margin: 16px 7px 7px;
  color: #7f8793;
  font-size: 11px;
  font-weight: 800;
}

.channel {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #b5bbc5;
  cursor: pointer;
  text-align: left;
}

.channel:hover { background: #25282e; color: white; }

.channel.active {
  background: #30343c;
  color: white;
}

.channel.connected::after {
  content: "LIVE";
  margin-left: auto;
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
}

.sidebar-room-users {
  padding: 2px 0 5px 30px;
}

.sidebar-user {
  padding: 4px 5px;
  overflow: hidden;
  color: #9da4af;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user.speaking {
  color: #6de08b;
}

.user-panel {
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) repeat(3, 34px);
  align-items: center;
  gap: 7px;
  padding: 9px;
  border-top: 1px solid #2b2e35;
  background: #15171b;
}

.avatar,
.person-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #393d45;
  color: white;
  font-weight: 800;
}

.avatar {
  width: 38px;
  height: 38px;
  background: var(--red);
}

.user-meta { min-width: 0; }

.user-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-state {
  margin-top: 3px;
  overflow: hidden;
  color: #818894;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-state.connected { color: var(--green); }
.connection-state.connecting { color: var(--yellow); }
.connection-state.disconnected { color: #818894; }
.connection-state.error { color: #ff7074; }

.control-btn,
.icon-btn {
  border: 0;
  border-radius: 8px;
  background: #2a2d34;
  color: white;
  cursor: pointer;
}

.control-btn {
  width: 34px;
  height: 34px;
}

.control-btn:disabled {
  opacity: .35;
  cursor: default;
}

.control-btn.active {
  background: var(--red-dark);
}

.control-btn.leave:not(:disabled):hover { background: var(--red-dark); }

.icon-btn {
  min-width: 36px;
  height: 36px;
  font-size: 20px;
}

.main-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #202228;
}

.topbar {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid #30333a;
  background: #1e2025;
}

.topbar-title {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-status {
  margin-left: auto;
  color: #737b87;
  font-size: 11px;
}

.content-view {
  flex: 1;
  overflow-y: auto;
  padding: 26px;
}

.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}

.eyebrow {
  margin-bottom: 6px;
  color: #808894;
  font-size: 11px;
  font-weight: 800;
}

.hero h1 {
  margin: 0;
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: -.7px;
}

.hero p {
  max-width: 720px;
  margin: 8px 0 0;
  color: #969da8;
  line-height: 1.5;
}

.voice-stage,
.placeholder-card {
  width: min(760px, 100%);
  padding: 16px;
  border: 1px solid #343840;
  border-radius: 14px;
  background: #181a1f;
}

.stage-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  color: #8a929e;
  font-size: 11px;
  font-weight: 800;
}

.voice-grid {
  display: grid;
  gap: 9px;
}

.voice-person {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: #24272d;
  transition: .12s ease;
}

.voice-person.speaking {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(67,209,109,.7), 0 0 20px rgba(67,209,109,.08);
}

.person-avatar {
  width: 42px;
  height: 42px;
}

.person-name {
  overflow: hidden;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-state {
  color: #818894;
  font-size: 12px;
}

.voice-person.speaking .person-state {
  color: var(--green);
}

.empty-state,
.member-empty {
  padding: 18px 10px;
  color: #777f8b;
  font-size: 13px;
}

.notice {
  width: min(760px, 100%);
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #4b3b23;
  border-radius: 10px;
  background: #2d2619;
  color: #efc875;
  font-size: 13px;
  line-height: 1.45;
}

.notice.error {
  border-color: #5a292b;
  background: #2f1d1f;
  color: #ff898c;
}

.placeholder-card {
  text-align: center;
  padding: 48px 24px;
}

.placeholder-icon { font-size: 40px; }
.placeholder-title { margin-top: 14px; font-weight: 800; }
.placeholder-text { margin-top: 7px; color: #868e99; }

.member-panel {
  overflow-y: auto;
  padding: 18px 12px;
  border-left: 1px solid #2b2e35;
  background: #191b20;
}

.member-heading {
  margin-bottom: 10px;
  color: #7f8793;
  font-size: 11px;
  font-weight: 800;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border-radius: 8px;
  color: #bdc2ca;
}

.member-item.speaking {
  color: #79e397;
  background: #202b24;
}

.member-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #59606b;
}

.member-item.speaking .member-dot,
.member-item.local .member-dot {
  background: var(--green);
}

.remote-audio {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1020px) {
  .app-shell {
    grid-template-columns: 72px 250px minmax(0, 1fr);
  }
  .member-panel { display: none; }
}

@media (max-width: 720px) {
  .mobile-only { display: inline-grid; place-items: center; }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .server-rail,
  .member-panel {
    display: none;
  }

  .channel-sidebar {
    position: fixed;
    z-index: 50;
    inset: 0 auto 0 0;
    width: min(84vw, 300px);
    transform: translateX(-105%);
    box-shadow: 20px 0 60px rgba(0,0,0,.4);
    transition: transform .18s ease;
  }

  .channel-sidebar.open { transform: translateX(0); }

  .topbar { padding: 0 13px; }
  .content-view { padding: 18px 14px 100px; }

  .hero {
    flex-direction: column;
    align-items: stretch;
  }

  .hero .btn { width: 100%; }

  .voice-person {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .person-state {
    grid-column: 2;
    margin-top: -8px;
  }

  .user-panel {
    padding-bottom: max(9px, env(safe-area-inset-bottom));
  }
}


/* v0.2-test-dev.05 — authentication */

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 20px 0 18px;
  padding: 4px;
  border-radius: 10px;
  background: #111318;
}

.auth-tab {
  border: 0;
  border-radius: 7px;
  padding: 10px 12px;
  background: transparent;
  color: #8e95a0;
  cursor: pointer;
  font-weight: 750;
}

.auth-tab.active {
  background: #2a2d34;
  color: white;
}

.auth-form {
  display: grid;
  gap: 10px;
}

.auth-form .btn {
  margin-top: 4px;
}

.auth-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #5a292b;
  border-radius: 9px;
  background: #2f1d1f;
  color: #ff898c;
  font-size: 12px;
  line-height: 1.4;
}

.auth-success {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #245b34;
  border-radius: 9px;
  background: #17291d;
  color: #7be399;
  font-size: 12px;
}

.user-panel {
  grid-template-columns: 38px minmax(0, 1fr) repeat(5, 34px);
}

.logout-btn:not(:disabled):hover {
  background: #593034;
}

@media (max-width: 390px) {
  .user-panel {
    grid-template-columns: 36px minmax(0, 1fr) repeat(5, 31px);
    gap: 5px;
  }

  .control-btn {
    width: 31px;
    height: 31px;
  }
}


/* v0.2-test-dev.06 — text chat */

.text-view {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 16px;
}

.text-channel-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #30333a;
}

.text-channel-header h1 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
}

.text-socket-state {
  padding: 7px 10px;
  border-radius: 999px;
  background: #25282e;
  color: #9097a2;
  font-size: 11px;
  font-weight: 800;
}

.text-socket-state.connected {
  background: #182a1e;
  color: #68dc87;
}

.text-socket-state.connecting {
  background: #2d2619;
  color: #efc875;
}

.message-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 2px 18px 0;
  scroll-behavior: auto;
}

.message-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  padding: 8px 10px;
  border-radius: 10px;
}

.message-row:hover {
  background: rgba(255,255,255,.025);
}

.message-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #343840;
  color: white;
  font-weight: 850;
}

.message-body {
  min-width: 0;
}

.message-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.message-author {
  font-weight: 800;
  color: #f1f3f5;
}

.message-time {
  color: #707783;
  font-size: 11px;
}

.message-content {
  margin-top: 3px;
  color: #cfd3da;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-row.own .message-avatar {
  background: var(--red);
}

.message-composer {
  flex: 0 0 auto;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #343840;
  border-radius: 14px;
  background: #181a1f;
}

.message-composer textarea {
  width: 100%;
  min-height: 48px;
  max-height: 180px;
  resize: none;
  overflow-y: auto;
  border: 0;
  outline: none;
  padding: 10px 12px;
  border-radius: 10px;
  background: #111318;
  color: white;
  line-height: 1.4;
}

.message-composer textarea:disabled {
  opacity: .55;
}

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 8px 2px 0;
}

.message-counter {
  margin-right: auto;
  color: #747b87;
  font-size: 11px;
}

@media (max-width: 720px) {
  .text-view {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .text-channel-header {
    align-items: flex-start;
  }

  .message-row {
    grid-template-columns: 36px minmax(0, 1fr);
    padding-left: 4px;
    padding-right: 4px;
  }

  .message-avatar {
    width: 36px;
    height: 36px;
  }

  .message-composer {
    margin-bottom: 0;
  }
}


/* v0.2-test-dev.06.2 — iOS visual viewport anchoring */

:root {
  --rv-vv-height: 100dvh;
  --rv-vv-width: 100vw;
  --rv-vv-top: 0px;
  --rv-vv-left: 0px;
}

.main-panel,
.content-view,
.text-view,
.message-list {
  min-height: 0;
}

.text-view {
  overscroll-behavior: contain;
}

.message-composer {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  html,
  body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  /*
    На iOS браузер при открытии клавиатуры может сдвигать visual viewport,
    даже если layout viewport остаётся на месте. Поэтому приложение не просто
    уменьшается по высоте: мы ещё привязываем его к offsetTop/offsetLeft
    фактически видимой области.
  */
  .app-shell {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--rv-vv-width, 100vw);
    height: var(--rv-vv-height, 100dvh);
    max-width: var(--rv-vv-width, 100vw);
    max-height: var(--rv-vv-height, 100dvh);
    transform: translate3d(
      var(--rv-vv-left, 0px),
      var(--rv-vv-top, 0px),
      0
    );
    overflow: hidden;
  }

  .main-panel {
    height: 100%;
    min-height: 0;
  }

  .text-view {
    height: 100%;
    min-height: 0;
    padding: 12px 10px max(10px, env(safe-area-inset-bottom));
  }

  .text-channel-header {
    flex: 0 0 auto;
    padding-bottom: 10px;
  }

  .message-list {
    flex: 1 1 0;
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 8px;
  }

  .message-composer {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    border-radius: 12px;
    background: #181a1f;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .28);
  }

  /*
    16px минимум: iOS не должен автоматически увеличивать страницу
    при фокусе на textarea.
  */
  .message-composer textarea {
    min-height: 44px;
    max-height: 120px;
    padding: 9px 10px;
    font-size: 16px;
    line-height: 1.35;
  }

  .composer-actions {
    min-height: 42px;
    padding-top: 6px;
    gap: 8px;
  }

  .composer-actions .btn {
    flex: 0 0 auto;
    min-width: 112px;
    min-height: 38px;
    padding: 9px 14px;
  }

  .message-counter {
    min-width: 0;
  }
}


/* v0.2-test-dev.07 — message edit/delete */
.message-meta {
  position: relative;
}

.message-edited {
  color: #747b87;
  font-size: 10px;
}

.message-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .12s ease;
}

.message-row.own:hover .message-actions,
.message-row.own:focus-within .message-actions {
  opacity: 1;
}

.message-action-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #353942;
  border-radius: 7px;
  background: #22252b;
  color: #aeb4be;
  cursor: pointer;
  line-height: 1;
}

.message-action-btn:hover {
  color: white;
  border-color: #50545e;
  background: #2b2f36;
}

.message-action-btn.delete:hover {
  color: #ff8589;
  border-color: #643033;
  background: #321e20;
}

.message-edit-box {
  width: 100%;
  min-height: 72px;
  max-height: 180px;
  resize: vertical;
  margin-top: 6px;
  padding: 10px 11px;
  border: 1px solid #444953;
  border-radius: 9px;
  outline: none;
  background: #111318;
  color: white;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
}

.message-edit-box:focus {
  border-color: var(--red);
}

.message-edit-controls {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 7px;
}

.message-edit-controls button {
  border: 0;
  border-radius: 7px;
  padding: 7px 11px;
  cursor: pointer;
  font-weight: 750;
}

.message-edit-cancel {
  background: #2a2d34;
  color: #d3d7dd;
}

.message-edit-save {
  background: var(--red);
  color: white;
}

@media (max-width: 720px) {
  .message-actions {
    opacity: 1;
    gap: 3px;
  }

  .message-action-btn {
    width: 30px;
    height: 30px;
  }
}


/* v0.2-test-dev.07.1 — unified composer edit mode */

.composer-edit-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--red);
  border-radius: 8px;
  background: #21191b;
}

.composer-edit-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.composer-edit-label {
  color: #ff7277;
  font-size: 11px;
  font-weight: 850;
}

.composer-edit-preview {
  max-width: 100%;
  overflow: hidden;
  color: #aeb4be;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-edit-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 0;
  border-radius: 7px;
  background: #30262a;
  color: #c7cbd2;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.composer-edit-close:hover {
  background: #4a292d;
  color: white;
}

.message-composer.editing {
  border-color: #6d292d;
  box-shadow: 0 0 0 1px rgba(223, 52, 56, .12);
}

.message-composer.editing textarea {
  border: 1px solid rgba(223, 52, 56, .55);
}

.message-composer.editing #sendMessageBtn {
  background: #d63438;
}

/*
  Inline editor from .07 is no longer used. Keep the classes harmless
  for rollback compatibility, but never show them if a stale DOM node exists.
*/
.message-edit-box,
.message-edit-controls {
  display: none !important;
}

@media (max-width: 720px) {
  .composer-edit-mode {
    margin-bottom: 6px;
    padding: 7px 8px;
  }

  .composer-edit-preview {
    max-width: calc(100vw - 110px);
  }
}


/* v0.2-test-dev.07.2 — mobile edit anchoring + landscape touch layout */

.message-row.editing-target {
  background: rgba(223, 52, 56, .08);
  box-shadow: inset 3px 0 0 var(--red);
}

/*
  Телефон в landscape может иметь CSS-ширину > 720px.
  Поэтому "мобильный" layout выбираем ещё и по touch input,
  а не только по ширине экрана.
*/
@media (hover: none) and (pointer: coarse) {
  .mobile-only {
    display: inline-grid;
    place-items: center;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .server-rail,
  .member-panel {
    display: none;
  }

  .channel-sidebar {
    position: fixed;
    z-index: 50;
    inset: 0 auto 0 0;
    width: min(84vw, 300px);
    transform: translateX(-105%);
    box-shadow: 20px 0 60px rgba(0,0,0,.4);
    transition: transform .18s ease;
  }

  .channel-sidebar.open {
    transform: translateX(0);
  }

  html,
  body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .app-shell {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--rv-vv-width, 100vw);
    height: var(--rv-vv-height, 100dvh);
    max-width: var(--rv-vv-width, 100vw);
    max-height: var(--rv-vv-height, 100dvh);
    transform: translate3d(
      var(--rv-vv-left, 0px),
      var(--rv-vv-top, 0px),
      0
    );
    overflow: hidden;
  }

  .main-panel {
    height: 100%;
    min-height: 0;
  }

  .topbar {
    flex: 0 0 auto;
    padding: 0 12px;
  }

  .content-view {
    min-height: 0;
  }

  .text-view {
    height: 100%;
    min-height: 0;
    padding: 12px 10px max(10px, env(safe-area-inset-bottom));
  }

  .text-channel-header {
    flex: 0 0 auto;
    align-items: flex-start;
    padding-bottom: 10px;
  }

  .message-list {
    flex: 1 1 0;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 8px;
  }

  .message-row {
    grid-template-columns: 36px minmax(0, 1fr);
    padding-left: 4px;
    padding-right: 4px;
  }

  .message-avatar {
    width: 36px;
    height: 36px;
  }

  .message-actions {
    opacity: 1;
    gap: 3px;
  }

  .message-action-btn {
    width: 30px;
    height: 30px;
  }

  .message-composer {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    border-radius: 12px;
    background: #181a1f;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .28);
  }

  .message-composer textarea {
    min-height: 44px;
    max-height: 120px;
    padding: 9px 10px;
    font-size: 16px;
    line-height: 1.35;
  }

  .composer-actions {
    min-height: 42px;
    padding-top: 6px;
    gap: 8px;
  }

  .composer-actions .btn {
    flex: 0 0 auto;
    min-width: 112px;
    min-height: 38px;
    padding: 9px 14px;
  }

  .composer-edit-mode {
    margin-bottom: 6px;
    padding: 7px 8px;
  }

  .composer-edit-preview {
    max-width: calc(100vw - 110px);
  }
}

/*
  Когда экранная клавиатура реально открыта, особенно в landscape,
  отдаём максимум места истории и composer.
*/
@media (hover: none) and (pointer: coarse) {
  html.rv-keyboard-open .topbar {
    min-height: 44px;
    height: 44px;
  }

  html.rv-keyboard-open .topbar-status {
    display: none;
  }

  html.rv-keyboard-open .text-channel-header {
    display: none;
  }

  html.rv-keyboard-open .text-view {
    padding-top: 6px;
  }

  html.rv-keyboard-open .message-list {
    padding-top: 4px;
  }

  html.rv-keyboard-open .message-composer {
    padding-top: 6px;
  }
}

/* Landscape phone: ещё компактнее, чтобы чат не исчезал за клавиатурой. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .topbar {
    min-height: 48px;
    height: 48px;
  }

  .text-channel-header {
    padding-bottom: 6px;
  }

  .text-channel-header h1 {
    font-size: 22px;
  }

  .text-view {
    padding-top: 8px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }

  .message-composer textarea {
    min-height: 40px;
    max-height: 80px;
  }

  .composer-actions {
    min-height: 36px;
  }

  .composer-actions .btn {
    min-height: 34px;
  }
}


/* v0.2-test-dev.07.3 — compact landscape keyboard mode */

/*
  На iPhone в landscape системная клавиатура + панель браузера оставляют
  очень мало вертикального места. В этом режиме REDNexus превращает composer
  в одну компактную строку и отдаёт максимум места истории сообщений.
*/
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html.rv-keyboard-open .topbar {
    display: none;
  }

  html.rv-keyboard-open .text-view {
    padding: 3px 6px max(3px, env(safe-area-inset-bottom));
  }

  html.rv-keyboard-open .message-list {
    padding: 0 2px 3px 0;
  }

  html.rv-keyboard-open .message-row {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px;
    padding: 3px 5px;
  }

  html.rv-keyboard-open .message-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  html.rv-keyboard-open .message-meta {
    gap: 6px;
  }

  html.rv-keyboard-open .message-author {
    font-size: 13px;
  }

  html.rv-keyboard-open .message-time,
  html.rv-keyboard-open .message-edited {
    font-size: 9px;
  }

  html.rv-keyboard-open .message-content {
    margin-top: 0;
    font-size: 13px;
    line-height: 1.25;
  }

  html.rv-keyboard-open .message-actions {
    display: none;
  }

  html.rv-keyboard-open .message-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 9px;
    box-shadow: 0 -6px 18px rgba(0,0,0,.24);
  }

  html.rv-keyboard-open .composer-edit-mode {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    padding: 3px 6px;
    min-height: 22px;
    border-radius: 6px;
  }

  html.rv-keyboard-open .composer-edit-label {
    font-size: 9px;
  }

  html.rv-keyboard-open .composer-edit-preview {
    display: none;
  }

  html.rv-keyboard-open .composer-edit-close {
    width: 22px;
    height: 22px;
    font-size: 16px;
  }

  html.rv-keyboard-open .message-composer textarea {
    grid-column: 1;
    min-height: 38px;
    height: 38px;
    max-height: 56px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.2;
  }

  html.rv-keyboard-open .composer-actions {
    grid-column: 2;
    min-height: 0;
    padding: 0;
    gap: 0;
  }

  html.rv-keyboard-open .message-counter {
    display: none;
  }

  html.rv-keyboard-open .composer-actions .btn {
    min-width: 92px;
    width: 92px;
    min-height: 38px;
    height: 38px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
  }
}


/* v0.2-test-dev.07.4 — mobile landscape recommendation notice */

.landscape-notice {
  position: fixed;
  z-index: 120;
  left: 50%;
  top: max(12px, env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(92vw, 560px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(223, 52, 56, .55);
  border-radius: 12px;
  background: rgba(25, 18, 20, .96);
  box-shadow: 0 14px 40px rgba(0,0,0,.38);
  backdrop-filter: blur(8px);
}

.landscape-notice-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(223, 52, 56, .14);
  color: #ff666b;
  font-size: 20px;
  font-weight: 900;
}

.landscape-notice-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.landscape-notice-text strong {
  color: #fff;
  font-size: 13px;
}

.landscape-notice-text span {
  color: #aab0b9;
  font-size: 11px;
  line-height: 1.35;
}

.landscape-notice-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  background: #30262a;
  color: #cfd3da;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

/* In landscape + open keyboard, keep the warning very compact. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .landscape-notice {
    top: max(6px, env(safe-area-inset-top));
    width: min(96vw, 760px);
    padding: 7px 9px;
    border-radius: 9px;
  }

  .landscape-notice-icon {
    width: 28px;
    height: 28px;
    font-size: 17px;
  }

  .landscape-notice-text strong {
    font-size: 12px;
  }

  .landscape-notice-text span {
    font-size: 10px;
  }

  .landscape-notice-close {
    width: 26px;
    height: 26px;
    font-size: 18px;
  }
}


/* v0.2-test-dev.08 — message reactions */

.message-row:hover .message-actions,
.message-row:focus-within .message-actions {
  opacity: 1;
}

.message-action-btn.reaction {
  font-size: 16px;
}

.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid #363a43;
  border-radius: 999px;
  background: #22252b;
  color: #c9cdd4;
  cursor: pointer;
}

.reaction-chip:hover {
  border-color: #555b66;
  background: #292d34;
}

.reaction-chip.mine {
  border-color: rgba(223, 52, 56, .8);
  background: rgba(223, 52, 56, .12);
  color: #fff;
}

.reaction-emoji {
  font-size: 15px;
  line-height: 1;
}

.reaction-count {
  font-size: 11px;
  font-weight: 800;
}

.reaction-picker {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  margin-top: 6px;
  padding: 5px;
  border: 1px solid #383c45;
  border-radius: 10px;
  background: #181a1f;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.reaction-picker-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
}

.reaction-picker-btn:hover,
.reaction-picker-btn:focus {
  outline: none;
  background: #2a2e35;
}

@media (hover: none) and (pointer: coarse) {
  .message-actions {
    opacity: 1;
  }

  .reaction-chip {
    min-height: 30px;
    padding: 4px 8px;
  }

  .reaction-picker {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .reaction-picker-btn {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html.rv-keyboard-open .message-reactions,
  html.rv-keyboard-open .reaction-picker {
    display: none !important;
  }
}


/* v0.2-test-dev.09 — replies */

.composer-reply-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 8px;
  padding: 8px 10px;
  border-left: 3px solid #5e83ff;
  border-radius: 8px;
  background: #171d2b;
}

.composer-reply-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.composer-reply-label {
  color: #8da8ff;
  font-size: 11px;
  font-weight: 850;
}

.composer-reply-preview {
  max-width: 100%;
  overflow: hidden;
  color: #aeb4be;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-reply-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 0;
  border-radius: 7px;
  background: #252d40;
  color: #cbd5ff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.message-composer.replying:not(.editing) {
  border-color: #344a83;
  box-shadow: 0 0 0 1px rgba(94, 131, 255, .10);
}

.message-action-btn.reply {
  font-size: 17px;
}

.message-reply-reference {
  max-width: min(620px, 100%);
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 3px 0 6px;
  padding: 5px 8px;
  border: 0;
  border-left: 2px solid #526da9;
  border-radius: 5px;
  background: rgba(82, 109, 169, .08);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.message-reply-reference:hover {
  background: rgba(82, 109, 169, .15);
}

.message-reply-reference.deleted {
  border-left-color: #555b65;
  background: rgba(255,255,255,.025);
  cursor: default;
}

.message-reply-author {
  flex: 0 0 auto;
  max-width: 160px;
  overflow: hidden;
  color: #91aaff;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-reply-reference.deleted .message-reply-author {
  color: #777f8b;
}

.message-reply-preview {
  min-width: 0;
  overflow: hidden;
  color: #8f97a4;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-row.reply-target-flash {
  animation: rv-reply-target 1.5s ease-out;
}

@keyframes rv-reply-target {
  0%, 30% {
    background: rgba(94, 131, 255, .20);
    box-shadow: inset 3px 0 0 #6f91ff;
  }
  100% {
    background: transparent;
    box-shadow: inset 3px 0 0 transparent;
  }
}

@media (hover: none) and (pointer: coarse) {
  .composer-reply-mode {
    margin-bottom: 6px;
    padding: 7px 8px;
  }

  .composer-reply-preview {
    max-width: calc(100vw - 110px);
  }

  .message-reply-reference {
    max-width: 100%;
  }

  .message-reply-author {
    max-width: 105px;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html.rv-keyboard-open .composer-reply-mode {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    padding: 3px 6px;
    min-height: 22px;
    border-radius: 6px;
  }

  html.rv-keyboard-open .composer-reply-label {
    font-size: 9px;
  }

  html.rv-keyboard-open .composer-reply-preview {
    display: none;
  }

  html.rv-keyboard-open .composer-reply-close {
    width: 22px;
    height: 22px;
    font-size: 16px;
  }
}


/* v0.2-test-dev.10 — attachments / images / files */

.composer-attach-btn {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #353941;
  border-radius: 8px;
  background: #23262c;
  color: #c7ccd4;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.composer-attach-btn:hover:not(:disabled) {
  border-color: #555c68;
  background: #2b2f36;
  color: white;
}

.composer-attach-btn:disabled {
  opacity: .45;
  cursor: default;
}

.pending-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
  margin-bottom: 7px;
}

.pending-attachment {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid #343942;
  border-radius: 9px;
  background: #202329;
}

.pending-attachment-image,
.pending-attachment-icon {
  width: 38px;
  height: 38px;
  border-radius: 7px;
}

.pending-attachment-image {
  object-fit: cover;
  background: #111318;
}

.pending-attachment-icon {
  display: grid;
  place-items: center;
  background: #292d34;
  font-size: 18px;
}

.pending-attachment-info {
  min-width: 0;
}

.pending-attachment-name {
  overflow: hidden;
  color: #e3e6eb;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-attachment-size {
  margin-top: 2px;
  color: #858d99;
  font-size: 9px;
}

.pending-attachment-remove {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: #31262a;
  color: #d4b5b8;
  cursor: pointer;
  font-size: 18px;
}

.message-attachments {
  display: grid;
  gap: 7px;
  max-width: 620px;
  margin-top: 7px;
}

.attachment-image-button {
  position: relative;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  border: 1px solid #343942;
  border-radius: 10px;
  background: #15171b;
  cursor: zoom-in;
}

.attachment-image-button:disabled {
  cursor: default;
}

.attachment-image {
  display: block;
  width: auto;
  max-width: min(520px, 100%);
  max-height: 360px;
  object-fit: contain;
  background: #111318;
}

.attachment-image.loading {
  width: min(420px, 70vw);
  height: 180px;
  opacity: .35;
}

.attachment-image-meta {
  position: absolute;
  right: 6px;
  bottom: 6px;
  max-width: calc(100% - 12px);
  overflow: hidden;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,.68);
  color: #e7e9ed;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-image-error {
  min-width: 220px;
  min-height: 80px;
}

.attachment-file-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  max-width: 520px;
  padding: 8px 9px;
  border: 1px solid #343942;
  border-radius: 10px;
  background: #202329;
}

.attachment-file-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #292d34;
  font-size: 18px;
}

.attachment-file-info {
  min-width: 0;
}

.attachment-file-name {
  overflow: hidden;
  color: #e2e5ea;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-file-size {
  margin-top: 2px;
  color: #858d99;
  font-size: 10px;
}

.attachment-download-btn {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #414650;
  border-radius: 8px;
  background: #292d34;
  color: #d9dde3;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}

.attachment-download-btn:hover:not(:disabled) {
  border-color: #616977;
  background: #333840;
}

.text-view.dragging-files::after {
  content: 'Отпустите файлы, чтобы прикрепить';
  position: absolute;
  z-index: 20;
  inset: 12px;
  display: grid;
  place-items: center;
  border: 2px dashed #8b3c40;
  border-radius: 14px;
  background: rgba(15, 16, 20, .88);
  color: #f0d7d9;
  font-size: 15px;
  font-weight: 850;
  pointer-events: none;
}

.image-lightbox {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: rgba(3, 4, 6, .94);
  backdrop-filter: blur(7px);
}

.image-lightbox img {
  max-width: 96vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
}

.image-lightbox-close {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  border: 1px solid #4b4f57;
  border-radius: 10px;
  background: rgba(30, 32, 37, .9);
  color: white;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}

.image-lightbox-name {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: 80vw;
  overflow: hidden;
  color: #b9bec6;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: none) and (pointer: coarse) {
  .composer-attach-btn {
    min-width: 46px;
    min-height: 38px;
    padding: 7px 9px;
  }

  .composer-attach-btn span {
    display: none;
  }

  .pending-attachments {
    grid-template-columns: 1fr;
    max-height: 118px;
    overflow-y: auto;
  }

  .message-attachments,
  .attachment-file-card {
    max-width: 100%;
  }

  .attachment-image {
    max-width: 100%;
    max-height: 320px;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html.rv-keyboard-open .pending-attachments {
    display: none;
  }

  html.rv-keyboard-open .composer-attach-btn {
    display: none;
  }
}


/* v0.2-test-dev.11 — unread messages + @mentions */

.text-channel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.channel-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-unread-badge {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #4b505a;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.channel-unread-badge.mention {
  background: #d6383e;
  box-shadow: 0 0 0 2px rgba(214, 56, 62, .13);
}

.text-channel.has-unread .channel-label {
  color: #f1f2f4;
  font-weight: 800;
}

.text-channel.has-mention .channel-label {
  color: #fff;
}

.server-icon {
  position: relative;
}

.server-unread-badge {
  position: absolute;
  right: -4px;
  top: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #555b66;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px #111318;
}

.server-unread-badge.mention {
  background: #d6383e;
}

.unread-separator {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
  color: #e45157;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.unread-separator::before,
.unread-separator::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: rgba(228, 81, 87, .45);
}

.unread-separator span {
  flex: 0 0 auto;
}

.message-mention {
  display: inline;
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(93, 120, 190, .18);
  color: #9eb4f2;
  font-weight: 750;
}

.message-mention.mine {
  background: rgba(214, 56, 62, .20);
  color: #ff868b;
}

.message-row.mentioned-me {
  background: rgba(214, 56, 62, .045);
  box-shadow: inset 2px 0 0 rgba(214, 56, 62, .48);
}

.message-composer {
  position: relative;
}

.mention-suggestions {
  position: absolute;
  z-index: 80;
  left: 10px;
  right: 10px;
  bottom: calc(100% - 6px);
  max-height: 250px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid #3a3f49;
  border-radius: 10px;
  background: #181b20;
  box-shadow: 0 -14px 36px rgba(0,0,0,.38);
}

.mention-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #dfe3e8;
  cursor: pointer;
  text-align: left;
}

.mention-suggestion:hover,
.mention-suggestion.active {
  background: #292d35;
}

.mention-suggestion-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #382326;
  color: #ff7b80;
  font-size: 10px;
  font-weight: 900;
}

.mention-suggestion-name {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: none) and (pointer: coarse) {
  .channel-unread-badge {
    min-width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .mention-suggestions {
    left: 6px;
    right: 6px;
    max-height: min(230px, 42vh);
  }

  .mention-suggestion {
    min-height: 44px;
    padding: 7px 9px;
  }

  .mention-suggestion-avatar {
    width: 32px;
    height: 32px;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html.rv-keyboard-open .mention-suggestions {
    max-height: 94px;
    bottom: calc(100% - 2px);
  }
}


/* v0.2-test-dev.12 — presence + typing */

.server-code #presenceSummary {
  color: #8f98a5;
  font-weight: 750;
}

.presence-section-label {
  margin: 14px 8px 5px;
  color: #727a86;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .055em;
}

.presence-section-label:first-child {
  margin-top: 4px;
}

.member-item.presence-member {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  padding: 7px 8px;
}

.member-item.presence-member.offline {
  opacity: .48;
}

.presence-avatar-wrap {
  position: relative;
  width: 34px;
  height: 34px;
}

.presence-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #292d34;
  color: #d9dde3;
  font-size: 11px;
  font-weight: 900;
}

.presence-avatar-wrap .member-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border: 3px solid #191b20;
  background: #5b626d;
}

.presence-member.online .presence-avatar-wrap .member-dot {
  background: var(--green);
}

.presence-member.local .presence-avatar {
  background: #382326;
  color: #ff7b80;
}

.presence-member-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.presence-member-name {
  overflow: hidden;
  color: #c7ccd3;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presence-member.online .presence-member-name {
  color: #eef0f3;
}

.presence-member-state {
  color: #747d89;
  font-size: 9px;
}

.presence-member.online .presence-member-state {
  color: #64c880;
}

.typing-indicator {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 3px 10px 2px;
  color: #8f98a5;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.typing-indicator::before {
  content: '•••';
  display: inline-block;
  margin-right: 7px;
  color: #d84a50;
  letter-spacing: 2px;
  animation: rv-typing-pulse 1.15s ease-in-out infinite;
}

@keyframes rv-typing-pulse {
  0%, 100% {
    opacity: .4;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-1px);
  }
}

@media (hover: none) and (pointer: coarse) {
  .typing-indicator {
    min-height: 20px;
    padding: 2px 8px;
    font-size: 9px;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  html.rv-keyboard-open .typing-indicator {
    min-height: 17px;
    padding: 1px 6px;
    font-size: 8px;
  }
}


/* v0.2-test-dev.12.1 — typing visibility hotfix */

.typing-indicator:not(.hidden) {
  display: flex;
  align-items: center;
  margin: 0 4px -3px;
  min-height: 26px;
  color: #c2c8d0;
  font-size: 11px;
}

.typing-indicator:not(.hidden)::before {
  color: #ff5c62;
}

@media (hover: none) and (pointer: coarse) {
  .typing-indicator:not(.hidden) {
    min-height: 24px;
    margin: 0 2px -2px;
    padding-left: 8px;
    font-size: 10px;
  }
}


/* v0.2-test-dev.12.2 — robust typing transport + dual visibility */

.typing-indicator:not(.hidden) {
  border-left: 2px solid #d6383e;
  background: rgba(214, 56, 62, .055);
  border-radius: 6px;
  padding-left: 9px;
}

.presence-member-state.typing {
  color: #ff747a;
  font-weight: 800;
}


/* v0.2-test-dev.13 — server roles / permissions foundation */

.server-title-block {
  min-width: 0;
}

.server-name-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.server-name-row .server-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-role-badge,
.presence-role-badge,
.role-static-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.server-role-badge {
  flex: 0 0 auto;
  min-height: 18px;
  padding: 3px 6px;
  border: 1px solid #4a3d27;
  background: #2b241a;
  color: #e1b862;
  font-size: 8px;
  text-transform: uppercase;
}

.server-role-badge[data-role="admin"] {
  border-color: #3b4659;
  background: #202836;
  color: #91aedb;
}

.server-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.server-manage-btn {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid #393e47;
  border-radius: 7px;
  background: #24272d;
  color: #c8cdd4;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.server-manage-btn:hover {
  border-color: #575e6a;
  color: #fff;
}

.presence-member-name-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.presence-member-name-line .presence-member-name {
  min-width: 0;
}

.presence-role-badge {
  flex: 0 0 auto;
  min-height: 14px;
  padding: 2px 4px;
  font-size: 7px;
  letter-spacing: .02em;
}

.presence-role-badge.owner {
  background: rgba(198, 151, 60, .16);
  color: #ddb65f;
}

.presence-role-badge.admin {
  background: rgba(88, 121, 174, .16);
  color: #90add8;
}

.roles-modal {
  position: fixed;
  z-index: 360;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 4, 6, .78);
  backdrop-filter: blur(6px);
}

.roles-modal-card {
  width: min(680px, 96vw);
  max-height: min(760px, 90vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #363b44;
  border-radius: 14px;
  background: #191c21;
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
}

.roles-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid #2d3138;
}

.roles-modal-eyebrow {
  color: #b84247;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.roles-modal-header h2 {
  margin: 4px 0 5px;
  color: #f1f2f4;
  font-size: 20px;
}

.roles-modal-header p {
  max-width: 520px;
  margin: 0;
  color: #858d98;
  font-size: 11px;
  line-height: 1.45;
}

.roles-modal-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid #3a3f48;
  border-radius: 8px;
  background: #22252b;
  color: #d9dde2;
  cursor: pointer;
  font-size: 21px;
}

.roles-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 18px;
  border-bottom: 1px solid #2d3138;
  color: #777f8a;
  font-size: 9px;
}

.roles-legend b {
  color: #b8bec7;
}

.roles-modal-list {
  min-height: 130px;
  overflow-y: auto;
  padding: 8px;
}

.role-member-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
}

.role-member-row:hover {
  background: #20242a;
}

.role-member-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2b2f36;
  color: #e4e7eb;
  font-size: 11px;
  font-weight: 900;
}

.role-member-info {
  min-width: 0;
}

.role-member-name {
  overflow: hidden;
  color: #e1e4e8;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-member-meta {
  margin-top: 2px;
  color: #78818c;
  font-size: 9px;
}

.role-select {
  min-width: 118px;
  height: 32px;
  padding: 0 28px 0 9px;
  border: 1px solid #3b414a;
  border-radius: 8px;
  outline: none;
  background: #22262c;
  color: #dce0e5;
  font-size: 11px;
  font-weight: 750;
}

.role-select:focus {
  border-color: #696f7b;
}

.role-static-badge {
  min-width: 80px;
  min-height: 28px;
  padding: 6px 9px;
  font-size: 9px;
}

.role-static-badge.owner {
  background: rgba(198, 151, 60, .15);
  color: #deb863;
}

.role-static-badge.admin {
  background: rgba(88, 121, 174, .15);
  color: #96b0da;
}

.role-static-badge.member {
  background: #252930;
  color: #89919d;
}

.roles-modal-status {
  margin: 0 12px 12px;
  padding: 8px 10px;
  border: 1px solid #2d5438;
  border-radius: 8px;
  background: rgba(46, 109, 64, .11);
  color: #80d197;
  font-size: 10px;
}

.roles-modal-status.error {
  border-color: #633339;
  background: rgba(145, 44, 51, .11);
  color: #eb858a;
}

@media (hover: none) and (pointer: coarse) {
  .server-manage-btn {
    min-height: 32px;
  }

  .roles-modal {
    align-items: flex-end;
    padding:
      10px
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .roles-modal-card {
    width: 100%;
    max-height: 82vh;
    border-radius: 14px;
  }

  .roles-modal-header {
    padding: 14px;
  }

  .roles-modal-header h2 {
    font-size: 18px;
  }

  .roles-legend {
    padding: 9px 14px;
  }

  .role-member-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    padding: 8px 6px;
  }

  .role-select {
    min-width: 104px;
  }
}


/* v0.2-test-dev.14 — mobile members drawer + channel management */

.mobile-members-btn {
  min-width: 42px;
  min-height: 32px;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid #373c45;
  border-radius: 8px;
  background: #23262c;
  color: #cdd2d8;
  font-size: 11px;
  font-weight: 850;
}

.mobile-members-btn span {
  color: #72d58d;
}

.mobile-members-overlay {
  position: fixed;
  z-index: 330;
  inset: 0;
}

.mobile-members-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0,0,0,.56);
}

.mobile-members-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 340px);
  display: flex;
  flex-direction: column;
  border-left: 1px solid #333840;
  background: #191c21;
  box-shadow: -20px 0 60px rgba(0,0,0,.46);
}

.mobile-members-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 76px;
  padding:
    max(14px, env(safe-area-inset-top))
    14px
    12px;
  border-bottom: 1px solid #2c3037;
}

.mobile-members-eyebrow {
  color: #b84247;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.mobile-members-title {
  margin-top: 3px;
  color: #f0f2f4;
  font-size: 18px;
  font-weight: 900;
}

.mobile-members-subtitle {
  margin-top: 2px;
  color: #7f8792;
  font-size: 10px;
}

.mobile-members-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #3a3f48;
  border-radius: 9px;
  background: #25282e;
  color: #e1e4e8;
  font-size: 21px;
}

.mobile-member-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 8px max(14px, env(safe-area-inset-bottom));
}

.channels-modal {
  position: fixed;
  z-index: 355;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 4, 6, .78);
  backdrop-filter: blur(6px);
}

.channels-modal-card {
  width: min(720px, 96vw);
  max-height: min(820px, 92vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #363b44;
  border-radius: 14px;
  background: #191c21;
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
}

.channels-modal-header {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid #2d3138;
}

.channels-modal-eyebrow {
  color: #b84247;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.channels-modal-header h2 {
  margin: 4px 0 5px;
  color: #f1f2f4;
  font-size: 20px;
}

.channels-modal-header p {
  max-width: 560px;
  margin: 0;
  color: #858d98;
  font-size: 11px;
  line-height: 1.45;
}

.channels-modal-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid #3a3f48;
  border-radius: 8px;
  background: #22252b;
  color: #d9dde2;
  cursor: pointer;
  font-size: 21px;
}

.channels-manager-section {
  min-height: 0;
  padding: 10px 12px 0;
}

.channels-manager-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 7px;
  color: #818a96;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
}

.channel-add-btn {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid #3b414a;
  border-radius: 7px;
  background: #24282e;
  color: #d0d5dc;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
}

.channel-add-btn:hover {
  border-color: #5a626e;
  color: #fff;
}

.channels-manager-list {
  max-height: 230px;
  overflow-y: auto;
  padding: 3px;
  border: 1px solid #2e3239;
  border-radius: 10px;
  background: #16191d;
}

.channel-manager-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 7px;
  border-radius: 8px;
}

.channel-manager-row:hover {
  background: #20242a;
}

.channel-manager-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #292d34;
  color: #bfc5cd;
  font-size: 13px;
  font-weight: 900;
}

.channel-manager-info {
  min-width: 0;
}

.channel-manager-name {
  overflow: hidden;
  color: #e3e6ea;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-manager-meta {
  margin-top: 2px;
  color: #727b87;
  font-size: 9px;
}

.channel-manager-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.channel-manager-action {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #3a4049;
  border-radius: 7px;
  background: #25292f;
  color: #c5cad1;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.channel-manager-action:hover:not(:disabled) {
  border-color: #5c6571;
  background: #30353d;
  color: #fff;
}

.channel-manager-action:disabled {
  opacity: .28;
  cursor: default;
}

.channel-manager-action.danger:not(:disabled) {
  border-color: #583237;
  color: #d77c81;
}

.channels-manager-hint {
  flex: 0 0 auto;
  margin: 10px 14px 0;
  padding: 8px 10px;
  border: 1px solid #47363a;
  border-radius: 8px;
  background: rgba(117, 54, 60, .08);
  color: #9d8589;
  font-size: 9px;
  line-height: 1.45;
}

.channels-modal-status {
  flex: 0 0 auto;
  margin: 10px 14px 14px;
  padding: 8px 10px;
  border: 1px solid #2d5438;
  border-radius: 8px;
  background: rgba(46, 109, 64, .11);
  color: #80d197;
  font-size: 10px;
}

.channels-modal-status.error {
  border-color: #633339;
  background: rgba(145, 44, 51, .11);
  color: #eb858a;
}

@media (hover: none) and (pointer: coarse) {
  .topbar {
    gap: 7px;
  }

  .topbar-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-members-btn {
    flex: 0 0 auto;
  }

  .channels-modal {
    align-items: flex-end;
    padding:
      8px
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .channels-modal-card {
    width: 100%;
    max-height: 88vh;
    border-radius: 14px;
  }

  .channels-modal-header {
    padding: 13px;
  }

  .channels-modal-header h2 {
    font-size: 18px;
  }

  .channels-manager-section {
    padding: 8px 8px 0;
  }

  .channels-manager-list {
    max-height: 180px;
  }

  .channel-manager-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px 4px;
  }

  .channel-manager-icon {
    width: 30px;
    height: 30px;
  }

  .channel-manager-action {
    width: 32px;
    height: 32px;
  }

  .channels-manager-hint {
    margin: 8px 10px 0;
  }

  .channels-modal-status {
    margin: 8px 10px 10px;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .mobile-members-drawer {
    width: min(74vw, 360px);
  }

  .channels-modal-card {
    max-height: 94vh;
  }

  .channels-manager-list {
    max-height: 112px;
  }
}


/* v0.2-test-dev.15 — Direct Messages */

.dm-section-label {
  margin-top: 2px;
}

.direct-messages {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.dm-empty {
  padding: 7px 9px 9px;
  color: #68717c;
  font-size: 9px;
  line-height: 1.35;
}

.dm-channel {
  min-height: 42px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.dm-avatar-wrap {
  position: relative;
  width: 28px;
  height: 28px;
}

.dm-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #292d34;
  color: #e1e5ea;
  font-size: 9px;
  font-weight: 900;
}

.dm-presence-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border: 2px solid #1b1e23;
  border-radius: 50%;
  background: #555d68;
}

.dm-presence-dot.online {
  background: var(--green);
}

.dm-channel-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.dm-channel-name,
.dm-channel-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-channel-name {
  color: #c8cdd4;
  font-size: 11px;
  font-weight: 800;
}

.dm-channel-preview {
  color: #69727e;
  font-size: 8px;
}

.dm-channel.active .dm-channel-name,
.dm-channel.has-unread .dm-channel-name {
  color: #fff;
}

.dm-unread-badge {
  flex: 0 0 auto;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #d6383e;
  color: white;
  font-size: 9px;
  font-weight: 900;
}

.member-item.presence-member {
  grid-template-columns: 34px minmax(0, 1fr) 30px;
}

.presence-dm-btn {
  width: 28px;
  height: 28px;
  align-self: center;
  display: grid;
  place-items: center;
  border: 1px solid #353b44;
  border-radius: 7px;
  background: #24282e;
  color: #9da6b2;
  cursor: pointer;
  font-size: 12px;
}

.presence-dm-btn:hover:not(:disabled) {
  border-color: #5c6571;
  color: #fff;
  background: #30353d;
}

.presence-dm-btn:disabled,
.presence-dm-btn.self {
  opacity: .25;
  cursor: default;
}

.text-channel-header h1 {
  overflow-wrap: anywhere;
}

@media (hover: none) and (pointer: coarse) {
  .dm-channel {
    min-height: 46px;
    grid-template-columns: 31px minmax(0, 1fr) auto;
  }

  .dm-avatar-wrap,
  .dm-avatar {
    width: 31px;
    height: 31px;
  }

  .dm-channel-name {
    font-size: 12px;
  }

  .dm-channel-preview {
    font-size: 9px;
  }

  .presence-dm-btn {
    width: 32px;
    height: 32px;
  }
}


/* v0.2-test-dev.16 — multi-server + invitations */

.server-icon {
  position: relative;
}

.server-icon-text {
  max-width: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-server-switcher {
  flex: 0 0 auto;
  width: 28px;
  height: 26px;
  border: 1px solid #3a3f48;
  border-radius: 7px;
  background: #25282e;
  color: #b7bec7;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

.server-actions-btn {
  min-width: 34px;
  padding-left: 8px;
  padding-right: 8px;
  letter-spacing: 1px;
}

.server-hub-modal,
.server-actions-modal {
  position: fixed;
  z-index: 370;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3,4,6,.80);
  backdrop-filter: blur(7px);
}

.server-hub-card,
.server-actions-card {
  width: min(720px, 96vw);
  max-height: min(840px, 92vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #373c45;
  border-radius: 15px;
  background: #191c21;
  box-shadow: 0 28px 100px rgba(0,0,0,.58);
}

.server-actions-card {
  width: min(580px, 96vw);
}

.server-hub-header,
.server-actions-header {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid #2e3239;
}

.server-hub-eyebrow,
.server-actions-eyebrow {
  color: #b84247;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.server-hub-header h2,
.server-actions-header h2 {
  margin: 4px 0 5px;
  color: #f1f2f4;
  font-size: 21px;
}

.server-hub-header p,
.server-actions-header p,
.server-actions-section p {
  margin: 0;
  color: #858d98;
  font-size: 11px;
  line-height: 1.45;
}

.server-hub-close,
.server-actions-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #3a3f48;
  border-radius: 9px;
  background: #24272d;
  color: #e0e4e9;
  cursor: pointer;
  font-size: 22px;
}

.server-hub-section {
  padding: 12px 14px 0;
}

.server-hub-section-title,
.server-actions-section-title {
  margin-bottom: 7px;
  color: #7e8793;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
}

.server-hub-list {
  max-height: 250px;
  overflow-y: auto;
  display: grid;
  gap: 4px;
  padding: 4px;
  border: 1px solid #2e333a;
  border-radius: 10px;
  background: #15181c;
}

.server-hub-item {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.server-hub-item:hover,
.server-hub-item.active {
  border-color: #373d46;
  background: #22262c;
}

.server-hub-item.active {
  border-color: #603238;
  background: rgba(145,44,51,.10);
}

.server-hub-item-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #2b2f36;
  color: #eef0f3;
  font-size: 10px;
  font-weight: 900;
}

.server-hub-item-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.server-hub-item-name {
  overflow: hidden;
  color: #e4e7eb;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-hub-item-meta {
  color: #737c88;
  font-size: 9px;
}

.server-hub-item-action {
  color: #8993a0;
  font-size: 9px;
  font-weight: 800;
}

.server-hub-grid {
  flex: 1;
  min-height: 260px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 18px 12px;
}

.server-hub-form {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid #2f343c;
  border-radius: 12px;
  background: #171a1f;
}

.server-hub-form label,
.invite-result label {
  display: block;
  margin: 8px 0 5px;
  color: #929aa5;
  font-size: 9px;
  font-weight: 800;
}

.server-hub-form input,
.invite-result input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #383e47;
  border-radius: 8px;
  outline: none;
  background: #101216;
  color: #e1e5ea;
  font-size: 12px;
}

.server-hub-form input:focus,
.invite-result input:focus {
  border-color: #636b77;
}

.server-hub-form .btn {
  width: 100%;
  margin-top: 10px;
}

.invite-preview {
  margin-top: 7px;
  padding: 7px 8px;
  border: 1px solid #34404c;
  border-radius: 7px;
  background: rgba(65,89,115,.10);
  color: #9bb1c9;
  font-size: 9px;
}

.server-hub-status,
.server-actions-status {
  margin: 0 14px 14px;
  padding: 8px 10px;
  border: 1px solid #2d5438;
  border-radius: 8px;
  background: rgba(46,109,64,.11);
  color: #80d197;
  font-size: 10px;
}

.server-hub-status.error,
.server-actions-status.error {
  border-color: #633339;
  background: rgba(145,44,51,.11);
  color: #eb858a;
}

.server-actions-section {
  padding: 14px 16px;
  border-bottom: 1px solid #2d3138;
}

.server-actions-section:last-of-type {
  border-bottom: 0;
}

.server-secondary-btn,
.server-copy-btn,
.server-danger-btn {
  min-height: 34px;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.server-secondary-btn,
.server-copy-btn {
  border: 1px solid #3c424b;
  background: #262a30;
  color: #d4d9df;
}

.server-danger-btn {
  border: 1px solid #67353b;
  background: rgba(145,44,51,.13);
  color: #ed868b;
}

.invite-result {
  margin-top: 10px;
}

.invite-result-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 6px;
}

.invite-result-row .server-copy-btn {
  margin-top: 0;
}

.server-owner-note {
  padding: 9px 10px;
  border: 1px solid #4c432d;
  border-radius: 8px;
  background: rgba(135,105,48,.10);
  color: #b6a274;
  font-size: 9px;
  line-height: 1.45;
}

@media (hover: none) and (pointer: coarse) {
  .server-hub-modal,
  .server-actions-modal {
    align-items: flex-end;
    padding:
      8px
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .server-hub-card,
  .server-actions-card {
    width: 100%;
    max-height: 90vh;
    border-radius: 15px;
  }

  .server-hub-header,
  .server-actions-header {
    padding: 14px;
  }

  .server-hub-grid {
    grid-template-columns: 1fr;
    overflow-y: auto;
    padding: 10px;
  }

  .server-hub-list {
    max-height: 180px;
  }

  .server-hub-item {
    min-height: 58px;
  }

  .server-header-actions {
    gap: 4px;
  }

  .server-actions-btn {
    min-width: 32px;
    padding: 4px 7px;
  }
}


/* v0.2-test-dev.17 — server settings / invite management / ownership */

.server-actions-card {
  overflow-y: auto;
}

.server-inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 9px;
}

.server-inline-form input,
.server-inline-form select {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid #3b414a;
  border-radius: 8px;
  outline: none;
  background: #111318;
  color: #e0e4e9;
  font-size: 11px;
}

.server-inline-form input:focus,
.server-inline-form select:focus {
  border-color: #626b77;
}

.server-inline-form .server-secondary-btn {
  margin-top: 0;
}

.server-actions-section-subtitle {
  margin: 14px 0 6px;
  color: #737c88;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
}

.server-invite-list {
  max-height: 230px;
  overflow-y: auto;
  display: grid;
  gap: 4px;
  padding: 4px;
  border: 1px solid #2e333a;
  border-radius: 9px;
  background: #15181c;
}

.server-invite-item {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: #1d2025;
}

.server-invite-item.inactive {
  opacity: .52;
}

.server-invite-info {
  min-width: 0;
}

.server-invite-code {
  overflow: hidden;
  color: #e0e4e9;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-invite-meta {
  margin-top: 2px;
  color: #727b87;
  font-size: 8px;
}

.server-invite-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.server-copy-btn.compact,
.server-invite-revoke {
  min-height: 28px;
  margin: 0;
  padding: 5px 7px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 8px;
  font-weight: 800;
}

.server-invite-revoke {
  border: 1px solid #60343a;
  background: rgba(145,44,51,.10);
  color: #dc7e84;
}

.server-danger-zone {
  border-top: 1px solid #4b2e33;
  background: rgba(112,37,44,.035);
}

.server-danger-zone p {
  color: #a18286;
}

@media (hover: none) and (pointer: coarse) {
  .server-inline-form {
    grid-template-columns: 1fr;
  }

  .server-inline-form .server-secondary-btn {
    min-height: 38px;
  }

  .server-invite-item {
    grid-template-columns: 1fr;
  }

  .server-invite-actions {
    justify-content: flex-end;
  }

  .server-copy-btn.compact,
  .server-invite-revoke {
    min-height: 32px;
    padding-left: 9px;
    padding-right: 9px;
  }
}


/* v0.2-test-dev.18 — notification system */

.notification-settings-btn.muted {
  border-color: #594044;
  background: rgba(117, 54, 60, .10);
  color: #d07c82;
}

.notification-settings-btn.mentions-only {
  border-color: #4a4631;
  color: #d1b96c;
}

.server-icon.notifications-muted {
  opacity: .72;
}

.server-icon.notifications-muted::after {
  content: "🔕";
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 2px solid #111318;
  border-radius: 50%;
  background: #24272d;
  font-size: 8px;
}

.channel-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-notification-marker {
  margin-left: auto;
  color: #858d99;
  font-size: 9px;
  font-weight: 900;
}

.channel-notification-marker + .channel-unread-badge {
  margin-left: 0;
}

.dm-channel.notifications-muted {
  opacity: .65;
}

.notification-settings-modal {
  position: fixed;
  z-index: 390;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3,4,6,.82);
  backdrop-filter: blur(7px);
}

.notification-settings-card {
  width: min(720px, 96vw);
  max-height: min(850px, 92vh);
  overflow-y: auto;
  border: 1px solid #373c45;
  border-radius: 15px;
  background: #191c21;
  box-shadow: 0 28px 100px rgba(0,0,0,.58);
}

.notification-settings-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid #2e3239;
}

.notification-settings-eyebrow {
  color: #b84247;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.notification-settings-header h2 {
  margin: 4px 0 5px;
  color: #f1f2f4;
  font-size: 21px;
}

.notification-settings-header p {
  max-width: 580px;
  margin: 0;
  color: #858d98;
  font-size: 11px;
  line-height: 1.45;
}

.notification-settings-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #3a3f48;
  border-radius: 9px;
  background: #24272d;
  color: #e0e4e9;
  cursor: pointer;
  font-size: 22px;
}

.notification-settings-section {
  padding: 14px 16px;
  border-bottom: 1px solid #2d3138;
}

.notification-settings-section:last-of-type {
  border-bottom: 0;
}

.notification-settings-section-title {
  margin-bottom: 8px;
  color: #7e8793;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
}

.notification-browser-row,
.notification-select-row,
.notification-override-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.notification-browser-row strong,
.notification-select-row strong {
  display: block;
  color: #e2e5e9;
  font-size: 11px;
}

.notification-browser-row small,
.notification-select-row small {
  display: block;
  margin-top: 2px;
  color: #767f8b;
  font-size: 9px;
  line-height: 1.35;
}

.notification-browser-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #d6383e;
}

.notification-select-row select,
.notification-override-select {
  min-width: 165px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid #3b414a;
  border-radius: 8px;
  outline: none;
  background: #111318;
  color: #dce1e7;
  font-size: 10px;
}

.notification-settings-hint {
  margin-top: 8px;
  padding: 8px 9px;
  border: 1px solid #343a43;
  border-radius: 8px;
  background: #171a1f;
  color: #737c88;
  font-size: 9px;
  line-height: 1.45;
}

.notification-override-list {
  margin-top: 9px;
  display: grid;
  gap: 4px;
  max-height: 250px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid #2e333a;
  border-radius: 9px;
  background: #15181c;
}

.notification-override-row {
  min-height: 46px;
  padding: 7px 8px;
  border-radius: 8px;
  background: #1d2025;
}

.notification-override-info {
  min-width: 0;
}

.notification-override-title {
  overflow: hidden;
  color: #e1e5e9;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-override-subtitle {
  margin-top: 2px;
  color: #717a86;
  font-size: 8px;
}

.notification-settings-status {
  margin: 12px 16px 16px;
  padding: 8px 10px;
  border: 1px solid #2d5438;
  border-radius: 8px;
  background: rgba(46,109,64,.11);
  color: #80d197;
  font-size: 10px;
}

.notification-settings-status.error {
  border-color: #633339;
  background: rgba(145,44,51,.11);
  color: #eb858a;
}

.notification-toast-container {
  position: fixed;
  z-index: 450;
  top: 16px;
  right: 16px;
  width: min(360px, calc(100vw - 32px));
  display: grid;
  gap: 7px;
  pointer-events: none;
}

.notification-toast {
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid #3a4049;
  border-left: 3px solid #d6383e;
  border-radius: 10px;
  background: rgba(25,28,33,.97);
  color: #e4e7eb;
  box-shadow: 0 12px 45px rgba(0,0,0,.45);
  cursor: pointer;
  pointer-events: auto;
  text-align: left;
  animation: rv-toast-in .18s ease-out;
}

.notification-toast.leaving {
  opacity: 0;
  transform: translateX(10px);
  transition: .2s ease;
}

.notification-toast-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(214,56,62,.12);
  color: #ff7177;
  font-size: 11px;
  font-weight: 900;
}

.notification-toast-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notification-toast-body strong {
  overflow: hidden;
  color: #f0f2f4;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-toast-body span {
  color: #969eaa;
  font-size: 9px;
  line-height: 1.35;
}

@keyframes rv-toast-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (hover: none) and (pointer: coarse) {
  .notification-settings-modal {
    align-items: flex-end;
    padding:
      8px
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .notification-settings-card {
    width: 100%;
    max-height: 90vh;
    border-radius: 15px;
  }

  .notification-settings-header {
    padding: 14px;
  }

  .notification-browser-row,
  .notification-select-row,
  .notification-override-row {
    grid-template-columns: 1fr;
  }

  .notification-select-row select,
  .notification-override-select {
    width: 100%;
  }

  .notification-toast-container {
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    width: calc(100vw - 16px);
  }
}


/* v0.2-test-dev.19 — global search */

.global-search-btn {
  flex: 0 0 auto;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid #373d46;
  border-radius: 8px;
  background: #23262c;
  color: #b9c0c9;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.global-search-btn:hover {
  border-color: #565f6b;
  color: #fff;
}

.global-search-modal {
  position: fixed;
  z-index: 410;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 7vh 18px 18px;
  background: rgba(3,4,6,.84);
  backdrop-filter: blur(8px);
}

.global-search-card {
  width: min(860px, 96vw);
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #373d46;
  border-radius: 15px;
  background: #191c21;
  box-shadow: 0 30px 110px rgba(0,0,0,.62);
}

.global-search-header {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid #2e333a;
}

.global-search-eyebrow {
  color: #b84247;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.global-search-header h2 {
  margin: 4px 0 5px;
  color: #f1f2f4;
  font-size: 21px;
}

.global-search-header p {
  max-width: 650px;
  margin: 0;
  color: #858d98;
  font-size: 11px;
  line-height: 1.45;
}

.global-search-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #3a4049;
  border-radius: 9px;
  background: #24272d;
  color: #e0e4e9;
  cursor: pointer;
  font-size: 22px;
}

.global-search-controls {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 190px;
  gap: 8px;
  padding: 13px 14px 9px;
}

.global-search-input-wrap {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  border: 1px solid #3c424b;
  border-radius: 9px;
  background: #101216;
}

.global-search-input-wrap > span {
  display: grid;
  place-items: center;
  color: #7e8793;
  font-size: 11px;
}

.global-search-input-wrap input {
  width: 100%;
  min-height: 40px;
  border: 0;
  outline: none;
  background: transparent;
  color: #edf0f3;
  font-size: 13px;
}

.global-search-controls select {
  min-width: 0;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid #3c424b;
  border-radius: 9px;
  outline: none;
  background: #16191e;
  color: #d6dbe1;
  font-size: 10px;
}

.global-search-tip {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  padding: 0 15px 10px;
  color: #68717c;
  font-size: 8px;
}

.global-search-results {
  flex: 1 1 auto;
  min-height: 180px;
  overflow-y: auto;
  padding: 5px 10px 12px;
}

.global-search-empty {
  padding: 38px 16px;
  color: #707986;
  text-align: center;
  font-size: 11px;
}

.global-search-group {
  margin-top: 8px;
}

.global-search-group-title {
  padding: 5px 6px;
  color: #78818d;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.global-search-group-list {
  display: grid;
  gap: 3px;
}

.global-search-result {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #1d2025;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.global-search-result:hover,
.global-search-result:focus-visible {
  border-color: #424954;
  background: #24282e;
  outline: none;
}

.global-search-result.online-user .global-search-result-icon {
  color: #65d784;
}

.global-search-result-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #292d34;
  color: #c3cad3;
  font-size: 11px;
  font-weight: 900;
}

.global-search-result-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.global-search-result-body strong,
.global-search-result-meta,
.global-search-result-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result-body strong {
  color: #e9ecf0;
  font-size: 11px;
}

.global-search-result-meta {
  color: #78818d;
  font-size: 8px;
}

.global-search-result-preview {
  color: #a5adb8;
  font-size: 9px;
}

.global-search-result-arrow {
  color: #646d79;
  font-size: 18px;
}

.global-search-status {
  flex: 0 0 auto;
  margin: 0 14px 12px;
  padding: 7px 9px;
  border: 1px solid #31563b;
  border-radius: 8px;
  background: rgba(46,109,64,.10);
  color: #80d197;
  font-size: 9px;
}

.global-search-status.error {
  border-color: #633339;
  background: rgba(145,44,51,.11);
  color: #eb858a;
}

.search-context-banner {
  position: sticky;
  z-index: 8;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  padding: 7px 9px;
  border: 1px solid #3f4650;
  border-radius: 8px;
  background: rgba(27,30,35,.97);
  color: #8f98a4;
  font-size: 9px;
}

.search-context-banner button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid #414852;
  border-radius: 7px;
  background: #272b31;
  color: #d3d8de;
  cursor: pointer;
  font-size: 8px;
  font-weight: 800;
}

.message-row.search-target-message {
  border-left: 2px solid #d6383e;
  background: rgba(214,56,62,.055);
}

.message-row.search-target-pulse {
  animation: rv-search-target 1.2s ease-in-out 2;
}

@keyframes rv-search-target {
  0%, 100% {
    box-shadow: inset 0 0 0 0 rgba(214,56,62,0);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(214,56,62,.7);
  }
}

@media (hover: none) and (pointer: coarse) {
  .global-search-label {
    display: none;
  }

  .global-search-btn {
    min-width: 34px;
    min-height: 32px;
    padding: 5px 7px;
    justify-content: center;
  }

  .global-search-modal {
    align-items: flex-end;
    padding:
      8px
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .global-search-card {
    width: 100%;
    max-height: 91vh;
    border-radius: 15px;
  }

  .global-search-header {
    padding: 14px;
  }

  .global-search-controls {
    grid-template-columns: 1fr 1fr;
    padding: 10px;
  }

  .global-search-input-wrap {
    grid-column: 1 / -1;
  }

  .global-search-controls select {
    width: 100%;
  }

  .global-search-tip {
    display: none;
  }

  .global-search-results {
    padding: 4px 7px 10px;
  }

  .global-search-result {
    min-height: 62px;
    grid-template-columns: 34px minmax(0, 1fr) 14px;
    padding: 8px 7px;
  }

  .search-context-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .search-context-banner button {
    width: 100%;
  }
}


/* v0.2-test-dev.20 — pinned messages */
.pinned-messages-btn{flex:0 0 auto;min-height:30px;display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border:1px solid #373d46;border-radius:8px;background:#23262c;color:#aab2bc;cursor:pointer;font-size:10px;font-weight:850}
.pinned-messages-btn.has-pins{border-color:#5e4c2d;background:rgba(142,104,45,.11);color:#d4b161}.pinned-messages-btn span{min-width:14px;text-align:center}
.message-pin-btn.active{border-color:#66532f!important;color:#ddb55a!important;background:rgba(137,100,42,.12)!important}
.pinned-messages-modal{position:fixed;z-index:405;inset:0;display:flex;align-items:flex-start;justify-content:center;padding:8vh 18px 18px;background:rgba(3,4,6,.82);backdrop-filter:blur(8px)}
.pinned-messages-card{width:min(720px,96vw);max-height:84vh;overflow:hidden;display:flex;flex-direction:column;border:1px solid #373d46;border-radius:15px;background:#191c21;box-shadow:0 28px 100px rgba(0,0,0,.58)}
.pinned-messages-header{flex:0 0 auto;display:flex;justify-content:space-between;gap:18px;padding:18px;border-bottom:1px solid #2e333a}.pinned-messages-eyebrow{color:#b84247;font-size:9px;font-weight:900;letter-spacing:.08em}.pinned-messages-header h2{margin:4px 0 5px;color:#f1f2f4;font-size:21px}.pinned-messages-header p{margin:0;color:#858d98;font-size:11px}
.pinned-messages-close{flex:0 0 auto;width:36px;height:36px;border:1px solid #3a4049;border-radius:9px;background:#24272d;color:#e0e4e9;cursor:pointer;font-size:22px}.pinned-messages-list{flex:1 1 auto;overflow-y:auto;display:grid;gap:6px;padding:10px}.pinned-messages-empty{padding:42px 16px;color:#717a86;text-align:center;font-size:11px}
.pinned-message-item{padding:10px 11px;border:1px solid #30353d;border-radius:10px;background:#1d2025}.pinned-message-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.pinned-message-top strong{color:#e9ecf0;font-size:11px}.pinned-message-top span,.pinned-message-meta{color:#737c88;font-size:8px}.pinned-message-content{margin-top:6px;color:#c4cad2;font-size:11px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.pinned-message-meta{margin-top:7px}.pinned-message-actions{display:flex;justify-content:flex-end;gap:5px;margin-top:8px}
.pinned-message-jump,.pinned-message-unpin{min-height:30px;padding:5px 9px;border-radius:7px;cursor:pointer;font-size:9px;font-weight:800}.pinned-message-jump{border:1px solid #3d444e;background:#262a30;color:#d4d9df}.pinned-message-unpin{border:1px solid #60343a;background:rgba(145,44,51,.10);color:#dc7e84}
.pinned-messages-status{flex:0 0 auto;margin:0 12px 12px;padding:8px 10px;border:1px solid #31563b;border-radius:8px;background:rgba(46,109,64,.10);color:#80d197;font-size:9px}.pinned-messages-status.error{border-color:#633339;background:rgba(145,44,51,.11);color:#eb858a}
@media (hover:none) and (pointer:coarse){.pinned-messages-btn{min-width:34px;min-height:32px;padding:5px 7px}.pinned-messages-modal{align-items:flex-end;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.pinned-messages-card{width:100%;max-height:90vh;border-radius:15px}.pinned-messages-header{padding:14px}.pinned-message-actions{display:grid;grid-template-columns:1fr 1fr}.pinned-message-jump,.pinned-message-unpin{width:100%;min-height:36px}}


/* v0.2-test-dev.21 — moderation */

.member-item.presence-member {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.presence-member-actions {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
}

.presence-moderate-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #4a393c;
  border-radius: 7px;
  background: rgba(105, 44, 50, .09);
  color: #b98387;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
}

.presence-moderate-btn:hover {
  border-color: #704349;
  background: rgba(145, 44, 51, .14);
  color: #e18b90;
}

.member-moderation-modal,
.moderation-modal {
  position: fixed;
  z-index: 420;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3,4,6,.84);
  backdrop-filter: blur(8px);
}

.member-moderation-card {
  width: min(520px, 96vw);
  overflow: hidden;
  border: 1px solid #43363a;
  border-radius: 15px;
  background: #191c21;
  box-shadow: 0 28px 100px rgba(0,0,0,.60);
}

.moderation-card {
  width: min(780px, 96vw);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #373d46;
  border-radius: 15px;
  background: #191c21;
  box-shadow: 0 28px 100px rgba(0,0,0,.60);
}

.member-moderation-header,
.moderation-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid #2e333a;
}

.member-moderation-eyebrow,
.moderation-eyebrow {
  color: #b84247;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.member-moderation-header h2,
.moderation-header h2 {
  margin: 4px 0 5px;
  color: #f1f2f4;
  font-size: 21px;
}

.member-moderation-header p,
.moderation-header p {
  margin: 0;
  color: #858d98;
  font-size: 11px;
}

.member-moderation-close,
.moderation-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #3a4049;
  border-radius: 9px;
  background: #24272d;
  color: #e0e4e9;
  cursor: pointer;
  font-size: 22px;
}

.member-moderation-body {
  padding: 15px 16px 16px;
}

.member-moderation-body label {
  display: block;
  margin-bottom: 6px;
  color: #aeb5be;
  font-size: 10px;
  font-weight: 800;
}

.member-moderation-body label span {
  color: #6f7884;
  font-weight: 600;
}

.member-moderation-body textarea {
  width: 100%;
  min-height: 82px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid #3b414a;
  border-radius: 9px;
  outline: none;
  background: #111318;
  color: #e1e5e9;
  font: inherit;
  font-size: 11px;
}

.member-moderation-body textarea:focus {
  border-color: #626b77;
}

.member-moderation-warning {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid #4b3e2d;
  border-radius: 8px;
  background: rgba(132, 96, 40, .08);
  color: #a89774;
  font-size: 9px;
  line-height: 1.45;
}

.member-moderation-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.moderation-kick-btn,
.moderation-ban-btn {
  min-height: 38px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
}

.moderation-kick-btn {
  border: 1px solid #5c5034;
  background: rgba(131, 104, 46, .10);
  color: #d0b16a;
}

.moderation-ban-btn {
  border: 1px solid #69363c;
  background: rgba(145,44,51,.13);
  color: #ed858a;
}

.member-moderation-status,
.moderation-status {
  margin-top: 11px;
  padding: 8px 10px;
  border: 1px solid #31563b;
  border-radius: 8px;
  background: rgba(46,109,64,.10);
  color: #80d197;
  font-size: 9px;
}

.member-moderation-status.error,
.moderation-status.error {
  border-color: #633339;
  background: rgba(145,44,51,.11);
  color: #eb858a;
}

.moderation-section {
  min-height: 0;
  padding: 12px 14px 0;
}

.moderation-section-title {
  padding: 3px 3px 7px;
  color: #7e8793;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
}

.moderation-list {
  max-height: 250px;
  overflow-y: auto;
  display: grid;
  gap: 5px;
  padding: 5px;
  border: 1px solid #2e333a;
  border-radius: 10px;
  background: #15181c;
}

.moderation-log-list {
  max-height: 300px;
}

.moderation-empty {
  padding: 28px 12px;
  color: #717a86;
  text-align: center;
  font-size: 10px;
}

.moderation-ban-item {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 8px;
  background: #1d2025;
}

.moderation-ban-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.moderation-ban-info strong {
  color: #e7eaee;
  font-size: 11px;
}

.moderation-ban-info span {
  color: #747d89;
  font-size: 8px;
}

.moderation-ban-info .moderation-ban-reason {
  margin-top: 2px;
  color: #9d8589;
  white-space: normal;
  overflow-wrap: anywhere;
}

.moderation-unban-btn {
  min-height: 31px;
  padding: 5px 9px;
  border: 1px solid #355d40;
  border-radius: 7px;
  background: rgba(48,119,67,.10);
  color: #83cd96;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}

.moderation-log-item {
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 8px;
  background: #1d2025;
}

.moderation-log-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #292d34;
  color: #b8c0ca;
  font-size: 12px;
}

.moderation-log-item.action-ban .moderation-log-icon {
  background: rgba(145,44,51,.12);
  color: #ed858a;
}

.moderation-log-item.action-unban .moderation-log-icon {
  background: rgba(48,119,67,.10);
  color: #83cd96;
}

.moderation-log-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.moderation-log-body strong {
  color: #e5e8ec;
  font-size: 10px;
}

.moderation-log-body span {
  color: #747d89;
  font-size: 8px;
}

.moderation-log-body .moderation-log-reason {
  margin-top: 2px;
  color: #a38d91;
  white-space: normal;
  overflow-wrap: anywhere;
}

.moderation-status {
  flex: 0 0 auto;
  margin: 10px 14px 14px;
}

@media (hover: none) and (pointer: coarse) {
  .presence-member-actions {
    gap: 5px;
  }

  .presence-moderate-btn,
  .presence-dm-btn {
    width: 32px;
    height: 32px;
  }

  .member-moderation-modal,
  .moderation-modal {
    align-items: flex-end;
    padding:
      8px
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .member-moderation-card,
  .moderation-card {
    width: 100%;
    max-height: 91vh;
    border-radius: 15px;
  }

  .member-moderation-header,
  .moderation-header {
    padding: 14px;
  }

  .moderation-ban-item {
    grid-template-columns: 1fr;
  }

  .moderation-unban-btn {
    width: 100%;
    min-height: 36px;
  }

  .moderation-list {
    max-height: 210px;
  }

  .moderation-log-list {
    max-height: 260px;
  }
}


/* v0.2-test-dev.21.1 — scalable server header menu */

.server-header-actions {
  position: relative;
  flex: 0 0 auto;
}

.server-quick-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}

.server-actions-btn.active {
  border-color: #606873;
  background: #2c3037;
  color: #fff;
}

.server-quick-menu {
  position: absolute;
  z-index: 250;
  top: calc(100% + 7px);
  right: 0;
  width: 190px;
  padding: 5px;
  border: 1px solid #393f48;
  border-radius: 10px;
  background: #191c21;
  box-shadow: 0 15px 45px rgba(0,0,0,.48);
}

.server-quick-menu-item {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #c8cdd4;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
  text-align: left;
}

.server-quick-menu-item:hover,
.server-quick-menu-item:focus-visible {
  outline: none;
  background: #272b31;
  color: #fff;
}

.server-quick-menu-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #24282e;
  color: #9da6b1;
  font-size: 11px;
  font-weight: 900;
}

@media (hover: none) and (pointer: coarse) {
  .server-quick-menu {
    width: min(230px, 74vw);
  }

  .server-quick-menu-item {
    min-height: 42px;
    padding: 8px 9px;
    font-size: 11px;
  }

  .server-quick-menu-icon {
    width: 28px;
    height: 28px;
  }
}


/* v0.2-test-dev.22 — custom roles and granular permissions */
.roles-modal-card-v22{width:min(940px,97vw);max-height:92vh}.roles-v22-layout{min-height:0;overflow-y:auto;display:grid;grid-template-columns:minmax(230px,.85fr) minmax(310px,1.15fr);gap:10px;padding:12px}.roles-v22-definitions,.roles-v22-members,.role-editor-panel{min-width:0;border:1px solid #2f343c;border-radius:10px;background:#16191e;padding:9px}.roles-v22-members{grid-column:1/-1}.roles-v22-section-title{min-height:30px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 3px 7px;color:#818a96;font-size:9px;font-weight:900;letter-spacing:.06em}.role-create-btn{min-height:28px;padding:5px 8px;border:1px solid #3c5140;border-radius:7px;background:rgba(48,119,67,.09);color:#85cb96;cursor:pointer;font-size:8px;font-weight:850}.role-definitions-list{display:grid;gap:4px}.role-definition-row{width:100%;min-height:52px;display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:8px;padding:7px 8px;border:1px solid transparent;border-radius:8px;background:#1e2126;color:inherit;text-align:left;cursor:pointer}.role-definition-row:not(:disabled):hover{border-color:#414852;background:#25292f}.role-definition-row:disabled{cursor:default}.role-definition-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:#292d34;color:#adb6c1;font-size:10px;font-weight:900}.role-definition-icon.owner{background:rgba(167,125,45,.13);color:#d7b45e}.role-definition-icon.admin{background:rgba(169,70,75,.11);color:#e18b90}.role-definition-icon.custom{background:rgba(67,91,130,.13);color:#93add7}.role-definition-info{min-width:0;display:flex;flex-direction:column;gap:2px}.role-definition-info strong{overflow:hidden;color:#e5e9ed;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.role-definition-info span{overflow:hidden;color:#707986;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.role-definition-arrow{color:#69727e;font-size:18px}.role-editor-name-label{display:block;margin:3px 2px 5px;color:#8d96a2;font-size:9px;font-weight:800}.role-editor-name{width:100%;min-height:36px;padding:7px 9px;border:1px solid #3b414a;border-radius:8px;outline:none;background:#101216;color:#e5e8ec;font-size:11px}.role-editor-name:focus{border-color:#626b77}.role-permissions-title{margin:13px 2px 6px;color:#818a96;font-size:9px;font-weight:900;letter-spacing:.06em}.role-permissions-grid{display:grid;gap:4px}.role-permission-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;background:#1e2126}.role-permission-row b{display:block;color:#dfe3e8;font-size:10px}.role-permission-row small{display:block;margin-top:2px;color:#747d89;font-size:8px;line-height:1.35}.role-permission-row input{width:18px;height:18px;accent-color:#c83940}.role-editor-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}.role-save-btn,.role-delete-btn,.role-cancel-btn{min-height:32px;padding:6px 10px;border-radius:7px;cursor:pointer;font-size:9px;font-weight:850}.role-save-btn{border:1px solid #355d40;background:rgba(48,119,67,.10);color:#83cd96}.role-delete-btn{border:1px solid #65363c;background:rgba(145,44,51,.10);color:#e18489}.role-cancel-btn{border:1px solid #3b424b;background:#24282e;color:#aeb6c0}.role-editor-hint{margin-top:9px;padding:8px 9px;border:1px solid #30363e;border-radius:8px;background:#13161a;color:#737c88;font-size:8px;line-height:1.45}.presence-role-badge.custom{border-color:#3d4d69;background:rgba(66,91,132,.10);color:#9aafd2}.role-static-badge.custom{border-color:#3d4d69;background:rgba(66,91,132,.10);color:#9aafd2}
@media (hover:none) and (pointer:coarse){.roles-modal-card-v22{width:100%;max-height:92vh}.roles-v22-layout{grid-template-columns:1fr;padding:8px}.roles-v22-members{grid-column:auto}.role-editor-panel{order:2}.roles-v22-members{order:3}.role-create-btn{min-height:34px}.role-definition-row{min-height:58px}.role-permission-row{grid-template-columns:minmax(0,1fr) 22px;padding:9px}.role-save-btn,.role-delete-btn,.role-cancel-btn{min-height:38px;flex:1 1 120px}}


/* v0.2-test-dev.23 — per-channel role permissions */

.channel-manager-action.permissions {
  color: #b9a46e;
}

.channel-permissions-modal {
  position: fixed;
  z-index: 432;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3,4,6,.86);
  backdrop-filter: blur(9px);
}

.channel-permissions-card {
  width: min(820px, 96vw);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #3c424b;
  border-radius: 15px;
  background: #191c21;
  box-shadow: 0 30px 110px rgba(0,0,0,.62);
}

.channel-permissions-header {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid #2e333a;
}

.channel-permissions-eyebrow {
  color: #b84247;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.channel-permissions-header h2 {
  margin: 4px 0 5px;
  color: #f1f2f4;
  font-size: 21px;
}

.channel-permissions-header p {
  margin: 0;
  color: #858d98;
  font-size: 11px;
}

.channel-permissions-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid #3a4049;
  border-radius: 9px;
  background: #24272d;
  color: #e0e4e9;
  cursor: pointer;
  font-size: 22px;
}

.channel-permissions-legend {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 14px;
  border-bottom: 1px solid #2e333a;
  background: #16191e;
  color: #79828d;
  font-size: 8px;
}

.channel-permissions-legend b {
  color: #b3bac3;
}

.channel-permissions-list {
  flex: 1 1 auto;
  min-height: 180px;
  overflow-y: auto;
  display: grid;
  gap: 5px;
  padding: 10px;
}

.channel-permission-role-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(300px, 1.35fr);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid #30353d;
  border-radius: 9px;
  background: #1d2025;
}

.channel-permission-role-row.owner {
  opacity: .7;
  background: #1a1d21;
}

.channel-permission-role-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.channel-permission-role-info strong {
  overflow: hidden;
  color: #e8ebef;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-permission-role-info span {
  color: #727b87;
  font-size: 8px;
}

.channel-permission-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.channel-permission-control {
  display: grid;
  gap: 4px;
}

.channel-permission-control > span {
  color: #838c98;
  font-size: 8px;
  font-weight: 800;
}

.channel-permission-select {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid #3b414a;
  border-radius: 8px;
  outline: none;
  background: #111318;
  color: #dce1e7;
  font-size: 10px;
}

.channel-permission-select:focus {
  border-color: #626b77;
}

.channel-permission-select:disabled {
  opacity: .58;
}

.channel-permissions-warning {
  flex: 0 0 auto;
  margin: 0 12px 10px;
  padding: 8px 10px;
  border: 1px solid #4e402f;
  border-radius: 8px;
  background: rgba(132,96,40,.07);
  color: #9e8b68;
  font-size: 9px;
  line-height: 1.45;
}

.channel-permissions-status {
  flex: 0 0 auto;
  margin: 0 12px 12px;
  padding: 8px 10px;
  border: 1px solid #31563b;
  border-radius: 8px;
  background: rgba(46,109,64,.10);
  color: #80d197;
  font-size: 9px;
}

.channel-permissions-status.error {
  border-color: #633339;
  background: rgba(145,44,51,.11);
  color: #eb858a;
}

@media (hover:none) and (pointer:coarse) {
  .channel-permissions-modal {
    align-items: flex-end;
    padding:
      8px
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .channel-permissions-card {
    width: 100%;
    max-height: 92vh;
    border-radius: 15px;
  }

  .channel-permissions-header {
    padding: 14px;
  }

  .channel-permission-role-row {
    grid-template-columns: 1fr;
  }

  .channel-permission-controls {
    grid-template-columns: 1fr 1fr;
  }
}


/* v0.2-test-dev.24 — channel categories + drag and drop */
.server-channel-groups{display:grid;gap:2px}.sidebar-channel-category{min-width:0}.channel-category-label{margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-category-channels{display:grid;gap:1px}
.channels-manager-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px 10px;border-bottom:1px solid #2d3239}.channels-manager-toolbar>div{min-width:0;display:flex;flex-direction:column;gap:2px}.channels-manager-toolbar strong{color:#858e9a;font-size:9px;letter-spacing:.06em}.channels-manager-toolbar span{color:#69727e;font-size:8px}
.channel-layout-manager{max-height:min(61vh,650px);overflow:auto;display:grid;gap:9px;padding:10px 12px}.channel-layout-manager.saving{pointer-events:none;opacity:.75}.channel-category-card{border:1px solid #30363e;border-radius:11px;background:#171a1f;overflow:hidden}.channel-category-card.dragging,.channel-manager-row.dragging{opacity:.28}.channel-category-card.uncategorized{border-style:dashed}.channel-category-manager-header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:7px 8px 7px 10px;border-bottom:1px solid #292e35;background:#1d2025}.channel-category-manager-title{min-width:0;display:flex;align-items:center;gap:8px}.channel-category-manager-title>div{min-width:0;display:flex;flex-direction:column;gap:2px}.channel-category-manager-title strong{overflow:hidden;color:#d7dce2;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.channel-category-manager-title span{color:#6f7884;font-size:8px}.category-drag-handle,.channel-drag-handle{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border:1px solid #353b44;border-radius:7px;background:#23272d;color:#7f8995;cursor:grab;touch-action:none;user-select:none;font-size:15px}.category-drag-handle:active,.channel-drag-handle:active{cursor:grabbing}.channel-category-manager-actions{display:flex;align-items:center;gap:4px}.category-add-channel-btn,.category-action-btn{min-height:30px;padding:5px 8px;border:1px solid #3a414b;border-radius:7px;background:#262a30;color:#b9c0c9;cursor:pointer;font-size:9px;font-weight:800}.category-action-btn{width:30px;padding:0}.category-action-btn.danger{border-color:#5d353a;color:#d3777d;background:rgba(145,44,51,.08)}.channel-category-dropzone{min-height:49px;display:grid;gap:4px;padding:6px}.channel-category-empty{padding:13px 10px;border:1px dashed #323841;border-radius:8px;color:#606a76;text-align:center;font-size:8px}.channel-category-dropzone:has(.channel-manager-row) .channel-category-empty{display:none}
.channel-manager-row{grid-template-columns:30px 34px minmax(0,1fr) auto!important}.channel-layout-ghost{position:fixed!important;z-index:9999!important;margin:0!important;pointer-events:none!important;opacity:.92!important;transform:rotate(.7deg);box-shadow:0 16px 55px rgba(0,0,0,.55)}body.channel-layout-dragging{user-select:none;cursor:grabbing}.channel-layout-manager .channel-manager-actions{display:flex;gap:4px}
@media (hover:none) and (pointer:coarse){.channels-manager-toolbar{align-items:flex-start;flex-direction:column}.channels-manager-toolbar .channel-add-btn{width:100%}.channel-layout-manager{max-height:64vh;padding:8px}.channel-category-manager-header{align-items:flex-start;flex-wrap:wrap}.channel-category-manager-actions{width:100%;justify-content:flex-end}.category-drag-handle,.channel-drag-handle{width:36px;height:36px}.channel-manager-row{grid-template-columns:36px 34px minmax(0,1fr)!important}.channel-manager-actions{grid-column:2/-1;justify-content:flex-end}.category-add-channel-btn{min-height:34px}}


/* v0.2-test-dev.24.1 — stable channel/category drag */

.channel-layout-manager {
  overscroll-behavior: contain;
}

.channel-layout-placeholder {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  border: 1px dashed #59626e;
  border-radius: 9px;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(104,114,126,.07),
      rgba(104,114,126,.07) 8px,
      rgba(104,114,126,.025) 8px,
      rgba(104,114,126,.025) 16px
    );
}

.channel-layout-placeholder-channel {
  margin: 0;
}

.channel-layout-placeholder-category {
  min-height: 54px;
  margin: 0;
  border-color: #6a5b3c;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(138,108,53,.08),
      rgba(138,108,53,.08) 8px,
      rgba(138,108,53,.025) 8px,
      rgba(138,108,53,.025) 16px
    );
}

.channel-layout-ghost {
  position: fixed !important;
  z-index: 9999 !important;
  top: 0 !important;
  left: 0 !important;
  width: auto !important;
  max-width: min(360px, 80vw);
  min-height: 38px;
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  margin: 0 !important;
  border: 1px solid #505864;
  border-radius: 9px;
  background: rgba(29,32,37,.98);
  color: #e5e8ec;
  pointer-events: none !important;
  opacity: .98 !important;
  transform: translate3d(-9999px,-9999px,0);
  box-shadow: 0 16px 55px rgba(0,0,0,.58);
  will-change: transform;
}

.channel-layout-ghost-category {
  border-color: #665537;
}

.channel-layout-ghost-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #252a30;
  color: #8e98a5;
  font-size: 13px;
}

.channel-layout-ghost-label {
  min-width: 0;
  overflow: hidden;
  color: #e6e9ed;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.channel-layout-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}

body.channel-layout-dragging * {
  cursor: grabbing !important;
}

.channel-layout-manager.saving {
  pointer-events: none;
}

@media (hover:none) and (pointer:coarse) {
  .channel-layout-ghost {
    max-width: 78vw;
    min-height: 42px;
    padding: 9px 12px;
  }

  .channel-layout-placeholder {
    min-height: 50px;
  }
}


/* v0.2-test-dev.25 — collapsible channel categories */

.sidebar-channel-category {
  min-width: 0;
}

.channel-category-toggle {
  width: 100%;
  min-height: 27px;
  display: grid;
  grid-template-columns: 14px minmax(0,1fr) auto;
  align-items: center;
  gap: 3px;
  padding: 4px 5px 3px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.channel-category-toggle:hover {
  color: #c0c8d2;
}

.channel-category-chevron {
  width: 13px;
  display: grid;
  place-items: center;
  color: #68727e;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.channel-category-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-category-summary-badge {
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 9px;
  background: #393e46;
  color: #d2d7de;
  font-size: 8px;
  font-weight: 900;
}

.channel-category-summary-badge.mention {
  background: #bc343b;
  color: #fff;
}

.sidebar-channel-category.collapsed
  .sidebar-category-channels
  > .channel:not(.active) {
  display: none;
}

.sidebar-channel-category.collapsed
  .sidebar-category-channels
  > .sidebar-room-users {
  display: none;
}

.sidebar-channel-category.collapsed
  .sidebar-category-channels {
  gap: 0;
}

/*
  A selected channel stays visible even inside a collapsed category.
  This keeps navigation clear when Search/notification opens a channel.
*/
.sidebar-channel-category.collapsed
  .sidebar-category-channels
  > .channel.active {
  display: flex;
}

@media (hover:none) and (pointer:coarse) {
  .channel-category-toggle {
    min-height: 34px;
    grid-template-columns: 18px minmax(0,1fr) auto;
    padding: 6px 7px 5px 2px;
  }

  .channel-category-chevron {
    width: 17px;
    font-size: 16px;
  }

  .channel-category-summary-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 9px;
  }

  .sidebar-category-channels {
    gap: 0;
  }

  .sidebar-channel-category + .sidebar-channel-category {
    margin-top: 2px;
  }
}


/* v0.2-test-dev.26 — channel/category quick context menus */

.quick-context-menu {
  position: fixed;
  z-index: 520;
  width: min(255px, calc(100vw - 16px));
  max-height: min(520px, calc(100vh - 16px));
  overflow-y: auto;
  padding: 5px;
  border: 1px solid #3a4049;
  border-radius: 10px;
  background: rgba(24,27,32,.99);
  box-shadow: 0 18px 60px rgba(0,0,0,.58);
  backdrop-filter: blur(10px);
}

.quick-context-item {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #c8ced6;
  cursor: pointer;
  text-align: left;
}

.quick-context-item:hover,
.quick-context-item:focus-visible {
  outline: none;
  background: #282c33;
  color: #fff;
}

.quick-context-item.active {
  background: rgba(147,112,53,.10);
  color: #dec173;
}

.quick-context-item.danger {
  color: #df7a80;
}

.quick-context-item.danger:hover,
.quick-context-item.danger:focus-visible {
  background: rgba(145,44,51,.14);
  color: #ff969b;
}

.quick-context-item:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.quick-context-item-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #24282e;
  color: #9fa8b4;
  font-size: 10px;
  font-weight: 900;
}

.quick-context-item.active
  .quick-context-item-icon {
  background: rgba(147,112,53,.15);
  color: #dec173;
}

.quick-context-item-label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.quick-context-item-label strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-context-item-label small {
  overflow: hidden;
  color: #737d89;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-context-divider {
  height: 1px;
  margin: 4px 5px;
  background: #32373f;
}

.quick-action-toast.error {
  border-left-color: #d8545a;
}

.quick-action-toast.error
  .notification-toast-icon {
  background: rgba(145,44,51,.14);
  color: #ff858a;
}

/* Keep the ordinary click area comfortable because long press now exists. */
.channel-category-toggle,
.channel.text-channel,
.channel.voice-channel {
  -webkit-touch-callout: none;
}

@media (hover:none) and (pointer:coarse) {
  .quick-context-menu {
    width: min(300px, calc(100vw - 16px));
    padding: 6px;
    border-radius: 12px;
  }

  .quick-context-item {
    min-height: 48px;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 9px;
    padding: 8px 9px;
    border-radius: 9px;
  }

  .quick-context-item-icon {
    width: 33px;
    height: 33px;
    font-size: 12px;
  }

  .quick-context-item-label strong {
    font-size: 11px;
  }

  .quick-context-item-label small {
    font-size: 9px;
  }
}


/* v0.2-test-dev.27 — member context menu + user profile card */
.presence-member[data-member-user-id]{cursor:default;-webkit-touch-callout:none}
.user-profile-modal{position:fixed;z-index:430;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,4,6,.84);backdrop-filter:blur(9px)}
.user-profile-card{width:min(520px,96vw);max-height:90vh;overflow-y:auto;border:1px solid #3b414a;border-radius:16px;background:#191c21;box-shadow:0 30px 110px rgba(0,0,0,.64)}
.user-profile-cover{position:relative;height:92px;background:radial-gradient(circle at 22% 0%,rgba(172,44,51,.30),transparent 42%),linear-gradient(135deg,#3c1519 0%,#23191c 42%,#181b20 100%);border-bottom:1px solid #3a3033}.user-profile-close{position:absolute;top:10px;right:10px;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(13,15,18,.62);color:#e3e6ea;cursor:pointer;font-size:22px}
.user-profile-main{position:relative;padding:0 16px 16px}.user-profile-avatar{width:76px;height:76px;display:grid;place-items:center;margin-top:-38px;border:5px solid #191c21;border-radius:50%;background:linear-gradient(145deg,#31363e,#20242a);color:#f0f2f5;box-shadow:0 9px 28px rgba(0,0,0,.35);font-size:25px;font-weight:900}.user-profile-identity{margin-top:8px}.user-profile-name-line{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.user-profile-name-line h2{margin:0;color:#f0f2f5;font-size:21px}.user-profile-online{padding:3px 7px;border-radius:10px;background:#292e35;color:#8b949f;font-size:8px;font-weight:850}.user-profile-online.online{background:rgba(55,137,76,.13);color:#78d48e}.user-profile-role{margin-top:3px;color:#9ea6b1;font-size:10px;font-weight:750}
.user-profile-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:14px}.user-profile-action{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px;border:1px solid #373d46;border-radius:9px;background:#22262c;color:#c9cfd7;cursor:pointer}.user-profile-action:hover:not(:disabled){border-color:#525b67;background:#282d34;color:#fff}.user-profile-action.danger{border-color:#573338;color:#d7797f}.user-profile-action:disabled{opacity:.42;cursor:default}.user-profile-action>span{font-size:15px}.user-profile-action>strong{font-size:9px}
.user-profile-section{margin-top:14px;padding-top:12px;border-top:1px solid #2f343b}.user-profile-section-title{margin-bottom:8px;color:#747e8a;font-size:8px;font-weight:900;letter-spacing:.06em}.user-profile-facts{display:grid;grid-template-columns:1fr 1fr;gap:7px}.user-profile-fact{min-width:0;padding:8px 9px;border:1px solid #30363d;border-radius:8px;background:#16191e}.user-profile-fact span{display:block;color:#6f7884;font-size:8px}.user-profile-fact strong{display:block;overflow:hidden;margin-top:3px;color:#d6dbe1;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.user-profile-role-editor{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.user-profile-role-editor select{min-width:0;min-height:36px;padding:6px 8px;border:1px solid #3b414a;border-radius:8px;outline:none;background:#111318;color:#dce1e7;font-size:10px}.user-profile-role-editor button{min-height:36px;padding:6px 11px;border:1px solid #425248;border-radius:8px;background:rgba(50,112,68,.10);color:#85ce99;cursor:pointer;font-size:9px;font-weight:850}
.user-profile-common-servers{display:grid;gap:5px}.user-profile-server-row{width:100%;min-height:50px;display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:8px;padding:7px 8px;border:1px solid #30363d;border-radius:8px;background:#1d2025;color:inherit;cursor:pointer;text-align:left}.user-profile-server-row:hover{border-color:#454d58;background:#24282e}.user-profile-server-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#2a2e35;color:#d4d9df;font-size:11px;font-weight:900}.user-profile-server-info{min-width:0;display:flex;flex-direction:column;gap:2px}.user-profile-server-info strong,.user-profile-server-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-profile-server-info strong{color:#e2e6ea;font-size:10px}.user-profile-server-info span{color:#747d89;font-size:8px}.user-profile-server-arrow{color:#626b77;font-size:18px}
.user-profile-status{margin-top:12px;padding:8px 10px;border:1px solid #31563b;border-radius:8px;background:rgba(46,109,64,.10);color:#80d197;font-size:9px}.user-profile-status.error{border-color:#633339;background:rgba(145,44,51,.11);color:#eb858a}
@media(hover:none) and (pointer:coarse){.user-profile-modal{align-items:flex-end;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.user-profile-card{width:100%;max-height:92vh;border-radius:16px}.user-profile-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.user-profile-action{min-height:58px}.user-profile-facts{grid-template-columns:1fr}.user-profile-role-editor{grid-template-columns:1fr}.user-profile-role-editor button{width:100%;min-height:40px}}


/* v0.2-test-dev.27.1 — mobile long-press selection hotfix */

.quick-context-target,
.quick-context-target * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

.quick-context-target {
  touch-action: pan-y;
}

/*
  Safari/iOS may otherwise start native text selection/callout before
  the ~520 ms REDNexus long-press menu opens.  Restricting selection
  only to context-menu targets preserves normal text selection in
  message content and text inputs.
*/


/* v0.2-test-dev.27.2 — mobile member-row interaction hotfix */

@media (hover:none) and (pointer:coarse) {
  .presence-member[data-member-user-id] {
    cursor: pointer;
  }

  .presence-member[data-member-user-id]:active {
    background: rgba(255,255,255,.035);
  }
}


/* v0.2-test-dev.28 — richer profiles + voice-aware members */

.user-profile-actions {
  grid-template-columns:
    repeat(auto-fit, minmax(92px, 1fr));
}

.user-profile-voice-row {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid #343b44;
  border-radius: 9px;
  background: #1d2127;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.user-profile-voice-row:hover {
  border-color: #4a5664;
  background: #242a31;
}

.user-profile-voice-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #292f36;
  font-size: 13px;
}

.user-profile-voice-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-profile-voice-info strong,
.user-profile-voice-info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-voice-info strong {
  color: #e3e7eb;
  font-size: 10px;
}

.user-profile-voice-info span {
  color: #7d8793;
  font-size: 8px;
}

.presence-member-state.voice {
  color: #91a9c4;
}

.voice-person.voice-member-target,
.sidebar-user.voice-member-target {
  cursor: pointer;
  -webkit-touch-callout: none;
}

.voice-person.voice-member-target:hover {
  border-color: #4b5562;
}

.voice-person.voice-member-target:focus-visible,
.sidebar-user.voice-member-target:focus-visible {
  outline: 1px solid #667486;
  outline-offset: 2px;
}

.sidebar-user.voice-member-target:hover {
  background: rgba(255,255,255,.035);
}

@media (hover:none) and (pointer:coarse) {
  .voice-person.voice-member-target:active,
  .sidebar-user.voice-member-target:active {
    background: rgba(255,255,255,.045);
  }
}


/* v0.2-test-dev.29 — editable profile, status, bio, avatar */

.user-avatar-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.user-profile-avatar.has-user-avatar,
.presence-avatar.has-user-avatar,
.person-avatar.has-user-avatar,
#localAvatar.has-user-avatar {
  overflow: hidden;
  padding: 0;
}

#localAvatar,
#localName {
  cursor: pointer;
}

.user-profile-custom-status {
  margin-top: 6px;
  max-width: 100%;
  color: #c6ccd3;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.user-profile-bio {
  padding: 10px 11px;
  border: 1px solid #30363d;
  border-radius: 9px;
  background: #16191e;
  color: #c8ced6;
  font-size: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.user-profile-edit-section {
  scroll-margin: 12px;
}

.user-profile-edit-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 5px;
  color: #949da8;
  font-size: 9px;
  font-weight: 800;
}

.user-profile-edit-label > span {
  color: #68717d;
  font-size: 8px;
  font-weight: 700;
}

.user-profile-edit-input,
.user-profile-edit-textarea,
.user-profile-avatar-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #3b424b;
  border-radius: 8px;
  outline: none;
  background: #111419;
  color: #e0e4e8;
  font-size: 10px;
}

.user-profile-edit-input {
  min-height: 38px;
  padding: 8px 10px;
}

.user-profile-edit-textarea {
  min-height: 92px;
  padding: 9px 10px;
  resize: vertical;
  line-height: 1.45;
}

.user-profile-avatar-input {
  padding: 8px;
  color: #9ca5b0;
}

.user-profile-edit-input:focus,
.user-profile-edit-textarea:focus,
.user-profile-avatar-input:focus {
  border-color: #5c6877;
}

.user-profile-edit-actions {
  display: grid;
  grid-template-columns:
    minmax(0,1.4fr)
    minmax(0,1fr)
    auto;
  gap: 7px;
  margin-top: 11px;
}

.user-profile-edit-actions button {
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 850;
}

.user-profile-edit-save {
  border: 1px solid #3e5f49;
  background: rgba(46,109,64,.13);
  color: #84d09a;
}

.user-profile-avatar-delete {
  border: 1px solid #62363b;
  background: rgba(145,44,51,.10);
  color: #df7c82;
}

.user-profile-edit-cancel {
  border: 1px solid #3b4149;
  background: #22262c;
  color: #aeb5be;
}

.user-profile-edit-actions button:disabled {
  opacity: .45;
  cursor: default;
}

.presence-member-state.custom {
  color: #929ca8;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presence-avatar,
.person-avatar,
#localAvatar {
  flex: 0 0 auto;
}

@media (hover:none) and (pointer:coarse) {
  .user-profile-edit-input,
  .user-profile-edit-textarea,
  .user-profile-avatar-input {
    font-size: 16px;
  }

  .user-profile-edit-actions {
    grid-template-columns: 1fr;
  }

  .user-profile-edit-actions button {
    min-height: 44px;
  }

  #localAvatar,
  #localName {
    touch-action: manipulation;
  }
}


/* v0.2-test-dev.30 — voice device settings */

.voice-settings-btn:not(:disabled):hover {
  background: #343941;
}

.voice-settings-modal {
  position: fixed;
  z-index: 440;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3,4,6,.84);
  backdrop-filter: blur(9px);
}

.voice-settings-card {
  width: min(560px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid #3b414a;
  border-radius: 15px;
  background: #191c21;
  box-shadow: 0 30px 110px rgba(0,0,0,.64);
}

.voice-settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid #30353c;
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(122,39,45,.18),
      transparent 45%
    );
}

.voice-settings-header h2 {
  margin: 3px 0 0;
  color: #edf0f3;
  font-size: 20px;
}

.voice-settings-header p {
  margin: 5px 0 0;
  color: #7e8792;
  font-size: 9px;
}

.voice-settings-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #3b424b;
  border-radius: 9px;
  background: #23272d;
  color: #d7dce2;
  cursor: pointer;
  font-size: 20px;
}

.voice-settings-body {
  padding: 16px;
}

.voice-settings-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  color: #9ca5b0;
  font-size: 9px;
  font-weight: 850;
}

.voice-settings-label:not(:first-child) {
  margin-top: 15px;
}

.voice-settings-label > span {
  color: #737d89;
  font-size: 8px;
}

.voice-settings-select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #3b424b;
  border-radius: 8px;
  outline: none;
  background: #111419;
  color: #dfe3e7;
  font-size: 10px;
}

.voice-settings-select:disabled {
  opacity: .55;
}

.voice-settings-hint {
  margin-top: 5px;
  color: #69737f;
  font-size: 8px;
  line-height: 1.45;
}

.voice-settings-range {
  width: 100%;
  accent-color: #9f3037;
}

.voice-settings-meter-card {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #30363d;
  border-radius: 9px;
  background: #15181d;
}

.voice-settings-meter-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #8f99a5;
  font-size: 8px;
  font-weight: 800;
}

.voice-settings-meter-track {
  height: 9px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #292e35;
}

.voice-settings-meter-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #467c56,
      #a4a151,
      #a7444a
    );
  transition: width .05s linear;
}

.voice-settings-meter-actions {
  display: flex;
  gap: 7px;
  margin-top: 9px;
}

.voice-settings-meter-actions button,
.voice-settings-actions button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #3b424b;
  border-radius: 8px;
  background: #22262c;
  color: #c8ced6;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}

.voice-settings-meter-actions button:hover,
.voice-settings-actions button:hover {
  border-color: #505965;
  background: #292e35;
  color: #fff;
}

.voice-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 17px;
  padding-top: 13px;
  border-top: 1px solid #2d3239;
}

#voiceSettingsDoneBtn {
  border-color: #3e5f49;
  background: rgba(46,109,64,.12);
  color: #84d09a;
}

.voice-settings-status {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #31563b;
  border-radius: 8px;
  background: rgba(46,109,64,.10);
  color: #80d197;
  font-size: 9px;
  line-height: 1.45;
}

.voice-settings-status.error {
  border-color: #633339;
  background: rgba(145,44,51,.11);
  color: #eb858a;
}

@media (max-width: 390px) {
  .user-panel {
    grid-template-columns:
      34px
      minmax(0,1fr)
      repeat(5, 28px);
    gap: 4px;
  }

  .control-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
}

@media (hover:none) and (pointer:coarse) {
  .voice-settings-modal {
    align-items: flex-end;
    padding:
      8px
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .voice-settings-card {
    width: 100%;
    max-height: 92vh;
  }

  .voice-settings-select {
    min-height: 46px;
    font-size: 16px;
  }

  .voice-settings-meter-actions,
  .voice-settings-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .voice-settings-meter-actions button,
  .voice-settings-actions button {
    min-height: 44px;
  }
}


/* v0.2-test-dev.31 — account security */
.account-security-modal{position:fixed;z-index:445;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,4,6,.86);backdrop-filter:blur(9px)}
.account-security-card{width:min(620px,96vw);max-height:90vh;overflow-y:auto;border:1px solid #3b414a;border-radius:15px;background:#191c21;box-shadow:0 30px 110px rgba(0,0,0,.64)}
.account-security-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px;border-bottom:1px solid #30353c;background:radial-gradient(circle at 0% 0%,rgba(128,42,47,.20),transparent 46%)}
.account-security-header h2{margin:3px 0 0;color:#edf0f3;font-size:20px}.account-security-header p{margin:5px 0 0;color:#7f8995;font-size:9px}.account-security-close{width:36px;height:36px;display:grid;place-items:center;border:1px solid #3b424b;border-radius:9px;background:#23272d;color:#d7dce2;cursor:pointer;font-size:20px}
.account-security-body{padding:16px}.account-security-section+.account-security-section{margin-top:18px;padding-top:16px;border-top:1px solid #30353c}.account-security-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}.account-security-section-head>div{min-width:0;display:flex;flex-direction:column;gap:3px}.account-security-section-head strong{color:#dfe4e8;font-size:11px}.account-security-section-head span{color:#747e8a;font-size:8px;line-height:1.45}
.account-security-section-head>button,.account-danger-outline,.account-password-save{min-height:36px;padding:7px 11px;border-radius:8px;cursor:pointer;font-size:9px;font-weight:850}.account-security-section-head>button{border:1px solid #3c434c;background:#22262c;color:#bfc6ce}.account-sessions-list{display:grid;gap:7px}.account-session-row{min-height:72px;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px 9px;border:1px solid #333941;border-radius:9px;background:#171a1f}.account-session-row.current{border-color:#3b5744;background:rgba(46,109,64,.07)}
.account-session-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#272c33;color:#aeb6c0;font-size:15px}.account-session-info{min-width:0;display:flex;flex-direction:column;gap:3px}.account-session-info strong,.account-session-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-session-info strong{color:#dde2e7;font-size:10px}.account-session-info span{color:#737d89;font-size:8px}.account-session-info .account-session-geo{color:#8b949e}.account-session-current{padding:4px 7px;border-radius:999px;background:rgba(55,137,76,.13);color:#7bd090;font-size:7px;font-weight:900}.account-session-revoke{min-height:32px;padding:6px 9px;border:1px solid #59363b;border-radius:7px;background:rgba(145,44,51,.09);color:#da747b;cursor:pointer;font-size:8px;font-weight:850}
.account-danger-outline{width:100%;margin-top:9px;border:1px solid #60383d;background:rgba(145,44,51,.08);color:#df7a80}.account-danger-outline:disabled,.account-session-revoke:disabled,.account-password-save:disabled{opacity:.45;cursor:default}.account-security-label{display:block;margin:10px 0 5px;color:#939da8;font-size:9px;font-weight:800}.account-security-input{width:100%;min-height:39px;box-sizing:border-box;padding:8px 10px;border:1px solid #3b424b;border-radius:8px;outline:none;background:#111419;color:#e0e4e8;font-size:10px}.account-security-input:focus{border-color:#5b6776}.account-password-save{width:100%;margin-top:12px;border:1px solid #405e49;background:rgba(46,109,64,.12);color:#84d09a}.account-security-status{margin-top:14px;padding:8px 10px;border:1px solid #31563b;border-radius:8px;background:rgba(46,109,64,.10);color:#80d197;font-size:9px;line-height:1.45}.account-security-status.error{border-color:#633339;background:rgba(145,44,51,.11);color:#eb858a}
@media(hover:none) and (pointer:coarse){.account-security-modal{align-items:flex-end;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.account-security-card{width:100%;max-height:92vh}.account-security-input{min-height:46px;font-size:16px}.account-session-row{grid-template-columns:40px minmax(0,1fr) auto;min-height:64px}.account-session-revoke,.account-danger-outline,.account-password-save,.account-security-section-head>button{min-height:44px}}


/* v0.2-test-dev.33 — REDNexus TURN infrastructure. Legacy redvoice-* technical keys remain intentionally compatible. */


/* v0.2-test-dev.34 — REDNexus password recovery */
.auth-text-link {
  border: 0;
  padding: 2px 0;
  background: transparent;
  color: #aeb4bf;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
.auth-text-link:hover { color: #ffffff; }
.auth-forgot-link {
  justify-self: end;
  margin-top: -5px;
  margin-bottom: 2px;
}
.auth-section-title {
  margin-bottom: 2px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
}
.auth-section-copy {
  margin-bottom: 8px;
  color: #9299a5;
  font-size: 13px;
  line-height: 1.5;
}


/* v0.2-test-dev.39.1.1.1 — camera + screen sharing */
.voice-media-toolbar {
  width: min(760px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #343840;
  border-radius: 12px;
  background: #181a1f;
}

.voice-media-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.voice-media-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid #3a3e46;
  border-radius: 9px;
  background: #24272d;
  color: #d7dbe2;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: .14s ease;
}

.voice-media-btn:hover:not(:disabled) {
  border-color: #5a606b;
  background: #2b2f36;
}

.voice-media-btn.active {
  border-color: #a92d32;
  background: #391d20;
  color: #ffb1b3;
  box-shadow: 0 0 0 1px rgba(193, 45, 51, .18), 0 0 18px rgba(193, 45, 51, .08);
}

.voice-media-btn:disabled {
  opacity: .48;
  cursor: default;
}

.voice-media-icon {
  font-size: 15px;
  line-height: 1;
}

.voice-media-hint {
  min-width: 0;
  color: #7f8793;
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.video-stage {
  width: min(1100px, 100%);
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #343840;
  border-radius: 14px;
  background: #111318;
}

.video-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: #8a929e;
  font-size: 11px;
  font-weight: 800;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 10px;
}

.video-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #343840;
  border-radius: 12px;
  background: #08090c;
}

.video-tile.screen-share {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.video-tile video {
  width: 100%;
  height: 100%;
  display: block;
  background: #08090c;
  object-fit: cover;
}

.video-tile.screen-share video {
  object-fit: contain;
}

.video-tile.local-camera video {
  transform: scaleX(-1);
}

.video-tile-footer {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.video-tile-name,
.video-tile-source {
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(10, 11, 14, .78);
  backdrop-filter: blur(8px);
  color: #f0f2f6;
  font-size: 11px;
  font-weight: 800;
}

.video-tile-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-tile-source {
  flex: 0 0 auto;
  color: #b9bec8;
  font-size: 9px;
  letter-spacing: .4px;
}

.video-tile.speaking {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(67,209,109,.45), 0 0 24px rgba(67,209,109,.08);
}

@media (max-width: 720px) {
  .voice-media-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .voice-media-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .voice-media-btn {
    width: 100%;
  }

  .voice-media-hint {
    text-align: left;
  }

  .video-stage {
    padding: 8px;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }
}


/* v0.2-test-dev.39.1.1.1 — Video / Stream Quality v2 */
.video-settings-card {
  width: min(620px, calc(100vw - 28px));
}

.video-settings-section-title {
  color: #e6e9ef;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.video-settings-section-spaced {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #2c3037;
}

.video-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.video-settings-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #aeb5c0;
  font-size: 11px;
  font-weight: 800;
}

.video-settings-hint {
  padding: 10px 12px;
  border: 1px solid #2d3138;
  border-radius: 9px;
  background: #15171c;
  line-height: 1.45;
}

.video-grid[data-feed-count="1"] {
  grid-template-columns: 1fr;
}

.video-grid[data-feed-count="2"],
.video-grid[data-feed-count="3"],
.video-grid[data-feed-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.video-grid[data-feed-count="5"],
.video-grid[data-feed-count="6"],
.video-grid[data-feed-count="many"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.video-tile.focused {
  grid-column: 1 / -1;
  order: -20;
  box-shadow: 0 0 0 1px rgba(201, 49, 55, .38), 0 0 28px rgba(201, 49, 55, .10);
}

.video-tile-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.video-tile-action {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: rgba(10, 11, 14, .78);
  backdrop-filter: blur(8px);
  color: #f0f2f6;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  opacity: .72;
  transition: .14s ease;
}

.video-tile:hover .video-tile-action,
.video-tile-action:focus-visible,
.video-tile.focused .video-tile-action {
  opacity: 1;
}

.video-tile-action:hover {
  border-color: #646b76;
  background: rgba(35, 38, 44, .94);
}

.video-tile-quality {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  max-width: calc(100% - 96px);
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(10, 11, 14, .72);
  color: #adb4bf;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .3px;
  pointer-events: none;
}

@media (max-width: 920px) {
  .video-grid[data-feed-count="5"],
  .video-grid[data-feed-count="6"],
  .video-grid[data-feed-count="many"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .voice-media-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .video-settings-grid {
    grid-template-columns: 1fr;
  }

  .video-grid[data-feed-count="1"],
  .video-grid[data-feed-count="2"],
  .video-grid[data-feed-count="3"],
  .video-grid[data-feed-count="4"],
  .video-grid[data-feed-count="5"],
  .video-grid[data-feed-count="6"],
  .video-grid[data-feed-count="many"] {
    grid-template-columns: 1fr;
  }

  .video-tile-action {
    width: 36px;
    height: 36px;
    opacity: .92;
  }
}


/* v0.2-test-dev.39.1.1.1 — per-participant local audio controls */
.voice-person {
  grid-template-columns: 42px minmax(0, 1fr) minmax(180px, 245px);
}

.person-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.person-main .person-state {
  margin: 0;
}

.participant-audio-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 5px 7px;
  padding: 5px 6px;
  border: 1px solid #343940;
  border-radius: 9px;
  background: rgba(14, 16, 20, .48);
}

.participant-local-mute {
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #414852;
  border-radius: 8px;
  background: #20242a;
  color: #d4d9df;
  cursor: pointer;
  font-size: 14px;
}

.participant-local-mute:hover {
  border-color: #5a6572;
  background: #292e35;
}

.participant-local-mute.active {
  border-color: #6d343a;
  background: rgba(133, 42, 49, .17);
  color: #ef7f85;
}

.participant-volume-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 35px minmax(50px, 1fr) 34px;
  align-items: center;
  gap: 5px;
  color: #89929d;
  font-size: 9px;
}

.participant-volume-row.screen-audio {
  color: #a28d65;
}

.participant-volume-label {
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.participant-volume-row input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: #a43b43;
  cursor: pointer;
}

.participant-volume-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #a8b0ba;
  font-size: 8px;
}

@media (max-width: 780px) {
  .voice-person {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .participant-audio-controls {
    grid-column: 2;
    width: 100%;
    margin-top: 3px;
  }

  .person-state {
    grid-column: auto;
    margin-top: 0;
  }
}

@media (hover:none) and (pointer:coarse) {
  .participant-local-mute {
    width: 38px;
    height: 38px;
  }

  .participant-audio-controls {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 7px;
  }

  .participant-volume-row {
    min-height: 28px;
    grid-template-columns: 36px minmax(70px, 1fr) 36px;
  }

  .participant-volume-row input[type="range"] {
    min-height: 24px;
  }
}


/* v0.2-test-dev.39.1.1.1 — Voice Channel UX v2 + infrastructure monitoring */

.voice-person {
  position: relative;
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.person-media-badges {
  min-height: 17px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.person-media-badge {
  min-width: 21px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid #343a42;
  border-radius: 5px;
  background: rgba(12, 14, 18, .38);
  color: #7c858f;
  font-size: 9px;
  line-height: 1;
}

.person-media-badge.active {
  border-color: #3f5050;
  color: #bdc8cb;
}

.person-media-badge.mic.active {
  color: #67d98a;
}

.person-media-badge.mic.muted {
  border-color: #4d3235;
  color: #d16f76;
}

.person-media-badge.screen.active {
  border-color: #5e4c31;
  color: #e5bd71;
}

.participant-audio-box {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.participant-audio-toggle {
  min-width: 78px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #3c434c;
  border-radius: 8px;
  background: #20242a;
  color: #c5cbd2;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.participant-audio-toggle:hover,
.participant-audio-toggle.active {
  border-color: #5b6570;
  background: #292e35;
}

.participant-audio-toggle.muted {
  border-color: #61373c;
  color: #ee868d;
}

.participant-audio-controls {
  position: absolute;
  z-index: 35;
  top: calc(100% + 7px);
  right: 0;
  width: min(270px, 72vw);
  min-width: 220px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .42);
}

.voice-grid.dense {
  gap: 5px;
}

.voice-grid.dense .voice-person {
  padding: 7px 9px;
}

.voice-grid.dense .person-avatar {
  width: 36px;
  height: 36px;
}

.voice-grid.dense .person-name {
  font-size: 12px;
}

.voice-grid.dense .person-state {
  font-size: 10px;
}

/* Monitoring */
.monitoring-modal {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 5, 7, .78);
  backdrop-filter: blur(8px);
}

.monitoring-card {
  width: min(920px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  overflow: auto;
  padding: 22px;
  border: 1px solid #353b43;
  border-radius: 16px;
  background: #171a1f;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
}

.monitoring-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.monitoring-eyebrow,
.monitoring-section-title {
  color: #9c4249;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.monitoring-header h2 {
  margin: 4px 0 4px;
}

.monitoring-header p,
.monitoring-status {
  color: #858e99;
  font-size: 11px;
}

.monitoring-close {
  width: 36px;
  height: 36px;
  border: 1px solid #3b424b;
  border-radius: 9px;
  background: #21252b;
  color: #c4cad1;
  cursor: pointer;
  font-size: 20px;
}

.monitoring-state-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 18px;
  color: #77808a;
  font-size: 10px;
}

.monitoring-state {
  padding: 5px 9px;
  border: 1px solid #315541;
  border-radius: 999px;
  background: rgba(44, 115, 74, .12);
  color: #6ed792;
  font-weight: 900;
}

.monitoring-state.watch {
  border-color: #68552d;
  background: rgba(151, 111, 37, .12);
  color: #e6bc64;
}

.monitoring-state.high {
  border-color: #6c3439;
  background: rgba(153, 46, 55, .13);
  color: #ef8188;
}

.monitoring-section-title {
  margin: 18px 0 8px;
}

.monitoring-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.monitoring-grid.livekit {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.monitoring-metric {
  min-width: 0;
  padding: 12px;
  border: 1px solid #30363e;
  border-radius: 11px;
  background: #1e2228;
}

.monitoring-metric span,
.monitoring-metric small {
  display: block;
  overflow: hidden;
  color: #7d8791;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-metric strong {
  display: block;
  margin: 7px 0 4px;
  color: #e0e4e8;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.monitoring-metric.compact strong {
  font-size: 23px;
}

.monitoring-rooms-list {
  display: grid;
  gap: 6px;
}

.monitoring-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 11px;
  border: 1px solid #2d333a;
  border-radius: 9px;
  background: #1d2025;
}

.monitoring-room-title {
  min-width: 0;
  overflow: hidden;
  color: #c7cdd3;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-room-stats {
  flex: 0 0 auto;
  color: #7e8791;
  font-size: 9px;
}

.monitoring-status {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #2d3238;
}

@media (max-width: 820px) {
  .monitoring-modal {
    padding: 10px;
  }

  .monitoring-card {
    max-height: calc(100vh - 20px);
    padding: 15px;
  }

  .monitoring-grid,
  .monitoring-grid.livekit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-room-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .participant-audio-controls {
    position: fixed;
    z-index: 260;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: auto;
    width: auto;
    min-width: 0;
    padding: 12px;
    border-radius: 13px;
  }

  .participant-audio-toggle {
    min-width: 68px;
  }
}


/* v0.2-test-dev.39.1.1 — mobile viewport / audio controls hotfix */

/*
  On touch devices .app-shell is translated to match VisualViewport.
  A floating fixed child inside that transformed shell can be clipped.
  On mobile, expand participant audio controls inside the participant card.
*/
@media (hover:none) and (pointer:coarse) {
  .voice-person {
    overflow: visible;
  }

  .participant-audio-box {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    display: grid;
    justify-content: stretch;
    gap: 6px;
  }

  .participant-audio-toggle {
    justify-self: start;
    min-width: 86px;
    min-height: 40px;
  }

  .participant-audio-controls {
    position: static !important;
    z-index: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    transform: none;
    box-shadow: none;
  }

  /*
    Profile modal uses the real visible browser viewport.
    This prevents the close button from hiding under Chrome/Safari bars.
  */
  .user-profile-modal {
    inset: auto;
    top: var(--rv-vv-top, 0px);
    left: var(--rv-vv-left, 0px);
    width: var(--rv-vv-width, 100vw);
    height: var(--rv-vv-height, 100dvh);
    max-width: var(--rv-vv-width, 100vw);
    max-height: var(--rv-vv-height, 100dvh);
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .user-profile-card {
    width: 100%;
    height: auto;
    max-height: 100%;
    min-height: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .user-profile-close {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    z-index: 5;
  }

  /*
    Registration/login must scroll inside the current VisualViewport.
    This fixes Safari where the Create account button could be below
    the visible area with body scrolling disabled.
  */
  .login-overlay {
    inset: auto;
    top: var(--rv-vv-top, 0px);
    left: var(--rv-vv-left, 0px);
    width: var(--rv-vv-width, 100vw);
    height: var(--rv-vv-height, 100dvh);
    max-width: var(--rv-vv-width, 100vw);
    max-height: var(--rv-vv-height, 100dvh);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding:
      max(12px, env(safe-area-inset-top))
      12px
      max(24px, env(safe-area-inset-bottom));
  }

  .login-card {
    flex: 0 0 auto;
    width: min(430px, 100%);
    max-height: none;
    margin: 0 auto;
    padding: 22px 18px;
  }

  .brand-large {
    font-size: clamp(30px, 9vw, 38px);
  }

  .login-subtitle {
    margin-bottom: 16px;
  }

  .auth-tabs {
    margin: 14px 0;
  }

  .login-card input {
    font-size: 16px;
  }
}

@media (hover:none) and (pointer:coarse) and (max-height: 520px) {
  .user-profile-modal {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .user-profile-card {
    border-radius: 12px;
  }

  .login-overlay {
    padding-top: 8px;
    padding-bottom: 16px;
  }

  .login-card {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

/* ===== rednexus-design-v1.css ===== */
/*
  REDNexus Design System Foundation — D1 / first shell pass
  v0.2-test-dev.40

  This file intentionally sits after legacy app.css so the visual redesign can
  evolve independently from functional CSS. No network, auth, permissions or
  media logic lives here.
*/

:root {
  --rn-black: #07080a;
  --rn-obsidian: #0a0c0f;
  --rn-surface-0: #0d1014;
  --rn-surface-1: #11151a;
  --rn-surface-2: #171b21;
  --rn-surface-3: #1d2229;
  --rn-surface-4: #242a32;
  --rn-line-soft: rgba(255,255,255,.065);
  --rn-line: rgba(255,255,255,.11);
  --rn-line-strong: rgba(255,255,255,.17);
  --rn-red: #e3282d;
  --rn-red-hot: #ff3a3f;
  --rn-red-deep: #7f171b;
  --rn-red-glow: rgba(227,40,45,.22);
  --rn-text: #f3f5f7;
  --rn-text-soft: #c8cdd3;
  --rn-muted: #828b96;
  --rn-muted-2: #5f6873;
  --rn-green: #31d66b;
  --rn-yellow: #e4b548;
  --rn-blue: #4797ff;
  --rn-danger: #ff6268;
  --rn-shadow-xl: 0 24px 80px rgba(0,0,0,.52);
  --rn-shadow-panel: 0 14px 42px rgba(0,0,0,.28);
  --rn-radius-xs: 6px;
  --rn-radius-sm: 9px;
  --rn-radius-md: 13px;
  --rn-radius-lg: 18px;
  --rn-control-h: 40px;

  /* Compatibility bridge for legacy styles. */
  --bg-0: var(--rn-black);
  --bg-1: var(--rn-surface-0);
  --bg-2: var(--rn-surface-1);
  --bg-3: var(--rn-surface-2);
  --bg-4: var(--rn-surface-3);
  --line: #2a3037;
  --text: var(--rn-text);
  --muted: var(--rn-muted);
  --red: var(--rn-red);
  --red-dark: var(--rn-red-deep);
  --green: var(--rn-green);
  --yellow: var(--rn-yellow);
}

html,
body {
  background: var(--rn-black);
  color: var(--rn-text);
}

body {
  background:
    radial-gradient(circle at 58% -18%, rgba(255,255,255,.035), transparent 35%),
    radial-gradient(circle at 58% 42%, rgba(227,40,45,.055), transparent 34%),
    var(--rn-black);
}

button,
input,
textarea,
select {
  font-family: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(255,58,63,.72);
  outline-offset: 2px;
}

/* --- App shell ---------------------------------------------------------- */

.app-shell {
  grid-template-columns: 76px 282px minmax(0, 1fr) 282px;
  background: var(--rn-black);
}

.server-rail,
.channel-sidebar,
.main-panel,
.member-panel {
  position: relative;
}

.server-rail {
  gap: 10px;
  padding: 12px 10px 14px;
  border-right: 1px solid rgba(227,40,45,.16);
  background:
    linear-gradient(180deg, rgba(227,40,45,.06), transparent 18%),
    linear-gradient(180deg, #090b0e 0%, #080a0d 100%);
  box-shadow: 8px 0 40px rgba(0,0,0,.18);
}

.server-rail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15px;
  right: 15px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rn-red), transparent);
  opacity: .9;
}

.server-logo,
.server-icon {
  position: relative;
  border: 1px solid var(--rn-line);
  background: linear-gradient(145deg, #171b20, #0e1115);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.32);
}

.server-logo {
  width: 50px;
  height: 50px;
  border-color: rgba(227,40,45,.58);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 45%, rgba(227,40,45,.24), transparent 52%),
    linear-gradient(145deg, #1f1215, #0d0f12 72%);
  color: #fff;
  font-size: 13px;
  letter-spacing: -.06em;
  box-shadow:
    0 0 0 1px rgba(227,40,45,.08),
    0 0 22px rgba(227,40,45,.11),
    inset 0 0 18px rgba(227,40,45,.08);
}

.server-logo::before,
.server-logo::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.server-logo::before {
  inset: 6px;
  border: 1px solid rgba(255,58,63,.36);
  border-radius: 9px;
  transform: rotate(45deg) scale(.72);
}

.server-logo::after {
  left: 10px;
  right: 10px;
  bottom: -5px;
  height: 1px;
  background: var(--rn-red-hot);
  box-shadow: 0 0 10px var(--rn-red-hot);
}

.server-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: #858e99;
}

.server-icon:hover,
.server-icon.active {
  border-radius: 13px;
  border-color: rgba(227,40,45,.5);
  background:
    linear-gradient(135deg, rgba(227,40,45,.19), rgba(227,40,45,.055)),
    #12161b;
  color: #fff;
  box-shadow: 0 0 20px rgba(227,40,45,.1);
}

.server-icon.active::before {
  content: "";
  position: absolute;
  left: -11px;
  width: 3px;
  height: 24px;
  border-radius: 0 4px 4px 0;
  background: var(--rn-red-hot);
  box-shadow: 0 0 10px rgba(255,58,63,.8);
}

.rail-separator {
  width: 34px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

.channel-sidebar {
  border-right: 1px solid var(--rn-line-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 18%),
    #0d1014;
}

.server-header {
  min-height: 66px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--rn-line-soft);
  background: rgba(255,255,255,.008);
}

.server-header::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(227,40,45,.55), rgba(227,40,45,.06) 52%, transparent);
}

.server-name {
  color: var(--rn-text);
  font-size: 15px;
  letter-spacing: .01em;
}

.server-code {
  color: var(--rn-muted-2);
  letter-spacing: .02em;
}

.channel-list {
  padding: 11px 8px 18px;
  scrollbar-width: thin;
  scrollbar-color: #30363f transparent;
}

.section-label,
.channel-category-label,
.member-heading {
  color: #68717c;
  font-size: 10px;
  letter-spacing: .105em;
}

.channel,
.dm-channel {
  position: relative;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #9fa7b1;
}

.channel:hover,
.dm-channel:hover {
  border-color: rgba(255,255,255,.05);
  background: rgba(255,255,255,.032);
  color: #e7eaed;
}

.channel.active,
.dm-channel.active {
  border-color: rgba(227,40,45,.25);
  background:
    linear-gradient(90deg, rgba(227,40,45,.22), rgba(227,40,45,.055) 72%, transparent),
    rgba(255,255,255,.018);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--rn-red-hot);
}

.channel.connected::after {
  color: var(--rn-green);
  letter-spacing: .08em;
}

.sidebar-user.speaking {
  color: #54df81;
  text-shadow: 0 0 12px rgba(49,214,107,.18);
}

.user-panel {
  min-height: 76px;
  border-top: 1px solid var(--rn-line-soft);
  background: #0b0e12;
}

.avatar {
  border: 1px solid rgba(227,40,45,.55);
  background:
    radial-gradient(circle at 34% 24%, #d84a4e, #6d171b 72%);
  box-shadow: 0 0 18px rgba(227,40,45,.12);
}

.control-btn,
.icon-btn,
.server-manage-btn {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #181c22, #111419);
  color: #aeb5be;
}

.control-btn:hover:not(:disabled),
.icon-btn:hover,
.server-manage-btn:hover {
  border-color: rgba(227,40,45,.3);
  background: linear-gradient(180deg, #21191d, #141417);
  color: white;
}

.control-btn.active {
  border-color: rgba(227,40,45,.45);
  background: rgba(127,23,27,.6);
  color: #fff;
}

/* --- Main workspace ---------------------------------------------------- */

.main-panel {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(227,40,45,.055), transparent 30%),
    linear-gradient(180deg, #0c0f13 0%, #090b0e 100%);
}

.main-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .23;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent 3%, #000 18%, #000 80%, transparent 100%);
}

.topbar {
  position: relative;
  z-index: 2;
  min-height: 66px;
  padding: 0 18px;
  border-bottom: 1px solid var(--rn-line-soft);
  background: rgba(8,10,13,.82);
  backdrop-filter: blur(14px);
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: min(260px, 38%);
  height: 1px;
  background: linear-gradient(90deg, var(--rn-red), transparent);
}

.topbar-title {
  color: #edf0f3;
  letter-spacing: .01em;
}

.topbar-status {
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 6px;
  color: #5d6671;
  background: rgba(255,255,255,.018);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.global-search-btn,
.pinned-messages-btn,
.mobile-members-btn {
  border: 1px solid rgba(255,255,255,.08);
  background: #11151a;
  color: #8f98a3;
}

.global-search-btn:hover,
.pinned-messages-btn:hover,
.mobile-members-btn:hover {
  border-color: rgba(227,40,45,.26);
  color: #e3e7ea;
  background: #15191f;
}

.content-view {
  position: relative;
  z-index: 1;
  padding: 22px 24px 26px;
}

.hero {
  position: relative;
  align-items: center;
  margin-bottom: 15px;
  padding: 14px 16px;
  border: 1px solid var(--rn-line-soft);
  border-radius: var(--rn-radius-md);
  background:
    linear-gradient(90deg, rgba(227,40,45,.055), transparent 52%),
    rgba(15,18,23,.82);
  box-shadow: var(--rn-shadow-panel);
}

.hero::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--rn-red-hot), transparent);
  box-shadow: 0 0 12px rgba(255,58,63,.45);
}

.eyebrow {
  color: #9b4a4f;
  font-size: 9px;
  letter-spacing: .14em;
}

.hero h1,
.text-channel-header h1 {
  color: #f5f6f7;
  letter-spacing: -.035em;
}

.hero h1 {
  font-size: clamp(22px, 2.6vw, 30px);
}

.hero p {
  color: #7e8792;
  font-size: 12px;
}

.btn {
  min-height: var(--rn-control-h);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
}

.btn-primary {
  border-color: rgba(255,72,77,.6);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent),
    linear-gradient(135deg, #d92227, #8c171b);
  box-shadow: 0 0 0 1px rgba(227,40,45,.12), 0 8px 26px rgba(127,23,27,.25);
}

.btn-primary:not(:disabled):hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), transparent),
    linear-gradient(135deg, #ef3035, #a2191e);
  box-shadow: 0 0 20px rgba(227,40,45,.2), 0 10px 30px rgba(127,23,27,.3);
}

/* --- Voice / video flagship pass -------------------------------------- */

.voice-media-toolbar,
.video-stage,
.voice-stage {
  width: 100%;
  border: 1px solid var(--rn-line-soft);
  border-radius: var(--rn-radius-md);
  background: rgba(13,16,20,.88);
  box-shadow: var(--rn-shadow-panel);
}

.voice-media-toolbar {
  position: relative;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.voice-media-actions {
  flex: 0 1 auto;
}

.voice-media-toolbar::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227,40,45,.26), transparent);
}

.voice-media-btn {
  min-height: 40px;
  border-color: rgba(255,255,255,.075);
  background: linear-gradient(180deg, #171b21, #111419);
  color: #aeb5be;
}

.voice-media-btn:hover:not(:disabled) {
  border-color: rgba(227,40,45,.35);
  background: #18171b;
  color: #fff;
}

.voice-media-btn.active {
  border-color: rgba(227,40,45,.5);
  background: rgba(127,23,27,.42);
  color: #fff;
  box-shadow: inset 0 0 18px rgba(227,40,45,.09);
}

.voice-media-hint {
  flex: 1 1 240px;
  color: #68717c;
}

.voice-network-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: #0d1014;
  color: #7a838e;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.voice-network-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #58616c;
  box-shadow: 0 0 0 3px rgba(88,97,108,.08);
}

.voice-network-badge.excellent,
.voice-network-badge.good,
.voice-network-badge.recovered {
  border-color: rgba(49,214,107,.2);
  color: #78dfa0;
}

.voice-network-badge.excellent .voice-network-dot,
.voice-network-badge.good .voice-network-dot,
.voice-network-badge.recovered .voice-network-dot {
  background: var(--rn-green);
  box-shadow: 0 0 10px rgba(49,214,107,.5);
}

.voice-network-badge.poor,
.voice-network-badge.reconnecting {
  border-color: rgba(228,181,72,.22);
  color: #e6c373;
}

.voice-network-badge.poor .voice-network-dot,
.voice-network-badge.reconnecting .voice-network-dot {
  background: var(--rn-yellow);
  box-shadow: 0 0 10px rgba(228,181,72,.42);
}

.voice-network-badge.lost {
  border-color: rgba(255,98,104,.26);
  color: #ff8b90;
}

.voice-network-badge.lost .voice-network-dot {
  background: var(--rn-danger);
  box-shadow: 0 0 10px rgba(255,98,104,.45);
}

.video-stage {
  padding: 13px;
  background:
    radial-gradient(circle at 50% 0%, rgba(227,40,45,.045), transparent 44%),
    #0c0f13;
}

.video-stage-header,
.stage-header {
  color: #6f7883;
  letter-spacing: .105em;
}

.video-tile {
  border-color: rgba(255,255,255,.08);
  border-radius: 12px;
  background: #080a0d;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.video-tile.speaking {
  border-color: rgba(49,214,107,.64);
  box-shadow: 0 0 0 1px rgba(49,214,107,.25), 0 0 26px rgba(49,214,107,.09);
}

.video-tile.screen-share {
  border-color: rgba(227,40,45,.28);
}

.voice-stage {
  position: relative;
  overflow: visible;
  min-height: 260px;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 58%, rgba(227,40,45,.095), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 35%),
    rgba(10,12,15,.94);
}

.voice-stage::before {
  content: "";
  position: absolute;
  inset: 44px 8% 18px;
  pointer-events: none;
  opacity: .28;
  background:
    radial-gradient(circle at center, transparent 0 26%, rgba(227,40,45,.12) 26.3% 26.8%, transparent 27.2% 43%, rgba(227,40,45,.075) 43.4% 43.8%, transparent 44.2%),
    linear-gradient(90deg, transparent 49.8%, rgba(227,40,45,.055) 50%, transparent 50.2%);
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
}

.stage-header {
  position: relative;
  z-index: 1;
}

.voice-grid {
  position: relative;
  z-index: 2;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.voice-person {
  min-height: 72px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.022), transparent 52%),
    rgba(17,20,25,.91);
  box-shadow: inset 0 1px rgba(255,255,255,.018);
}

.voice-person:hover {
  border-color: rgba(227,40,45,.18);
  background:
    linear-gradient(135deg, rgba(227,40,45,.045), transparent 58%),
    rgba(19,22,27,.95);
}

.voice-person.speaking {
  border-color: rgba(49,214,107,.55);
  background:
    linear-gradient(135deg, rgba(49,214,107,.055), transparent 58%),
    rgba(15,21,18,.96);
  box-shadow:
    0 0 0 1px rgba(49,214,107,.16),
    0 0 24px rgba(49,214,107,.075),
    inset 0 0 18px rgba(49,214,107,.025);
}

.person-avatar {
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(145deg, #353b44, #161a20);
  box-shadow: 0 6px 18px rgba(0,0,0,.24);
}

.voice-person.speaking .person-avatar {
  border-color: rgba(49,214,107,.7);
  box-shadow: 0 0 0 2px rgba(49,214,107,.08), 0 0 18px rgba(49,214,107,.16);
}

.person-name {
  color: #edf0f2;
}

.person-state {
  color: #707985;
}

.person-media-badge {
  border-color: rgba(255,255,255,.07);
  background: rgba(0,0,0,.2);
}

.participant-audio-toggle,
.participant-audio-controls {
  border-color: rgba(255,255,255,.08);
  background: #11151a;
}

.participant-audio-toggle:hover,
.participant-audio-toggle.active {
  border-color: rgba(227,40,45,.25);
  background: #171b20;
}

/* --- Text chat --------------------------------------------------------- */

.text-channel-header {
  padding: 3px 3px 14px;
  border-bottom-color: var(--rn-line-soft);
}

.text-socket-state {
  border: 1px solid rgba(255,255,255,.07);
  background: #11151a;
}

.text-socket-state.connected {
  border-color: rgba(49,214,107,.16);
  background: rgba(49,214,107,.055);
}

.message-list {
  scrollbar-width: thin;
  scrollbar-color: #2a3038 transparent;
}

.message-row {
  border: 1px solid transparent;
  border-radius: 10px;
}

.message-row:hover {
  border-color: rgba(255,255,255,.035);
  background: rgba(255,255,255,.018);
}

.message-row.mentioned-me {
  border-color: rgba(227,40,45,.18);
  background: linear-gradient(90deg, rgba(227,40,45,.07), transparent 72%);
}

.message-avatar {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(145deg, #313740, #171b20);
}

.message-row.own .message-avatar {
  border-color: rgba(227,40,45,.38);
  background: linear-gradient(145deg, #8b1b1f, #451114);
}

.message-author {
  color: #eef1f3;
}

.message-content {
  color: #c3c9d0;
}

.message-composer {
  border-color: rgba(255,255,255,.08);
  border-radius: 13px;
  background: rgba(14,17,21,.96);
  box-shadow: 0 -10px 40px rgba(0,0,0,.12);
}

.message-composer textarea,
.login-card input,
.user-profile-edit-input,
.user-profile-edit-textarea {
  border-color: rgba(255,255,255,.09);
  background: #090c10;
  color: #edf0f3;
}

.message-composer textarea:focus,
.login-card input:focus,
.user-profile-edit-input:focus,
.user-profile-edit-textarea:focus {
  border-color: rgba(227,40,45,.55);
  box-shadow: 0 0 0 3px rgba(227,40,45,.07);
}

.composer-attach-btn {
  border-color: rgba(255,255,255,.08);
  background: #13171c;
  color: #9ea6b0;
}

/* --- Members ----------------------------------------------------------- */

.member-panel {
  border-left: 1px solid var(--rn-line-soft);
  background:
    linear-gradient(180deg, rgba(227,40,45,.025), transparent 18%),
    #0d1014;
}

.member-item {
  border: 1px solid transparent;
  border-radius: 9px;
}

.member-item:hover {
  border-color: rgba(255,255,255,.04);
  background: rgba(255,255,255,.024);
}

.member-item.speaking {
  border-color: rgba(49,214,107,.12);
  background: rgba(49,214,107,.035);
}

/* --- Login / auth ------------------------------------------------------ */

.login-overlay {
  background:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    radial-gradient(circle at 50% 32%, rgba(227,40,45,.15), transparent 25%),
    radial-gradient(circle at 50% 40%, #13151a 0%, #08090b 48%, #050608 100%);
  background-size: 46px 46px, 46px 46px, auto, auto;
}

.login-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(227,40,45,.2);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 25%),
    rgba(12,15,19,.97);
  box-shadow: 0 34px 110px rgba(0,0,0,.58), 0 0 50px rgba(127,23,27,.09);
}

.login-card::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rn-red-hot), transparent);
  box-shadow: 0 0 16px rgba(255,58,63,.42);
}

.brand-large {
  color: #eef1f3;
  font-size: 35px;
  letter-spacing: -.05em;
}

.brand span {
  color: var(--rn-red-hot);
  text-shadow: 0 0 22px rgba(227,40,45,.2);
}

.login-subtitle {
  color: #737c87;
}

.auth-tabs {
  border: 1px solid rgba(255,255,255,.06);
  background: #0a0d11;
}

.auth-tab.active {
  background: rgba(227,40,45,.13);
  color: #fff;
}

/* --- Menus, modal surfaces, cards ------------------------------------- */

.server-quick-menu,
.mention-suggestions,
.participant-audio-controls {
  border-color: rgba(255,255,255,.09);
  background: rgba(13,16,20,.98);
  box-shadow: var(--rn-shadow-xl);
  backdrop-filter: blur(16px);
}

.server-quick-menu-item:hover,
.server-quick-menu-item:focus-visible,
.mention-suggestion:hover,
.mention-suggestion.active {
  background: rgba(227,40,45,.07);
}

.user-profile-modal,
.monitoring-modal,
.member-moderation-modal,
.channel-permissions-modal,
.server-hub-modal,
.server-actions-modal,
.global-search-modal,
.pinned-messages-modal,
.notification-settings-modal,
.voice-settings-modal,
.video-settings-modal,
.account-security-modal {
  background: rgba(3,4,6,.84);
  backdrop-filter: blur(12px);
}

.user-profile-card,
.monitoring-card,
.member-moderation-card,
.channel-permissions-card,
.server-hub-card,
.server-actions-card,
.global-search-card,
.pinned-messages-card,
.notification-settings-card,
.voice-settings-card,
.video-settings-card,
.account-security-card {
  border-color: rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 22%),
    #101318;
  box-shadow: var(--rn-shadow-xl);
}

/* --- Scrollbars -------------------------------------------------------- */

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #2a3037;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: #39414b;
  background-clip: padding-box;
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 74px 260px minmax(0, 1fr) 250px;
  }
}

@media (max-width: 1020px) {
  .app-shell {
    grid-template-columns: 74px 254px minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .content-view {
    padding-left: 14px;
    padding-right: 14px;
  }

  .voice-media-toolbar {
    align-items: stretch;
  }

  .voice-network-badge {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .voice-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .topbar {
    min-height: 58px;
  }

  .content-view {
    padding-top: 14px;
  }

  .hero {
    padding: 12px;
  }

  .hero::before {
    top: 10px;
    bottom: 10px;
  }

  .voice-stage {
    min-height: 0;
    padding: 11px;
  }

  .voice-stage::before {
    display: none;
  }

  .voice-person {
    min-height: 68px;
  }

  .message-composer {
    border-radius: 12px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .channel,
  .dm-channel,
  .server-quick-menu-item {
    min-height: 44px;
  }

  .control-btn,
  .server-manage-btn,
  .voice-media-btn {
    min-height: 42px;
  }

  .participant-audio-controls {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ===== rednexus-design-v2.css ===== */
/*
  REDNexus Design System — D2 shell + D3 voice flagship pass
  v0.2-test-dev.40.7.5
  Visual-only layer. Functional voice/video/auth/TURN behavior remains in app.js.
*/

:root {
  --rn-stage-avatar: clamp(84px, 7.2vw, 118px);
  --rn-stage-avatar-dense: clamp(58px, 5vw, 78px);
  --rn-stage-card: clamp(138px, 12vw, 184px);
  --rn-stage-gap: clamp(14px, 2vw, 30px);
  --rn-glass: rgba(12, 15, 19, .78);
}

/* Make the product shell feel layered instead of flat-black. */
.app-shell {
  background:
    radial-gradient(circle at 54% 18%, rgba(255,255,255,.025), transparent 26%),
    var(--rn-black);
}

.channel-sidebar,
.member-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.016), transparent 14%),
    #0b0e12;
}

.member-panel {
  border-left-color: rgba(255,255,255,.055);
  box-shadow: -16px 0 40px rgba(0,0,0,.12);
}

.topbar {
  min-height: 58px;
  background: rgba(7,9,12,.9);
}

.content-view.voice-view-v2 {
  height: calc(100dvh - 58px);
  overflow: auto;
  padding: 16px 18px 18px;
  scrollbar-width: thin;
  scrollbar-color: #292f37 transparent;
}

/* Compact room header — no more oversized admin-like hero. */
.voice-room-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
  padding: 11px 14px 11px 16px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(227,40,45,.07), transparent 38%),
    rgba(13,16,20,.86);
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}

.voice-room-header::before {
  top: 10px;
  bottom: 10px;
}

.voice-room-heading {
  min-width: 0;
}

.voice-room-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.voice-room-glyph {
  color: #d9dde2;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.18em;
  opacity: .78;
}

.voice-room-header .eyebrow {
  margin-bottom: 3px;
  color: #a9474d;
  font-size: 8px;
  letter-spacing: .17em;
}

.voice-room-header h1 {
  overflow: hidden;
  margin: 0;
  color: #f4f6f8;
  font-size: clamp(17px, 1.8vw, 23px);
  line-height: 1.1;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-room-header p {
  margin: 4px 0 0 27px;
  overflow: hidden;
  max-width: 660px;
  color: #69727e;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-room-status-cluster {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-join-btn {
  min-width: 116px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
}

.voice-join-btn:disabled {
  opacity: .7;
}

.voice-network-badge {
  margin-left: 0;
  min-height: 28px;
  font-size: 9px;
}

/* Flagship voice stage. */
.voice-stage-v2 {
  position: relative;
  min-height: clamp(400px, 56vh, 610px);
  overflow: hidden;
  padding: 13px 16px 20px;
  border-color: rgba(255,255,255,.075);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 56%, rgba(227,40,45,.12), transparent 12%),
    radial-gradient(circle at 50% 56%, rgba(227,40,45,.055), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 34%),
    #090c10;
  box-shadow:
    inset 0 1px rgba(255,255,255,.02),
    0 18px 50px rgba(0,0,0,.3);
}

.voice-stage-v2::before {
  inset: 48px 5% 12px;
  opacity: .42;
  background:
    radial-gradient(circle at center,
      transparent 0 19%,
      rgba(227,40,45,.15) 19.25% 19.6%,
      transparent 20% 35%,
      rgba(227,40,45,.095) 35.25% 35.55%,
      transparent 36% 50%,
      rgba(255,255,255,.035) 50.2% 50.35%,
      transparent 50.7%),
    linear-gradient(90deg, transparent 49.9%, rgba(227,40,45,.06) 50%, transparent 50.1%),
    linear-gradient(0deg, transparent 49.9%, rgba(227,40,45,.045) 50%, transparent 50.1%);
  mask-image: radial-gradient(circle at center, #000 0 62%, transparent 80%);
}

.voice-stage-v2::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 6%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(227,40,45,.4), transparent);
  box-shadow: 0 0 18px rgba(227,40,45,.3);
  opacity: .55;
}

.voice-stage-v2 .stage-header {
  position: relative;
  z-index: 5;
  margin-bottom: 0;
  color: #69737f;
  font-size: 9px;
  letter-spacing: .13em;
}

.voice-stage-core {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 56%;
  width: clamp(82px, 8vw, 112px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(227,40,45,.3);
  border-radius: 18px;
  background:
    radial-gradient(circle, rgba(227,40,45,.18), rgba(127,23,27,.07) 55%, transparent 72%);
  box-shadow:
    0 0 0 10px rgba(227,40,45,.025),
    0 0 48px rgba(227,40,45,.13),
    inset 0 0 25px rgba(227,40,45,.08);
  opacity: .55;
  pointer-events: none;
}

.voice-core-mark {
  transform: rotate(-45deg);
  color: rgba(255,58,63,.46);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 950;
  letter-spacing: -.08em;
}

/* Participant stage layouts. */
.voice-stage-v2 .voice-grid {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: clamp(340px, 49vh, 535px);
  display: grid;
  align-content: center;
  justify-content: center;
  gap: var(--rn-stage-gap);
  padding: 24px 2vw 6px;
}

.voice-grid[data-count="0"] {
  grid-template-columns: minmax(220px, 420px);
}

.voice-grid[data-count="1"] {
  grid-template-columns: var(--rn-stage-card);
}

.voice-grid[data-count="2"] {
  grid-template-columns: repeat(2, var(--rn-stage-card));
  gap: clamp(70px, 10vw, 160px);
}

.voice-grid[data-count="3"],
.voice-grid[data-count="4"] {
  grid-template-columns: repeat(2, var(--rn-stage-card));
  gap: clamp(22px, 4vw, 54px) clamp(80px, 10vw, 150px);
}

.voice-grid[data-count="5"],
.voice-grid[data-count="6"] {
  grid-template-columns: repeat(3, var(--rn-stage-card));
  gap: clamp(20px, 3vw, 38px) clamp(34px, 5vw, 70px);
}

.voice-grid[data-count="7"],
.voice-grid[data-count="8"],
.voice-grid[data-count="many"] {
  grid-template-columns: repeat(4, minmax(118px, 154px));
  gap: 14px clamp(16px, 2vw, 30px);
}

.voice-stage-v2 .voice-person {
  position: relative;
  min-width: 0;
  min-height: 154px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px 8px;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  text-align: center;
  isolation: isolate;
}

.voice-stage-v2 .voice-person::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16px 8px 8px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.004));
  opacity: 0;
  transition: .18s ease;
}

.voice-stage-v2 .voice-person:hover::before {
  opacity: 1;
}

.voice-stage-v2 .person-avatar {
  position: relative;
  width: var(--rn-stage-avatar);
  height: var(--rn-stage-avatar);
  flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 50%;
  background: linear-gradient(145deg, #343a43, #11151a);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.018),
    0 16px 28px rgba(0,0,0,.34);
  font-size: clamp(24px, 2vw, 34px);
  transition: .18s ease;
}


.voice-stage-v2 .voice-person.local-participant .person-avatar {
  border-color: rgba(227,40,45,.58);
  box-shadow:
    0 0 0 6px rgba(227,40,45,.035),
    0 0 28px rgba(227,40,45,.11),
    0 16px 28px rgba(0,0,0,.34);
}

.voice-stage-v2 .voice-person.speaking {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.voice-stage-v2 .voice-person.speaking .person-avatar {
  border-color: rgba(49,214,107,.9);
  box-shadow:
    0 0 0 5px rgba(49,214,107,.10),
    0 0 0 9px rgba(49,214,107,.035),
    0 0 30px rgba(49,214,107,.30),
    0 16px 28px rgba(0,0,0,.34);
  animation: rn-speaking-pulse 1.8s ease-in-out infinite;
}


@keyframes rn-speaking-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(49,214,107,.09), 0 0 0 9px rgba(49,214,107,.03), 0 0 24px rgba(49,214,107,.22), 0 16px 28px rgba(0,0,0,.34); }
  50% { box-shadow: 0 0 0 7px rgba(49,214,107,.13), 0 0 0 12px rgba(49,214,107,.035), 0 0 38px rgba(49,214,107,.34), 0 16px 28px rgba(0,0,0,.34); }
}

.voice-stage-v2 .person-main {
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 2px;
}

.voice-stage-v2 .person-name {
  max-width: 100%;
  color: #eef1f4;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.voice-stage-v2 .person-state {
  color: #69737e;
  font-size: 10px;
  text-transform: lowercase;
}

.voice-stage-v2 .voice-person.speaking .person-state {
  color: #49dd7c;
}

.voice-stage-v2 .person-media-badges {
  min-height: 0;
  justify-content: center;
  gap: 5px;
  margin-top: 2px;
}

.voice-stage-v2 .person-media-badge {
  min-width: 24px;
  height: 20px;
  border-radius: 999px;
  background: rgba(5,7,9,.76);
  backdrop-filter: blur(8px);
}

.voice-stage-v2 .participant-audio-box {
  position: absolute;
  z-index: 8;
  right: 5px;
  top: 10px;
  width: auto;
}

.voice-stage-v2 .participant-audio-toggle {
  min-width: 34px;
  width: auto;
  height: 30px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(8,10,13,.84);
  backdrop-filter: blur(10px);
  font-size: 9px;
}

.voice-stage-v2 .participant-audio-controls {
  text-align: left;
}

.voice-grid[data-count="7"] .person-avatar,
.voice-grid[data-count="8"] .person-avatar,
.voice-grid[data-count="many"] .person-avatar,
.voice-grid.dense .person-avatar {
  width: var(--rn-stage-avatar-dense);
  height: var(--rn-stage-avatar-dense);
}

.voice-grid[data-count="7"] .voice-person,
.voice-grid[data-count="8"] .voice-person,
.voice-grid[data-count="many"] .voice-person,
.voice-grid.dense .voice-person {
  min-height: 118px;
  padding: 7px 5px;
}

.voice-stage-v2 .empty-state {
  align-self: center;
  justify-self: center;
  padding: 20px 26px;
  border: 1px dashed rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.012);
  color: #626b76;
  text-align: center;
}

/* Bottom media control dock. */
.voice-control-dock {
  position: relative;
  width: min(720px, calc(100% - 32px));
  min-height: 58px;
  margin: -29px auto 0;
  padding: 8px 10px;
  z-index: 10;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-color: rgba(255,255,255,.09);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent),
    rgba(10,13,17,.94);
  backdrop-filter: blur(18px);
  box-shadow:
    0 16px 42px rgba(0,0,0,.48),
    0 0 0 1px rgba(227,40,45,.035);
}

.voice-control-dock::after {
  left: 18%;
  right: 18%;
  bottom: -1px;
  background: linear-gradient(90deg, transparent, rgba(227,40,45,.58), transparent);
}

.voice-dock-label {
  padding: 0 8px;
  color: #5e6772;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}

.voice-control-dock .voice-media-actions {
  flex-wrap: nowrap;
}

.voice-control-dock .voice-media-btn {
  min-width: 94px;
  min-height: 38px;
  border-radius: 10px;
}

.voice-control-dock .voice-media-hint {
  overflow: hidden;
  color: #5f6873;
  font-size: 9px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-stage {
  margin-bottom: 10px;
  border-radius: 15px;
}

/* Right sidebar slightly more premium / readable. */
.member-heading {
  margin-top: 3px;
  color: #747e89;
}

.member-row {
  border-radius: 9px;
}

.member-row:hover {
  background: rgba(255,255,255,.026);
}

/* Desktop and tablet tightening. */
@media (max-width: 1280px) {
  .app-shell {
    grid-template-columns: 70px 260px minmax(0, 1fr) 250px;
  }

  .voice-grid[data-count="5"],
  .voice-grid[data-count="6"] {
    grid-template-columns: repeat(3, minmax(120px, 150px));
  }

  .voice-grid[data-count="7"],
  .voice-grid[data-count="8"],
  .voice-grid[data-count="many"] {
    grid-template-columns: repeat(4, minmax(105px, 132px));
  }
}

@media (max-width: 1020px) {
  .voice-stage-v2 {
    min-height: 390px;
  }

  .voice-stage-v2 .voice-grid {
    min-height: 330px;
  }

  .voice-grid[data-count="5"],
  .voice-grid[data-count="6"],
  .voice-grid[data-count="7"],
  .voice-grid[data-count="8"],
  .voice-grid[data-count="many"] {
    grid-template-columns: repeat(3, minmax(105px, 138px));
  }

  .voice-control-dock {
    width: min(620px, calc(100% - 20px));
    grid-template-columns: auto minmax(0,1fr);
  }

  .voice-dock-label {
    display: none;
  }
}

@media (max-width: 720px) {
  .content-view.voice-view-v2 {
    height: auto;
    min-height: calc(100dvh - 56px);
    padding: 9px 8px 76px;
  }

  .voice-room-header {
    min-height: 62px;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 10px 9px 12px;
  }

  .voice-room-header p {
    display: none;
  }

  .voice-room-title-row {
    gap: 6px;
  }

  .voice-room-header h1 {
    font-size: 16px;
  }

  .voice-room-status-cluster {
    align-items: flex-end;
    flex-direction: column-reverse;
    gap: 5px;
  }

  .voice-network-badge {
    min-height: 22px;
    padding: 0 7px;
    font-size: 8px;
  }

  .voice-join-btn {
    min-width: 96px;
    min-height: 30px;
    font-size: 10px;
  }

  .voice-stage-v2 {
    min-height: 360px;
    padding: 11px 8px 18px;
  }

  .voice-stage-v2 .voice-grid {
    min-height: 310px;
    grid-template-columns: repeat(2, minmax(112px, 1fr)) !important;
    gap: 14px 8px !important;
    padding: 22px 2px 8px;
  }

  .voice-grid[data-count="1"] {
    grid-template-columns: minmax(150px, 190px) !important;
  }

  .voice-stage-v2 .voice-person {
    min-height: 132px;
    padding: 8px 4px;
  }

  .voice-stage-v2 .person-avatar,
  .voice-grid.dense .person-avatar {
    width: 72px;
    height: 72px;
  }

  .voice-stage-v2 .participant-audio-box {
    position: static;
    width: 100%;
    display: grid;
    justify-content: center;
    margin-top: 2px;
  }

  .voice-stage-v2 .participant-audio-toggle {
    justify-self: center;
    min-width: 72px;
    min-height: 34px;
  }

  .voice-stage-v2 .participant-audio-controls {
    width: 100%;
    max-width: 260px;
    margin: 5px auto 0;
  }

  .voice-control-dock {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: calc(100% - 8px);
    margin: -20px auto 0;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 7px;
  }

  .voice-control-dock .voice-media-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
  }

  .voice-control-dock .voice-media-btn {
    min-width: 0;
    width: 100%;
    min-height: 42px;
    padding: 7px 5px;
  }

  .voice-control-dock .voice-media-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-stage-v2 .voice-person.speaking .person-avatar {
    animation: none;
  }
}

/* ===== rednexus-design-v3.css ===== */
/*
  REDNexus Design System — D2/D3 mobile voice + unified controls pass
  v0.2-test-dev.40.7.5
  Scope: responsive voice room, unified voice/media dock, account footer,
  sidebar current-room deduplication. No auth/DB/LiveKit/TURN behavior changes.
*/

:root {
  --rn-control-bg: #171c23;
  --rn-control-bg-hover: #202731;
  --rn-control-border: rgba(255,255,255,.105);
  --rn-control-red: #e3282d;
  --rn-control-red-soft: rgba(227,40,45,.14);
}

/* Current connected room: show occupancy, not duplicate participant names. */
.voice-channel {
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
}
.voice-channel-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.voice-channel-count {
  min-width: 24px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #9aa5b1;
  font-size: 9px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.voice-channel.connected .voice-channel-count {
  border-color: rgba(49,214,107,.20);
  background: rgba(49,214,107,.07);
  color: #58df84;
}
.sidebar-room-users:empty { display:none; }

/* Bottom-left becomes account management only. */
.user-panel.account-panel {
  min-height: 112px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.055);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 55%),
    #090c10;
}
.account-panel-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: center;
  gap: 9px;
}
.account-panel .account-avatar,
.account-panel .user-name { cursor:pointer; }
.account-panel-caption {
  margin-top: 2px;
  color: #5e6874;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
}
.account-panel .account-voice-state { display:none; }
.account-panel-actions {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
}
.account-action-btn {
  min-width: 0;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border: 1px solid var(--rn-control-border);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent), #13171d;
  color: #cbd2da;
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
  transition: .16s ease;
}
.account-action-btn:not(:disabled):hover {
  border-color: rgba(227,40,45,.34);
  background: #1a2028;
  color: #fff;
  transform: translateY(-1px);
}
.account-action-icon { font-size: 14px; line-height:1; }
.account-action-danger:not(:disabled):hover {
  border-color: rgba(227,40,45,.55);
  background: rgba(127,23,27,.30);
  color: #ff7277;
}
.account-action-btn:disabled { opacity:.38; cursor:not-allowed; }

/* Voice + media now belong to one explicit control surface. */
.voice-control-dock {
  width: min(1040px, calc(100% - 28px));
  grid-template-columns: auto minmax(0,1fr) minmax(120px, 1fr);
  gap: 12px;
  padding: 9px 11px;
}
.voice-control-dock .voice-media-actions.voice-unified-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(86px,1fr)) 1px repeat(4, minmax(86px,1fr));
  align-items: stretch;
  gap: 7px;
}
.voice-dock-separator {
  width: 1px;
  min-height: 34px;
  align-self: center;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.13), transparent);
}
.voice-control-dock .voice-media-btn {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--rn-control-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 48%),
    var(--rn-control-bg);
  color: #d8dee5;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 5px 15px rgba(0,0,0,.18);
  font-size: 10px;
  font-weight: 800;
  opacity: 1;
  transition: .16s ease;
}
.voice-control-dock .voice-media-btn:not(:disabled):hover {
  border-color: rgba(227,40,45,.36);
  background: var(--rn-control-bg-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.24), 0 0 16px rgba(227,40,45,.045);
}
.voice-control-dock .voice-media-btn:disabled {
  opacity: .42;
  color: #68727d;
  background: #11151a;
}
.voice-control-dock .voice-media-btn.active {
  border-color: rgba(227,40,45,.56);
  background: linear-gradient(180deg, rgba(227,40,45,.19), rgba(127,23,27,.24));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(227,40,45,.10), 0 0 20px rgba(227,40,45,.10);
}
.voice-control-dock .voice-media-icon { font-size: 15px; filter: saturate(.9); }
.voice-leave-btn:not(:disabled) {
  border-color: rgba(227,40,45,.38) !important;
  background: linear-gradient(180deg, rgba(227,40,45,.20), rgba(127,23,27,.34)) !important;
  color: #fff !important;
}
.voice-leave-btn:not(:disabled):hover {
  border-color: rgba(255,82,88,.70) !important;
  box-shadow: 0 0 22px rgba(227,40,45,.16) !important;
}

/* Participant audio affordance is compact; full slider opens only on demand. */
.participant-audio-toggle { gap: 4px; }
.participant-audio-icon { font-size: 12px; }
.participant-audio-percent { font-variant-numeric: tabular-nums; }

/* Mobile is a real composition, not a shrunken desktop. */
@media (max-width: 720px), (hover:none) and (pointer:coarse) {
  .main-panel,
  .content-view.voice-view-v2,
  .voice-room-header,
  .voice-stage-v2,
  .voice-control-dock {
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
  }

  .topbar {
    min-height: 54px;
    gap: 7px;
    padding: 0 8px;
  }
  .topbar-status { display:none !important; }
  .topbar-title { max-width: 120px; font-size: 13px; }
  .global-search-label { display:none; }

  .content-view.voice-view-v2 {
    width: 100%;
    height: auto;
    min-height: calc(var(--rv-vv-height,100dvh) - 54px);
    padding: 8px 7px calc(86px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  .voice-room-header {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 8px;
    padding: 10px 11px;
    border-radius: 12px;
  }
  .voice-room-heading { min-width:0; }
  .voice-room-header .eyebrow { margin-bottom:4px; font-size:7px; }
  .voice-room-title-row { min-width:0; }
  .voice-room-header h1 {
    min-width:0;
    overflow:hidden;
    font-size: clamp(15px,4.5vw,18px);
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .voice-room-status-cluster {
    width:100%;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
  }
  .voice-network-badge {
    width:auto;
    min-height:26px;
    padding:0 9px;
    font-size:8px;
  }
  .voice-join-btn {
    width:auto !important;
    min-width:108px;
    min-height:36px;
    padding:0 12px;
    font-size:10px;
  }

  .voice-stage-v2 {
    width:100%;
    min-height:430px;
    margin-top:8px;
    padding:10px 7px 16px;
    border-radius:13px;
  }
  .voice-stage-v2[data-count="0"] { min-height:390px; }
  .voice-stage-v2[data-count="5"],
  .voice-stage-v2[data-count="6"] { min-height:650px; }
  .voice-stage-v2[data-count="7"],
  .voice-stage-v2[data-count="8"],
  .voice-stage-v2[data-count="many"] { min-height:760px; }
  .voice-stage-v2::before { inset:42px 1% 6px; opacity:.27; }
  .voice-stage-v2::after { left:4%; right:4%; }
  .voice-stage-core { top:53%; width:76px; opacity:.32; }
  .voice-stage-v2 .stage-header { padding:0 3px; }

  .voice-stage-v2 .voice-grid {
    width:100%;
    min-height:350px;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    align-content:start;
    justify-content:stretch;
    gap: 14px 6px !important;
    padding:48px 0 8px;
  }
  .voice-grid[data-count="0"] {
    grid-template-columns:minmax(0,1fr) !important;
    align-content:center;
    padding-top:24px;
  }
  .voice-grid[data-count="1"] {
    grid-template-columns:minmax(0,1fr) !important;
    justify-items:center;
  }
  .voice-grid[data-count="1"] .voice-person { width:min(210px,76vw); }
  .voice-grid[data-count="3"] .voice-person:last-child,
  .voice-grid[data-count="5"] .voice-person:last-child { grid-column:1 / -1; justify-self:center; width:50%; }

  .voice-stage-v2 .voice-person,
  .voice-grid.dense .voice-person {
    width:100%;
    min-width:0;
    min-height:154px;
    justify-content:flex-start;
    gap:6px;
    padding:7px 3px 8px;
  }
  .voice-stage-v2 .person-avatar,
  .voice-grid.dense .person-avatar {
    width:82px;
    height:82px;
    font-size:26px;
  }
  .voice-stage-v2 .person-name { font-size:12px; }
  .voice-stage-v2 .person-state { font-size:9px; }
  .voice-stage-v2 .person-media-badges { margin-top:0; }

  .voice-stage-v2 .participant-audio-box {
    position:static;
    width:100%;
    display:grid;
    justify-items:center;
    margin-top:0;
  }
  .voice-stage-v2 .participant-audio-toggle {
    min-width:34px;
    width:34px;
    height:32px;
    padding:0;
    border-color:rgba(255,255,255,.09);
    background:#12171d;
  }
  .voice-stage-v2 .participant-audio-percent { display:none; }
  .voice-stage-v2 .participant-audio-controls {
    width:100%;
    max-width:100%;
    margin:6px auto 0;
    padding:8px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
    background:#11161c;
    box-shadow:0 12px 28px rgba(0,0,0,.40);
  }

  .voice-control-dock {
    position:sticky;
    bottom:max(6px, env(safe-area-inset-bottom));
    width:100%;
    margin:8px 0 0;
    grid-template-columns:1fr;
    gap:6px;
    padding:7px;
    border-radius:12px;
  }
  .voice-dock-label,
  .voice-control-dock .voice-media-hint { display:none; }
  .voice-control-dock .voice-media-actions.voice-unified-actions {
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
  }
  .voice-dock-separator { display:none; }
  .voice-control-dock .voice-media-btn {
    width:100%;
    min-width:0;
    min-height:54px;
    flex-direction:column;
    gap:3px;
    padding:6px 3px;
    border-radius:9px;
    font-size:8px;
    line-height:1.05;
  }
  .voice-control-dock .voice-media-icon { font-size:16px; }
  .voice-leave-btn { grid-column:4; }
}

@media (max-width: 390px) {
  .voice-stage-v2 .person-avatar,
  .voice-grid.dense .person-avatar { width:74px; height:74px; }
  .voice-control-dock .voice-media-btn { min-height:50px; font-size:7.5px; }
  .voice-room-title-row .voice-room-glyph { display:none; }
}

@media (hover:none) and (pointer:coarse) and (orientation:landscape) {
  .content-view.voice-view-v2 { padding-bottom:72px; }
  .voice-stage-v2 { min-height:360px; }
  .voice-stage-v2 .voice-grid {
    min-height:300px;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    padding-top:35px;
  }
  .voice-grid[data-count="1"] { grid-template-columns:minmax(180px,240px) !important; justify-content:center; }
  .voice-grid[data-count="2"] { grid-template-columns:repeat(2,minmax(140px,200px)) !important; justify-content:center; }
  .voice-control-dock .voice-media-actions.voice-unified-actions { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .voice-leave-btn { grid-column:auto; }
}

/* ===== rednexus-design-v4.css ===== */
/*
  REDNexus Design System — D2/D3 media-in-stage + mobile shell correction
  v0.2-test-dev.40.7.5
  Visual/interaction pass only: no DB/auth/TURN/LiveKit transport changes.
*/

:root {
  --rn-dock-button: 52px;
}

.rn-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Voice dock: six unmistakable icon controls, no technical quality text. */
.voice-control-dock {
  width: auto;
  max-width: calc(100% - 28px);
  grid-template-columns: auto;
  justify-content: center;
  padding: 8px 10px;
}

.voice-control-dock .voice-media-actions.voice-unified-actions {
  display: grid;
  grid-template-columns: repeat(6, var(--rn-dock-button));
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.voice-control-dock .voice-media-btn.voice-icon-btn {
  width: var(--rn-dock-button);
  min-width: var(--rn-dock-button);
  height: var(--rn-dock-button);
  min-height: var(--rn-dock-button);
  padding: 0;
  border-radius: 13px;
  color: #cbd3dc;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    #171c23;
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 7px 18px rgba(0,0,0,.28);
}

.voice-control-dock .voice-media-btn.voice-icon-btn:not(:disabled):hover {
  color: #fff;
  border-color: rgba(227,40,45,.5);
  background: #202630;
  box-shadow: 0 0 0 1px rgba(227,40,45,.08), 0 9px 22px rgba(0,0,0,.34), 0 0 18px rgba(227,40,45,.08);
}

.voice-control-dock .voice-media-btn.voice-icon-btn.active,
.voice-control-dock .voice-media-btn.voice-icon-btn.control-off {
  border-color: rgba(227,40,45,.65);
  background: linear-gradient(180deg, rgba(227,40,45,.22), rgba(112,20,24,.34));
  color: #fff;
}

.rn-control-svg {
  width: 23px;
  height: 23px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.voice-leave-btn.voice-icon-btn:not(:disabled) {
  color: #ff7579 !important;
  border-color: rgba(227,40,45,.55) !important;
  background: linear-gradient(180deg, rgba(227,40,45,.18), rgba(101,17,21,.42)) !important;
}

/* Camera/screen live preview lives inside the participant card. */
.voice-stage-v2 .person-avatar.has-live-preview {
  overflow: hidden;
  background: #05070a;
}

.participant-live-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
  background: #05070a;
}

.participant-live-preview.screen-preview {
  object-fit: cover;
}

.participant-media-actions {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: 7px;
  display: flex;
  gap: 5px;
  transform: translate(-50%, 5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

.voice-person:hover .participant-media-actions,
.voice-person:focus-within .participant-media-actions {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.participant-media-action {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(8,11,15,.92);
  color: #e6ebef;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.participant-media-action:hover {
  border-color: rgba(227,40,45,.52);
  background: rgba(42,20,23,.96);
  color: #fff;
}

/* Focused media is an overlay inside voice stage, never a new row above it. */
.voice-stage-v2 .media-focus-stage {
  position: absolute;
  z-index: 30;
  inset: 38px 10px 10px;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(6,8,11,.97);
  box-shadow: 0 22px 70px rgba(0,0,0,.58), 0 0 0 1px rgba(227,40,45,.05);
  backdrop-filter: blur(16px);
}

.voice-stage-v2 .media-focus-stage.hidden {
  display: none !important;
}

.media-focus-stage .video-stage-header {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #9aa4af;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
}

.media-focus-head-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.media-focus-close {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: #151a20;
  color: #cbd2d9;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.media-focus-close:hover {
  border-color: rgba(227,40,45,.48);
  color: #fff;
}

.media-focus-stage .video-grid {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0,1fr) !important;
  padding: 8px;
}

.media-focus-stage .media-focus-tile {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  border-radius: 12px;
}

.media-focus-stage .media-focus-tile video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #020304;
}

/* Unified settings entry point. */
.unified-settings-card {
  width: min(660px, calc(100vw - 28px));
}

.unified-settings-tabs {
  display: flex;
  gap: 6px;
  padding: 0 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.unified-settings-tab {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: #12171d;
  color: #8f99a4;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.unified-settings-tab.active {
  border-color: rgba(227,40,45,.42);
  background: rgba(227,40,45,.12);
  color: #fff;
}

.unified-settings-tab:disabled {
  opacity: .42;
  cursor: default;
}

.unified-settings-pane.hidden {
  display: none !important;
}

/* Critical mobile shell correction: override D2 desktop grid after all earlier layers. */
@media (max-width: 720px), (hover:none) and (pointer:coarse) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
  }

  .app-shell {
    grid-template-columns: minmax(0,1fr) !important;
    width: var(--rv-vv-width, 100vw) !important;
    max-width: var(--rv-vv-width, 100vw) !important;
    min-width: 0 !important;
  }

  .main-panel {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .topbar,
  .content-view,
  .text-view,
  .content-view.voice-view-v2 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .channel-sidebar {
    width: min(88vw, 340px) !important;
    max-width: calc(var(--rv-vv-width, 100vw) - 36px) !important;
  }

  .voice-control-dock {
    width: max-content;
    max-width: calc(100% - 12px);
    padding: 7px;
    margin-left: auto;
    margin-right: auto;
  }

  .voice-control-dock .voice-media-actions.voice-unified-actions {
    grid-template-columns: repeat(6, minmax(44px, 1fr));
    width: min(100%, 340px);
    gap: 5px;
  }

  .voice-control-dock .voice-media-btn.voice-icon-btn {
    width: 100%;
    min-width: 44px;
    height: 48px;
    min-height: 48px;
    border-radius: 11px;
  }

  .rn-control-svg {
    width: 21px;
    height: 21px;
  }

  .voice-stage-v2 .media-focus-stage {
    inset: 36px 6px 6px;
  }

  .participant-media-actions {
    bottom: 6px;
    opacity: 1;
    transform: translate(-50%,0);
    pointer-events: auto;
  }

  .participant-media-action {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
  }

  .participant-media-action-label {
    display: none;
  }

  .unified-settings-card {
    width: 100%;
    max-height: 92vh;
  }

  .unified-settings-tabs {
    overflow-x: auto;
    padding-left: 12px;
    padding-right: 12px;
  }

  .unified-settings-tab {
    flex: 0 0 auto;
    min-height: 40px;
  }

  .text-channel-header h1 {
    max-width: 100%;
    font-size: clamp(24px, 8vw, 32px);
    overflow-wrap: normal;
    word-break: normal;
  }

  .message-list,
  .message-composer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 380px) {
  .voice-control-dock .voice-media-actions.voice-unified-actions {
    grid-template-columns: repeat(3, minmax(48px,1fr));
    width: min(100%, 220px);
  }
  .voice-control-dock .voice-media-btn.voice-icon-btn {
    height: 46px;
    min-height: 46px;
  }
}

/* ===== rednexus-design-v5.css ===== */
/*
  REDNexus Design System — unified voice hall + mobile stability hotfix
  v0.2-test-dev.40.7.5
  Visual/layout pass only. No DB/auth/TURN/LiveKit transport changes.
*/

/* ---------------------------------------------------------------------
   Unified voice hall: room header + participants + controls are one stage
   --------------------------------------------------------------------- */
.content-view.voice-view-v2 {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 58px);
  min-height: 0;
  overflow: hidden;
  padding: 10px 12px 12px;
}

.voice-stage-v2.voice-stage-unified {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 86px 18px 82px;
  overflow: hidden;
}

/* The old separate hero is now only a compact in-stage information bar. */
.voice-stage-unified .voice-room-header-instage {
  position: absolute;
  z-index: 16;
  top: 0;
  left: 0;
  right: 0;
  min-height: 68px;
  margin: 0;
  padding: 10px 14px 9px 15px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(227,40,45,.055), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent);
  box-shadow: none;
}

.voice-stage-unified .voice-room-header-instage::before {
  top: 10px;
  bottom: 10px;
  opacity: .7;
}

.voice-stage-unified .stage-header-instage {
  position: absolute;
  z-index: 8;
  top: 72px;
  left: 16px;
  right: 16px;
  margin: 0;
}

.voice-stage-unified .voice-grid {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 16px 2vw 8px;
  align-content: center;
}

.voice-stage-unified .voice-stage-core {
  top: 53%;
}

/* Controls float inside the voice hall near its bottom edge. */
.voice-stage-unified .voice-control-dock-instage {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: 15px;
  width: auto;
  max-width: calc(100% - 28px);
  min-height: 0;
  margin: 0;
  transform: translateX(-50%);
  padding: 7px 9px;
}

/* Focused camera/stream also stays inside the same hall. */
.voice-stage-v2 .media-focus-stage {
  inset: 82px 12px 78px;
}

/* ---------------------------------------------------------------------
   Participant media preview: use the hover-card area, not the avatar circle
   --------------------------------------------------------------------- */
.voice-stage-v2 .participant-media-preview-slot {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 50%;
  width: min(168px, calc(100% - 16px));
  height: min(96px, var(--rn-stage-avatar));
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: #040609;
  box-shadow:
    0 12px 28px rgba(0,0,0,.38),
    0 0 0 1px rgba(227,40,45,.04);
}

.voice-stage-v2 .participant-media-preview-slot.camera-preview-slot {
  border-color: rgba(227,40,45,.28);
}

.voice-stage-v2 .participant-media-preview-slot.screen-preview-slot {
  border-color: rgba(244,178,62,.30);
}

.voice-stage-v2 .participant-media-preview-slot .participant-live-preview {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.voice-stage-v2 .participant-media-preview-slot.screen-preview-slot .participant-live-preview {
  object-fit: contain;
}

/* Keep the original layout footprint so enabling media never moves the card. */
.voice-stage-v2 .voice-person.has-media-preview .person-avatar {
  opacity: 0;
  visibility: hidden;
}

.voice-stage-v2 .voice-person.has-media-preview::before {
  opacity: .92;
  border-color: rgba(227,40,45,.18);
  background:
    linear-gradient(180deg, rgba(227,40,45,.035), rgba(255,255,255,.008));
}

.voice-stage-v2 .voice-person.has-media-preview .participant-media-actions {
  top: 72px;
  bottom: auto;
}

.voice-stage-v2 .voice-person.has-media-preview.speaking .participant-media-preview-slot {
  border-color: rgba(49,214,107,.88);
  box-shadow:
    0 0 0 4px rgba(49,214,107,.07),
    0 0 24px rgba(49,214,107,.20),
    0 12px 28px rgba(0,0,0,.38);
}

/* ---------------------------------------------------------------------
   Mobile: pin the app to the real top of the page when the keyboard is closed.
   The previous unconditional VisualViewport offset could move the whole shell
   downward as browser chrome changed its offsetTop.
   --------------------------------------------------------------------- */
@media (max-width: 720px), (hover:none) and (pointer:coarse) {
  html,
  body {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .app-shell {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  /* Keep the historical VisualViewport correction only while typing. */
  html.rv-keyboard-open .app-shell {
    width: var(--rv-vv-width, 100vw) !important;
    max-width: var(--rv-vv-width, 100vw) !important;
    height: var(--rv-vv-height, 100dvh) !important;
    max-height: var(--rv-vv-height, 100dvh) !important;
    transform: translate3d(
      var(--rv-vv-left, 0px),
      var(--rv-vv-top, 0px),
      0
    ) !important;
  }

  .main-panel {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .topbar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 54px;
  }

  .content-view.voice-view-v2 {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 6px !important;
  }

  .voice-stage-v2.voice-stage-unified {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 78px 6px 70px !important;
    border-radius: 12px;
  }

  .voice-stage-unified .voice-room-header-instage {
    min-height: 62px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 8px;
    padding: 7px 8px;
  }

  .voice-stage-unified .voice-room-header-instage .eyebrow {
    display: none;
  }

  .voice-stage-unified .voice-room-heading {
    min-width: 0;
  }

  .voice-stage-unified .voice-room-title-row {
    min-width: 0;
  }

  .voice-stage-unified .voice-room-title-row .voice-room-glyph {
    display: none;
  }

  .voice-stage-unified .voice-room-header-instage h1 {
    max-width: 100%;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .voice-stage-unified .voice-room-header-instage p {
    display: none;
  }

  .voice-stage-unified .voice-room-status-cluster {
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
  }

  .voice-stage-unified .voice-network-badge {
    min-height: 28px;
    padding: 0 7px;
    font-size: 7px;
  }

  .voice-stage-unified .voice-join-btn {
    min-width: 0;
    min-height: 32px;
    padding: 0 9px;
    font-size: 9px;
  }

  .voice-stage-unified .stage-header-instage {
    top: 64px;
    left: 9px;
    right: 9px;
    font-size: 7px;
  }

  /* The participant area is bounded by header/dock and scrolls only if needed. */
  .voice-stage-unified .voice-grid {
    position: absolute !important;
    z-index: 3;
    inset: 76px 7px 68px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: center;
    justify-content: stretch;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 12px 6px !important;
    -webkit-overflow-scrolling: touch;
  }

  .voice-stage-unified .voice-grid[data-count="0"] {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .voice-stage-unified .voice-grid[data-count="1"] {
    grid-template-columns: minmax(0,1fr) !important;
    justify-items: center;
  }

  .voice-stage-unified .voice-grid[data-count="1"] .voice-person {
    width: min(210px, 74vw);
  }

  .voice-stage-unified .voice-grid[data-count="3"] .voice-person:last-child,
  .voice-stage-unified .voice-grid[data-count="5"] .voice-person:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 50%;
  }

  .voice-stage-v2 .voice-person,
  .voice-grid.dense .voice-person {
    min-height: 144px;
  }

  .voice-stage-v2 .participant-media-preview-slot {
    width: min(150px, calc(100% - 10px));
    height: 82px;
    top: 8px;
    border-radius: 11px;
  }

  .voice-stage-v2 .voice-person.has-media-preview .participant-media-actions {
    top: 58px;
  }

  /* On touch there is no hover: media actions stay available as small icons. */
  .participant-media-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%,0);
  }

  .voice-stage-unified .voice-control-dock-instage {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: calc(100% - 12px) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    padding: 6px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-actions.voice-unified-actions {
    width: auto !important;
    display: grid !important;
    grid-template-columns: repeat(6, 44px) !important;
    gap: 5px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-btn.voice-icon-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 10px;
  }

  .voice-stage-v2 .media-focus-stage {
    inset: 70px 6px 64px !important;
  }

  /* General mobile views must use the full app width, not a centered narrow column. */
  .content-view,
  .text-view,
  .text-channel-header,
  .message-list,
  .message-composer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .channel-sidebar {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }
}

@media (max-width: 360px) {
  .voice-stage-unified .voice-control-dock .voice-media-actions.voice-unified-actions {
    grid-template-columns: repeat(6, 40px) !important;
    gap: 4px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-btn.voice-icon-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .voice-stage-unified .voice-room-header-instage {
    grid-template-columns: minmax(0,1fr);
  }

  .voice-stage-unified .voice-room-status-cluster {
    position: absolute;
    right: 6px;
    bottom: 4px;
  }

  .voice-stage-unified .voice-network-badge {
    display: none;
  }
}

@media (hover:none) and (pointer:coarse) and (orientation:landscape) {
  .content-view.voice-view-v2 {
    padding: 4px !important;
  }

  .voice-stage-v2.voice-stage-unified {
    padding-top: 62px !important;
    padding-bottom: 58px !important;
  }

  .voice-stage-unified .voice-room-header-instage {
    min-height: 50px;
    grid-template-columns: minmax(0,1fr) auto;
  }

  .voice-stage-unified .stage-header-instage {
    top: 52px;
  }

  .voice-stage-unified .voice-grid {
    inset: 58px 6px 56px !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }

  .voice-stage-unified .voice-grid[data-count="1"] {
    grid-template-columns: minmax(170px,220px) !important;
    justify-content: center;
  }

  .voice-stage-unified .voice-grid[data-count="2"] {
    grid-template-columns: repeat(2,minmax(140px,190px)) !important;
    justify-content: center;
  }

  .voice-stage-unified .voice-control-dock-instage {
    bottom: 4px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-btn.voice-icon-btn {
    height: 42px !important;
    min-height: 42px !important;
  }
}

/* ===== rednexus-design-v6.css ===== */
/*
  REDNexus Design System — spatial Voice Hall experiment + mobile viewport fix
  v0.2-test-dev.40.7.5
  - Desktop participant drag/drop positions are local per browser/user.
  - Owners/admins/custom roles with can_manage_channels may broadcast a layout sync.
  - Mobile remains a normal non-draggable grid.
*/

/* Remove redundant decorative labels/counts from the Voice Hall. */
.voice-stage-unified .voice-room-header-instage .eyebrow,
.voice-stage-unified .stage-header-instage,
#participantCount {
  display: none !important;
}

.voice-stage-v2.voice-stage-unified {
  padding-top: 74px;
}

/* Small layout tools live in the stage, separate from media controls. */
.voice-layout-tools {
  position: absolute;
  z-index: 28;
  top: 76px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background: rgba(8,11,15,.84);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}

.voice-layout-tool {
  width: 36px;
  min-width: 36px;
  height: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  color: #b7bec7;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.voice-layout-tool:hover {
  border-color: rgba(227,40,45,.42);
  background: rgba(227,40,45,.10);
  color: #fff;
  transform: translateY(-1px);
}

.voice-layout-tool.active {
  border-color: rgba(227,40,45,.58);
  background: rgba(227,40,45,.16);
  color: #ff6468;
  box-shadow: 0 0 18px rgba(227,40,45,.10);
}

.voice-layout-tool.sync-ok {
  border-color: rgba(49,214,107,.55);
  color: #5ce38b;
}

.voice-layout-tool svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Connection lines are visual-only for now. */
.voice-links {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.voice-link-line {
  stroke: rgba(156,38,44,.34);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(227,40,45,.10));
}

.voice-link-node {
  fill: rgba(227,40,45,.48);
}

/* Desktop spatial stage. */
@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  .voice-stage-unified .voice-grid {
    position: absolute !important;
    z-index: 4;
    inset: 72px 22px 76px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .voice-stage-unified .voice-grid > .voice-person {
    position: absolute !important;
    z-index: 5;
    width: clamp(150px, 12vw, 190px) !important;
    min-width: 150px !important;
    max-width: 190px !important;
    min-height: 154px;
    margin: 0 !important;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    transition:
      left .22s cubic-bezier(.2,.8,.2,1),
      top .22s cubic-bezier(.2,.8,.2,1),
      box-shadow .18s ease,
      border-color .18s ease;
  }

  .voice-stage-unified .voice-grid > .voice-person.voice-layout-dragging {
    z-index: 20;
    cursor: grabbing;
    transition: none !important;
  }

  .voice-stage-unified.voice-layout-locked .voice-grid > .voice-person {
    cursor: default;
  }

  .voice-stage-unified .voice-grid > .empty-state {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }

  /* Keep preview/action controls clickable instead of starting a drag. */
  .voice-person button,
  .voice-person input,
  .voice-person label,
  .voice-person video,
  .voice-person .participant-audio-box,
  .voice-person .participant-media-actions {
    touch-action: auto;
    user-select: auto;
    -webkit-user-select: auto;
  }
}

/*
  Critical iPhone viewport correction:
  never move the whole app-shell by VisualViewport offsetTop/offsetLeft.
  Dynamic browser chrome can change those offsets even with no keyboard.
*/
@media (max-width: 720px), (hover:none) and (pointer:coarse) {
  html,
  body {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .app-shell,
  html.rv-keyboard-open .app-shell {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* While actually typing, only reduce usable height; never translate the shell. */
  html.rv-keyboard-open .app-shell {
    height: var(--rv-vv-height, 100dvh) !important;
    max-height: var(--rv-vv-height, 100dvh) !important;
  }

  .voice-layout-tools,
  .voice-links {
    display: none !important;
  }

  .voice-stage-v2.voice-stage-unified {
    padding-top: 68px !important;
  }

  .voice-stage-unified .voice-grid {
    inset: 68px 7px 68px !important;
  }

  .voice-stage-unified .voice-room-header-instage {
    top: 0 !important;
  }
}

/* ===== rednexus-design-v7.css ===== */
/*
  REDNexus Design System — mobile shell hard reset + non-layout toasts
  v0.2-test-dev.40.7.5

  .40.3-.40.5 accumulated several generations of iOS fixed/VisualViewport
  positioning. On Safari the layout and visual viewports can diverge as browser
  chrome changes, leaving the main panel outside the visible area. This final
  layer deliberately removes fixed/translated positioning from the application
  shell on touch/mobile devices. Drawers/modals remain overlays.
*/

/* Notices are overlays and must never resize Voice Hall or text layouts. */
.notice {
  position: fixed !important;
  z-index: 360 !important;
  top: 76px !important;
  right: 18px !important;
  left: auto !important;
  width: min(420px, calc(100vw - 36px)) !important;
  max-width: calc(100vw - 36px) !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(67, 196, 118, .28) !important;
  border-radius: 10px !important;
  background: rgba(14, 28, 21, .96) !important;
  color: #9ee7b9 !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.42) !important;
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.notice.error {
  border-color: rgba(227,40,45,.42) !important;
  background: rgba(41,18,21,.97) !important;
  color: #ff9ca0 !important;
}

@media (max-width: 720px), (hover:none) and (pointer:coarse) {
  /*
    Important: do not fix/translate html/body/app-shell to VisualViewport.
    Keep the product in normal document coordinates and size it to the dynamic
    viewport. This prevents Safari's visualViewport.offsetTop/page scroll from
    moving the whole application off screen.
  */
  html {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
  }

  body {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  .app-shell,
  html.rv-keyboard-open .app-shell {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  /* When a real text field owns focus, reduce only the shell height. */
  html.rv-keyboard-open .app-shell {
    height: var(--rv-vv-height, 100dvh) !important;
    max-height: var(--rv-vv-height, 100dvh) !important;
  }

  .main-panel {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .topbar {
    position: relative !important;
    inset: auto !important;
    order: 0 !important;
    flex: 0 0 54px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .content-view,
  .content-view.voice-view-v2,
  .text-view {
    position: relative !important;
    inset: auto !important;
    order: 1 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .content-view.voice-view-v2 {
    overflow: hidden !important;
    padding: 6px !important;
  }

  .voice-stage-v2.voice-stage-unified {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Drawers are overlays over the repaired shell. */
  .channel-sidebar,
  .mobile-members-drawer,
  .member-panel.mobile-open {
    position: fixed !important;
  }

  .notice {
    top: 66px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ===== rednexus-design-v8.css ===== */
/*
  REDNexus Design System — v0.2-test-dev.40.7.5
  Membership isolation UX, mobile topbar cleanup, account search placement,
  desktop server ordering and presence visibility controls.
*/

/* Account block: Profile / Account / Search / Logout. */
.account-panel-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
}
.account-action-btn {
  padding-inline: 3px !important;
  font-size: 7.5px !important;
}

/* Reorder highlight only after the pointer actually moves. */
.server-icon.dragging {
  cursor: grabbing !important;
  opacity: .48;
  transform: scale(.94);
}
.server-icon.drag-over {
  outline: 2px solid rgba(227, 40, 45, .72);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(227, 40, 45, .10), 0 0 24px rgba(227, 40, 45, .22);
}

.user-profile-presence-select {
  width: 100%;
  color-scheme: dark;
}

@media (max-width: 720px), (hover:none) and (pointer:coarse) {
  /* Mobile top bar intentionally contains only Menu and Participants. */
  .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 6px 10px !important;
  }

  .topbar .topbar-title,
  .topbar .topbar-status,
  .topbar .pinned-messages-btn {
    display: none !important;
  }

  .mobile-topbar-action {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), #101319 !important;
    color: #e1e5ea !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
  }

  .mobile-menu-action {
    margin-right: auto !important;
  }

  .mobile-members-action {
    margin-left: auto !important;
  }

  #mobileOnlineCount {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: rgba(227,40,45,.16) !important;
    color: #ff777b !important;
    font-size: 10px !important;
    font-weight: 900 !important;
  }

  /* Six voice controls always remain on one row on mobile, including hang-up. */
  .voice-stage-unified .voice-control-dock-instage {
    width: calc(100% - 12px) !important;
    max-width: 420px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-actions.voice-unified-actions {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 4px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-btn.voice-icon-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  .voice-stage-unified .rn-control-svg {
    width: 19px !important;
    height: 19px !important;
  }

  /* Search is now inside the account drawer, never in the mobile topbar. */
  .account-panel-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .account-action-btn {
    min-height: 44px !important;
  }
}

@media (max-width: 370px) {
  .mobile-topbar-action {
    padding-inline: 9px !important;
    gap: 5px !important;
    font-size: 11px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-actions.voice-unified-actions {
    gap: 3px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-btn.voice-icon-btn {
    height: 42px !important;
    min-height: 42px !important;
  }
}

/* ===== rednexus-design-v9.css ===== */
/*
  REDNexus Design System — v0.2-test-dev.40.7.5
  Voice Hall sync hotfix, compact text-channel header, quick presence status,
  and hard mobile one-row media controls.
*/

/* Empty desktop topbar channel titles should not reserve visual weight. */
.topbar-title:empty {
  display: none !important;
}

/* Text channel: a single visible channel heading. */
.text-channel-header {
  align-items: center !important;
}

.text-channel-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.text-channel-title-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.text-channel-title-line h1 {
  min-width: 0;
  margin: 0 !important;
}

.text-channel-title-line .pinned-messages-btn {
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 32px;
  padding: 5px 8px;
}

.pinned-messages-btn:not(.has-pins) #pinnedMessagesCount {
  display: none !important;
}

/* Quick status context section. */
.quick-context-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 9px 5px;
  color: #7f8792;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.quick-context-section-label small {
  overflow: hidden;
  color: #9ca4af;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Presence accents in member lists. Invisible remains visually offline. */
.presence-member.presence-idle.online .presence-avatar-wrap .member-dot {
  background: #e4ae45 !important;
  box-shadow: 0 0 0 2px #0d1015 !important;
}

.presence-member.presence-dnd.online .presence-avatar-wrap .member-dot {
  background: #e2454b !important;
  box-shadow: 0 0 0 2px #0d1015 !important;
}

.presence-member-state.presence-idle {
  color: #d3a84d !important;
}

.presence-member-state.presence-dnd {
  color: #dd676c !important;
}

.voice-layout-tool:disabled {
  opacity: .55;
  cursor: progress;
}

@media (max-width: 720px), (hover:none) and (pointer:coarse) {
  /*
    Hard rule: exactly six visible Voice Hall actions in one horizontal row.
    Older D3 layers assigned leaveBtn to grid-column:4, which forced a wrap.
    Flex + explicit grid reset makes the row invariant on iPhone widths.
  */
  .voice-stage-unified .voice-control-dock-instage {
    width: calc(100% - 12px) !important;
    max-width: 420px !important;
    padding: 6px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-actions.voice-unified-actions {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 4px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-btn.voice-icon-btn {
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 48px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  .voice-stage-unified .voice-control-dock #leaveBtn {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-btn.hidden,
  .voice-stage-unified .voice-control-dock #videoSettingsBtn.hidden {
    display: none !important;
  }

  .text-channel-title-line {
    gap: 7px;
  }

  .text-channel-title-line .pinned-messages-btn {
    min-width: 36px;
    min-height: 36px;
  }
}

@media (max-width: 360px) {
  .voice-stage-unified .voice-control-dock .voice-media-actions.voice-unified-actions {
    gap: 3px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-btn.voice-icon-btn {
    max-width: 44px !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}

/* ===== rednexus-design-v10.css ===== */
/*
  REDNexus Design System — v0.2-test-dev.40.7.5
  Full-height center workspace, mobile full-width Voice Hall dock,
  sidebar version placement and viewport-safe quick context menus.
*/

/* Version belongs to the server identity area, not the center workspace. */
.server-build-line {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.server-build-line .server-product-label,
.server-build-line #presenceSummary,
.server-build-line .server-code-separator {
  flex: 0 0 auto;
}

.server-code .server-version {
  min-width: 0;
  overflow: hidden;
  color: #69727d;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
  Desktop: remove the obsolete center topbar completely. The Voice Hall/text
  workspace now owns the full height of the center column from its top edge.
  Mobile keeps the topbar because it contains Menu + Participants controls.
*/
@media (min-width: 721px) and (hover:hover) and (pointer:fine) {
  .main-panel > .topbar {
    display: none !important;
  }

  .content-view.voice-view-v2 {
    height: 100dvh !important;
    padding: 0 12px 12px !important;
  }

  .content-view.text-view {
    padding-top: 18px !important;
  }
}

@media (max-width: 720px), (hover:none) and (pointer:coarse) {
  .main-panel > .topbar {
    display: flex !important;
  }
}

/*
  Mobile Voice Hall: use virtually the full stage width. Six controls are six
  equal touch targets, no wrapping and no artificial 44/48px max-width cap.
*/
@media (max-width: 720px), (hover:none) and (pointer:coarse) {
  .voice-stage-unified .voice-control-dock-instage {
    left: 7px !important;
    right: 7px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    padding: 6px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-actions.voice-unified-actions {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: none !important;
    gap: 5px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-btn.voice-icon-btn {
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  .voice-stage-unified .voice-control-dock #leaveBtn {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 360px) {
  .voice-stage-unified .voice-control-dock-instage {
    left: 5px !important;
    right: 5px !important;
    padding: 5px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-actions.voice-unified-actions {
    gap: 4px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-btn.voice-icon-btn {
    height: 46px !important;
    min-height: 46px !important;
  }
}

/* Context menu itself can scroll, but must always remain inside the viewport. */
.quick-context-menu {
  overscroll-behavior: contain;
}

/* ===== rednexus-design-v11.css ===== */
/*
  REDNexus Design System — v0.2-test-dev.40.7.5
  Hotfix: mobile Voice Hall dock, spatial connection-line geometry,
  destructive account logout styling.
*/

/* The visual link layer must use exactly the Voice Hall box. */
.voice-stage-unified .voice-links {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.voice-stage-unified .voice-link-line {
  stroke-linecap: round;
}

/* Logout is a destructive action in every account panel, like hang-up. */
.account-action-btn.account-action-danger.logout-btn:not(:disabled) {
  border-color: rgba(227, 40, 45, .62) !important;
  background:
    linear-gradient(180deg, rgba(227, 40, 45, .32), rgba(112, 20, 24, .48)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 0 0 1px rgba(227,40,45,.08),
    0 7px 18px rgba(0,0,0,.24) !important;
}

.account-action-btn.account-action-danger.logout-btn:not(:disabled):hover {
  border-color: rgba(255, 91, 96, .82) !important;
  background:
    linear-gradient(180deg, rgba(239, 48, 54, .48), rgba(133, 23, 28, .60)) !important;
  color: #fff !important;
  box-shadow: 0 0 22px rgba(227,40,45,.17) !important;
}

/*
  Mobile Voice Hall: the dock itself is a full-width block. The previous
  shrink-to-fit grid track left the actions with almost zero width, causing
  the six SVG icons to pile on top of each other in the middle.
*/
@media (max-width: 720px), (hover:none) and (pointer:coarse) {
  .voice-stage-unified .voice-control-dock-instage {
    left: 4px !important;
    right: 4px !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    transform: none !important;
    display: block !important;
    box-sizing: border-box !important;
    justify-content: stretch !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-actions.voice-unified-actions {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 5px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-btn.voice-icon-btn {
    position: relative !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  .voice-stage-unified .voice-control-dock .rn-control-svg {
    position: static !important;
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    flex: 0 0 21px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .voice-stage-unified .voice-control-dock #leaveBtn {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 360px) {
  .voice-stage-unified .voice-control-dock-instage {
    left: 3px !important;
    right: 3px !important;
    padding: 5px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-actions.voice-unified-actions {
    gap: 4px !important;
  }

  .voice-stage-unified .voice-control-dock .voice-media-btn.voice-icon-btn {
    height: 46px !important;
    min-height: 46px !important;
  }
}

/* Header «Подключено» is a leave control, not a static disabled chip. */
.voice-join-btn.is-connected:not(:disabled) {
  cursor: pointer;
  opacity: 1;
}

.voice-join-btn.is-connected:not(:disabled):hover,
.voice-join-btn.is-connected:not(:disabled):focus-visible {
  border-color: rgba(255, 91, 96, .82);
  background:
    linear-gradient(180deg, rgba(239, 48, 54, .48), rgba(133, 23, 28, .60));
  color: #fff;
  box-shadow: 0 0 22px rgba(227, 40, 45, .17);
}

/* ===== rednexus-design-v12.css ===== */
/*
  REDNexus Design System — D12 / chat reading surface
  v0.2-test-dev.40.8

  Visual pass for the text channel: Inter (SIL OFL, vendored locally),
  denser message stream, calmer chat pane, REDNexus red only as accent.
  No network, auth, permissions or media logic lives here.
*/

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic-wght.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --rn-chat-bg: #0b0c0f;
  --rn-chat-hover: rgba(255, 255, 255, .028);
  --rn-chat-text: #dfe3e8;
  --rn-chat-author: #f4f6f8;
  --rn-composer-bg: rgba(18, 20, 26, .78);
}

html,
body,
button,
input,
textarea,
select {
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -.011em;
}

/* --- Channel header ---------------------------------------------------- */

.text-view {
  isolation: isolate;
  background:
    radial-gradient(ellipse 92% 78% at 38% 36%, rgba(227, 40, 45, .10), transparent 58%),
    radial-gradient(ellipse 62% 52% at 44% 30%, rgba(72, 14, 18, .42), transparent 64%),
    radial-gradient(circle at 52% -8%, rgba(255, 255, 255, .035), transparent 32%),
    var(--rn-chat-bg);
}

.message-list {
  background: transparent;
}

.text-channel-header {
  min-height: 48px;
  padding: 8px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .045) !important;
  background: transparent;
}

.text-channel-title-line h1 {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
  color: var(--rn-chat-author);
}

.text-socket-state {
  padding: 3px 8px !important;
  border-radius: 999px;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* --- Message stream ---------------------------------------------------- */

.message-list {
  padding: 12px 8px 10px !important;
  scrollbar-color: #3a414a transparent;
}

.message-row {
  position: relative;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 0 !important;
  margin: 0 -8px;
  padding: 4px 16px 4px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.message-row:hover,
.message-row:focus-within {
  background: var(--rn-chat-hover) !important;
}

.message-avatar,
.message-gutter-time {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
}

.message-avatar {
  width: 40px !important;
  height: 40px !important;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 650;
}

.message-body {
  grid-column: 2;
  min-width: 0;
  padding-left: 4px;
}

.message-author {
  font-size: 15px;
  font-weight: 600 !important;
  color: var(--rn-chat-author) !important;
}

.message-time {
  font-size: 11px;
  font-weight: 500;
  color: #6e7782 !important;
}

.message-content {
  margin-top: 1px !important;
  color: var(--rn-chat-text) !important;
  font-size: 15px;
  font-weight: 450;
  line-height: 1.42 !important;
}

.message-gutter-time {
  display: none;
  margin-top: 3px;
  color: #6e7782;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
}

.message-row.message-compact {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  min-height: 24px;
}

.message-row.message-compact .message-avatar,
.message-row.message-compact .message-author,
.message-row.message-compact .message-time {
  display: none;
}

.message-row.message-compact .message-meta {
  min-height: 0;
}

.message-row.message-compact .message-content {
  margin-top: 0 !important;
}

.message-row.message-compact:hover .message-gutter-time,
.message-row.message-compact:focus-within .message-gutter-time {
  display: block;
}

.message-row.mentioned-me {
  border: 0 !important;
  box-shadow: inset 2px 0 0 var(--rn-red);
  background: linear-gradient(90deg, rgba(227, 40, 45, .09), transparent 64%) !important;
}

.message-row.own .message-avatar {
  border-color: rgba(227, 40, 45, .42);
}

.message-actions {
  position: absolute;
  top: -16px;
  right: 12px;
  z-index: 3;
  margin-left: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #1c2128;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.message-row.message-compact .message-meta {
  height: 0;
  min-height: 0;
  overflow: visible;
}

.message-row.message-compact .message-edited {
  position: absolute;
  left: 60px;
  top: 2px;
  display: none;
}

/* --- Composer ---------------------------------------------------------- */

.message-composer {
  margin: 0 12px 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.composer-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: var(--rn-composer-bg);
  backdrop-filter: blur(10px);
}

.message-composer textarea {
  min-height: 44px !important;
  max-height: 120px !important;
  padding: 11px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--rn-chat-text) !important;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: none !important;
}

.message-composer textarea:focus {
  border: 0 !important;
  box-shadow: none !important;
}

.composer-main-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  padding: 2px 8px 2px 2px;
}

.composer-field {
  position: relative;
  min-width: 0;
  border-radius: 8px;
}

.composer-field.is-warn {
  box-shadow: inset 0 0 0 1px rgba(228, 181, 72, .5);
}

.composer-field.is-limit {
  box-shadow: inset 0 0 0 1px rgba(255, 98, 104, .72);
}

.composer-field.is-near-limit textarea {
  padding-right: 5.7em !important;
}

.composer-plus-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.composer-attach-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  color: #c5ccd4 !important;
  cursor: pointer;
}

.composer-plus-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: transform .16s ease;
}

.composer-attach-btn[aria-expanded="true"] .composer-plus-icon {
  transform: rotate(45deg);
}

.composer-attach-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, .06) !important;
  color: #f3f5f7 !important;
}

.composer-attach-btn:disabled {
  opacity: .38;
  cursor: default;
}

.composer-plus-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 40;
  display: grid;
  min-width: 188px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: #14181e;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

.composer-plus-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e8ecf0;
  font-size: 14px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}

.composer-plus-item:hover {
  background: rgba(227, 40, 45, .14);
}

.composer-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 4px;
}

.composer-tool-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #c5ccd4;
  cursor: pointer;
}

.composer-tool-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, .06);
  color: #f3f5f7;
}

.composer-tool-btn:disabled {
  opacity: .38;
  cursor: default;
}

.composer-tool-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.composer-tool-gif {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}

.composer-emoji-wrap {
  position: relative;
}

.composer-emoji-picker {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(8, 32px);
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: #14181e;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

.composer-emoji-item {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}

.composer-emoji-item:hover {
  background: rgba(255, 255, 255, .06);
}

.composer-poll-mode {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid rgba(227, 40, 45, .22);
  border-radius: 10px;
  background: rgba(17, 20, 26, .92);
}

.composer-poll-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.composer-poll-label {
  font-size: 12px;
  font-weight: 700;
  color: #e8ecf0;
}

.composer-poll-question,
.composer-poll-option {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #0c0f14;
  color: #edf0f3;
}

.composer-poll-options {
  display: grid;
  gap: 6px;
}

.composer-poll-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.composer-poll-add {
  border: 0;
  background: transparent;
  color: #9aa3ae;
  cursor: pointer;
  font-size: 13px;
}

.composer-poll-add:hover {
  color: #f3f5f7;
}

.message-counter {
  position: absolute;
  right: 8px;
  bottom: 11px;
  z-index: 1;
  min-width: 0;
  margin: 0 !important;
  color: #8b939e;
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
}

.message-counter.is-warn {
  color: #e4b548;
}

.message-counter.is-limit {
  color: #ff6268;
}

.message-composer .btn-primary {
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
}

.composer-reply-mode,
.composer-edit-mode {
  margin: 0 0 8px;
  border-color: rgba(227, 40, 45, .22);
  border-radius: 8px;
  background: rgba(17, 20, 26, .92);
}

.typing-indicator {
  padding: 0 20px 8px;
  color: #8b939e;
  font-size: 12px;
}

.unread-separator {
  margin: 8px 8px 10px;
}

.empty-state {
  color: #8b939e;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .text-channel-header {
    padding: 8px 12px !important;
  }

  .message-row {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    padding-left: 4px !important;
    padding-right: 10px !important;
  }

  .message-avatar {
    width: 34px !important;
    height: 34px !important;
  }

  .message-composer {
    margin: 0 8px max(8px, env(safe-area-inset-bottom)) !important;
  }

  .composer-attach-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px !important;
  }

  .composer-tool-btn {
    width: 38px;
    height: 38px;
  }
}

/* ===== rednexus-design-v13.css ===== */
/*
  REDNexus Design System — D13 / chat media
  v0.2-test-dev.40.9

  Polls, GIF/sticker/emoji tray, pin bar, Discord-like reactions.
  Visual reference only — no third-party chat source.
*/

.pin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(18, 20, 26, .72);
  color: #c5cbd3;
  text-align: left;
  cursor: pointer;
}

.pin-bar.hidden {
  display: none;
}

.pin-bar:hover {
  border-color: rgba(227, 40, 45, .35);
  background: rgba(227, 40, 45, .08);
}

.pin-bar-icon {
  flex: 0 0 auto;
}

.pin-bar-preview {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.pin-bar-more {
  flex: 0 0 auto;
  color: #8b929c;
  font-size: 11px;
  font-weight: 700;
}

.message-row.is-pinned {
  background-image: linear-gradient(90deg, rgba(227, 40, 45, .12), transparent 28px);
}

.message-row.is-pinned .message-body {
  position: relative;
}

.message-pin-flag {
  position: absolute;
  top: 2px;
  right: 8px;
  font-size: 11px;
  opacity: .72;
}

.message-sticker {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 96px;
  margin: 4px 0 2px;
  font-size: 88px;
  line-height: 1;
}

.message-sticker img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
}

.message-attachments.gif-only img {
  max-width: min(360px, 100%);
  border-radius: 12px;
}

.message-poll {
  margin: 8px 0 4px;
  max-width: 420px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(12, 14, 18, .72);
}

.message-poll-question {
  margin-bottom: 10px;
  color: #f4f6f8;
  font-size: 15px;
  font-weight: 750;
}

.poll-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.poll-option:hover {
  border-color: rgba(227, 40, 45, .4);
}

.poll-option.mine {
  border-color: rgba(227, 40, 45, .7);
}

.poll-option[disabled] {
  cursor: default;
  opacity: .85;
}

.poll-option-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(227, 40, 45, .18);
}

.poll-option-label,
.poll-option-count {
  position: relative;
  z-index: 1;
}

.poll-option-label {
  flex: 1 1 auto;
}

.poll-option-count {
  color: #9aa3ad;
  font-size: 12px;
  font-weight: 700;
}

.poll-footer {
  margin-top: 4px;
  color: #8b929c;
  font-size: 12px;
}

.composer-poll-multi {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  color: #c5cbd3;
  font-size: 13px;
}

.composer-media-tray {
  margin: 0 0 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: #12151b;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
}

.composer-media-tray.hidden {
  display: none;
}

.media-tray-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 8px 0;
}

.media-tray-tab {
  flex: 1 1 0;
  min-height: 34px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: #9aa3ad;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.media-tray-tab.active {
  background: rgba(255, 255, 255, .05);
  color: #f4f6f8;
}

.media-tray-search {
  padding: 8px 10px 0;
}

.media-tray-search input {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #0c0e12;
  color: #f4f6f8;
}

.media-tray-cats {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
  overflow-x: auto;
}

.media-tray-cat {
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.media-tray-cat.active {
  background: rgba(227, 40, 45, .16);
}

.media-tray-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  max-height: 280px;
  padding: 10px;
  overflow: auto;
}

.media-tray-body.is-emoji {
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
}

.media-tray-empty {
  grid-column: 1 / -1;
  padding: 24px 8px;
  color: #8b929c;
  text-align: center;
}

.media-gif-tile,
.media-sticker-tile,
.media-emoji-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  color: inherit;
  cursor: pointer;
}

.media-emoji-tile {
  min-height: 36px;
  font-size: 22px;
}

.media-sticker-tile {
  flex-direction: column;
  gap: 2px;
  min-height: 88px;
  font-size: 42px;
}

.media-sticker-tile span {
  color: #8b929c;
  font-size: 10px;
}

.media-gif-tile img,
.media-sticker-tile img {
  width: 100%;
  height: 72px;
  object-fit: cover;
}

.media-tray-footer {
  display: flex;
  gap: 8px;
  padding: 0 10px 10px;
}

.media-tray-footer button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: transparent;
  color: #dfe3e8;
  cursor: pointer;
}

.reaction-chip {
  max-width: 220px;
}

.reaction-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 280px;
  padding: 8px;
}

.reaction-picker-btn.more {
  min-width: 32px;
  font-size: 12px;
  font-weight: 800;
}

/* ===== rednexus-design-v14.css ===== */
/*
  REDNexus Design System — D14 / message actions
  v0.2-test-dev.40.10

  Floating hover bar and right-click menu for messages.
  Visual reference only — no third-party chat source.
*/

.message-row {
  overflow: visible;
}

.message-actions {
  position: absolute;
  top: -14px;
  right: 12px;
  z-index: 6;
  display: none;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #1a1d23;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .42);
  opacity: 1;
}

.message-row:hover .message-actions,
.message-row:focus-within .message-actions,
.message-row.menu-open .message-actions {
  display: inline-flex;
}

.message-action-quick {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.message-action-sep {
  width: 1px;
  height: 20px;
  margin: 0 2px;
  background: rgba(255, 255, 255, .1);
}

.message-action-btn {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #b5bac1;
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
}

.message-action-btn:hover,
.message-action-btn:focus-visible {
  outline: none;
  color: #f2f3f5;
  background: rgba(255, 255, 255, .08);
}

.message-action-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-action-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 8;
  padding: 6px 10px;
  border-radius: 5px;
  background: #111214;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  color: #f2f3f5;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  transition: opacity .08s ease, transform .08s ease;
}

.message-action-btn:hover[data-tip]::after,
.message-action-btn:focus-visible[data-tip]::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.message-pin-flag {
  right: auto;
  left: -2px;
  top: -2px;
}

.message-row:hover .message-pin-flag,
.message-row.menu-open .message-pin-flag {
  opacity: .35;
}

.message-row.menu-open .message-action-btn[data-tip]::after {
  display: none;
}

.reaction-chip.reaction-add {
  width: 32px;
  min-height: 28px;
  padding: 0;
  justify-content: center;
  color: #b5bac1;
}

.reaction-chip.reaction-add svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reaction-chip.reaction-add:hover {
  color: #f2f3f5;
  border-color: #4a5058;
}

.message-forwarded {
  display: grid;
  gap: 2px;
  margin: 0 0 4px;
  padding: 4px 0 4px 10px;
  border-left: 2px solid rgba(227, 40, 45, .55);
  color: #8b929c;
  text-align: left;
  background: transparent;
}

.message-forwarded.deleted {
  opacity: .7;
}

.message-forwarded-label {
  font-size: 11px;
  font-weight: 700;
  color: #9aa0a6;
}

.message-forwarded-author {
  color: #d8dee6;
  font-size: 12px;
  font-weight: 700;
}

.message-forwarded-preview {
  overflow: hidden;
  color: #8b929c;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-context-menu.message-context-menu {
  width: min(280px, calc(100vw - 16px));
  padding: 6px 8px 8px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  background: #111214;
}

.quick-context-menu.message-context-menu .quick-context-item {
  min-height: 34px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
}

.quick-context-menu.message-context-menu .quick-context-item:hover,
.quick-context-menu.message-context-menu .quick-context-item:focus-visible {
  background: rgba(255, 255, 255, .08);
}

.quick-context-menu.message-context-menu .quick-context-item-icon {
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: transparent;
  color: #b5bac1;
  font-size: 14px;
  font-weight: 500;
}

.quick-context-menu.message-context-menu .quick-context-item-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-context-menu.message-context-menu .quick-context-item-label strong {
  font-size: 13px;
  font-weight: 500;
}

.quick-context-menu.message-context-menu .quick-context-item.danger,
.quick-context-menu.message-context-menu .quick-context-item.danger .quick-context-item-icon {
  color: #f23f43;
}

.quick-context-menu.message-context-menu .quick-context-item.danger:hover,
.quick-context-menu.message-context-menu .quick-context-item.danger:focus-visible {
  background: rgba(242, 63, 67, .12);
  color: #fa777c;
}

.quick-context-chevron {
  color: #80848e;
  font-size: 16px;
  line-height: 1;
}

.message-context-reactions {
  display: flex;
  gap: 4px;
  padding: 4px 4px 6px;
}

.message-context-reaction {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: #2b2d31;
  color: #f2f3f5;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.message-context-reaction:hover,
.message-context-reaction:focus-visible {
  outline: none;
  background: #3f4248;
  transform: scale(1.08);
}

.forward-message-modal {
  position: fixed;
  z-index: 430;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 18px 18px;
  background: rgba(3, 4, 6, .82);
  backdrop-filter: blur(8px);
}

.forward-message-card {
  width: min(460px, 96vw);
  max-height: 78vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #1a1d23;
  box-shadow: 0 28px 100px rgba(0, 0, 0, .58);
}

.forward-message-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.forward-message-header h2 {
  margin: 0;
  color: #f2f3f5;
  font-size: 18px;
}

.forward-message-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #c9cdd4;
  cursor: pointer;
  font-size: 22px;
}

.forward-message-close:hover {
  background: rgba(255, 255, 255, .08);
}

.forward-message-preview {
  margin: 12px 16px 0;
  padding: 8px 10px;
  border-left: 2px solid rgba(227, 40, 45, .55);
  color: #b5bac1;
  font-size: 13px;
  line-height: 1.4;
}

.forward-message-search {
  margin: 12px 16px 8px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #111317;
  color: #f2f3f5;
}

.forward-message-list {
  flex: 1 1 auto;
  overflow-y: auto;
  display: grid;
  gap: 2px;
  padding: 6px 10px 12px;
}

.forward-message-group {
  margin: 8px 6px 4px;
  color: #80848e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.forward-message-item {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #d8dee6;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
}

.forward-message-item:hover,
.forward-message-item:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .08);
}

.forward-message-status {
  margin: 0 16px 14px;
  color: #80d197;
  font-size: 12px;
}

.forward-message-status.error {
  color: #eb858a;
}

@media (hover: none) and (pointer: coarse) {
  .message-actions {
    display: none !important;
  }

  .message-row.menu-open .message-actions {
    display: none !important;
  }

  .forward-message-modal {
    align-items: flex-end;
    padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .forward-message-card {
    width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
  }
}

/* ===== rednexus-design-v15.css ===== */
/*
  REDNexus Design System — D15 / reactions + polls
  v0.2-test-dev.40.11
*/

.message-list {
  overflow-x: hidden !important;
}

.text-view {
  overflow-x: hidden;
}

.message-actions {
  top: 2px;
  right: 8px;
  max-width: calc(100% - 64px);
}

.message-action-btn:last-child[data-tip]::after {
  left: auto;
  right: 0;
  transform: none;
}

.message-composer textarea:focus,
.message-composer textarea:focus-visible,
.composer-shell:focus-within,
.media-tray-search input:focus,
.media-tray-search input:focus-visible,
.reaction-picker-search:focus,
.reaction-picker-search:focus-visible,
.composer-poll-question:focus,
.composer-poll-option:focus,
.composer-poll-ends:focus {
  outline: none !important;
  box-shadow: none !important;
}

.message-composer textarea:focus,
.message-composer textarea:focus-visible {
  border-color: transparent !important;
}

.media-tray-search input:focus,
.media-tray-search input:focus-visible,
.reaction-picker-search:focus,
.reaction-picker-search:focus-visible {
  border-color: rgba(255, 255, 255, .16) !important;
}

.reaction-picker-pop {
  position: fixed;
  z-index: 540;
  width: min(368px, calc(100vw - 16px));
  max-height: min(420px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #111214;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
}

.reaction-picker-pop.hidden {
  display: none;
}

.reaction-picker-search {
  margin: 10px 10px 6px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  background: #1e1f22;
  color: #f2f3f5;
  font-size: 14px;
}

.reaction-picker-cats {
  display: flex;
  gap: 2px;
  padding: 0 8px;
  overflow-x: auto;
}

.reaction-picker-cat {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #b5bac1;
  cursor: pointer;
  font-size: 16px;
}

.reaction-picker-cat.active,
.reaction-picker-cat:hover {
  background: rgba(255, 255, 255, .08);
}

.reaction-picker-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px 12px;
}

.reaction-picker-label {
  margin: 6px 2px 8px;
  color: #949ba4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.reaction-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 2px;
}

.reaction-picker-emoji {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
}

.reaction-picker-emoji:hover {
  background: rgba(255, 255, 255, .08);
}

.composer-poll-type {
  display: grid;
  gap: 6px;
  margin: 8px 0;
}

.composer-poll-type label,
.composer-poll-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c9cdd4;
  font-size: 13px;
}

.composer-poll-ends {
  width: 100%;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #111317;
  color: #f2f3f5;
}

.message-poll-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.message-poll-question {
  margin-bottom: 0;
  flex: 1 1 auto;
}

.poll-countdown {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(227, 40, 45, .12);
  color: #ff8b8f;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.poll-countdown.ended {
  background: rgba(255, 255, 255, .06);
  color: #8b929c;
}

.poll-option {
  flex-wrap: wrap;
}

.poll-option-voters {
  position: relative;
  z-index: 1;
  flex: 1 1 100%;
  margin-top: 4px;
  color: #8b929c;
  font-size: 11px;
  line-height: 1.35;
}

.poll-manage {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.poll-manage button {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  background: transparent;
  color: #c9cdd4;
  cursor: pointer;
  font-size: 11px;
}

.poll-manage button:hover {
  background: rgba(255, 255, 255, .06);
}

.poll-timer-editor {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}

.poll-timer-editor input {
  flex: 1 1 auto;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  background: #111317;
  color: #f2f3f5;
}

.media-tray-footer {
  align-items: center;
  justify-content: space-between;
}

.media-tray-giphy {
  font-size: 10px;
  letter-spacing: .04em;
  color: rgba(223, 227, 232, .42);
}

/* ===== rednexus-design-v16.css ===== */
/*
  REDNexus Design System — D16 / Discord-like account menu
  v0.2-test-dev.40.13
*/

.user-panel.account-panel {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px;
}

.account-panel-identity {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 4px 8px 4px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.account-panel-identity:hover:not(:disabled),
.account-panel-identity[aria-expanded="true"] {
  background: rgba(255, 255, 255, .05);
}

.account-panel-identity:disabled {
  cursor: default;
  opacity: .72;
}

.account-panel-identity:focus-visible {
  outline: 1px solid rgba(227, 40, 45, .55);
  outline-offset: 1px;
}

.account-avatar-wrap,
.user-account-menu-avatar-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.account-panel .account-avatar {
  width: 38px;
  height: 38px;
}

.account-presence-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border: 2px solid #090c10;
  border-radius: 50%;
  background: #747f8d;
  pointer-events: none;
}

.account-presence-dot.presence-online { background: #23a55a; }
.account-presence-dot.presence-idle { background: #f0b232; }
.account-presence-dot.presence-dnd { background: #f23f43; }
.account-presence-dot.presence-invisible,
.account-presence-dot.presence-offline { background: #80848e; }

.account-panel-caption {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 600;
  color: #949ba4;
}

.account-panel .user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-panel-actions {
  display: none !important;
}

.user-account-menu {
  position: fixed;
  z-index: 80;
  width: min(320px, calc(100vw - 16px));
  max-height: min(72vh, 560px);
  overflow: auto;
  padding-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #111214;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}

.user-account-menu.hidden {
  display: none;
}

.user-account-menu-banner {
  height: 52px;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(180deg, rgba(227, 40, 45, .38), rgba(227, 40, 45, .08) 70%, transparent),
    #1a1c20;
}

.user-account-menu-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  margin-top: -28px;
  padding: 0 12px 12px;
}

.user-account-menu-avatar-wrap {
  width: 64px;
  height: 64px;
}

.user-account-menu-avatar {
  width: 64px;
  height: 64px;
  border: 4px solid #111214;
  box-sizing: border-box;
}

.user-account-menu-avatar-wrap .account-presence-dot {
  width: 16px;
  height: 16px;
  border-width: 3px;
  border-color: #111214;
  right: 2px;
  bottom: 2px;
}

.user-account-menu-id {
  min-width: 0;
  padding-bottom: 4px;
}

.user-account-menu-name {
  color: #f2f3f5;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-account-menu-handle,
.user-account-menu-status-text {
  color: #b5bac1;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-account-menu-status-text:empty {
  display: none;
}

.user-account-menu-groups {
  display: grid;
  gap: 8px;
  padding: 0 8px 4px;
}

.user-account-menu-group {
  overflow: hidden;
  border-radius: 10px;
  background: #1e1f22;
}

.user-account-menu-item {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #dbdee1;
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.user-account-menu-item + .user-account-menu-item,
.user-account-menu-item + .user-account-status-list,
.user-account-status-list .user-account-menu-item + .user-account-menu-item {
  border-top: 1px solid rgba(255, 255, 255, .04);
}

.user-account-menu-item:hover,
.user-account-menu-item:focus-visible {
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

.user-account-menu-item.danger {
  color: #f23f43;
}

.user-account-menu-item.danger:hover,
.user-account-menu-item.danger:focus-visible {
  background: rgba(242, 63, 67, .12);
  color: #ff6b6e;
}

.user-account-menu-item.is-active {
  background: rgba(227, 40, 45, .08);
}

.user-account-menu-item-icon {
  width: 18px;
  flex: 0 0 18px;
  color: #b5bac1;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.user-account-menu-item-icon.presence-online { color: #23a55a; }
.user-account-menu-item-icon.presence-idle { color: #f0b232; }
.user-account-menu-item-icon.presence-dnd { color: #f23f43; }
.user-account-menu-item-icon.presence-invisible { color: #80848e; }

.user-account-menu-chevron {
  margin-left: auto;
  color: #949ba4;
  font-size: 18px;
  line-height: 1;
}

.user-account-status-list {
  background: rgba(0, 0, 0, .18);
}

.user-account-status-list.hidden {
  display: none;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .user-panel.account-panel {
    min-height: 56px;
    padding: 8px;
  }

  .account-panel-identity {
    min-height: 48px;
  }
}

/* ===== rednexus-design-v17.css ===== */
/*
  REDNexus Design System — D17 / chat UX
  v0.2-test-dev.40.16
*/

.channel-sidebar {
  overflow: visible;
}

.user-panel.account-panel {
  position: relative;
  z-index: 90;
  overflow: visible;
}

.user-account-menu {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 100% !important;
  top: auto !important;
  width: auto !important;
  max-height: min(72vh, calc(100dvh - 96px));
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
  padding-bottom: 8px;
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .55);
}

.user-account-menu-banner {
  border-radius: 12px 12px 0 0;
}

.server-header .notification-settings-btn,
.server-header .server-actions-btn {
  display: none !important;
}

.server-title-block {
  min-width: 0;
  cursor: context-menu;
  user-select: none;
  -webkit-user-select: none;
}

.server-name {
  cursor: context-menu;
}

.server-quick-menu-wrap {
  position: static;
  width: 0;
  height: 0;
  overflow: visible;
}

.server-quick-menu {
  position: fixed;
  z-index: 90;
  top: auto;
  right: auto;
  left: 8px;
  width: min(320px, calc(100vw - 16px));
  max-height: min(72vh, 520px);
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0 0 12px 12px;
  background: #111214;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

.server-quick-menu.hidden {
  display: none;
}

.server-quick-menu-item.hidden {
  display: none !important;
}

.server-quick-menu-item {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #dbdee1;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.server-quick-menu-item + .server-quick-menu-item {
  margin-top: 2px;
}

.server-quick-menu-item:hover,
.server-quick-menu-item:focus-visible {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.server-quick-menu-item.danger {
  color: #f23f43;
}

.server-quick-menu-item.danger:hover,
.server-quick-menu-item.danger:focus-visible {
  background: rgba(242, 63, 67, .12);
}

.server-quick-menu-icon {
  color: #b5bac1;
  font-size: 15px;
  text-align: center;
}

.user-profile-modal {
  background: rgba(7, 8, 10, .72);
}

.user-profile-card {
  width: min(440px, 96vw);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #111214;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}

.user-profile-cover {
  background:
    linear-gradient(180deg, rgba(227, 40, 45, .38), rgba(227, 40, 45, .08) 70%, transparent),
    #1a1c20;
}

.user-profile-avatar {
  position: relative;
  border: 5px solid #111214;
  background: #1e1f22;
}

.user-profile-avatar.is-editable {
  cursor: pointer;
}

.user-profile-avatar.is-editable::after {
  content: "Сменить";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}

.user-profile-avatar.is-editable:hover::after,
.user-profile-avatar.is-editable:focus-visible::after {
  opacity: 1;
}

.user-profile-name-line h2,
.user-profile-login,
.user-profile-role,
.user-profile-custom-status {
  font-family: inherit;
}

.user-profile-login {
  margin-top: 2px;
  color: #b5bac1;
  font-size: 13px;
}

.user-profile-login.hidden {
  display: none !important;
}

.user-profile-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-profile-action {
  min-height: 40px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: #1e1f22;
  color: #dbdee1;
}

.user-profile-action:hover:not(:disabled) {
  border-color: transparent;
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.user-profile-action > span {
  font-size: 14px;
}

.user-profile-action > strong {
  font-size: 13px;
  font-weight: 600;
}

.user-profile-section-title {
  color: #949ba4;
}

.user-profile-edit-input,
.user-profile-edit-textarea,
.user-profile-presence-select {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #1e1f22;
  color: #dbdee1;
}

.user-profile-edit-save,
.user-profile-avatar-delete,
.user-profile-edit-cancel,
.channels-modal-card,
.roles-modal-card,
.server-actions-modal .modal-card,
.notification-settings-modal .modal-card,
.moderation-modal .modal-card,
.member-moderation-modal .modal-card,
.channel-permissions-modal .modal-card {
  border-color: rgba(255, 255, 255, .08);
}

.channels-modal-card,
.roles-modal-card,
.server-hub-modal .modal-card,
.server-actions-modal .modal-card,
.notification-settings-modal .modal-card,
.moderation-modal .modal-card,
.member-moderation-modal .modal-card,
.channel-permissions-modal .modal-card,
.account-security-modal .modal-card,
.global-search-modal .modal-card,
.pinned-messages-modal .modal-card {
  background: #111214;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}

.avatar-crop-modal {
  position: fixed;
  z-index: 520;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(7, 8, 10, .72);
}

.avatar-crop-modal.hidden {
  display: none;
}

.avatar-crop-card {
  width: min(360px, 100%);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #111214;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}

.avatar-crop-title {
  margin-bottom: 12px;
  color: #f2f3f5;
  font-size: 16px;
  font-weight: 800;
}

.avatar-crop-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  background: #1e1f22;
  touch-action: none;
  cursor: grab;
}

.avatar-crop-viewport.is-dragging {
  cursor: grabbing;
}

.avatar-crop-image {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
}

.avatar-crop-frame {
  position: absolute;
  inset: 12px;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 8px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .38);
  pointer-events: none;
}

.avatar-crop-zoom-label {
  display: block;
  margin: 12px 0 6px;
  color: #949ba4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.avatar-crop-zoom {
  width: 100%;
}

.avatar-crop-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.avatar-crop-confirm,
.avatar-crop-cancel {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.avatar-crop-confirm {
  background: #e3282d;
  color: #fff;
}

.avatar-crop-cancel {
  background: #1e1f22;
  color: #dbdee1;
}

@media (hover: none) and (pointer: coarse) {
  .server-quick-menu {
    max-height: min(70vh, calc(100dvh - 96px));
    width: min(100vw - 16px, 360px);
  }

  .user-account-menu {
    max-height: min(70vh, calc(100dvh - 96px));
    width: auto;
  }

  .user-profile-card,
  .avatar-crop-card {
    width: 100%;
    max-height: min(92vh, calc(100dvh - 16px));
  }

  .user-profile-action,
  .server-quick-menu-item {
    min-height: 44px;
  }
}

/* ===== rednexus-design-v18.css ===== */
/*
  REDNexus Design System — D18 / user settings
  v0.2-test-dev.40.18
*/

.user-profile-avatar-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  margin-top: -38px;
  z-index: 2;
}

.user-profile-avatar-wrap .user-profile-avatar {
  width: 76px;
  height: 76px;
  margin-top: 0;
}

.user-profile-avatar.is-editable::after {
  content: "Изменить";
}

.avatar-edit-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 8;
  min-width: 148px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: #111214;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

.avatar-edit-menu.hidden {
  display: none !important;
}

.avatar-edit-menu button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #dbdee1;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.avatar-edit-menu button:hover,
.avatar-edit-menu button:focus-visible {
  background: rgba(255, 255, 255, .06);
}

.avatar-edit-menu button.danger {
  color: #f23f43;
}

.user-settings-modal {
  align-items: stretch;
  justify-content: stretch;
  padding: 24px;
}

.user-settings-card.unified-settings-card {
  width: min(980px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
}

.user-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 12px;
  border-right: 1px solid rgba(255, 255, 255, .06);
  background: #0e0f12;
  overflow-y: auto;
}

.user-settings-nav-kicker {
  margin: 0 10px 2px;
  color: #80848e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.user-settings-nav-title {
  margin: 0 10px 12px;
  color: #f2f3f5;
  font-size: 16px;
  font-weight: 800;
}

.user-settings-nav-item {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #b5bac1;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.user-settings-nav-item:hover,
.user-settings-nav-item:focus-visible {
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

.user-settings-nav-item.active {
  background: rgba(227, 40, 45, .16);
  color: #fff;
}

.user-settings-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #111214;
}

.user-settings-header {
  flex: 0 0 auto;
}

.user-settings-main .unified-settings-pane,
.user-settings-main .voice-settings-body {
  flex: 1 1 auto;
  overflow-y: auto;
}

.user-settings-email {
  margin: 0 0 16px;
  color: #b5bac1;
  font-size: 12px;
}

.settings-section-title {
  margin: 18px 0 10px;
  color: #949ba4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.settings-section-title:first-child {
  margin-top: 0;
}

.settings-choice-list {
  display: grid;
  gap: 8px;
}

.settings-choice {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: #1e1f22;
  cursor: pointer;
}

.settings-choice strong {
  display: block;
  color: #f2f3f5;
  font-size: 13px;
}

.settings-choice span span {
  display: block;
  margin-top: 3px;
  color: #949ba4;
  font-size: 12px;
  line-height: 1.4;
}

.settings-hotkey-btn {
  min-height: 38px;
  min-width: 140px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: #1e1f22;
  color: #dbdee1;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.settings-hotkey-btn.is-capturing {
  border-color: rgba(227, 40, 45, .55);
  color: #fff;
}

.settings-hotkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: #1e1f22;
}

.settings-hotkey-copy {
  min-width: 0;
}

.settings-hotkey-copy strong,
.voice-settings-label.with-help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f2f3f5;
  font-size: 13px;
}

.settings-help {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: #2b2d31;
  color: #b5bac1;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: help;
}

.settings-help-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 8;
  width: min(280px, 64vw);
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: #111214;
  color: #dbdee1;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}

.settings-help:hover .settings-help-tip,
.settings-help:focus-visible .settings-help-tip {
  opacity: 1;
}

.settings-camera-preview-card {
  margin: 10px 0 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #0b0c0e;
}

.settings-camera-preview {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  background: #050607;
}

.settings-camera-preview-actions {
  display: flex;
  gap: 8px;
  padding: 10px;
}

.settings-mode-card p {
  margin: 0 0 10px;
  color: #dbdee1;
  font-size: 13px;
  line-height: 1.45;
}

.settings-mode-toggle {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(227, 40, 45, .35);
  border-radius: 8px;
  background: rgba(227, 40, 45, .12);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.settings-mode-toggle:disabled {
  opacity: .45;
  cursor: default;
}

@media (max-width: 820px) {
  .user-settings-modal {
    padding: 0;
  }

  .user-settings-card.unified-settings-card {
    width: 100%;
    max-height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .user-settings-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .user-settings-nav-kicker,
  .user-settings-nav-title {
    display: none;
  }

  .user-settings-nav-item {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 12px;
  }
}

/* ===== rednexus-design-v19.css ===== */
/*
  REDNexus Design System — D19 / Discord-like roles & channel settings
  v0.2-test-dev.40.19
*/

.server-settings-modal.user-settings-modal,
.channel-settings-modal.user-settings-modal {
  align-items: stretch;
  justify-content: stretch;
  padding: 24px;
  z-index: 80;
}

.server-settings-card,
.channel-settings-card {
  width: min(1080px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: #111214;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}

.server-settings-main,
.channel-settings-main {
  min-width: 0;
  overflow: auto;
  padding: 22px 24px 28px;
}

.ss-pane.hidden,
.cs-pane.hidden {
  display: none !important;
}

.ss-role-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  min-height: 420px;
}

.ss-role-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.ss-role-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #dbdee1;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.ss-role-item:hover,
.ss-role-item.active {
  background: rgba(255, 255, 255, .06);
}

.ss-role-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #949ba4;
  flex: 0 0 auto;
}

.ss-role-count {
  margin-left: auto;
  color: #949ba4;
  font-size: 11px;
  font-weight: 600;
}

.ss-role-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 14px;
}

.ss-role-tab {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #949ba4;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ss-role-tab.active {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.ss-perm-group {
  margin: 0 0 16px;
}

.ss-perm-group h3 {
  margin: 0 0 8px;
  color: #949ba4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ss-perm-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.ss-perm-row span {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ss-perm-row small {
  color: #949ba4;
  font-size: 12px;
  font-weight: 500;
}

.ss-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 14px;
}

.ss-color-dot {
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

.ss-color-dot.active {
  border-color: #fff;
}

.ss-overwrite-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.ss-overwrite-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: #1e1f22;
  color: #dbdee1;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.ss-overwrite-remove {
  color: #949ba4;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}

.ss-overwrite-remove:hover {
  color: #f23f43;
}

.presence-member-name.has-role-color {
  font-weight: 650;
}

.ss-overwrite-item.active {
  outline: 1px solid #5865f2;
}

.ss-tri {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
}

.ss-tri button {
  width: 34px;
  height: 28px;
  border: 0;
  background: #1e1f22;
  color: #949ba4;
  cursor: pointer;
  font-weight: 800;
}

.ss-tri button.on-allow {
  background: rgba(35, 165, 89, .2);
  color: #23a559;
}

.ss-tri button.on-deny {
  background: rgba(242, 63, 67, .2);
  color: #f23f43;
}

.ss-add-row {
  display: flex;
  gap: 8px;
  margin: 8px 0 16px;
}

.ss-add-row select,
.ss-add-row input:not([type="checkbox"]),
.channel-settings-main input:not([type="checkbox"]),
.channel-settings-main textarea,
.server-settings-main input:not([type="checkbox"]),
.server-settings-main select {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #1e1f22;
  color: #dbdee1;
  font: inherit;
}

.channel-settings-main textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px;
  resize: vertical;
}

.ss-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  color: #dbdee1;
  font-size: 13px;
}

.member-name[data-role-color] {
  color: var(--role-color, inherit);
}

@media (max-width: 820px) {
  .server-settings-card,
  .channel-settings-card,
  .ss-role-layout {
    grid-template-columns: 1fr;
  }
}

/* ===== rednexus-design-v20.css ===== */
/*
  REDNexus Design System — D20 / unified Discord-like roles & channel permissions
  v0.2-test-dev.40.20
*/

.server-settings-main .role-editor-panel,
.ss-role-editor {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.ss-role-layout {
  align-items: start;
  gap: 8px 28px;
}

.server-settings-main .roles-v22-section-title,
.ss-role-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 0 8px 8px;
  color: #949ba4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.server-settings-main .role-create-btn,
.ss-create-role-btn {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #23a559;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.server-settings-main .role-create-btn:hover,
.ss-create-role-btn:hover {
  background: rgba(35, 165, 89, .12);
}

.ss-role-item,
.ss-overwrite-item {
  min-height: 34px;
  padding: 0 8px;
  border-radius: 4px;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
}

.ss-role-item:hover,
.ss-overwrite-item:hover {
  background: rgba(255, 255, 255, .04);
}

.ss-role-item.active,
.ss-overwrite-item.active {
  background: rgba(255, 255, 255, .08);
  outline: 0;
}

.ss-role-count {
  font-size: 12px;
  font-weight: 500;
}

.ss-role-tabs {
  gap: 4px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ss-role-tab {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}

.ss-role-tab.active {
  background: #404249;
  color: #f2f3f5;
}

.ss-perm-group {
  margin: 0 0 24px;
}

.ss-perm-group h3 {
  margin: 0 0 4px;
  padding: 0;
  color: #949ba4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.ss-perm-row {
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.ss-perm-row b {
  color: #f2f3f5;
  font-size: 16px;
  font-weight: 500;
}

.ss-perm-row small {
  color: #b5bac1;
  font-size: 14px;
  line-height: 1.35;
}

.ss-perm-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  align-self: center;
  flex: 0 0 40px;
  width: 40px;
  height: 24px;
  min-width: 40px;
  min-height: 24px;
  max-width: 40px;
  max-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #4e5058;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .12s ease;
}

.ss-perm-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform .12s ease;
}

.ss-perm-row input[type="checkbox"]:checked {
  background: var(--red, #df3438);
}

.ss-perm-row input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}

.ss-perm-row input[type="checkbox"]:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.ss-overwrite-list {
  gap: 2px;
}

.ss-overwrite-item {
  background: transparent;
}

.server-settings-main .role-save-btn,
.server-settings-main .role-delete-btn,
.channel-settings-main .voice-settings-actions button,
#csAddOverwrite,
#csSaveOverwrite,
#csSyncNow {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.server-settings-main .role-save-btn,
#csSaveOverwrite,
#csAddOverwrite,
#csSyncNow {
  background: var(--red, #df3438);
  color: #fff;
}

.server-settings-main .role-delete-btn {
  background: transparent;
  color: #f23f43;
}

.ss-sync-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.channel-settings-main .ss-perm-row,
.server-settings-main .ss-perm-row {
  background: transparent;
}

/* ===== rednexus-design-v21.css ===== */
/*
  REDNexus Design System — D21 / role permission toggles
  v0.2-test-dev.40.21
*/

.ss-perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ss-perm-row > span {
  flex: 1 1 auto;
  min-width: 0;
}

.server-settings-main .ss-perm-row input[type="checkbox"],
.channel-settings-main .ss-perm-row input[type="checkbox"],
.ss-perm-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  align-self: center;
  flex: 0 0 40px;
  width: 40px;
  height: 24px;
  min-width: 40px;
  min-height: 24px;
  max-width: 40px;
  max-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #4e5058;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .12s ease;
}

.server-settings-main .ss-perm-row input[type="checkbox"]::after,
.channel-settings-main .ss-perm-row input[type="checkbox"]::after,
.ss-perm-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform .12s ease;
}

.server-settings-main .ss-perm-row input[type="checkbox"]:checked,
.channel-settings-main .ss-perm-row input[type="checkbox"]:checked,
.ss-perm-row input[type="checkbox"]:checked {
  background: var(--red, #df3438);
}

.server-settings-main .ss-perm-row input[type="checkbox"]:checked::after,
.channel-settings-main .ss-perm-row input[type="checkbox"]:checked::after,
.ss-perm-row input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}

.server-settings-main .ss-perm-row input[type="checkbox"]:disabled,
.channel-settings-main .ss-perm-row input[type="checkbox"]:disabled,
.ss-perm-row input[type="checkbox"]:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.server-settings-main .role-save-btn,
#csSaveOverwrite,
#csAddOverwrite,
#csSyncNow {
  background: var(--red, #df3438);
  color: #fff;
}

.server-settings-main .role-save-btn:hover,
#csSaveOverwrite:hover,
#csAddOverwrite:hover,
#csSyncNow:hover {
  background: var(--red-dark, #9f272b);
}

/* ===== rednexus-design-v22.css ===== */
/*
  REDNexus Design System — D22 / role save, drag hierarchy, action footer
  v0.2-test-dev.40.22
*/

.server-settings-main .role-editor-actions {
  margin-top: 18px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.server-settings-main .role-editor-hint,
.server-settings-main .role-editor-hint:empty,
.server-settings-main #ssRoleHint {
  display: none;
}

.server-settings-main .role-save-btn,
#csSaveOverwrite,
#csAddOverwrite,
#csSyncNow {
  border: 0;
  background: var(--red, #df3438);
  color: #fff;
}

.ss-role-item {
  position: relative;
}

.ss-role-drag {
  flex: 0 0 10px;
  width: 10px;
  height: 14px;
  margin-right: 2px;
  background-image: radial-gradient(circle, #b5bac1 1.15px, transparent 1.25px);
  background-size: 5px 5px;
  background-position: 0 0;
  opacity: 0;
  pointer-events: none;
}

.ss-role-item.ss-role-draggable {
  cursor: grab;
  -webkit-user-drag: element;
  user-select: none;
}

.ss-role-item.ss-role-draggable:hover .ss-role-drag,
.ss-role-item.ss-role-draggable.dragging .ss-role-drag,
.ss-role-item.ss-role-draggable.active .ss-role-drag {
  opacity: .75;
}

.ss-role-item.ss-role-draggable:active,
.ss-role-item.ss-role-draggable.dragging {
  cursor: grabbing;
}

.ss-role-item.dragging {
  opacity: .42;
}

.ss-role-item.drag-over-before::before,
.ss-role-item.drag-over-after::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--red, #df3438);
}

.ss-role-item.drag-over-before::before {
  top: -1px;
}

.ss-role-item.drag-over-after::after {
  bottom: -1px;
}

.ss-role-drag-locked {
  opacity: 0;
}

/* ===== rednexus-design-v23.css ===== */
/*
  REDNexus Design System — D23 / server general tab invites
  v0.2-test-dev.40.23
*/

.ss-invite-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 12px;
  margin: 10px 0 12px;
}

.ss-invite-options label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #949ba4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ss-invite-options select {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #1e1f22;
  color: #dbdee1;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.server-settings-main #serverInviteSection {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.server-settings-main #createInviteBtn {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  background: var(--red, #df3438);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.server-settings-main #createInviteBtn:hover {
  background: var(--red-dark, #9f272b);
}

@media (max-width: 720px) {
  .ss-invite-options {
    grid-template-columns: 1fr;
  }
}

/* ===== rednexus-design-v24.css ===== */
/*
  REDNexus Design System — D24 / personal member channel permissions
  v0.2-test-dev.40.24
*/

.member-perms-modal.user-settings-modal {
  z-index: 90;
}

.member-perms-card {
  width: min(720px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.member-perms-body {
  min-height: 0;
  overflow: auto;
  padding: 0 24px 24px;
}

.ss-perm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin: 0 0 14px;
}

.ss-perm-toolbar .ss-add-row {
  flex: 1 1 260px;
  margin: 0;
}

#csOpenMemberPerms {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: #2b2d31;
  color: #f2f3f5;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

#csOpenMemberPerms:hover {
  background: #35373c;
}

#mpAddOverwrite,
#mpSaveOverwrite {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  background: var(--red, #df3438);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

#mpAddOverwrite:hover,
#mpSaveOverwrite:hover {
  background: var(--red-dark, #9f272b);
}

#mpSaveOverwrite:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.member-perms-body .ss-add-row select {
  min-height: 36px;
  flex: 1 1 auto;
}

/* ===== rednexus-design-v25.css ===== */
/*
  REDNexus Design System — D25 / permission settings buttons
  v0.2-test-dev.40.25
*/

.server-settings-modal .role-save-btn,
.server-settings-modal #renameServerBtn,
.server-settings-modal #createInviteBtn,
.channel-settings-modal .voice-settings-actions button,
.channel-settings-modal #csSaveOverview,
.channel-settings-modal #csAddOverwrite,
.channel-settings-modal #csSaveOverwrite,
.channel-settings-modal #csSyncNow,
.member-perms-modal .voice-settings-actions button,
.member-perms-modal #mpAddOverwrite,
.member-perms-modal #mpSaveOverwrite {
  appearance: none;
  -webkit-appearance: none;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent),
    linear-gradient(135deg, #d92227, #8c171b);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(227, 40, 45, .12), 0 8px 20px rgba(127, 23, 27, .22);
}

.server-settings-modal .role-save-btn:hover,
.server-settings-modal #renameServerBtn:hover,
.server-settings-modal #createInviteBtn:hover,
.channel-settings-modal .voice-settings-actions button:hover,
.channel-settings-modal #csSaveOverview:hover,
.channel-settings-modal #csAddOverwrite:hover,
.channel-settings-modal #csSaveOverwrite:hover,
.channel-settings-modal #csSyncNow:hover,
.member-perms-modal .voice-settings-actions button:hover,
.member-perms-modal #mpAddOverwrite:hover,
.member-perms-modal #mpSaveOverwrite:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .11), transparent),
    linear-gradient(135deg, #ef3035, #a2191e);
  color: #fff;
  box-shadow: 0 0 18px rgba(227, 40, 45, .2), 0 10px 28px rgba(127, 23, 27, .28);
}

.server-settings-modal .role-save-btn:disabled,
.channel-settings-modal .voice-settings-actions button:disabled,
.channel-settings-modal #csSaveOverwrite:disabled,
.member-perms-modal #mpSaveOverwrite:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.server-settings-modal .ss-create-role-btn,
.server-settings-modal .role-create-btn,
.server-settings-modal .server-copy-btn,
.channel-settings-modal #csOpenMemberPerms {
  appearance: none;
  -webkit-appearance: none;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(227, 40, 45, .45);
  border-radius: 8px;
  background: rgba(227, 40, 45, .1);
  color: #ff8a8d;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
}

.server-settings-modal .ss-create-role-btn,
.server-settings-modal .role-create-btn {
  min-height: 28px;
  border: 0;
  background: transparent;
  color: var(--rn-red, #e3282d);
}

.server-settings-modal .ss-create-role-btn:hover,
.server-settings-modal .role-create-btn:hover,
.server-settings-modal .server-copy-btn:hover,
.channel-settings-modal #csOpenMemberPerms:hover {
  background: rgba(227, 40, 45, .16);
  border-color: rgba(227, 40, 45, .7);
  color: #fff;
}

.server-settings-modal .role-delete-btn,
.server-settings-modal .server-danger-btn,
.server-settings-modal .server-invite-revoke,
.server-settings-modal #transferOwnershipBtn {
  appearance: none;
  -webkit-appearance: none;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 98, 104, .35);
  border-radius: 8px;
  background: rgba(227, 40, 45, .08);
  color: var(--rn-danger, #ff6268);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}

.server-settings-modal .role-delete-btn {
  border: 0;
  background: transparent;
}

.server-settings-modal .role-delete-btn:hover,
.server-settings-modal .server-danger-btn:hover,
.server-settings-modal .server-invite-revoke:hover,
.server-settings-modal #transferOwnershipBtn:hover {
  background: rgba(227, 40, 45, .16);
  color: #ff8a8d;
}

.server-settings-modal .voice-settings-actions,
.channel-settings-modal .voice-settings-actions,
.member-perms-modal .voice-settings-actions {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
  justify-content: flex-start;
}

.ss-role-tab.active {
  background: rgba(227, 40, 45, .18);
  color: #fff;
}

.ss-overwrite-item.active,
.ss-role-item.active {
  outline: 0;
  background: rgba(227, 40, 45, .14);
}

.ss-tri {
  border-color: rgba(255, 255, 255, .08);
}

.ss-tri button {
  background: #171b21;
  color: #828b96;
}

.ss-tri button.on-allow {
  background: rgba(49, 214, 107, .16);
  color: var(--rn-green, #31d66b);
}

.ss-tri button.on-deny {
  background: rgba(227, 40, 45, .2);
  color: var(--rn-danger, #ff6268);
}

.roles-modal-card-v22 .role-save-btn,
.channel-permissions-modal button[type="button"] {
  appearance: none;
  -webkit-appearance: none;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent),
    linear-gradient(135deg, #d92227, #8c171b);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.roles-modal-card-v22 .role-delete-btn,
.roles-modal-card-v22 .role-cancel-btn {
  background: transparent;
  color: var(--rn-danger, #ff6268);
  box-shadow: none;
}

.roles-modal-card-v22 .role-create-btn {
  background: transparent;
  color: var(--rn-red, #e3282d);
  border: 0;
}

/* ===== rednexus-design-v26.css ===== */
/*
  REDNexus Design System — D26 / clone role permissions on create
  v0.2-test-dev.40.27
*/

.ss-create-role-wrap {
  position: relative;
}

.ss-create-role-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  min-width: 228px;
  max-width: 280px;
  max-height: min(360px, 50vh);
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #111318;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

.ss-create-role-menu.hidden {
  display: none;
}

.ss-create-role-menu-label {
  margin: 6px 8px 4px;
  color: #949ba4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ss-create-role-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #dbdee1;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.ss-create-role-option:hover,
.ss-create-role-option:focus-visible {
  background: rgba(227, 40, 45, .14);
  color: #fff;
  outline: 0;
}

.ss-create-role-option .ss-role-swatch {
  flex: 0 0 auto;
}

/* ===== rednexus-design-v27.css ===== */
/*
  REDNexus Design System — D27 / chat and DM avatars
  v0.2-test-dev.40.28
*/

.message-avatar.has-user-avatar,
.dm-avatar.has-user-avatar {
  overflow: hidden;
  padding: 0;
  color: transparent;
}

.message-avatar.has-user-avatar {
  background: #2b3038;
}

.dm-avatar.has-user-avatar {
  background: #292d34;
}

.message-avatar .user-avatar-image,
.dm-avatar .user-avatar-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

/* ===== rednexus-design-v28.css ===== */
/*
  REDNexus Design System — D28 / mobile composer, no PTT, viewport fit
  v0.2-test-dev.40.29
*/

:root {
  --rv-vv-width: 100%;
}

.composer-send-btn {
  display: none;
}

.composer-send-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.composer-send-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  html,
  body,
  .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .app-shell {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  html.rv-keyboard-open .app-shell {
    width: var(--rv-vv-width, 100%) !important;
    max-width: var(--rv-vv-width, 100%) !important;
    height: var(--rv-vv-height, 100dvh) !important;
    max-height: var(--rv-vv-height, 100dvh) !important;
  }

  .composer-main-row {
    grid-template-columns: 40px minmax(0, 1fr) auto 40px;
    gap: 2px;
    min-width: 0;
  }

  .composer-send-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #e3282d;
    color: #fff;
    cursor: pointer;
    touch-action: manipulation;
  }

  .composer-send-btn:hover:not(:disabled),
  .composer-send-btn:focus-visible {
    background: #c92228;
  }

  .composer-send-btn:disabled {
    opacity: .38;
    cursor: default;
  }

  html.rn-mobile-web .voice-ptt-choice,
  html.rn-mobile-web .voice-ptt-instant-choice,
  html.rn-mobile-web .voice-ptt-release,
  html.rn-mobile-web .voice-ptt-hotkey-label,
  html.rn-mobile-web .voice-ptt-hotkey-btn,
  html.rn-mobile-web .settings-hotkey-row-ptt,
  .voice-ptt-choice,
  .voice-ptt-instant-choice,
  .voice-ptt-release,
  .voice-ptt-hotkey-label,
  .voice-ptt-hotkey-btn,
  .settings-hotkey-row-ptt {
    display: none !important;
  }

  .create-channel-modal,
  .login-overlay,
  .user-profile-modal,
  .voice-settings-modal,
  .user-settings-modal,
  .server-settings-modal,
  .channel-settings-modal,
  .member-perms-modal,
  .global-search-modal,
  .notification-settings-modal,
  .pinned-messages-modal,
  .member-moderation-modal,
  .moderation-modal,
  .server-hub-modal,
  .server-actions-modal,
  .monitoring-modal,
  .channels-modal,
  .channel-permissions-modal,
  .roles-modal,
  .forward-message-modal,
  .avatar-crop-modal,
  .account-security-modal,
  .image-lightbox {
    inset: auto !important;
    top: var(--rv-vv-top, 0px) !important;
    left: var(--rv-vv-left, 0px) !important;
    width: var(--rv-vv-width, 100%) !important;
    max-width: 100% !important;
    height: var(--rv-vv-height, 100dvh) !important;
    max-height: var(--rv-vv-height, 100dvh) !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  .login-overlay {
    align-items: flex-start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left)) !important;
  }

  .login-card,
  .voice-settings-card,
  .create-channel-card,
  .user-settings-card,
  .unified-settings-card,
  .server-settings-card,
  .channel-settings-card,
  .member-perms-card,
  .user-profile-card,
  .global-search-card,
  .notification-settings-modal .modal-card,
  .pinned-messages-modal .modal-card,
  .member-moderation-modal .modal-card,
  .moderation-modal .modal-card,
  .server-hub-modal .modal-card,
  .server-actions-modal .modal-card,
  .monitoring-card,
  .channels-modal-card,
  .channel-permissions-card,
  .roles-modal-card,
  .roles-modal-card-v22,
  .forward-message-card,
  .avatar-crop-modal .modal-card,
  .account-security-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .login-card {
    height: auto !important;
    max-height: none !important;
    border-radius: 16px !important;
  }

  .user-settings-card,
  .unified-settings-card,
  .server-settings-card,
  .channel-settings-card,
  .member-perms-card,
  .roles-modal-card,
  .roles-modal-card-v22,
  .channels-modal-card {
    overflow: hidden !important;
  }

  .user-settings-card.unified-settings-card,
  .server-settings-card,
  .channel-settings-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .user-settings-nav {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .user-settings-main,
  .server-settings-main,
  .channel-settings-main,
  .member-perms-body,
  .voice-settings-body,
  .unified-settings-pane,
  .ss-pane,
  .cs-pane {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .ss-role-layout,
  .roles-v22-layout {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    height: auto !important;
    max-width: 100%;
  }

  .ss-role-list,
  .ss-role-editor,
  .ss-create-role-menu {
    min-width: 0;
    max-width: 100%;
  }

  .ss-create-role-menu {
    left: auto;
    right: 0;
    width: min(280px, calc(100% - 8px));
  }

  .settings-hotkey-row {
    flex-wrap: wrap;
    min-width: 0;
  }

  .settings-hotkey-btn {
    min-width: 0;
    max-width: 100%;
  }

  .settings-camera-preview {
    height: min(210px, 36vh);
  }

  .settings-help-tip {
    width: min(280px, calc(100vw - 24px));
    max-width: calc(var(--rv-vv-width, 100%) - 24px);
  }

  .server-quick-menu {
    width: min(320px, calc(var(--rv-vv-width, 100%) - 16px)) !important;
    max-width: calc(var(--rv-vv-width, 100%) - 16px) !important;
  }
}

/* ===== rednexus-design-v29.css ===== */
/*
  REDNexus Design System — D29 / role members add/remove
  v0.2-test-dev.40.30
*/

.ss-role-members-add {
  align-items: center;
  margin: 0 0 14px;
}

.ss-role-members-add select {
  flex: 1 1 auto;
  min-width: 0;
}

#ssAddRoleMemberBtn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  background: var(--red, #df3438);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

#ssAddRoleMemberBtn:hover:not(:disabled) {
  background: var(--red-dark, #9f272b);
}

#ssAddRoleMemberBtn:disabled {
  opacity: .45;
  cursor: default;
}

.ss-role-member-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ss-role-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 4px 8px;
  border-radius: 8px;
}

.ss-role-member-row:hover {
  background: rgba(255, 255, 255, .04);
}

.ss-role-member-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #2b3038;
  color: #f2f3f5;
  font-size: 12px;
  font-weight: 700;
}

.ss-role-member-avatar.has-user-avatar {
  padding: 0;
  color: transparent;
}

.ss-role-member-avatar .user-avatar-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ss-role-member-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #f2f3f5;
  font-size: 16px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-role-member-remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #b5bac1;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ss-role-member-remove:hover:not(:disabled) {
  background: rgba(242, 63, 67, .12);
  color: #f23f43;
}

.ss-role-member-remove:disabled {
  opacity: .4;
  cursor: default;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .ss-role-members-add {
    flex-wrap: wrap;
  }

  .ss-role-members-add select,
  #ssAddRoleMemberBtn {
    min-height: 40px;
  }

  #ssAddRoleMemberBtn {
    width: 100%;
  }
}

/* ===== rednexus-design-v30.css ===== */
/*
  REDNexus Design System — D30 / invite copy grey, standard type
  v0.2-test-dev.40.31
*/

.server-settings-modal .server-invite-code,
.server-settings-modal .server-invite-meta,
.server-settings-modal .server-copy-btn,
.server-settings-modal .server-invite-revoke,
.server-settings-modal .moderation-section-title,
.server-settings-modal .moderation-empty,
.server-settings-modal .moderation-log-body strong,
.server-settings-modal .moderation-log-body span,
.server-settings-modal .moderation-ban-info strong,
.server-settings-modal .moderation-ban-info span,
.server-settings-modal .server-actions-section-subtitle {
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  font-feature-settings: normal;
  letter-spacing: 0;
  text-transform: none;
}

.server-settings-modal .server-invite-code {
  color: #f2f3f5;
  font-size: 14px;
  font-weight: 600;
}

.server-settings-modal .server-invite-meta {
  color: #949ba4;
  font-size: 12px;
  font-weight: 500;
}

.server-settings-modal .server-copy-btn,
.server-settings-modal .server-copy-btn.compact {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: #2b2d31;
  color: #b5bac1;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

.server-settings-modal .server-copy-btn:hover,
.server-settings-modal .server-copy-btn.compact:hover {
  background: #35373c;
  border-color: rgba(255, 255, 255, .2);
  color: #dbdee1;
}

.server-settings-modal .server-invite-revoke {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(227, 40, 45, .45);
  border-radius: 8px;
  background: rgba(227, 40, 45, .1);
  color: var(--rn-red, #e3282d);
  font-size: 13px;
  font-weight: 500;
}

.server-settings-modal .server-invite-revoke:hover {
  background: rgba(227, 40, 45, .16);
  border-color: rgba(227, 40, 45, .7);
  color: #ff8a8d;
}

.server-settings-modal .moderation-section-title,
.server-settings-modal .server-actions-section-subtitle {
  color: #949ba4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.server-settings-modal .moderation-empty {
  color: #80848e;
  font-size: 14px;
  font-weight: 500;
}

.server-settings-modal .moderation-log-body strong,
.server-settings-modal .moderation-ban-info strong {
  color: #f2f3f5;
  font-size: 14px;
  font-weight: 600;
}

.server-settings-modal .moderation-log-body span,
.server-settings-modal .moderation-ban-info span {
  color: #949ba4;
  font-size: 12px;
  font-weight: 500;
}

/* ===== rednexus-design-v31.css ===== */
/*
  REDNexus Design System — D31 / Discord-like context menus
  v0.2-test-dev.40.32
*/

.quick-context-menu {
  width: min(220px, calc(100vw - 16px));
  max-height: min(72vh, 520px);
  padding: 6px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 4px;
  background: #111214;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
  backdrop-filter: none;
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
}

.quick-context-menu.message-context-menu {
  width: min(220px, calc(100vw - 16px));
  padding: 6px 8px;
  border-radius: 4px;
  background: #111214;
}

.quick-context-item,
.quick-context-menu.message-context-menu .quick-context-item {
  min-height: 32px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #dbdee1;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.quick-context-item:hover,
.quick-context-item:focus-visible,
.quick-context-menu.message-context-menu .quick-context-item:hover,
.quick-context-menu.message-context-menu .quick-context-item:focus-visible {
  outline: none;
  background: var(--rn-red, #e3282d);
  color: #fff;
}

.quick-context-item.active {
  background: transparent;
  color: #dbdee1;
}

.quick-context-item.active::after {
  content: "✓";
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.quick-context-item.active:hover,
.quick-context-item.active:focus-visible {
  background: var(--rn-red, #e3282d);
  color: #fff;
}

.quick-context-item.danger,
.quick-context-menu.message-context-menu .quick-context-item.danger,
.quick-context-item.danger .quick-context-item-icon,
.quick-context-menu.message-context-menu .quick-context-item.danger .quick-context-item-icon {
  color: var(--rn-red, #e3282d);
}

.quick-context-item.danger:hover,
.quick-context-item.danger:focus-visible,
.quick-context-menu.message-context-menu .quick-context-item.danger:hover,
.quick-context-menu.message-context-menu .quick-context-item.danger:focus-visible {
  background: var(--rn-red, #e3282d);
  color: #fff;
}

.quick-context-item:disabled {
  opacity: .4;
  cursor: default;
}

.quick-context-item:disabled:hover {
  background: transparent;
  color: #dbdee1;
}

.quick-context-item-icon,
.quick-context-menu.message-context-menu .quick-context-item-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.quick-context-item.active .quick-context-item-icon {
  background: transparent;
  color: inherit;
}

.quick-context-item-label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.quick-context-item-label strong,
.quick-context-menu.message-context-menu .quick-context-item-label strong {
  overflow: hidden;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-context-item-label small {
  overflow: hidden;
  color: #949ba4;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-context-item:hover .quick-context-item-label small,
.quick-context-item:focus-visible .quick-context-item-label small {
  color: rgba(255, 255, 255, .78);
}

.quick-context-divider {
  height: 1px;
  margin: 4px 4px;
  background: rgba(255, 255, 255, .06);
}

.quick-context-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 4px;
  color: #949ba4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.quick-context-section-label small {
  color: #b5bac1;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.quick-context-chevron {
  color: inherit;
  font-size: 16px;
  line-height: 1;
  opacity: .7;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .quick-context-menu,
  .quick-context-menu.message-context-menu {
    width: min(240px, calc(100vw - 16px));
    padding: 6px;
    border-radius: 8px;
  }

  .quick-context-item,
  .quick-context-menu.message-context-menu .quick-context-item {
    min-height: 36px;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
  }

  .quick-context-item-icon,
  .quick-context-menu.message-context-menu .quick-context-item-icon {
    width: 18px;
    height: 18px;
    background: transparent;
    font-size: 14px;
  }
}

/* ===== rednexus-design-v32.css ===== */
/*
  REDNexus Design System — D32 / Discord-style multi-role checkboxes
  v0.2-test-dev.40.33
*/

.quick-context-submenu {
  width: min(248px, calc(100vw - 16px));
  max-height: min(72vh, 420px);
  padding: 6px;
  z-index: 530;
}

.quick-context-item.has-submenu-open,
.quick-context-item.has-submenu-open:hover,
.quick-context-item.has-submenu-open:focus-visible {
  background: rgba(227, 40, 45, .18);
  color: #fff;
}

.role-check-search {
  width: 100%;
  min-height: 32px;
  margin: 0 0 4px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 3px;
  outline: none;
  background: #1e1f22;
  color: #dbdee1;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
}

.role-check-search:focus {
  border-color: rgba(227, 40, 45, .55);
}

.role-check-empty {
  padding: 10px 8px;
  color: #949ba4;
  font-size: 13px;
  font-weight: 500;
}

.role-check-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: min(52vh, 340px);
  overflow-x: hidden;
  overflow-y: auto;
}

.role-check-row.hidden {
  display: none !important;
}

.role-check-row {
  min-height: 32px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 2px;
  color: #dbdee1;
  cursor: pointer;
}

.role-check-row:hover {
  background: var(--rn-red, #e3282d);
  color: #fff;
}

.role-check-row.is-disabled {
  opacity: .45;
  cursor: default;
}

.role-check-row.is-disabled:hover {
  background: transparent;
  color: #dbdee1;
}

.role-check-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #949ba4;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}

.role-check-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-check-box {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid #80848e;
  border-radius: 4px;
  background: transparent;
  box-sizing: border-box;
  cursor: inherit;
  position: relative;
}

.role-check-row:hover .role-check-box {
  border-color: #fff;
}

.role-check-box:checked {
  border-color: var(--rn-red, #e3282d);
  background: var(--rn-red, #e3282d);
}

.role-check-row:hover .role-check-box:checked {
  border-color: #fff;
  background: #fff;
}

.role-check-box:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.role-check-row:hover .role-check-box:checked::after {
  border-color: var(--rn-red, #e3282d);
}

.role-check-box:disabled {
  cursor: default;
}

.user-profile-role-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.user-profile-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 8px 3px 6px;
  border-radius: 4px;
  background: #1e1f22;
  color: #dbdee1;
  font-size: 12px;
  font-weight: 600;
}

.user-profile-role-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-role-checks {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 240px;
  overflow-y: auto;
}

.user-profile-role-checks .role-check-row {
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 4px;
  background: #1e1f22;
}

.user-profile-role-checks .role-check-row:hover {
  background: var(--rn-red, #e3282d);
}

.user-profile-role-checks .role-check-row.is-disabled:hover {
  background: #1e1f22;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .quick-context-submenu {
    width: min(260px, calc(100vw - 16px));
    border-radius: 8px;
  }

  .role-check-row {
    min-height: 36px;
  }
}

/* ===== rednexus-design-v33.css ===== */
/*
  REDNexus Design System — D33 / Discord-like user profile popout
  v0.2-test-dev.40.34
*/

.user-profile-modal {
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
}

.user-profile-card {
  width: min(340px, calc(100vw - 24px));
  max-height: min(86vh, 720px);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  background: #111214;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .4);
}

.user-profile-cover {
  height: 72px;
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(227, 40, 45, .42), rgba(227, 40, 45, .08) 72%, transparent),
    #1a1c20;
}

.user-profile-close {
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #dbdee1;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.user-profile-close:hover,
.user-profile-close:focus-visible {
  background: var(--rn-red, #e3282d);
  color: #fff;
}

.user-profile-main {
  padding: 0 12px 12px;
}

.user-profile-avatar {
  width: 80px;
  height: 80px;
  margin-top: -40px;
  border: 6px solid #111214;
  background: #1e1f22;
  box-shadow: none;
  font-size: 28px;
  font-weight: 700;
}

.user-profile-identity {
  margin-top: 10px;
}

.user-profile-name-line h2 {
  color: #f2f3f5;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.user-profile-online {
  padding: 2px 8px;
  border-radius: 10px;
  background: #1e1f22;
  color: #949ba4;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.user-profile-online.online {
  background: rgba(35, 165, 90, .14);
  color: #23a55a;
}

.user-profile-login,
.user-profile-custom-status {
  margin-top: 2px;
  color: #b5bac1;
  font-size: 14px;
  font-weight: 500;
}

.user-profile-role {
  display: none !important;
}

.user-profile-actions {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.user-profile-action {
  min-height: 32px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #dbdee1;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.user-profile-action:hover:not(:disabled),
.user-profile-action:focus-visible:not(:disabled) {
  outline: none;
  background: var(--rn-red, #e3282d);
  color: #fff;
}

.user-profile-action.danger {
  color: var(--rn-red, #e3282d);
}

.user-profile-action.danger:hover:not(:disabled),
.user-profile-action.danger:focus-visible:not(:disabled) {
  background: var(--rn-red, #e3282d);
  color: #fff;
}

.user-profile-action:disabled {
  opacity: .4;
  cursor: default;
}

.user-profile-action-icon,
.user-profile-action > span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.user-profile-action > strong {
  overflow: hidden;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.user-profile-section-title {
  margin-bottom: 8px;
  color: #949ba4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.user-profile-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  padding: 12px;
  border-radius: 8px;
  background: #1e1f22;
}

.user-profile-fact {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.user-profile-fact span {
  display: block;
  color: #949ba4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.user-profile-fact strong {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #dbdee1;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-bio {
  color: #dbdee1;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.user-profile-voice-row,
.user-profile-server-row {
  min-height: 40px;
  padding: 6px 8px;
  border: 0;
  border-radius: 4px;
  background: #1e1f22;
  font-family: inherit;
}

.user-profile-voice-row:hover,
.user-profile-server-row:hover {
  border: 0;
  background: var(--rn-red, #e3282d);
  color: #fff;
}

.user-profile-voice-icon,
.user-profile-server-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #111214;
  font-size: 13px;
  font-weight: 700;
}

.user-profile-voice-row:hover .user-profile-voice-icon,
.user-profile-server-row:hover .user-profile-server-icon {
  background: rgba(0, 0, 0, .22);
  color: #fff;
}

.user-profile-voice-info strong,
.user-profile-server-info strong {
  color: #f2f3f5;
  font-size: 14px;
  font-weight: 600;
}

.user-profile-voice-info span,
.user-profile-server-info span,
.user-profile-server-arrow {
  color: #949ba4;
  font-size: 12px;
  font-weight: 500;
}

.user-profile-voice-row:hover .user-profile-voice-info strong,
.user-profile-voice-row:hover .user-profile-voice-info span,
.user-profile-server-row:hover .user-profile-server-info strong,
.user-profile-server-row:hover .user-profile-server-info span,
.user-profile-server-row:hover .user-profile-server-arrow {
  color: #fff;
}

.user-profile-role-pills {
  margin-bottom: 6px;
}

.user-profile-role-pill {
  min-height: 22px;
  padding: 2px 8px 2px 6px;
  border-radius: 4px;
  background: #1e1f22;
  font-size: 12px;
  font-weight: 500;
}

.user-profile-role-checks {
  padding: 4px;
  border-radius: 8px;
  background: #1e1f22;
}

.user-profile-role-checks .role-check-row {
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 2px;
  background: transparent;
}

.user-profile-role-checks .role-check-row:hover {
  background: var(--rn-red, #e3282d);
}

.user-profile-role-checks .role-check-row.is-disabled:hover {
  background: transparent;
}

.user-profile-edit-label {
  color: #949ba4;
  font-size: 12px;
  font-weight: 600;
}

.user-profile-edit-input,
.user-profile-edit-textarea {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 4px;
  background: #1e1f22;
  color: #dbdee1;
  font-family: inherit;
  font-size: 14px;
}

.user-profile-edit-save,
.user-profile-edit-cancel {
  min-height: 32px;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}

.user-profile-edit-save {
  background: var(--rn-red, #e3282d);
  color: #fff;
}

.user-profile-edit-cancel {
  background: #1e1f22;
  color: #dbdee1;
}

.user-profile-status,
.user-profile-common-servers .member-empty {
  border: 0;
  border-radius: 4px;
  background: #1e1f22;
  color: #b5bac1;
  font-size: 13px;
  font-weight: 500;
}

.user-profile-status.error {
  background: rgba(227, 40, 45, .12);
  color: var(--rn-red, #e3282d);
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .user-profile-card {
    width: 100%;
    border-radius: 12px 12px 0 0;
  }

  .user-profile-action,
  .user-profile-voice-row,
  .user-profile-server-row {
    min-height: 36px;
  }

  .user-profile-facts {
    grid-template-columns: 1fr;
  }
}

/* ===== rednexus-design-v34.css ===== */
/*
  REDNexus Design System — D34 / Voice & Video settings
  v0.2-test-dev.40.35
*/

#voiceSettingsModal,
#voiceSettingsModal button,
#voiceSettingsModal select,
#voiceSettingsModal input,
#voiceSettingsModal label,
#voiceSettingsModal h2,
#voiceSettingsModal p {
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
}

#voiceSettingsModal .user-settings-card.unified-settings-card {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #111214;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}

#voiceSettingsModal .user-settings-nav {
  padding: 16px 10px;
  background: #111214;
}

#voiceSettingsModal .user-settings-nav-kicker {
  color: #949ba4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

#voiceSettingsModal .user-settings-nav-title {
  margin-bottom: 10px;
  color: #f2f3f5;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

#voiceSettingsModal .user-settings-nav-item {
  min-height: 36px;
  border-radius: 0;
  color: #dbdee1;
  font-size: 13px;
  font-weight: 500;
}

#voiceSettingsModal .user-settings-nav-item:hover,
#voiceSettingsModal .user-settings-nav-item:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

#voiceSettingsModal .user-settings-nav-item.active {
  background: rgba(227, 40, 45, .12);
  color: #fff;
}

#voiceSettingsModal .user-settings-nav-item.active:hover,
#voiceSettingsModal .user-settings-nav-item.active:focus-visible {
  background: rgba(227, 40, 45, .12);
}

#voiceSettingsModal .voice-settings-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: transparent;
}

#voiceSettingsModal .eyebrow {
  margin-bottom: 4px;
  color: #949ba4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

#voiceSettingsModal .voice-settings-header h2 {
  margin: 0;
  color: #f2f3f5;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

#voiceSettingsModal .voice-settings-header p {
  margin: 4px 0 0;
  color: #949ba4;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

#voiceSettingsModal .voice-settings-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #b5bac1;
  font-size: 20px;
  font-weight: 500;
}

#voiceSettingsModal .voice-settings-close:hover,
#voiceSettingsModal .voice-settings-close:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

#voiceSettingsModal .voice-settings-body,
#voiceSettingsModal .unified-settings-pane {
  padding: 16px;
}

#voiceSettingsModal .settings-section-title,
#voiceSettingsModal .video-settings-section-title {
  margin: 18px 0 10px;
  color: #949ba4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#voiceSettingsModal .settings-section-title:first-child,
#voiceSettingsModal .video-settings-section-title:first-child {
  margin-top: 0;
}

#voiceSettingsModal .video-settings-section-spaced {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

#voiceSettingsModal .voice-settings-label,
#voiceSettingsModal .video-settings-field,
#voiceSettingsModal .video-settings-field span {
  color: #949ba4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#voiceSettingsModal .voice-settings-label > span {
  color: #dbdee1;
  font-size: 12px;
  font-weight: 500;
}

#voiceSettingsModal .voice-settings-select,
#voiceSettingsModal .settings-hotkey-btn,
#voiceSettingsModal .account-security-input {
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
  color: #dbdee1;
  font-size: 13px;
  font-weight: 500;
}

#voiceSettingsModal .voice-settings-select:focus,
#voiceSettingsModal .settings-hotkey-btn:focus-visible,
#voiceSettingsModal .account-security-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(227, 40, 45, .45);
}

#voiceSettingsModal .voice-settings-hint,
#voiceSettingsModal .video-settings-hint {
  margin-top: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
  color: #b5bac1;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

#voiceSettingsModal .voice-settings-range {
  accent-color: var(--rn-red, #e3282d);
}

#voiceSettingsModal .voice-settings-meter-card,
#voiceSettingsModal .settings-camera-preview-card {
  margin-top: 10px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
}

#voiceSettingsModal .voice-settings-meter-card {
  padding: 12px;
}

#voiceSettingsModal .voice-settings-meter-head {
  color: #dbdee1;
  font-size: 13px;
  font-weight: 600;
}

#voiceSettingsModal .voice-settings-meter-track {
  height: 8px;
  margin-top: 8px;
  background: #111214;
}

#voiceSettingsModal .voice-settings-meter-bar {
  background: var(--rn-red, #e3282d);
}

#voiceSettingsModal .settings-choice {
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#voiceSettingsModal .settings-choice:hover {
  background: rgba(255, 255, 255, .05);
}

#voiceSettingsModal .settings-choice:has(input:checked) {
  background: rgba(227, 40, 45, .12);
}

#voiceSettingsModal .settings-choice input {
  accent-color: var(--rn-red, #e3282d);
}

#voiceSettingsModal .settings-choice strong {
  color: #f2f3f5;
  font-size: 13px;
  font-weight: 600;
}

#voiceSettingsModal .settings-choice span span {
  color: #949ba4;
  font-size: 13px;
  font-weight: 500;
}

#voiceSettingsModal .settings-camera-preview {
  height: 200px;
  background: #0b0c0e;
}

#voiceSettingsModal .settings-camera-preview-actions {
  padding: 8px;
}

#voiceSettingsModal .voice-settings-meter-actions button,
#voiceSettingsModal .voice-settings-actions button,
#voiceSettingsModal .settings-camera-preview-actions button,
#voiceSettingsModal .settings-hotkey-btn {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: #2b2d31;
  color: #dbdee1;
  font-size: 13px;
  font-weight: 600;
}

#voiceSettingsModal .voice-settings-meter-actions button:hover,
#voiceSettingsModal .voice-settings-actions button:hover,
#voiceSettingsModal .settings-camera-preview-actions button:hover,
#voiceSettingsModal .settings-hotkey-btn:hover,
#voiceSettingsModal .voice-settings-meter-actions button:focus-visible,
#voiceSettingsModal .voice-settings-actions button:focus-visible,
#voiceSettingsModal .settings-camera-preview-actions button:focus-visible,
#voiceSettingsModal .settings-hotkey-btn:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

#voiceSettingsModal .voice-settings-actions {
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

#voiceSettingsModal #voiceSettingsDoneBtn,
#voiceSettingsModal #videoSettingsDoneBtn {
  background: var(--rn-red, #e3282d);
  color: #fff;
}

#voiceSettingsModal .voice-settings-status {
  margin-top: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
  color: #b5bac1;
  font-size: 13px;
  font-weight: 500;
}

#voiceSettingsModal .voice-settings-status.error {
  background: rgba(227, 40, 45, .12);
  color: var(--rn-red, #e3282d);
}

#voiceSettingsModal .settings-hotkey-row {
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
}

#voiceSettingsModal .settings-hotkey-copy strong,
#voiceSettingsModal .voice-settings-label.with-help {
  color: #f2f3f5;
  font-size: 13px;
  font-weight: 600;
}

#voiceSettingsModal .settings-help {
  border: 0;
  background: #111214;
  color: #949ba4;
  font-size: 11px;
  font-weight: 700;
}

#voiceSettingsModal .settings-hotkey-btn.is-capturing {
  background: rgba(227, 40, 45, .16);
  color: #fff;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  #voiceSettingsModal .user-settings-nav-item,
  #voiceSettingsModal .voice-settings-select,
  #voiceSettingsModal .voice-settings-actions button,
  #voiceSettingsModal .voice-settings-meter-actions button,
  #voiceSettingsModal .settings-camera-preview-actions button,
  #voiceSettingsModal .settings-hotkey-btn {
    min-height: 36px;
  }

  #voiceSettingsModal .video-settings-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== rednexus-design-v35.css ===== */
/*
  REDNexus Design System — D35 / Security settings
  v0.2-test-dev.40.36
*/

#voiceSettingsModal #settingsSecurityPane .user-settings-email {
  margin: 0 0 16px;
  color: #b5bac1;
  font-size: 14px;
  font-weight: 500;
}

#voiceSettingsModal .account-security-section + .account-security-section {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 0;
}

#voiceSettingsModal .account-security-section-head {
  margin-bottom: 10px;
}

#voiceSettingsModal .account-security-section-head strong {
  color: #f2f3f5;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

#voiceSettingsModal .account-security-section-head span {
  color: #949ba4;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

#voiceSettingsModal .account-security-section-head > button,
#voiceSettingsModal .account-danger-outline,
#voiceSettingsModal .account-password-save,
#voiceSettingsModal .account-session-revoke {
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

#voiceSettingsModal .account-security-section-head > button {
  background: #2b2d31;
  color: #dbdee1;
}

#voiceSettingsModal .account-security-section-head > button:hover,
#voiceSettingsModal .account-security-section-head > button:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

#voiceSettingsModal .account-sessions-list {
  gap: 6px;
}

#voiceSettingsModal .account-session-row {
  min-height: 64px;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#voiceSettingsModal .account-session-row.current {
  border: 0;
  background: rgba(227, 40, 45, .12);
}

#voiceSettingsModal .account-session-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #111214;
  color: #dbdee1;
  font-size: 14px;
  font-weight: 500;
}

#voiceSettingsModal .account-session-info strong {
  color: #f2f3f5;
  font-size: 14px;
  font-weight: 600;
}

#voiceSettingsModal .account-session-info span {
  color: #949ba4;
  font-size: 12px;
  font-weight: 500;
}

#voiceSettingsModal .account-session-current {
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(227, 40, 45, .16);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#voiceSettingsModal .account-session-revoke {
  background: transparent;
  color: var(--rn-red, #e3282d);
}

#voiceSettingsModal .account-session-revoke:hover,
#voiceSettingsModal .account-session-revoke:focus-visible {
  outline: none;
  background: rgba(242, 63, 67, .12);
  color: #ff6b6e;
}

#voiceSettingsModal .account-danger-outline {
  width: 100%;
  margin-top: 10px;
  background: transparent;
  color: #f23f43;
}

#voiceSettingsModal .account-danger-outline:hover:not(:disabled),
#voiceSettingsModal .account-danger-outline:focus-visible:not(:disabled) {
  outline: none;
  background: rgba(242, 63, 67, .12);
  color: #ff6b6e;
}

#voiceSettingsModal .account-security-label {
  margin: 10px 0 6px;
  color: #949ba4;
  font-size: 12px;
  font-weight: 600;
}

#voiceSettingsModal .account-security-input {
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
  color: #dbdee1;
  font-size: 13px;
  font-weight: 500;
}

#voiceSettingsModal .account-security-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(227, 40, 45, .45);
}

#voiceSettingsModal .account-password-save {
  width: 100%;
  margin-top: 12px;
  background: var(--rn-red, #e3282d);
  color: #fff;
}

#voiceSettingsModal .account-password-save:hover:not(:disabled),
#voiceSettingsModal .account-password-save:focus-visible:not(:disabled) {
  outline: none;
  background: #c82227;
}

#voiceSettingsModal .account-security-status {
  margin-top: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
  color: #b5bac1;
  font-size: 13px;
  font-weight: 500;
}

#voiceSettingsModal .account-security-status.error {
  background: rgba(227, 40, 45, .12);
  color: var(--rn-red, #e3282d);
}

#voiceSettingsModal #settingsSecurityPane .member-empty {
  color: #949ba4;
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  #voiceSettingsModal .account-security-section-head > button,
  #voiceSettingsModal .account-danger-outline,
  #voiceSettingsModal .account-password-save,
  #voiceSettingsModal .account-session-revoke,
  #voiceSettingsModal .account-security-input {
    min-height: 36px;
  }
}

/* ===== rednexus-design-v36.css ===== */
/*
  REDNexus Design System — D36 / channel personal permissions in settings shell
  v0.2-test-dev.40.37
*/

.channel-settings-modal #csMembersPane .ss-add-row {
  margin: 0 0 14px;
}

.channel-settings-modal #csMembersPane .ss-add-row select {
  min-height: 36px;
  flex: 1 1 auto;
}

.channel-settings-modal #mpAddOverwrite,
.channel-settings-modal #mpSaveOverwrite {
  appearance: none;
  -webkit-appearance: none;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent),
    linear-gradient(135deg, #d92227, #8c171b);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(227, 40, 45, .12), 0 8px 20px rgba(127, 23, 27, .22);
}

.channel-settings-modal #mpAddOverwrite:hover,
.channel-settings-modal #mpSaveOverwrite:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .11), transparent),
    linear-gradient(135deg, #ef3035, #a2191e);
  color: #fff;
  box-shadow: 0 0 18px rgba(227, 40, 45, .2), 0 10px 28px rgba(127, 23, 27, .28);
}

.channel-settings-modal #mpSaveOverwrite:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ===== rednexus-design-v37.css ===== */
/*
  REDNexus Design System — D37 / server mute + browser notify in server menu
  v0.2-test-dev.40.39
*/

.server-quick-menu-item {
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.server-quick-menu-check,
.server-quick-menu-chevron {
  justify-self: end;
  color: #b5bac1;
  font-size: 13px;
  font-weight: 700;
}

.server-quick-menu-item[aria-checked="true"] .server-quick-menu-check {
  color: var(--rn-red, #e3282d);
  opacity: 1;
}

.server-quick-menu-item[aria-checked="false"] .server-quick-menu-check {
  opacity: 0;
}

.server-quick-submenu-wrap {
  margin-top: 2px;
}

.server-quick-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 2px 10px;
  padding: 4px 0 2px;
  border-left: 1px solid rgba(227, 40, 45, .35);
}

.server-quick-submenu.hidden {
  display: none;
}

.server-quick-submenu .server-quick-menu-item {
  min-height: 32px;
  grid-template-columns: minmax(0, 1fr);
  font-weight: 600;
}

.server-quick-flyout-menu {
  position: fixed;
  z-index: 96;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 16px));
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #111214;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

.server-quick-flyout-menu.hidden {
  display: none;
}

#serverQuickMuteMenu.server-quick-flyout-menu {
  z-index: 97;
  min-width: 220px;
}

#serverQuickMuteMenu .server-quick-menu-item {
  grid-template-columns: minmax(0, 1fr);
}

/* ===== rednexus-design-v38.css ===== */
/*
  REDNexus Design System — D38 / Telegram-like message selection
  v0.2-test-dev.40.40
*/

.message-select-check {
  display: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 10px 0 0;
  padding: 0;
  border: 2px solid #6e7782;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  place-items: center;
}

.message-select-check svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.message-list.selecting-messages {
  user-select: none;
}

.message-list.selecting-messages .message-row {
  grid-template-columns: 28px 56px minmax(0, 1fr) !important;
  cursor: pointer;
}

.message-list.selecting-messages .message-select-check {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: start;
}

.message-list.selecting-messages .message-row.message-compact .message-select-check {
  margin-top: 2px;
  align-self: center;
}

.message-list.selecting-messages .message-avatar,
.message-list.selecting-messages .message-gutter-time {
  grid-column: 2;
}

.message-list.selecting-messages .message-body {
  grid-column: 3;
}

.message-list.selecting-messages .message-actions {
  display: none !important;
}

.message-row.selected {
  background: rgba(227, 40, 45, .1) !important;
}

.message-row.selected .message-select-check,
.message-select-check[aria-pressed="true"] {
  border-color: var(--rn-red, #e3282d);
  background: var(--rn-red, #e3282d);
}

.message-row.selected .message-select-check svg,
.message-select-check[aria-pressed="true"] svg {
  opacity: 1;
}

.message-composer.selecting > :not(#messageSelectBar) {
  display: none !important;
}

.message-select-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: var(--rn-composer-bg, rgba(18, 20, 26, .78));
  backdrop-filter: blur(10px);
}

.message-select-bar.hidden {
  display: none;
}

.message-composer.selecting .message-select-bar {
  display: flex;
}

.message-select-count {
  flex: 1;
  min-width: 0;
  color: #f2f3f5;
  font-size: 14px;
  font-weight: 650;
}

.message-select-cancel,
.message-select-delete {
  min-height: 36px;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.message-select-cancel {
  background: rgba(255, 255, 255, .06);
  color: #dfe3e8;
}

.message-select-cancel:hover {
  background: rgba(255, 255, 255, .1);
}

.message-select-delete {
  background: var(--rn-red, #e3282d);
  color: #fff;
}

.message-select-delete:hover:not(:disabled) {
  filter: brightness(1.06);
}

.message-select-delete:disabled {
  opacity: .38;
  cursor: default;
}

.message-list.selecting-messages .message-row.message-compact .message-edited {
  left: 88px;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .message-list.selecting-messages .message-row {
    grid-template-columns: 26px 48px minmax(0, 1fr) !important;
  }

  .message-select-check {
    width: 20px;
    height: 20px;
  }
}

/* ===== rednexus-design-v39.css ===== */
/*
  REDNexus Design System — D39 / reply with selected quote
  v0.2-test-dev.40.41
*/

.message-reply-reference.is-quote {
  border-left-color: var(--rn-red, #e3282d);
  background: rgba(227, 40, 45, .08);
}

.message-reply-reference.is-quote:hover {
  background: rgba(227, 40, 45, .14);
}

.message-reply-reference.is-quote .message-reply-author {
  color: #f2a4a6;
}

.composer-reply-mode.is-quote {
  border-left-color: var(--rn-red, #e3282d);
  background: rgba(227, 40, 45, .08);
}

.composer-reply-mode.is-quote .composer-reply-label {
  color: #f2a4a6;
}

/* ===== rednexus-design-v40.css ===== */
/*
  REDNexus Design System — D40 / member panel
  v0.2-test-dev.40.42

  Align the right member column with the channel list:
  quiet rows, no boxed action chips, red hover.
*/

.member-heading,
.presence-section-label {
  color: #68717c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .105em;
}

.member-panel .member-item.presence-member,
.mobile-member-list .member-item.presence-member {
  position: relative;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.member-panel .member-item.presence-member:hover,
.member-panel .member-item.presence-member:focus-within,
.member-panel .member-item.presence-member.menu-open,
.mobile-member-list .member-item.presence-member:hover,
.mobile-member-list .member-item.presence-member:focus-within,
.mobile-member-list .member-item.presence-member.menu-open {
  border-color: rgba(255, 255, 255, .05);
  background: rgba(255, 255, 255, .032);
}

.member-panel .member-item.presence-member.local,
.mobile-member-list .member-item.presence-member.local {
  border-color: rgba(227, 40, 45, .25);
  background:
    linear-gradient(90deg, rgba(227, 40, 45, .22), rgba(227, 40, 45, .055) 72%, transparent),
    rgba(255, 255, 255, .018);
  box-shadow: inset 2px 0 0 var(--rn-red-hot, var(--rn-red, #e3282d));
}

.member-panel .presence-member-actions,
.mobile-member-list .presence-member-actions {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 2px;
}

.member-panel .presence-dm-btn,
.member-panel .presence-moderate-btn,
.mobile-member-list .presence-dm-btn,
.mobile-member-list .presence-moderate-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8b939e;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
}

.member-panel .presence-dm-btn svg,
.member-panel .presence-moderate-btn svg,
.mobile-member-list .presence-dm-btn svg,
.mobile-member-list .presence-moderate-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.member-panel .presence-dm-btn:hover,
.member-panel .presence-moderate-btn:hover,
.member-panel .presence-dm-btn:focus-visible,
.member-panel .presence-moderate-btn:focus-visible,
.mobile-member-list .presence-dm-btn:hover,
.mobile-member-list .presence-moderate-btn:hover,
.mobile-member-list .presence-dm-btn:focus-visible,
.mobile-member-list .presence-moderate-btn:focus-visible {
  background: rgba(227, 40, 45, .16);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .member-panel .presence-member-actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
  }

  .member-panel .presence-member:hover .presence-member-actions,
  .member-panel .presence-member:focus-within .presence-member-actions,
  .member-panel .presence-member.menu-open .presence-member-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (hover: none) and (pointer: coarse) {
  .member-panel .presence-dm-btn,
  .member-panel .presence-moderate-btn,
  .mobile-member-list .presence-dm-btn,
  .mobile-member-list .presence-moderate-btn {
    width: 32px;
    height: 32px;
  }
}

/* ===== rednexus-design-v41.css ===== */
/*
  REDNexus Design System — D41 / settings overlay stacking
  v0.2-test-dev.40.43

  Server/channel settings were z-index 80, below the account
  panel (z-index 90). The profile chip then showed through
  the Roles page.
*/

.server-settings-modal.user-settings-modal,
.channel-settings-modal.user-settings-modal,
.member-perms-modal.user-settings-modal {
  z-index: 440;
}

/* ===== rednexus-design-v42.css ===== */
/*
  REDNexus Design System — D42 / create channel + private lock + sidebar reorder
  v0.2-test-dev.40.44
*/

.create-channel-modal {
  z-index: 450;
}

.create-channel-card {
  width: min(460px, 96vw);
  padding: 18px 18px 16px;
}

.create-channel-section {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
}

.create-channel-label {
  color: #8b939e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.create-channel-type {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  background: #1a1d22;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.create-channel-type:hover {
  border-color: rgba(255, 255, 255, .1);
  background: #20242a;
}

.create-channel-type.selected {
  border-color: rgba(227, 40, 45, .45);
  background: rgba(227, 40, 45, .1);
}

.create-channel-type-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  color: #c5ccd4;
  font-size: 16px;
  font-weight: 800;
}

.create-channel-type-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.create-channel-type-copy strong {
  color: #edf0f3;
  font-size: 13px;
}

.create-channel-type-copy small {
  color: #8b939e;
  font-size: 11px;
  line-height: 1.35;
}

.create-channel-radio {
  width: 14px;
  height: 14px;
  border: 2px solid #6d737c;
  border-radius: 50%;
}

.create-channel-type.selected .create-channel-radio {
  border-color: var(--rn-red, #e3282d);
  box-shadow: inset 0 0 0 3px var(--rn-red, #e3282d);
  background: #fff;
}

.create-channel-name-wrap {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  background: #0e1014;
}

.create-channel-name-wrap:focus-within {
  border-color: rgba(227, 40, 45, .55);
}

.create-channel-name-prefix {
  color: #8b939e;
  font-size: 15px;
  font-weight: 800;
}

#createChannelName {
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #edf0f3;
  font: inherit;
}

.create-channel-private {
  margin: 4px 0 16px;
  padding: 10px 4px 4px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.create-channel-private b {
  display: block;
  color: #edf0f3;
  font-size: 13px;
}

.create-channel-private small {
  display: block;
  margin-top: 4px;
  color: #8b939e;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
}

.create-channel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.channel-type-icon {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: #8b939e;
}

.channel-type-mark {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.channel-lock-badge {
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: #0d1014;
  border-radius: 2px;
}

.channel.active .channel-type-icon,
.channel:hover .channel-type-icon {
  color: #d7dde4;
}

.channel.is-private .channel-type-icon {
  color: #c9a24a;
}

.channel.sidebar-dragging {
  opacity: .35;
}

.sidebar-channel-placeholder {
  min-height: 36px;
  border-color: rgba(227, 40, 45, .35);
}

.channel[data-channel-id] {
  touch-action: manipulation;
}

/* ===== rednexus-design-v43.css ===== */
/*
  REDNexus Design System — D43 / raid-leader & commander speaking rings
  v0.2-test-dev.40.45
*/

:root {
  --rn-voice-raid: #e4b74d;
  --rn-voice-commander: #5865f2;
}

.voice-person.speaking.speaking-raid {
  border-color: rgba(228, 183, 77, .7);
  background:
    linear-gradient(135deg, rgba(228, 183, 77, .08), transparent 58%),
    rgba(24, 21, 14, .96);
  box-shadow:
    0 0 0 1px rgba(228, 183, 77, .22),
    0 0 24px rgba(228, 183, 77, .12);
}

.voice-person.speaking.speaking-commander {
  border-color: rgba(88, 101, 242, .7);
  background:
    linear-gradient(135deg, rgba(88, 101, 242, .08), transparent 58%),
    rgba(14, 16, 28, .96);
  box-shadow:
    0 0 0 1px rgba(88, 101, 242, .22),
    0 0 24px rgba(88, 101, 242, .12);
}

.voice-person.speaking.speaking-raid .person-avatar {
  border-color: rgba(228, 183, 77, .9);
  box-shadow:
    0 0 0 2px rgba(228, 183, 77, .12),
    0 0 18px rgba(228, 183, 77, .28);
}

.voice-person.speaking.speaking-commander .person-avatar {
  border-color: rgba(88, 101, 242, .9);
  box-shadow:
    0 0 0 2px rgba(88, 101, 242, .12),
    0 0 18px rgba(88, 101, 242, .28);
}

.voice-person.speaking.speaking-raid .person-state {
  color: var(--rn-voice-raid);
}

.voice-person.speaking.speaking-commander .person-state {
  color: #9aa3ff;
}

.voice-stage-v2 .voice-person.speaking.speaking-raid,
.voice-stage-v2 .voice-person.speaking.speaking-commander {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.voice-stage-v2 .voice-person.speaking.speaking-raid .person-avatar {
  border-color: rgba(228, 183, 77, .95);
  box-shadow:
    0 0 0 5px rgba(228, 183, 77, .14),
    0 0 0 9px rgba(228, 183, 77, .05),
    0 0 30px rgba(228, 183, 77, .34),
    0 16px 28px rgba(0, 0, 0, .34);
  animation: rn-speaking-pulse-raid 1.8s ease-in-out infinite;
}

.voice-stage-v2 .voice-person.speaking.speaking-commander .person-avatar {
  border-color: rgba(88, 101, 242, .95);
  box-shadow:
    0 0 0 5px rgba(88, 101, 242, .16),
    0 0 0 9px rgba(88, 101, 242, .05),
    0 0 30px rgba(88, 101, 242, .34),
    0 16px 28px rgba(0, 0, 0, .34);
  animation: rn-speaking-pulse-commander 1.8s ease-in-out infinite;
}

@keyframes rn-speaking-pulse-raid {
  0%, 100% {
    box-shadow:
      0 0 0 5px rgba(228, 183, 77, .12),
      0 0 0 9px rgba(228, 183, 77, .04),
      0 0 24px rgba(228, 183, 77, .26),
      0 16px 28px rgba(0, 0, 0, .34);
  }
  50% {
    box-shadow:
      0 0 0 7px rgba(228, 183, 77, .18),
      0 0 0 12px rgba(228, 183, 77, .05),
      0 0 38px rgba(228, 183, 77, .4),
      0 16px 28px rgba(0, 0, 0, .34);
  }
}

@keyframes rn-speaking-pulse-commander {
  0%, 100% {
    box-shadow:
      0 0 0 5px rgba(88, 101, 242, .14),
      0 0 0 9px rgba(88, 101, 242, .04),
      0 0 24px rgba(88, 101, 242, .26),
      0 16px 28px rgba(0, 0, 0, .34);
  }
  50% {
    box-shadow:
      0 0 0 7px rgba(88, 101, 242, .2),
      0 0 0 12px rgba(88, 101, 242, .05),
      0 0 38px rgba(88, 101, 242, .4),
      0 16px 28px rgba(0, 0, 0, .34);
  }
}

.sidebar-user.speaking.speaking-raid {
  color: #e4b74d;
  text-shadow: 0 0 12px rgba(228, 183, 77, .22);
}

.sidebar-user.speaking.speaking-commander {
  color: #9aa3ff;
  text-shadow: 0 0 12px rgba(88, 101, 242, .22);
}

.video-tile.speaking.speaking-raid {
  border-color: rgba(228, 183, 77, .75);
  box-shadow: 0 0 0 1px rgba(228, 183, 77, .35), 0 0 24px rgba(228, 183, 77, .12);
}

.video-tile.speaking.speaking-commander {
  border-color: rgba(88, 101, 242, .75);
  box-shadow: 0 0 0 1px rgba(88, 101, 242, .35), 0 0 24px rgba(88, 101, 242, .12);
}

.member-item.speaking.speaking-raid {
  color: #e4b74d;
  background: rgba(228, 183, 77, .08);
  border-color: rgba(228, 183, 77, .18);
}

.member-item.speaking.speaking-commander {
  color: #9aa3ff;
  background: rgba(88, 101, 242, .08);
  border-color: rgba(88, 101, 242, .18);
}

.member-item.speaking.speaking-raid .member-dot {
  background: var(--rn-voice-raid);
}

.member-item.speaking.speaking-commander .member-dot {
  background: var(--rn-voice-commander);
}

/* ===== rednexus-design-v44.css ===== */
/*
  REDNexus Design System — D44 / sidebar channel drag
  v0.2-test-dev.40.46
*/

.channel.channel-can-reorder {
  cursor: grab;
}

.channel.channel-can-reorder:active {
  cursor: grabbing;
}

/* ===== rednexus-design-v45.css ===== */
/*
  REDNexus Design System — D45 / server creation paused
  v0.2-test-dev.40.51
*/

#createServerForm.is-creation-disabled {
  opacity: .78;
}

#createServerForm.is-creation-disabled input {
  cursor: not-allowed;
}

#createServerForm.is-creation-disabled .btn {
  background: #2a2f36;
  color: #c5ccd4;
  box-shadow: none;
}

/* ===== rednexus-design-v46.css ===== */
/*
  REDNexus Design System — D46 / always-on voice occupancy in the channel list
  v0.2-test-dev.40.52
*/

.sidebar-room-users {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 1px 8px 6px 28px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 3px 6px;
  border-radius: 6px;
  overflow: hidden;
  color: var(--rn-text-soft, #c8cdd3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.011em;
  line-height: 1.25;
  text-overflow: clip;
  white-space: nowrap;
}

.sidebar-user:hover,
.sidebar-user.voice-member-target:hover {
  background: rgba(255, 255, 255, .045);
  color: var(--rn-text, #f3f5f7);
}

.sidebar-user-avatar {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #292d34;
  color: #d9dde3;
  font-size: 9px;
  font-weight: 800;
}

.sidebar-user-avatar .user-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-user-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-media {
  flex: 0 0 auto;
  color: var(--rn-muted, #828b96);
  font-size: 11px;
  font-weight: 600;
}

.sidebar-user.speaking {
  color: var(--rn-green, #31d66b);
}

.sidebar-user.speaking.speaking-raid {
  color: var(--rn-voice-raid, #e4b74d);
}

.sidebar-user.speaking.speaking-commander {
  color: var(--rn-voice-commander, #9aa3ff);
}

.sidebar-user.speaking .sidebar-user-name,
.sidebar-user.speaking .sidebar-user-name.has-role-color {
  color: inherit !important;
}

.voice-channel-count {
  font-family: inherit;
}

/* ===== rednexus-design-v47.css ===== */
/*
  REDNexus Design System — D47 / DMs in the server rail
  v0.2-test-dev.40.54
*/

.server-rail {
  min-height: 0;
  overflow: hidden;
}

.server-rail > .server-logo,
.server-rail > .rail-separator,
.server-rail > .server-icon.add {
  flex: 0 0 auto;
}

.rail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.rail-scroll::-webkit-scrollbar {
  display: none;
}

#serverRail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.rail-dms {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
}

.rail-dm {
  position: relative;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid var(--rn-line, rgba(255,255,255,.11));
  border-radius: 50%;
  background: linear-gradient(145deg, #171b20, #0e1115);
  color: #fff;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.32);
  transition: .15s ease;
}

.rail-dm:hover,
.rail-dm.active {
  border-radius: 13px;
  border-color: rgba(227,40,45,.5);
  background:
    linear-gradient(135deg, rgba(227,40,45,.19), rgba(227,40,45,.055)),
    #12161b;
  box-shadow: 0 0 20px rgba(227,40,45,.1);
}

.rail-dm.active::before {
  content: "";
  position: absolute;
  left: -11px;
  width: 3px;
  height: 24px;
  border-radius: 0 4px 4px 0;
  background: var(--rn-red-hot, #e3282d);
  box-shadow: 0 0 10px rgba(255,58,63,.8);
}

.rail-dm .dm-channel-body {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.rail-dm .dm-avatar-wrap,
.rail-dm .dm-avatar {
  width: 100%;
  height: 100%;
}

.rail-dm .dm-avatar-wrap {
  display: block;
  overflow: visible;
  border-radius: inherit;
}

.rail-dm .dm-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  background: #292d34;
  font-size: 15px;
  font-weight: 800;
}

.rail-dm .dm-presence-dot {
  right: 0;
  bottom: 0;
  z-index: 2;
  border-color: #090b0e;
}

.rail-dm .dm-unread-badge {
  position: absolute;
  right: -4px;
  top: -5px;
  z-index: 3;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-shadow: 0 0 0 2px #111318;
}

.mobile-dm-block {
  display: none;
}

@media (max-width: 720px) {
  .mobile-dm-block {
    display: block;
  }
}

@media (hover: none) and (pointer: coarse) {
  .mobile-dm-block {
    display: block;
  }
}

/* ===== rednexus-design-v48.css ===== */
/*
  REDNexus Design System — D48 / mobile voice occupancy
  v0.2-test-dev.40.58

  iOS Safari does not reliably scroll overflow inside a transformed drawer,
  so the mobile channel menu slides with `left` instead of `transform`.
  Occupancy rows stay visible in that list; Voice Hall preview is a compact
  stack rather than spatial cards.
*/

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .channel-sidebar {
    display: flex !important;
    flex-direction: column !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: calc(-1 * min(88vw, 340px) - 28px) !important;
    width: min(88vw, 340px) !important;
    height: 100% !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    transform: none !important;
    transition: left .18s ease !important;
  }

  .channel-sidebar.open {
    left: 0 !important;
    transform: none !important;
  }

  .channel-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  .sidebar-room-users.has-occupants {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    padding: 2px 8px 10px 22px;
  }

  .sidebar-user {
    min-height: 32px;
    font-size: 14px;
  }

  .sidebar-user-avatar {
    width: 22px;
    height: 22px;
  }

  .sidebar-channel-category.collapsed
    .sidebar-category-channels
    > .channel.active + .sidebar-room-users.has-occupants {
    display: flex !important;
  }

  .voice-grid.occupancy-preview-grid {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 8px 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  .voice-grid.occupancy-preview-grid > .voice-person.occupancy-preview {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .voice-grid.occupancy-preview-grid > .voice-person.occupancy-preview::before {
    display: none;
  }
}

/* ===== rednexus-design-v49.css ===== */
/*
  REDNexus Design System — D49 / iOS keyboard zoom and composer clip
  v0.2-test-dev.40.59

  Safari auto-zooms focused fields under 16px. v12 set the composer to 15px,
  so the visual viewport became a cropped zoom. Binding shell width to that
  crop pushed the send button off-screen; pinch-out reset scale and "fixed" it.
  Keep layout width at 100% while typing; only shrink height for the keyboard.
*/

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  html,
  body,
  .app-shell,
  html.rv-keyboard-open .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    transform: none !important;
  }

  html.rv-keyboard-open .app-shell {
    left: 0 !important;
    right: 0 !important;
  }

  .main-panel,
  .content-view,
  .text-view,
  .message-composer,
  .composer-shell,
  .composer-main-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .message-composer {
    overflow: hidden !important;
  }

  .composer-main-row {
    grid-template-columns: 40px minmax(0, 1fr) auto 40px !important;
  }

  .composer-send-btn {
    flex: 0 0 40px;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  .message-composer textarea,
  .message-composer input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .login-card input,
  .login-card textarea,
  .user-profile-edit-input,
  .user-profile-edit-textarea {
    font-size: 16px !important;
  }
}

/* ===== rednexus-design-v50.css ===== */
/*
  REDNexus Design System — D50 / occupied rooms stay visible when collapsed
  v0.2-test-dev.40.60

  A collapsed category hid every voice channel except the selected one.
  On mobile that meant: you see who is in the room you opened, but not who
  sits in the others — and nothing at all if you are in a text channel.
  Occupied rooms keep their names and member lists in the channel menu.
*/

.sidebar-channel-category.collapsed
  .sidebar-category-channels
  > .voice-channel.has-occupants {
  display: flex !important;
}

.sidebar-channel-category.collapsed
  .sidebar-category-channels
  > .voice-channel.has-occupants + .sidebar-room-users.has-occupants {
  display: flex !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .sidebar-channel-category.collapsed
    .sidebar-category-channels
    > .sidebar-room-users.has-occupants {
    display: flex !important;
  }
}

/* ===== rednexus-design-v51.css ===== */
/*
  REDNexus Design System — D51 / mobile composer above the home indicator
  v0.2-test-dev.40.61

  After the keyboard-zoom fix the shell stayed at 100dvh, which on iOS sits
  behind Safari chrome. The composer then painted under the home indicator
  and v49's overflow:hidden clipped the send button. Size the shell to the
  visible visualViewport and keep a safe-area gap under the input.
*/

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  html,
  body,
  .app-shell,
  html.rv-keyboard-open .app-shell {
    overflow-x: clip !important;
    overflow-y: hidden !important;
    height: var(--rv-vv-height, 100dvh) !important;
    max-height: var(--rv-vv-height, 100dvh) !important;
  }

  .message-composer {
    overflow: visible !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 8px max(12px, env(safe-area-inset-bottom)) !important;
    padding-bottom: 8px !important;
  }

  html.rv-keyboard-open .message-composer {
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* ===== rednexus-design-v52.css ===== */
/*
  REDNexus Design System — D52 / mobile composer media menu
  v0.2-test-dev.40.63

  GIF, stickers and emoji sit as three separate buttons on desktop. On a
  phone they steal the textarea width and wrap "Написать сообщение". Fold
  them into one smile button with a plus-style submenu.
*/

.composer-media-wrap {
  display: none;
  position: relative;
}

.composer-media-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 40;
  display: grid;
  min-width: 168px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: #14181e;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

.composer-media-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e8ecf0;
  font-size: 14px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}

.composer-media-item:hover,
.composer-media-item:focus-visible {
  background: rgba(227, 40, 45, .14);
}

.composer-media-item .composer-tool-gif {
  display: grid;
  place-items: center;
  width: 20px;
  font-size: 9px;
}

.composer-media-menu-btn[aria-expanded="true"] {
  color: #f3f5f7;
  background: rgba(255, 255, 255, .06);
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .composer-media-wrap {
    display: block;
  }

  .composer-tool-desktop {
    display: none !important;
  }

  .composer-tools {
    padding-right: 0;
  }

  .message-composer textarea::placeholder {
    white-space: nowrap;
  }
}

/* ===== rednexus-design-v53.css ===== */
/*
  REDNexus Design System — D53 / channel emoji icons + compact media tray
  v0.2-test-dev.40.64

  Private channels no longer turn gold. A channel can show a custom emoji
  instead of # / speaker / lock. The composer media tray stays compact on
  the right and no longer closes when emoji categories re-render.
*/

.channel.is-private .channel-type-icon {
  color: #8b939e;
}

.channel-type-icon.has-emoji {
  flex-basis: 18px;
  width: 18px;
  height: 18px;
  color: inherit;
}

.channel-type-icon.has-emoji .channel-type-mark {
  font-size: 16px;
  font-weight: 500;
}

.cs-name-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.cs-icon-wrap {
  position: relative;
}

.cs-icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: #14181e;
  color: #edf0f3;
  font-size: 22px;
  cursor: pointer;
}

.cs-icon-btn.is-default {
  color: #8b939e;
  font-size: 18px;
  font-weight: 800;
}

.cs-icon-btn:hover,
.cs-icon-btn[aria-expanded="true"] {
  border-color: rgba(227, 40, 45, .45);
  background: rgba(227, 40, 45, .1);
}

.cs-icon-clear {
  margin: 6px 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8b939e;
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.cs-icon-clear:hover {
  color: #e3282d;
}

.cs-icon-picker {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 60;
  width: min(320px, 72vw);
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: #14181e;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

.cs-icon-cats {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin: 0 0 8px;
}

.cs-icon-cat {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.cs-icon-cat.active {
  background: rgba(227, 40, 45, .16);
}

.cs-icon-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
  max-height: 220px;
  overflow: auto;
}

.cs-icon-tile {
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

.cs-icon-tile:hover,
.cs-icon-tile:focus-visible {
  background: rgba(227, 40, 45, .14);
}

.composer-media-tray {
  width: min(360px, 100%);
  max-width: 100%;
  margin-left: auto;
  margin-right: 0;
}

.media-tray-tab {
  flex: 0 1 auto;
  padding: 0 12px;
}

/* ===== rednexus-design-v54.css ===== */
/*
  REDNexus Design System — D54 / mobile attach + media tray vs keyboard
  v0.2-test-dev.40.66

  The plus control stayed behind the keyboard or a clipped submenu, so it
  never opened a gallery/file picker. GIF/sticker/emoji search stole focus
  and Safari kept the keyboard up, covering the chat. Keep + tappable, put
  the attach sheet above the composer, and size the media tray to the
  leftover visual viewport.
*/

.media-tray-close {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9aa3ad;
  cursor: pointer;
}

.media-tray-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.media-tray-close:hover,
.media-tray-close:focus-visible {
  background: rgba(255, 255, 255, .06);
  color: #f4f6f8;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  html.rv-keyboard-open .composer-attach-btn {
    display: grid !important;
  }

  .message-composer,
  .composer-shell,
  .composer-main-row,
  .composer-plus-wrap,
  .composer-media-wrap {
    overflow: visible !important;
  }

  .composer-plus-wrap,
  .composer-attach-btn {
    position: relative;
    z-index: 6;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  .composer-plus-menu {
    left: 0;
    right: auto;
    z-index: 90;
    min-width: min(240px, calc(100vw - 24px));
    padding: 8px;
  }

  .composer-plus-item,
  .composer-media-item {
    min-height: 48px;
    font-size: 16px;
  }

  .composer-media-menu {
    z-index: 90;
  }

  html.rv-media-tray-open .composer-media-tray {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0 0 8px;
    max-height: min(280px, calc(var(--rv-vv-height, 100dvh) - 128px));
  }

  html.rv-keyboard-open.rv-media-tray-open .composer-media-tray {
    max-height: min(200px, calc(var(--rv-vv-height, 100dvh) - 112px));
  }

  html.rv-media-tray-open .media-tray-body {
    flex: 1 1 auto;
    min-height: 72px;
    max-height: none;
  }

  html.rv-media-tray-open .media-tray-search input {
    font-size: 16px;
  }
}

/* ===== rednexus-design-v55.css ===== */
/*
  REDNexus Design System — D55 / mobile voice occupancy stays in the menu
  v0.2-test-dev.40.67

  Occupied rooms and their member lists were still hidden inside collapsed
  categories, and tapping a voice channel closed the drawer before the
  snapshot could paint. Keep occupancy visible while the mobile menu is open.
*/

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .channel-sidebar.open .sidebar-room-users.has-occupants,
  .sidebar-channel-category.collapsed
    .sidebar-category-channels
    > .voice-channel.has-occupants,
  .sidebar-channel-category.collapsed
    .sidebar-category-channels
    > .sidebar-room-users.has-occupants,
  .sidebar-channel-category.collapsed
    .sidebar-category-channels
    > .voice-channel.has-occupants + .sidebar-room-users.has-occupants {
    display: flex !important;
  }

  .channel-sidebar.open .sidebar-user {
    min-height: 34px;
  }
}

/* ===== rednexus-design-v56.css ===== */
/*
  REDNexus Design System — D56 / mobile attach sheet, emoji cats, occupancy
  v0.2-test-dev.40.68

  The emoji grid was flex-shrinking the category row to a sliver. The plus
  control sat under an overflowing textarea, so iOS treated taps as text
  selection. Mobile attach choices now sit in-flow above the composer.
*/

html.rv-media-tray-open .media-tray-tabs,
html.rv-media-tray-open .media-tray-search,
html.rv-media-tray-open .media-tray-cats,
html.rv-media-tray-open .media-tray-footer {
  flex: 0 0 auto;
}

html.rv-media-tray-open .media-tray-cats {
  position: relative;
  z-index: 2;
  min-height: 40px;
  padding: 8px 10px 6px;
  background: #12151b;
}

html.rv-media-tray-open .media-tray-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 96px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.composer-mobile-attach {
  display: none;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  html.rv-media-tray-open .composer-media-tray {
    max-height: min(340px, calc(var(--rv-vv-height, 100dvh) - 120px));
  }

  html.rv-keyboard-open.rv-media-tray-open .composer-media-tray {
    max-height: min(240px, calc(var(--rv-vv-height, 100dvh) - 108px));
  }

  .composer-main-row {
    overflow: hidden !important;
  }

  .composer-field,
  .composer-field textarea {
    position: relative;
    z-index: 1;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    overflow: hidden;
  }

  .composer-plus-wrap {
    z-index: 12;
    isolation: isolate;
    flex-shrink: 0;
  }

  .composer-attach-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    z-index: 12;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }

  .composer-mobile-attach:not(.hidden) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin: 0 0 8px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: #14181e;
  }

  .composer-mobile-attach-item {
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #e8ecf0;
    font-size: 16px;
    font-weight: 550;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
  }

  .composer-mobile-attach-item:hover,
  .composer-mobile-attach-item:focus-visible {
    background: rgba(227, 40, 45, .14);
  }
}

/* ===== rednexus-design-v57.css ===== */
/*
  REDNexus Design System — D57 / mobile composer hit targets + live occupancy
  v0.2-test-dev.40.69

  The composer row clipped absolute GIF/emoji menus, and the textarea sat
  over +. Occupancy rows in an already-open drawer often stayed invisible
  until the drawer was closed and opened again.
*/

.composer-mobile-media {
  display: none;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .message-composer,
  .composer-shell {
    overflow: visible !important;
  }

  .composer-main-row {
    display: flex !important;
    align-items: flex-end;
    gap: 2px;
    overflow: visible !important;
  }

  .composer-field {
    flex: 1 1 auto;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    position: relative;
    z-index: 0;
  }

  .composer-field textarea {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden;
    position: relative;
    z-index: 0;
  }

  .composer-plus-wrap,
  .composer-tools,
  .composer-send-btn {
    position: relative;
    z-index: 30;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    overflow: visible !important;
  }

  .composer-plus-wrap,
  .composer-tools {
    display: grid;
    place-items: center;
    isolation: isolate;
  }

  .composer-attach-btn,
  .composer-media-menu-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    pointer-events: auto !important;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }

  .composer-media-menu {
    display: none !important;
  }

  .composer-mobile-media:not(.hidden) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin: 0 0 8px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: #14181e;
  }

  .channel-sidebar.open .sidebar-channel-category.collapsed
    .sidebar-category-channels
    > .voice-channel.has-occupants,
  .channel-sidebar.open .sidebar-channel-category.collapsed
    .sidebar-category-channels
    > .sidebar-room-users.has-occupants {
    display: flex !important;
    visibility: visible !important;
    max-height: none !important;
  }
}

/* ===== rednexus-design-v58.css ===== */
/*
  REDNexus Design System — D58 / compact composer flyouts
  v0.2-test-dev.40.70

  Full-width in-flow sheets sat too high and too tall. Keep + and
  GIF/sticker/emoji menus compact and anchored to their buttons so the
  iOS file sheet also attaches to the composer instead of floating.
*/

.composer-file-input {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  opacity: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
  font-size: 16px;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .message-composer,
  .composer-shell,
  .composer-main-row,
  .composer-plus-wrap,
  .composer-media-wrap,
  .composer-tools {
    overflow: visible !important;
  }

  .composer-plus-menu,
  .composer-media-menu {
    display: grid;
    width: max-content;
    min-width: 0;
    max-width: min(220px, calc(100vw - 24px));
    padding: 4px;
    gap: 0;
    border-radius: 10px;
  }

  .composer-plus-menu {
    left: 0;
    right: auto;
    bottom: calc(100% + 4px);
  }

  .composer-media-menu {
    display: grid !important;
    left: auto;
    right: 0;
    bottom: calc(100% + 4px);
  }

  .composer-plus-menu.hidden,
  .composer-media-menu.hidden {
    display: none !important;
  }

  .composer-plus-item,
  .composer-media-item {
    width: auto;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .composer-media-item {
    gap: 0;
  }

  .composer-media-item .composer-tool-icon,
  .composer-media-item .composer-tool-gif {
    display: none;
  }
}

/* ===== rednexus-design-v59.css ===== */
/* REDNexus design overlay
  v0.2-test-dev.40.72
  Locale switcher, settings language pane, news compose + BB cards.
*/

.locale-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  z-index: 4;
}

.locale-switch button {
  margin: 0;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #9aa3af;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .02em;
  line-height: 1.2;
  cursor: pointer;
}

.locale-switch button:hover {
  color: #f1f3f5;
  background: rgba(255, 255, 255, .05);
}

.locale-switch button.active,
.locale-switch button[aria-pressed="true"] {
  color: #fff;
  border-color: rgba(227, 40, 45, .55);
  background: rgba(227, 40, 45, .16);
}

.login-locale-switch {
  position: absolute;
  top: 16px;
  right: 16px;
}

.topbar-locale-switch {
  margin-left: auto;
  flex-shrink: 0;
}

.settings-locale-switch {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
}

.settings-locale-switch button {
  padding: 6px 10px;
  font-size: 12px;
}

.news-compose-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .62);
}

.news-compose-modal.hidden {
  display: none;
}

.news-compose-card {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 20px 22px 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: #111214;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

.news-compose-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.news-compose-header h2 {
  margin: 4px 0 6px;
  font-size: 22px;
}

.news-compose-header p {
  margin: 0;
  color: #9aa3af;
  font-size: 13px;
}

.news-compose-body input,
.news-compose-body textarea {
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: #0e0f12;
  color: #f2f3f5;
  font: inherit;
}

.news-compose-body textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.45;
}

.news-bb-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
}

.news-bb-toolbar button {
  min-width: 32px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  background: rgba(255, 255, 255, .04);
  color: #d7dbe0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.news-bb-toolbar button:hover {
  border-color: rgba(227, 40, 45, .45);
  color: #fff;
}

.news-visual-toggle[aria-pressed="true"] {
  border-color: rgba(227, 40, 45, .8);
  background: rgba(227, 40, 45, .22);
  color: #fff;
}

.news-color-swatch {
  font-weight: 800;
}

.news-visual-editor {
  width: 100%;
  min-height: 160px;
  max-height: 360px;
  margin: 0 0 12px;
  padding: 10px 12px;
  overflow: auto;
  border: 1px solid rgba(227, 40, 45, .45);
  border-radius: 10px;
  background: #0e0f12;
  color: #d7dbe0;
  font: inherit;
  line-height: 1.5;
  outline: none;
  word-break: break-word;
}

.news-visual-editor:focus {
  border-color: rgba(227, 40, 45, .75);
}

.news-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.message-row.is-news .message-body {
  min-width: 0;
}

.message-news {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 8px 0 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(227, 40, 45, .12), rgba(12, 14, 18, .88));
}

.message-news-kicker {
  padding: 10px 14px 0;
  color: #e3282d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.message-news-title {
  margin: 4px 14px 10px;
  color: #f6f7f9;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.message-news-cover {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  cursor: zoom-in;
  background: #0b0c0e;
}

.message-news-body {
  padding: 12px 14px 14px;
  color: #d7dbe0;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.news-bb-center {
  text-align: center;
}

.news-bb-left {
  text-align: left;
}

.news-bb-right {
  text-align: right;
}

.news-bb-h1 {
  margin: 8px 0 6px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.news-bb-h2 {
  margin: 6px 0;
  font-size: 17px;
  font-weight: 700;
}

.news-bb-hr {
  margin: 12px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.news-bb-code {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
}

.news-bb-spoiler {
  background: #1a1c20;
  color: transparent;
  border-radius: 4px;
  cursor: pointer;
}

.news-bb-spoiler.revealed {
  color: inherit;
  background: rgba(255, 255, 255, .06);
}

.news-bb-quote {
  margin: 8px 0;
  padding: 8px 10px;
  border-left: 3px solid rgba(227, 40, 45, .7);
  background: rgba(255, 255, 255, .03);
  color: #c5cbd3;
}

.news-bb-list {
  margin: 8px 0 8px 18px;
  padding: 0;
}

.news-bb-img {
  display: block;
  max-width: 100%;
  margin: 8px 0;
  border-radius: 8px;
  cursor: zoom-in;
}

.news-bb-link {
  color: #7eb8ff;
  text-decoration: underline;
}

@media (max-width: 720px) {
  .locale-switch button {
    padding: 3px 5px;
    font-size: 10px;
  }

  .login-locale-switch {
    top: 10px;
    right: 10px;
  }

  .topbar-locale-switch {
    max-width: 46vw;
    justify-content: flex-end;
  }

  .news-compose-modal {
    padding: 8px;
    align-items: flex-end;
  }

  .news-compose-card {
    width: 100%;
    max-height: min(92vh, 920px);
    border-radius: 16px 16px 8px 8px;
  }

  .message-news {
    max-width: 100%;
  }
}

.user-profile-edit-label > span:first-child {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.user-profile-edit-label > span:last-child {
  color: #68717d;
  font-size: 8px;
  font-weight: 700;
}

.news-title-row,
.news-cover-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 0 0 12px;
}

.news-title-row input,
.news-cover-row #newsCoverInput {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
}

.news-align-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 0 0 auto;
}

.news-align-group button {
  min-width: 32px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: #d7dbe0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.news-align-group button.is-active,
.news-align-group button[aria-pressed="true"] {
  border-color: rgba(227, 40, 45, .8);
  background: rgba(227, 40, 45, .22);
  color: #fff;
}

#newsCoverUploadBtn {
  flex: 0 0 auto;
  margin: 0 !important;
  width: auto !important;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: #d7dbe0;
  font-weight: 700;
  cursor: pointer;
}

.news-cover-preview-wrap {
  margin: 0 0 14px;
}

.news-cover-stage {
  position: relative;
  height: 168px;
  overflow: hidden;
  border: 1px solid rgba(227, 40, 45, .45);
  border-radius: 12px;
  background: #0b0c0e;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.news-cover-stage.is-fit {
  cursor: default;
}

.news-cover-stage.is-dragging {
  cursor: grabbing;
}

.news-cover-stage img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: #0b0c0e;
}

.news-cover-stage.is-fill img {
  object-fit: cover;
}

.news-cover-stage.is-fit img {
  object-fit: contain;
}

.news-cover-modes,
.news-cover-aligns {
  margin-top: 8px;
}

.news-cover-hint {
  margin-top: 6px;
  color: #9aa3af;
  font-size: 12px;
}

.message-news-title.is-center {
  text-align: center;
}

.message-news-title.is-right {
  text-align: right;
}

.message-news-cover.is-fill {
  object-fit: cover;
}

.message-news-cover.is-fit {
  object-fit: contain;
  background: #0b0c0e;
}

button.message-mention {
  display: inline;
  margin: 0;
  padding: 1px 5px;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-weight: 750;
  line-height: inherit;
  cursor: pointer;
  vertical-align: baseline;
}

.message-mention.is-role,
.message-mention.is-everyone {
  background: rgba(88, 101, 242, .22);
  color: #c4c9ff;
}

.message-mention.is-channel,
.message-mention.is-message {
  background: rgba(59, 165, 93, .18);
  color: #8ee0a8;
}

.message-mention.is-everyone.mine,
.message-mention.is-role.mine {
  background: rgba(214, 56, 62, .22);
  color: #ff868b;
}

.mention-suggestion-kind {
  margin-left: auto;
  flex: 0 0 auto;
  color: #8b95a7;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
}

.mention-suggestion-name {
  flex: 1 1 auto;
}

/* ===== rednexus-design-v60.css ===== */
/* v0.2-test-dev.40.76 — user tickets in settings + report from chat */

.user-tickets-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.user-tickets-toolbar > button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #543036;
  border-radius: 8px;
  background: #26191c;
  color: #e8c9cc;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.user-ticket-create {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #343a42;
  border-radius: 10px;
  background: #15181c;
}

.user-ticket-textarea {
  min-height: 84px;
  resize: vertical;
  font: inherit;
}

.user-ticket-create-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.user-tickets-layout {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 10px;
  min-height: 42vh;
}

.user-tickets-list {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: min(52vh, 520px);
  overflow: auto;
}

.user-ticket-item {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #2c3239;
  border-radius: 8px;
  background: #171a1f;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.user-ticket-item.active {
  border-color: #543036;
  background: #26191c;
}

.user-ticket-item strong {
  font-size: 11px;
}

.user-ticket-item span {
  color: #838c96;
  font-size: 9px;
}

.user-ticket-empty,
.user-ticket-detail {
  min-height: 220px;
  border: 1px solid #2c3239;
  border-radius: 10px;
  background: #15181c;
}

.user-ticket-empty {
  display: grid;
  place-items: center;
  color: #7f8995;
  font-size: 12px;
  padding: 18px;
}

.user-ticket-detail {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 8px;
}

.user-ticket-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.user-ticket-detail-head strong {
  font-size: 13px;
}

.user-ticket-status {
  color: #8f96a2;
  font-size: 10px;
}

.user-ticket-messages {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 7px;
  max-height: min(32vh, 320px);
  overflow: auto;
}

.user-ticket-msg {
  padding: 9px 10px;
  border: 1px solid #2c3239;
  border-radius: 9px;
  background: #1b1f24;
  font-size: 12px;
  white-space: pre-wrap;
  line-height: 1.45;
}

.user-ticket-msg.outbound {
  border-color: #543036;
  background: #1d1518;
}

.user-ticket-msg .meta {
  display: block;
  margin-bottom: 5px;
  color: #838c96;
  font-size: 9px;
}

.report-modal-card {
  width: min(460px, 94vw);
}

.report-modal-lead {
  margin: 0 0 10px;
  color: #8b949e;
  font-size: 12px;
  line-height: 1.45;
}

.report-reason {
  width: 100%;
  min-height: 110px;
  box-sizing: border-box;
  padding: 10px 11px;
  border: 1px solid #353c45;
  border-radius: 9px;
  background: #101317;
  color: #e8edf2;
  resize: vertical;
  font: inherit;
}

.report-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.report-modal-actions button {
  min-height: 40px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
}

#reportSubmit {
  border: 1px solid #543036;
  background: #26191c;
  color: #f0d4d6;
}

#reportCancel {
  border: 1px solid #3b424b;
  background: #22262c;
  color: #c8ced6;
}

@media (max-width: 720px) {
  .user-tickets-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .user-tickets-list {
    max-height: 28vh;
  }
}

/* ===== rednexus-design-v61.css ===== */
/*
  REDNexus Design System — D61
  Settings windows match the account menu: grouped #1e1f22 cards,
  soft separators, no cheap 1px boxes, one selected nav item.
*/

:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-card.unified-settings-card {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #111214;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}

:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-nav,
:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-main {
  min-width: 0;
  min-height: 0;
}

:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-main {
  overflow: hidden;
}

:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-main .unified-settings-pane,
:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-main .voice-settings-body,
:is(#serverSettingsModal, #channelSettingsModal) .ss-pane,
:is(#serverSettingsModal, #channelSettingsModal) .cs-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-nav {
  padding: 16px 10px;
  background: #111214;
  gap: 0;
}

:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-nav-kicker {
  margin: 0 10px 2px;
  color: #80848e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-nav-title {
  margin: 0 10px 12px;
  color: #f2f3f5;
  font-size: 16px;
  font-weight: 800;
}

.user-settings-nav-group {
  overflow: hidden;
  border-radius: 10px;
  background: #1e1f22;
}

:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-nav-item {
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #dbdee1;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.user-settings-nav-group .user-settings-nav-item + .user-settings-nav-item {
  border-top: 1px solid rgba(255, 255, 255, .04);
}

:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-nav-item:hover,
:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-nav-item:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-nav-item.active,
:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-nav-item.active:hover,
:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .user-settings-nav-item.active:focus-visible {
  background: rgba(227, 40, 45, .12);
  color: #fff;
}

:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .voice-settings-close {
  border-radius: 8px;
  background: transparent;
  color: #b5bac1;
}

:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .voice-settings-close:hover,
:is(#voiceSettingsModal, #serverSettingsModal, #channelSettingsModal) .voice-settings-close:focus-visible {
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

#voiceSettingsModal .voice-settings-hint,
#voiceSettingsModal .video-settings-hint,
#voiceSettingsModal .voice-settings-status,
#voiceSettingsModal .account-security-status {
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
  color: #b5bac1;
  font-size: 13px;
  font-weight: 500;
}

#voiceSettingsModal .settings-locale-switch {
  margin-top: 8px;
  padding: 4px;
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
}

#voiceSettingsModal .settings-locale-switch button {
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  color: #b5bac1;
  font-size: 13px;
  font-weight: 650;
}

#voiceSettingsModal .settings-locale-switch button:hover {
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

#voiceSettingsModal .settings-locale-switch button.active,
#voiceSettingsModal .settings-locale-switch button[aria-pressed="true"] {
  border: 0;
  background: rgba(227, 40, 45, .12);
  color: #fff;
}

#voiceSettingsModal .voice-settings-select,
#voiceSettingsModal .settings-hotkey-btn,
#voiceSettingsModal .account-security-input {
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
  color: #dbdee1;
  font-size: 13px;
}

#voiceSettingsModal .voice-settings-select:focus,
#voiceSettingsModal .settings-hotkey-btn:focus-visible,
#voiceSettingsModal .account-security-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(227, 40, 45, .45);
}

#voiceSettingsModal .settings-choice-list {
  gap: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #1e1f22;
}

#voiceSettingsModal .settings-choice {
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#voiceSettingsModal .settings-choice:has(input:disabled) {
  opacity: .5;
  cursor: default;
}

#voiceSettingsModal .voice-ptt-instant-choice {
  padding-left: 22px;
}

#voiceSettingsModal .voice-ptt-release {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px 22px;
}

#voiceSettingsModal .voice-ptt-release .voice-settings-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
}

#voiceSettingsModal .voice-ptt-release.is-disabled {
  opacity: .5;
}

#voiceSettingsModal .settings-choice + .settings-choice {
  border-top: 1px solid rgba(255, 255, 255, .04);
}

#voiceSettingsModal .settings-choice:hover {
  background: rgba(255, 255, 255, .05);
}

#voiceSettingsModal .settings-choice:has(input:checked) {
  border: 0;
  background: rgba(227, 40, 45, .12);
}

#voiceSettingsModal .settings-choice strong {
  font-size: 13px;
}

#voiceSettingsModal .voice-settings-meter-card,
#voiceSettingsModal .settings-camera-preview-card,
#voiceSettingsModal .settings-hotkey-row {
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
}

#voiceSettingsModal .voice-settings-meter-actions button,
#voiceSettingsModal .voice-settings-actions button,
#voiceSettingsModal .settings-camera-preview-actions button,
#voiceSettingsModal .settings-hotkey-btn,
#voiceSettingsModal .account-security-section-head > button {
  border: 0;
  border-radius: 8px;
  background: #2b2d31;
  color: #dbdee1;
  font-size: 13px;
  font-weight: 600;
}

#voiceSettingsModal .voice-settings-meter-actions button:hover,
#voiceSettingsModal .voice-settings-actions button:hover,
#voiceSettingsModal .settings-camera-preview-actions button:hover,
#voiceSettingsModal .settings-hotkey-btn:hover,
#voiceSettingsModal .account-security-section-head > button:hover,
#voiceSettingsModal .voice-settings-meter-actions button:focus-visible,
#voiceSettingsModal .voice-settings-actions button:focus-visible,
#voiceSettingsModal .settings-camera-preview-actions button:focus-visible,
#voiceSettingsModal .settings-hotkey-btn:focus-visible,
#voiceSettingsModal .account-security-section-head > button:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

#voiceSettingsModal #voiceSettingsDoneBtn,
#voiceSettingsModal #videoSettingsDoneBtn,
#voiceSettingsModal .account-password-save,
#voiceSettingsModal #userTicketCreateBtn,
#voiceSettingsModal #userTicketReplyBtn {
  background: var(--rn-red, #e3282d);
  color: #fff;
}

#voiceSettingsModal #voiceSettingsDoneBtn:hover,
#voiceSettingsModal #videoSettingsDoneBtn:hover,
#voiceSettingsModal .account-password-save:hover:not(:disabled),
#voiceSettingsModal #userTicketCreateBtn:hover:not(:disabled),
#voiceSettingsModal #userTicketReplyBtn:hover:not(:disabled),
#voiceSettingsModal #voiceSettingsDoneBtn:focus-visible,
#voiceSettingsModal #videoSettingsDoneBtn:focus-visible,
#voiceSettingsModal .account-password-save:focus-visible:not(:disabled),
#voiceSettingsModal #userTicketCreateBtn:focus-visible:not(:disabled),
#voiceSettingsModal #userTicketReplyBtn:focus-visible:not(:disabled) {
  background: #c82227;
  color: #fff;
}

#voiceSettingsModal .settings-hotkey-btn.is-capturing {
  background: rgba(227, 40, 45, .16);
  color: #fff;
}

#voiceSettingsModal .account-security-section {
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
}

#voiceSettingsModal .account-security-section + .account-security-section {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 0;
}

#voiceSettingsModal .account-security-section .account-security-input {
  background: #111214;
}

#voiceSettingsModal .account-sessions-list {
  gap: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #111214;
}

#voiceSettingsModal .account-session-row {
  min-height: 64px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#voiceSettingsModal .account-session-geo {
  color: #7d8590;
  font-size: 11px;
  font-weight: 500;
}

#voiceSettingsModal .account-session-row + .account-session-row {
  border-top: 1px solid rgba(255, 255, 255, .04);
}

#voiceSettingsModal .account-session-row.current {
  background: rgba(227, 40, 45, .08);
}

#voiceSettingsModal .account-session-current {
  background: rgba(227, 40, 45, .16);
  color: #fff;
}

#voiceSettingsModal .account-danger-outline,
#voiceSettingsModal #userTicketCreateCancel {
  border: 0;
  background: transparent;
  color: #f23f43;
  font-size: 13px;
  font-weight: 600;
}

#voiceSettingsModal .account-danger-outline:hover:not(:disabled),
#voiceSettingsModal #userTicketCreateCancel:hover,
#voiceSettingsModal .account-session-revoke:hover,
#voiceSettingsModal .account-danger-outline:focus-visible:not(:disabled),
#voiceSettingsModal #userTicketCreateCancel:focus-visible,
#voiceSettingsModal .account-session-revoke:focus-visible {
  outline: none;
  background: rgba(242, 63, 67, .12);
  color: #ff6b6e;
}

#voiceSettingsModal .account-session-revoke {
  background: transparent;
  color: #f23f43;
}

/* Support tickets */
#voiceSettingsModal .user-tickets-toolbar {
  margin-bottom: 10px;
}

#voiceSettingsModal .user-tickets-toolbar > .voice-settings-hint {
  margin: 0;
  padding: 8px 12px;
}

#voiceSettingsModal .user-tickets-toolbar > button {
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--rn-red, #e3282d);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#voiceSettingsModal .user-tickets-toolbar > button:hover,
#voiceSettingsModal .user-tickets-toolbar > button:focus-visible {
  background: #c82227;
  color: #fff;
}

#voiceSettingsModal .user-ticket-create {
  margin-bottom: 10px;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
}

#voiceSettingsModal .user-ticket-create .account-security-input {
  background: #111214;
}

#voiceSettingsModal .user-tickets-layout {
  gap: 8px;
}

#voiceSettingsModal .user-tickets-list {
  gap: 0;
  overflow: auto;
  border-radius: 10px;
  background: #1e1f22;
}

#voiceSettingsModal .user-ticket-item {
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #dbdee1;
  font: inherit;
  font-size: 13px;
}

#voiceSettingsModal .user-ticket-item + .user-ticket-item {
  border-top: 1px solid rgba(255, 255, 255, .04);
}

#voiceSettingsModal .user-ticket-item:hover {
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

#voiceSettingsModal .user-ticket-item.active {
  border: 0;
  background: rgba(227, 40, 45, .12);
  color: #fff;
}

#voiceSettingsModal .user-ticket-item strong {
  font-size: 13px;
  font-weight: 600;
  color: #f2f3f5;
}

#voiceSettingsModal .user-ticket-item span {
  color: #949ba4;
  font-size: 12px;
}

#voiceSettingsModal .user-ticket-empty,
#voiceSettingsModal .user-ticket-detail {
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
}

#voiceSettingsModal .user-ticket-empty {
  color: #949ba4;
  font-size: 13px;
}

#voiceSettingsModal .user-tickets-list .user-ticket-empty {
  background: transparent;
}

#voiceSettingsModal .user-ticket-detail-head strong {
  font-size: 14px;
  font-weight: 700;
  color: #f2f3f5;
}

#voiceSettingsModal .user-ticket-status {
  color: #949ba4;
  font-size: 12px;
}

#voiceSettingsModal .user-ticket-messages {
  gap: 0;
  overflow: auto;
  border-radius: 8px;
  background: #111214;
}

#voiceSettingsModal .user-ticket-msg {
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  color: #dbdee1;
}

#voiceSettingsModal .user-ticket-msg + .user-ticket-msg {
  border-top: 1px solid rgba(255, 255, 255, .04);
}

#voiceSettingsModal .user-ticket-msg.outbound {
  background: rgba(227, 40, 45, .08);
}

#voiceSettingsModal .user-ticket-msg .meta {
  color: #949ba4;
  font-size: 12px;
}

#voiceSettingsModal .user-ticket-detail .account-security-input {
  background: #111214;
}

#voiceSettingsModal #userTicketReplyBtn:disabled,
#voiceSettingsModal .user-ticket-detail .account-security-input:disabled {
  opacity: .45;
}

.report-modal-card {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #111214;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}

.report-reason {
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
  color: #dbdee1;
  font-size: 13px;
}

.report-reason:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(227, 40, 45, .45);
}

.report-modal-lead {
  color: #b5bac1;
  font-size: 13px;
}

.report-modal-actions button {
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

#reportSubmit {
  border: 0;
  background: var(--rn-red, #e3282d);
  color: #fff;
}

#reportSubmit:hover,
#reportSubmit:focus-visible {
  background: #c82227;
}

#reportCancel {
  border: 0;
  background: #1e1f22;
  color: #dbdee1;
}

#reportCancel:hover,
#reportCancel:focus-visible {
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

#voiceSettingsModal #settingsSecurityPane,
#voiceSettingsModal #settingsSupportPane,
#voiceSettingsModal #settingsVoicePane,
#voiceSettingsModal #settingsVideoPane,
#voiceSettingsModal #settingsHotkeysPane {
  padding-bottom: 28px;
}

#voiceSettingsModal .settings-help {
  border: 0;
  border-radius: 8px;
  background: #111214;
  color: #949ba4;
}

#voiceSettingsModal .video-settings-field {
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
}

#voiceSettingsModal .video-settings-field .voice-settings-select {
  background: #111214;
}

:is(#serverSettingsModal, #channelSettingsModal) .ss-add-row select,
:is(#serverSettingsModal, #channelSettingsModal) .ss-add-row input:not([type="checkbox"]),
:is(#serverSettingsModal, #channelSettingsModal) .channel-settings-main input:not([type="checkbox"]),
:is(#serverSettingsModal, #channelSettingsModal) .channel-settings-main textarea,
:is(#serverSettingsModal, #channelSettingsModal) .server-settings-main input:not([type="checkbox"]),
:is(#serverSettingsModal, #channelSettingsModal) .server-settings-main select,
:is(#serverSettingsModal, #channelSettingsModal) .server-settings-main textarea {
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
  color: #dbdee1;
  font-size: 13px;
}

:is(#serverSettingsModal, #channelSettingsModal) .ss-add-row select:focus,
:is(#serverSettingsModal, #channelSettingsModal) .ss-add-row input:not([type="checkbox"]):focus,
:is(#serverSettingsModal, #channelSettingsModal) .channel-settings-main input:not([type="checkbox"]):focus,
:is(#serverSettingsModal, #channelSettingsModal) .channel-settings-main textarea:focus,
:is(#serverSettingsModal, #channelSettingsModal) .server-settings-main input:not([type="checkbox"]):focus,
:is(#serverSettingsModal, #channelSettingsModal) .server-settings-main select:focus,
:is(#serverSettingsModal, #channelSettingsModal) .server-settings-main textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(227, 40, 45, .45);
}

:is(#serverSettingsModal, #channelSettingsModal) .ss-role-item:hover,
:is(#serverSettingsModal, #channelSettingsModal) .ss-overwrite-item:hover {
  background: rgba(255, 255, 255, .05);
}

:is(#serverSettingsModal, #channelSettingsModal) .ss-role-item.active,
:is(#serverSettingsModal, #channelSettingsModal) .ss-overwrite-item.active {
  background: rgba(227, 40, 45, .12);
}

/* ===== rednexus-design-v62.css ===== */
/*
  REDNexus Design System — D62 / voice notes, transcribe, translate
*/

.composer-shell {
  position: relative;
}

.composer-voice-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #b5bac1;
  cursor: pointer;
}

.composer-voice-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.composer-voice-btn:hover:not(:disabled),
.composer-voice-btn:focus-visible {
  color: #f2f3f5;
  background: rgba(255, 255, 255, .06);
}

.composer-voice-btn:disabled {
  opacity: .45;
  cursor: default;
}

.composer-voice-bar {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--rn-composer-bg, #1e1f22);
}

.composer-voice-bar.hidden {
  display: none;
}

.composer-voice-cancel,
.composer-voice-send {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  font-size: 0;
  line-height: 0;
  color: #b5bac1;
  cursor: pointer;
}

.composer-voice-cancel {
  background: transparent;
}

.composer-voice-cancel:hover,
.composer-voice-send:hover {
  filter: brightness(1.08);
}

.composer-voice-cancel svg,
.composer-voice-send svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.composer-voice-send {
  margin-left: auto;
  background: #e3282d;
  color: #fff;
}

.composer-voice-send svg {
  fill: currentColor;
  stroke: none;
}

.composer-voice-pulse {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e3282d;
  animation: voicePulse 1s ease-in-out infinite;
}

.composer-voice-timer {
  font-variant-numeric: tabular-nums;
  color: #f2f3f5;
  font-size: 14px;
  font-weight: 600;
}

.composer-voice-label {
  color: #b5bac1;
  font-size: 13px;
  white-space: nowrap;
}

@keyframes voicePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}

.message-composer.is-recording .composer-main-row {
  visibility: hidden;
}

.voice-note {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: min(340px, 100%);
  max-width: 100%;
  min-width: 0;
  padding: 0;
  background: transparent;
}

.voice-note-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.voice-note-play {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #dbdee1;
  cursor: pointer;
}

.voice-note-play:hover,
.voice-note-play:focus-visible {
  color: #f2f3f5;
  background: rgba(255, 255, 255, .06);
}

.voice-note-play.is-playing {
  color: #f2f3f5;
}

.voice-note-play svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.voice-note-wave {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: 26px;
  cursor: pointer;
}

.voice-note-bar {
  flex: 1 1 0;
  width: 2px;
  max-width: 3px;
  height: max(4px, calc(var(--h, 40) * 0.26px));
  border-radius: 99px;
  background: rgba(255, 255, 255, .16);
}

.voice-note-bar.is-on {
  background: #c4c8ce;
}

.voice-note.is-playing .voice-note-bar.is-on {
  background: #e8eaed;
}

.voice-note-time {
  flex: 0 0 auto;
  min-width: 32px;
  color: #8b929c;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.voice-note-transcribe {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8b929c;
  cursor: pointer;
}

.voice-note-transcribe svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.voice-note-transcribe:hover:not(:disabled),
.voice-note-transcribe:focus-visible:not(:disabled) {
  background: rgba(255, 255, 255, .06);
  color: #f2f3f5;
}

.voice-note-transcribe:disabled,
.voice-note-transcribe.is-busy {
  opacity: .6;
  cursor: default;
}

.voice-note-transcript {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rn-chat-text, #cfd3da);
  font-size: 15px;
  line-height: 1.42;
  white-space: pre-wrap;
  word-break: break-word;
}

.voice-note-transcript.hidden {
  display: none;
}

.voice-note audio {
  display: none;
}

.message-translation {
  display: none;
}

.message-translation-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  color: #8b929c;
  font-size: 11px;
  line-height: 1.3;
}

.message-translation-hide {
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: #b5bac1;
  font-size: 11px;
  cursor: pointer;
}

.message-translation-hide:hover,
.message-translation-hide:focus-visible {
  color: #f2f3f5;
}

.message-translation-text {
  color: #d7dbe0;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* GIF/sticker/emoji tray overlays chat instead of eating a full-width strip. */
.message-composer {
  position: relative;
  overflow: visible !important;
}

.composer-media-tray {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 24;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100% - 8px));
  max-width: 360px;
  margin: 0;
  max-height: min(420px, 55vh);
}

.composer-media-tray.hidden {
  display: none;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .composer-main-row {
    flex-wrap: nowrap !important;
  }

  .composer-tools {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 0;
  }

  .composer-media-wrap {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
  }

  .composer-voice-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .composer-voice-label {
    display: none;
  }

  .composer-media-tray {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    margin: 0 0 8px;
    max-height: min(340px, calc(var(--rv-vv-height, 100dvh) - 120px));
  }

  .message-list {
    overflow-x: hidden;
  }

  .message-row,
  .message-body,
  .message-content,
  .message-attachments,
  .message-attachments.gif-only {
    min-width: 0;
    max-width: 100%;
  }
}

.message-attachments {
  width: 100%;
  max-width: min(420px, 100%);
  justify-items: start;
  overflow: hidden;
}

.message-attachments.gif-only {
  max-width: min(280px, 100%);
}

.attachment-image-button {
  display: block;
  width: auto;
  max-width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.attachment-image.loading {
  width: min(240px, 100%);
  height: 160px;
  max-width: 100%;
  background: rgba(255, 255, 255, .04);
}

.message-attachments .attachment-image,
.message-attachments img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(360px, 52vh);
  object-fit: contain;
  vertical-align: bottom;
  background: transparent;
}

.attachment-image-meta {
  display: none;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  html.rn-settings-open,
  html.rn-settings-open body {
    overflow: hidden !important;
  }

  #voiceSettingsModal.user-settings-modal {
    z-index: 800;
    isolation: isolate;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    background: #08090b;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #voiceSettingsModal .user-settings-card.unified-settings-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    background: #111214;
  }

  html.rn-settings-open .voice-stage,
  html.rn-settings-open .account-panel,
  html.rn-settings-open .channel-sidebar,
  html.rn-settings-open .topbar {
    visibility: hidden;
  }

  #voiceSettingsModal .user-settings-nav {
    display: flex !important;
    flex-direction: column;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px 8px 0 !important;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: #111214;
  }

  #voiceSettingsModal .user-settings-nav-kicker,
  #voiceSettingsModal .user-settings-nav-title,
  #voiceSettingsModal .settings-tab-desktop {
    display: none !important;
  }

  #voiceSettingsModal .user-settings-nav-group {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }

  #voiceSettingsModal .user-settings-nav-item {
    flex: 0 0 auto;
    width: auto !important;
    min-width: max-content;
    min-height: 40px !important;
    padding: 8px 12px !important;
    border: 0 !important;
    text-align: center;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  #voiceSettingsModal .user-settings-nav-group .user-settings-nav-item + .user-settings-nav-item {
    border-top: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, .04);
  }

  #voiceSettingsModal .user-settings-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  #voiceSettingsModal .user-settings-header {
    flex: 0 0 auto;
    padding: 8px 12px;
  }

  #voiceSettingsModal .user-settings-header .eyebrow,
  #voiceSettingsModal #voiceSettingsLead {
    display: none;
  }

  #voiceSettingsModal .user-settings-header h2 {
    margin: 0;
    font-size: 16px;
  }

  #voiceSettingsModal .unified-settings-pane,
  #voiceSettingsModal .voice-settings-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #voiceSettingsModal #settingsSupportPane:not(.hidden) {
    display: flex;
    flex-direction: column;
  }

  #voiceSettingsModal .user-tickets-toolbar {
    flex-wrap: wrap;
    flex: 0 0 auto;
  }

  #voiceSettingsModal .user-tickets-toolbar > button {
    flex: 1 1 auto;
  }

  #voiceSettingsModal.rn-ticket-create .user-tickets-toolbar,
  #voiceSettingsModal.rn-ticket-create .user-tickets-layout {
    display: none !important;
  }

  #voiceSettingsModal.rn-ticket-create .user-ticket-create {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    overflow: auto;
  }

  #voiceSettingsModal .account-security-input,
  #voiceSettingsModal .user-ticket-textarea {
    font-size: 16px;
  }

  #voiceSettingsModal .user-ticket-textarea {
    min-height: 96px;
    max-height: none;
  }

  html.rv-keyboard-open #voiceSettingsModal .user-settings-nav,
  html.rv-keyboard-open #voiceSettingsModal .user-settings-header > div,
  html.rv-keyboard-open #voiceSettingsModal .user-tickets-toolbar,
  html.rv-keyboard-open #voiceSettingsModal .user-tickets-list,
  html.rv-keyboard-open #voiceSettingsModal .user-ticket-empty,
  html.rv-keyboard-open #voiceSettingsModal .user-ticket-create:not(.hidden) ~ .user-tickets-layout {
    display: none !important;
  }

  html.rv-keyboard-open #voiceSettingsModal .user-settings-card.unified-settings-card {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  html.rv-keyboard-open #voiceSettingsModal .user-settings-header {
    padding: 4px 8px;
  }

  html.rv-keyboard-open #voiceSettingsModal .user-ticket-create {
    margin-bottom: 0;
  }

  html.rv-keyboard-open #voiceSettingsModal .user-ticket-textarea {
    min-height: 72px;
    max-height: 28vh;
  }
}

.locale-dropdown {
  position: relative;
  z-index: 6;
  flex-shrink: 0;
}

.locale-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 8px;
  border: 0;
  border-radius: 10px;
  background: #1e1f22;
  color: #f2f3f5;
  cursor: pointer;
}

.locale-dropdown-toggle:hover,
.locale-dropdown-toggle:focus-visible {
  background: #2b2d31;
}

.locale-flag {
  display: grid;
  place-items: center;
  width: 22px;
  height: 16px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}

.locale-flag svg {
  display: block;
  width: 22px;
  height: 16px;
}

.locale-dropdown-name {
  font-size: 13px;
  font-weight: 600;
}

.locale-dropdown-caret {
  margin-left: 2px;
  color: #8b929c;
  font-size: 11px;
}

.locale-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 8;
  display: grid;
  min-width: 180px;
  padding: 4px;
  border-radius: 10px;
  background: #1e1f22;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

.locale-dropdown-menu.hidden {
  display: none;
}

.locale-dropdown-menu [data-locale],
.locale-dropdown-menu [data-close-action] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #dbdee1;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.locale-dropdown-menu [data-locale]:hover,
.locale-dropdown-menu [data-locale]:focus-visible,
.locale-dropdown-menu [data-close-action]:hover,
.locale-dropdown-menu [data-close-action]:focus-visible {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.locale-dropdown-menu [data-locale].active,
.locale-dropdown-menu [data-close-action].active {
  background: rgba(227, 40, 45, .12);
  color: #fff;
}

#loginOverlay.login-overlay {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

#loginOverlay .login-locale-switch {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  align-self: flex-end;
  margin: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 0;
}

#loginOverlay .login-card {
  margin: auto;
}

.topbar-locale-switch {
  margin-left: auto;
  overflow: visible;
}

.topbar-locale-switch .locale-dropdown-toggle {
  min-height: 32px;
  padding: 3px 7px;
  background: rgba(0, 0, 0, .25);
}

.settings-locale-switch {
  width: 100%;
  margin-top: 8px;
}

.settings-locale-switch .locale-dropdown-toggle {
  width: 100%;
  justify-content: flex-start;
  min-height: 40px;
  padding: 8px 10px;
}

.settings-locale-switch .locale-dropdown-caret {
  margin-left: auto;
}

.settings-locale-switch .locale-dropdown-menu {
  left: 0;
  right: 0;
  min-width: 0;
}

#voiceSettingsModal #settingsInterfacePane:not(.hidden) {
  overflow: visible;
}

#settingsAutoTranslateSection .settings-auto-translate {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 0;
  padding: 10px 12px;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

#settingsAutoTranslateSection .settings-auto-translate + .settings-auto-translate {
  margin-top: 0;
}

#voiceSettingsModal .settings-auto-translate input {
  margin-top: 3px;
  accent-color: var(--rn-red, #e3282d);
}

#voiceSettingsModal .settings-auto-translate strong {
  display: block;
  color: #f2f3f5;
  font-size: 13px;
  font-weight: 600;
}

#voiceSettingsModal .settings-auto-translate span span {
  display: block;
  margin-top: 2px;
  color: #949ba4;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
}

.voice-note-play,
.voice-note-wave {
  touch-action: manipulation;
}

@media (min-width: 721px) {
  .topbar-locale-switch {
    display: none;
  }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  #loginOverlay .login-locale-switch {
    margin: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px 0;
  }

  .locale-dropdown-menu [data-locale],
  .locale-dropdown-menu [data-close-action] {
    min-height: 40px;
  }
}

.brand.brand-large {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  overflow: visible;
  margin: 6px 0 18px;
}

.brand-wordmark {
  display: block;
  width: 84%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  pointer-events: none;
}

.server-logo {
  overflow: hidden;
  padding: 0;
  background: #0b0c0e;
}

.server-logo::before,
.server-logo::after {
  content: none;
  display: none;
}

.server-logo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  html.rv-login-open,
  html.rv-login-open body {
    overflow: hidden !important;
  }

  html.rv-login-open .app-shell {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html.rv-login-open #loginOverlay.login-overlay {
    inset: auto !important;
    top: var(--rv-login-top, 0px) !important;
    left: var(--rv-login-left, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--rv-login-width, 100%) !important;
    max-width: 100% !important;
    height: var(--rv-login-height, 100dvh) !important;
    max-height: var(--rv-login-height, 100dvh) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: none !important;
    background:
      linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
      radial-gradient(circle at 50% 32%, rgba(227,40,45,.15), transparent 25%),
      radial-gradient(circle at 50% 40%, #13151a 0%, #08090b 48%, #050608 100%) !important;
    background-size: 46px 46px, 46px 46px, auto, auto !important;
  }

  html.rv-login-open #loginOverlay .login-card {
    margin: 8px auto 24px !important;
    height: auto !important;
    max-height: none !important;
  }
}

.login-window-chrome {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  align-self: stretch;
  padding: 10px 12px 0;
}

#loginOverlay .login-window-chrome .login-locale-switch {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  align-self: center;
  margin: 0;
}

html:not(.rn-desktop-shell) .login-window-chrome {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 4;
  width: auto;
  padding: 0;
  gap: 0;
  pointer-events: none;
}

html:not(.rn-desktop-shell) .login-window-drag {
  display: none;
}

html:not(.rn-desktop-shell) #loginOverlay .login-window-chrome .login-locale-switch,
html:not(.rn-desktop-shell) #loginOverlay .login-locale-switch .locale-dropdown-toggle {
  pointer-events: auto;
}

html:not(.rn-desktop-shell) #loginOverlay .login-locale-switch .locale-dropdown-menu {
  left: auto;
  right: 0;
}

html:not(.rn-desktop-shell) #loginOverlay .login-card {
  overflow: visible;
}

.desktop-only {
  display: none !important;
}

html.rn-desktop-shell .desktop-only {
  display: flex !important;
}

.login-build-version {
  display: none;
}

html.rn-desktop-shell .login-build-version {
  display: block;
  position: fixed;
  left: 16px;
  bottom: 12px;
  z-index: 140;
  color: #8b939e;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .02em;
  pointer-events: none;
}

html.rn-desktop-shell,
html.rn-desktop-shell body {
  background: #0c0f13 !important;
}

html.rn-desktop-shell.rv-login-open,
html.rn-desktop-shell.rv-login-open body {
  background: #0c0f13 !important;
  overflow: hidden !important;
}

html.rn-desktop-shell.rv-login-open .app-shell {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.rn-desktop-shell #loginOverlay.login-overlay {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  padding: 0 !important;
}

html.rn-desktop-shell.rv-login-open #loginOverlay.login-overlay {
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: #0c0f13 !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html.rn-desktop-shell #loginOverlay.login-overlay.hidden {
  display: none !important;
}

html.rn-desktop-shell #loginOverlay .login-card {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding-top: 44px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  -webkit-app-region: no-drag;
}

html.rn-desktop-shell #loginOverlay .login-card::before,
html.rn-desktop-shell #loginOverlay .login-hint {
  display: none !important;
}

html.rn-desktop-shell #loginOverlay .login-card.rn-login-rubber {
  animation: rn-login-rubber .42s cubic-bezier(.22, 1.55, .32, 1);
  transform-origin: 50% 50%;
}

@keyframes rn-login-rubber {
  0% { transform: scale(.94); }
  62% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

html.rn-desktop-shell #loginOverlay .login-card.is-login-scroll {
  overflow-y: auto !important;
  height: 100% !important;
  max-height: 100% !important;
}

html.rn-desktop-shell #loginOverlay .login-card:has(.login-locale-switch.is-open) {
  overflow: visible !important;
}

html.rn-desktop-shell .login-window-chrome {
  position: absolute;
  top: 8px;
  right: 8px;
  left: 8px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
  background: transparent;
  -webkit-app-region: drag;
}

html.rn-desktop-shell .login-window-drag {
  flex: 1;
  min-height: 32px;
}

html.rn-desktop-shell #loginOverlay .login-locale-switch,
html.rn-desktop-shell #loginOverlay .login-window-chrome .login-locale-switch {
  position: relative !important;
  align-self: center;
  margin: 0 !important;
  overflow: visible;
  -webkit-app-region: no-drag;
}

html.rn-desktop-shell #loginOverlay .login-locale-switch .locale-dropdown-menu {
  left: 0;
  right: auto;
  top: calc(100% + 4px);
  min-width: 168px;
  -webkit-app-region: no-drag;
}

html.rn-desktop-shell #loginOverlay .login-locale-switch .locale-dropdown-toggle,
html.rn-desktop-shell .desktop-win-btn {
  -webkit-app-region: no-drag;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.rn-desktop-shell #loginOverlay .login-locale-switch .locale-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 6px;
}

html.rn-desktop-shell #loginOverlay .login-locale-switch .locale-dropdown-toggle:hover,
html.rn-desktop-shell .desktop-win-btn:hover {
  background: rgba(255, 255, 255, .08) !important;
}

html.rn-desktop-shell .desktop-win-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0 !important;
  margin: 0;
  border-radius: 6px;
  color: rgba(241, 243, 245, .88);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

html.rn-desktop-shell .desktop-win-btn svg {
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: currentColor;
}

html.rn-desktop-shell .desktop-win-btn svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

html.rn-desktop-shell .desktop-win-btn svg rect[fill="none"] {
  fill: none;
  stroke: currentColor;
}

html.rn-desktop-shell .desktop-win-close:hover {
  background: rgba(227, 40, 45, .9) !important;
  color: #fff;
}

html.rn-desktop-shell .desktop-win-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  -webkit-app-region: no-drag;
}

html.rn-desktop-shell .topbar {
  -webkit-app-region: drag;
}

html.rn-desktop-shell .topbar button,
html.rn-desktop-shell .topbar .locale-dropdown,
html.rn-desktop-shell .topbar input {
  -webkit-app-region: no-drag;
}

html.rn-desktop-shell #loginOverlay .login-card input,
html.rn-desktop-shell #loginOverlay .login-card button,
html.rn-desktop-shell #loginOverlay .login-card a {
  -webkit-app-region: no-drag;
}

#loginOverlay .password-field input {
  margin-bottom: 0;
  padding-right: 46px;
}

.server-hub-card {
  position: relative;
  overflow: hidden;
  width: min(680px, 96vw);
  border: 1px solid rgba(227, 40, 45, .2);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 25%),
    rgba(16, 19, 24, .98);
  box-shadow: 0 34px 110px rgba(0,0,0,.58), 0 0 50px rgba(127,23,27,.09);
}

.server-hub-card::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rn-red-hot, #ff3a3f), transparent);
  box-shadow: 0 0 16px rgba(255,58,63,.42);
}

.server-hub-header {
  align-items: flex-start;
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 0% 0%, rgba(227,40,45,.14), transparent 46%);
}

.server-hub-eyebrow {
  color: #e3282d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: none;
}

.server-hub-header h2 {
  margin: 4px 0 6px;
  color: #f2f3f5;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.server-hub-header p {
  color: #8b929c;
  font-size: 13px;
  line-height: 1.45;
}

.server-hub-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: #1e1f22;
  color: #d7dce2;
  font-size: 0;
  line-height: 0;
}

.server-hub-close svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.server-hub-close:hover {
  background: rgba(227, 40, 45, .9);
  border-color: transparent;
  color: #fff;
}

.server-hub-section-title {
  color: #949ba4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: none;
}

.server-hub-form {
  border-color: rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(12, 15, 19, .72);
}

.server-hub-form-primary {
  border-color: rgba(227, 40, 45, .28);
  background:
    linear-gradient(180deg, rgba(227,40,45,.08), transparent 48%),
    rgba(12, 15, 19, .88);
}

.server-hub-form label {
  color: #b9bec7;
  font-size: 13px;
  font-weight: 700;
}

.server-hub-form input {
  min-height: 44px;
  border-color: #3a3e47;
  border-radius: 10px;
  background: #111318;
  color: #fff;
  font-size: 14px;
}

.server-hub-form input:focus {
  border-color: var(--red, #e3282d);
}

.server-hub-form .btn {
  min-height: 44px;
  margin-top: auto;
  border-radius: 10px;
  font-size: 14px;
}

.server-hub-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 18px 18px;
}

.server-hub-status {
  flex: 1 1 220px;
  margin: 0;
  border-color: rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(227, 40, 45, .1);
  color: #f2f3f5;
  font-size: 13px;
  line-height: 1.4;
}

.server-hub-status.error {
  border-color: rgba(227, 40, 45, .35);
  background: rgba(227, 40, 45, .12);
  color: #ffb4b7;
}

.server-hub-logout {
  margin-left: auto;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: #1e1f22;
  color: #f2f3f5;
  font-weight: 700;
  cursor: pointer;
}

.server-hub-logout:hover {
  background: rgba(227, 40, 45, .9);
  border-color: transparent;
  color: #fff;
}

.text-view.is-no-server .message-composer,
.text-view.is-no-server .text-socket-state,
.text-view.is-no-server .pin-bar,
.text-view.is-no-server .typing-indicator {
  display: none !important;
}

.no-server-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 280px;
  padding: 32px 20px;
  text-align: center;
  color: #8b929c;
}

.no-server-empty .btn {
  width: auto;
  min-width: 180px;
}

.voice-core-mark {
  width: 84%;
  height: 84%;
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 0;
}

.voice-core-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .7;
  mix-blend-mode: screen;
  pointer-events: none;
}

#loginOverlay .login-remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 2px 0 10px;
  padding: 4px 0 2px;
  border: 0;
  background: transparent;
  color: #f2f3f5;
  font-weight: 500;
  cursor: pointer;
}

#loginOverlay .login-remember-row.is-locked {
  cursor: default;
}

#loginOverlay .login-remember-row.is-locked input[type="checkbox"] {
  opacity: 1;
  cursor: default;
}

#loginOverlay .auto-login-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid rgba(227, 40, 45, .4);
  border-radius: 9px;
  background: rgba(227, 40, 45, .1);
  color: #edf0f3;
  font-size: 13px;
  font-weight: 600;
}

#loginOverlay .auto-login-bar.hidden {
  display: none;
}

#loginOverlay .auto-login-bar button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: #1a1d22;
  color: #edf0f3;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

#loginOverlay .auto-login-bar button:hover {
  background: #23272e;
}

#loginOverlay .login-remember-row > span {
  flex: 1 1 auto;
  min-width: 0;
}

#loginOverlay .login-remember-row b {
  display: block;
  color: #f2f3f5;
  font-size: 14px;
  font-weight: 600;
}

#loginOverlay .login-remember-row small {
  display: block;
  margin-top: 3px;
  color: #8b929c;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

#loginOverlay .login-remember-row input[type="checkbox"],
#loginOverlay .login-card .login-remember-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 24px;
  min-width: 40px;
  min-height: 24px;
  max-width: 40px;
  max-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #4e5058;
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .12s ease;
}

#loginOverlay .login-remember-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform .12s ease;
}

#loginOverlay .login-remember-row input[type="checkbox"]:checked {
  background: var(--red, #df3438);
}

#loginOverlay .login-remember-row input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}

#loginOverlay .login-remember-row input[type="checkbox"]:focus,
#loginOverlay .login-card .login-remember-row input[type="checkbox"]:focus {
  border: 0;
  box-shadow: 0 0 0 3px rgba(227, 40, 45, .18);
}

#serverHubModal .server-hub-form input.is-invalid {
  border-color: rgba(227, 40, 45, .55);
  box-shadow: 0 0 0 3px rgba(227, 40, 45, .12);
}

#serverHubModal .invite-preview {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(67, 209, 109, .22);
  border-radius: 10px;
  background: rgba(67, 209, 109, .08);
  color: #9be3b0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

#serverHubModal .invite-preview.is-error,
#serverHubModal .server-hub-status.error {
  border: 1px solid rgba(227, 40, 45, .38);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(227, 40, 45, .16), rgba(18, 12, 14, .94));
  color: #ffb4b7;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255, 58, 63, .16);
}

#serverHubModal .server-hub-status {
  flex: 1 1 220px;
  min-height: 40px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(12, 15, 19, .72);
  color: #d7dce3;
  font-size: 13px;
  line-height: 1.4;
}

html.rn-desktop-shell .desktop-app-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: 36px;
  min-height: 36px;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  padding: 0 4px 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: #08090b;
  -webkit-app-region: drag;
}

html.rn-desktop-shell .desktop-app-chrome-drag {
  flex: 1;
  align-self: stretch;
  min-width: 48px;
}

html.rn-desktop-shell .app-shell {
  height: 100%;
  padding-top: 36px;
}

html.rn-desktop-shell .server-rail,
html.rn-desktop-shell .channel-sidebar,
html.rn-desktop-shell .main-panel,
html.rn-desktop-shell .member-panel {
  min-height: 0;
}

html.rn-desktop-shell .content-view.voice-view-v2 {
  height: 100% !important;
  max-height: none !important;
}

html.rn-desktop-shell.rv-login-open .desktop-app-chrome {
  display: none !important;
}

html.rn-desktop-shell.rv-login-open .app-shell {
  padding-top: 0;
}

#voiceSettingsModal .settings-tab-electron {
  display: none !important;
}

html.rn-desktop-shell #voiceSettingsModal .settings-tab-electron {
  display: flex !important;
}

#voiceSettingsModal .settings-hotkey-row-overlay {
  display: none !important;
}

html.rn-desktop-shell #voiceSettingsModal .settings-hotkey-row-overlay {
  display: flex !important;
}

html.rn-desktop-shell .voice-stage-v2 .voice-person.speaking.speaking-raid .person-avatar,
.voice-stage-v2.voice-stage-unified .voice-person.speaking.speaking-raid .person-avatar {
  border-color: rgba(228, 183, 77, .95);
  box-shadow:
    0 0 0 5px rgba(228, 183, 77, .14),
    0 0 0 9px rgba(228, 183, 77, .05),
    0 0 30px rgba(228, 183, 77, .34),
    0 16px 28px rgba(0, 0, 0, .34);
  animation: rn-speaking-pulse-raid 1.8s ease-in-out infinite;
}

html.rn-desktop-shell .voice-stage-v2 .voice-person.speaking.speaking-commander .person-avatar,
.voice-stage-v2.voice-stage-unified .voice-person.speaking.speaking-commander .person-avatar {
  border-color: rgba(88, 101, 242, .95);
  box-shadow:
    0 0 0 5px rgba(88, 101, 242, .16),
    0 0 0 9px rgba(88, 101, 242, .05),
    0 0 30px rgba(88, 101, 242, .34),
    0 16px 28px rgba(0, 0, 0, .34);
  animation: rn-speaking-pulse-commander 1.8s ease-in-out infinite;
}

html.rn-desktop-shell .voice-stage-v2 .voice-person.speaking.speaking-raid .person-state,
.voice-stage-v2.voice-stage-unified .voice-person.speaking.speaking-raid .person-state {
  color: var(--rn-voice-raid, #e4b74d);
}

html.rn-desktop-shell .voice-stage-v2 .voice-person.speaking.speaking-commander .person-state,
.voice-stage-v2.voice-stage-unified .voice-person.speaking.speaking-commander .person-state {
  color: #9aa3ff;
}

html.rn-desktop-shell #serverQuickBrowserNotifyBtn {
  display: none !important;
}

.voice-links,
.voice-stage-unified .voice-links {
  display: none !important;
}

@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  .voice-stage-unified .voice-grid > .voice-person.occupancy-preview {
    z-index: 4;
  }

  .voice-stage-unified .voice-grid > .voice-person:not(.occupancy-preview) {
    z-index: 6;
  }

  .voice-stage-unified .voice-grid > .voice-person.voice-layout-dragging {
    z-index: 20;
  }
}

html:not(.rn-desktop-shell) .settings-desktop-only,
html:not(.rn-desktop-shell) #desktopCloseMenu {
  display: none !important;
}

html.rn-desktop-shell .settings-desktop-only {
  position: relative;
  z-index: 9;
  margin-top: 18px;
}

#settingsAutoTranslateSection {
  position: relative;
  z-index: 1;
  margin-top: 18px;
}

#voiceSettingsModal #settingsAutoTranslateSection .settings-section-title {
  margin-top: 4px;
}

#settingsInterfacePane .locale-dropdown.is-open {
  z-index: 20;
}

html.rn-desktop-shell .desktop-close-menu {
  position: fixed;
  z-index: 240;
  width: min(360px, calc(100vw - 16px));
  padding: 10px 8px 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: #16181c;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  -webkit-app-region: no-drag;
}

html.rn-desktop-shell .desktop-close-menu-title {
  padding: 6px 10px 0;
  color: var(--rn-muted, #828b96);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}

html.rn-desktop-shell .desktop-close-menu-later {
  margin: 0 0 8px;
  padding: 6px 10px 10px;
  border-top: 0;
  color: #8b929c;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
}

html.rn-desktop-shell .desktop-close-menu-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

html.rn-desktop-shell .desktop-close-menu-item:hover,
html.rn-desktop-shell .desktop-close-menu-item:focus-visible {
  background: rgba(255, 255, 255, .06);
}

html.rn-desktop-shell .desktop-close-menu-item strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.3;
}

html.rn-desktop-shell .desktop-close-menu-item span {
  display: block;
  margin-top: 4px;
  color: #7d848e;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
}

html.rn-desktop-shell .desktop-close-ask-row {
  margin: 6px 2px 2px;
  padding: 10px 8px 6px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  align-items: center;
  cursor: pointer;
}

html.rn-desktop-shell .desktop-close-ask-row b {
  display: block;
  color: #ffffff;
  font-size: 14px;
  font-weight: 650;
}

html.rn-desktop-shell .desktop-close-ask-row small {
  display: block;
  margin-top: 3px;
  color: #8b929c;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
}

#settingsCloseActionSection .settings-close-ask-row {
  margin: 8px 0 0;
  padding: 10px 0 2px;
  border-top: 0;
  cursor: pointer;
}

#settingsCloseActionSection .settings-close-ask-row b {
  display: block;
  color: #c6cbd2;
  font-size: 13px;
  font-weight: 600;
}

#settingsCloseActionSection .settings-close-ask-row small {
  display: block;
  margin-top: 2px;
  color: #8b929c;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
}

html.rn-desktop-shell .settings-close-dropdown {
  z-index: 8;
}

#settingsInterfaceResetWrap {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

#settingsInterfaceResetBtn {
  width: 100%;
  min-height: 40px;
  border: 1px solid #543036;
  border-radius: 8px;
  background: #26191c;
  color: #f0d4d6;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

#settingsInterfaceResetBtn:hover,
#settingsInterfaceResetBtn:focus-visible {
  background: #321c20;
}

.interface-reset-modal {
  z-index: 460;
}

#interfaceResetConfirm {
  border: 1px solid #543036;
  background: #26191c;
  color: #f0d4d6;
}

#interfaceResetCancel {
  border: 1px solid #3b424b;
  background: #22262c;
  color: #c8ced6;
}

.voice-stage-v2 .person-avatar .person-device-overlay,
.voice-stage-v2 .participant-media-preview-slot .person-device-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6%;
  border-radius: inherit;
  background: rgba(6, 8, 12, .62);
  pointer-events: none;
}

.voice-stage-v2 .person-avatar .person-device-overlay.unknown,
.voice-stage-v2 .participant-media-preview-slot .person-device-overlay.unknown {
  background: rgba(10, 6, 8, .7);
}

.voice-stage-v2 .person-device-overlay svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: #ff5d65;
  color: #ff5d65;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
}

.voice-stage-v2 .person-device-overlay.both svg {
  width: 34%;
  height: 34%;
}

.voice-stage-v2 .person-device-overlay svg .slash {
  stroke-width: 2.15;
}

.voice-stage-v2 .person-media-badges:empty {
  display: none;
}

.voice-layout-tools {
  display: none !important;
}

.ss-perm-scope {
  margin: 12px 0 6px;
  color: #8b929c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.voice-stage-v2 .person-avatar .person-device-overlay.no-speak,
.voice-stage-v2 .participant-media-preview-slot .person-device-overlay.no-speak {
  background: rgba(12, 8, 10, .72);
}

.voice-stage-v2 .person-device-overlay.no-speak svg {
  width: 42%;
  height: 42%;
}

.ss-role-hint {
  margin: 8px 0 0;
  color: var(--rn-muted, #828b96);
  font-size: 12px;
  line-height: 1.4;
}

:is(#serverSettingsModal, #channelSettingsModal, #voiceSettingsModal) .ss-perm-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 24px;
  min-width: 40px;
  min-height: 24px;
  max-width: 40px;
  max-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #4e5058;
  box-shadow: none;
  color: transparent;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

:is(#serverSettingsModal, #channelSettingsModal, #voiceSettingsModal) .ss-perm-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform .12s ease;
}

:is(#serverSettingsModal, #channelSettingsModal, #voiceSettingsModal) .ss-perm-row input[type="checkbox"]:checked {
  background: var(--rn-red, #e3282d);
}

:is(#serverSettingsModal, #channelSettingsModal, #voiceSettingsModal) .ss-perm-row input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}

:is(#serverSettingsModal, #channelSettingsModal, #voiceSettingsModal) .ss-perm-row input[type="checkbox"]:focus {
  outline: none;
  box-shadow: none;
}

:is(#serverSettingsModal, #channelSettingsModal, #voiceSettingsModal) .ss-perm-row input[type="checkbox"]:disabled {
  opacity: .45;
  cursor: not-allowed;
}

#ssOwnerPane .ss-owner-editor {
  max-width: 560px;
}

#ssOwnerPane .ss-role-tabs {
  margin-bottom: 16px;
}

#ssOwnerPane .role-editor-actions {
  margin-top: 16px;
}

#ssOwnerTransferPane #ownershipSection,
#ssOwnerTransferPane #deleteServerSection,
#ssOwnerTransferPane #protectedServerDeleteNote {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

#ssOwnerTransferPane #ownershipSection .server-actions-section-title {
  display: none;
}

#ssOwnerTransferPane #ownershipSection p {
  margin: 0 0 12px;
  color: #b5bac1;
  font-size: 13px;
  line-height: 1.4;
}

@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  .voice-stage-unified .voice-grid,
  .voice-stage-unified .voice-grid.occupancy-preview-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(154px, 168px)) !important;
    justify-content: start !important;
    align-content: start !important;
    align-items: start !important;
    gap: 8px 16px !important;
    overflow: auto !important;
  }

  .voice-stage-unified .voice-grid > .voice-person,
  .voice-stage-unified .voice-grid.occupancy-preview-grid > .voice-person {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    cursor: default !important;
    touch-action: auto;
  }

  .voice-stage-unified .voice-grid > .voice-person:last-child,
  .voice-stage-unified .voice-grid.occupancy-preview-grid > .voice-person:last-child {
    grid-column: auto !important;
    justify-self: stretch !important;
    width: auto !important;
  }
}

.member-moderation-modal.voice-settings-modal {
  z-index: 460;
}

.member-moderation-modal .member-moderation-card {
  width: min(440px, 96vw);
}

.member-moderation-modal .voice-settings-header {
  margin: 0 0 14px;
}

.member-moderation-modal .voice-settings-header h2 {
  margin: 2px 0 0;
  color: #f2f3f5;
  font-size: 18px;
  font-weight: 700;
}

.member-moderation-modal .voice-settings-header p {
  margin: 4px 0 0;
  color: #949ba4;
  font-size: 13px;
}

.member-moderation-body {
  display: grid;
  gap: 12px;
}

.member-moderation-nick-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.member-moderation-modal .member-moderation-nick-input,
.member-moderation-modal textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  outline: none;
  background: #0e1014;
  color: #edf0f3;
  font: inherit;
}

.member-moderation-modal textarea {
  min-height: 84px;
  resize: vertical;
}

.member-moderation-modal .member-moderation-nick-input:focus,
.member-moderation-modal textarea:focus {
  border-color: rgba(227, 40, 45, .55);
}

.member-moderation-modal .member-moderation-warning {
  margin: 0;
  color: #8b939e;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
}

.member-moderation-modal .member-moderation-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.member-moderation-modal .moderation-nick-btn,
.member-moderation-modal .moderation-kick-btn,
.member-moderation-modal .moderation-ban-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.member-moderation-modal .moderation-nick-btn {
  border: 0;
  background: var(--rn-red, #e3282d);
  color: #fff;
}

.member-moderation-modal .moderation-nick-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.member-moderation-modal .moderation-kick-btn {
  border: 1px solid rgba(227, 40, 45, .45);
  background: transparent;
  color: #ff8a8d;
}

.member-moderation-modal .moderation-kick-btn:hover:not(:disabled) {
  background: rgba(227, 40, 45, .12);
}

.member-moderation-modal .moderation-ban-btn {
  border: 0;
  background: var(--rn-red, #e3282d);
  color: #fff;
}

.member-moderation-modal .moderation-ban-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.member-moderation-modal .member-moderation-status {
  min-height: 18px;
  color: #85cb96;
  font-size: 12px;
  font-weight: 600;
}

.member-moderation-modal .member-moderation-status.error {
  color: #ff8a8d;
}

.notification-toast-container {
  top: 12px;
  right: 12px;
  width: min(320px, calc(100vw - 24px));
  gap: 8px;
  z-index: 540;
}

.notification-toast {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 42%),
    #121417;
  color: var(--rn-text, #f3f5f7);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
}

.notification-toast:hover {
  border-color: rgba(255, 255, 255, .14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 42%),
    #161a1f;
}

.notification-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(227, 40, 45, .14);
  color: #ff7a7e;
  font-size: 0;
}

.notification-toast-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-toast-body {
  gap: 3px;
  justify-content: center;
}

.notification-toast-body strong {
  color: #f2f3f5;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .01em;
}

.notification-toast-body span {
  color: #8b939e;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
}

.quick-action-toast.error {
  border-color: rgba(227, 40, 45, .45);
}

.quick-action-toast.error .notification-toast-icon {
  background: rgba(227, 40, 45, .22);
  color: #ff8a8d;
}

@media (hover: none) and (pointer: coarse) {
  .notification-toast-container {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: calc(100vw - 20px - env(safe-area-inset-right, 0px));
  }
}

.voice-person.voice-member-selected,
.sidebar-user.voice-member-selected {
  outline: 2px solid #5b8def;
  outline-offset: 1px;
  background: rgba(88, 101, 242, 0.18);
}

.voice-member-dragging {
  opacity: 0.55;
}

.channel.voice-drop-target,
#voiceStage.voice-drop-target,
.voice-stage.voice-drop-target {
  outline: 2px dashed #5b8def;
  outline-offset: -4px;
  background: rgba(88, 101, 242, 0.16);
}

.voice-marquee {
  position: fixed;
  z-index: 80;
  border: 1px solid rgba(88, 101, 242, 0.9);
  background: rgba(88, 101, 242, 0.18);
  pointer-events: none;
}

.sidebar-user.voice-hard-muted .sidebar-user-name,
.voice-person[data-hard-muted="1"] .person-name {
  opacity: 0.72;
}

.voice-selecting,
.voice-selecting * {
  user-select: none;
  cursor: grabbing;
}

.voice-drag-ghost {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #5b8def;
  background: #1b1f26;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transform: translate(10px, -28px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}

.voice-member-target {
  user-select: none;
  -webkit-user-drag: none;
}

.quick-context-menu.message-context-menu {
  width: min(300px, calc(100vw - 16px));
  max-height: min(70vh, 420px);
}

.quick-context-menu.message-context-menu .quick-context-item-label strong {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.25;
}

/* Channel manager — same surface as the create-channel dialog */
#channelsModal {
  z-index: 360;
  background: rgba(3, 4, 6, .84);
  backdrop-filter: blur(9px);
}

#channelsModal .channels-modal-card {
  width: min(760px, 96vw);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 15px;
  background: #14171c;
  box-shadow: 0 30px 110px rgba(0, 0, 0, .64);
}

#channelsModal .channels-modal-eyebrow {
  color: var(--rn-red, #e3282d);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

#channelsModal .channels-modal-header {
  border-bottom-color: rgba(255, 255, 255, .06);
}

#channelsModal .channels-modal-header h2 {
  color: #f4f6f8;
  font-size: 22px;
  letter-spacing: -.02em;
}

#channelsModal .channels-manager-toolbar {
  align-items: center;
}

#channelsModal .channels-manager-toolbar strong {
  color: #c5ccd4;
  font-size: 11px;
  letter-spacing: .08em;
}

#channelsModal .channels-manager-toolbar span {
  color: #8b939e;
  font-size: 12px;
}

#channelsModal .channel-add-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

#channelsModal .channel-layout-manager {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: start;
  justify-content: flex-start;
  gap: 9px;
  min-height: 0;
  max-height: min(61vh, 650px);
  overflow: auto;
}

#channelsModal .channel-category-card {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: auto;
  min-height: min-content;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  background: #1a1d22;
}

#channelsModal .channel-category-dropzone {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  height: auto;
  min-height: 49px;
  overflow: visible;
}

#channelsModal .channel-manager-row {
  position: relative;
  flex: 0 0 auto;
  height: auto;
  min-height: 48px;
}

#channelsModal .channel-category-manager-header {
  border-bottom-color: rgba(255, 255, 255, .06);
  background: transparent;
}

#channelsModal .channel-category-manager-title strong {
  color: #edf0f3;
  font-size: 13px;
  letter-spacing: .04em;
}

#channelsModal .category-add-channel-btn,
#channelsModal .category-action-btn,
#channelsModal .channel-manager-action {
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #111419;
  color: #d7dde4;
  font-size: 12px;
}

#channelsModal .category-add-channel-btn:hover,
#channelsModal .category-action-btn:hover,
#channelsModal .channel-manager-action:hover:not(:disabled) {
  border-color: rgba(227, 40, 45, .45);
  background: rgba(227, 40, 45, .12);
  color: #fff;
}

#channelsModal .channel-manager-action.danger:not(:disabled),
#channelsModal .category-action-btn.danger {
  border-color: rgba(227, 40, 45, .35);
  color: #ff8d90;
}

#channelsModal .channel-manager-row:hover {
  background: rgba(255, 255, 255, .03);
}

#channelsModal .channel-manager-name {
  font-size: 13px;
}

#channelsModal .channels-manager-hint {
  border-color: rgba(227, 40, 45, .22);
  background: rgba(227, 40, 45, .08);
  color: #d7c4c6;
  font-size: 12px;
}

.rn-text-dialog {
  z-index: 520;
}

.rn-text-dialog-lead {
  margin: 0 0 14px;
  color: #c5ccd4;
  font-size: 13px;
  line-height: 1.45;
}

#rnTextDialogInput {
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  background: #0e1014;
  color: #edf0f3;
  font-size: 14px;
}

#rnTextDialogInput:focus {
  border-color: rgba(227, 40, 45, .55);
  outline: none;
}

#rnTextDialogConfirm.danger {
  border-color: rgba(255, 90, 94, .7);
}

.server-avatar-wrap.user-profile-avatar-wrap {
  margin-top: 0;
}

.server-avatar-editor {
  display: flex;
  align-items: center;
  gap: 14px;
}

.server-icon.has-server-avatar .server-avatar-image,
.user-profile-server-icon.has-server-avatar .server-avatar-image,
.server-settings-avatar.has-server-avatar .server-avatar-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
  -webkit-user-drag: none;
}

.server-icon.has-server-avatar .server-icon-text,
.user-profile-server-icon.has-server-avatar {
  color: transparent;
}

.user-profile-server-icon {
  position: relative;
  overflow: hidden;
}

.server-settings-avatar.has-server-avatar {
  overflow: hidden;
  color: transparent;
}

.server-vanity-note {
  margin: 0 0 10px;
  color: #b7bec7;
  font-size: 13px;
  line-height: 1.45;
}

.server-vanity-field {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin-bottom: 10px;
  border: 1px solid #3a3f48;
  border-radius: 8px;
  background: #121418;
  overflow: hidden;
}

.server-vanity-prefix {
  flex: 0 0 auto;
  padding: 0 0 0 12px;
  color: #8b949e;
  font-size: 13px;
  white-space: nowrap;
}

.server-vanity-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border: 0;
  background: transparent;
  color: #f2f4f7;
  font: inherit;
  font-size: 14px;
}

.server-vanity-field input:focus {
  outline: none;
}

.server-vanity-url {
  width: 100%;
  margin-top: 8px;
}

.server-vanity-url.hidden {
  display: none;
}

#voiceSettingsModal .app-sound-master {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 10px;
  background: #1e1f22;
}

#voiceSettingsModal .app-sound-master-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#voiceSettingsModal .app-sound-master-copy strong {
  color: #f2f3f5;
  font-size: 14px;
  font-weight: 650;
}

#voiceSettingsModal .app-sound-master-copy span {
  color: #949ba4;
  font-size: 12px;
  line-height: 1.4;
}

#voiceSettingsModal .app-sound-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
}

#voiceSettingsModal .app-sound-switch input {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#voiceSettingsModal .app-sound-switch-ui {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #111214;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

#voiceSettingsModal .app-sound-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}

#voiceSettingsModal .app-sound-switch input:checked + .app-sound-switch-ui {
  background: var(--rn-red, #e3282d);
}

#voiceSettingsModal .app-sound-switch input:checked + .app-sound-switch-ui::after {
  transform: translateX(18px);
}

#voiceSettingsModal .app-sound-switch input:focus-visible + .app-sound-switch-ui {
  outline: 2px solid rgba(227, 40, 45, .7);
  outline-offset: 2px;
}

#voiceSettingsModal .app-sound-row {
  display: grid;
  grid-template-columns: auto minmax(140px, 1.3fr) minmax(96px, 1fr) 42px 32px;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #1e1f22;
}

#voiceSettingsModal .app-sound-name {
  min-width: 0;
  color: #f2f3f5;
  font-size: 13px;
  font-weight: 600;
}

#voiceSettingsModal .app-sound-volume {
  width: 100%;
  margin: 0;
}

#voiceSettingsModal .app-sound-volume-value {
  color: #b5bac1;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#voiceSettingsModal .app-sound-preview {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #2b2d31;
  color: #dbdee1;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

#voiceSettingsModal .app-sound-preview:hover,
#voiceSettingsModal .app-sound-preview:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

#voiceSettingsModal #settingsAppSoundsPane.is-all-off .app-sound-row {
  opacity: .5;
}

#voiceSettingsModal .app-sound-row.is-off .app-sound-name,
#voiceSettingsModal .app-sound-row.is-off .app-sound-volume,
#voiceSettingsModal .app-sound-row.is-off .app-sound-volume-value {
  opacity: .55;
}

#voiceSettingsModal #settingsAppSoundsPane .settings-section-title {
  margin: 18px 0 8px;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  #voiceSettingsModal .app-sound-row {
    grid-template-columns: auto minmax(0, 1fr) 32px;
  }

  #voiceSettingsModal .app-sound-volume {
    grid-column: 2;
  }

  #voiceSettingsModal .app-sound-volume-value {
    grid-column: 2;
    text-align: left;
  }
}

html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  letter-spacing: 0;
}

html[dir="rtl"] .login-window-chrome,
html[dir="rtl"] .desktop-app-chrome,
html[dir="rtl"] .desktop-win-controls,
html[dir="rtl"] .locale-dropdown {
  direction: ltr;
}

html[dir="rtl"] .locale-dropdown:not(.settings-locale-switch) .locale-dropdown-menu {
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
}

html[dir="rtl"] .locale-dropdown:not(.settings-locale-switch) .locale-dropdown-menu [data-locale],
html[dir="rtl"] .locale-dropdown:not(.settings-locale-switch) .locale-dropdown-menu [data-close-action] {
  width: auto;
  min-width: 100%;
  box-sizing: border-box;
}

/* ===== rednexus-design-v63.css ===== */
/*
  REDNexus Design System — D63 / mobile server switcher
*/

.mobile-server-switcher-overlay {
  position: fixed;
  z-index: 360;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mobile-server-switcher-sheet {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(78dvh, 640px);
  display: flex;
  flex-direction: column;
  border: 1px solid #333840;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: #191c21;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .5);
}

.mobile-server-switcher-sheet .mobile-members-header {
  min-height: 0;
  padding: 16px 14px 12px;
}

.mobile-server-switcher-sheet .mobile-members-subtitle {
  max-width: 42ch;
  line-height: 1.4;
}

.mobile-server-switcher-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 4px 10px 8px;
  -webkit-overflow-scrolling: touch;
}

.mobile-server-switcher-item {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: start;
}

.mobile-server-switcher-item:hover,
.mobile-server-switcher-item:focus-visible,
.mobile-server-switcher-item.active {
  border-color: #373d46;
  background: #22262c;
}

.mobile-server-switcher-item.active {
  border-color: #603238;
  background: rgba(145, 44, 51, .12);
}

.mobile-server-switcher-item.notifications-muted {
  opacity: .55;
}

.mobile-server-switcher-icon {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
  background: #2b2f36;
  color: #eef0f3;
  font-size: 11px;
  font-weight: 900;
}

.mobile-server-switcher-icon .server-icon-text {
  max-width: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-server-switcher-icon.has-server-avatar .server-avatar-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}

.mobile-server-switcher-icon.has-server-avatar .server-icon-text {
  color: transparent;
}

.mobile-server-switcher-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-server-switcher-name {
  overflow: hidden;
  color: #e8ebef;
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-server-switcher-meta {
  overflow: hidden;
  color: #8b939e;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-server-switcher-side {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mobile-server-switcher-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #555b66;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.mobile-server-switcher-badge.mention {
  background: #d6383e;
}

.mobile-server-switcher-current {
  color: #f0f2f4;
  font-size: 14px;
  font-weight: 800;
}

.mobile-server-switcher-footer {
  flex: 0 0 auto;
  padding: 8px 12px max(14px, env(safe-area-inset-bottom));
}

.mobile-server-switcher-footer .btn {
  width: 100%;
}

#settingsVoiceRelaySection {
  margin-top: 22px;
}

.settings-voice-relay-actions {
  justify-content: flex-start;
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

.settings-voice-relay-actions button:disabled {
  opacity: .45;
  cursor: default;
}

/* Mic / deafen / camera stay reachable while a text channel or DM is open. */
.channel-sidebar > .voice-control-dock.voice-dock-parked {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: calc(100% - 16px) !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 8px 8px !important;
  padding: 6px !important;
  z-index: 6 !important;
  flex: 0 0 auto;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.channel-sidebar > .voice-control-dock.voice-dock-parked .voice-media-actions.voice-unified-actions,
body > .voice-control-dock.voice-dock-parked .voice-media-actions.voice-unified-actions {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: none !important;
  gap: 4px !important;
}

.channel-sidebar > .voice-control-dock.voice-dock-parked .voice-media-btn.voice-icon-btn,
body > .voice-control-dock.voice-dock-parked .voice-media-btn.voice-icon-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  body > .voice-control-dock.voice-dock-parked {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 60 !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }
}

#settingsVoiceRelaySection {
  margin-top: 22px;
}

.settings-voice-relay-actions {
  justify-content: flex-start;
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

.settings-voice-relay-actions button:disabled {
  opacity: .45;
  cursor: default;
}

/*
  Desktop Safari grows 100vh/100dvh past the visible window after the tab
  has been open for a while, so the voice buttons slide under the macOS Dock.
  Size the shell from the measured visual viewport and let the hall fill it.
*/
@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  html:not(.rn-desktop-shell),
  html:not(.rn-desktop-shell) body,
  html:not(.rn-desktop-shell) .app-shell {
    height: var(--rv-vv-height, 100dvh);
    max-height: var(--rv-vv-height, 100dvh);
  }

  html:not(.rn-desktop-shell) .content-view.voice-view-v2 {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }
}

.win-install {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 4, 6, .72);
}

.win-install-card {
  width: min(420px, 100%);
  padding: 22px 22px 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: #12151a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

.win-install-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.win-install-card p {
  margin: 0 0 16px;
  color: #9aa3ad;
  line-height: 1.45;
}

.win-install-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.win-install-later {
  border: 0;
  background: transparent;
  color: #9aa3ad;
  font: inherit;
  cursor: pointer;
  padding: 8px 12px;
}

.win-install-later:hover { color: #fff; }

html.rn-desktop-shell .win-install { display: none !important; }

@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  .composer-media-wrap {
    display: grid;
    place-items: center;
  }

  .composer-tool-desktop {
    display: none !important;
  }

  .composer-main-row {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
  }

  .composer-send-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #e3282d;
    color: #fff;
    cursor: pointer;
  }

  .composer-send-btn:hover:not(:disabled),
  .composer-send-btn:focus-visible {
    background: #c92228;
  }

  .composer-send-btn:disabled {
    opacity: .38;
    cursor: default;
  }
}

.quick-context-volume {
  display: grid;
  gap: 6px;
  padding: 8px 8px 10px;
}

.quick-context-volume-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #c8ced6;
  font-size: 12px;
  font-weight: 650;
}

.quick-context-volume input[type="range"] {
  width: 100%;
  accent-color: #e3282d;
}

.quick-context-volume-mute {
  border: 0;
  background: transparent;
  color: #9aa3ad;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.quick-context-volume-mute.active {
  color: #ff8d90;
}

.rn-confirm {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 4, 6, .72);
}

.rn-confirm-card {
  width: min(420px, 100%);
  padding: 20px 20px 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: #12151a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

.rn-confirm-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.rn-confirm-card p {
  margin: 0 0 16px;
  color: #c8ced6;
  line-height: 1.45;
}

.rn-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.rn-confirm-cancel,
.rn-confirm-ok {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}

.rn-confirm-cancel {
  border: 1px solid rgba(255, 255, 255, .12);
  background: transparent;
  color: #e8ecf0;
}

.rn-confirm-ok {
  border: 0;
  background: #e3282d;
  color: #fff;
}

.rn-confirm-ok:hover,
.rn-confirm-ok:focus-visible {
  background: #c92228;
}

.voice-poke-card {
  width: min(440px, 96vw);
}

.voice-poke-body {
  padding: 4px 18px 18px;
}

.voice-poke-body textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
}

.voice-poke-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  color: #8b939e;
  font-size: 12px;
}

.voice-poke-stack {
  position: fixed;
  z-index: 960;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  pointer-events: none;
}

.voice-poke-card-incoming {
  pointer-events: auto;
  padding: 14px 14px 12px;
  border: 1px solid #5a3034;
  border-radius: 14px;
  background: #191c21;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.voice-poke-incoming-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.voice-poke-incoming-head span {
  color: #e3282d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.voice-poke-incoming-head strong {
  color: #fff;
  font-size: 15px;
}

.voice-poke-card-incoming p {
  margin: 8px 0 12px;
  color: #e8ecf0;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.voice-poke-card-incoming p.is-empty {
  color: #8b939e;
}

.voice-poke-incoming-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .voice-poke-stack {
    right: 8px;
    left: 8px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
  }
}

.person-media-badge.live,
.voice-stage-v2 .person-media-badge.live {
  padding: 0 6px;
  border-color: #e3282d;
  background: #e3282d;
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
}

.participant-media-actions.has-live-stream {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.participant-media-action.watch-stream {
  border-color: rgba(227,40,45,.6);
  background: rgba(227,40,45,.9);
  color: #fff;
}

.participant-media-action.watch-stream:hover {
  background: #e3282d;
}