: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); }

.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: smooth;
}

.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 системная клавиатура + панель браузера оставляют
  очень мало вертикального места. В этом режиме ReDVoice превращает 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 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px;
}

.server-hub-form {
  min-width: 0;
  padding: 12px;
  border: 1px solid #2f343c;
  border-radius: 10px;
  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 ReDVoice 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:58px;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-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.32 — REDNexus public rebrand. Legacy redvoice-* technical keys remain intentionally compatible. */