:root {
  --bg: #050611;
  --bg-2: #080a18;
  --panel: rgba(16, 19, 43, 0.78);
  --panel-2: rgba(25, 29, 65, 0.68);
  --panel-solid: #11142c;
  --border: rgba(145, 114, 255, 0.28);
  --border-soft: rgba(255, 255, 255, 0.075);
  --text: #f4f5ff;
  --muted: #a8abc9;
  --faint: #6f7394;
  --accent: #8b5cf6;
  --accent-2: #2dd4bf;
  --accent-3: #c084fc;
  --danger: #fb7185;
  --warn: #fbbf24;
  --ok: #34d399;
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.48);
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 13px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(91, 33, 182, 0.28), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(45, 212, 191, 0.11), transparent 27%),
    linear-gradient(135deg, var(--bg), #070818 55%, #090b1f);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 0.9rem; line-height: 1.45; margin: 0; }

.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.26;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}
.bg-orb {
  position: fixed;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(22px);
  opacity: 0.55;
}
.orb-a { width: 390px; height: 390px; left: -130px; top: -110px; background: rgba(139, 92, 246, 0.38); }
.orb-b { width: 330px; height: 330px; right: -130px; bottom: -120px; background: rgba(45, 212, 191, 0.13); }
.orb-c { width: 270px; height: 270px; left: 42%; bottom: -160px; background: rgba(192, 132, 252, 0.18); }

.auth-shell {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-card {
  width: min(480px, 100%);
  padding: 30px;
  background: linear-gradient(180deg, rgba(18, 22, 51, 0.94), rgba(9, 11, 28, 0.94));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(18px);
}
.auth-kicker, .channel-kicker, .info-kicker {
  color: var(--accent-2);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: .72rem;
  text-shadow: 0 0 18px rgba(45, 212, 191, .45);
}
h1 { margin: 10px 0 8px; font-size: clamp(2rem, 5vw, 2.65rem); line-height: 1; }
h2, h3 { margin-top: 0; }

.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 24px 0; }
.tab, .ghost, .primary, .admin-tab, .channel-create button, .emoji-strip button, .composer button {
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.045);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 13px;
  cursor: pointer;
  font-weight: 750;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}
.tab:hover, .ghost:hover, .admin-tab:hover, .emoji-strip button:hover { border-color: rgba(45, 212, 191, .35); background: rgba(255,255,255,0.07); }
.tab.active, .admin-tab.active { background: rgba(139, 92, 246, 0.24); border-color: rgba(139, 92, 246, 0.72); }
button:disabled { opacity: .45; cursor: not-allowed; }
.primary { background: linear-gradient(135deg, var(--accent), #5b21b6); border-color: rgba(255,255,255,0.16); font-weight: 900; }
.primary:hover, .composer button:hover, .channel-create button:hover { transform: translateY(-1px); }
.ghost { color: var(--muted); padding: 9px 12px; }
.ghost.mini { padding: 7px 10px; font-size: .82rem; }
.danger-ghost:hover { color: var(--danger); border-color: rgba(251,113,133,.35); }

.panel { display: none; }
.panel.active { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 0.9rem; }
input, select, textarea {
  width: 100%;
  background: rgba(3, 4, 11, 0.62);
  border: 1px solid rgba(157, 164, 199, 0.19);
  color: var(--text);
  border-radius: 15px;
  padding: 13px 14px;
  outline: none;
}
textarea { resize: none; min-height: 48px; max-height: 150px; line-height: 1.42; }
select option { background: #11142c; color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1); }
.message-box { min-height: 20px; margin-top: 16px; color: var(--muted); white-space: pre-wrap; font-size: 0.92rem; }
.message-box.error { color: var(--danger); }
.message-box.ok { color: var(--ok); }

.app-shell {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 310px;
  gap: 14px;
  padding: 14px;
}
.channel-sidebar, .chat-panel, .info-panel > .info-card {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.channel-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  min-width: 0;
  overflow: hidden;
}
.brand-panel { display: flex; align-items: center; gap: 12px; padding: 4px 2px 10px; }
.brand-symbol {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 16px;
  color: #04110f;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  box-shadow: 0 0 35px rgba(45, 212, 191, .24);
}
.brand-name { font-weight: 950; letter-spacing: .02em; }
.brand-sub { color: var(--faint); font-size: .78rem; }
.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 19px;
}
.avatar {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--text);
  font-weight: 900;
  background: radial-gradient(circle at 25% 20%, rgba(45,212,191,.4), transparent 35%), linear-gradient(135deg, #2a1d68, #11142c);
  border: 1px solid rgba(255,255,255,.09);
}
.user-card-main { min-width: 0; flex: 1; }
.user-name { font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 18px var(--ok); }
.side-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.side-actions .ghost { padding: 9px 8px; font-size: .82rem; }
.channels-section { min-height: 0; display: flex; flex-direction: column; flex: 1; }
.section-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 850; margin: 4px 0 10px; }
.section-head.compact { margin-top: 0; }
.channels-list { display: grid; gap: 8px; overflow-y: auto; padding-right: 2px; }
.channel-btn {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
  display: grid;
  gap: 4px;
}
.channel-btn:hover, .channel-btn.active { color: var(--text); background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, .28); }
.channel-btn .channel-name { font-weight: 850; }
.channel-btn .channel-sub { color: var(--faint); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty-inline { padding: 12px 6px; font-size: .9rem; }
.channel-create { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.channel-create input { padding: 11px 12px; font-size: .9rem; }
.channel-create button { background: rgba(45, 212, 191, .1); border-color: rgba(45, 212, 191, .22); color: var(--accent-2); }

.chat-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.chat-header { padding: 18px 22px; border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.chat-title-block { min-width: 0; }
.chat-header h2 { margin: 5px 0 4px; font-size: clamp(1.35rem, 2vw, 2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.socket-pill { color: var(--muted); border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); padding: 8px 11px; border-radius: 999px; font-size: 0.82rem; white-space: nowrap; }
.socket-pill.online { color: var(--ok); border-color: rgba(52, 211, 153, .35); box-shadow: 0 0 20px rgba(52, 211, 153, .08); }
.socket-pill.error { color: var(--danger); border-color: rgba(251,113,133,.35); }
.messages {
  padding: 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
.empty-state { color: var(--muted); text-align: center; margin: auto; line-height: 1.45; }
.empty-state.small { margin: 0; text-align: left; font-size: .92rem; }
.msg {
  max-width: 900px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.065);
  background: rgba(255,255,255,0.043);
  border-radius: 18px;
  animation: msg-in .16s ease-out;
}
.msg.own { margin-left: auto; background: rgba(139, 92, 246, 0.105); border-color: rgba(139, 92, 246, .22); }
@keyframes msg-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.msg-avatar { width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; font-weight: 950; background: linear-gradient(135deg, rgba(139,92,246,.58), rgba(45,212,191,.24)); border: 1px solid rgba(255,255,255,.08); }
.msg-main { min-width: 0; }
.msg-meta { color: var(--muted); font-size: 0.78rem; margin-bottom: 5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.msg-author { color: var(--text); font-weight: 850; }
.msg-content { white-space: pre-wrap; word-break: break-word; line-height: 1.48; }
.composer-wrap { border-top: 1px solid var(--border-soft); padding: 12px 14px 14px; background: rgba(0,0,0,.08); }
.emoji-strip { display: flex; gap: 8px; margin-bottom: 9px; overflow-x: auto; }
.emoji-strip button { padding: 7px 10px; min-width: 42px; background: rgba(255,255,255,.035); }
.composer { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 10px; align-items: end; }
.composer button { min-height: 48px; background: linear-gradient(135deg, var(--accent-2), #0f766e); color: #03110f; font-weight: 1000; }
.composer button:disabled, textarea:disabled { opacity: .45; cursor: not-allowed; }

.info-panel { min-width: 0; display: grid; gap: 14px; align-content: start; overflow-y: auto; }
.info-card { padding: 17px; }
.glow-card { border-color: rgba(45,212,191,.18) !important; background: linear-gradient(180deg, rgba(45,212,191,.085), rgba(16,19,43,.72)) !important; }
.info-card h3 { margin: 7px 0 8px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.stats-grid div { padding: 12px; border-radius: 16px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.06); }
.stats-grid strong { display: block; font-size: 1.4rem; }
.stats-grid span { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; }
.box-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; }
.box-head.slim h3 { margin: 0; }
.people-list { display: grid; gap: 9px; }
.person-row { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05); }
.person-row .avatar { width: 32px; height: 32px; border-radius: 12px; font-size: .8rem; }
.person-row strong { display: block; font-size: .92rem; }
.person-row small { color: var(--faint); }
.rules-list { color: var(--muted); padding-left: 18px; margin-bottom: 0; line-height: 1.55; }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(10px); }
.modal-card { position: relative; width: min(1120px, 100%); max-height: min(900px, calc(100vh - 36px)); overflow: auto; background: linear-gradient(180deg, rgba(18, 22, 51, 0.98), rgba(8, 10, 24, 0.98)); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.admin-card { padding: 22px; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; border-bottom: 1px solid var(--border-soft); padding-bottom: 18px; }
.modal-header h2 { margin: 6px 0 4px; }
.modal-header p { margin: 0; }
.admin-tabs { display: flex; gap: 10px; margin: 18px 0; flex-wrap: wrap; }
.admin-tab { min-width: 150px; }
.admin-panel { display: none; }
.admin-panel.active { display: grid; gap: 16px; }
.admin-grid { display: grid; gap: 16px; }
.two-cols { grid-template-columns: minmax(260px, 390px) 1fr; }
.admin-box { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.075); border-radius: 20px; padding: 16px; }
.form-box { display: grid; gap: 13px; }
.admin-box h3 { margin-bottom: 8px; }
.admin-list { display: grid; gap: 10px; }
.admin-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 13px; border-radius: 16px; background: rgba(3, 4, 11, 0.32); border: 1px solid rgba(255,255,255,0.055); }
.row-title { font-weight: 850; margin-bottom: 5px; }
.row-sub { color: var(--muted); font-size: .84rem; margin-top: 3px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.token-line { margin-top: 8px; color: var(--accent-2); background: rgba(45, 212, 191, .08); border: 1px solid rgba(45, 212, 191, .18); border-radius: 12px; padding: 9px 10px; font-size: .86rem; word-break: break-all; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(157, 164, 199, .22); color: var(--muted); padding: 3px 8px; font-size: .72rem; vertical-align: middle; margin-left: 6px; }
.badge.ok { color: var(--ok); border-color: rgba(52,211,153,.35); }
.badge.warn { color: var(--warn); border-color: rgba(251,191,36,.35); }
.badge.bad { color: var(--danger); border-color: rgba(251,113,133,.35); }
.latest-box { min-height: 180px; }
.latest-invite { display: grid; gap: 12px; }
.code-line { display: block; color: var(--accent-2); border: 1px solid rgba(45, 212, 191, .18); background: rgba(0,0,0,.18); border-radius: 12px; padding: 10px; word-break: break-all; }

@media (max-width: 1180px) {
  body { overflow: auto; }
  .app-shell { min-height: 100%; height: auto; grid-template-columns: 280px minmax(0, 1fr); }
  .info-panel { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; padding: 10px; }
  .channel-sidebar { order: 1; }
  .chat-panel { order: 2; min-height: 72vh; }
  .info-panel { order: 3; grid-template-columns: 1fr; }
  .side-actions { grid-template-columns: repeat(3, 1fr); }
  .chat-header { align-items: flex-start; flex-direction: column; }
  .chat-header-actions { width: 100%; justify-content: space-between; }
  .two-cols { grid-template-columns: 1fr; }
  .admin-row { grid-template-columns: 1fr; }
  .row-actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .auth-shell { padding: 14px; }
  .auth-card { padding: 22px; border-radius: 22px; }
  .tabs { grid-template-columns: 1fr; }
  .composer { grid-template-columns: 1fr; }
  .msg { grid-template-columns: 36px minmax(0, 1fr); padding: 10px; }
  .msg-avatar { width: 36px; height: 36px; border-radius: 13px; }
  .modal { padding: 8px; }
  .admin-card { padding: 16px; }
  .modal-header { flex-direction: column; }
  .admin-tab { width: 100%; }
}


/* NOX PWA v0.4 */
html { background: #070817; }
body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
.install-shortcut { text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.install-body {
  min-height: 100%; height: auto; overflow: auto; display: grid; place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.install-card {
  position: relative; z-index: 1; width: min(840px, 100%); border: 1px solid rgba(145, 114, 255, 0.34);
  border-radius: 30px; background: linear-gradient(145deg, rgba(18, 19, 47, .94), rgba(7, 8, 23, .96));
  box-shadow: var(--shadow); padding: clamp(20px, 4vw, 34px); overflow: hidden;
}
.install-card::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background: radial-gradient(circle at 18% 0%, rgba(45,212,191,.16), transparent 30%), radial-gradient(circle at 88% 10%, rgba(139,92,246,.22), transparent 34%);
}
.install-hero, .install-actions, .install-grid, .install-note { position: relative; z-index: 1; }
.install-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.install-icon { width: 72px; height: 72px; border-radius: 22px; box-shadow: 0 0 34px rgba(45, 212, 191, .22); }
.install-hero h1 { font-size: clamp(2.2rem, 7vw, 4rem); }
.install-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.install-actions a, .install-actions button { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.install-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.install-box { border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.045); border-radius: 22px; padding: 18px; }
.install-box h2 { margin-bottom: 10px; font-size: 1.05rem; }
.install-box ol { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.65; }
.install-note { color: var(--faint); line-height: 1.55; margin: 22px 0 0; }

@media (max-width: 920px) {
  input, textarea, button, select { font-size: 16px; }
  .app-shell {
    grid-template-columns: 1fr;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .channel-sidebar { max-height: none; }
  .chat-panel { min-height: 68vh; }
  .composer-wrap {
    position: sticky; bottom: 0; z-index: 12; padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, rgba(7, 8, 23, .96) 18%);
  }
  .side-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-panel { display: none; }
  .install-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body:not(.install-body) { overflow: auto; }
  .brand-panel, .user-card, .chat-panel, .channel-sidebar, .auth-card, .install-card { border-radius: 20px; }
  .install-hero { grid-template-columns: 1fr; }
  .install-icon { width: 64px; height: 64px; }
  .emoji-strip { overflow-x: auto; padding-bottom: 2px; }
  .emoji-strip button { min-width: 42px; }
}


/* NOX Platform Layout v0.5 */
:root {
  --app-height: 100dvh;
}

.mobile-topbar {
  display: none;
}

.mobile-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-symbol {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #04110f;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  box-shadow: 0 0 28px rgba(45, 212, 191, .24);
}

.mobile-brand strong {
  display: block;
  line-height: 1;
}

.mobile-brand small {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-size: .72rem;
  white-space: nowrap;
}

.mobile-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.mobile-nav-btn {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
  color: var(--muted);
  border-radius: 13px;
  padding: 9px 10px;
  font-weight: 900;
  cursor: pointer;
}

.mobile-nav-btn.active {
  color: var(--text);
  border-color: rgba(45, 212, 191, .38);
  background: linear-gradient(135deg, rgba(139,92,246,.28), rgba(45,212,191,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

@media (min-width: 921px) {
  html[data-device="desktop"] .app-shell {
    height: 100%;
  }
}

@media (max-width: 920px) {
  html, body {
    height: var(--app-height);
    min-height: var(--app-height);
    max-height: var(--app-height);
    overflow: hidden;
  }

  .bg-grid { opacity: .16; }
  .bg-orb { opacity: .35; }

  .auth-shell {
    height: var(--app-height);
    min-height: var(--app-height);
    overflow-y: auto;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .app-shell {
    height: var(--app-height);
    min-height: var(--app-height);
    max-height: var(--app-height);
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    overflow: hidden;
  }

  .mobile-topbar {
    display: grid;
    grid-template-columns: minmax(118px, .72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 20px;
    background: rgba(10, 12, 30, .82);
    box-shadow: 0 14px 50px rgba(0,0,0,.28);
    backdrop-filter: blur(16px);
  }

  .channel-sidebar,
  .chat-panel,
  .info-panel {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    display: none !important;
  }

  .app-shell.mobile-view-channels .channel-sidebar {
    display: flex !important;
  }

  .app-shell.mobile-view-chat .chat-panel {
    display: grid !important;
  }

  .app-shell.mobile-view-info .info-panel {
    display: grid !important;
  }

  .channel-sidebar,
  .chat-panel,
  .info-panel > .info-card {
    border-radius: 20px;
  }

  .channel-sidebar {
    padding: 12px;
  }

  .brand-panel {
    display: none;
  }

  .user-card {
    padding: 10px;
    border-radius: 16px;
  }

  .side-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .channels-section {
    min-height: 0;
    flex: 1;
  }

  .channels-list {
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 8px;
  }

  .channel-create {
    flex: 0 0 auto;
    padding-top: 9px;
  }

  .chat-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .chat-header {
    padding: 13px 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .chat-header h2 {
    font-size: clamp(1.22rem, 7vw, 1.62rem);
  }

  .chat-header p {
    max-width: 100%;
  }

  .chat-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .socket-pill {
    padding: 7px 10px;
    font-size: .78rem;
  }

  #copyChannelBtn {
    padding: 7px 10px;
    font-size: .78rem;
  }

  .messages {
    min-height: 0;
    padding: 12px;
    gap: 10px;
  }

  .msg {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
    border-radius: 16px;
  }

  .msg.own {
    margin-left: 0;
    border-color: rgba(45, 212, 191, .20);
    background: rgba(45, 212, 191, .075);
  }

  .msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 13px;
    font-size: .82rem;
  }

  .msg-content {
    font-size: .96rem;
    line-height: 1.45;
  }

  .composer-wrap {
    position: relative;
    bottom: auto;
    z-index: 20;
    padding: 9px 10px max(10px, env(safe-area-inset-bottom));
    background: rgba(5,6,17,.72);
    backdrop-filter: blur(14px);
  }

  .emoji-strip {
    margin-bottom: 7px;
    padding-bottom: 2px;
  }

  .emoji-strip button {
    min-width: 40px;
    min-height: 38px;
  }

  .composer {
    grid-template-columns: minmax(0, 1fr) 88px !important;
    gap: 8px;
  }

  .composer textarea {
    min-height: 46px;
    max-height: 116px;
  }

  .composer button {
    min-height: 46px;
    padding-inline: 10px;
  }

  .info-panel {
    align-content: start;
    overflow-y: auto;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .info-panel > .info-card {
    display: block;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .modal-card {
    max-height: calc(var(--app-height) - 16px);
  }

  .admin-card {
    padding: 16px;
  }

  .admin-grid.two-cols,
  .two-cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .mobile-topbar {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px;
  }

  .mobile-brand {
    justify-content: space-between;
  }

  .mobile-brand > div {
    margin-right: auto;
  }

  .mobile-nav-btn {
    padding: 9px 6px;
    font-size: .86rem;
  }

  .auth-card {
    max-height: calc(var(--app-height) - 24px);
    overflow-y: auto;
  }

  .tabs {
    grid-template-columns: 1fr;
  }

  .side-actions .ghost,
  .install-shortcut {
    min-height: 38px;
  }

  .channel-btn {
    padding: 11px;
  }

  .chat-header-actions {
    gap: 7px;
  }

  #copyChannelBtn {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .msg-meta {
    gap: 6px;
  }

  .composer {
    grid-template-columns: minmax(0, 1fr) 78px !important;
  }

  .composer button {
    font-size: .86rem;
  }

  .admin-tabs {
    grid-template-columns: 1fr;
  }
}

@media (display-mode: standalone) {
  .install-shortcut {
    opacity: .74;
  }
}


/* NOX UI Stability v0.6 */
#mobileTopbar { display: none !important; }
body.nox-mobile #mobileTopbar { display: grid !important; }
body.nox-desktop #mobileTopbar { display: none !important; }

body.nox-desktop .app-shell {
  grid-template-columns: 300px minmax(0, 1fr) 310px !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100%;
  overflow: hidden;
}
body.nox-desktop .channel-sidebar { grid-column: 1; grid-row: 1; display: flex !important; }
body.nox-desktop .chat-panel { grid-column: 2; grid-row: 1; display: grid !important; }
body.nox-desktop .info-panel { grid-column: 3; grid-row: 1; display: grid !important; }

@media (min-width: 921px) and (max-width: 1250px) {
  body.nox-desktop .app-shell { grid-template-columns: 280px minmax(0, 1fr) !important; }
  body.nox-desktop .info-panel { display: none !important; }
}

body:not(.is-admin) .admin-only-panel { display: none !important; }

.timezone-pill {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.09); border-radius: 999px;
  padding: 8px 11px; color: var(--faint); background: rgba(255,255,255,.035);
  font-size: .78rem; font-weight: 850; white-space: nowrap;
}
.typing-indicator {
  min-height: 20px; margin: 0 0 7px; padding-left: 4px;
  color: var(--accent-2); font-size: .86rem; font-weight: 750; opacity: .92;
}
.typing-indicator::after {
  content: ""; display: inline-block; width: 1.2em; text-align: left;
  animation: noxTypingDots 1.2s steps(4, end) infinite;
}
@keyframes noxTypingDots {
  0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; }
}

@media (max-width: 920px) {
  body.nox-mobile .app-shell { grid-template-columns: 1fr !important; grid-template-rows: auto minmax(0, 1fr) !important; }
  body.nox-mobile .channel-sidebar,
  body.nox-mobile .chat-panel,
  body.nox-mobile .info-panel { grid-column: 1 !important; grid-row: 2 !important; }
  body.nox-mobile .info-panel { gap: 10px; }
  body.nox-mobile .timezone-pill { display: none; }
}
@media (max-width: 560px) {
  body.nox-mobile .composer-wrap { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  body.nox-mobile .messages { padding-bottom: 10px; }
}


/* NOX Populi v1.0 - stable polish */
body.nox-pwa .install-shortcut { display: none !important; }
body:not(.is-admin) #copyChannelBtn { display: none !important; }

.messages { align-items: stretch !important; }
.messages > article.msg {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: start !important;
  box-sizing: border-box !important;
  width: min(860px, 74%) !important;
  max-width: min(860px, 74%) !important;
  min-width: 320px !important;
  gap: 11px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  align-self: flex-start !important;
}
.messages > article.msg.own {
  margin-left: auto !important;
  margin-right: 0 !important;
  align-self: flex-end !important;
}
.messages > article.msg .msg-main { min-width: 0 !important; max-width: 100% !important; }
.messages > article.msg .msg-content {
  display: block !important;
  width: 100% !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.48 !important;
}
.msg-meta { align-items: center; }
.msg-author { letter-spacing: -.01em; }

.link-card {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(45, 212, 191, .18);
  background: linear-gradient(135deg, rgba(45,212,191,.08), rgba(139,92,246,.08));
  color: var(--text) !important;
  text-decoration: none !important;
  max-width: 520px;
}
.link-card:hover { border-color: rgba(45, 212, 191, .38); transform: translateY(-1px); }
.link-card-kicker { color: var(--accent-2); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 900; }
.link-card strong { font-size: .94rem; }
.link-card small { color: var(--muted); overflow-wrap: anywhere; }

.avatar-wrap { position: relative; width: max-content; flex: 0 0 auto; }
.presence-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6b7280;
  border: 2px solid rgba(14, 16, 40, .96);
  box-shadow: none;
}
.person-row.online .presence-dot {
  background: #34d399;
  box-shadow: 0 0 14px rgba(52, 211, 153, .8);
}
.person-row.offline { opacity: .76; }
.person-main { min-width: 0; }
.person-main strong, .person-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.emoji-strip {
  scrollbar-width: thin;
  padding-bottom: 6px;
}
.emoji-strip button {
  flex: 0 0 auto;
  min-width: 40px;
  height: 38px;
  border-radius: 14px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.emoji-strip button:hover { transform: translateY(-1px); border-color: rgba(45,212,191,.35); background: rgba(45,212,191,.08); }

.channel-btn { transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.channel-btn:hover { transform: translateX(2px); }

@media (max-width: 1180px) {
  .messages > article.msg {
    width: min(760px, 82%) !important;
    max-width: min(760px, 82%) !important;
    min-width: 280px !important;
  }
}
@media (max-width: 920px) {
  .messages > article.msg {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }
  .messages > article.msg .msg-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 13px !important;
    font-size: .82rem !important;
  }
  .composer-wrap { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .emoji-strip button { min-width: 38px; height: 36px; }
}


/* NOX v1.1 — presence dots and compact emoji picker */
.avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}

.person-row .presence-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid rgba(18, 22, 51, .96);
  background: #64748b;
  box-shadow: none;
}

.person-row.online .presence-dot {
  background: var(--ok);
  box-shadow: 0 0 14px rgba(52, 211, 153, .78);
}

.person-row.offline .presence-dot {
  background: #64748b;
  opacity: .75;
}

.person-main {
  min-width: 0;
}

.emoji-strip {
  position: relative;
  overflow: visible !important;
  flex-wrap: nowrap;
}

.emoji-strip > button:not(.emoji-toggle) {
  display: none !important;
}

.emoji-toggle {
  min-width: 42px !important;
  width: 42px;
  height: 38px;
  border-color: rgba(45, 212, 191, .22) !important;
  background: rgba(45, 212, 191, .09) !important;
}

.emoji-picker {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 80;
  display: none;
  width: min(520px, calc(100vw - 44px));
  max-height: 255px;
  overflow-y: auto;
  padding: 10px;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 7px;
  border: 1px solid rgba(139, 92, 246, .34);
  border-radius: 18px;
  background: rgba(13, 16, 39, .98);
  box-shadow: 0 20px 60px rgba(0,0,0,.52);
  backdrop-filter: blur(16px);
}

.emoji-picker.open {
  display: grid;
}

.emoji-picker button {
  min-width: 38px !important;
  height: 36px;
  padding: 0 !important;
  border-radius: 12px;
  font-size: 1.08rem;
}

@media (max-width: 920px) {
  .emoji-picker {
    width: calc(100vw - 36px);
    max-height: 230px;
    left: 0;
  }
}


/* NOX v2.0.1 - user-facing status cleanup */
.timezone-pill,
.socket-pill,
#timezonePill,
#socketStatus {
  display: none !important;
}

.person-row.online {
  border-color: rgba(52, 211, 153, .20);
  background: linear-gradient(135deg, rgba(52,211,153,.055), rgba(255,255,255,.035));
  opacity: 1;
}

.person-row.online .presence-dot,
.user-card .status-dot {
  background: #34d399 !important;
  box-shadow: 0 0 15px rgba(52, 211, 153, .95) !important;
}

.person-row.offline .presence-dot {
  background: #64748b !important;
  box-shadow: none !important;
}

/* NOX v2.1 media/R2 MVP */
.hidden-file-input {
  display: none !important;
}

.attach-btn {
  width: 46px;
  min-width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .82);
  color: var(--text);
  cursor: pointer;
}

.attach-btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.attachments {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.attachment-image,
.attachment-file {
  display: block;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(2, 6, 23, .22);
  border-radius: 16px;
}

.attachment-image img {
  display: block;
  max-width: min(520px, 100%);
  max-height: 360px;
  object-fit: contain;
  background: rgba(2, 6, 23, .38);
}

.attachment-image span,
.attachment-file {
  padding: 8px 10px;
  font-size: .82rem;
  color: var(--muted);
}

/* =========================================================
   NOX composer stable layout fix
   Required after media/upload patches.
   Target layout:
   [emoji] [attach] [textarea] [send]
   ========================================================= */

.chat-footer,
.composer,
.message-composer,
.chat-composer,
.input-bar {
  display: grid !important;
  grid-template-columns: 44px 44px minmax(0, 1fr) 112px !important;
  align-items: end !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

.chat-footer > *,
.composer > *,
.message-composer > *,
.chat-composer > *,
.input-bar > * {
  min-width: 0 !important;
}

.emoji-toggle,
.attach-btn,
.media-upload-btn,
button[data-action="emoji"],
button[data-action="attach"],
button[data-action="upload"] {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 44px !important;
}

#messageInput,
.message-input,
.chat-input,
textarea[name="message"],
.composer textarea,
.message-composer textarea,
.chat-composer textarea,
.input-bar textarea {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 140px !important;
  resize: none !important;
  box-sizing: border-box !important;
  grid-column: auto !important;
}

#sendBtn,
.send-btn,
button[type="submit"],
.composer button[type="submit"],
.message-composer button[type="submit"],
.chat-composer button[type="submit"],
.input-bar button[type="submit"] {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  grid-column: auto !important;
}

/* Prevent upload/media patch from stretching send button */
.chat-footer .send-btn,
.composer .send-btn,
.message-composer .send-btn,
.chat-composer .send-btn,
.input-bar .send-btn {
  justify-self: stretch !important;
}

/* Emoji picker should float above composer, not break its grid */
.emoji-picker,
.emoji-panel,
.quick-emoji-panel {
  position: absolute !important;
  left: 12px !important;
  bottom: 72px !important;
  z-index: 80 !important;
  max-width: min(520px, calc(100vw - 32px)) !important;
}

/* Mobile composer */
@media (max-width: 820px) {
  .chat-footer,
  .composer,
  .message-composer,
  .chat-composer,
  .input-bar {
    grid-template-columns: 42px 42px minmax(0, 1fr) 86px !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .emoji-toggle,
  .attach-btn,
  .media-upload-btn,
  button[data-action="emoji"],
  button[data-action="attach"],
  button[data-action="upload"] {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex-basis: 42px !important;
  }

  #messageInput,
  .message-input,
  .chat-input,
  textarea[name="message"],
  .composer textarea,
  .message-composer textarea,
  .chat-composer textarea,
  .input-bar textarea {
    height: 48px !important;
    min-height: 48px !important;
  }

  #sendBtn,
  .send-btn,
  button[type="submit"],
  .composer button[type="submit"],
  .message-composer button[type="submit"],
  .chat-composer button[type="submit"],
  .input-bar button[type="submit"] {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 12px !important;
  }
}

/* Very narrow screens: send button goes under input if needed */
@media (max-width: 480px) {
  .chat-footer,
  .composer,
  .message-composer,
  .chat-composer,
  .input-bar {
    grid-template-columns: 42px 42px minmax(0, 1fr) !important;
  }

  #sendBtn,
  .send-btn,
  button[type="submit"],
  .composer button[type="submit"],
  .message-composer button[type="submit"],
  .chat-composer button[type="submit"],
  .input-bar button[type="submit"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   NOX precise composer fix v2.1+
   Real current layout:
   emoji picker/strip is ABOVE the form
   form is: [attach] [textarea] [send]
   Keep this block at the END of style.css in future patches.
   ========================================================= */

.composer-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 14px 14px !important;
  box-sizing: border-box !important;
}

.emoji-strip,
.quick-emoji,
.emoji-picker-toggle-row {
  display: flex !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 9px 0 !important;
  gap: 8px !important;
  overflow-x: auto !important;
}

#messageForm.composer {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 112px !important;
  align-items: end !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#messageForm.composer > * {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#mediaInput,
#messageForm.composer input[type="file"],
.hidden-file-input {
  display: none !important;
}

#attachBtn,
#messageForm.composer .attach-btn,
#messageForm.composer .media-upload-btn {
  grid-column: 1 !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: stretch !important;
}

#messageInput,
#messageForm.composer textarea {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 140px !important;
  resize: none !important;
  overflow-y: auto !important;
  justify-self: stretch !important;
}

#sendBtn,
#messageForm.composer button[type="submit"],
#messageForm.composer .send-btn {
  grid-column: 3 !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  justify-self: stretch !important;
}

/* Override older broken mobile/composer hotfixes */
@media (max-width: 820px) {
  #messageForm.composer {
    grid-template-columns: 46px minmax(0, 1fr) 86px !important;
    gap: 8px !important;
  }

  #attachBtn,
  #messageForm.composer .attach-btn,
  #messageForm.composer .media-upload-btn {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }

  #messageInput,
  #messageForm.composer textarea {
    height: 50px !important;
    min-height: 50px !important;
  }

  #sendBtn,
  #messageForm.composer button[type="submit"],
  #messageForm.composer .send-btn {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 0 12px !important;
  }
}

@media (max-width: 480px) {
  #messageForm.composer {
    grid-template-columns: 44px minmax(0, 1fr) 78px !important;
  }

  #sendBtn,
  #messageForm.composer button[type="submit"],
  #messageForm.composer .send-btn {
    grid-column: 3 !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }
}


/* =========================================================
   NOX attachment preview polish
   Hide ugly long filenames when image preview exists.
   Keep this block at the END of style.css in future patches.
   ========================================================= */

.attachments {
  margin-top: 10px !important;
  display: grid !important;
  gap: 8px !important;
}

.attachment-image {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  color: var(--text) !important;
  text-decoration: none !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  background: rgba(2, 6, 23, .22) !important;
  border-radius: 16px !important;
}

.attachment-image img {
  display: block !important;
  max-width: min(520px, 100%) !important;
  max-height: 360px !important;
  object-fit: contain !important;
  background: rgba(2, 6, 23, .38) !important;
}

.attachment-caption {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  font-size: .82rem !important;
  color: var(--muted) !important;
  border-top: 1px solid rgba(148, 163, 184, .10) !important;
}

.attachment-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.attachment-action {
  flex: 0 0 auto !important;
  color: #5eead4 !important;
  font-weight: 800 !important;
  font-size: .76rem !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.attachment-file {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  max-width: min(520px, 100%) !important;
  padding: 9px 11px !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  background: rgba(2, 6, 23, .22) !important;
  border-radius: 14px !important;
  font-size: .84rem !important;
}

.attachment-file .attachment-name {
  max-width: 360px !important;
}

@media (max-width: 820px) {
  .attachment-image img {
    max-width: min(100%, 78vw) !important;
    max-height: 300px !important;
  }

  .attachment-file .attachment-name {
    max-width: 58vw !important;
  }
}


/* =========================================================
   NOX generic file pool preview
   Any file up to 25 MB. Preview only when browser supports it.
   Keep this block at the END of style.css in future patches.
   ========================================================= */

.attachment-audio,
.attachment-video {
  width: fit-content !important;
  max-width: min(560px, 100%) !important;
  padding: 10px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  background: rgba(2, 6, 23, .22) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.attachment-file-head {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin-bottom: 8px !important;
}

.attachment-audio audio {
  display: block !important;
  width: min(520px, 72vw) !important;
  max-width: 100% !important;
}

.attachment-video video {
  display: block !important;
  width: min(520px, 100%) !important;
  max-height: 360px !important;
  border-radius: 12px !important;
  background: rgba(2, 6, 23, .45) !important;
}

.attachment-meta {
  color: var(--muted) !important;
  font-size: .74rem !important;
  opacity: .85 !important;
  white-space: nowrap !important;
}

.attachment-file .attachment-meta {
  margin-left: auto !important;
  padding-left: 12px !important;
}

@media (max-width: 820px) {
  .attachment-audio,
  .attachment-video {
    max-width: 100% !important;
  }

  .attachment-audio audio,
  .attachment-video video {
    width: min(100%, 78vw) !important;
  }

  .attachment-file .attachment-meta {
    display: none !important;
  }
}


/* =========================================================
   NOX audio/file picker polish
   Audio cards should look native to NOX, not like a random white block.
   File picker must remain unrestricted; handled in JS/HTML.
   Keep this block at the END of style.css in future patches.
   ========================================================= */

.attachment-audio {
  width: min(560px, 100%) !important;
  padding: 12px !important;
  border: 1px solid rgba(45, 212, 191, .18) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, .10), transparent 34%),
    rgba(9, 12, 32, .56) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.attachment-audio .attachment-file-head {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.attachment-audio .attachment-icon {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: rgba(139, 92, 246, .20) !important;
  border: 1px solid rgba(139, 92, 246, .32) !important;
}

.attachment-audio .attachment-name {
  color: var(--text) !important;
  font-weight: 800 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.attachment-audio .attachment-action {
  color: #5eead4 !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  text-decoration: none !important;
}

.attachment-audio audio {
  width: 100% !important;
  max-width: 100% !important;
  height: 42px !important;
  display: block !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  filter: saturate(.92) brightness(.95) !important;
}

.attachment-audio .attachment-meta {
  margin-top: 7px !important;
  color: var(--muted) !important;
  font-size: .74rem !important;
  opacity: .88 !important;
}

/* Chromium-only: subtle dark polish for audio internals where supported */
.attachment-audio audio::-webkit-media-controls-panel {
  background: #eef2ff !important;
}

.attachment-audio audio::-webkit-media-controls-current-time-display,
.attachment-audio audio::-webkit-media-controls-time-remaining-display {
  color: #111827 !important;
}

@media (max-width: 820px) {
  .attachment-audio {
    width: 100% !important;
  }

  .attachment-audio .attachment-file-head {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .attachment-audio .attachment-action {
    display: none !important;
  }
}


/* =========================================================
   NOX v2.3 Profile MVP
   Avatar + display name + status + emoji identity polish.
   Keep this block at the END of style.css in future patches.
   ========================================================= */

.avatar {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 15%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(135deg, var(--profile-color, #8b5cf6), rgba(45, 212, 191, .58)) !important;
  color: #fff !important;
}

.avatar img,
.msg-avatar img,
.profile-preview-avatar img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

.user-card .avatar,
.avatar-wrap .avatar,
.msg-avatar {
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.18) !important;
}

.profile-status-line {
  display: block !important;
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  opacity: .78 !important;
}

.profile-emoji {
  display: inline-flex !important;
  vertical-align: middle !important;
  transform: translateY(-1px) !important;
  margin-left: 3px !important;
  font-size: .95em !important;
}

.person-status {
  display: block !important;
  max-width: 190px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  opacity: .72 !important;
  margin-top: 2px !important;
}

.profile-card {
  max-width: 620px !important;
}

.profile-form {
  display: grid !important;
  gap: 13px !important;
}

.profile-preview-row {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 12px !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  background: rgba(15, 23, 42, .34) !important;
  border-radius: 18px !important;
}

.profile-avatar-preview .avatar,
.profile-preview-avatar {
  width: 76px !important;
  height: 76px !important;
  border-radius: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  font-weight: 950 !important;
}

.avatar-upload-label input[type="file"] {
  margin-top: 7px !important;
  width: 100% !important;
}

.profile-emoji-choices {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: -4px !important;
}

.profile-emoji-choice {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  background: rgba(15, 23, 42, .58) !important;
  color: var(--text) !important;
  cursor: pointer !important;
}

.profile-emoji-choice.active {
  border-color: rgba(45, 212, 191, .62) !important;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, .12) !important;
  background: rgba(45, 212, 191, .15) !important;
}

.profile-emoji-choice.clear {
  color: var(--muted) !important;
  font-weight: 900 !important;
}

#profileColor {
  width: 76px !important;
  height: 42px !important;
  padding: 4px !important;
  cursor: pointer !important;
}

.channel-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px !important;
  align-items: stretch !important;
}

.channel-row .channel-btn {
  min-width: 0 !important;
}

.channel-delete-btn {
  width: 34px !important;
  min-width: 34px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(248, 113, 113, .22) !important;
  background: rgba(127, 29, 29, .18) !important;
  color: rgba(254, 202, 202, .88) !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  opacity: .78 !important;
}

.channel-delete-btn:hover {
  opacity: 1 !important;
  background: rgba(220, 38, 38, .25) !important;
}

@media (max-width: 820px) {
  .profile-preview-row {
    grid-template-columns: 70px minmax(0, 1fr) !important;
  }

  .profile-avatar-preview .avatar,
  .profile-preview-avatar {
    width: 64px !important;
    height: 64px !important;
    border-radius: 20px !important;
  }
}


/* =========================================================
   NOX v2.4 message reactions
   Quick emoji reactions under every message.
   Keep this block at the END of style.css in future patches.
   ========================================================= */

.msg-reactions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 9px !important;
  padding-top: 7px !important;
  border-top: 1px solid rgba(148, 163, 184, .08) !important;
}

.reaction-btn {
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  background: rgba(15, 23, 42, .36) !important;
  color: rgba(241, 245, 249, .86) !important;
  font-weight: 800 !important;
  font-size: .86rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease !important;
}

.reaction-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(94, 234, 212, .38) !important;
  background: rgba(45, 212, 191, .10) !important;
}

.reaction-btn.has-count {
  background: rgba(91, 64, 180, .22) !important;
  border-color: rgba(139, 92, 246, .30) !important;
}

.reaction-btn.active {
  color: #f8fafc !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, .22), rgba(139, 92, 246, .26)) !important;
  border-color: rgba(94, 234, 212, .55) !important;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, .10), 0 8px 22px rgba(45, 212, 191, .10) !important;
}

@media (max-width: 820px) {
  .msg-reactions {
    gap: 5px !important;
  }

  .reaction-btn {
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 7px !important;
    font-size: .9rem !important;
  }
}


/* =========================================================
   NOX voice channels foundation v3.0.0
   Visible voice layer: rooms, live participants, mute state.
   Real WebRTC audio comes in v3.0.1+.
   ========================================================= */

.voice-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, .13);
}

.voice-channels-list {
  display: grid;
  gap: 8px;
}

.voice-channel-btn {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 15px;
  padding: 10px 11px;
  color: var(--text);
  background: rgba(15, 23, 42, .34);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.voice-channel-btn:hover {
  border-color: rgba(45, 212, 191, .24);
  background: rgba(45, 212, 191, .07);
}

.voice-channel-btn.active {
  border-color: rgba(45, 212, 191, .48);
  background: linear-gradient(135deg, rgba(45, 212, 191, .12), rgba(139, 92, 246, .16));
}

.voice-channel-main {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 900;
}

.voice-channel-btn small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-icon {
  filter: drop-shadow(0 0 8px rgba(45, 212, 191, .24));
}

.voice-panel {
  margin-top: 12px;
  padding: 11px;
  border-radius: 18px;
  border: 1px solid rgba(45, 212, 191, .22);
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, .10), transparent 34%),
    rgba(2, 6, 23, .30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.voice-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 9px;
}

.voice-panel-head strong {
  display: block;
  font-size: .95rem;
}

.voice-panel-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .74rem;
}

.voice-mini {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 999px;
  color: var(--text);
  background: rgba(15, 23, 42, .50);
  padding: 6px 9px;
  font-weight: 800;
  cursor: pointer;
}

.voice-mini.danger {
  color: #fecaca;
  border-color: rgba(248, 113, 113, .25);
}

.voice-participants {
  display: grid;
  gap: 7px;
  margin: 8px 0 10px;
}

.voice-user-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .38);
  border: 1px solid rgba(148, 163, 184, .10);
}

.voice-user-row.muted {
  opacity: .72;
}

.voice-user-row.self {
  border-color: rgba(45, 212, 191, .36);
  background:
    linear-gradient(90deg, rgba(45, 212, 191, .12), rgba(124, 58, 237, .08)),
    rgba(15, 23, 42, .48);
  box-shadow: inset 3px 0 0 rgba(45, 212, 191, .72), 0 0 0 1px rgba(124, 58, 237, .10);
}

.voice-user-row.self .voice-user-info strong {
  color: rgba(226, 252, 247, .96);
}

.voice-avatar {
  width: 34px;
  height: 34px;
  border-radius: 13px;
}

.voice-user-info {
  min-width: 0;
}

.voice-user-info strong,
.voice-user-info small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.voice-user-info strong {
  font-size: .84rem;
}

.voice-user-info small {
  color: var(--muted);
  font-size: .72rem;
}

.voice-user-state {
  font-size: 1rem;
}

.voice-mute-btn {
  width: 100%;
  min-height: 42px;
  border-radius: 15px;
  border: 1px solid rgba(45, 212, 191, .28);
  color: var(--text);
  background: linear-gradient(135deg, rgba(45, 212, 191, .15), rgba(139, 92, 246, .18));
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 820px) {
  .voice-panel {
    margin-bottom: 10px;
  }
}

/* =========================================================
   NOX voice real audio MVP v3.0.1
   WebRTC audio layer: mic states, peer connection polish.
   Keep this block at the END of style.css in future patches.
   ========================================================= */

.voice-audio-root {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: -9999px !important;
  top: -9999px !important;
}

.voice-panel {
  border-color: rgba(45, 212, 191, .24) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, .10), transparent 36%),
    rgba(9, 12, 32, .74) !important;
}

.voice-panel-head small {
  color: rgba(203, 213, 225, .72) !important;
}

.voice-user-row.connected {
  border-color: rgba(45, 212, 191, .24) !important;
  background: rgba(45, 212, 191, .07) !important;
}

.voice-user-row.connected .voice-user-state {
  color: #5eead4 !important;
  text-shadow: 0 0 12px rgba(45, 212, 191, .35) !important;
}

.voice-user-row.muted.connected .voice-user-state {
  color: #c4b5fd !important;
  text-shadow: none !important;
}

.voice-mute-btn {
  transition: transform .12s ease, border-color .12s ease, background .12s ease !important;
}

.voice-mute-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(45, 212, 191, .42) !important;
}


/* =========================================================
   NOX v3.0.3 General & Voice Polish
   - persistent voice channels
   - compact active voice panel
   - sidebar scrolling that keeps text channels usable
   - right-click message actions
   Keep this block at the END of style.css in future patches.
   ========================================================= */

.channel-sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

.channel-sidebar .brand-panel,
.channel-sidebar .user-card,
.channel-sidebar .side-actions,
.channel-sidebar .voice-panel,
.channel-sidebar .channel-create {
  flex: 0 0 auto !important;
}

.channels-section,
.voice-section {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

.channels-list,
.voice-channels-list {
  max-height: 260px !important;
  overflow-y: auto !important;
  padding-right: 3px !important;
}

.voice-section {
  margin-top: 10px !important;
  padding-top: 10px !important;
}

.voice-channel-create {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 7px !important;
  margin-top: 9px !important;
}

.voice-channel-create input {
  min-width: 0 !important;
  padding: 9px 10px !important;
  font-size: .82rem !important;
  border-radius: 13px !important;
}

.voice-channel-create input#voiceChannelDescription {
  grid-column: 1 / -1 !important;
}

.voice-channel-create button {
  grid-column: 1 / -1 !important;
  min-height: 38px !important;
  border-radius: 14px !important;
  color: var(--accent-2) !important;
  background: rgba(45, 212, 191, .10) !important;
  border-color: rgba(45, 212, 191, .22) !important;
  font-weight: 900 !important;
}

.voice-panel {
  order: -1 !important;
  margin: 8px 0 4px !important;
  padding: 9px !important;
  border-radius: 16px !important;
}

.voice-panel-head {
  margin-bottom: 6px !important;
}

.voice-panel-head strong {
  font-size: .86rem !important;
}

.voice-panel-head small {
  font-size: .68rem !important;
  line-height: 1.25 !important;
}

.voice-mini {
  padding: 5px 8px !important;
  font-size: .75rem !important;
}

.voice-participants {
  gap: 5px !important;
  margin: 6px 0 7px !important;
  max-height: 132px !important;
  overflow-y: auto !important;
}

.voice-user-row {
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  gap: 7px !important;
  padding: 6px !important;
  border-radius: 13px !important;
}

.voice-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 12px !important;
}

.voice-user-info strong {
  font-size: .78rem !important;
}

.voice-user-info small {
  font-size: .68rem !important;
}

.voice-mute-btn {
  min-height: 38px !important;
  border-radius: 14px !important;
  font-size: .86rem !important;
}

.message-context-menu {
  position: fixed !important;
  z-index: 1000 !important;
  min-width: 170px !important;
  padding: 7px !important;
  display: grid !important;
  gap: 5px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  background: rgba(13, 16, 36, .96) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.42) !important;
  backdrop-filter: blur(16px) !important;
}

.message-context-menu.hidden {
  display: none !important;
}

.message-context-menu button {
  width: 100% !important;
  padding: 9px 10px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text) !important;
  text-align: left !important;
  font-weight: 850 !important;
  cursor: pointer !important;
}

.message-context-menu button:hover {
  background: rgba(139, 92, 246, .18) !important;
  border-color: rgba(139, 92, 246, .22) !important;
}

.message-context-menu button.danger {
  color: #fecaca !important;
}

.message-context-menu button.danger:hover {
  background: rgba(248, 113, 113, .12) !important;
  border-color: rgba(248, 113, 113, .24) !important;
}

.msg-edited {
  color: var(--faint) !important;
  font-size: .72rem !important;
  font-style: italic !important;
}

@media (max-width: 920px) {
  .channel-sidebar {
    overflow-y: auto !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  .channels-list,
  .voice-channels-list {
    max-height: none !important;
  }

  .voice-panel {
    order: 0 !important;
  }

  .voice-participants {
    max-height: 112px !important;
  }
}

/* =========================================================
   NOX v3.0.4 Voice regression fix
   - active voice panel lives inline under selected voice room
   - stable room key uses slug, so users join same room reliably
   - legacy detached voice panel is hidden to avoid sidebar jumps
   Keep this block at the END of style.css in future patches.
   ========================================================= */

#voicePanel.voice-panel {
  display: none !important;
}

.voice-section {
  flex: 0 0 auto !important;
}

.voice-channels-list {
  display: grid !important;
  gap: 8px !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.voice-inline-panel {
  margin: -2px 0 6px !important;
  padding: 9px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(45, 212, 191, .24) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, .10), transparent 36%),
    rgba(9, 12, 32, .74) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.voice-inline-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-bottom: 7px !important;
}

.voice-inline-head strong,
.voice-inline-head small {
  display: block !important;
  min-width: 0 !important;
}

.voice-inline-head strong {
  font-size: .86rem !important;
  line-height: 1.15 !important;
}

.voice-inline-head small {
  margin-top: 2px !important;
  color: rgba(203, 213, 225, .72) !important;
  font-size: .68rem !important;
  line-height: 1.25 !important;
}

.voice-inline-panel .voice-participants {
  max-height: 150px !important;
  overflow-y: auto !important;
  gap: 5px !important;
  margin: 6px 0 7px !important;
}

.voice-inline-panel .voice-user-row {
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  gap: 7px !important;
  padding: 6px !important;
  border-radius: 13px !important;
}

.voice-inline-panel .voice-user-row.self {
  border-color: rgba(45, 212, 191, .34) !important;
  box-shadow: inset 3px 0 0 rgba(45, 212, 191, .72) !important;
}

.voice-inline-panel .voice-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 12px !important;
}

.voice-inline-panel .voice-mute-btn {
  min-height: 38px !important;
  border-radius: 14px !important;
  font-size: .86rem !important;
}

.channel-sidebar {
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

.channels-list {
  max-height: 280px !important;
  overflow-y: auto !important;
}

.voice-channel-create {
  margin-top: 9px !important;
}

@media (max-width: 920px) {
  .voice-inline-panel .voice-participants {
    max-height: 120px !important;
  }
}


/* =========================================================
   NOX v4 cleanup safety rails
   Keep sidebar/voice areas scrollable without pushing chat layout.
   ========================================================= */

.sidebar {
  min-height: 0;
}

.sidebar .channel-list,
.sidebar .voice-list {
  min-height: 0;
}

.voice-active-card,
.voice-panel,
.active-voice-card {
  max-width: 100%;
  box-sizing: border-box;
}

.context-menu,
.message-context-menu {
  z-index: 120;
}

/* =========================================================
   NOX v4.1 Voice polish
   Show voice occupants directly under voice channels, even before joining.
   Keep active voice controls compact and avoid hiding text channels.
   ========================================================= */
.voice-channel-btn.occupied {
  border-color: rgba(94, 234, 212, .26) !important;
  background: rgba(45, 212, 191, .08) !important;
}

.voice-channel-occupants-wrap {
  margin: -4px 0 7px 14px !important;
  padding-left: 12px !important;
  border-left: 1px solid rgba(148, 163, 184, .16) !important;
}

.voice-channel-occupants-wrap.active {
  border-left-color: rgba(94, 234, 212, .35) !important;
}

.voice-channel-occupants {
  display: grid !important;
  gap: 5px !important;
}

.voice-channel-occupant {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 4px 7px !important;
  color: var(--muted) !important;
  font-size: .78rem !important;
  border-radius: 10px !important;
  background: rgba(2, 6, 23, .18) !important;
}

.voice-channel-occupant.more {
  grid-template-columns: 1fr !important;
  padding-left: 9px !important;
  color: rgba(148, 163, 184, .88) !important;
}

.voice-mini-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 9px !important;
  font-size: .68rem !important;
}

.voice-channel-occupant-name {
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.voice-channel-occupant-state {
  font-size: .88rem !important;
  opacity: .95 !important;
}

.voice-inline-panel {
  margin-top: 2px !important;
}

@media (max-width: 820px) {
  .voice-channel-occupants-wrap {
    margin-left: 9px !important;
    padding-left: 9px !important;
  }

  .voice-channel-occupant {
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
  }

  .voice-mini-avatar {
    width: 22px !important;
    height: 22px !important;
  }
}



/* =========================================================
   NOX v4.1.1 Voice polish
   Speaking detection, audio level meter and per-user volume.
   ========================================================= */
.voice-user-row.speaking {
  border-color: rgba(52, 211, 153, .5) !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(52, 211, 153, calc(.10 + (var(--voice-level, 0) * .20))), transparent 42%),
    rgba(45, 212, 191, .08) !important;
  box-shadow: 0 0 calc(8px + (var(--voice-level, 0) * 18px)) rgba(52, 211, 153, .14) !important;
}

.voice-user-row.speaking .voice-avatar,
.voice-channel-occupant.speaking .voice-mini-avatar {
  outline: 2px solid rgba(52, 211, 153, .72) !important;
  box-shadow: 0 0 16px rgba(52, 211, 153, .26) !important;
}

.voice-level {
  display: block !important;
  width: min(118px, 100%) !important;
  height: 4px !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, .14) !important;
}

.voice-level > span {
  display: block !important;
  height: 100% !important;
  min-width: 3px !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(45, 212, 191, .7), rgba(52, 211, 153, .95)) !important;
  transition: width .12s ease !important;
}

.voice-user-controls {
  display: grid !important;
  justify-items: end !important;
  gap: 4px !important;
  min-width: 46px !important;
}

.voice-volume {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: rgba(148, 163, 184, .76) !important;
  font-size: .62rem !important;
  line-height: 1 !important;
}

.voice-volume input[type="range"] {
  width: 54px !important;
  height: 18px !important;
  padding: 0 !important;
  accent-color: var(--accent-2) !important;
}

.voice-channel-occupant[title*="mówi"] {
  color: rgba(226, 232, 240, .96) !important;
  background: rgba(45, 212, 191, .12) !important;
}

@media (max-width: 820px) {
  .voice-volume span { display: none !important; }
  .voice-volume input[type="range"] { width: 44px !important; }
  .voice-user-controls { min-width: 40px !important; }
}


/* =========================================================
   NOX v4.2.0 Mobile Lift + Voice Cleanup
   - phone-first density pass
   - one readable voice state, no debug-like "audio" status
   - sticky mobile voice dock while connected
   Keep this block at the END of style.css in future patches.
   ========================================================= */

.mobile-voice-dock {
  display: none;
}

@media (max-width: 920px) {
  body.nox-mobile .app-shell {
    gap: 8px !important;
    padding: max(7px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left)) !important;
  }

  body.nox-mobile .mobile-topbar {
    border-radius: 18px !important;
    padding: 8px !important;
    gap: 8px !important;
  }

  body.nox-mobile .mobile-symbol {
    width: 32px !important;
    height: 32px !important;
    border-radius: 12px !important;
  }

  body.nox-mobile .mobile-brand strong {
    font-size: .96rem !important;
  }

  body.nox-mobile .mobile-brand small {
    font-size: .68rem !important;
  }

  body.nox-mobile .mobile-nav-btn {
    min-height: 42px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
    font-size: .88rem !important;
  }

  body.nox-mobile .channel-sidebar,
  body.nox-mobile .chat-panel,
  body.nox-mobile .info-panel > .info-card {
    border-radius: 18px !important;
  }

  body.nox-mobile .channel-sidebar {
    padding: 11px !important;
  }

  body.nox-mobile .user-card {
    padding: 9px !important;
    border-radius: 15px !important;
    grid-template-columns: 44px minmax(0,1fr) auto !important;
  }

  body.nox-mobile .user-card .avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 15px !important;
  }

  body.nox-mobile .side-actions {
    gap: 7px !important;
    margin: 10px 0 12px !important;
  }

  body.nox-mobile .side-actions .ghost {
    min-height: 36px !important;
    padding: 7px 8px !important;
    border-radius: 13px !important;
    font-size: .82rem !important;
  }

  body.nox-mobile .section-head {
    margin: 8px 0 7px !important;
    letter-spacing: .18em !important;
    font-size: .72rem !important;
  }

  body.nox-mobile .channel-btn,
  body.nox-mobile .voice-channel-btn {
    padding: 10px 11px !important;
    border-radius: 16px !important;
  }

  body.nox-mobile .channel-delete-btn {
    width: 38px !important;
    min-width: 38px !important;
    opacity: .42 !important;
  }

  body.nox-mobile .channel-row:not(:hover) .channel-delete-btn {
    background: rgba(127, 29, 29, .10) !important;
  }

  body.nox-mobile .voice-inline-panel {
    padding: 8px !important;
    margin: -2px 0 4px !important;
    border-radius: 15px !important;
  }

  body.nox-mobile .voice-inline-head {
    align-items: center !important;
    margin-bottom: 5px !important;
  }

  body.nox-mobile .voice-inline-head small {
    font-size: .66rem !important;
  }

  body.nox-mobile .voice-inline-panel .voice-participants {
    max-height: 92px !important;
    margin: 5px 0 !important;
  }

  body.nox-mobile .voice-user-row {
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    padding: 5px !important;
  }

  body.nox-mobile .voice-user-info small {
    font-size: .68rem !important;
  }

  body.nox-mobile .voice-level {
    height: 2px !important;
    opacity: .35 !important;
  }

  body.nox-mobile .voice-user-row:not(.speaking) .voice-level {
    display: none !important;
  }

  body.nox-mobile .voice-volume {
    display: none !important;
  }

  body.nox-mobile .voice-mute-btn {
    min-height: 34px !important;
    font-size: .82rem !important;
  }

  body.nox-mobile .chat-header {
    padding: 10px 12px !important;
    gap: 7px !important;
  }

  body.nox-mobile .chat-header h2 {
    font-size: clamp(1.18rem, 6vw, 1.45rem) !important;
  }

  body.nox-mobile .chat-header p {
    font-size: .82rem !important;
    line-height: 1.3 !important;
  }

  body.nox-mobile .chat-header-actions {
    margin-top: 0 !important;
  }

  body.nox-mobile .messages {
    padding: 9px !important;
    gap: 8px !important;
  }

  body.nox-mobile .msg {
    grid-template-columns: 34px minmax(0,1fr) !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 15px !important;
  }

  body.nox-mobile .msg-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
  }

  body.nox-mobile .msg-content {
    font-size: .93rem !important;
  }

  body.nox-mobile .msg-reactions {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 4px !important;
    margin-top: 7px !important;
    padding-top: 6px !important;
    scrollbar-width: none !important;
  }

  body.nox-mobile .msg-reactions::-webkit-scrollbar {
    display: none !important;
  }

  body.nox-mobile .reaction-btn {
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 7px !important;
    font-size: .82rem !important;
    flex: 0 0 auto !important;
  }

  body.nox-mobile .attachment-image {
    width: 100% !important;
  }

  body.nox-mobile .attachment-image img {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 240px !important;
  }

  body.nox-mobile .attachment-caption {
    padding: 7px 9px !important;
  }

  body.nox-mobile .attachment-audio,
  body.nox-mobile .attachment-video,
  body.nox-mobile .attachment-file {
    max-width: 100% !important;
  }

  body.nox-mobile .attachment-audio audio,
  body.nox-mobile .attachment-video video {
    width: 100% !important;
  }

  body.nox-mobile .composer-wrap {
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(5,6,17,.50), rgba(5,6,17,.92)) !important;
  }

  body.nox-mobile .emoji-strip {
    margin-bottom: 5px !important;
    gap: 5px !important;
  }

  body.nox-mobile .emoji-strip button {
    min-width: 34px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
  }

  body.nox-mobile #messageForm.composer {
    grid-template-columns: 42px minmax(0, 1fr) 76px !important;
    gap: 7px !important;
    align-items: end !important;
  }

  body.nox-mobile #messageForm.composer .media-upload-btn,
  body.nox-mobile #messageForm.composer .attach-btn {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 15px !important;
  }

  body.nox-mobile #messageForm.composer textarea {
    min-height: 42px !important;
    max-height: 92px !important;
    padding: 10px 12px !important;
    border-radius: 15px !important;
    font-size: .92rem !important;
  }

  body.nox-mobile #messageForm.composer button[type="submit"],
  body.nox-mobile #messageForm.composer .send-btn {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    padding: 0 10px !important;
    font-size: .84rem !important;
  }

  body.nox-mobile .info-panel {
    gap: 9px !important;
  }

  body.nox-mobile .info-panel > .info-card {
    padding: 13px !important;
  }

  body.nox-mobile .info-card h3 {
    font-size: 1rem !important;
    margin: 5px 0 6px !important;
  }

  body.nox-mobile .stats-grid {
    gap: 8px !important;
  }

  body.nox-mobile .stat-box {
    padding: 12px !important;
    border-radius: 15px !important;
  }

  body.nox-mobile .person-row {
    padding: 9px !important;
    border-radius: 15px !important;
    gap: 9px !important;
  }

  body.nox-mobile .person-row .avatar,
  body.nox-mobile .avatar-wrap .avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }

  body.nox-mobile .person-main small {
    line-height: 1.25 !important;
  }

  body.nox-mobile .mobile-voice-dock {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    z-index: 80 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px auto !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(45, 212, 191, .30) !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(45, 212, 191, .16), transparent 42%),
      rgba(7, 10, 28, .94) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(18px) !important;
  }

  body.nox-mobile .mobile-voice-main,
  body.nox-mobile .mobile-voice-action {
    border: 1px solid rgba(148, 163, 184, .16) !important;
    background: rgba(255,255,255,.045) !important;
    color: var(--text) !important;
    border-radius: 14px !important;
    min-height: 42px !important;
    cursor: pointer !important;
  }

  body.nox-mobile .mobile-voice-main {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 7px 10px !important;
    text-align: left !important;
  }

  body.nox-mobile .mobile-voice-main strong,
  body.nox-mobile .mobile-voice-main small {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.nox-mobile .mobile-voice-main strong {
    font-size: .86rem !important;
    line-height: 1.1 !important;
  }

  body.nox-mobile .mobile-voice-main small {
    margin-top: 2px !important;
    color: rgba(203, 213, 225, .74) !important;
    font-size: .68rem !important;
  }

  body.nox-mobile .mobile-voice-dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: #2dd4bf !important;
    box-shadow: 0 0 16px rgba(45,212,191,.70) !important;
    flex: 0 0 auto !important;
  }

  body.nox-mobile .mobile-voice-dock.speaking .mobile-voice-dot {
    background: #22c55e !important;
    box-shadow: 0 0 0 5px rgba(34,197,94,.10), 0 0 22px rgba(34,197,94,.75) !important;
  }

  body.nox-mobile .mobile-voice-action {
    padding: 0 10px !important;
    font-weight: 950 !important;
  }

  body.nox-mobile .mobile-voice-action.danger {
    color: #fecaca !important;
    background: rgba(127, 29, 29, .18) !important;
    border-color: rgba(248, 113, 113, .22) !important;
  }

  body.nox-mobile:has(.mobile-voice-dock) .channel-sidebar,
  body.nox-mobile:has(.mobile-voice-dock) .info-panel,
  body.nox-mobile:has(.mobile-voice-dock) .messages {
    padding-bottom: 76px !important;
  }

  body.nox-mobile:has(.mobile-voice-dock) .composer-wrap {
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 430px) {
  body.nox-mobile .mobile-topbar {
    grid-template-columns: 1fr !important;
  }

  body.nox-mobile .channel-delete-btn {
    display: none !important;
  }

  body.nox-mobile .user-card {
    grid-template-columns: 40px minmax(0,1fr) !important;
  }

  body.nox-mobile .side-actions .ghost {
    font-size: .78rem !important;
  }

  body.nox-mobile #messageForm.composer {
    grid-template-columns: 40px minmax(0, 1fr) 68px !important;
    gap: 6px !important;
  }

  body.nox-mobile #messageForm.composer textarea::placeholder {
    font-size: .86rem !important;
  }

  body.nox-mobile .mobile-voice-dock {
    grid-template-columns: minmax(0, 1fr) 42px 62px !important;
  }

  body.nox-mobile .mobile-voice-action.danger {
    font-size: .76rem !important;
  }
}

/* =========================================================
   NOX v4.2.1 Voice Sidebar Simplify
   - remove duplicated active voice diagnostics panel
   - keep one expanded voice room with participants and controls
   - hide technical volume/audio clutter from main UI
   Keep this block at the END of style.css in future patches.
   ========================================================= */
.voice-inline-panel {
  display: none !important;
}

.voice-channel-btn.active {
  margin-bottom: 0 !important;
}

.voice-channel-occupants-wrap.active {
  margin-top: -2px !important;
  margin-bottom: 6px !important;
  padding: 6px 0 2px 12px !important;
  border-left-color: rgba(94, 234, 212, .42) !important;
}

.voice-channel-occupant {
  min-height: 30px !important;
  background: rgba(2, 6, 23, .12) !important;
  border: 1px solid transparent !important;
}

.voice-channel-occupant.speaking {
  color: rgba(236, 253, 245, .98) !important;
  border-color: rgba(52, 211, 153, .28) !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(52, 211, 153, calc(.12 + (var(--voice-level, 0) * .22))), transparent 44%),
    rgba(45, 212, 191, .10) !important;
}

.voice-channel-occupant.muted {
  opacity: .72 !important;
}

.voice-channel-occupant-name {
  display: block !important;
  line-height: 1.12 !important;
}

.voice-channel-occupant-name small {
  display: block !important;
  margin-top: 1px !important;
  color: rgba(203, 213, 225, .62) !important;
  font-size: .64rem !important;
  font-weight: 750 !important;
}

.voice-channel-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 7px !important;
  margin: 0 0 8px 26px !important;
}

.voice-channel-action {
  min-height: 34px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(148, 163, 184, .15) !important;
  color: var(--text) !important;
  background: rgba(15, 23, 42, .42) !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.voice-channel-action.mute {
  border-color: rgba(45, 212, 191, .24) !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, .12), rgba(139, 92, 246, .14)) !important;
}

.voice-channel-action.leave {
  padding: 0 13px !important;
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, .22) !important;
  background: rgba(127, 29, 29, .12) !important;
}

.voice-volume,
.voice-user-controls .voice-volume,
.voice-user-row .voice-volume {
  display: none !important;
}

@media (max-width: 820px) {
  body.nox-mobile .voice-channel-occupants-wrap.active {
    margin-left: 11px !important;
    padding-left: 10px !important;
  }

  body.nox-mobile .voice-channel-actions {
    margin-left: 22px !important;
    margin-bottom: 8px !important;
    grid-template-columns: minmax(0, 1fr) 76px !important;
  }

  body.nox-mobile .voice-channel-action {
    min-height: 36px !important;
    font-size: .84rem !important;
  }

  body.nox-mobile .mobile-voice-dock {
    grid-template-columns: minmax(0, 1fr) 42px 42px !important;
  }

  body.nox-mobile .mobile-voice-action.danger {
    padding: 0 !important;
    font-size: 1.1rem !important;
  }
}

/* =========================================================
   NOX v4.2.2 Voice Controls + Sidebar Cleanup
   - local per-user voice mute
   - clearer text/voice section separation
   - NOX themed scrollbars
   - more compact right activity rail
   ========================================================= */

/* neon scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(45, 212, 191, .62) rgba(7, 10, 28, .46);
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(7, 10, 28, .78), rgba(17, 20, 44, .62));
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 10, 28, .86);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(45, 212, 191, .78), rgba(139, 92, 246, .72));
  box-shadow: 0 0 14px rgba(45, 212, 191, .18);
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(94, 234, 212, .96), rgba(192, 132, 252, .86));
}

/* give text and voice areas their own visual compartments */
.channel-sidebar .channels-section {
  gap: 12px !important;
}
.channel-sidebar .section-head {
  position: relative !important;
  margin-top: 9px !important;
  margin-bottom: 9px !important;
  padding: 0 2px 7px !important;
  border-bottom: 1px solid rgba(139, 92, 246, .16) !important;
}
.channel-sidebar .section-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, rgba(139, 92, 246, .88), transparent);
}
.voice-section {
  margin-top: 18px !important;
  padding-top: 15px !important;
  border-top: 1px solid rgba(45, 212, 191, .20) !important;
  background:
    linear-gradient(180deg, rgba(45, 212, 191, .035), transparent 50%),
    rgba(2, 6, 23, .08) !important;
  border-radius: 18px !important;
}
.voice-section .section-head {
  color: rgba(204, 251, 241, .88) !important;
  border-bottom-color: rgba(45, 212, 191, .18) !important;
}
.voice-section .section-head::after {
  background: linear-gradient(90deg, rgba(45, 212, 191, .94), transparent) !important;
}
.channels-list {
  padding: 2px 2px 2px 0 !important;
}
.voice-channels-list {
  padding: 0 2px 2px 0 !important;
}
.channel-btn.active {
  box-shadow: inset 3px 0 0 rgba(139, 92, 246, .72), 0 10px 24px rgba(139, 92, 246, .08) !important;
}
.voice-channel-btn.active,
.voice-channel-btn.occupied {
  box-shadow: inset 3px 0 0 rgba(45, 212, 191, .72), 0 10px 24px rgba(45, 212, 191, .06) !important;
}

/* local remote-mute button */
.voice-channel-occupant {
  grid-template-columns: 24px minmax(0, 1fr) !important;
}
.voice-channel-occupant.locally-muted {
  opacity: .72 !important;
  background: rgba(15, 23, 42, .32) !important;
  border-color: rgba(148, 163, 184, .11) !important;
}
.voice-channel-occupant.locally-muted .voice-channel-occupant-name {
  color: rgba(203, 213, 225, .78) !important;
}
.voice-local-mute-btn {
  width: 26px !important;
  height: 26px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, .14) !important;
  color: rgba(226, 232, 240, .92) !important;
  background: rgba(15, 23, 42, .42) !important;
  cursor: pointer !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease !important;
}
.voice-local-mute-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(94, 234, 212, .36) !important;
  background: rgba(45, 212, 191, .10) !important;
}
.voice-local-mute-btn.active {
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, .26) !important;
  background: rgba(127, 29, 29, .18) !important;
  box-shadow: 0 0 16px rgba(248, 113, 113, .08) !important;
}
.voice-user-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.voice-user-row.locally-muted {
  opacity: .72 !important;
}

/* compact the right rail so chat gets more room */
body.nox-desktop .app-shell {
  grid-template-columns: 300px minmax(0, 1fr) 250px !important;
}
.info-panel {
  min-width: 0 !important;
}
.info-panel > .info-card {
  padding: 13px !important;
  border-radius: 20px !important;
}
.info-panel .panel-head,
.info-card .panel-head {
  gap: 8px !important;
  margin-bottom: 9px !important;
}
.info-panel h3,
.info-card h3 {
  font-size: .98rem !important;
}
.people-list,
#recentAuthors {
  gap: 7px !important;
}
.person-row {
  min-height: 48px !important;
  padding: 8px !important;
  border-radius: 13px !important;
}
.person-row .avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  font-size: .78rem !important;
}
.person-main strong {
  font-size: .84rem !important;
}
.person-main small {
  font-size: .72rem !important;
}

@media (min-width: 921px) and (max-width: 1480px) {
  body.nox-desktop .app-shell {
    grid-template-columns: 292px minmax(0, 1fr) !important;
  }
  body.nox-desktop .info-panel {
    display: none !important;
  }
}

@media (max-width: 820px) {
  body.nox-mobile .voice-section {
    margin-top: 16px !important;
    padding: 12px 0 0 !important;
    background: transparent !important;
  }
  body.nox-mobile .voice-channel-occupant {
    grid-template-columns: 26px minmax(0, 1fr) auto auto !important;
    min-height: 38px !important;
    padding: 6px 8px !important;
  }
  body.nox-mobile .voice-local-mute-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 12px !important;
  }
  body.nox-mobile *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
}

/* =========================================================
   NOX v4.2.3 Collapsible Sidebar + Reaction Stability
   - collapsible text/voice sections
   - desktop chat gets the space previously used by right activity rail
   - reaction clicks update only the reaction row to avoid screen flashing
   ========================================================= */

body.nox-desktop .app-shell {
  grid-template-columns: 300px minmax(0, 1fr) !important;
}
body.nox-desktop .info-panel {
  display: none !important;
}

.channel-sidebar .section-head.collapsible {
  cursor: pointer !important;
  user-select: none !important;
  border-radius: 12px !important;
  padding: 7px 8px 8px !important;
  margin-left: -4px !important;
  margin-right: -4px !important;
  transition: background .14s ease, border-color .14s ease, color .14s ease !important;
}
.channel-sidebar .section-head.collapsible:hover,
.channel-sidebar .section-head.collapsible:focus-visible {
  background: rgba(255, 255, 255, .045) !important;
  outline: none !important;
}
.channel-sidebar .section-head.collapsible span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.channel-sidebar .section-head.collapsible span::before {
  content: "▾";
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, .14);
  background: rgba(15, 23, 42, .34);
  color: rgba(226, 232, 240, .82);
  font-size: .72rem;
  line-height: 1;
  transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.channel-sidebar .channels-section.collapsed .section-head.collapsible span::before,
.channel-sidebar .voice-section.collapsed .section-head.collapsible span::before {
  content: "▸";
  color: rgba(45, 212, 191, .92);
  border-color: rgba(45, 212, 191, .26);
  background: rgba(45, 212, 191, .08);
}
.channel-sidebar .channels-section.collapsed .channels-list,
.channel-sidebar .voice-section.collapsed .voice-channels-list,
.channel-sidebar .voice-section.collapsed .voice-channel-create {
  display: none !important;
}
.channel-sidebar .channels-section.collapsed,
.channel-sidebar .voice-section.collapsed {
  gap: 0 !important;
  padding-bottom: 0 !important;
}
.channel-sidebar .voice-section.collapsed {
  background: rgba(2, 6, 23, .05) !important;
}
.channel-sidebar .channels-section.collapsed .section-head,
.channel-sidebar .voice-section.collapsed .section-head {
  margin-bottom: 0 !important;
  opacity: .92 !important;
}

.reaction-btn.pending {
  pointer-events: none !important;
  opacity: .72 !important;
  transform: scale(.96) !important;
}
.msg-reactions {
  contain: layout paint !important;
}

@media (max-width: 820px) {
  body.nox-mobile .channel-sidebar .section-head.collapsible {
    min-height: 42px !important;
  }
}

/* =========================================================
   NOX v4.2.4 Messenger reactions + replies
   ========================================================= */
.channel-sidebar .channels-section .channel-create {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(139, 92, 246, .18) !important;
}
.channel-sidebar .channels-section.collapsed .channels-list,
.channel-sidebar .channels-section.collapsed .channel-create,
.channel-sidebar .voice-section.collapsed .voice-channels-list,
.channel-sidebar .voice-section.collapsed .voice-channel-create {
  display: none !important;
}

.msg-meta {
  position: relative !important;
}
.msg-reply-btn {
  margin-left: auto !important;
  width: 28px !important;
  height: 26px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, .14) !important;
  background: rgba(15, 23, 42, .28) !important;
  color: rgba(203, 213, 225, .82) !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  opacity: .45 !important;
  transition: opacity .14s ease, transform .14s ease, background .14s ease, border-color .14s ease !important;
}
.msg:hover .msg-reply-btn,
.msg-reply-btn:focus-visible {
  opacity: 1 !important;
}
.msg-reply-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(94, 234, 212, .42) !important;
  background: rgba(45, 212, 191, .12) !important;
  color: #f8fafc !important;
}

.msg-reply-preview {
  width: 100% !important;
  display: grid !important;
  gap: 3px !important;
  margin: 7px 0 8px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(94, 234, 212, .18) !important;
  border-left: 3px solid rgba(45, 212, 191, .78) !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, .08), rgba(139, 92, 246, .08)) !important;
  color: var(--text) !important;
  text-align: left !important;
  cursor: pointer !important;
}
.msg-reply-preview:hover {
  border-color: rgba(94, 234, 212, .34) !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, .12), rgba(139, 92, 246, .12)) !important;
}
.reply-label {
  color: rgba(94, 234, 212, .96) !important;
  font-size: .76rem !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
}
.reply-text {
  color: rgba(226, 232, 240, .82) !important;
  font-size: .82rem !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.reply-jump-highlight {
  animation: noxReplyJump 1.35s ease !important;
}
@keyframes noxReplyJump {
  0%, 100% { box-shadow: 0 0 0 rgba(45, 212, 191, 0); }
  22% { box-shadow: 0 0 0 2px rgba(45, 212, 191, .42), 0 0 34px rgba(45, 212, 191, .18); }
}

.reply-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 0 0 9px 48px !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(94, 234, 212, .22) !important;
  border-left: 3px solid rgba(45, 212, 191, .88) !important;
  background: rgba(8, 13, 30, .76) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.18) !important;
}
.reply-bar.hidden {
  display: none !important;
}
.reply-bar-main {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}
.reply-cancel {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, .14) !important;
  background: rgba(15, 23, 42, .44) !important;
  color: rgba(226, 232, 240, .86) !important;
  font-size: 1.2rem !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}
.reply-cancel:hover {
  border-color: rgba(248, 113, 113, .38) !important;
  color: #fecaca !important;
}

.msg-reactions.compact {
  position: relative !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 100% !important;
  margin-top: 9px !important;
  padding-top: 7px !important;
  border-top: 1px solid rgba(148, 163, 184, .08) !important;
  contain: none !important;
}
.reaction-summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}
.reaction-summary-btn,
.reaction-menu-toggle,
.reaction-btn {
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  background: rgba(15, 23, 42, .38) !important;
  color: rgba(241, 245, 249, .88) !important;
  font-weight: 900 !important;
  font-size: .86rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease !important;
}
.reaction-summary-btn:hover,
.reaction-menu-toggle:hover,
.reaction-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(94, 234, 212, .38) !important;
  background: rgba(45, 212, 191, .11) !important;
}
.reaction-summary-btn.active,
.reaction-menu-toggle.active,
.reaction-btn.active {
  color: #f8fafc !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, .22), rgba(139, 92, 246, .28)) !important;
  border-color: rgba(94, 234, 212, .54) !important;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, .10), 0 8px 22px rgba(45, 212, 191, .10) !important;
}
.reaction-menu-toggle {
  width: 32px !important;
  padding: 0 !important;
}
.reaction-menu {
  position: absolute !important;
  left: 0 !important;
  bottom: calc(100% + 8px) !important;
  z-index: 70 !important;
  display: none !important;
  grid-template-columns: repeat(8, 32px) !important;
  gap: 6px !important;
  padding: 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(94, 234, 212, .20) !important;
  background: rgba(11, 16, 36, .96) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.38), 0 0 26px rgba(45, 212, 191, .08) !important;
  backdrop-filter: blur(18px) !important;
}
.reaction-menu.open {
  display: grid !important;
}
.reaction-menu .reaction-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  font-size: 1rem !important;
}
.reaction-btn.pending,
.reaction-summary-btn.pending {
  pointer-events: none !important;
  opacity: .72 !important;
  transform: scale(.96) !important;
}

@media (max-width: 820px) {
  .reply-bar {
    margin-left: 0 !important;
    padding: 8px 9px !important;
  }
  .reply-text {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
  .msg-reply-btn {
    opacity: .78 !important;
  }
  .reaction-menu {
    grid-template-columns: repeat(4, 34px) !important;
    border-radius: 18px !important;
    bottom: calc(100% + 7px) !important;
  }
  .reaction-menu .reaction-btn,
  .reaction-menu-toggle,
  .reaction-summary-btn {
    min-width: 34px !important;
    height: 34px !important;
  }
}

/* =========================================================
   NOX v4.2.5 Reactions + composer polish
   - reaction summary is separate from the add/change trigger
   - composer behaves more like a clean messenger input
   ========================================================= */

.msg-reactions.compact {
  margin-top: 8px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: fit-content !important;
  max-width: 100% !important;
}

.reaction-summary:empty {
  display: none !important;
}

.reaction-summary-btn {
  min-width: 34px !important;
  height: 28px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, .18), rgba(139, 92, 246, .24)) !important;
  border-color: rgba(94, 234, 212, .42) !important;
  box-shadow: 0 8px 20px rgba(45, 212, 191, .08) !important;
}

.reaction-menu-toggle {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  opacity: .72 !important;
  background: rgba(15, 23, 42, .40) !important;
  border-color: rgba(148, 163, 184, .13) !important;
  font-size: .92rem !important;
}

.msg:hover .reaction-menu-toggle,
.reaction-menu-toggle:focus-visible,
.reaction-menu:has(.reaction-btn.active) + .reaction-menu-toggle {
  opacity: 1 !important;
}

.reaction-menu-toggle:hover {
  opacity: 1 !important;
  background: rgba(45, 212, 191, .12) !important;
}

.reaction-menu {
  left: 50% !important;
  transform: translateX(-12%) translateY(2px) scale(.98) !important;
  transform-origin: bottom left !important;
  opacity: 0 !important;
  transition: opacity .12s ease, transform .12s ease !important;
}

.reaction-menu.open {
  opacity: 1 !important;
  transform: translateX(-12%) translateY(0) scale(1) !important;
}

.reaction-menu .reaction-btn.active {
  box-shadow: 0 0 0 2px rgba(45, 212, 191, .18), 0 10px 22px rgba(45, 212, 191, .10) !important;
}

.composer-wrap {
  padding: 10px 14px 14px !important;
  background: linear-gradient(180deg, rgba(5, 8, 20, .26), rgba(5, 8, 20, .52)) !important;
}

.typing-indicator {
  min-height: 16px !important;
  margin: 0 0 6px 52px !important;
  padding-left: 2px !important;
  font-size: .78rem !important;
  color: rgba(94, 234, 212, .82) !important;
}

.emoji-strip {
  margin: 0 0 8px 52px !important;
  gap: 6px !important;
  opacity: .78 !important;
}

.emoji-strip button {
  min-width: 34px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, .34) !important;
  border: 1px solid rgba(148, 163, 184, .12) !important;
}

.emoji-strip button:hover {
  opacity: 1 !important;
  background: rgba(45, 212, 191, .10) !important;
}

#messageForm.composer {
  grid-template-columns: 46px minmax(0, 1fr) 104px !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 0 !important;
}

#attachBtn,
#messageForm.composer .attach-btn,
#messageForm.composer .media-upload-btn {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, .82), rgba(20, 184, 166, .74)) !important;
  color: #03110f !important;
  box-shadow: 0 12px 30px rgba(20, 184, 166, .16) !important;
}

#messageInput,
#messageForm.composer textarea {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 138px !important;
  padding: 13px 16px !important;
  border-radius: 18px !important;
  line-height: 1.35 !important;
  background: rgba(3, 6, 18, .72) !important;
  border: 1px solid rgba(148, 163, 184, .15) !important;
  color: rgba(241, 245, 249, .92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 28px rgba(0,0,0,.13) !important;
  scrollbar-width: thin !important;
}

#messageInput::placeholder,
#messageForm.composer textarea::placeholder {
  color: rgba(148, 163, 184, .68) !important;
}

#messageInput:focus,
#messageForm.composer textarea:focus {
  border-color: rgba(94, 234, 212, .44) !important;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, .08), 0 12px 34px rgba(0,0,0,.18) !important;
}

#sendBtn,
#messageForm.composer button[type="submit"],
#messageForm.composer .send-btn {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, .94), rgba(20, 184, 166, .82)) !important;
  box-shadow: 0 12px 30px rgba(20, 184, 166, .16) !important;
}

.reply-bar {
  margin: 0 0 8px 55px !important;
  padding: 8px 10px !important;
  border-radius: 13px !important;
  background: rgba(8, 13, 30, .68) !important;
}

@media (max-width: 820px) {
  .composer-wrap {
    padding: 9px 10px max(10px, env(safe-area-inset-bottom)) !important;
  }
  .typing-indicator,
  .emoji-strip {
    margin-left: 0 !important;
  }
  #messageForm.composer {
    grid-template-columns: 44px minmax(0, 1fr) 76px !important;
    gap: 7px !important;
  }
  #attachBtn,
  #messageForm.composer .attach-btn,
  #messageForm.composer .media-upload-btn {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 15px !important;
  }
  #messageInput,
  #messageForm.composer textarea {
    height: 46px !important;
    min-height: 46px !important;
    padding: 12px 13px !important;
    border-radius: 16px !important;
  }
  #sendBtn,
  #messageForm.composer button[type="submit"],
  #messageForm.composer .send-btn {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 10px !important;
    border-radius: 16px !important;
  }
  .reply-bar {
    margin-left: 0 !important;
  }
  .msg-reactions.compact {
    gap: 5px !important;
  }
  .reaction-menu {
    left: 0 !important;
    transform: translateY(2px) scale(.98) !important;
  }
  .reaction-menu.open {
    transform: translateY(0) scale(1) !important;
  }
}


/* =========================================================
   NOX v4.2.6 emoji picker hotfix
   Keep the emoji menu visible after composer polish.
   ========================================================= */
.composer-wrap {
  position: relative !important;
  overflow: visible !important;
}

.emoji-strip {
  position: relative !important;
  overflow: visible !important;
  z-index: 30 !important;
}

.emoji-toggle {
  position: relative !important;
  z-index: 2 !important;
}

.emoji-picker {
  position: absolute !important;
  left: 0 !important;
  bottom: calc(100% + 10px) !important;
  z-index: 200 !important;
  display: none !important;
  width: min(520px, calc(100vw - 44px)) !important;
  max-height: min(255px, 45vh) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)) !important;
  gap: 7px !important;
  padding: 10px !important;
  border: 1px solid rgba(94, 234, 212, .32) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(13, 16, 39, .99), rgba(10, 13, 32, .99)) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(139, 92, 246, .10) !important;
  backdrop-filter: blur(16px) !important;
}

.emoji-picker.open {
  display: grid !important;
}

.emoji-picker button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  width: 38px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  font-size: 1.08rem !important;
  line-height: 1 !important;
}

@media (max-width: 820px) {
  body.nox-mobile .emoji-picker {
    left: 0 !important;
    bottom: calc(100% + 8px) !important;
    width: calc(100vw - 28px) !important;
    max-height: min(230px, 42vh) !important;
  }
}


/* NOX v4.2.8 - safe emoji picker visual cleanup without reverting reactions */
.emoji-strip {
  position: relative;
  z-index: 5;
  overflow: visible !important;
}

.emoji-toggle,
.emoji-picker button,
.reaction-menu,
.reaction-btn,
.reaction-menu-toggle,
.reaction-summary-btn {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif !important;
}

.emoji-picker,
.emoji-panel,
.quick-emoji-panel {
  left: 0 !important;
  bottom: calc(100% + 12px) !important;
  z-index: 220 !important;
  width: min(520px, calc(100vw - 40px)) !important;
  max-width: min(520px, calc(100vw - 40px)) !important;
  max-height: 260px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(45, 212, 191, .28) !important;
  background: #0b1026 !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.68) !important;
  backdrop-filter: none !important;
  isolation: isolate;
}

.emoji-picker::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(19, 26, 59, .98), rgba(10, 16, 37, 1));
  z-index: -1;
}

.emoji-picker button {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

.emoji-picker button:hover {
  background: rgba(45, 212, 191, .10) !important;
  border-color: rgba(45, 212, 191, .35) !important;
}

.msg-reactions.compact .reaction-menu-toggle {
  font-family: "Segoe UI", system-ui, sans-serif !important;
}

@media (max-width: 820px) {
  .emoji-picker,
  .emoji-panel,
  .quick-emoji-panel {
    left: -4px !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-width: min(420px, calc(100vw - 24px)) !important;
    max-height: 220px !important;
  }
}

/* NOX v4.3.0 - private channels + mobile foundation */
.private-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  font-size: .88em;
  filter: drop-shadow(0 0 8px rgba(45,212,191,.28));
}

.private-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(45, 212, 191, .16);
  border-radius: 12px;
  background: rgba(45, 212, 191, .055);
  color: rgba(226, 232, 240, .9);
  font-size: .84rem;
  cursor: pointer;
}

.private-toggle input {
  accent-color: #2dd4bf;
}

.invite-picker {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(139, 92, 246, .24);
  border-radius: 14px;
  background: rgba(15, 23, 42, .72);
  max-height: 210px;
  overflow: auto;
}

.invite-picker-title,
.invite-picker-empty {
  font-size: .76rem;
  color: rgba(226, 232, 240, .68);
}

.invite-picker-list {
  display: grid;
  gap: 6px;
}

.invite-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
}

.invite-user-chip:hover {
  background: rgba(45,212,191,.08);
  border-color: rgba(45,212,191,.22);
}

.invite-user-chip input {
  accent-color: #8b5cf6;
}

.invite-user-chip span {
  display: grid;
  gap: 1px;
  min-width: 0;
  font-size: .82rem;
}

.invite-user-chip small {
  color: rgba(148, 163, 184, .82);
  font-size: .72rem;
}

.voice-channel-btn.private,
.channel-row:has(.private-badge) .channel-btn {
  border-color: rgba(45, 212, 191, .24);
  background: linear-gradient(135deg, rgba(45,212,191,.06), rgba(139,92,246,.06));
}

body.nox-phone #mobileTopbar,
body.nox-tablet #mobileTopbar {
  display: grid !important;
}

@media (max-width: 820px) {
  body.nox-phone .mobile-nav,
  body.nox-mobile .mobile-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  body.nox-phone .mobile-nav-btn,
  body.nox-mobile .mobile-nav-btn {
    min-height: 38px;
    padding: 8px 6px;
    font-size: .78rem;
    white-space: nowrap;
  }

  body.nox-phone .app-shell.mobile-view-voice .channel-sidebar,
  body.nox-mobile .app-shell.mobile-view-voice .channel-sidebar {
    display: flex !important;
  }

  body.nox-phone .app-shell.mobile-view-voice .chat-panel,
  body.nox-phone .app-shell.mobile-view-voice .info-panel,
  body.nox-mobile .app-shell.mobile-view-voice .chat-panel,
  body.nox-mobile .app-shell.mobile-view-voice .info-panel {
    display: none !important;
  }

  body.nox-phone .app-shell.mobile-view-voice .brand-panel,
  body.nox-phone .app-shell.mobile-view-voice .user-card,
  body.nox-phone .app-shell.mobile-view-voice .side-actions,
  body.nox-phone .app-shell.mobile-view-voice .channels-section,
  body.nox-mobile .app-shell.mobile-view-voice .brand-panel,
  body.nox-mobile .app-shell.mobile-view-voice .user-card,
  body.nox-mobile .app-shell.mobile-view-voice .side-actions,
  body.nox-mobile .app-shell.mobile-view-voice .channels-section {
    display: none !important;
  }

  body.nox-phone .app-shell.mobile-view-voice .voice-section,
  body.nox-mobile .app-shell.mobile-view-voice .voice-section {
    display: grid !important;
    gap: 12px;
    margin-top: 0;
  }

  body.nox-phone .app-shell.mobile-view-channels .voice-section,
  body.nox-phone .app-shell.mobile-view-channels .voice-panel,
  body.nox-mobile .app-shell.mobile-view-channels .voice-section,
  body.nox-mobile .app-shell.mobile-view-channels .voice-panel {
    display: none !important;
  }

  body.nox-phone .app-shell.mobile-view-info .channel-sidebar,
  body.nox-phone .app-shell.mobile-view-info .chat-panel,
  body.nox-mobile .app-shell.mobile-view-info .channel-sidebar,
  body.nox-mobile .app-shell.mobile-view-info .chat-panel {
    display: none !important;
  }

  body.nox-phone .app-shell.mobile-view-info .info-panel,
  body.nox-mobile .app-shell.mobile-view-info .info-panel {
    display: grid !important;
  }
}

body.nox-ios.nox-pwa .composer-wrap {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}


/* NOX v4.3.1 - visible private invites + cleaner mobile shell */
.invite-picker.hidden { display: none !important; }
.private-toggle {
  justify-content: flex-start;
  position: relative;
}
.private-toggle::after {
  content: "zaproś osoby po zaznaczeniu";
  margin-left: auto;
  color: rgba(148, 163, 184, .78);
  font-size: .68rem;
  font-weight: 800;
}
.private-toggle:has(input:checked)::after {
  content: "wybierz zaproszonych niżej";
  color: rgba(45, 212, 191, .92);
}
.invite-picker:not(.hidden) {
  display: grid !important;
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .10), 0 14px 34px rgba(0,0,0,.20);
}
.channel-invite-btn,
.voice-channel-manage-btn {
  border: 1px solid rgba(45, 212, 191, .26);
  background: rgba(45, 212, 191, .075);
  color: rgba(226, 232, 240, .94);
  border-radius: 13px;
  min-width: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.channel-invite-btn:hover,
.voice-channel-manage-btn:hover {
  border-color: rgba(45, 212, 191, .48);
  background: rgba(45, 212, 191, .14);
}
.voice-channel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}
.voice-channel-row .voice-channel-btn {
  width: 100%;
}
.channel-access-modal.hidden { display: none !important; }
.channel-access-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 18px;
}
.channel-access-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(10px);
}
.channel-access-card {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 34px));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: 24px;
  border: 1px solid rgba(45, 212, 191, .24);
  background: linear-gradient(180deg, rgba(18, 24, 56, .98), rgba(8, 13, 31, .98));
  box-shadow: 0 30px 90px rgba(0,0,0,.62);
}
.channel-access-head {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.channel-access-head small {
  display: block;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent-2);
  font-weight: 1000;
  font-size: .68rem;
}
.channel-access-head h3 {
  margin: 5px 0 4px;
  font-size: 1.08rem;
}
.channel-access-head p {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
}
.channel-access-close {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor: pointer;
  font-size: 1.2rem;
}
.channel-access-users {
  display: grid;
  gap: 8px;
  padding: 14px 18px;
  overflow-y: auto;
}
.access-user-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.035);
  cursor: pointer;
}
.access-user-row:hover {
  border-color: rgba(45, 212, 191, .28);
  background: rgba(45, 212, 191, .07);
}
.access-user-row input { accent-color: #2dd4bf; }
.access-avatar { width: 34px; height: 34px; border-radius: 13px; }
.access-user-row span { display: grid; min-width: 0; }
.access-user-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-user-row small { color: rgba(148, 163, 184, .82); }
.channel-access-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.channel-access-actions .primary {
  border: 0;
  border-radius: 15px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--accent-2), #22c1ad);
  color: #03110f;
  font-weight: 1000;
  cursor: pointer;
}

@media (max-width: 920px) {
  body.nox-phone .app-shell,
  body.nox-mobile .app-shell {
    gap: 8px;
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }
  body.nox-phone .mobile-topbar,
  body.nox-mobile .mobile-topbar {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px;
    border-radius: 18px;
  }
  body.nox-phone .mobile-brand,
  body.nox-mobile .mobile-brand {
    min-height: 32px;
  }
  body.nox-phone .mobile-symbol,
  body.nox-mobile .mobile-symbol {
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }
  body.nox-phone .mobile-brand small,
  body.nox-mobile .mobile-brand small {
    display: none;
  }
  body.nox-phone .mobile-nav,
  body.nox-mobile .mobile-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.nox-phone .mobile-nav-btn,
  body.nox-mobile .mobile-nav-btn {
    font-size: .76rem;
    padding: 8px 4px;
    border-radius: 13px;
  }
  body.nox-phone .app-shell.mobile-view-channels .channel-sidebar,
  body.nox-mobile .app-shell.mobile-view-channels .channel-sidebar,
  body.nox-phone .app-shell.mobile-view-voice .channel-sidebar,
  body.nox-mobile .app-shell.mobile-view-voice .channel-sidebar,
  body.nox-phone .app-shell.mobile-view-info .channel-sidebar,
  body.nox-mobile .app-shell.mobile-view-info .channel-sidebar {
    display: flex !important;
    padding: 10px;
    overflow-y: auto;
  }
  body.nox-phone .app-shell.mobile-view-channels .brand-panel,
  body.nox-phone .app-shell.mobile-view-channels .user-card,
  body.nox-phone .app-shell.mobile-view-channels .side-actions,
  body.nox-phone .app-shell.mobile-view-channels .voice-section,
  body.nox-mobile .app-shell.mobile-view-channels .brand-panel,
  body.nox-mobile .app-shell.mobile-view-channels .user-card,
  body.nox-mobile .app-shell.mobile-view-channels .side-actions,
  body.nox-mobile .app-shell.mobile-view-channels .voice-section {
    display: none !important;
  }
  body.nox-phone .app-shell.mobile-view-voice .brand-panel,
  body.nox-phone .app-shell.mobile-view-voice .user-card,
  body.nox-phone .app-shell.mobile-view-voice .side-actions,
  body.nox-phone .app-shell.mobile-view-voice .channels-section,
  body.nox-mobile .app-shell.mobile-view-voice .brand-panel,
  body.nox-mobile .app-shell.mobile-view-voice .user-card,
  body.nox-mobile .app-shell.mobile-view-voice .side-actions,
  body.nox-mobile .app-shell.mobile-view-voice .channels-section {
    display: none !important;
  }
  body.nox-phone .app-shell.mobile-view-info .channels-section,
  body.nox-phone .app-shell.mobile-view-info .voice-section,
  body.nox-mobile .app-shell.mobile-view-info .channels-section,
  body.nox-mobile .app-shell.mobile-view-info .voice-section {
    display: none !important;
  }
  body.nox-phone .app-shell.mobile-view-info .brand-panel,
  body.nox-phone .app-shell.mobile-view-info .user-card,
  body.nox-phone .app-shell.mobile-view-info .side-actions,
  body.nox-mobile .app-shell.mobile-view-info .brand-panel,
  body.nox-mobile .app-shell.mobile-view-info .user-card,
  body.nox-mobile .app-shell.mobile-view-info .side-actions {
    display: grid !important;
  }
  body.nox-phone .app-shell.mobile-view-info .info-panel,
  body.nox-mobile .app-shell.mobile-view-info .info-panel {
    display: none !important;
  }
  body.nox-phone .app-shell.mobile-view-chat .channel-sidebar,
  body.nox-phone .app-shell.mobile-view-chat .info-panel,
  body.nox-mobile .app-shell.mobile-view-chat .channel-sidebar,
  body.nox-mobile .app-shell.mobile-view-chat .info-panel {
    display: none !important;
  }
  body.nox-phone .app-shell.mobile-view-chat .chat-panel,
  body.nox-mobile .app-shell.mobile-view-chat .chat-panel {
    display: grid !important;
  }
  body.nox-phone .channel-create,
  body.nox-phone .voice-channel-create,
  body.nox-mobile .channel-create,
  body.nox-mobile .voice-channel-create {
    padding: 10px;
    border-radius: 18px;
    background: rgba(5, 8, 24, .42);
    border: 1px solid rgba(255,255,255,.06);
  }
  body.nox-phone .chat-header,
  body.nox-mobile .chat-header {
    padding: 14px 16px;
  }
  body.nox-phone .composer-wrap,
  body.nox-mobile .composer-wrap {
    padding: 8px;
    gap: 7px;
  }
  body.nox-phone .composer,
  body.nox-mobile .composer {
    grid-template-columns: 44px minmax(0, 1fr) 72px;
    gap: 7px;
  }
  body.nox-phone .composer textarea,
  body.nox-mobile .composer textarea {
    min-height: 44px;
    font-size: .92rem;
  }
  body.nox-phone .composer button[type="submit"],
  body.nox-mobile .composer button[type="submit"] {
    min-width: 72px;
    padding-inline: 8px;
  }
  body.nox-phone .messages,
  body.nox-mobile .messages {
    padding: 12px 10px;
  }
  body.nox-phone .msg,
  body.nox-mobile .msg {
    max-width: 96%;
    padding: 12px;
  }
}

/* NOX v4.3.2/4.3.3 - channel control, cleaner private access, presence toasts */
.private-toggle {
  display: grid !important;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 12px !important;
  min-height: 54px;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(15,23,42,.80), rgba(30,41,59,.52)) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.private-toggle.checked,
.private-toggle:has(input:checked) {
  border-color: rgba(45,212,191,.48) !important;
  background: linear-gradient(135deg, rgba(20,184,166,.16), rgba(124,58,237,.12)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(45,212,191,.08), 0 12px 30px rgba(45,212,191,.08);
}
.private-toggle input {
  width: 18px;
  height: 18px;
}
.private-toggle::before {
  content: "Dostęp";
  display: block;
  grid-column: 2;
  margin-bottom: -3px;
  color: rgba(45,212,191,.92);
  font-size: .67rem;
  line-height: 1;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.private-toggle::after {
  grid-column: 2;
  margin-left: 0 !important;
  content: "Publiczny: widzą wszyscy. Zaznacz, aby zaprosić tylko wybrane osoby." !important;
  font-size: .69rem !important;
  line-height: 1.25;
}
.private-toggle.checked::after,
.private-toggle:has(input:checked)::after {
  content: "Prywatny: wybierz zaproszonych poniżej. Właściciel i admin mają dostęp zawsze." !important;
}
.invite-picker:not(.hidden) {
  padding: 12px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(6, 12, 31, .92), rgba(13, 19, 43, .92)) !important;
  border: 1px solid rgba(45, 212, 191, .24) !important;
}
.invite-picker-title {
  display: grid;
  gap: 2px;
  color: rgba(226,232,240,.92) !important;
}
.invite-picker-title strong {
  color: rgba(45,212,191,.96);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.invite-picker-title small {
  color: rgba(148,163,184,.86);
}
.invite-user-chip {
  min-height: 42px;
  display: grid !important;
  grid-template-columns: 18px 32px minmax(0, 1fr);
  background: rgba(255,255,255,.035) !important;
}
.invite-user-chip:has(input:checked) {
  border-color: rgba(45,212,191,.45) !important;
  background: rgba(45,212,191,.10) !important;
}
.invite-avatar {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(45,212,191,.22), rgba(139,92,246,.25));
  font-weight: 1000;
}
.invite-user-chip span:last-child {
  display: grid;
  min-width: 0;
}
.invite-user-chip strong,
.invite-user-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invite-user-chip small {
  color: rgba(148,163,184,.82);
  font-size: .68rem;
}
.channel-delete-btn,
.voice-channel-delete-btn {
  border: 1px solid rgba(248,113,113,.26);
  background: rgba(127,29,29,.20);
  color: rgba(254,202,202,.95);
  border-radius: 13px;
  min-width: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-weight: 900;
}
.channel-delete-btn:hover,
.voice-channel-delete-btn:hover {
  border-color: rgba(248,113,113,.52);
  background: rgba(127,29,29,.34);
}
.voice-channel-row {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
}
.nox-toast-root {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 5000;
  display: grid;
  gap: 10px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 28px));
}
.nox-toast {
  transform: translateY(14px) scale(.98);
  opacity: 0;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(45,212,191,.24);
  background: linear-gradient(135deg, rgba(8,13,31,.96), rgba(18,24,50,.96));
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  color: rgba(248,250,252,.96);
  transition: opacity .22s ease, transform .22s ease;
}
.nox-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.nox-toast strong {
  font-size: .9rem;
}
.nox-toast small {
  color: rgba(148,163,184,.92);
  font-weight: 800;
}
.nox-toast.voice {
  border-color: rgba(45,212,191,.38);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 28px rgba(45,212,191,.12);
}
.nox-toast.warn {
  border-color: rgba(251,191,36,.34);
}
.nox-toast.muted {
  opacity: .92;
}
@media (max-width: 920px) {
  .nox-toast-root {
    top: calc(env(safe-area-inset-top) + 82px);
    right: 10px;
    bottom: auto;
    left: 10px;
    max-width: none;
  }
  .nox-toast {
    border-radius: 16px;
    padding: 10px 12px;
  }
  body.nox-phone .app-shell.mobile-view-voice .channel-sidebar,
  body.nox-mobile .app-shell.mobile-view-voice .channel-sidebar,
  body.nox-phone .app-shell.mobile-view-channels .channel-sidebar,
  body.nox-mobile .app-shell.mobile-view-channels .channel-sidebar {
    min-height: 0;
    max-height: calc(var(--app-height, 100vh) - 102px);
  }
  body.nox-phone .app-shell.mobile-view-voice .voice-section,
  body.nox-mobile .app-shell.mobile-view-voice .voice-section,
  body.nox-phone .app-shell.mobile-view-channels .channels-section,
  body.nox-mobile .app-shell.mobile-view-channels .channels-section {
    margin-top: 0;
    border-radius: 20px;
    background: rgba(8, 13, 32, .74);
    border: 1px solid rgba(45,212,191,.12);
    padding: 10px;
  }
  body.nox-phone .app-shell.mobile-view-voice .voice-channel-btn,
  body.nox-mobile .app-shell.mobile-view-voice .voice-channel-btn,
  body.nox-phone .app-shell.mobile-view-channels .channel-btn,
  body.nox-mobile .app-shell.mobile-view-channels .channel-btn {
    min-height: 58px;
  }
}

/* NOX v4.4.0 beta readiness */
.activity-log-list .log-row {
  border-left: 3px solid rgba(45, 212, 191, .45);
}
.log-time {
  color: var(--accent, #2dd4bf);
  font-variant-numeric: tabular-nums;
}
#enableNotificationsBtn.notifications-on {
  border-color: rgba(45, 212, 191, .55);
  background: rgba(45, 212, 191, .10);
}
#registrationHint {
  margin-top: 0;
  line-height: 1.45;
}
.auth-card #registrationCodeLabel.hidden {
  display: none;
}
.admin-card .activity-log-list {
  max-height: min(56vh, 620px);
  overflow: auto;
  padding-right: 4px;
}


/* NOX v4.4.3 - restore notification shortcut + softer emoji picker */
.mobile-topbar {
  grid-template-columns: auto 44px 1fr !important;
  align-items: center !important;
}

.mobile-notify-btn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(45, 212, 191, .24);
  background: linear-gradient(135deg, rgba(45, 212, 191, .12), rgba(139, 92, 246, .12));
  color: var(--text);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.22);
}

.mobile-notify-btn:hover,
.mobile-notify-btn.notifications-on {
  border-color: rgba(45, 212, 191, .55);
  box-shadow: 0 0 0 1px rgba(45, 212, 191, .10), 0 0 18px rgba(45, 212, 191, .18);
}

body.nox-mobile .mobile-notify-btn,
body.nox-phone .mobile-notify-btn,
body.nox-tablet .mobile-notify-btn {
  display: inline-flex !important;
}

body.nox-mobile #enableNotificationsBtn,
body.nox-phone #enableNotificationsBtn,
body.nox-tablet #enableNotificationsBtn {
  display: inline-flex !important;
}

/* Softer, glassy emoji picker restored after logger patches. */
.emoji-picker,
.emoji-panel,
.quick-emoji-panel {
  z-index: 260 !important;
  border-radius: 22px !important;
  border: 1px solid rgba(94, 234, 212, .22) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, .16), transparent 34%),
    radial-gradient(circle at 78% 10%, rgba(139, 92, 246, .18), transparent 38%),
    linear-gradient(180deg, rgba(12, 17, 39, .985), rgba(7, 11, 29, .99)) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.04) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  padding: 13px !important;
  gap: 8px !important;
}

.emoji-picker::before {
  background: transparent !important;
}

.emoji-picker button {
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.065) !important;
  background: rgba(255,255,255,.028) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease !important;
}

.emoji-picker button:hover {
  transform: translateY(-1px) scale(1.04) !important;
  background: rgba(45, 212, 191, .13) !important;
  border-color: rgba(45, 212, 191, .42) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.26), 0 0 18px rgba(45, 212, 191, .10) !important;
}

body.nox-mobile .emoji-picker,
body.nox-phone .emoji-picker,
body.nox-tablet .emoji-picker {
  width: min(440px, calc(100vw - 26px)) !important;
  max-width: min(440px, calc(100vw - 26px)) !important;
  max-height: min(270px, 44vh) !important;
  left: -2px !important;
}

/* NOX v4.4.6 - beta install guide */
.beta-install-body {
  align-items: start;
}
.beta-install-card {
  width: min(1120px, 100%);
  margin: 10px 0;
}
.beta-hero h1 {
  margin: 2px 0 8px;
}
.beta-main-actions .primary,
.beta-main-actions .ghost {
  min-height: 44px;
  padding-left: 18px;
  padding-right: 18px;
}
.beta-status-card,
.beta-section {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(45, 212, 191, .18);
  background: linear-gradient(145deg, rgba(13, 20, 44, .82), rgba(24, 18, 58, .64));
  border-radius: 24px;
  padding: clamp(16px, 3vw, 24px);
  margin-top: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
.beta-status-card strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.beta-status-card p,
.beta-box p,
.beta-section p,
.beta-section li {
  color: var(--muted);
  line-height: 1.6;
}
.beta-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.beta-pill-row span {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 800;
  font-size: .9rem;
}
.beta-test-grid {
  margin-top: 16px;
}
.beta-box p {
  margin-top: 10px;
  font-size: .93rem;
}
.beta-section h2 {
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
}
.beta-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.beta-checklist label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.beta-checklist input {
  margin-top: 2px;
  accent-color: #2dd4bf;
}
.beta-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.beta-two-col ul,
.beta-warnings ul {
  margin: 0;
  padding-left: 20px;
}
.beta-warnings {
  border-color: rgba(251, 191, 36, .28);
  background: linear-gradient(145deg, rgba(52, 37, 12, .42), rgba(18, 19, 47, .72));
}
.beta-footer-note {
  text-align: center;
}
@media (max-width: 920px) {
  .beta-checklist,
  .beta-two-col {
    grid-template-columns: 1fr;
  }
  .beta-install-card {
    margin: 0;
  }
}

/* NOX v4.4.8 - friendlier beta install page */
.beta-install-body {
  min-height: 100vh;
}

.beta-install-card {
  width: min(1120px, calc(100vw - 28px));
  margin: 34px auto;
  padding: clamp(20px, 4vw, 42px);
}

.beta-install-hero {
  align-items: start;
}

.beta-lead {
  max-width: 780px;
  font-size: 1.04rem;
  line-height: 1.65;
}

.beta-install-actions {
  align-items: center;
}

.beta-main-cta {
  min-width: 190px;
  font-weight: 900;
}

.beta-quick-start {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 14px;
  margin: 24px 0 30px;
}

.beta-step-card,
.beta-feature-card,
.beta-report-box,
.beta-honest-note,
.beta-howto-box {
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}

.beta-step-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
}

.beta-step-card h2,
.beta-feature-card h3,
.beta-report-box h2,
.beta-honest-note h2 {
  margin: 0 0 8px;
}

.beta-step-card p,
.beta-feature-card p,
.beta-report-box p,
.beta-honest-note p {
  margin: 0;
  color: rgba(232, 238, 255, .78);
  line-height: 1.55;
}

.beta-step-number {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 950;
  color: #09111f;
  background: linear-gradient(135deg, #2dd4bf, #a78bfa);
  box-shadow: 0 0 28px rgba(45,212,191,.22);
}

.beta-section {
  position: relative;
  z-index: 1;
  margin: 30px 0;
}

.beta-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.beta-section-title span {
  font-size: 1.35rem;
  font-weight: 950;
}

.beta-section-title small {
  color: rgba(232,238,255,.62);
}

.beta-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.beta-feature-card {
  padding: 18px;
  border-radius: 20px;
}

.beta-install-grid {
  margin-top: 8px;
}

.beta-howto-box li {
  margin: 8px 0;
  line-height: 1.45;
}

.beta-report-box,
.beta-honest-note {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  padding: 20px;
  border-radius: 24px;
}

.beta-report-examples {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.beta-report-examples span {
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(232,238,255,.82);
  background: rgba(2,6,23,.32);
  border: 1px solid rgba(255,255,255,.07);
}

.beta-honest-note {
  border-color: rgba(251,191,36,.24);
  background: linear-gradient(180deg, rgba(251,191,36,.12), rgba(255,255,255,.035));
}

#notifyBtn.notifications-on,
.notifications-on {
  border-color: rgba(45,212,191,.45) !important;
  color: #d9fffa !important;
  background: rgba(45,212,191,.12) !important;
}

@media (max-width: 900px) {
  .beta-quick-start,
  .beta-feature-grid,
  .beta-install-grid {
    grid-template-columns: 1fr;
  }

  .beta-section-title {
    display: block;
  }

  .beta-section-title small {
    display: block;
    margin-top: 4px;
  }
}

@media (max-width: 560px) {
  .beta-install-card {
    width: min(100vw - 16px, 1120px);
    margin: 8px auto 18px;
    padding: 18px;
    border-radius: 26px;
  }

  .beta-install-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .install-icon {
    width: 64px;
    height: 64px;
  }

  .install-hero h1 {
    font-size: clamp(2rem, 12vw, 3.2rem);
  }

  .beta-install-actions a,
  .beta-install-actions button {
    width: 100%;
  }
}


/* NOX v4.4.9 - friendly beta install page */
.hidden { display: none !important; }
.install-friendly { min-height: 100vh; }
.install-page { width: min(1120px, calc(100vw - 28px)); margin: 0 auto; padding: 32px 0 56px; display: grid; gap: 18px; }
.install-hero-card, .install-card.flat { border: 1px solid rgba(45,212,191,.18); background: linear-gradient(145deg, rgba(17,24,56,.94), rgba(12,15,36,.96)); border-radius: 28px; box-shadow: 0 24px 80px rgba(0,0,0,.32); padding: clamp(20px, 4vw, 38px); }
.install-logo-row { display: flex; gap: 18px; align-items: center; }
.install-hero-card h1 { margin: 6px 0 12px; font-size: clamp(2rem, 6vw, 4.5rem); line-height: .95; }
.install-hero-card p { max-width: 820px; color: var(--muted); font-size: clamp(1rem, 2vw, 1.25rem); }
.install-icon { width: 72px; height: 72px; border-radius: 22px; box-shadow: 0 0 32px rgba(45,212,191,.2); }
.install-actions.big { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; align-items: center; }
.install-main-link { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; }
.install-simple-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.install-box { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); border-radius: 22px; padding: 18px; }
.install-box h2, .install-box h3 { margin-top: 0; }
.install-box p, .install-box li, .install-note { color: var(--muted); }
.install-checklist { display: grid; gap: 10px; padding-left: 1.2rem; color: var(--muted); }
@media (max-width: 820px) {
  .install-page { width: min(100vw - 22px, 720px); padding-top: 18px; }
  .install-logo-row { align-items: flex-start; }
  .install-icon { width: 56px; height: 56px; border-radius: 18px; }
  .install-simple-grid { grid-template-columns: 1fr; }
  .install-actions.big a, .install-actions.big button { width: 100%; }
}


/* NOX v4.5.7 - Mobile PWA function restore */
body.nox-mobile .mobile-nav,
body.nox-phone .mobile-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body.nox-mobile .mobile-nav-btn,
body.nox-phone .mobile-nav-btn {
  min-height: 40px;
  display: grid;
  place-items: center;
}
body.nox-mobile .app-shell.mobile-view-voice .channel-sidebar,
body.nox-phone .app-shell.mobile-view-voice .channel-sidebar {
  display: flex !important;
}
body.nox-mobile .app-shell.mobile-view-voice .voice-section,
body.nox-phone .app-shell.mobile-view-voice .voice-section {
  display: grid !important;
}
body.nox-mobile .app-shell.mobile-view-voice .channels-section,
body.nox-mobile .app-shell.mobile-view-voice .brand-panel,
body.nox-mobile .app-shell.mobile-view-voice .user-card,
body.nox-mobile .app-shell.mobile-view-voice .side-actions,
body.nox-phone .app-shell.mobile-view-voice .channels-section,
body.nox-phone .app-shell.mobile-view-voice .brand-panel,
body.nox-phone .app-shell.mobile-view-voice .user-card,
body.nox-phone .app-shell.mobile-view-voice .side-actions {
  display: none !important;
}
body.nox-mobile .channel-create .private-toggle,
body.nox-mobile .voice-channel-create .private-toggle,
body.nox-phone .channel-create .private-toggle,
body.nox-phone .voice-channel-create .private-toggle {
  min-height: 44px;
  align-items: center;
}
body.nox-mobile .invite-picker:not(.hidden),
body.nox-phone .invite-picker:not(.hidden) {
  max-height: 260px;
  overflow-y: auto;
}
body.nox-mobile #adminLogsPanel,
body.nox-phone #adminLogsPanel {
  min-height: 0;
}

/* =========================================================
   NOX v4.5.9 - Mobile reactions + emoji overlay polish
   - reaction menu becomes a solid bottom-sheet on phone/PWA
   - emoji picker uses an opaque background to stop content bleed-through
   ========================================================= */
body.nox-mobile .reaction-menu,
body.nox-phone .reaction-menu,
body.nox-tablet .reaction-menu {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px) !important;
  width: min(380px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  transform: translateX(-50%) translateY(10px) scale(.98) !important;
  transform-origin: bottom center !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 12px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(94, 234, 212, .34) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, .16), transparent 35%),
    radial-gradient(circle at 82% 4%, rgba(139, 92, 246, .20), transparent 38%),
    linear-gradient(180deg, #101735 0%, #080d22 100%) !important;
  box-shadow: 0 28px 88px rgba(0,0,0,.78), 0 0 0 1px rgba(255,255,255,.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
  z-index: 12000 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.nox-mobile .reaction-menu.open,
body.nox-phone .reaction-menu.open,
body.nox-tablet .reaction-menu.open {
  display: grid !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

body.nox-mobile .reaction-menu::before,
body.nox-phone .reaction-menu::before,
body.nox-tablet .reaction-menu::before {
  content: "Reakcja";
  grid-column: 1 / -1;
  display: block;
  padding: 0 2px 2px;
  color: rgba(94, 234, 212, .96);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.nox-mobile .reaction-menu .reaction-btn,
body.nox-phone .reaction-menu .reaction-btn,
body.nox-tablet .reaction-menu .reaction-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  border-radius: 16px !important;
  font-size: 1.22rem !important;
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.085) !important;
}

body.nox-mobile .reaction-menu .reaction-btn:active,
body.nox-phone .reaction-menu .reaction-btn:active,
body.nox-tablet .reaction-menu .reaction-btn:active {
  transform: scale(.96) !important;
  background: rgba(45, 212, 191, .16) !important;
  border-color: rgba(94, 234, 212, .52) !important;
}

body.nox-mobile .reaction-menu-toggle,
body.nox-phone .reaction-menu-toggle,
body.nox-tablet .reaction-menu-toggle {
  opacity: 1 !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  font-size: 1rem !important;
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(94, 234, 212, .18) !important;
}

body.nox-mobile .emoji-picker,
body.nox-phone .emoji-picker,
body.nox-tablet .emoji-picker,
body.nox-mobile .emoji-panel,
body.nox-phone .emoji-panel,
body.nox-tablet .emoji-panel,
body.nox-mobile .quick-emoji-panel,
body.nox-phone .quick-emoji-panel,
body.nox-tablet .quick-emoji-panel {
  background:
    radial-gradient(circle at 16% 0%, rgba(45, 212, 191, .14), transparent 34%),
    radial-gradient(circle at 88% 2%, rgba(139, 92, 246, .18), transparent 38%),
    linear-gradient(180deg, #101735 0%, #080d22 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(94, 234, 212, .32) !important;
  box-shadow: 0 28px 88px rgba(0,0,0,.80), 0 0 0 1px rgba(255,255,255,.04) !important;
  isolation: isolate !important;
  z-index: 11000 !important;
}

body.nox-mobile .emoji-picker::before,
body.nox-phone .emoji-picker::before,
body.nox-tablet .emoji-picker::before {
  background: transparent !important;
}

body.nox-mobile .emoji-picker button,
body.nox-phone .emoji-picker button,
body.nox-tablet .emoji-picker button {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.085) !important;
}

/* NOX v4.7.0 Direct Messages Core */
.dm-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(126, 94, 255, .16);
}
.dm-list,
.dm-start-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dm-row,
.dm-start-user {
  width: 100%;
  border: 1px solid rgba(92, 245, 220, .16);
  background: rgba(9, 18, 44, .55);
  color: var(--text);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.dm-row:hover,
.dm-start-user:hover,
.dm-row.active {
  border-color: rgba(92, 245, 220, .56);
  background: linear-gradient(135deg, rgba(33, 199, 184, .18), rgba(126, 94, 255, .13));
}
.dm-row.active { box-shadow: inset 3px 0 0 rgba(92, 245, 220, .72); }
.dm-avatar,
.dm-start-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 12px;
}
.dm-main,
.dm-start-user span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-main strong,
.dm-start-user strong { font-size: .92rem; }
.dm-main small,
.dm-start-user small {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 165px;
}
.dm-start-box {
  border: 1px solid rgba(126, 94, 255, .16);
  background: rgba(9, 18, 44, .28);
  border-radius: 18px;
  padding: 10px;
}
.dm-start-user.existing { opacity: .86; }
.msg.own .msg-main { background: rgba(52, 37, 104, .52); }

@media (max-width: 820px) {
  .mobile-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mobile-nav-btn { font-size: .76rem; padding-inline: 6px; }
  body.nox-phone .app-shell.mobile-view-dm .channel-sidebar,
  body.nox-mobile .app-shell.mobile-view-dm .channel-sidebar {
    display: flex;
    min-height: 0;
  }
  body.nox-phone .app-shell.mobile-view-dm .brand-panel,
  body.nox-phone .app-shell.mobile-view-dm .user-card,
  body.nox-phone .app-shell.mobile-view-dm .side-actions,
  body.nox-phone .app-shell.mobile-view-dm .channels-section,
  body.nox-phone .app-shell.mobile-view-dm .voice-section,
  body.nox-mobile .app-shell.mobile-view-dm .brand-panel,
  body.nox-mobile .app-shell.mobile-view-dm .user-card,
  body.nox-mobile .app-shell.mobile-view-dm .side-actions,
  body.nox-mobile .app-shell.mobile-view-dm .channels-section,
  body.nox-mobile .app-shell.mobile-view-dm .voice-section {
    display: none !important;
  }
  body.nox-phone .app-shell.mobile-view-dm .dm-section,
  body.nox-mobile .app-shell.mobile-view-dm .dm-section {
    display: flex !important;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 18px;
  }
  body.nox-phone .app-shell.mobile-view-dm .chat-panel,
  body.nox-phone .app-shell.mobile-view-dm .info-panel,
  body.nox-mobile .app-shell.mobile-view-dm .chat-panel,
  body.nox-mobile .app-shell.mobile-view-dm .info-panel {
    display: none !important;
  }
  body.nox-phone .app-shell.mobile-view-channels .dm-section,
  body.nox-mobile .app-shell.mobile-view-channels .dm-section,
  body.nox-phone .app-shell.mobile-view-voice .dm-section,
  body.nox-mobile .app-shell.mobile-view-voice .dm-section,
  body.nox-phone .app-shell.mobile-view-info .dm-section,
  body.nox-mobile .app-shell.mobile-view-info .dm-section {
    display: none !important;
  }
}


/* NOX v4.7.1 Direct Messages UI fix */
.dm-start-box .section-head.compact {
  margin-bottom: 8px;
}
.dm-start-list:empty::before {
  content: "Ładuję użytkowników...";
  color: var(--muted);
  font-size: .86rem;
}
.dm-refresh-users {
  width: 100%;
  border: 1px solid rgba(92, 245, 220, .26);
  background: rgba(33, 199, 184, .10);
  color: var(--accent);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
}
.dm-refresh-users:hover {
  background: rgba(33, 199, 184, .18);
  border-color: rgba(92, 245, 220, .55);
}
.dm-start-user.existing::after {
  content: "otwórz";
  margin-left: auto;
  color: var(--accent);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}
.dm-row.active,
.dm-start-user:active {
  transform: translateY(1px);
}
@media (max-width: 820px) {
  .dm-section { padding-bottom: 18px; }
  .dm-start-box { padding: 14px; }
  .dm-row,
  .dm-start-user { min-height: 58px; }
}

/* NOX v4.7.2 - DM sidebar order + collapsible private section polish */
.channel-sidebar {
  display: flex;
  flex-direction: column;
}
.channel-sidebar .dm-section {
  order: 20;
}
.channel-sidebar .channels-section {
  order: 30;
}
.channel-sidebar .voice-section {
  order: 40;
}
.channel-sidebar .dm-section .section-head.collapsible {
  cursor: pointer !important;
  user-select: none !important;
  border-radius: 12px !important;
  padding: 7px 8px 8px !important;
  margin-left: -4px !important;
  margin-right: -4px !important;
  transition: background .14s ease, border-color .14s ease, color .14s ease !important;
}
.channel-sidebar .dm-section .section-head.collapsible:hover,
.channel-sidebar .dm-section .section-head.collapsible:focus-visible {
  background: rgba(255, 255, 255, .045) !important;
  outline: none !important;
}
.channel-sidebar .dm-section .section-head.collapsible span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.channel-sidebar .dm-section .section-head.collapsible span::before {
  content: "▾";
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 7px;
  border: 1px solid rgba(148, 163, 184, .14);
  background: rgba(15, 23, 42, .34);
  color: rgba(226, 232, 240, .82);
  font-size: .72rem;
  line-height: 1;
  transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.channel-sidebar .dm-section.collapsed .section-head.collapsible span::before {
  content: "▸";
  color: rgba(45, 212, 191, .92);
  border-color: rgba(45, 212, 191, .26);
  background: rgba(45, 212, 191, .08);
}
.channel-sidebar .dm-section.collapsed .dm-list,
.channel-sidebar .dm-section.collapsed .dm-start-box,
.channel-sidebar .dm-section.collapsed .dm-start-list {
  display: none !important;
}
.channel-sidebar .dm-section.collapsed {
  gap: 0 !important;
  padding-bottom: 0 !important;
}
.channel-sidebar .dm-section.collapsed .section-head {
  margin-bottom: 0 !important;
  opacity: .92 !important;
}
.channels-section .section-head span:first-child {
  letter-spacing: .13em;
}
.channels-section .section-head span:first-child::after {
  content: "";
}

/* NOX v4.7.3 - restore compact online radar in channel header */
.presence-radar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, 48vw);
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(45, 212, 191, .42);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(13, 148, 136, .28), rgba(18, 24, 58, .88));
  color: var(--text);
  box-shadow: 0 0 20px rgba(45, 212, 191, .08), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  cursor: pointer;
  flex: 1 1 auto;
}

.presence-radar[hidden] { display: none !important; }

.presence-radar-kicker {
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.presence-radar-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.presence-radar::after {
  content: attr(data-extra-label);
  flex: 0 0 auto;
  margin-left: 2px;
  color: rgba(229, 231, 255, .8);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.presence-radar[data-extra-label=""]::after,
.presence-radar:not([data-extra-label])::after { content: ""; margin: 0; }

.presence-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 150px;
  padding: 3px 8px;
  border: 1px solid rgba(45, 212, 191, .32);
  border-radius: 999px;
  background: rgba(15, 23, 42, .66);
  color: rgba(248, 250, 252, .94);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.presence-chip.me {
  border-color: rgba(132, 92, 255, .48);
  background: rgba(59, 36, 116, .72);
}

.presence-chip .presence-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 12px rgba(52, 211, 153, .9);
  flex: 0 0 auto;
}

.presence-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header-actions {
  min-width: 0;
}

@media (max-width: 920px) {
  .presence-radar {
    max-width: 100%;
    order: 10;
    flex-basis: 100%;
  }
  .chat-header-actions {
    flex-wrap: wrap;
  }
}

/* NOX v4.9.2 - start hub / no auto-open test channel */
.nox-start-hub {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 28px;
}

.nox-start-card {
  width: min(760px, 100%);
  border: 1px solid rgba(45, 212, 191, .25);
  border-radius: 28px;
  padding: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(45, 212, 191, .12), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(132, 92, 255, .18), transparent 34%),
    linear-gradient(145deg, rgba(13, 18, 44, .96), rgba(9, 12, 30, .94));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255,255,255,.07);
}

.nox-start-kicker {
  color: var(--cyan);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.nox-start-card h3 {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.6rem);
  line-height: 1.05;
}

.nox-start-card p {
  margin: 12px 0 22px;
  max-width: 640px;
  color: var(--muted);
  line-height: 1.55;
}

.nox-start-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.nox-start-action {
  appearance: none;
  border: 1px solid rgba(124, 58, 237, .32);
  border-radius: 22px;
  min-height: 132px;
  padding: 18px;
  color: var(--text);
  background: linear-gradient(145deg, rgba(31, 24, 68, .88), rgba(10, 16, 40, .92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.nox-start-action:hover,
.nox-start-action:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(45, 212, 191, .62);
  background: linear-gradient(145deg, rgba(19, 78, 94, .58), rgba(44, 31, 91, .9));
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .08), 0 20px 44px rgba(0,0,0,.26);
  outline: none;
}

.nox-start-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(45, 212, 191, .28);
  border-radius: 15px;
  background: rgba(15, 23, 42, .56);
  color: var(--cyan);
  font-size: 1.25rem;
  font-weight: 950;
}

.nox-start-action strong {
  font-size: 1.15rem;
  font-weight: 950;
}

.nox-start-action small {
  color: var(--muted);
  font-weight: 800;
}

.nox-section-pulse {
  animation: noxSectionPulse 1.25s ease both;
}

@keyframes noxSectionPulse {
  0%, 100% { box-shadow: none; }
  18%, 72% { box-shadow: 0 0 0 2px rgba(45, 212, 191, .48), 0 0 28px rgba(45, 212, 191, .12); }
}

@media (max-width: 760px) {
  .nox-start-hub { padding: 14px; place-items: start center; }
  .nox-start-card { padding: 20px; border-radius: 22px; }
  .nox-start-actions { grid-template-columns: 1fr; }
  .nox-start-action { min-height: 92px; flex-direction: row; align-items: center; }
  .nox-start-action span + strong { min-width: 90px; }
}


/* NOX v4.9.3 - DM inbox + start hub polish */
.dm-row.unread {
  border-color: rgba(92, 245, 220, .78);
  background: linear-gradient(135deg, rgba(33, 199, 184, .24), rgba(126, 94, 255, .16));
  box-shadow: 0 0 0 1px rgba(92, 245, 220, .10), 0 10px 26px rgba(0, 0, 0, .16);
}
.dm-row.unread .dm-main strong::after {
  content: " nowa";
  margin-left: 6px;
  color: var(--accent);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.dm-unread-dot {
  margin-left: auto;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(92, 245, 220, .8);
}
.dm-start-box {
  overflow: hidden;
}
.dm-start-toggle {
  width: 100%;
  border: 1px solid rgba(126, 94, 255, .28);
  background: linear-gradient(135deg, rgba(126, 94, 255, .15), rgba(33, 199, 184, .09));
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 950;
  text-align: left;
  letter-spacing: .05em;
  cursor: pointer;
}
.dm-start-toggle:hover,
.dm-start-toggle:focus-visible {
  outline: none;
  border-color: rgba(92, 245, 220, .62);
  background: linear-gradient(135deg, rgba(33, 199, 184, .20), rgba(126, 94, 255, .18));
}
.dm-search-input {
  display: none;
  width: 100%;
  margin: 10px 0 8px;
  border: 1px solid rgba(92, 245, 220, .18);
  background: rgba(4, 8, 24, .76);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
}
.dm-start-box.expanded .dm-search-input { display: block; }
.dm-start-box:not(.expanded) .dm-start-list { display: none !important; }
.nox-orb {
  width: 82px;
  height: 82px;
  margin: 0 auto 18px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  font-weight: 1000;
  color: #04111e;
  background: linear-gradient(135deg, #5cf5dc, #7e5eff);
  box-shadow: 0 0 35px rgba(92, 245, 220, .22), 0 0 70px rgba(126, 94, 255, .16);
  animation: noxOrbFloat 6s ease-in-out infinite;
}
@keyframes noxOrbFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}
.nox-start-card {
  position: relative;
  overflow: hidden;
}
.nox-start-card::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at center, rgba(92, 245, 220, .08), transparent 34%), radial-gradient(circle at 70% 30%, rgba(126, 94, 255, .10), transparent 28%);
  animation: noxStartDrift 18s linear infinite;
  pointer-events: none;
}
.nox-start-card > * { position: relative; z-index: 1; }
@keyframes noxStartDrift {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.presence-radar-kicker { text-transform: uppercase; }


/* NOX v4.9.6 - live notifications polish */
.channel-btn.unread {
  position: relative;
  border-color: rgba(92, 245, 220, .62);
  background: linear-gradient(135deg, rgba(33, 199, 184, .20), rgba(126, 94, 255, .12));
  box-shadow: 0 0 0 1px rgba(92, 245, 220, .08), 0 10px 24px rgba(0, 0, 0, .14);
}
.channel-btn.unread .channel-name { color: var(--text); }
.channel-new-label {
  margin-left: 6px;
  color: var(--accent);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.channel-unread-dot {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(92, 245, 220, .8);
}
.channel-btn.unread .channel-sub { padding-right: 18px; }


/* NOX v4.9.8 - clipboard image paste confirm */
.composer-wrap.paste-uploading {
  box-shadow: 0 0 0 1px rgba(92, 245, 220, .32), 0 0 28px rgba(92, 245, 220, .12);
}
.composer-wrap.paste-uploading .attach-btn {
  animation: noxPastePulse 1s ease-in-out infinite;
}
@keyframes noxPastePulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.035); }
}


/* NOX v4.9.8 - clipboard confirm preview */
.composer-wrap.paste-pending {
  box-shadow: 0 0 0 1px rgba(92, 245, 220, .28), 0 -12px 34px rgba(92, 245, 220, .08);
}
.clipboard-preview-bar {
  margin: 0 0 10px;
  border: 1px solid rgba(92, 245, 220, .32);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(9, 15, 37, .98), rgba(18, 14, 48, .98));
  box-shadow: 0 18px 46px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.035);
  padding: 10px;
  color: var(--text);
}
.clipboard-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.clipboard-preview-head strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}
.clipboard-preview-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.clipboard-preview-close {
  width: 28px;
  height: 28px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.clipboard-preview-close:hover { color: var(--text); border-color: rgba(92,245,220,.35); }
.clipboard-preview-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 8px;
}
.clipboard-preview-item {
  min-width: 116px;
  max-width: 148px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  overflow: hidden;
}
.clipboard-preview-item img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
  background: rgba(0,0,0,.35);
}
.clipboard-preview-item span {
  display: block;
  padding: 6px 8px 7px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clipboard-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 9px;
}
.clipboard-preview-actions .small {
  min-height: 32px;
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 12px;
}
.clipboard-preview-actions .primary {
  border-color: rgba(92,245,220,.55);
  background: linear-gradient(135deg, var(--accent), #26c7ba);
  color: #061019;
}
body.nox-mobile .clipboard-preview-bar,
body.nox-phone .clipboard-preview-bar {
  border-radius: 16px;
  margin-bottom: 8px;
}
body.nox-mobile .clipboard-preview-item img,
body.nox-phone .clipboard-preview-item img { height: 64px; }

/* =========================================================
   NOX v4.10.0 - channel presence + sidebar form polish
   ========================================================= */
.chat-title-block {
  min-width: 0;
}

.chat-presence-bar {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: min(620px, 58vw);
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, .34);
  background: linear-gradient(135deg, rgba(22, 30, 68, .88), rgba(8, 14, 35, .72));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 18px rgba(139,92,246,.08);
  overflow: hidden;
  cursor: pointer;
}

.chat-presence-bar[hidden] {
  display: none !important;
}

.chat-presence-kicker {
  flex: 0 0 auto;
  color: rgba(196, 181, 253, .96);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chat-presence-chips {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

.chat-presence-bar::after {
  content: attr(data-extra-label);
  flex: 0 0 auto;
  color: rgba(226,232,240,.78);
  font-size: 10px;
  font-weight: 900;
}

.chat-presence-bar[data-extra-label=""]::after,
.chat-presence-bar:not([data-extra-label])::after {
  content: "";
}

.channel-create,
.voice-channel-create,
.dm-start-box {
  position: relative;
  padding: 13px !important;
  margin-top: 12px !important;
  border: 1px solid rgba(45, 212, 191, .15) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, .10), transparent 32%),
    linear-gradient(180deg, rgba(15, 23, 42, .78), rgba(8, 12, 30, .78)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 34px rgba(0,0,0,.12);
}

.channel-create .section-head.compact,
.voice-channel-create .section-head.compact,
.dm-start-box .section-head.compact {
  min-height: auto !important;
  margin: 0 0 7px !important;
  padding: 0 0 7px !important;
  border-bottom: 1px solid rgba(139, 92, 246, .26) !important;
}

.channel-create .section-head.compact span,
.voice-channel-create .section-head.compact span,
.dm-start-box .section-head.compact span,
.dm-start-toggle {
  color: rgba(226, 232, 240, .86) !important;
  font-size: .72rem !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.channel-create input,
.voice-channel-create input,
.dm-search-input {
  min-height: 42px !important;
  border-radius: 15px !important;
  background: rgba(2, 6, 23, .64) !important;
  border-color: rgba(148, 163, 184, .13) !important;
}

.channel-create input:focus,
.voice-channel-create input:focus,
.dm-search-input:focus {
  border-color: rgba(45, 212, 191, .72) !important;
  box-shadow: 0 0 0 1px rgba(45,212,191,.18), 0 0 22px rgba(45,212,191,.10) !important;
}

.private-toggle {
  grid-template-columns: 26px minmax(0, 1fr) !important;
  gap: 11px !important;
  min-height: 72px !important;
  padding: 13px !important;
}

.private-toggle input {
  justify-self: center;
  transform: scale(1.08);
}

.private-toggle::before {
  margin-bottom: 2px !important;
}

.private-toggle::after {
  max-width: 100%;
  color: rgba(203,213,225,.75) !important;
}

.channel-create button[type="submit"],
.voice-channel-create button[type="submit"] {
  min-height: 42px !important;
  border-radius: 16px !important;
  border-color: rgba(45, 212, 191, .36) !important;
  background: linear-gradient(135deg, rgba(20,184,166,.22), rgba(14,116,144,.16)) !important;
  color: #5eead4 !important;
  box-shadow: 0 10px 26px rgba(45,212,191,.08);
}

.invite-picker:not(.hidden) {
  max-height: 255px !important;
}

.invite-user-chip {
  border-radius: 14px !important;
}

.voice-channel-create .section-head.compact {
  grid-column: 1 / -1 !important;
}

@media (max-width: 820px) {
  .chat-presence-bar {
    max-width: 100%;
    width: 100%;
  }
  .chat-presence-kicker {
    font-size: 9px;
  }
  .chat-presence-chips .presence-chip:nth-child(n+4) {
    display: none;
  }
}


/* =========================================================
   NOX v4.10.1 - visible contextual presence stack hotfix
   ========================================================= */
.nox-presence-stack {
  min-width: min(560px, 52vw);
  max-width: min(620px, 58vw);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}
.nox-presence-stack .presence-radar,
.nox-presence-stack .chat-presence-bar {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.nox-presence-stack .chat-presence-bar {
  margin-top: 0;
  border-color: rgba(45, 212, 191, .32);
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 212, 191, .16), transparent 36%),
    linear-gradient(135deg, rgba(11, 40, 58, .88), rgba(10, 14, 36, .76));
}
.nox-presence-stack .chat-presence-kicker {
  color: rgba(94, 245, 220, .96);
}
@media (max-width: 920px) {
  .nox-presence-stack {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
    order: 10;
  }
  .nox-presence-stack .presence-radar,
  .nox-presence-stack .chat-presence-bar {
    width: 100%;
  }
}


/* =========================================================
   NOX v4.10.2 - presence bars layout hotfix
   ========================================================= */
.chat-header {
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(360px, 520px) !important;
  align-items: start !important;
  gap: 14px 18px !important;
}
.chat-title-block {
  min-width: 0 !important;
  align-self: start !important;
}
.chat-header-actions {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
}
.nox-presence-stack {
  width: min(100%, 520px) !important;
  min-width: 0 !important;
  max-width: 520px !important;
  margin-left: auto !important;
  flex: 0 1 520px !important;
  gap: 6px !important;
}
.nox-presence-stack .presence-radar,
.nox-presence-stack .chat-presence-bar {
  min-height: 31px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 5px 10px !important;
  justify-content: flex-start !important;
}
.nox-presence-stack .chat-presence-bar {
  order: 2 !important;
}
.nox-presence-stack .presence-radar {
  order: 1 !important;
}
.nox-presence-stack .presence-radar-kicker,
.nox-presence-stack .chat-presence-kicker {
  font-size: 10px !important;
  letter-spacing: .11em !important;
}
.nox-presence-stack .presence-radar-chips,
.nox-presence-stack .chat-presence-chips {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.nox-presence-stack .presence-chip {
  max-width: 132px !important;
}

@media (max-width: 1180px) {
  .chat-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .chat-header-actions {
    justify-content: stretch !important;
  }
  .nox-presence-stack {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    flex-basis: auto !important;
  }
}

@media (max-width: 720px) {
  .nox-presence-stack .presence-chip:nth-child(n+3) {
    display: none !important;
  }
  .nox-presence-stack .presence-radar-kicker,
  .nox-presence-stack .chat-presence-kicker {
    font-size: 9px !important;
  }
}

/* =========================================================
   NOX v4.10.3 - responsive chat scale, message dates, private bar polish
   ========================================================= */
:root {
  --nox-shell-gap: clamp(8px, 1.05vw, 14px);
  --nox-shell-pad: clamp(8px, 1.05vw, 14px);
  --nox-panel-pad: clamp(10px, 1.15vw, 16px);
  --nox-chat-pad: clamp(12px, 1.45vw, 22px);
  --nox-left-rail: clamp(236px, 22vw, 300px);
  --nox-presence-width: clamp(310px, 35vw, 520px);
}

html[data-device="desktop"] {
  font-size: clamp(13px, .88vw, 16px);
}

body.nox-desktop .app-shell {
  grid-template-columns: var(--nox-left-rail) minmax(0, 1fr) !important;
  gap: var(--nox-shell-gap) !important;
  padding: var(--nox-shell-pad) !important;
  min-width: 0 !important;
}

body.nox-desktop .channel-sidebar {
  padding: var(--nox-panel-pad) !important;
  gap: clamp(8px, 1vw, 14px) !important;
  min-width: 0 !important;
}

body.nox-desktop .chat-panel {
  min-width: 0 !important;
}

body.nox-desktop .chat-header {
  grid-template-columns: minmax(160px, 1fr) minmax(280px, var(--nox-presence-width)) !important;
  gap: clamp(9px, 1.15vw, 18px) !important;
  padding: clamp(12px, 1.35vw, 18px) clamp(14px, 1.65vw, 22px) !important;
}

body.nox-desktop .chat-header h2 {
  font-size: clamp(1.18rem, 1.55vw, 1.72rem) !important;
}

body.nox-desktop .chat-header p {
  font-size: clamp(.78rem, .85vw, .92rem) !important;
}

body.nox-desktop .nox-presence-stack {
  width: min(100%, var(--nox-presence-width)) !important;
  max-width: var(--nox-presence-width) !important;
}

body.nox-desktop .nox-presence-stack .presence-radar,
body.nox-desktop .nox-presence-stack .chat-presence-bar {
  min-height: clamp(27px, 2.25vw, 31px) !important;
  padding: 4px clamp(7px, .8vw, 10px) !important;
}

body.nox-desktop .nox-presence-stack .presence-chip {
  max-width: clamp(82px, 9.5vw, 132px) !important;
}

body.nox-desktop .messages {
  padding: var(--nox-chat-pad) !important;
  gap: clamp(8px, .9vw, 12px) !important;
}

body.nox-desktop .msg {
  max-width: min(900px, 92%) !important;
  padding: clamp(9px, .9vw, 12px) !important;
  grid-template-columns: clamp(34px, 2.9vw, 42px) minmax(0, 1fr) !important;
}

body.nox-desktop .msg-avatar {
  width: clamp(34px, 2.9vw, 42px) !important;
  height: clamp(34px, 2.9vw, 42px) !important;
}

.msg-time {
  white-space: nowrap;
  color: rgba(203, 213, 225, .82);
}

.private-toggle {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.private-toggle input {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
}

.private-toggle::before,
.private-toggle::after {
  display: none !important;
  content: none !important;
}

.private-toggle-copy {
  position: relative;
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 11px 42px 11px 13px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, .82), rgba(20, 15, 47, .72));
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.private-toggle-copy::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 26px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(15, 23, 42, .92);
  border: 1px solid rgba(148, 163, 184, .26);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.35);
}

.private-toggle-copy::before {
  content: "";
  position: absolute;
  right: 25px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(148, 163, 184, .82);
  transition: right .14s ease, background .14s ease, box-shadow .14s ease;
  z-index: 1;
}

.private-toggle-title {
  color: rgba(226, 232, 240, .92);
  font-size: .78rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.private-toggle-hint {
  color: rgba(148, 163, 184, .82);
  font-size: .72rem;
  line-height: 1.28;
}

.private-toggle:has(input:checked) .private-toggle-copy,
.private-toggle.checked .private-toggle-copy {
  border-color: rgba(45, 212, 191, .48);
  background: linear-gradient(135deg, rgba(20, 184, 166, .18), rgba(124, 58, 237, .14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(45,212,191,.08), 0 12px 26px rgba(45,212,191,.08);
}

.private-toggle:has(input:checked) .private-toggle-copy::before,
.private-toggle.checked .private-toggle-copy::before {
  right: 15px;
  background: #5eead4;
  box-shadow: 0 0 12px rgba(45, 212, 191, .66);
}

.private-toggle:has(input:checked) .private-toggle-hint,
.private-toggle.checked .private-toggle-hint {
  color: rgba(204, 251, 241, .86);
}

.private-toggle:has(input:checked) .private-toggle-hint::before,
.private-toggle.checked .private-toggle-hint::before {
  content: "Prywatny: wybierz zaproszonych poniżej. Właściciel i admin mają dostęp zawsze.";
  font-size: inherit;
}

.private-toggle:has(input:checked) .private-toggle-hint,
.private-toggle.checked .private-toggle-hint {
  font-size: 0;
}

@media (max-width: 1280px) {
  body.nox-desktop .chat-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.nox-desktop .chat-header-actions {
    justify-content: stretch !important;
  }
  body.nox-desktop .nox-presence-stack {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (max-height: 760px) and (min-width: 821px) {
  body.nox-desktop .brand-panel,
  body.nox-desktop .user-card,
  body.nox-desktop .side-actions {
    transform: scale(.94);
    transform-origin: left center;
  }
  body.nox-desktop .channel-create,
  body.nox-desktop .voice-channel-create,
  body.nox-desktop .dm-start-box {
    padding: 10px !important;
    margin-top: 8px !important;
  }
  body.nox-desktop .channel-create input,
  body.nox-desktop .voice-channel-create input,
  body.nox-desktop .dm-search-input {
    min-height: 36px !important;
  }
}

/* =========================================================
   NOX v4.10.4 - UI regression hotfix
   - separates ONLINE bars in the header
   - stabilizes private channel toggle layout
   - removes nested different color from own message bubble
   ========================================================= */
.chat-header {
  display: grid !important;
  grid-template-columns: minmax(210px, 1fr) minmax(280px, 520px) !important;
  align-items: start !important;
  gap: clamp(10px, 1.4vw, 18px) !important;
}
.chat-header-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}
.nox-presence-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  flex: 0 1 520px !important;
  overflow: visible !important;
}
.nox-presence-stack .presence-radar,
.nox-presence-stack .chat-presence-bar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 32px !important;
  padding: 5px 10px !important;
  gap: 8px !important;
  line-height: 1.1 !important;
  box-sizing: border-box !important;
  transform: none !important;
  margin: 0 !important;
  z-index: auto !important;
}
.nox-presence-stack .presence-radar { order: 1 !important; }
.nox-presence-stack .chat-presence-bar { order: 2 !important; }
.nox-presence-stack .presence-radar-kicker,
.nox-presence-stack .chat-presence-kicker {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  letter-spacing: .105em !important;
}
.nox-presence-stack .presence-radar-chips,
.nox-presence-stack .chat-presence-chips {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  gap: 6px !important;
}
.nox-presence-stack .presence-chip {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 128px !important;
}
.nox-presence-stack .presence-chip-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.private-toggle {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  grid-template-areas: "copy switch" !important;
  align-items: center !important;
  column-gap: 12px !important;
  min-height: 74px !important;
  padding: 12px 13px !important;
  overflow: hidden !important;
  position: relative !important;
}
.private-toggle::before,
.private-toggle::after {
  content: none !important;
  display: none !important;
}
.private-toggle input {
  grid-area: switch !important;
  justify-self: end !important;
  align-self: center !important;
  width: 32px !important;
  height: 18px !important;
  min-width: 32px !important;
  margin: 0 !important;
  transform: none !important;
  appearance: none !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, .34) !important;
  background: rgba(15, 23, 42, .96) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.45) !important;
  cursor: pointer !important;
}
.private-toggle input::after {
  content: "" !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  margin: 2px !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, .92) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease !important;
}
.private-toggle input:checked {
  border-color: rgba(45, 212, 191, .72) !important;
  background: rgba(20, 184, 166, .22) !important;
}
.private-toggle input:checked::after {
  transform: translateX(14px) !important;
  background: #5eead4 !important;
  box-shadow: 0 0 14px rgba(45,212,191,.66) !important;
}
.private-toggle-copy {
  grid-area: copy !important;
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.private-toggle-title {
  color: rgba(248, 250, 252, .95) !important;
  font-size: .78rem !important;
  line-height: 1.08 !important;
  font-weight: 1000 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.private-toggle-hint {
  color: rgba(203, 213, 225, .76) !important;
  font-size: .68rem !important;
  line-height: 1.24 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.invite-picker:not(.hidden) {
  margin-top: 8px !important;
}

.messages > article.msg.own .msg-main,
.msg.own .msg-main {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.messages > article.msg.own {
  background:
    radial-gradient(circle at 100% 0%, rgba(45, 212, 191, .10), transparent 36%),
    linear-gradient(135deg, rgba(52, 37, 104, .52), rgba(21, 28, 64, .50)) !important;
  border-color: rgba(139, 92, 246, .28) !important;
}

@media (max-width: 1180px) {
  .chat-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .chat-header-actions,
  .nox-presence-stack {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}
@media (max-width: 760px) {
  .nox-presence-stack .presence-chip:nth-child(n+3) {
    display: none !important;
  }
  .private-toggle {
    min-height: 78px !important;
  }
}


/* =========================================================
   NOX v4.10.5 - hard presence stack vertical hotfix
   Purpose: force ONLINE W NOX and ONLINE W TYM CZACIE to be two
   separate rows, never left/right and never overlapping.
   ========================================================= */
:root {
  --nox-presence-width: min(100%, 560px) !important;
}

.chat-header,
body.nox-desktop .chat-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: stretch !important;
  gap: 10px !important;
}

.chat-title-block,
body.nox-desktop .chat-title-block {
  min-width: 0 !important;
  width: 100% !important;
}

.chat-header-actions,
body.nox-desktop .chat-header-actions {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  position: relative !important;
}

.nox-presence-stack,
body.nox-desktop .nox-presence-stack {
  order: 0 !important;
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: minmax(32px, auto) !important;
  row-gap: 7px !important;
  width: min(560px, 100%) !important;
  min-width: 0 !important;
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  flex: none !important;
  flex-basis: auto !important;
  align-self: stretch !important;
  overflow: visible !important;
  z-index: 1 !important;
}

.nox-presence-stack .presence-radar,
.nox-presence-stack .chat-presence-bar,
body.nox-desktop .nox-presence-stack .presence-radar,
body.nox-desktop .nox-presence-stack .chat-presence-bar {
  position: static !important;
  inset: auto !important;
  float: none !important;
  clear: both !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) max-content !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 32px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  z-index: auto !important;
}

.nox-presence-stack .presence-radar {
  grid-row: 1 !important;
  order: 1 !important;
}

.nox-presence-stack .chat-presence-bar {
  grid-row: 2 !important;
  order: 2 !important;
}

.nox-presence-stack .presence-radar-kicker,
.nox-presence-stack .chat-presence-kicker {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.nox-presence-stack .presence-radar-chips,
.nox-presence-stack .chat-presence-chips {
  min-width: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.nox-presence-stack .presence-chip {
  min-width: 0 !important;
  max-width: 148px !important;
}

.nox-presence-stack .presence-chip-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 1180px) {
  .nox-presence-stack,
  body.nox-desktop .nox-presence-stack {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 760px) {
  .nox-presence-stack .presence-radar,
  .nox-presence-stack .chat-presence-bar,
  body.nox-desktop .nox-presence-stack .presence-radar,
  body.nox-desktop .nox-presence-stack .chat-presence-bar {
    grid-template-columns: max-content minmax(0, 1fr) !important;
  }

  .nox-presence-stack .presence-radar::after,
  .nox-presence-stack .chat-presence-bar::after {
    display: none !important;
  }

  .nox-presence-stack .presence-chip:nth-child(n+3) {
    display: none !important;
  }
}



/* =========================================================
   NOX v4.10.6 - smart desktop window scaling
   Cel: okno desktop/PWA ma sie skurczyc madrze: mniej pustych
   przestrzeni, mniejsze panele boczne, mniej paddingow i stabilny
   header bez nachodzenia elementow.
   ========================================================= */
:root {
  --nox-shell-pad-smart: clamp(8px, 1.05vw, 14px);
  --nox-shell-gap-smart: clamp(8px, .9vw, 14px);
  --nox-sidebar-w-smart: clamp(238px, 19vw, 300px);
  --nox-info-w-smart: clamp(248px, 20vw, 310px);
  --nox-panel-radius-smart: clamp(18px, 1.6vw, 24px);
  --nox-panel-pad-smart: clamp(10px, 1.15vw, 16px);
  --nox-chat-pad-smart: clamp(12px, 1.35vw, 22px);
  --nox-control-h-smart: clamp(38px, 4.4vh, 48px);
  --nox-message-gap-smart: clamp(8px, 1.2vh, 12px);
}

body.nox-desktop .app-shell {
  grid-template-columns: var(--nox-sidebar-w-smart) minmax(420px, 1fr) var(--nox-info-w-smart) !important;
  gap: var(--nox-shell-gap-smart) !important;
  padding: var(--nox-shell-pad-smart) !important;
  min-width: 0 !important;
}

body.nox-desktop .channel-sidebar,
body.nox-desktop .chat-panel,
body.nox-desktop .info-panel > .info-card {
  border-radius: var(--nox-panel-radius-smart) !important;
}

body.nox-desktop .channel-sidebar {
  gap: clamp(8px, 1.15vh, 14px) !important;
  padding: var(--nox-panel-pad-smart) !important;
}

body.nox-desktop .brand-panel,
body.nox-desktop .user-card,
body.nox-desktop .dm-start-box,
body.nox-desktop .voice-inline-panel,
body.nox-desktop .channel-create,
body.nox-desktop .voice-channel-create {
  padding-block: clamp(8px, 1.2vh, 14px) !important;
}

body.nox-desktop .brand-symbol {
  width: clamp(36px, 3.5vw, 44px) !important;
  height: clamp(36px, 3.5vw, 44px) !important;
  border-radius: clamp(12px, 1.2vw, 16px) !important;
}

body.nox-desktop .avatar,
body.nox-desktop .msg-avatar {
  width: clamp(34px, 3.2vw, 42px) !important;
  height: clamp(34px, 3.2vw, 42px) !important;
}

body.nox-desktop .chat-header {
  padding: clamp(12px, 1.45vw, 18px) clamp(14px, 1.75vw, 22px) !important;
  gap: clamp(10px, 1.2vw, 16px) !important;
  min-width: 0 !important;
}

body.nox-desktop .chat-header h2 {
  font-size: clamp(1.08rem, 1.6vw, 1.82rem) !important;
}

body.nox-desktop .chat-header p,
body.nox-desktop .channel-kicker,
body.nox-desktop .info-kicker,
body.nox-desktop .section-head {
  font-size: clamp(.66rem, .75vw, .82rem) !important;
}

body.nox-desktop .messages {
  padding: var(--nox-chat-pad-smart) !important;
  gap: var(--nox-message-gap-smart) !important;
}

body.nox-desktop .messages > article.msg {
  width: min(820px, 76%) !important;
  max-width: min(820px, 76%) !important;
  min-width: min(320px, 100%) !important;
  padding: clamp(9px, 1.15vw, 12px) !important;
  gap: clamp(8px, 1vw, 11px) !important;
}

body.nox-desktop .messages > article.msg.own {
  width: min(760px, 72%) !important;
  max-width: min(760px, 72%) !important;
}

body.nox-desktop .msg-content {
  font-size: clamp(.9rem, .92vw, 1rem) !important;
}

body.nox-desktop .composer-wrap {
  padding: clamp(9px, 1.1vw, 12px) clamp(10px, 1.25vw, 14px) !important;
}

body.nox-desktop #messageForm.composer,
body.nox-desktop .composer {
  grid-template-columns: minmax(0, 1fr) clamp(92px, 9vw, 116px) !important;
  gap: clamp(7px, .9vw, 10px) !important;
}

body.nox-desktop textarea,
body.nox-desktop input,
body.nox-desktop select,
body.nox-desktop button,
body.nox-desktop .ghost,
body.nox-desktop .socket-pill,
body.nox-desktop .timezone-pill {
  min-height: auto;
}

body.nox-desktop .composer button,
body.nox-desktop #messageInput,
body.nox-desktop .channel-create input,
body.nox-desktop .voice-channel-create input,
body.nox-desktop .dm-search-input {
  min-height: var(--nox-control-h-smart) !important;
}

body.nox-desktop .nox-presence-stack {
  width: min(100%, clamp(390px, 35vw, 560px)) !important;
  max-width: min(100%, clamp(390px, 35vw, 560px)) !important;
  row-gap: clamp(5px, .75vh, 8px) !important;
}

body.nox-desktop .nox-presence-stack .presence-radar,
body.nox-desktop .nox-presence-stack .chat-presence-bar {
  min-height: clamp(29px, 3.3vh, 34px) !important;
  padding: clamp(5px, .65vh, 7px) clamp(8px, .9vw, 10px) !important;
}

body.nox-desktop .nox-presence-stack .presence-chip {
  max-width: clamp(92px, 9vw, 148px) !important;
  padding-inline: clamp(5px, .65vw, 8px) !important;
}

@media (max-width: 1360px) {
  body.nox-desktop .app-shell {
    grid-template-columns: clamp(226px, 18vw, 280px) minmax(360px, 1fr) clamp(230px, 18vw, 285px) !important;
  }
  body.nox-desktop .nox-presence-stack .presence-chip:nth-child(n+4) {
    display: none !important;
  }
}

@media (max-width: 1180px) {
  body.nox-desktop .app-shell {
    grid-template-columns: clamp(220px, 24vw, 270px) minmax(0, 1fr) !important;
  }
  body.nox-desktop .info-panel {
    display: none !important;
  }
  body.nox-desktop .chat-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.nox-desktop .chat-header-actions {
    width: 100% !important;
  }
  body.nox-desktop .nox-presence-stack {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 980px) {
  body.nox-desktop .app-shell {
    grid-template-columns: clamp(204px, 27vw, 238px) minmax(0, 1fr) !important;
  }
  body.nox-desktop .side-actions .ghost,
  body.nox-desktop .channel-btn,
  body.nox-desktop .voice-channel-btn {
    padding-inline: 9px !important;
  }
  body.nox-desktop .messages > article.msg,
  body.nox-desktop .messages > article.msg.own {
    width: min(100%, 760px) !important;
    max-width: 100% !important;
  }
}

@media (max-height: 760px) {
  :root {
    --nox-shell-pad-smart: 8px;
    --nox-shell-gap-smart: 8px;
    --nox-panel-pad-smart: 10px;
    --nox-chat-pad-smart: 12px;
    --nox-control-h-smart: 38px;
    --nox-message-gap-smart: 8px;
  }

  body.nox-desktop .brand-sub,
  body.nox-desktop .channel-btn .channel-sub,
  body.nox-desktop .voice-channel-btn small,
  body.nox-desktop .chat-header p {
    font-size: .72rem !important;
  }

  body.nox-desktop .emoji-strip {
    margin-bottom: 6px !important;
  }

  body.nox-desktop .emoji-strip button {
    padding-block: 5px !important;
    min-width: 36px !important;
  }

  body.nox-desktop .private-toggle {
    min-height: 58px !important;
    padding-block: 9px !important;
  }
}

@media (max-height: 640px) {
  body.nox-desktop .brand-panel {
    padding-bottom: 4px !important;
  }
  body.nox-desktop .brand-sub,
  body.nox-desktop .chat-header p,
  body.nox-desktop .timezone-pill,
  body.nox-desktop #copyChannelBtn {
    display: none !important;
  }
  body.nox-desktop .nox-presence-stack .presence-chip:nth-child(n+3) {
    display: none !important;
  }
  body.nox-desktop .composer-wrap {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}

/* =========================================================
   NOX v4.10.7 - compact UI polish
   Cel:
   - odzyskac miejsce w oknie czatu,
   - wysmuklic dymki wiadomosci,
   - uspokoic panel publiczny/prywatny,
   - naprawic rozjezdzanie formularza prywatnego kanalu glosowego.
   ========================================================= */

body.nox-desktop .chat-panel {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

body.nox-desktop .chat-header {
  padding: 10px 18px 9px !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(210px, .78fr) minmax(360px, 560px) !important;
  align-items: center !important;
  gap: 10px 16px !important;
}

body.nox-desktop .chat-title-block {
  display: grid !important;
  gap: 2px !important;
  align-self: center !important;
  min-width: 0 !important;
}

body.nox-desktop .channel-kicker {
  font-size: .66rem !important;
  letter-spacing: .20em !important;
  line-height: 1 !important;
}

body.nox-desktop .chat-header h2 {
  margin: 0 !important;
  font-size: clamp(1.05rem, 1.35vw, 1.55rem) !important;
  line-height: 1.05 !important;
}

body.nox-desktop .chat-header p {
  margin: 0 !important;
  font-size: .74rem !important;
  line-height: 1.15 !important;
  opacity: .84 !important;
}

body.nox-desktop .chat-header-actions {
  align-self: center !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
  gap: 0 !important;
}

body.nox-desktop .nox-presence-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  align-self: center !important;
}

body.nox-desktop .nox-presence-stack .presence-radar,
body.nox-desktop .nox-presence-stack .chat-presence-bar {
  min-height: 27px !important;
  height: 27px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  gap: 6px !important;
  overflow: hidden !important;
}

body.nox-desktop .nox-presence-stack .presence-radar-kicker,
body.nox-desktop .nox-presence-stack .chat-presence-kicker {
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: .105em !important;
  white-space: nowrap !important;
}

body.nox-desktop .nox-presence-stack .presence-chip {
  max-width: 128px !important;
  min-height: 19px !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
  gap: 5px !important;
}

body.nox-desktop .nox-presence-stack .presence-dot {
  width: 6px !important;
  height: 6px !important;
}

body.nox-desktop .messages {
  padding: 12px 20px !important;
  gap: 8px !important;
}

body.nox-desktop .messages > article.msg,
body.nox-desktop .msg {
  width: min(760px, 70%) !important;
  max-width: min(760px, 70%) !important;
  min-width: min(300px, 100%) !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 15px !important;
}

body.nox-desktop .messages > article.msg.own,
body.nox-desktop .msg.own {
  width: min(720px, 66%) !important;
  max-width: min(720px, 66%) !important;
}

body.nox-desktop .msg-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  font-size: .78rem !important;
}

body.nox-desktop .msg-meta {
  margin-bottom: 4px !important;
  gap: 6px !important;
  font-size: .68rem !important;
  line-height: 1.15 !important;
}

body.nox-desktop .msg-author {
  font-weight: 900 !important;
}

body.nox-desktop .msg-content {
  font-size: .88rem !important;
  line-height: 1.34 !important;
}

body.nox-desktop .msg-reactions {
  margin-top: 6px !important;
  gap: 5px !important;
}

body.nox-desktop .msg-reactions button,
body.nox-desktop .reaction-menu-toggle {
  min-height: 24px !important;
  min-width: 28px !important;
  padding: 3px 6px !important;
  font-size: .78rem !important;
}

body.nox-desktop .composer-wrap {
  padding: 8px 13px 10px !important;
}

body.nox-desktop .emoji-strip {
  margin-bottom: 6px !important;
}

body.nox-desktop .emoji-strip button {
  min-height: 34px !important;
  min-width: 38px !important;
  padding: 5px 8px !important;
}

body.nox-desktop #messageInput {
  min-height: 42px !important;
  padding-block: 10px !important;
}

/* Formularze boczne: jeden przewidywalny pionowy flow zamiast mieszania gridow. */
body.nox-desktop .channel-create,
body.nox-desktop .voice-channel-create {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 10px !important;
  overflow: hidden !important;
}

body.nox-desktop .channel-create > *,
body.nox-desktop .voice-channel-create > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  grid-column: auto !important;
}

body.nox-desktop .channel-create input,
body.nox-desktop .voice-channel-create input {
  width: 100% !important;
  min-height: 39px !important;
  padding: 9px 11px !important;
  border-radius: 14px !important;
  font-size: .82rem !important;
}

body.nox-desktop .channel-create button[type="submit"],
body.nox-desktop .voice-channel-create button[type="submit"] {
  width: fit-content !important;
  min-width: 118px !important;
  max-width: 100% !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  align-self: flex-start !important;
}

body.nox-desktop .private-toggle {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

body.nox-desktop .private-toggle input {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none !important;
}

body.nox-desktop .private-toggle-copy {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 31px !important;
  grid-template-areas: "title switch" "hint switch" !important;
  align-items: center !important;
  gap: 3px 9px !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .74), rgba(18, 15, 44, .58)) !important;
  border: 1px solid rgba(148, 163, 184, .14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}

body.nox-desktop .private-toggle-title {
  grid-area: title !important;
  font-size: .70rem !important;
  line-height: 1.05 !important;
  letter-spacing: .07em !important;
}

body.nox-desktop .private-toggle-hint {
  grid-area: hint !important;
  font-size: .62rem !important;
  line-height: 1.18 !important;
  color: rgba(203, 213, 225, .72) !important;
}

body.nox-desktop .private-toggle-copy::after {
  content: "" !important;
  grid-area: switch !important;
  justify-self: end !important;
  width: 28px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, .95) !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.42) !important;
}

body.nox-desktop .private-toggle-copy::before {
  content: "" !important;
  position: absolute !important;
  right: 23px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, .90) !important;
  z-index: 1 !important;
  transition: right .14s ease, background .14s ease, box-shadow .14s ease !important;
}

body.nox-desktop .private-toggle:has(input:checked) .private-toggle-copy,
body.nox-desktop .private-toggle.checked .private-toggle-copy {
  border-color: rgba(45, 212, 191, .52) !important;
  background: linear-gradient(135deg, rgba(20, 184, 166, .16), rgba(124, 58, 237, .12)) !important;
}

body.nox-desktop .private-toggle:has(input:checked) .private-toggle-copy::before,
body.nox-desktop .private-toggle.checked .private-toggle-copy::before {
  right: 13px !important;
  background: #5eead4 !important;
  box-shadow: 0 0 12px rgba(45,212,191,.66) !important;
}

body.nox-desktop .private-toggle:has(input:checked) .private-toggle-hint,
body.nox-desktop .private-toggle.checked .private-toggle-hint {
  font-size: 0 !important;
}

body.nox-desktop .private-toggle:has(input:checked) .private-toggle-hint::before,
body.nox-desktop .private-toggle.checked .private-toggle-hint::before {
  content: "Prywatny: zaproszeni ponizej" !important;
  font-size: .62rem !important;
  line-height: 1.18 !important;
}

body.nox-desktop .invite-picker:not(.hidden) {
  display: block !important;
  max-height: 176px !important;
  margin-top: 0 !important;
  padding: 9px !important;
  overflow-y: auto !important;
  border-radius: 16px !important;
}

body.nox-desktop .invite-picker-title {
  margin-bottom: 7px !important;
}

body.nox-desktop .invite-picker-title strong {
  font-size: .72rem !important;
  letter-spacing: .14em !important;
}

body.nox-desktop .invite-picker-title small {
  font-size: .62rem !important;
  line-height: 1.18 !important;
}

body.nox-desktop .invite-user-chip {
  min-height: 48px !important;
  padding: 8px 9px !important;
  border-radius: 13px !important;
}

body.nox-desktop .invite-user-chip input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  flex: 0 0 16px !important;
}

@media (max-width: 1180px) {
  body.nox-desktop .chat-header {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }
  body.nox-desktop .chat-header-actions {
    justify-content: stretch !important;
  }
  body.nox-desktop .nox-presence-stack {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (max-height: 760px) {
  body.nox-desktop .chat-header {
    padding-block: 8px !important;
  }
  body.nox-desktop .nox-presence-stack .presence-radar,
  body.nox-desktop .nox-presence-stack .chat-presence-bar {
    height: 25px !important;
    min-height: 25px !important;
  }
  body.nox-desktop .messages {
    padding-block: 10px !important;
    gap: 7px !important;
  }
  body.nox-desktop .messages > article.msg,
  body.nox-desktop .messages > article.msg.own {
    padding: 7px 9px !important;
  }
}


/* =========================================================
   NOX v4.10.8 - modal invite + layout polish
   ========================================================= */
body.nox-desktop .app-shell {
  grid-template-columns: clamp(255px, 18vw, 310px) minmax(0, 1fr) minmax(0, 0px) !important;
  gap: 10px !important;
  padding: 10px !important;
}
body.nox-desktop .info-panel {
  display: none !important;
}
body.nox-desktop .channel-sidebar {
  padding: 13px !important;
  gap: 12px !important;
}
body.nox-desktop .brand-panel {
  min-height: 58px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(45, 212, 191, .12) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .78), rgba(30, 27, 75, .34)) !important;
  overflow: visible !important;
}
body.nox-desktop .brand-symbol {
  width: 36px !important;
  height: 36px !important;
  border-radius: 13px !important;
  flex: 0 0 36px !important;
}
body.nox-desktop .brand-name { font-size: .94rem !important; }
body.nox-desktop .brand-sub { font-size: .68rem !important; }
body.nox-desktop .user-card {
  min-height: 58px !important;
  padding: 8px 10px !important;
  overflow: visible !important;
  align-items: center !important;
}
body.nox-desktop .user-card .avatar,
body.nox-desktop #currentAvatar {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
}
body.nox-desktop .user-card-main {
  min-width: 0 !important;
  overflow: hidden !important;
}
body.nox-desktop .profile-status-line {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.nox-desktop .dm-section,
body.nox-desktop .channels-section,
body.nox-desktop .voice-section {
  padding: 10px 10px 12px !important;
  border: 1px solid rgba(45, 212, 191, .13) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, .38), rgba(11, 16, 32, .18)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
body.nox-desktop .dm-section + .channels-section,
body.nox-desktop .channels-section + .voice-section,
body.nox-desktop .dm-section,
body.nox-desktop .channels-section,
body.nox-desktop .voice-section {
  margin-top: 4px !important;
}
body.nox-desktop .section-head {
  margin: 0 0 9px !important;
  padding-bottom: 7px !important;
  border-bottom: 1px solid rgba(45, 212, 191, .18) !important;
  color: rgba(226, 232, 240, .86) !important;
}
body.nox-desktop .section-head.compact {
  padding-bottom: 7px !important;
  margin-bottom: 8px !important;
}
body.nox-desktop .chat-panel {
  border-radius: 18px !important;
}
body.nox-desktop .chat-header {
  padding: 8px 15px 7px !important;
  display: grid !important;
  grid-template-columns: minmax(235px, .72fr) minmax(380px, .95fr) !important;
  align-items: start !important;
  gap: 8px 18px !important;
}
body.nox-desktop .chat-title-block {
  align-self: start !important;
  gap: 2px !important;
  padding-top: 1px !important;
}
body.nox-desktop .channel-kicker {
  font-size: .62rem !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
}
body.nox-desktop .chat-header h2 {
  font-size: clamp(1rem, 1.2vw, 1.42rem) !important;
  line-height: 1.04 !important;
  margin: 0 !important;
}
body.nox-desktop .chat-header p {
  font-size: .68rem !important;
  line-height: 1.05 !important;
  margin-top: 1px !important;
}
body.nox-desktop .chat-header-actions {
  align-self: start !important;
  justify-content: end !important;
  align-items: start !important;
}
body.nox-desktop .nox-presence-stack {
  width: min(100%, 590px) !important;
  max-width: 590px !important;
  gap: 4px !important;
  align-self: start !important;
  margin-top: 0 !important;
}
body.nox-desktop .nox-presence-stack .presence-radar,
body.nox-desktop .nox-presence-stack .chat-presence-bar {
  height: 24px !important;
  min-height: 24px !important;
  padding: 2px 8px !important;
}
body.nox-desktop .messages {
  padding: 10px 16px !important;
  gap: 7px !important;
  align-items: stretch !important;
}
body.nox-desktop .messages > article.msg,
body.nox-desktop .msg {
  width: min(860px, 68%) !important;
  max-width: min(860px, 68%) !important;
  padding: 7px 9px !important;
  gap: 7px !important;
  grid-template-columns: 31px minmax(0, 1fr) !important;
  border-radius: 14px !important;
}
body.nox-desktop .messages > article.msg.own,
body.nox-desktop .msg.own {
  width: min(840px, 66%) !important;
  max-width: min(840px, 66%) !important;
}
body.nox-desktop .msg-avatar {
  width: 31px !important;
  height: 31px !important;
  border-radius: 11px !important;
}
body.nox-desktop .msg-meta {
  margin-bottom: 3px !important;
  font-size: .64rem !important;
}
body.nox-desktop .msg-content {
  font-size: .84rem !important;
  line-height: 1.30 !important;
}
body.nox-desktop .msg-reactions { margin-top: 4px !important; }
body.nox-desktop .msg-reactions button,
body.nox-desktop .reaction-menu-toggle {
  min-height: 21px !important;
  min-width: 25px !important;
  padding: 2px 5px !important;
}
body.nox-desktop .composer-wrap { padding: 7px 12px 9px !important; }
body.nox-desktop .composer { gap: 8px !important; }
body.nox-desktop #messageInput {
  min-height: 39px !important;
  padding: 9px 11px !important;
}
body.nox-desktop .channel-create,
body.nox-desktop .voice-channel-create {
  padding: 9px !important;
  gap: 7px !important;
}
body.nox-desktop .private-toggle-copy {
  min-height: 49px !important;
  padding: 8px 9px !important;
  grid-template-columns: minmax(0, 1fr) 30px !important;
}
body.nox-desktop .private-toggle-title {
  font-size: .66rem !important;
  letter-spacing: .055em !important;
}
body.nox-desktop .private-toggle-hint {
  font-size: .58rem !important;
  line-height: 1.13 !important;
}
body.nox-desktop .invite-picker {
  display: none !important;
}
.create-invite-modal.hidden { display: none !important; }
.create-invite-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
}
.create-invite-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(3, 7, 18, .66) !important;
  backdrop-filter: blur(10px) !important;
}
.create-invite-card {
  position: relative !important;
  width: min(560px, calc(100vw - 42px)) !important;
  max-height: min(680px, calc(100vh - 54px)) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, .96), rgba(30, 27, 75, .94)) !important;
  border: 1px solid rgba(45, 212, 191, .36) !important;
  box-shadow: 0 24px 90px rgba(0,0,0,.55), 0 0 32px rgba(45,212,191,.10) !important;
}
.create-invite-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 18px 18px 12px !important;
  border-bottom: 1px solid rgba(45, 212, 191, .16) !important;
}
.create-invite-head small {
  display: block !important;
  color: var(--accent-2) !important;
  text-transform: uppercase !important;
  letter-spacing: .16em !important;
  font-weight: 900 !important;
  font-size: .68rem !important;
  margin-bottom: 6px !important;
}
.create-invite-head h3 {
  margin: 0 !important;
  font-size: 1.15rem !important;
}
.create-invite-head p {
  margin: 6px 0 0 !important;
  color: var(--muted) !important;
  font-size: .84rem !important;
  line-height: 1.35 !important;
}
.create-invite-close {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, .18) !important;
  background: rgba(15, 23, 42, .75) !important;
  color: var(--text) !important;
  cursor: pointer !important;
}
.create-invite-users {
  overflow-y: auto !important;
  display: grid !important;
  gap: 8px !important;
  padding: 14px 16px !important;
}
.create-invite-user {
  display: grid !important;
  grid-template-columns: 18px 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(148, 163, 184, .14) !important;
  cursor: pointer !important;
}
.create-invite-user:hover {
  border-color: rgba(45, 212, 191, .34) !important;
  background: rgba(45, 212, 191, .07) !important;
}
.create-invite-user input {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--accent-2) !important;
}
.create-invite-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 13px !important;
}
.create-invite-user strong,
.create-invite-user small {
  display: block !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.create-invite-user small { color: var(--muted) !important; font-size: .74rem !important; }
.create-invite-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 12px 16px 16px !important;
  border-top: 1px solid rgba(45, 212, 191, .16) !important;
}
.create-invite-actions .primary {
  background: linear-gradient(135deg, var(--accent-2), #14b8a6) !important;
  color: #031312 !important;
  border-color: transparent !important;
  font-weight: 950 !important;
}
@media (min-width: 1500px) {
  body.nox-desktop .messages > article.msg,
  body.nox-desktop .msg { width: min(940px, 64%) !important; max-width: min(940px, 64%) !important; }
  body.nox-desktop .messages > article.msg.own,
  body.nox-desktop .msg.own { width: min(920px, 62%) !important; max-width: min(920px, 62%) !important; }
}
@media (max-width: 1180px) {
  body.nox-desktop .chat-header { grid-template-columns: minmax(0, 1fr) !important; }
  body.nox-desktop .chat-header-actions { justify-content: stretch !important; }
  body.nox-desktop .nox-presence-stack { width: 100% !important; max-width: 100% !important; }
}

/* =========================================================
   NOX v4.10.9 - header alignment + compact reactions polish
   ========================================================= */
body.nox-desktop .app-shell {
  grid-template-columns: clamp(278px, 20vw, 336px) minmax(0, 1fr) minmax(0, 0px) !important;
  gap: 11px !important;
}

body.nox-desktop .channel-sidebar {
  gap: 14px !important;
}

body.nox-desktop .user-card {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
}

body.nox-desktop .status-dot {
  align-self: start !important;
  margin-top: 3px !important;
}

body.nox-desktop .dm-section,
body.nox-desktop .channels-section,
body.nox-desktop .voice-section {
  position: relative !important;
  padding-top: 14px !important;
  border-color: rgba(56, 189, 248, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 0 0 1px rgba(56, 189, 248, .02) !important;
}

body.nox-desktop .dm-section::before,
body.nox-desktop .channels-section::before,
body.nox-desktop .voice-section::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: 8px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(34, 211, 238, .96), rgba(59, 130, 246, .88), rgba(34, 211, 238, .10)) !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, .18) !important;
}

body.nox-desktop .section-head {
  margin: 0 0 10px !important;
  padding-top: 2px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(56, 189, 248, .22) !important;
}

body.nox-desktop .chat-header {
  grid-template-columns: minmax(250px, .9fr) minmax(440px, 640px) !important;
  align-items: start !important;
  gap: 6px 20px !important;
  padding: 7px 16px 6px !important;
}

body.nox-desktop .chat-title-block {
  align-self: start !important;
  justify-self: start !important;
  padding-top: 0 !important;
}

body.nox-desktop .chat-header h2 {
  font-size: clamp(1.02rem, 1.26vw, 1.48rem) !important;
}

body.nox-desktop .chat-header p {
  font-size: .67rem !important;
  line-height: 1.08 !important;
}

body.nox-desktop .chat-header-actions {
  align-self: start !important;
  justify-content: flex-end !important;
  padding-top: 1px !important;
}

body.nox-desktop .nox-presence-stack {
  width: min(100%, 640px) !important;
  max-width: 640px !important;
  gap: 3px !important;
}

body.nox-desktop .nox-presence-stack .presence-radar,
body.nox-desktop .nox-presence-stack .chat-presence-bar {
  height: 23px !important;
  min-height: 23px !important;
  padding: 2px 8px !important;
}

body.nox-desktop .messages {
  padding: 10px 16px 12px !important;
  gap: 4px !important;
}

body.nox-desktop .messages > article.msg,
body.nox-desktop .msg {
  position: relative !important;
  overflow: visible !important;
  width: min(1080px, 82%) !important;
  max-width: min(1080px, 82%) !important;
  min-width: min(320px, 100%) !important;
  padding: 6px 8px !important;
  gap: 7px !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  border-radius: 14px !important;
  margin-bottom: 14px !important;
}

body.nox-desktop .messages > article.msg.own,
body.nox-desktop .msg.own {
  width: min(1000px, 78%) !important;
  max-width: min(1000px, 78%) !important;
}

body.nox-desktop .msg-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
}

body.nox-desktop .msg-main {
  position: relative !important;
  min-width: 0 !important;
}

body.nox-desktop .msg-meta {
  margin-bottom: 2px !important;
  gap: 5px !important;
  font-size: .63rem !important;
  line-height: 1.1 !important;
}

body.nox-desktop .msg-content {
  font-size: .83rem !important;
  line-height: 1.28 !important;
}

body.nox-desktop .msg-reply-preview {
  margin-bottom: 4px !important;
}

body.nox-desktop .msg-reactions.compact {
  position: absolute !important;
  right: 2px !important;
  bottom: -15px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 3 !important;
}

body.nox-desktop .reaction-summary:empty {
  display: none !important;
}

body.nox-desktop .msg-reactions.compact .reaction-summary {
  gap: 4px !important;
}

body.nox-desktop .msg-reactions.compact .reaction-summary-btn,
body.nox-desktop .msg-reactions.compact .reaction-menu-toggle {
  min-height: 20px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: rgba(10, 18, 36, .92) !important;
  border: 1px solid rgba(45, 212, 191, .26) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
}

body.nox-desktop .reaction-menu {
  bottom: 28px !important;
}

body.nox-desktop .composer-wrap {
  padding: 7px 12px 8px !important;
}

body.nox-desktop .private-toggle-copy {
  min-height: 50px !important;
}

@media (min-width: 1500px) {
  body.nox-desktop .messages > article.msg,
  body.nox-desktop .msg {
    width: min(1160px, 84%) !important;
    max-width: min(1160px, 84%) !important;
  }
  body.nox-desktop .messages > article.msg.own,
  body.nox-desktop .msg.own {
    width: min(1080px, 80%) !important;
    max-width: min(1080px, 80%) !important;
  }
}

@media (max-width: 1240px) {
  body.nox-desktop .app-shell {
    grid-template-columns: clamp(248px, 23vw, 310px) minmax(0, 1fr) !important;
  }
  body.nox-desktop .chat-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.nox-desktop .chat-header-actions,
  body.nox-desktop .nox-presence-stack {
    width: 100% !important;
    max-width: 100% !important;
  }
  body.nox-desktop .messages > article.msg,
  body.nox-desktop .msg,
  body.nox-desktop .messages > article.msg.own,
  body.nox-desktop .msg.own {
    width: min(100%, 94%) !important;
    max-width: min(100%, 94%) !important;
  }
}

/* =========================================================
   NOX v4.10.10 - readable chat + composer fix
   Cel:
   - poprawic czytelnosc po v4.10.9,
   - usunac poziomy scroll od reakcji,
   - naprawic pole pisania wiadomosci.
   ========================================================= */
body.nox-desktop .messages {
  overflow-x: hidden !important;
  padding-right: 18px !important;
  padding-left: 18px !important;
  gap: 7px !important;
}

body.nox-desktop .messages > article.msg,
body.nox-desktop .msg {
  overflow: visible !important;
  width: min(1040px, 80%) !important;
  max-width: min(1040px, 80%) !important;
  min-width: min(360px, 100%) !important;
  padding: 8px 12px 13px 10px !important;
  margin-bottom: 7px !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 9px !important;
}

body.nox-desktop .messages > article.msg.own,
body.nox-desktop .msg.own {
  width: min(980px, 76%) !important;
  max-width: min(980px, 76%) !important;
}

body.nox-desktop .msg-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  font-size: .78rem !important;
}

body.nox-desktop .msg-meta {
  font-size: .72rem !important;
  line-height: 1.18 !important;
  margin-bottom: 4px !important;
  gap: 6px !important;
}

body.nox-desktop .msg-content {
  font-size: .92rem !important;
  line-height: 1.36 !important;
}

/* Reakcje zostaja doklejone, ale nie wystaja poza dymek i nie tworza poziomego scrolla. */
body.nox-desktop .msg-reactions.compact {
  position: absolute !important;
  right: 8px !important;
  bottom: -11px !important;
  max-width: calc(100% - 58px) !important;
  display: inline-flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: 5 !important;
}

body.nox-desktop .reaction-summary {
  display: inline-flex !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.nox-desktop .msg-reactions.compact .reaction-summary-btn,
body.nox-desktop .msg-reactions.compact .reaction-menu-toggle {
  min-height: 22px !important;
  min-width: 26px !important;
  padding: 2px 7px !important;
  font-size: .82rem !important;
  flex: 0 0 auto !important;
}

body.nox-desktop .reaction-menu {
  right: 0 !important;
  left: auto !important;
  bottom: 28px !important;
  max-width: min(260px, calc(100vw - 42px)) !important;
  overflow: hidden !important;
  z-index: 20 !important;
}

body.nox-desktop .reaction-menu.open {
  display: grid !important;
}

/* Composer po v4.10.9 potrafil sie zwinac. Wymuszamy stabilny layout. */
body.nox-desktop .composer-wrap {
  padding: 9px 14px 11px !important;
  overflow: visible !important;
}

body.nox-desktop .composer {
  display: grid !important;
  grid-template-columns: 48px minmax(260px, 1fr) 118px !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.nox-desktop .attach-btn {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
}

body.nox-desktop #messageInput {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  height: 48px !important;
  max-height: 120px !important;
  padding: 12px 14px !important;
  resize: none !important;
  box-sizing: border-box !important;
  font-size: .92rem !important;
  line-height: 1.28 !important;
}

body.nox-desktop #sendBtn {
  width: 118px !important;
  min-width: 118px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  white-space: nowrap !important;
}

body.nox-desktop .emoji-strip {
  margin-bottom: 7px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}
body.nox-desktop .emoji-strip::-webkit-scrollbar { display: none !important; }

@media (min-width: 1500px) {
  body.nox-desktop .messages > article.msg,
  body.nox-desktop .msg {
    width: min(1120px, 78%) !important;
    max-width: min(1120px, 78%) !important;
  }
  body.nox-desktop .messages > article.msg.own,
  body.nox-desktop .msg.own {
    width: min(1060px, 74%) !important;
    max-width: min(1060px, 74%) !important;
  }
}

@media (max-width: 980px) {
  body.nox-desktop .composer {
    grid-template-columns: 44px minmax(0, 1fr) 96px !important;
    gap: 8px !important;
  }
  body.nox-desktop #sendBtn {
    width: 96px !important;
    min-width: 96px !important;
  }
  body.nox-desktop .messages > article.msg,
  body.nox-desktop .msg,
  body.nox-desktop .messages > article.msg.own,
  body.nox-desktop .msg.own {
    width: min(100%, 96%) !important;
    max-width: min(100%, 96%) !important;
  }
}

/* =========================================================
   NOX v4.10.11 - strong composer + readable reactions
   Cel:
   - naprawic realnie pole wpisywania,
   - powiekszyc czytelnosc tekstu,
   - usunac poziomy scroll po reakcjach.
   ========================================================= */
body.nox-desktop .chat-panel,
body.nox-desktop .messages,
body.nox-desktop .composer-wrap {
  min-width: 0 !important;
}

body.nox-desktop .chat-panel {
  overflow: hidden !important;
}

body.nox-desktop .messages {
  overflow-x: hidden !important;
  padding: 12px 18px 14px !important;
  gap: 9px !important;
}

body.nox-desktop .messages > article.msg,
body.nox-desktop .msg {
  width: min(1180px, 88%) !important;
  max-width: min(1180px, 88%) !important;
  min-width: min(360px, 100%) !important;
  padding: 10px 14px 11px 11px !important;
  margin-bottom: 8px !important;
  gap: 10px !important;
  border-radius: 16px !important;
}

body.nox-desktop .messages > article.msg.own,
body.nox-desktop .msg.own {
  width: min(1080px, 84%) !important;
  max-width: min(1080px, 84%) !important;
}

body.nox-desktop .msg-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
}

body.nox-desktop .msg-main {
  min-width: 0 !important;
  padding-right: 54px !important;
}

body.nox-desktop .msg-meta {
  margin-bottom: 5px !important;
  gap: 7px !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
}

body.nox-desktop .msg-author {
  font-size: .84rem !important;
}

body.nox-desktop .msg-content {
  font-size: 1rem !important;
  line-height: 1.45 !important;
}

body.nox-desktop .msg-reactions.compact {
  position: absolute !important;
  right: 10px !important;
  bottom: 8px !important;
  max-width: 44px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 4 !important;
}

body.nox-desktop .msg-reactions.compact .reaction-summary {
  width: auto !important;
  max-width: 44px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  overflow: visible !important;
}

body.nox-desktop .msg-reactions.compact .reaction-summary-btn,
body.nox-desktop .msg-reactions.compact .reaction-menu-toggle {
  width: 34px !important;
  min-width: 34px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: rgba(7, 12, 24, .92) !important;
  border: 1px solid rgba(45, 212, 191, .28) !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.18) !important;
}

body.nox-desktop .reaction-menu {
  right: 0 !important;
  left: auto !important;
  bottom: 30px !important;
  max-width: min(250px, calc(100vw - 40px)) !important;
  z-index: 30 !important;
}

body.nox-desktop .reaction-summary:empty {
  display: none !important;
}

/* Composer: bardzo mocne nadpisanie ukladu */
body.nox-desktop .composer-wrap {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px 12px !important;
  overflow: visible !important;
}

body.nox-desktop .emoji-strip {
  margin: 0 0 8px 0 !important;
}

body.nox-desktop #messageForm.composer,
body.nox-desktop form#messageForm,
body.nox-desktop .composer {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 116px !important;
  grid-template-areas: "attach input send" !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

body.nox-desktop #attachBtn,
body.nox-desktop #messageForm.composer .attach-btn {
  grid-area: attach !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
}

body.nox-desktop #mediaInput,
body.nox-desktop #messageForm.composer input[type="file"],
body.nox-desktop .hidden-file-input {
  display: none !important;
}

body.nox-desktop #messageInput,
body.nox-desktop #messageForm.composer textarea {
  grid-area: input !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 136px !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  font-size: .98rem !important;
  line-height: 1.35 !important;
  resize: none !important;
}

body.nox-desktop #sendBtn,
body.nox-desktop #messageForm.composer button[type="submit"] {
  grid-area: send !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: 116px !important;
  min-width: 116px !important;
  max-width: 116px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  white-space: nowrap !important;
}

@media (max-width: 1160px) {
  body.nox-desktop .messages > article.msg,
  body.nox-desktop .msg,
  body.nox-desktop .messages > article.msg.own,
  body.nox-desktop .msg.own {
    width: min(100%, 96%) !important;
    max-width: min(100%, 96%) !important;
  }
}

@media (max-width: 820px) {
  body.nox-desktop #messageForm.composer,
  body.nox-desktop form#messageForm,
  body.nox-desktop .composer {
    grid-template-columns: 44px minmax(0, 1fr) 96px !important;
    gap: 8px !important;
  }
  body.nox-desktop #sendBtn,
  body.nox-desktop #messageForm.composer button[type="submit"] {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }
}

/* =========================================================
   NOX v4.10.12 - header actions + reaction menu polish
   ========================================================= */
body.nox-desktop .app-shell {
  grid-template-columns: clamp(288px, 20.8vw, 350px) minmax(0, 1fr) minmax(0, 0px) !important;
}

body.nox-desktop .channel-sidebar {
  padding-top: 12px !important;
  overflow-x: hidden !important;
}

body.nox-desktop .user-card {
  min-height: 82px !important;
  padding: 13px 14px !important;
  align-items: center !important;
  overflow: visible !important;
}

body.nox-desktop .user-card .avatar,
body.nox-desktop .profile-avatar,
body.nox-desktop .user-avatar {
  flex: 0 0 auto !important;
}

body.nox-desktop .user-card .status-dot,
body.nox-desktop .status-dot {
  top: 16px !important;
  right: 14px !important;
}

/* Header: tytul i presence maja siedziec w jednej gornej strefie, bez marnowania pionu. */
body.nox-desktop .chat-header {
  display: grid !important;
  grid-template-columns: minmax(230px, .82fr) minmax(420px, 1.18fr) !important;
  align-items: start !important;
  gap: 10px 18px !important;
  min-height: 74px !important;
  padding: 8px 16px 7px !important;
}

body.nox-desktop .chat-title-block {
  align-self: start !important;
  justify-self: start !important;
  padding-top: 0 !important;
  min-width: 0 !important;
}

body.nox-desktop .chat-header h2 {
  margin: 2px 0 2px !important;
  font-size: clamp(1.15rem, 1.35vw, 1.55rem) !important;
  line-height: 1.02 !important;
}

body.nox-desktop .chat-header p {
  margin: 0 !important;
  font-size: .72rem !important;
  line-height: 1.08 !important;
}

body.nox-desktop .chat-header-actions {
  align-self: start !important;
  justify-self: end !important;
  width: min(100%, 690px) !important;
  padding-top: 1px !important;
}

body.nox-desktop .nox-presence-stack {
  width: 100% !important;
  max-width: 690px !important;
  gap: 4px !important;
}

body.nox-desktop .nox-presence-stack .presence-radar,
body.nox-desktop .nox-presence-stack .chat-presence-bar {
  height: 24px !important;
  min-height: 24px !important;
  padding: 2px 10px !important;
}

/* Wiadomosci: font lekko wiekszy, dymki bez zwiekszania gabarytow. */
body.nox-desktop .msg-content {
  font-size: 1.055rem !important;
  line-height: 1.44 !important;
}

body.nox-desktop .msg-meta {
  font-size: .80rem !important;
}

body.nox-desktop .msg-author {
  font-size: .87rem !important;
}

body.nox-desktop .msg-main {
  padding-right: 50px !important;
}

/* Reakcje: przytwierdzone do prawego dolnego rogu dymka, nie pod dymkiem. */
body.nox-desktop .msg-reactions.compact {
  position: absolute !important;
  right: 9px !important;
  bottom: 9px !important;
  width: auto !important;
  max-width: 46px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
}

body.nox-desktop .msg-reactions.compact .reaction-menu-toggle,
body.nox-desktop .msg-reactions.compact .reaction-summary-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 25px !important;
  min-height: 25px !important;
  border-radius: 999px !important;
}

body.nox-desktop .msg-reactions.compact .reaction-summary {
  max-width: 42px !important;
  overflow: visible !important;
}

/* Menu reakcji: 8 przyciskow w dwoch rzedach po 4, bez ucinania. */
body.nox-desktop .msg-reactions.compact .reaction-menu,
body.nox-desktop .reaction-menu {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  bottom: 34px !important;
  width: auto !important;
  min-width: 184px !important;
  max-width: 210px !important;
  display: none !important;
  grid-template-columns: repeat(4, 34px) !important;
  grid-auto-rows: 34px !important;
  gap: 6px !important;
  padding: 9px !important;
  overflow: visible !important;
  z-index: 80 !important;
}

body.nox-desktop .msg-reactions.compact .reaction-menu.open,
body.nox-desktop .reaction-menu.open {
  display: grid !important;
}

body.nox-desktop .reaction-menu .reaction-btn {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 1rem !important;
}

/* Kanaly: akcje obok siebie w stalej kolumnie, bez zjezdzania kosza pod spod. */
body.nox-desktop .channel-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "main actions" !important;
  align-items: stretch !important;
  gap: 6px !important;
}

body.nox-desktop .channel-row .channel-btn {
  grid-area: main !important;
  min-width: 0 !important;
}

body.nox-desktop .channel-row .channel-invite-btn,
body.nox-desktop .channel-row .channel-delete-btn {
  grid-area: actions !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  align-self: center !important;
  justify-self: end !important;
}

body.nox-desktop .channel-row .channel-invite-btn + .channel-delete-btn {
  margin-top: 42px !important;
}

body.nox-desktop .channel-row:has(.channel-invite-btn):has(.channel-delete-btn) {
  grid-template-columns: minmax(0, 1fr) 38px 38px !important;
  grid-template-areas: "main invite delete" !important;
}

body.nox-desktop .channel-row:has(.channel-invite-btn):has(.channel-delete-btn) .channel-invite-btn {
  grid-area: invite !important;
}

body.nox-desktop .channel-row:has(.channel-invite-btn):has(.channel-delete-btn) .channel-delete-btn {
  grid-area: delete !important;
  margin-top: 0 !important;
}

@media (max-width: 1180px) {
  body.nox-desktop .chat-header {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: auto !important;
  }
  body.nox-desktop .chat-header-actions {
    justify-self: stretch !important;
    width: 100% !important;
  }
}

/* =========================================================
   NOX v4.10.13 - layout stabilization pass
   Cel: mniej łatania kaskady, więcej stabilnego układu.
   ========================================================= */
body.nox-desktop .app-shell {
  grid-template-columns: clamp(296px, 21.5vw, 360px) minmax(0, 1fr) minmax(0, 0px) !important;
  gap: 12px !important;
}

body.nox-desktop .channel-sidebar,
body.nox-desktop .chat-panel {
  min-width: 0 !important;
}

/* Panel użytkownika: avatar, dane i zielona kropka w stabilnej siatce. */
body.nox-desktop .user-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 12px !important;
  grid-template-areas: "avatar main status" !important;
  align-items: center !important;
  gap: 11px !important;
  min-height: 88px !important;
  height: auto !important;
  padding: 13px 14px !important;
  overflow: visible !important;
}
body.nox-desktop .user-card #currentAvatar,
body.nox-desktop .user-card .avatar {
  grid-area: avatar !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
}
body.nox-desktop .user-card-main {
  grid-area: main !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
  align-content: center !important;
}
body.nox-desktop .user-card .status-dot {
  grid-area: status !important;
  position: static !important;
  width: 11px !important;
  height: 11px !important;
  align-self: start !important;
  justify-self: center !important;
  margin-top: 7px !important;
}
body.nox-desktop .user-name,
body.nox-desktop #currentUsername,
body.nox-desktop .profile-status-line {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.nox-desktop .profile-status-line {
  display: block !important;
  font-size: .72rem !important;
  line-height: 1.15 !important;
}

/* Header: tytuł i presence w jednym rzędzie, bez dziedziczenia starych grid-column: 1 / -1. */
body.nox-desktop .chat-header {
  display: grid !important;
  grid-template-columns: minmax(190px, 0.92fr) minmax(360px, 560px) !important;
  grid-template-rows: auto !important;
  align-items: start !important;
  gap: 10px 18px !important;
  min-height: 0 !important;
  padding: 9px 16px 8px !important;
  overflow: visible !important;
}
body.nox-desktop .chat-title-block {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  min-width: 0 !important;
  padding-top: 0 !important;
}
body.nox-desktop .chat-header h2 {
  margin: 2px 0 2px !important;
  font-size: clamp(1.12rem, 1.25vw, 1.48rem) !important;
  line-height: 1.04 !important;
}
body.nox-desktop .chat-header p {
  margin: 0 !important;
  font-size: .72rem !important;
  line-height: 1.1 !important;
}
body.nox-desktop .chat-header-actions {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  justify-items: stretch !important;
  align-items: start !important;
  gap: 4px !important;
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
body.nox-desktop .nox-presence-stack {
  grid-row: 1 !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-self: start !important;
}
body.nox-desktop .nox-presence-stack .presence-radar,
body.nox-desktop .nox-presence-stack .chat-presence-bar {
  height: 24px !important;
  min-height: 24px !important;
  padding: 2px 9px !important;
  gap: 7px !important;
  line-height: 1 !important;
}
body.nox-desktop .nox-presence-stack .presence-radar-kicker,
body.nox-desktop .nox-presence-stack .chat-presence-kicker {
  font-size: 9.5px !important;
  line-height: 1 !important;
  letter-spacing: .1em !important;
  white-space: nowrap !important;
}
body.nox-desktop .header-utility-controls {
  grid-row: 2 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  opacity: .78 !important;
}
body.nox-desktop .header-utility-controls .timezone-pill,
body.nox-desktop .header-utility-controls .socket-pill,
body.nox-desktop .header-utility-controls .ghost {
  min-height: 22px !important;
  height: 22px !important;
  padding: 2px 7px !important;
  font-size: .64rem !important;
  border-radius: 999px !important;
}

/* Wiadomości: zostawiamy czytelny font, bez dalszego pompowania dymków. */
body.nox-desktop .msg-content {
  font-size: 1.075rem !important;
  line-height: 1.43 !important;
}
body.nox-desktop .msg-meta {
  font-size: .80rem !important;
}
body.nox-desktop .msg-main {
  padding-right: 46px !important;
}

/* Reakcje przytwierdzone do dymka. Menu jest od v4.10.13 renderowane jako floating w body. */
body.nox-desktop .msg-reactions.compact {
  position: absolute !important;
  right: 9px !important;
  bottom: 8px !important;
  width: 36px !important;
  max-width: 36px !important;
  display: grid !important;
  justify-items: end !important;
  align-items: end !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 4 !important;
}
body.nox-desktop .msg-reactions.compact .reaction-summary {
  display: grid !important;
  gap: 3px !important;
  justify-items: end !important;
  max-width: 36px !important;
  overflow: visible !important;
}
body.nox-desktop .msg-reactions.compact .reaction-menu-toggle,
body.nox-desktop .msg-reactions.compact .reaction-summary-btn {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
}
body.nox-desktop .msg-reactions.compact .reaction-menu {
  display: none !important;
}
.reaction-floating-menu.hidden { display: none !important; }
.reaction-floating-menu {
  position: fixed !important;
  z-index: 9000 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 38px) !important;
  grid-auto-rows: 38px !important;
  gap: 7px !important;
  padding: 10px !important;
  width: max-content !important;
  border-radius: 18px !important;
  border: 1px solid rgba(45, 212, 191, .28) !important;
  background: rgba(6, 12, 28, .98) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}
.reaction-floating-menu .reaction-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 13px !important;
  font-size: 1.12rem !important;
}

/* Kanały: nazwa + akcje w jednym rzędzie, bez spadania kosza pod spód. */
body.nox-desktop .channel-row,
body.nox-desktop .voice-channel-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 6px !important;
  min-width: 0 !important;
}
body.nox-desktop .channel-row .channel-btn,
body.nox-desktop .voice-channel-row .voice-channel-btn {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.nox-desktop .channel-row .channel-invite-btn,
body.nox-desktop .channel-row .channel-delete-btn,
body.nox-desktop .voice-channel-row .voice-channel-manage-btn,
body.nox-desktop .voice-channel-row .voice-channel-delete-btn {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: auto !important;
  min-height: 38px !important;
  margin: 0 !important;
  align-self: stretch !important;
  display: grid !important;
  place-items: center !important;
}
body.nox-desktop .channel-row .channel-invite-btn + .channel-delete-btn {
  margin-top: 0 !important;
}
body.nox-desktop .channel-btn .channel-name,
body.nox-desktop .voice-channel-main {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  body.nox-desktop .chat-header {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }
  body.nox-desktop .chat-header-actions {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }
}


/* =========================================================
   NOX v4.10.14 - sidebar + message actions refactor
   ========================================================= */
.channel-create-launch,
.voice-create-launch {
  display: grid !important;
  gap: 8px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(45, 212, 191, .18) !important;
  background: linear-gradient(180deg, rgba(45, 212, 191, .055), rgba(15, 23, 42, .25)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.channel-create-launch small,
.voice-create-launch small {
  color: rgba(203, 213, 225, .62) !important;
  font-size: .72rem !important;
  line-height: 1.25 !important;
}
.nox-create-channel-btn {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, .20), rgba(14, 165, 233, .08)) !important;
  border: 1px solid rgba(45, 212, 191, .38) !important;
  color: rgba(94, 234, 212, .98) !important;
  font-weight: 1000 !important;
  letter-spacing: .02em !important;
}
.nox-create-channel-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 0 24px rgba(45, 212, 191, .14) !important; }

/* Message action rail: reply + reaction share one stable place */
body.nox-desktop .msg {
  position: relative !important;
  overflow: visible !important;
}
body.nox-desktop .msg-main {
  padding-right: 48px !important;
}
body.nox-desktop .msg-action-rail {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  z-index: 6 !important;
}
body.nox-desktop .msg-action-rail button,
body.nox-desktop .msg-reactions.compact .reaction-summary-btn {
  width: 30px !important;
  min-width: 30px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(7, 12, 24, .94) !important;
  border: 1px solid rgba(45, 212, 191, .30) !important;
  color: rgba(226, 232, 240, .95) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.20) !important;
  font-size: .84rem !important;
  line-height: 1 !important;
}
body.nox-desktop .msg-action-rail button:hover,
body.nox-desktop .msg-reactions.compact .reaction-summary-btn:hover {
  border-color: rgba(94, 234, 212, .62) !important;
  box-shadow: 0 0 18px rgba(45, 212, 191, .14) !important;
}
body.nox-desktop .msg-reactions.compact {
  position: absolute !important;
  right: 46px !important;
  bottom: 10px !important;
  width: auto !important;
  max-width: min(220px, calc(100% - 96px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.nox-desktop .msg-reactions.compact:not(.has-summary) { display: none !important; }
body.nox-desktop .msg-reactions.compact .reaction-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  max-width: 100% !important;
}
.reaction-floating-menu {
  position: fixed !important;
  display: grid !important;
  grid-template-columns: repeat(4, 34px) !important;
  gap: 7px !important;
  width: max-content !important;
  padding: 10px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(18, 24, 49, .98), rgba(7, 12, 24, .98)) !important;
  border: 1px solid rgba(45, 212, 191, .35) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.45), 0 0 34px rgba(45, 212, 191, .12) !important;
  z-index: 99999 !important;
}
.reaction-floating-menu.hidden { display: none !important; }
.reaction-floating-menu .reaction-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: rgba(15, 23, 42, .78) !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  font-size: 1rem !important;
}
.reaction-floating-menu .reaction-btn.active,
.reaction-floating-menu .reaction-btn:hover {
  border-color: rgba(94, 234, 212, .65) !important;
  background: rgba(45, 212, 191, .14) !important;
}

/* Create channel modal */
.nox-channel-create-modal.hidden { display: none !important; }
.nox-channel-create-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 26px !important;
}
.nox-channel-create-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(2, 6, 23, .68) !important;
  backdrop-filter: blur(10px) !important;
}
.nox-channel-create-card {
  position: relative !important;
  width: min(920px, calc(100vw - 54px)) !important;
  max-height: min(740px, calc(100vh - 54px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 0px !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  border: 1px solid rgba(45, 212, 191, .34) !important;
  background: linear-gradient(135deg, rgba(17, 24, 49, .98), rgba(10, 14, 35, .98)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.52), 0 0 50px rgba(45, 212, 191, .13) !important;
  transition: grid-template-columns .22s ease !important;
}
.nox-channel-create-card.private-on { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important; }
.nox-channel-create-main { padding: 22px !important; min-width: 0 !important; }
.nox-channel-create-head { display: flex !important; justify-content: space-between !important; gap: 16px !important; margin-bottom: 18px !important; }
.nox-channel-create-head small,
.nox-channel-invite-head small { color: var(--accent-2) !important; text-transform: uppercase !important; letter-spacing: .16em !important; font-weight: 1000 !important; }
.nox-channel-create-head h3 { margin: 4px 0 4px !important; font-size: 1.35rem !important; }
.nox-channel-create-head p,
.nox-channel-invite-head p { margin: 0 !important; color: var(--muted) !important; font-size: .86rem !important; line-height: 1.35 !important; }
.nox-channel-create-close { width: 36px !important; height: 36px !important; min-height: 36px !important; border-radius: 12px !important; }
.nox-channel-create-form { display: grid !important; gap: 13px !important; }
.nox-channel-create-form label { display: grid !important; gap: 7px !important; color: rgba(226, 232, 240, .92) !important; font-size: .78rem !important; font-weight: 900 !important; }
.nox-channel-create-form input[type="text"],
.nox-channel-create-form input:not([type]) {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  background: rgba(3, 6, 18, .68) !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  color: var(--text) !important;
}
.nox-create-private-toggle {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  padding: 13px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(45, 212, 191, .18) !important;
  background: rgba(15, 23, 42, .42) !important;
}
.nox-create-private-toggle input { width: 34px !important; height: 20px !important; }
.nox-create-private-copy { display: grid !important; gap: 2px !important; }
.nox-create-private-copy small { color: var(--muted) !important; font-weight: 700 !important; line-height: 1.25 !important; }
.nox-channel-create-actions { display: flex !important; justify-content: flex-end !important; gap: 10px !important; margin-top: 4px !important; }
.nox-channel-invite-side {
  min-width: 0 !important;
  padding: 22px 18px !important;
  border-left: 1px solid rgba(45, 212, 191, .20) !important;
  background: linear-gradient(180deg, rgba(45, 212, 191, .07), rgba(139, 92, 246, .06)) !important;
  transform: translateX(14px) !important;
  opacity: 0 !important;
  transition: transform .22s ease, opacity .18s ease !important;
  overflow: hidden !important;
}
.nox-channel-create-card.private-on .nox-channel-invite-side { transform: translateX(0) !important; opacity: 1 !important; }
.nox-channel-invite-users { display: grid !important; gap: 9px !important; max-height: 470px !important; overflow: auto !important; padding-right: 4px !important; margin-top: 14px !important; }
.nox-create-user {
  display: grid !important;
  grid-template-columns: auto 36px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px !important;
  border-radius: 15px !important;
  background: rgba(15, 23, 42, .55) !important;
  border: 1px solid rgba(148, 163, 184, .13) !important;
}
.nox-create-user:hover { border-color: rgba(45, 212, 191, .35) !important; }
.nox-create-user-avatar { width: 36px !important; height: 36px !important; border-radius: 12px !important; }
.nox-create-user span:last-child { min-width: 0 !important; display: grid !important; }
.nox-create-user strong { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.nox-create-user small { color: var(--muted) !important; font-size: .74rem !important; }

/* Channel action rail in sidebar */
.channel-row,
.voice-channel-row {
  grid-template-columns: minmax(0, 1fr) 42px !important;
  grid-auto-columns: 42px !important;
  align-items: stretch !important;
  gap: 6px !important;
}
.channel-invite-btn,
.channel-delete-btn,
.voice-channel-manage-btn,
.voice-channel-delete-btn {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  min-height: 42px !important;
  border-radius: 14px !important;
  padding: 0 !important;
}
.channel-row .channel-delete-btn,
.voice-channel-row .voice-channel-delete-btn { grid-column: auto !important; }

body.nox-desktop .user-card {
  min-height: 82px !important;
  padding: 13px 14px !important;
  overflow: visible !important;
}
body.nox-desktop .user-card-main { overflow: visible !important; }

@media (max-width: 760px) {
  .nox-channel-create-card,
  .nox-channel-create-card.private-on { grid-template-columns: minmax(0, 1fr) !important; width: min(540px, calc(100vw - 28px)) !important; }
  .nox-channel-invite-side { display: none !important; }
  .nox-channel-create-card.private-on .nox-channel-invite-side { display: block !important; border-left: 0 !important; border-top: 1px solid rgba(45, 212, 191, .2) !important; }
}


/* =========================================================
   NOX v4.10.15 - modal and message actions polish
   Cel: dopracowac komponenty bez przebudowy dzialajacego flow v4.10.14.
   ========================================================= */

/* Modal tworzenia kanalow: czytelniejszy, mniej systemowy. */
.nox-channel-create-modal {
  padding: clamp(18px, 2.2vw, 34px) !important;
}
.nox-channel-create-card {
  width: min(980px, calc(100vw - 54px)) !important;
  border-radius: 28px !important;
  border-color: rgba(45, 212, 191, .42) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(45, 212, 191, .13), transparent 34%),
    radial-gradient(circle at 95% 12%, rgba(139, 92, 246, .13), transparent 32%),
    linear-gradient(135deg, rgba(17, 24, 49, .98), rgba(8, 12, 31, .99)) !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.58), 0 0 46px rgba(45, 212, 191, .12) !important;
}
.nox-channel-create-card.private-on {
  grid-template-columns: minmax(0, 1fr) minmax(310px, 360px) !important;
}
.nox-channel-create-main {
  padding: 26px 26px 24px !important;
}
.nox-channel-create-head {
  align-items: flex-start !important;
  margin-bottom: 20px !important;
}
.nox-channel-create-head small,
.nox-channel-invite-head small {
  font-size: .77rem !important;
  letter-spacing: .19em !important;
  color: #35f7e8 !important;
  text-shadow: 0 0 14px rgba(45, 212, 191, .22) !important;
}
.nox-channel-create-head h3 {
  margin: 5px 0 5px !important;
  font-size: clamp(1.42rem, 2.2vw, 1.72rem) !important;
  line-height: 1.05 !important;
}
.nox-channel-create-head p,
.nox-channel-invite-head p {
  font-size: .94rem !important;
  line-height: 1.42 !important;
  color: rgba(203, 213, 225, .82) !important;
}
.nox-channel-create-close {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 14px !important;
  color: rgba(226, 232, 240, .92) !important;
  background: rgba(15, 23, 42, .78) !important;
  border: 1px solid rgba(45, 212, 191, .26) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 10px 24px rgba(0,0,0,.22) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}
.nox-channel-create-close:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(94, 234, 212, .7) !important;
  box-shadow: 0 0 18px rgba(45, 212, 191, .20), 0 10px 24px rgba(0,0,0,.24) !important;
}
.nox-channel-create-form {
  gap: 15px !important;
}
.nox-channel-create-form label {
  font-size: .86rem !important;
  letter-spacing: .015em !important;
}
.nox-channel-create-form input[type="text"],
.nox-channel-create-form input:not([type]) {
  min-height: 52px !important;
  border-radius: 18px !important;
  padding: 14px 15px !important;
  font-size: .96rem !important;
  background: rgba(3, 7, 20, .72) !important;
  border-color: rgba(148, 163, 184, .18) !important;
}
.nox-channel-create-form input[type="text"]:focus,
.nox-channel-create-form input:not([type]):focus {
  border-color: rgba(45, 212, 191, .54) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .10), 0 0 26px rgba(45, 212, 191, .08) !important;
}

/* Switch NOX zamiast systemowego checkboxa. */
.nox-create-private-toggle {
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 13px !important;
  align-items: center !important;
  padding: 14px 15px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  border-color: rgba(45, 212, 191, .26) !important;
  background: linear-gradient(135deg, rgba(20, 29, 58, .72), rgba(10, 18, 38, .72)) !important;
}
.nox-create-private-toggle input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}
.nox-create-switch {
  width: 52px !important;
  height: 28px !important;
  border-radius: 999px !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px !important;
  background: rgba(7, 12, 24, .92) !important;
  border: 1px solid rgba(148, 163, 184, .26) !important;
  box-shadow: inset 0 0 12px rgba(0,0,0,.28) !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.nox-create-switch > span {
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(203,213,225,.95), rgba(148,163,184,.88)) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.35) !important;
  transform: translateX(0) !important;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.nox-create-private-toggle input:checked + .nox-create-switch {
  border-color: rgba(45, 212, 191, .74) !important;
  background: linear-gradient(90deg, rgba(20,184,166,.9), rgba(124,58,237,.74)) !important;
  box-shadow: 0 0 22px rgba(45, 212, 191, .24), inset 0 0 16px rgba(255,255,255,.08) !important;
}
.nox-create-private-toggle input:checked + .nox-create-switch > span {
  transform: translateX(24px) !important;
  background: linear-gradient(135deg, #ecfeff, #67e8f9) !important;
  box-shadow: 0 0 16px rgba(103, 232, 249, .52), 0 5px 14px rgba(0,0,0,.35) !important;
}
.nox-create-private-copy strong {
  font-size: .93rem !important;
}
.nox-create-private-copy small {
  font-size: .78rem !important;
  color: rgba(203, 213, 225, .78) !important;
}

/* Panel zaproszonych: noxowe checkmarki zamiast HTML checkboxow. */
.nox-channel-invite-side {
  padding: 25px 20px !important;
  background:
    radial-gradient(circle at top right, rgba(45, 212, 191, .11), transparent 46%),
    linear-gradient(180deg, rgba(12, 28, 52, .72), rgba(15, 23, 42, .44)) !important;
}
.nox-channel-invite-users {
  max-height: 492px !important;
  gap: 10px !important;
  padding-right: 7px !important;
}
.nox-create-user {
  grid-template-columns: 25px 42px minmax(0, 1fr) !important;
  gap: 11px !important;
  padding: 11px !important;
  border-radius: 17px !important;
  cursor: pointer !important;
  background: rgba(15, 23, 42, .58) !important;
  border-color: rgba(148, 163, 184, .15) !important;
  transition: border-color .16s ease, background .16s ease, transform .16s ease !important;
}
.nox-create-user:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(45, 212, 191, .46) !important;
  background: rgba(20, 33, 63, .72) !important;
}
.nox-create-user input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.nox-create-check {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(3, 7, 18, .82) !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,.22) !important;
}
.nox-create-check::after {
  content: "" !important;
  width: 9px !important;
  height: 5px !important;
  border-left: 2px solid transparent !important;
  border-bottom: 2px solid transparent !important;
  transform: rotate(-45deg) translateY(-1px) !important;
  opacity: 0 !important;
  transition: opacity .16s ease !important;
}
.nox-create-user input:checked + .nox-create-check {
  border-color: rgba(45, 212, 191, .86) !important;
  background: linear-gradient(135deg, rgba(20,184,166,.92), rgba(124,58,237,.82)) !important;
  box-shadow: 0 0 18px rgba(45, 212, 191, .22), inset 0 0 12px rgba(255,255,255,.08) !important;
}
.nox-create-user input:checked + .nox-create-check::after {
  border-color: #ecfeff !important;
  opacity: 1 !important;
}
.nox-create-user-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
}
.nox-create-user strong { font-size: .92rem !important; }
.nox-create-user small { font-size: .76rem !important; }

/* Action rail: doklejony do krawedzi dymka, nie plywajacy w srodku. */
body.nox-desktop .msg {
  overflow: visible !important;
}
body.nox-desktop .msg-main {
  padding-right: 28px !important;
}
body.nox-desktop .msg-action-rail {
  position: absolute !important;
  right: -16px !important;
  bottom: 12px !important;
  display: grid !important;
  gap: 5px !important;
  z-index: 8 !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: rgba(7, 12, 24, .58) !important;
  border: 1px solid rgba(45, 212, 191, .20) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22), 0 0 22px rgba(45,212,191,.08) !important;
  opacity: .92 !important;
}
body.nox-desktop .msg-action-rail:hover,
body.nox-desktop .msg:hover .msg-action-rail {
  opacity: 1 !important;
}
body.nox-desktop .msg-action-rail .msg-reply-btn,
body.nox-desktop .msg-action-rail .reaction-menu-toggle {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  background: rgba(11, 20, 39, .94) !important;
  border: 1px solid rgba(45, 212, 191, .22) !important;
  color: rgba(226, 232, 240, .92) !important;
  box-shadow: none !important;
}
body.nox-desktop .msg-action-rail .msg-reply-btn:hover,
body.nox-desktop .msg-action-rail .reaction-menu-toggle:hover,
body.nox-desktop .msg-action-rail .reaction-menu-toggle.active {
  border-color: rgba(94, 234, 212, .68) !important;
  background: rgba(20, 184, 166, .16) !important;
}

/* Menu reakcji: podluzny pasek zamiast kwadratu. */
.reaction-floating-menu {
  grid-template-columns: repeat(8, 36px) !important;
  grid-auto-rows: 36px !important;
  gap: 6px !important;
  padding: 9px 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(7, 12, 24, .98), rgba(15, 23, 42, .98)) !important;
  border-color: rgba(45, 212, 191, .38) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.46), 0 0 28px rgba(45, 212, 191, .13) !important;
}
.reaction-floating-menu .reaction-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 999px !important;
  font-size: 1.08rem !important;
}

/* Panel uzytkownika: label jako zakladka ponad karta, bez przycinania. */
body.nox-desktop .user-card {
  margin-top: 16px !important;
  min-height: 92px !important;
  padding: 20px 14px 13px !important;
  overflow: visible !important;
}
body.nox-desktop .user-card::before {
  content: "PANEL UŻYTKOWNIKA" !important;
  position: absolute !important;
  left: 14px !important;
  top: -13px !important;
  height: 22px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  color: #35f7e8 !important;
  font-size: .70rem !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
  letter-spacing: .10em !important;
  background: rgba(8, 14, 30, .96) !important;
  border: 1px solid rgba(45, 212, 191, .34) !important;
  box-shadow: 0 0 18px rgba(45, 212, 191, .14) !important;
  z-index: 3 !important;
}
body.nox-desktop .user-card .status-dot {
  margin-top: 4px !important;
}

@media (max-width: 760px) {
  .reaction-floating-menu {
    grid-template-columns: repeat(4, 36px) !important;
    border-radius: 20px !important;
  }
  body.nox-desktop .msg-action-rail {
    right: 7px !important;
    bottom: 8px !important;
  }
}


/* =========================================================
   NOX v4.10.16 - UI component polish pass
   Cel: dopiescic modal po wlaczeniu PRIV, action rail i menu reakcji
   bez przebudowy dzialajacych flow z v4.10.15.
   ========================================================= */

/* Modal: po wlaczeniu priv lewa czesc nie ma sie wizualnie kurczyc. */
.nox-channel-create-card {
  width: min(980px, calc(100vw - 54px)) !important;
  transition: width .24s ease, grid-template-columns .24s ease, max-width .24s ease !important;
}
.nox-channel-create-card.private-on {
  width: min(1320px, calc(100vw - 54px)) !important;
  grid-template-columns: minmax(760px, 1fr) minmax(330px, 370px) !important;
}
.nox-channel-create-card.private-on .nox-channel-create-main {
  padding-right: 28px !important;
}
.nox-channel-create-card.private-on .nox-channel-create-form {
  max-width: 100% !important;
}
.nox-channel-invite-side {
  border-left-color: rgba(45, 212, 191, .26) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.025) !important;
}
.nox-channel-create-card.private-on .nox-channel-invite-side {
  animation: noxInviteSlideIn .22s ease both !important;
}
@keyframes noxInviteSlideIn {
  from { transform: translateX(18px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.nox-channel-invite-users {
  padding-right: 10px !important;
  scrollbar-gutter: stable !important;
}
.nox-channel-invite-users::-webkit-scrollbar { width: 8px !important; }
.nox-channel-invite-users::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(45, 212, 191, .86), rgba(124, 58, 237, .48)) !important;
  border-radius: 999px !important;
}

/* Action rail: bardziej zakotwiczony na brzegu dymka, a nie odklejony obok. */
body.nox-desktop .msg {
  overflow: visible !important;
  isolation: isolate !important;
}
body.nox-desktop .msg-main {
  padding-right: 46px !important;
}
body.nox-desktop .msg-action-rail {
  right: -5px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  gap: 4px !important;
  padding: 4px 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(9, 16, 32, .96), rgba(8, 13, 27, .90)) !important;
  border: 1px solid rgba(45, 212, 191, .30) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.30), 0 0 18px rgba(45,212,191,.12) !important;
}
body.nox-desktop .msg-action-rail::before {
  content: "" !important;
  position: absolute !important;
  left: -7px !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 10px !important;
  border-radius: 999px 0 0 999px !important;
  background: linear-gradient(90deg, rgba(45,212,191,.24), rgba(9,16,32,.92)) !important;
  border-left: 1px solid rgba(45,212,191,.20) !important;
  z-index: -1 !important;
}
body.nox-desktop .msg-action-rail .msg-reply-btn,
body.nox-desktop .msg-action-rail .reaction-menu-toggle {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  font-size: .92rem !important;
  background: rgba(12, 21, 42, .94) !important;
}
body.nox-desktop .msg-action-rail .msg-reply-btn:hover,
body.nox-desktop .msg-action-rail .reaction-menu-toggle:hover,
body.nox-desktop .msg-action-rail .reaction-menu-toggle.active {
  transform: translateX(-1px) !important;
}

/* Menu reakcji: podluzne, z przygotowanym przyciskiem + na przyszly picker. */
.reaction-floating-menu {
  grid-template-columns: repeat(9, 36px) !important;
  max-width: min(calc(100vw - 28px), 420px) !important;
  align-items: center !important;
}
.reaction-floating-menu .reaction-more-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  color: #67e8f9 !important;
  font-weight: 1000 !important;
  font-size: 1.05rem !important;
  background: rgba(20, 184, 166, .10) !important;
  border: 1px dashed rgba(45, 212, 191, .46) !important;
  cursor: pointer !important;
}
.reaction-floating-menu .reaction-more-btn:hover {
  background: rgba(20, 184, 166, .18) !important;
  border-style: solid !important;
  box-shadow: 0 0 16px rgba(45, 212, 191, .16) !important;
}

@media (max-width: 1180px) {
  .nox-channel-create-card.private-on {
    width: min(1040px, calc(100vw - 36px)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 350px) !important;
  }
}

@media (max-width: 860px) {
  .nox-channel-create-card,
  .nox-channel-create-card.private-on {
    width: min(560px, calc(100vw - 24px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .nox-channel-invite-side { display: none !important; }
  .reaction-floating-menu {
    grid-template-columns: repeat(5, 36px) !important;
    border-radius: 22px !important;
  }
  body.nox-desktop .msg-main { padding-right: 40px !important; }
  body.nox-desktop .msg-action-rail { right: 5px !important; }
}

/* =========================================================
   NOX v4.10.17 - modal stability + DM start modal + hover actions
   ========================================================= */

/* Modal tworzenia kanalow: tryb priv ma rozszerzac modal w bok, bez zmiany wysokosci i osi pionowej. */
.nox-channel-create-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: 28px 18px !important;
}
.nox-channel-create-card,
.nox-channel-create-card.private-on {
  height: min(720px, calc(100vh - 92px)) !important;
  min-height: min(720px, calc(100vh - 92px)) !important;
  max-height: min(720px, calc(100vh - 92px)) !important;
  align-self: center !important;
}
.nox-channel-create-card {
  grid-template-columns: minmax(0, 1fr) 0px !important;
  overflow: hidden !important;
}
.nox-channel-create-card.private-on {
  grid-template-columns: minmax(720px, 1fr) minmax(330px, 370px) !important;
}
.nox-channel-create-main,
.nox-channel-invite-side {
  min-height: 0 !important;
  height: 100% !important;
}
.nox-channel-create-main {
  display: flex !important;
  flex-direction: column !important;
}
.nox-channel-create-form {
  flex: 1 1 auto !important;
  align-content: start !important;
}
.nox-channel-create-actions {
  margin-top: 18px !important;
}
.nox-channel-invite-side {
  overflow: hidden !important;
}
.nox-channel-invite-users {
  max-height: calc(100% - 116px) !important;
}

/* Action rail: teraz jest polishowy dodatek, widoczny po hover/focus, a nie stale na wierzchu. */
body.nox-desktop .msg-action-rail {
  opacity: 0 !important;
  transform: translateY(-50%) translateX(8px) scale(.98) !important;
  pointer-events: none !important;
  transition: opacity .14s ease, transform .14s ease, border-color .14s ease, box-shadow .14s ease !important;
}
body.nox-desktop .msg:hover .msg-action-rail,
body.nox-desktop .msg:focus-within .msg-action-rail,
body.nox-desktop .msg-action-rail:hover,
body.nox-desktop .msg-action-rail:focus-within {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) scale(1) !important;
  pointer-events: auto !important;
}
@media (hover: none) {
  body.nox-desktop .msg-action-rail {
    opacity: .92 !important;
    transform: translateY(-50%) translateX(0) scale(1) !important;
    pointer-events: auto !important;
  }
}

/* Prywatne: start rozmowy jako modal, nie inline lista. */
.dm-start-modal-launch,
body.nox-desktop .dm-start-modal-launch {
  display: grid !important;
  gap: 8px !important;
  padding: 12px !important;
  margin-top: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(45, 212, 191, .22) !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, .68), rgba(8, 13, 30, .70)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.dm-start-modal-launch small {
  color: rgba(203, 213, 225, .68) !important;
  font-size: .72rem !important;
  line-height: 1.25 !important;
  padding: 0 3px !important;
}
.dm-start-modal-btn {
  width: 100% !important;
  min-height: 44px !important;
}

.nox-dm-start-modal.hidden { display: none !important; }
.nox-dm-start-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 130 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px 18px !important;
}
.nox-dm-start-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(2, 6, 23, .72) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
}
.nox-dm-start-card {
  position: relative !important;
  z-index: 1 !important;
  width: min(560px, calc(100vw - 36px)) !important;
  max-height: min(720px, calc(100vh - 92px)) !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 14px !important;
  padding: 24px !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, rgba(15, 37, 58, .96), rgba(18, 18, 48, .96) 56%, rgba(7, 13, 30, .98)) !important;
  border: 1px solid rgba(45, 212, 191, .42) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.44), 0 0 38px rgba(45,212,191,.10) !important;
  overflow: hidden !important;
}
.nox-dm-start-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 18px !important;
}
.nox-dm-start-head small {
  color: #35f7e8 !important;
  text-transform: uppercase !important;
  letter-spacing: .20em !important;
  font-size: .76rem !important;
  font-weight: 1000 !important;
}
.nox-dm-start-head h3 {
  margin: 5px 0 4px !important;
  font-size: 1.55rem !important;
}
.nox-dm-start-head p {
  margin: 0 !important;
  color: rgba(203,213,225,.78) !important;
  font-size: .94rem !important;
}
.dm-modal-search {
  width: 100% !important;
  height: 50px !important;
  padding: 0 15px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  background: rgba(3, 7, 18, .76) !important;
  color: #f8fafc !important;
  font-weight: 800 !important;
  outline: none !important;
}
.dm-modal-search:focus {
  border-color: rgba(45, 212, 191, .55) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .10) !important;
}
.dm-modal-list {
  min-height: 0 !important;
  overflow-y: auto !important;
  display: grid !important;
  gap: 10px !important;
  padding-right: 8px !important;
  scrollbar-gutter: stable !important;
}
.dm-modal-list::-webkit-scrollbar { width: 8px !important; }
.dm-modal-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(45, 212, 191, .86), rgba(124, 58, 237, .48)) !important;
  border-radius: 999px !important;
}
.dm-modal-user {
  width: 100% !important;
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  background: rgba(15, 23, 42, .72) !important;
  border: 1px solid rgba(148, 163, 184, .14) !important;
  color: #e5e7eb !important;
  text-align: left !important;
  cursor: pointer !important;
}
.dm-modal-user:hover,
.dm-modal-user:focus-visible {
  border-color: rgba(45, 212, 191, .48) !important;
  background: rgba(20, 184, 166, .10) !important;
  transform: translateY(-1px) !important;
}
.dm-modal-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
}
.dm-modal-user span { min-width: 0 !important; display: grid !important; gap: 2px !important; }
.dm-modal-user strong { font-size: .96rem !important; }
.dm-modal-user small { color: rgba(203, 213, 225, .70) !important; font-size: .78rem !important; }
.dm-modal-user em {
  font-style: normal !important;
  color: #67e8f9 !important;
  font-weight: 1000 !important;
  font-size: .72rem !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
.nox-dm-start-actions {
  display: flex !important;
  justify-content: flex-end !important;
  padding-top: 4px !important;
}
.dm-modal-refresh {
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(45, 212, 191, .24) !important;
  background: rgba(20, 184, 166, .10) !important;
  color: #67e8f9 !important;
  font-weight: 900 !important;
}

@media (max-width: 1180px) {
  .nox-channel-create-card.private-on {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 350px) !important;
  }
}
@media (max-width: 860px) {
  .nox-channel-create-card,
  .nox-channel-create-card.private-on {
    height: min(760px, calc(100vh - 40px)) !important;
    max-height: min(760px, calc(100vh - 40px)) !important;
  }
}

/* =========================================================
   NOX v4.11.2 - right users panel safe layout
   Baza: v4.10.17. Nie ruszamy renderowania lewych list.
   Lewy panel: tekst + priv + voice. Srodek: czat. Prawy: uzytkownicy.
   ========================================================= */
body.nox-desktop .app-shell {
  grid-template-columns: clamp(284px, 19vw, 330px) minmax(560px, 1fr) clamp(270px, 19vw, 340px) !important;
  gap: 12px !important;
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.nox-desktop .channel-sidebar,
body.nox-desktop .chat-panel,
body.nox-desktop .info-panel {
  min-height: 0 !important;
  height: calc(100vh - 24px) !important;
  max-height: calc(100vh - 24px) !important;
}

body.nox-desktop .channel-sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  overflow-y: auto !important;
}

body.nox-desktop .chat-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.nox-desktop .info-panel.right-users-panel {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-rows: auto minmax(130px, auto) minmax(0, 1fr) 0 0 !important;
  align-content: stretch !important;
  gap: 12px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.nox-desktop #presenceRadar {
  display: none !important;
}

body.nox-desktop .nox-presence-stack {
  gap: 0 !important;
}

body.nox-desktop .chat-header-actions {
  align-self: start !important;
}

body.nox-desktop .right-user-card-wrap,
body.nox-desktop .right-users-card {
  min-width: 0 !important;
}

body.nox-desktop .right-current-user-card {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 12px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(45, 212, 191, .24) !important;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, .12), rgba(139, 92, 246, .10)),
    rgba(7, 12, 24, .86) !important;
  color: var(--text) !important;
  text-align: left !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
  cursor: pointer !important;
}

body.nox-desktop .right-current-user-card:hover,
body.nox-desktop .right-current-user-card:focus-visible {
  border-color: rgba(45, 212, 191, .46) !important;
  box-shadow: 0 20px 54px rgba(0,0,0,.34), 0 0 24px rgba(45, 212, 191, .10), inset 0 1px 0 rgba(255,255,255,.08) !important;
  outline: none !important;
}

body.nox-desktop .right-current-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
  font-size: .95rem !important;
}

body.nox-desktop .right-current-main {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

body.nox-desktop .right-current-kicker {
  display: block !important;
  font-size: .62rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(125, 211, 252, .78) !important;
}

body.nox-desktop .right-current-main strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .98rem !important;
}

body.nox-desktop .right-current-main small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--faint) !important;
}

body.nox-desktop .right-current-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.14), 0 0 18px rgba(34,197,94,.45) !important;
}

body.nox-desktop .right-users-card {
  display: grid !important;
  min-height: 0 !important;
  padding: 12px !important;
  border-radius: 20px !important;
  background: rgba(7, 12, 24, .76) !important;
  border: 1px solid rgba(56, 189, 248, .15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body.nox-desktop .right-users-card .box-head {
  margin-bottom: 9px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(56, 189, 248, .18) !important;
}

body.nox-desktop .right-users-card h3 {
  font-size: .82rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

body.nox-desktop .right-users-count {
  min-width: 24px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(34, 211, 238, .10) !important;
  border: 1px solid rgba(34, 211, 238, .18) !important;
  color: rgba(186, 230, 253, .92) !important;
  text-align: center !important;
}

body.nox-desktop .right-users-list {
  display: grid !important;
  gap: 8px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
}

body.nox-desktop .right-active-card .right-users-list {
  max-height: 230px !important;
}

body.nox-desktop .right-user-row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 9px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  background: rgba(255,255,255,.035) !important;
  color: var(--text) !important;
  text-align: left !important;
}

body.nox-desktop .right-user-row.online {
  border-color: rgba(34, 197, 94, .18) !important;
  background: linear-gradient(90deg, rgba(34,197,94,.075), rgba(255,255,255,.028)) !important;
}

body.nox-desktop .right-user-row:hover,
body.nox-desktop .right-user-row:focus-visible {
  border-color: rgba(45, 212, 191, .30) !important;
  background: rgba(34, 211, 238, .075) !important;
  outline: none !important;
}

body.nox-desktop .right-user-avatar-wrap {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
}

body.nox-desktop .right-user-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  font-size: .8rem !important;
}

body.nox-desktop .right-online-dot,
body.nox-desktop .right-offline-dot {
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(7, 12, 24, .96) !important;
}

body.nox-desktop .right-online-dot {
  background: #22c55e !important;
  box-shadow: 0 0 12px rgba(34,197,94,.55) !important;
}

body.nox-desktop .right-offline-dot {
  background: rgba(148, 163, 184, .55) !important;
}

body.nox-desktop .right-user-main {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

body.nox-desktop .right-user-main strong,
body.nox-desktop .right-user-main small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.nox-desktop .right-user-main strong {
  font-size: .9rem !important;
}

body.nox-desktop .right-user-main small {
  color: var(--faint) !important;
  font-size: .72rem !important;
}

body.nox-desktop .right-me-label {
  display: inline-flex !important;
  margin-left: 4px !important;
  padding: 1px 5px !important;
  border-radius: 999px !important;
  background: rgba(45, 212, 191, .12) !important;
  border: 1px solid rgba(45, 212, 191, .22) !important;
  color: rgba(153, 246, 228, .95) !important;
  font-size: .64rem !important;
  vertical-align: middle !important;
}

body.nox-desktop .right-all-card {
  min-height: 0 !important;
}

body.nox-desktop .messages > article.msg,
body.nox-desktop .msg {
  max-width: min(900px, 86%) !important;
}

body.nox-desktop .messages > article.msg.own,
body.nox-desktop .msg.own {
  max-width: min(860px, 82%) !important;
}

@media (max-width: 1320px) {
  body.nox-desktop .app-shell {
    grid-template-columns: clamp(260px, 24vw, 310px) minmax(0, 1fr) clamp(240px, 24vw, 300px) !important;
  }
}

@media (max-width: 1120px) {
  body.nox-desktop .app-shell {
    grid-template-columns: clamp(260px, 28vw, 310px) minmax(0, 1fr) !important;
  }
  body.nox-desktop .info-panel.right-users-panel {
    display: none !important;
  }
  body.nox-desktop #presenceRadar {
    display: inline-flex !important;
  }
}


/* =========================================================
   NOX v4.11.3 - profile session + Linux scaling stability
   ========================================================= */
html,
body {
  height: 100% !important;
  min-height: 100% !important;
}

body.nox-desktop.nox-linux,
body.nox-desktop.nox-electron {
  overflow: hidden !important;
}

body.nox-desktop.nox-linux .app-shell,
body.nox-desktop.nox-electron .app-shell {
  height: var(--app-height, 100vh) !important;
  min-height: var(--app-height, 100vh) !important;
  max-height: var(--app-height, 100vh) !important;
  overflow: hidden !important;
}

body.nox-desktop.nox-linux .channel-sidebar,
body.nox-desktop.nox-linux .chat-panel,
body.nox-desktop.nox-linux .info-panel,
body.nox-desktop.nox-electron .channel-sidebar,
body.nox-desktop.nox-electron .chat-panel,
body.nox-desktop.nox-electron .info-panel {
  height: calc(var(--app-height, 100vh) - 24px) !important;
  max-height: calc(var(--app-height, 100vh) - 24px) !important;
  min-height: 0 !important;
}

body.nox-desktop.nox-linux .chat-panel,
body.nox-desktop.nox-electron .chat-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

body.nox-desktop.nox-linux .messages,
body.nox-desktop.nox-electron .messages {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Profil: zamykanie i zapis bez przypadkowego przeladowania formularza. */
#profileModal.hidden {
  display: none !important;
}

#profileModal .profile-card {
  max-width: min(680px, calc(100vw - 36px)) !important;
  overflow: visible !important;
}

#profileModal .modal-header {
  align-items: start !important;
  gap: 14px !important;
}

#closeProfileBtn.profile-close-btn,
#profileModal .profile-cancel-btn {
  border-color: rgba(45, 212, 191, .22) !important;
  background: rgba(15, 23, 42, .72) !important;
  color: rgba(224, 242, 254, .94) !important;
}

#closeProfileBtn.profile-close-btn:hover,
#profileModal .profile-cancel-btn:hover {
  border-color: rgba(45, 212, 191, .45) !important;
  background: rgba(45, 212, 191, .10) !important;
}

#profileModal .profile-form-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

#profileSaveBtn:disabled {
  opacity: .68 !important;
  cursor: wait !important;
}

/* Emoji picker w composerze: stabilny panel nad paskiem emotek. */
.composer-wrap,
.emoji-strip {
  overflow: visible !important;
}

.emoji-strip {
  position: relative !important;
  z-index: 12 !important;
}

.emoji-picker {
  left: 0 !important;
  right: auto !important;
  bottom: calc(100% + 10px) !important;
  max-width: min(420px, calc(100vw - 40px)) !important;
  max-height: min(280px, calc(var(--app-height, 100vh) - 220px)) !important;
  overflow-y: auto !important;
  z-index: 80 !important;
}

.emoji-picker.open {
  display: grid !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* =========================================================
   NOX v4.11.4 - profile emoji + desktop stability
   ========================================================= */
#profileModal .message-box.error {
  border-color: rgba(248, 113, 113, .42) !important;
  background: rgba(127, 29, 29, .22) !important;
  color: rgba(254, 226, 226, .96) !important;
}

#profileModal .message-box.ok {
  border-color: rgba(45, 212, 191, .38) !important;
  background: rgba(20, 184, 166, .16) !important;
  color: rgba(204, 251, 241, .96) !important;
}

body > .emoji-picker.nox-floating-emoji-picker {
  position: fixed !important;
  display: none !important;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)) !important;
  gap: 8px !important;
  padding: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 9999 !important;
  border-radius: 22px !important;
  border: 1px solid rgba(94, 234, 212, .30) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(45, 212, 191, .16), transparent 34%),
    radial-gradient(circle at 78% 10%, rgba(139, 92, 246, .20), transparent 38%),
    linear-gradient(180deg, rgba(12, 17, 39, .99), rgba(7, 11, 29, .99)) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.04) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
}

body > .emoji-picker.nox-floating-emoji-picker.open {
  display: grid !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

body > .emoji-picker.nox-floating-emoji-picker button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  font-size: 1.08rem !important;
  line-height: 1 !important;
}

body.nox-desktop.nox-linux,
body.nox-desktop.nox-electron {
  width: 100vw !important;
  height: var(--app-height, 100vh) !important;
  min-height: var(--app-height, 100vh) !important;
  max-height: var(--app-height, 100vh) !important;
}

body.nox-desktop.nox-linux .app-shell,
body.nox-desktop.nox-electron .app-shell {
  width: 100vw !important;
  height: var(--app-height, 100vh) !important;
  min-height: 0 !important;
  max-height: var(--app-height, 100vh) !important;
  overflow: hidden !important;
}


/* =========================================================
   NOX v4.11.5 - auth/profile/emoji hotfix
   ========================================================= */
body > .emoji-picker.nox-floating-emoji-picker {
  position: fixed !important;
  left: var(--nox-emoji-left, 12px) !important;
  top: var(--nox-emoji-top, 120px) !important;
  right: auto !important;
  bottom: auto !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 2147483000 !important;
}

body > .emoji-picker.nox-floating-emoji-picker.open {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body > .emoji-picker.nox-floating-emoji-picker button {
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* NOX v4.11.7 - profile save + auth debug
   Brak zmian layoutu; marker wersji dla walidacji wdrozenia. */


/* =========================================================
   NOX v4.11.9 - move user panel to right sidebar
   ========================================================= */
body.nox-desktop .right-user-card-wrap.moved-current-user-wrap {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.nox-desktop .right-user-card-wrap .user-card.right-owned-user-card {
  width: 100%;
  margin: 0;
  min-height: 0;
  cursor: default;
  user-select: none;
  border-color: rgba(104, 241, 255, 0.22);
  background:
    radial-gradient(circle at top left, rgba(95, 247, 125, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(16, 24, 50, 0.96), rgba(9, 13, 31, 0.98));
}

body.nox-desktop .right-user-card-wrap .user-card.right-owned-user-card:hover {
  transform: none;
  border-color: rgba(104, 241, 255, 0.34);
}

body.nox-desktop .right-user-card-wrap .user-card.right-owned-user-card .right-current-kicker {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(104, 241, 255, 0.76);
}

body.nox-desktop .right-user-card-wrap .user-card.right-owned-user-card .profile-status-line {
  white-space: normal;
  line-height: 1.25;
}

body.nox-desktop .right-user-card-wrap .user-card.right-owned-user-card .status-dot {
  flex: 0 0 auto;
}

@media (max-width: 1120px) {
  body.nox-desktop .right-user-card-wrap .user-card.right-owned-user-card {
    display: none;
  }
}

/* NOX v4.11.10 - channel context menu polish */
body.nox-desktop .channel-row,
body.nox-desktop .voice-channel-row {
  display: block !important;
  position: relative !important;
  gap: 0 !important;
}
body.nox-desktop .channel-row .channel-btn,
body.nox-desktop .voice-channel-row .voice-channel-btn {
  width: 100% !important;
  min-width: 0 !important;
  cursor: pointer !important;
}
body.nox-desktop .channel-row .channel-invite-btn,
body.nox-desktop .channel-row .channel-delete-btn,
body.nox-desktop .voice-channel-row .voice-channel-manage-btn,
body.nox-desktop .voice-channel-row .voice-channel-delete-btn {
  display: none !important;
}
body.nox-desktop .channel-row .channel-btn:hover,
body.nox-desktop .voice-channel-row .voice-channel-btn:hover {
  border-color: rgba(45, 212, 191, .46) !important;
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .12), 0 0 22px rgba(45, 212, 191, .08) !important;
}
body.nox-desktop .channel-row .channel-btn::after,
body.nox-desktop .voice-channel-row .voice-channel-btn::after {
  content: "PPM";
  position: absolute;
  right: 12px;
  top: 10px;
  color: rgba(45, 212, 191, .0);
  font-size: .55rem;
  font-weight: 950;
  letter-spacing: .12em;
  transition: color .16s ease, opacity .16s ease;
  pointer-events: none;
  opacity: 0;
}
body.nox-desktop .channel-row:hover .channel-btn::after,
body.nox-desktop .voice-channel-row:hover .voice-channel-btn::after {
  color: rgba(45, 212, 191, .72);
  opacity: .9;
}
.channel-context-menu {
  position: fixed;
  z-index: 2147482600;
  min-width: 286px;
  max-width: min(340px, calc(100vw - 24px));
  padding: 13px;
  border: 1px solid rgba(45, 212, 191, .45);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, .18), transparent 34%),
    linear-gradient(145deg, rgba(19, 18, 60, .98), rgba(4, 9, 24, .98));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .58), 0 0 34px rgba(45, 212, 191, .11);
  color: rgba(248, 250, 252, .96);
  backdrop-filter: blur(16px);
}
.channel-context-menu.hidden { display: none !important; }
.channel-context-head {
  display: grid;
  gap: 4px;
  padding: 3px 5px 11px;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  margin-bottom: 10px;
}
.channel-context-head small,
.channel-context-kicker {
  color: rgba(45, 252, 224, .92);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .66rem;
  font-weight: 950;
}
.channel-context-head strong {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-context-head em {
  color: rgba(203, 213, 225, .76);
  font-size: .76rem;
  font-style: normal;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-context-kicker {
  padding: 2px 5px 8px;
  font-size: .62rem;
}
.channel-context-action {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  color: inherit;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}
.channel-context-action:hover {
  border-color: rgba(45, 212, 191, .28);
  background: rgba(45, 212, 191, .08);
}
.channel-context-action.danger:hover {
  border-color: rgba(248, 113, 113, .32);
  background: rgba(127, 29, 29, .20);
}
.channel-context-icon {
  width: 36px;
  height: 36px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, .58);
  border: 1px solid rgba(45, 212, 191, .20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.channel-context-icon.danger {
  border-color: rgba(248, 113, 113, .26);
  background: rgba(127, 29, 29, .20);
}
.channel-context-action strong,
.channel-context-action small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel-context-action strong {
  font-size: .92rem;
  font-weight: 950;
  color: rgba(248, 250, 252, .96);
}
.channel-context-action small {
  margin-top: 2px;
  color: rgba(148, 163, 184, .82);
  font-size: .72rem;
  font-weight: 750;
}
.channel-context-action.danger strong { color: rgba(254, 202, 202, .96); }


/* --------------------------------------------------------------------------
   NOX v4.11.11 - section context menu + local poke polish
   -------------------------------------------------------------------------- */
body.nox-desktop .section-head.collapsible {
  cursor: pointer;
}
body.nox-desktop .section-head.collapsible:hover {
  border-color: rgba(45, 212, 191, .34) !important;
  box-shadow: 0 0 20px rgba(45, 212, 191, .07) !important;
}
body.nox-desktop .section-head.collapsible::after {
  content: "PPM";
  margin-left: 8px;
  color: rgba(45, 252, 224, 0);
  font-size: .54rem;
  font-weight: 950;
  letter-spacing: .14em;
  transition: color .16s ease, opacity .16s ease;
  opacity: 0;
}
body.nox-desktop .section-head.collapsible:hover::after {
  color: rgba(45, 252, 224, .62);
  opacity: .9;
}
.sidebar-section-context-menu .channel-context-action.section-poke:hover {
  border-color: rgba(168, 85, 247, .34);
  background: rgba(88, 28, 135, .18);
}
.sidebar-section-context-menu .section-poke-icon {
  border-color: rgba(168, 85, 247, .30);
  background: radial-gradient(circle at 35% 25%, rgba(45, 252, 224, .22), transparent 42%), rgba(88, 28, 135, .24);
}
.nox-section-poke {
  animation: noxSectionPoke 880ms ease both;
}
@keyframes noxSectionPoke {
  0% { transform: translateX(0); filter: brightness(1); }
  14% { transform: translateX(2px); filter: brightness(1.18); }
  30% { transform: translateX(-2px); }
  46% { transform: translateX(1px); box-shadow: 0 0 0 1px rgba(168, 85, 247, .28), 0 0 28px rgba(45, 212, 191, .14); }
  72% { transform: translateX(0); }
  100% { transform: translateX(0); filter: brightness(1); }
}


/* --------------------------------------------------------------------------
   NOX v4.11.12 - sidebar actions cleanup + item poke
   -------------------------------------------------------------------------- */
.channel-create-launch,
.voice-create-launch,
.dm-start-box.dm-start-modal-launch {
  display: none !important;
}
.channel-context-action.item-poke:hover {
  border-color: rgba(168, 85, 247, .34);
  background: rgba(88, 28, 135, .18);
}
.channel-context-icon.item-poke-icon {
  border-color: rgba(168, 85, 247, .30);
  background: radial-gradient(circle at 35% 25%, rgba(45, 252, 224, .22), transparent 42%), rgba(88, 28, 135, .24);
}
.nox-item-poke {
  animation: noxItemPoke 880ms ease both;
}
@keyframes noxItemPoke {
  0% { transform: translateX(0); filter: brightness(1); }
  14% { transform: translateX(2px); filter: brightness(1.18); }
  30% { transform: translateX(-2px); }
  46% { transform: translateX(1px); box-shadow: 0 0 0 1px rgba(168, 85, 247, .30), 0 0 28px rgba(45, 212, 191, .15); }
  72% { transform: translateX(0); }
  100% { transform: translateX(0); filter: brightness(1); }
}


/* --------------------------------------------------------------------------
   NOX v4.11.13 - NOX confirm modals
   -------------------------------------------------------------------------- */
.nox-confirm-modal.hidden { display: none !important; }
.nox-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 2147482700;
  display: grid;
  place-items: center;
  padding: 18px;
}
.nox-confirm-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(45, 212, 191, .16), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(124, 58, 237, .16), transparent 34%),
    rgba(2, 6, 23, .74);
  backdrop-filter: blur(12px);
}
.nox-confirm-card {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid rgba(45, 212, 191, .42);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, .16), transparent 34%),
    linear-gradient(145deg, rgba(19, 18, 60, .98), rgba(4, 9, 24, .98));
  color: rgba(248, 250, 252, .97);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .64), 0 0 42px rgba(45, 212, 191, .12);
  overflow: hidden;
}
.nox-confirm-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(45, 252, 224, .12), transparent 34%, rgba(124, 58, 237, .10));
}
.nox-confirm-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(45, 212, 191, .28);
  background: rgba(15, 23, 42, .66);
  color: rgba(226, 232, 240, .86);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.nox-confirm-x:hover {
  border-color: rgba(45, 252, 224, .50);
  color: #fff;
  background: rgba(45, 212, 191, .10);
}
.nox-confirm-kicker {
  color: rgba(45, 252, 224, .92);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 950;
  margin-bottom: 10px;
  padding-right: 46px;
}
.nox-confirm-card h2 {
  margin: 0 46px 8px 0;
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  line-height: 1.08;
  font-weight: 950;
}
.nox-confirm-lead {
  margin: 0 0 14px;
  color: rgba(226, 232, 240, .88);
  font-size: 1rem;
  font-weight: 850;
}
.nox-confirm-body {
  display: grid;
  gap: 8px;
  margin: 14px 0 22px;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 18px;
  background: rgba(2, 6, 23, .34);
  color: rgba(203, 213, 225, .84);
  font-size: .92rem;
  line-height: 1.45;
}
.nox-confirm-body p { margin: 0; }
.nox-confirm-body strong { color: rgba(45, 252, 224, .94); }
.nox-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.nox-confirm-btn {
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 16px;
  padding: 12px 17px;
  min-width: 118px;
  color: rgba(248, 250, 252, .94);
  font-weight: 950;
  cursor: pointer;
}
.nox-confirm-btn.secondary {
  background: rgba(15, 23, 42, .70);
}
.nox-confirm-btn.secondary:hover {
  border-color: rgba(45, 212, 191, .35);
  background: rgba(45, 212, 191, .08);
}
.nox-confirm-btn.danger {
  border-color: rgba(248, 113, 113, .32);
  background: linear-gradient(135deg, rgba(127, 29, 29, .96), rgba(190, 24, 93, .84));
  box-shadow: 0 12px 30px rgba(127, 29, 29, .22);
}
.nox-confirm-btn.danger:hover {
  border-color: rgba(254, 202, 202, .55);
  filter: brightness(1.08);
}
@media (max-width: 560px) {
  .nox-confirm-card { padding: 20px; }
  .nox-confirm-actions { flex-direction: column-reverse; }
  .nox-confirm-btn { width: 100%; }
}


/* --------------------------------------------------------------------------
   NOX v4.11.15 - Web dialog system polish
   -------------------------------------------------------------------------- */
.nox-confirm-modal.nox-dialog-error .nox-confirm-card {
  border-color: rgba(248, 113, 113, .46);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .66), 0 0 48px rgba(244, 63, 94, .16);
}
.nox-confirm-modal.nox-dialog-error .nox-confirm-kicker { color: rgba(251, 113, 133, .95); }
.nox-confirm-modal.nox-dialog-warn .nox-confirm-card {
  border-color: rgba(251, 191, 36, .34);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .66), 0 0 42px rgba(251, 191, 36, .10);
}
.nox-confirm-modal.nox-dialog-warn .nox-confirm-kicker { color: rgba(252, 211, 77, .95); }
.nox-confirm-btn.primary {
  border-color: rgba(45, 212, 191, .38);
  background: linear-gradient(135deg, rgba(20, 184, 166, .92), rgba(124, 58, 237, .70));
  box-shadow: 0 12px 30px rgba(45, 212, 191, .14);
}
.nox-confirm-btn.primary:hover {
  border-color: rgba(153, 246, 228, .60);
  filter: brightness(1.08);
}
.nox-confirm-prompt {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin: 14px 0 22px;
}
.nox-confirm-prompt.hidden { display: none !important; }
.nox-confirm-prompt span {
  color: rgba(45, 252, 224, .82);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 950;
}
.nox-confirm-prompt textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid rgba(45, 212, 191, .24);
  border-radius: 18px;
  padding: 13px 14px;
  color: rgba(248, 250, 252, .95);
  background: rgba(2, 6, 23, .52);
  outline: none;
}
.nox-confirm-prompt textarea:focus {
  border-color: rgba(45, 252, 224, .58);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .10);
}

/* --------------------------------------------------------------------------
   NOX v4.12.0 - Voice settings foundation
   -------------------------------------------------------------------------- */
.voice-settings-panel {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(45, 212, 191, .18);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, .12), transparent 42%),
    linear-gradient(145deg, rgba(15, 23, 42, .74), rgba(2, 6, 23, .84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.18);
}
.voice-settings-panel.capturing {
  border-color: rgba(45, 252, 224, .58);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .10), 0 18px 48px rgba(45, 212, 191, .10);
}
.voice-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.voice-settings-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.voice-settings-head span {
  color: rgba(45, 252, 224, .78);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .13em;
}
.voice-settings-head strong {
  color: rgba(248, 250, 252, .96);
  font-size: .92rem;
}
.voice-settings-head small {
  color: rgba(148, 163, 184, .86);
  line-height: 1.25;
}
.voice-settings-key {
  flex: 0 0 auto;
  min-width: 58px;
  border: 1px solid rgba(45, 212, 191, .28);
  border-radius: 14px;
  padding: 8px 10px;
  color: rgba(236, 254, 255, .96);
  font-weight: 950;
  background: linear-gradient(135deg, rgba(8, 47, 73, .88), rgba(88, 28, 135, .58));
  cursor: pointer;
}
.voice-settings-key:hover {
  border-color: rgba(153, 246, 228, .58);
  filter: brightness(1.08);
}
.voice-settings-options {
  display: grid;
  gap: 7px;
}
.voice-mode-pill {
  width: 100%;
  display: grid;
  gap: 2px;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 14px;
  padding: 9px 10px;
  color: rgba(226, 232, 240, .92);
  background: rgba(15, 23, 42, .48);
  cursor: pointer;
}
.voice-mode-pill strong {
  font-size: .82rem;
  color: rgba(248, 250, 252, .94);
}
.voice-mode-pill small {
  color: rgba(148, 163, 184, .84);
  font-size: .72rem;
}
.voice-mode-pill:hover {
  border-color: rgba(45, 212, 191, .28);
  background: rgba(45, 212, 191, .07);
}
.voice-mode-pill.active {
  border-color: rgba(45, 252, 224, .50);
  background: linear-gradient(135deg, rgba(20, 184, 166, .14), rgba(124, 58, 237, .12));
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .08);
}
.voice-settings-note {
  margin: 10px 0 0;
  color: rgba(148, 163, 184, .76);
  font-size: .72rem;
  line-height: 1.35;
}
.voice-global-ptt-note {
  color: rgba(94, 234, 212, .82);
  border-left: 2px solid rgba(45, 212, 191, .38);
  padding-left: 9px;
}
.voice-channel-mode {
  align-self: center;
  justify-self: start;
  border: 1px solid rgba(45, 212, 191, .18);
  border-radius: 999px;
  padding: 7px 10px;
  color: rgba(153, 246, 228, .92);
  background: rgba(45, 212, 191, .07);
  font-size: .74rem;
  font-weight: 900;
}
@media (max-width: 860px) {
  .voice-settings-head { flex-direction: column; }
  .voice-settings-key { width: 100%; }
}

/* ------------------------------------------------------------------
   NOX v4.12.1 - In-App Push-to-Talk
------------------------------------------------------------------ */
.voice-channel-action.ptt,
.voice-mute-btn.ptt,
.mobile-voice-action.ptt {
  border-color: rgba(95, 247, 219, 0.45);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(91, 60, 196, 0.18));
  color: #dffdf9;
}

.voice-channel-action.ptt.active,
.voice-mute-btn.ptt.active,
.mobile-voice-action.ptt.active {
  box-shadow: 0 0 0 1px rgba(95, 247, 219, 0.55), 0 0 18px rgba(95, 247, 219, 0.22);
  filter: brightness(1.08);
}

/* ------------------------------------------------------------------
   NOX v4.12.5 - Clean Voice Sidebar
   Pelne ustawienia voice sa pod gorna zebatka; sidebar pokazuje tylko kanaly.
------------------------------------------------------------------ */
#voiceSettingsPanel { display: none !important; }

/* ------------------------------------------------------------------
   NOX v4.12.3 - Voice settings under Gear / Options
------------------------------------------------------------------ */
#voiceSettingsPanel.voice-settings-panel {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.voice-settings-compact {
  width: 100%;
  display: grid;
  gap: 3px;
  text-align: left;
  border: 1px solid rgba(45, 212, 191, .18);
  border-radius: 16px;
  padding: 10px 11px;
  color: rgba(226, 232, 240, .92);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, .10), transparent 44%),
    linear-gradient(145deg, rgba(15, 23, 42, .62), rgba(2, 6, 23, .74));
  cursor: pointer;
}
.voice-settings-compact:hover {
  border-color: rgba(45, 252, 224, .38);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, .16), transparent 44%),
    linear-gradient(145deg, rgba(15, 23, 42, .72), rgba(2, 6, 23, .82));
}
.voice-settings-compact-kicker {
  color: rgba(45, 252, 224, .72);
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .13em;
}
.voice-settings-compact strong {
  color: rgba(248, 250, 252, .96);
  font-size: .86rem;
}
.voice-settings-compact small {
  color: rgba(148, 163, 184, .82);
  line-height: 1.25;
}
.settings-card {
  width: min(860px, calc(100vw - 32px));
}
.settings-grid {
  display: grid;
  gap: 14px;
  padding: 0 22px 22px;
}
.settings-box {
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 22px;
  padding: 16px;
  background: rgba(15, 23, 42, .44);
}
.settings-box.active {
  border-color: rgba(45, 212, 191, .24);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, .10), transparent 36%),
    rgba(15, 23, 42, .48);
}
.settings-box.muted-box {
  opacity: .78;
}
.settings-box-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.settings-box-head span {
  display: inline-block;
  color: rgba(45, 252, 224, .72);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .13em;
  margin-bottom: 4px;
}
.settings-box-head h3 {
  margin: 0;
  color: rgba(248, 250, 252, .96);
  font-size: 1rem;
}
.settings-badge {
  border: 1px solid rgba(45, 212, 191, .22);
  border-radius: 999px;
  padding: 6px 9px;
  color: rgba(153, 246, 228, .88) !important;
  background: rgba(45, 212, 191, .07);
  white-space: nowrap;
}
.settings-voice-panel.voice-settings-panel {
  margin-top: 0;
}
@media (max-width: 720px) {
  .settings-card { width: min(100%, calc(100vw - 18px)); }
  .settings-grid { padding: 0 14px 16px; }
  .settings-box-head { flex-direction: column; }
}


/* ------------------------------------------------------------------
   NOX v4.12.4 - Desktop gear voice settings fix
   ------------------------------------------------------------------ */
#settingsModal.modal {
  z-index: 2147481800 !important;
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  padding: clamp(14px, 3vw, 34px) !important;
}
#settingsModal.modal.hidden {
  display: none !important;
}
#settingsModal .settings-card {
  width: min(860px, calc(100vw - 56px)) !important;
  max-width: calc(100vw - 56px) !important;
  max-height: min(760px, calc(100vh - 76px)) !important;
  margin: auto !important;
  overflow: auto !important;
  transform: none !important;
}
body.nox-desktop #settingsModal .settings-card,
body.nox-electron #settingsModal .settings-card {
  width: min(860px, calc(100vw - 72px)) !important;
  max-width: calc(100vw - 72px) !important;
  max-height: min(760px, calc(100vh - 84px)) !important;
}
#settingsModal .modal-header {
  padding: 18px 22px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
}
#settingsModal .settings-grid {
  padding: 18px 22px 22px !important;
}
#settingsModal .auth-kicker {
  margin-top: 0 !important;
}
.side-actions #settingsBtn {
  display: none !important;
}
@media (max-width: 720px) {
  #settingsModal.modal { padding: 10px !important; }
  #settingsModal .settings-card {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
  }
  #settingsModal .modal-header { padding: 16px !important; }
  #settingsModal .settings-grid { padding: 14px 14px 16px !important; }
}

/* ------------------------------------------------------------------
   NOX v4.12.6 - Voice Panel Visual Polish
   Aktywny kanal glosowy jako jedna kompaktowa karta NOX.
------------------------------------------------------------------ */
.voice-active-session {
  margin: -2px 0 10px 16px !important;
  padding: 9px !important;
  border-left: 1px solid rgba(94, 234, 212, .34) !important;
  border-radius: 0 16px 16px 0 !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, .12), transparent 46%),
    linear-gradient(135deg, rgba(15, 23, 42, .62), rgba(17, 24, 39, .42)) !important;
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .08) !important;
}

.voice-active-session.ptt {
  border-left-color: rgba(45, 252, 224, .50) !important;
}

.voice-active-session.speaking {
  box-shadow: inset 0 0 0 1px rgba(45, 252, 224, .18), 0 0 20px rgba(45, 212, 191, .08) !important;
}

.voice-active-session-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 5px 8px !important;
  margin-bottom: 7px !important;
}

.voice-active-kicker {
  grid-column: 1 / -1 !important;
  color: rgba(94, 234, 212, .92) !important;
  font-size: .60rem !important;
  font-weight: 1000 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

.voice-active-session-head strong {
  color: rgba(241, 245, 249, .92) !important;
  font-size: .78rem !important;
  font-weight: 1000 !important;
}

.voice-active-mode {
  justify-self: end !important;
  max-width: 104px !important;
  padding: 4px 7px !important;
  border: 1px solid rgba(45, 212, 191, .22) !important;
  border-radius: 999px !important;
  color: rgba(153, 246, 228, .94) !important;
  background: rgba(45, 212, 191, .08) !important;
  font-size: .62rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.voice-active-session .voice-channel-occupants {
  gap: 6px !important;
}

.voice-active-session .voice-channel-occupant {
  min-height: 38px !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  padding: 5px 7px !important;
  border-color: rgba(148, 163, 184, .08) !important;
  background: rgba(2, 6, 23, .20) !important;
}

.voice-active-session .voice-mini-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 11px !important;
}

.voice-active-session .voice-channel-occupant-state {
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, .13) !important;
  background: rgba(15, 23, 42, .36) !important;
  font-size: .72rem !important;
}

.voice-active-session-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 7px !important;
  margin-top: 8px !important;
}

.voice-session-mic,
.voice-session-leave {
  min-height: 34px !important;
  border-radius: 13px !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
}

.voice-session-mic {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  border: 1px solid rgba(45, 212, 191, .22) !important;
  color: rgba(236, 253, 245, .96) !important;
  background: linear-gradient(135deg, rgba(45, 212, 191, .12), rgba(139, 92, 246, .13)) !important;
}

.voice-session-mic small {
  color: rgba(153, 246, 228, .88) !important;
  font-size: .64rem !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.voice-session-mic.ptt.active {
  border-color: rgba(45, 252, 224, .58) !important;
  box-shadow: 0 0 0 1px rgba(45, 252, 224, .25), 0 0 16px rgba(45, 212, 191, .14) !important;
}

.voice-session-leave {
  padding: 0 12px !important;
  border: 1px solid rgba(248, 113, 113, .24) !important;
  color: #fecaca !important;
  background: rgba(127, 29, 29, .13) !important;
}

.voice-channel-actions,
.voice-channel-mode {
  display: none !important;
}

@media (max-width: 820px) {
  .voice-active-session {
    margin-left: 12px !important;
    padding: 8px !important;
  }
  .voice-active-session-actions {
    grid-template-columns: 1fr !important;
  }
  .voice-session-leave {
    min-height: 36px !important;
  }
}


/* ------------------------------------------------------------------
   NOX v4.12.7 - Voice Panel Compact Session Polish
   Minimalistyczna karta aktywnej sesji voice bez dublowania statusow.
------------------------------------------------------------------ */
.voice-active-session.compact {
  margin: -3px 0 10px 18px !important;
  padding: 8px 8px 9px !important;
  border-left: 1px solid rgba(94, 234, 212, .34) !important;
  border-radius: 0 15px 15px 0 !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, .10), transparent 42%),
    linear-gradient(135deg, rgba(15, 23, 42, .50), rgba(17, 24, 39, .30)) !important;
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .07) !important;
}

.voice-active-session.compact .voice-active-session-head {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  min-height: 0 !important;
  margin: 0 0 5px !important;
}

.voice-active-session.compact .voice-active-kicker,
.voice-active-session.compact .voice-active-session-head strong {
  display: none !important;
}

.voice-active-session.compact .voice-active-mode {
  max-width: 58px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  font-size: .58rem !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  opacity: .92 !important;
}

.voice-active-session.compact .voice-channel-occupants {
  gap: 5px !important;
}

.voice-active-session.compact .voice-channel-occupant {
  min-height: 44px !important;
  grid-template-columns: 34px minmax(0, 1fr) 24px !important;
  gap: 9px !important;
  padding: 6px 7px !important;
  border-radius: 13px !important;
  background: rgba(2, 6, 23, .18) !important;
}

.voice-active-session.compact .voice-mini-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  align-self: center !important;
}

.voice-active-session.compact .voice-channel-occupant-name {
  min-width: 0 !important;
  padding-left: 0 !important;
  color: rgba(241, 245, 249, .86) !important;
}

.voice-active-session.compact .voice-channel-occupant-name small {
  margin-top: 2px !important;
  color: rgba(203, 213, 225, .58) !important;
  font-size: .62rem !important;
}

.voice-active-session.compact .voice-channel-occupant-state {
  width: 22px !important;
  height: 22px !important;
  font-size: .68rem !important;
  opacity: .88 !important;
}

.voice-active-session-actions.compact {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 7px !important;
}

.voice-session-status {
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: rgba(203, 213, 225, .70) !important;
  font-size: .66rem !important;
  font-weight: 850 !important;
}

.voice-session-status.active {
  color: rgba(94, 234, 212, .96) !important;
}

.voice-active-session.compact .voice-session-mic {
  display: none !important;
}

.voice-active-session.compact .voice-session-leave {
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: .72rem !important;
}

@media (max-width: 820px) {
  .voice-active-session.compact {
    margin-left: 12px !important;
  }
  .voice-active-session-actions.compact {
    grid-template-columns: 1fr !important;
  }
}


/* v4.12.9 - voice self Ty hotfix */
.voice-active-session.compact .voice-channel-occupant.self {
  border: 1px solid rgba(45, 212, 191, .42) !important;
  background: linear-gradient(135deg, rgba(20, 184, 166, .13), rgba(124, 58, 237, .09)) !important;
  box-shadow: inset 3px 0 0 rgba(45, 212, 191, .62), 0 8px 22px rgba(20, 184, 166, .06) !important;
}
.voice-active-session.compact .voice-channel-occupant.self .voice-channel-occupant-name {
  color: rgba(241, 245, 249, .94) !important;
}
.voice-active-session.compact .voice-channel-occupant.self .voice-mini-avatar {
  box-shadow: 0 0 0 2px rgba(45, 212, 191, .24), 0 0 18px rgba(45, 212, 191, .12) !important;
}


/* NOX v4.14.0 - Desktop Beta Polish Pack */
.voice-active-session.compact .voice-channel-occupant,
.voice-channel-occupants-wrap .voice-channel-occupant,
.voice-user-row[data-voice-user-id] {
  cursor: context-menu !important;
}
.voice-active-session.compact .voice-channel-occupant {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}
.voice-active-session.compact .voice-channel-occupant-state,
.voice-channel-occupant-state,
.voice-local-mute-btn,
.voice-user-controls {
  display: none !important;
}
.voice-channel-occupant-name small::after {
  content: "";
}
.voice-participant-context-menu {
  min-width: 306px !important;
}
.voice-volume-control {
  display: grid;
  gap: 9px;
  margin: 6px 2px 2px;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 15px;
  background: rgba(2, 6, 23, .24);
}
.voice-volume-control > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.voice-volume-control strong {
  color: rgba(248, 250, 252, .94);
  font-size: .84rem;
}
.voice-volume-control small {
  color: rgba(94, 234, 212, .90);
  font-weight: 900;
}
.voice-volume-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.voice-volume-slider-control {
  gap: 10px;
}
.voice-volume-slider-wrap {
  display: block;
  padding: 4px 2px 2px;
}
.voice-volume-slider {
  --voice-volume-percent: 66.666%;
  width: 100%;
  height: 28px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.voice-volume-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(94, 234, 212, .18);
  background:
    linear-gradient(90deg, rgba(45, 212, 191, .92), rgba(168, 85, 247, .72)) 0/var(--voice-volume-percent) 100% no-repeat,
    rgba(15, 23, 42, .92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 0 18px rgba(45, 212, 191, .08);
}
.voice-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 999px;
  border: 1px solid rgba(204, 251, 241, .95);
  background: radial-gradient(circle at 35% 30%, #f8fafc, #5eead4 38%, #7c3aed 100%);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, .12), 0 8px 22px rgba(0,0,0,.38);
}
.voice-volume-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(94, 234, 212, .18);
  background: rgba(15, 23, 42, .92);
}
.voice-volume-slider::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(45, 212, 191, .92), rgba(168, 85, 247, .72));
}
.voice-volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(204, 251, 241, .95);
  background: #5eead4;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, .12), 0 8px 22px rgba(0,0,0,.38);
}
.voice-volume-slider:focus-visible {
  outline: none;
}
.voice-volume-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(45, 212, 191, .22), 0 0 24px rgba(168, 85, 247, .25);
}
.voice-volume-scale {
  display: flex;
  justify-content: space-between;
  color: rgba(148, 163, 184, .66);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .02em;
}
.desktop-settings-panel {
  display: grid;
  gap: 10px;
}
.desktop-settings-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.desktop-settings-actions button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, .14);
  background: rgba(2, 6, 23, .22);
  color: rgba(248, 250, 252, .94);
  text-align: left;
  cursor: pointer;
}
.desktop-settings-actions button:hover {
  border-color: rgba(45, 212, 191, .36);
  background: rgba(45, 212, 191, .08);
}
.desktop-settings-actions button.active {
  border-color: rgba(45, 212, 191, .42);
  background: linear-gradient(135deg, rgba(45, 212, 191, .13), rgba(124, 58, 237, .08));
}
.desktop-settings-actions button.muted {
  border-color: rgba(148, 163, 184, .12);
  color: rgba(203, 213, 225, .76);
  background: rgba(15, 23, 42, .28);
}
.desktop-settings-actions button.muted > span {
  background: rgba(148, 163, 184, .08);
  border-color: rgba(148, 163, 184, .16);
}
.desktop-settings-actions button > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(45, 212, 191, .10);
  border: 1px solid rgba(45, 212, 191, .18);
}
.desktop-settings-actions button strong,
.desktop-settings-actions button small {
  display: block;
  min-width: 0;
}
.desktop-settings-actions button small {
  color: rgba(203, 213, 225, .66);
  font-size: .72rem;
  line-height: 1.25;
}
body.nox-desktop .right-user-row {
  cursor: pointer !important;
}
body.nox-desktop .right-user-row:not(.me)::after {
  content: "↗";
  opacity: 0;
  justify-self: end;
  color: rgba(94, 234, 212, .85);
  font-weight: 950;
  transition: opacity .14s ease, transform .14s ease;
}
body.nox-desktop .right-user-row:not(.me) {
  grid-template-columns: 34px minmax(0, 1fr) 18px !important;
}
body.nox-desktop .right-user-row:not(.me):hover::after,
body.nox-desktop .right-user-row:not(.me):focus-visible::after {
  opacity: 1;
  transform: translateX(1px);
}
@media (max-width: 720px) {
  .desktop-settings-actions { grid-template-columns: 1fr; }
}


/* =========================================================
   NOX v5.0.2 - Voice Sidebar Occupants Layout Fix
   Stabilizes participant cards under occupied voice rooms when
   the current user is not joined to that voice channel.
   ========================================================= */
.voice-channels-list > .voice-channel-occupants-wrap {
  display: block !important;
  width: calc(100% - 24px) !important;
  max-width: calc(100% - 24px) !important;
  box-sizing: border-box !important;
  margin: -3px 0 8px 18px !important;
  padding: 7px 0 2px 12px !important;
  border-left: 1px solid rgba(94, 234, 212, .22) !important;
}

.voice-channels-list > .voice-channel-occupants-wrap .voice-channel-occupants {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

.voice-channels-list > .voice-channel-occupants-wrap .voice-channel-occupant {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, .10) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .55), rgba(17, 24, 39, .32)) !important;
  overflow: hidden !important;
}

.voice-channels-list > .voice-channel-occupants-wrap .voice-channel-occupant.self {
  border-color: rgba(45, 212, 191, .34) !important;
  box-shadow: inset 3px 0 0 rgba(45, 212, 191, .54) !important;
}

.voice-channels-list > .voice-channel-occupants-wrap .voice-mini-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 12px !important;
  font-size: .68rem !important;
}

.voice-channels-list > .voice-channel-occupants-wrap .voice-channel-occupant-name {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: rgba(241, 245, 249, .86) !important;
}

.voice-channels-list > .voice-channel-occupants-wrap .voice-channel-occupant-name small {
  display: block !important;
  margin-top: 2px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: rgba(203, 213, 225, .58) !important;
  font-size: .62rem !important;
  line-height: 1.12 !important;
}

.voice-channels-list > .voice-channel-occupants-wrap .voice-channel-occupant.more {
  grid-template-columns: 1fr !important;
  min-height: 30px !important;
  padding-left: 10px !important;
}

@media (max-width: 820px) {
  .voice-channels-list > .voice-channel-occupants-wrap {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    margin-left: 13px !important;
    padding-left: 9px !important;
  }

  .voice-channels-list > .voice-channel-occupants-wrap .voice-channel-occupant {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }

  .voice-channels-list > .voice-channel-occupants-wrap .voice-mini-avatar {
    width: 30px !important;
    height: 30px !important;
  }
}

/* NOX v5.0.3 - Install Download Center */
.install-download-body {
  align-items: start;
  place-items: start center;
}
.install-download-page {
  width: min(1180px, calc(100vw - 28px));
}
.install-download-hero {
  overflow: hidden;
  position: relative;
}
.install-download-hero::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(45, 212, 191, .16), transparent 68%);
  pointer-events: none;
}
.install-download-actions a {
  min-width: 180px;
}
.install-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.install-platform-card {
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(145deg, rgba(13, 18, 44, .92), rgba(9, 12, 30, .96));
  border-radius: 28px;
  padding: 20px;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
}
.install-platform-primary {
  border-color: rgba(45, 212, 191, .32);
  box-shadow: 0 0 0 1px rgba(45, 212, 191, .08), 0 22px 70px rgba(0,0,0,.28);
}
.install-platform-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.install-platform-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  font-size: 1.6rem;
}
.install-platform-card h2,
.install-platform-card h3 {
  margin: 0 0 6px;
}
.install-platform-card p {
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}
.install-mini-list {
  color: var(--muted);
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.45;
}
.install-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.install-card-actions a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
}
.install-roadmap-card {
  border-color: rgba(139, 92, 246, .22) !important;
}
.install-mobile-grid .install-box {
  min-height: 100%;
}
.install-soon-box strong {
  color: #f8fafc;
}
@media (max-width: 980px) {
  .install-platform-grid {
    grid-template-columns: 1fr;
  }
  .install-download-actions a,
  .install-card-actions a {
    width: 100%;
  }
}


/* v5.0.4 - Admin Cleanup Center Foundation */
.admin-cleanup-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(95, 247, 125, 0.10), rgba(139, 92, 246, 0.10));
}
.admin-cleanup-hero h3 { margin: 0 0 6px; }
.admin-cleanup-hero p { margin: 0; color: var(--muted); line-height: 1.45; }
.cleanup-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.cleanup-stat {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.42);
}
.cleanup-stat strong { font-size: 1.35rem; }
.cleanup-stat small { color: var(--muted); }
.cleanup-grid { margin-top: 12px; }
.cleanup-row .row-actions { flex-wrap: wrap; justify-content: flex-end; }
.admin-row.is-disabled { opacity: 0.72; border-color: rgba(245, 158, 11, 0.28); }
.ghost.danger { border-color: rgba(248, 113, 113, 0.42); color: #fecaca; }
.ghost.danger:hover:not(:disabled) { background: rgba(248, 113, 113, 0.14); }
.admin-list.compact .admin-row { padding: 12px; }


/* NOX v5.0.4 R2 - Admin Cleanup Center entry fix */
.desktop-settings-actions .admin-settings-tile {
  border-color: rgba(45, 212, 191, 0.42);
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(124, 58, 237, 0.10));
}
.desktop-settings-actions .admin-settings-tile span {
  background: rgba(45, 212, 191, 0.16);
}

/* NOX v5.0.5 - Admin Storage Cleanup Privacy-Safe */
.cleanup-privacy-note {
  display: block;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.10), rgba(15, 23, 42, 0.42));
  color: var(--muted);
  line-height: 1.45;
}
.cleanup-privacy-note strong {
  color: var(--text);
}
.admin-cleanup-section-title {
  margin: 18px 0 8px;
  display: grid;
  gap: 4px;
}
.admin-cleanup-section-title h3 {
  margin: 0;
  font-size: 1rem;
}
.admin-cleanup-section-title p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.storage-section-title {
  padding-top: 6px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.storage-box {
  border-color: rgba(45, 212, 191, 0.20);
}
.storage-row {
  background: rgba(15, 23, 42, 0.34);
}
.storage-row.privacy-row {
  border-style: dashed;
}
.storage-row .row-title .badge {
  border-color: rgba(45, 212, 191, 0.24);
}


/* NOX v5.0.6 - Admin Cleanup Compact Lists */
.cleanup-users-box {
  min-width: 0;
}
.compact-head {
  align-items: center;
}
.cleanup-mini-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(45, 212, 191, 0.24);
  background: rgba(45, 212, 191, 0.10);
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}
.cleanup-users-list {
  display: grid;
  gap: 6px;
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
}
.cleanup-users-list .admin-row.cleanup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border-radius: 13px;
}
.cleanup-user-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: 1.1;
}
.cleanup-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}
.cleanup-user-login {
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.cleanup-user-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
}
.cleanup-user-meta span {
  white-space: nowrap;
}
.cleanup-user-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.cleanup-user-actions .ghost {
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 10px;
  font-size: 0.76rem;
}
@media (max-width: 980px) {
  .cleanup-users-list .admin-row.cleanup-row {
    grid-template-columns: 1fr;
  }
  .cleanup-user-actions {
    justify-content: flex-start;
  }
  .cleanup-user-name,
  .cleanup-user-login {
    max-width: 190px;
  }
}

/* v5.0.7 - Privacy-Safe Account Recovery */
.profile-recovery-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(167, 139, 250, 0.26);
  border-radius: 18px;
  background: rgba(9, 7, 24, 0.44);
}
.profile-recovery-box strong { display: block; margin-bottom: 2px; }
.profile-recovery-box .hint { margin: 0; }
.recovery-code-box {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(34, 211, 238, 0.26);
  background: rgba(34, 211, 238, 0.08);
  word-break: break-word;
}
.recovery-code-box strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.recovery-code-box small { color: var(--muted); line-height: 1.4; }
.auth-card #recoveryForm .hint { margin-top: 0; }
.admin-row .recovery-token { white-space: nowrap; }


/* v5.0.8 - Recovery Code Dialog Fix */
.profile-recovery-box {
  position: relative;
}
.recovery-code-box {
  max-width: 100%;
}
.recovery-code-box .ghost {
  width: 100%;
}
.recovery-code-dialog {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.recovery-code-dialog-label {
  color: var(--accent-2);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.recovery-code-dialog-code {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(34, 211, 238, 0.34);
  background: rgba(34, 211, 238, 0.10);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 900;
  letter-spacing: 0.06em;
  word-break: break-all;
  user-select: all;
}
.recovery-code-dialog p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.recovery-code-dialog-note {
  font-size: 0.86rem;
}
@media (max-height: 760px) {
  .profile-recovery-box {
    padding: 10px;
    gap: 8px;
  }
  .recovery-code-box {
    padding: 9px;
  }
}


/* v5.0.9 - Recovery Expiry & Settings Center Polish */
#settingsModal .settings-card { width: min(980px, calc(100vw - 56px)) !important; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 22px 0; }
.settings-tab { border: 1px solid rgba(148, 163, 184, .16); border-radius: 999px; background: rgba(15, 23, 42, .44); color: rgba(203, 213, 225, .82); padding: 8px 11px; font-size: .78rem; font-weight: 850; cursor: pointer; }
.settings-tab:hover, .settings-tab.active { border-color: rgba(45, 212, 191, .38); color: rgba(248, 250, 252, .96); background: linear-gradient(135deg, rgba(45, 212, 191, .13), rgba(124, 58, 237, .10)); }
.modular-settings-grid .settings-box { display: none; }
.modular-settings-grid .settings-box.active { display: block; }
.settings-box.hidden, .settings-tab.hidden { display: none !important; }
.settings-actions-single.desktop-settings-actions { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.recovery-status-card { display: grid; gap: 5px; padding: 10px 11px; border-radius: 15px; border: 1px solid rgba(148, 163, 184, .18); background: rgba(15, 23, 42, .35); }
.recovery-status-card strong { margin: 0; color: rgba(248, 250, 252, .96); }
.recovery-status-card small { color: var(--muted); line-height: 1.35; }
.recovery-status-card.ok { border-color: rgba(45, 212, 191, .30); background: rgba(45, 212, 191, .08); }
.recovery-status-card.warn { border-color: rgba(245, 158, 11, .38); background: rgba(245, 158, 11, .08); }
.recovery-status-card.bad { border-color: rgba(248, 113, 113, .42); background: rgba(248, 113, 113, .09); }
.recovery-status-card.muted { opacity: .88; }
.recovery-status-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: rgba(148, 163, 184, .80); font-size: .74rem; }
@media (max-width: 720px) { .settings-tabs { padding: 12px 14px 0; } .settings-tab { flex: 1 1 auto; } }

/* v5.0.10 - Recovery Code Privacy + Settings Flow Fix */
.modular-settings-grid .settings-box:not(.active) {
  display: none;
}
.recovery-code-box strong + small {
  margin-top: 4px;
}
.profile-recovery-box .recovery-code-box:not(.hidden) {
  border-style: dashed;
}


/* v5.0.11 - Profile Modal Framing Scroll Fix
   Tall modal content must stay inside the app window. The card owns the frame,
   and the body/form scrolls internally so recovery/admin/settings controls never
   disappear under the desktop shell edge. */
.modal {
  min-height: 0 !important;
  overflow: hidden !important;
}
.modal-card {
  max-height: calc(100vh - 32px) !important;
  overflow: hidden !important;
}
.modal-card > .modal-header {
  flex: 0 0 auto !important;
}

#profileModal.modal {
  padding: clamp(10px, 2.2vh, 18px) clamp(10px, 2.4vw, 24px) !important;
  align-items: center !important;
  justify-items: center !important;
}
#profileModal .profile-card {
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 28px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#profileModal .modal-header {
  flex: 0 0 auto !important;
  padding: 18px 18px 14px !important;
}
#profileModal .profile-form {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 18px 18px !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable both-edges !important;
}
#profileModal .profile-form-actions {
  position: sticky !important;
  bottom: -1px !important;
  z-index: 3 !important;
  margin: 6px -2px -2px !important;
  padding: 10px 0 0 !important;
  background: linear-gradient(180deg, rgba(10, 13, 31, 0), rgba(10, 13, 31, .96) 36%, rgba(10, 13, 31, .98)) !important;
}
#profileModal .profile-recovery-box,
#profileModal .recovery-code-box,
#profileModal .recovery-status-card {
  max-width: 100% !important;
  min-width: 0 !important;
}
#profileModal .recovery-code-box {
  overflow-wrap: anywhere !important;
}

#settingsModal .settings-card,
#adminModal .admin-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#settingsModal .settings-tabs,
#settingsModal .modal-header,
#adminModal .modal-header,
#adminModal .admin-tabs {
  flex: 0 0 auto !important;
}
#settingsModal .settings-grid,
#adminModal .admin-panel.active {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

@media (max-height: 760px) {
  #profileModal.modal { padding: 8px !important; }
  #profileModal .profile-card {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
  }
  #profileModal .modal-header { padding: 14px 14px 10px !important; }
  #profileModal .profile-form { padding: 12px 14px 14px !important; gap: 10px !important; }
  #profileModal .profile-preview-row { padding: 10px !important; }
}

@media (max-width: 720px) {
  #profileModal.modal { padding: 8px !important; }
  #profileModal .profile-card {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
  }
}

/* NOX v5.0.12 - Noxowy Desktop Update Flow */
.desktop-update-flow button.update-current {
  border-color: rgba(95, 247, 125, 0.34);
  background: linear-gradient(135deg, rgba(24, 84, 61, 0.42), rgba(13, 18, 42, 0.82));
}
.desktop-update-flow button.update-current span {
  background: rgba(95, 247, 125, 0.16);
}
.desktop-update-flow button.update-available {
  border-color: rgba(45, 212, 191, 0.48);
  background: linear-gradient(135deg, rgba(12, 91, 102, 0.44), rgba(18, 18, 52, 0.86));
}
.desktop-update-flow button.update-downloading {
  border-color: rgba(96, 165, 250, 0.48);
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.34), rgba(18, 18, 52, 0.88));
}
.desktop-update-flow button.update-downloaded {
  border-color: rgba(167, 139, 250, 0.58);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.18), 0 18px 45px rgba(45, 212, 191, 0.08);
  background: linear-gradient(135deg, rgba(74, 55, 166, 0.44), rgba(15, 76, 92, 0.74));
}
.desktop-update-flow button.update-error {
  border-color: rgba(248, 113, 113, 0.5);
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.36), rgba(18, 18, 52, 0.86));
}
.desktop-update-flow button.update-checking span,
.desktop-update-flow button.update-downloading span {
  animation: noxUpdatePulse 1.25s ease-in-out infinite;
}
@keyframes noxUpdatePulse {
  0%, 100% { transform: translateY(0); opacity: 0.82; }
  50% { transform: translateY(-1px); opacity: 1; }
}

/* v5.0.13 - Desktop Update Compatibility Flow */
.desktop-update-flow .update-unknown {
  opacity: .88;
}
.desktop-update-flow .update-unknown strong::after {
  content: "";
}


/* NOX v5.0.14 - Desktop Settings UX Polish
   Update feedback lives inside the settings panel, and toasts must float above
   NOX modals instead of disappearing behind the active dialog. */
.nox-toast-root {
  z-index: 2147483600 !important;
}
#settingsModal .desktop-update-inline-status {
  margin-top: 12px;
  border: 1px solid rgba(45, 212, 191, 0.22);
  background: linear-gradient(135deg, rgba(7, 15, 32, 0.82), rgba(14, 21, 50, 0.72));
  border-radius: 18px;
  padding: 12px 14px;
  color: rgba(226, 232, 240, 0.94);
  font-weight: 900;
  line-height: 1.45;
}
#settingsModal .desktop-update-inline-status small {
  display: block;
  margin-top: 3px;
  color: rgba(148, 163, 184, 0.96);
  font-size: 0.78rem;
  font-weight: 800;
}
#settingsModal .desktop-update-flow button.update-current {
  cursor: default;
}
#settingsModal .desktop-update-flow button.update-current:focus-visible,
#settingsModal .desktop-update-flow button.update-current:hover {
  border-color: rgba(95, 247, 125, 0.42);
  transform: none;
}


/* v5.0.15 - Install Center Desktop Escape Fix */
.install-desktop-return {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(45, 212, 191, .18);
  border-radius: 18px;
  background: rgba(15, 23, 42, .46);
  color: var(--muted);
}
.install-return-link {
  text-decoration: none;
  min-height: 38px;
  padding-inline: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.install-desktop-return span {
  min-width: min(420px, 100%);
  color: rgba(203, 213, 225, .78);
  font-size: .9rem;
}
body:not(.nox-desktop-shell) .install-desktop-return {
  opacity: .88;
}
@media (max-width: 720px) {
  .install-desktop-return { align-items: stretch; }
  .install-return-link { width: 100%; }
}


/* v5.0.23 beta polish: web layer freshness line in Desktop settings */
.desktop-web-layer-status { border-style: dashed; }
.desktop-web-layer-status.is-fresh { opacity: 0.92; }
.desktop-web-layer-status.needs-refresh { border-color: rgba(251, 191, 36, 0.55); background: rgba(251, 191, 36, 0.08); }
.desktop-web-layer-status small { display: block; margin-top: 4px; opacity: 0.72; }

/* =========================================================
   NOX v5.1.0 - Device Mode Guard / PWA Mobile Foundation
   Desktop Electron is a protected desktop shell. Phone/tablet polish must
   target explicit device classes instead of plain viewport width.
   ========================================================= */
body.nox-shell-electron.nox-device-desktop #mobileTopbar,
body.nox-device-desktop #mobileTopbar {
  display: none !important;
}

body.nox-shell-electron.nox-device-desktop .app-shell,
body.nox-device-desktop .app-shell {
  grid-template-rows: minmax(0, 1fr) !important;
}

body.nox-device-desktop .mobile-voice-dock {
  display: none !important;
}

body.nox-device-desktop .app-shell.mobile-view-channels .chat-panel,
body.nox-device-desktop .app-shell.mobile-view-voice .chat-panel,
body.nox-device-desktop .app-shell.mobile-view-dm .chat-panel,
body.nox-device-desktop .app-shell.mobile-view-info .chat-panel {
  display: grid;
}

body.nox-device-desktop .app-shell.mobile-view-channels .channel-sidebar,
body.nox-device-desktop .app-shell.mobile-view-voice .channel-sidebar,
body.nox-device-desktop .app-shell.mobile-view-dm .channel-sidebar,
body.nox-device-desktop .app-shell.mobile-view-info .channel-sidebar {
  display: flex;
}

body.nox-device-phone #mobileTopbar,
body.nox-device-tablet #mobileTopbar {
  display: grid !important;
}


/* =========================================================
   NOX v5.1.1 - PWA Freshness Guard / Mobile Auto Refresh
   ========================================================= */
.nox-pull-refresh-indicator {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 2147483200;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: rgba(255,255,255,0.92);
  font-size: .82rem;
  font-weight: 800;
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.nox-pull-refresh-indicator.show { transform: translate(-50%, 0); opacity: 1; }
.nox-pull-refresh-indicator.armed { border-color: rgba(94,234,212,.55); }
body.nox-shell-electron .nox-pull-refresh-indicator,
body.nox-device-desktop .nox-pull-refresh-indicator { display: none !important; }


/* =========================================================
   NOX v5.1.3 - Mobile Topbar Compact Hotfix
   Guarded mobile/PWA polish. Desktop Electron remains protected by
   nox-device-desktop / nox-shell-electron rules above.
   ========================================================= */
:root {
  --nox-visual-height: var(--app-height, 100vh);
  --nox-keyboard-inset: 0px;
  --nox-mobile-topbar-height: 112px;
  --nox-mobile-gap: 8px;
}

body.nox-shell-electron.nox-device-desktop #mobileTopbar,
body.nox-device-desktop #mobileTopbar,
body.nox-shell-electron.nox-device-desktop .nox-mobile-only,
body.nox-device-desktop .nox-mobile-only {
  display: none !important;
}

body.nox-device-phone,
body.nox-device-tablet {
  min-height: var(--nox-visual-height) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: manipulation;
}

body.nox-device-phone #appView.app-shell,
body.nox-device-tablet #appView.app-shell {
  height: var(--nox-visual-height) !important;
  min-height: var(--nox-visual-height) !important;
  max-height: var(--nox-visual-height) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: var(--nox-mobile-gap) !important;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left)) !important;
  overflow: hidden !important;
}

body.nox-device-phone #mobileTopbar,
body.nox-device-tablet #mobileTopbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "brand notify" "nav nav" !important;
  align-items: center !important;
  gap: 8px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 70 !important;
  min-width: 0 !important;
  padding: 8px !important;
  border: 1px solid rgba(148, 163, 184, .14) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(8, 13, 31, .94)) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(18px) !important;
}

body.nox-device-phone #mobileTopbar .mobile-brand,
body.nox-device-tablet #mobileTopbar .mobile-brand { grid-area: brand !important; min-width: 0 !important; }
body.nox-device-phone #mobileTopbar .mobile-notify-btn,
body.nox-device-tablet #mobileTopbar .mobile-notify-btn { grid-area: notify !important; }
body.nox-device-phone #mobileTopbar .mobile-nav,
body.nox-device-tablet #mobileTopbar .mobile-nav {
  grid-area: nav !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}
body.nox-device-phone #mobileTopbar .mobile-nav-btn,
body.nox-device-tablet #mobileTopbar .mobile-nav-btn {
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 7px 4px !important;
  border-radius: 14px !important;
  font-size: clamp(.64rem, 2.8vw, .78rem) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.nox-device-phone #mobileTopbar .mobile-nav-btn.active,
body.nox-device-tablet #mobileTopbar .mobile-nav-btn.active {
  border-color: rgba(45, 212, 191, .58) !important;
  background: rgba(45, 212, 191, .15) !important;
  color: rgba(240, 253, 250, .98) !important;
}

body.nox-device-phone .channel-sidebar,
body.nox-device-phone .chat-panel,
body.nox-device-phone .info-panel,
body.nox-device-tablet .channel-sidebar,
body.nox-device-tablet .chat-panel,
body.nox-device-tablet .info-panel {
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.nox-device-phone .channel-sidebar,
body.nox-device-tablet .channel-sidebar,
body.nox-device-phone .info-panel,
body.nox-device-tablet .info-panel {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

body.nox-device-phone .chat-panel,
body.nox-device-tablet .chat-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  border-radius: 20px !important;
}

body.nox-device-phone .messages,
body.nox-device-tablet .messages {
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 12px 10px !important;
  scroll-padding-bottom: 128px !important;
}

body.nox-device-phone .composer-wrap,
body.nox-device-tablet .composer-wrap {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 60 !important;
  padding: 8px !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(148, 163, 184, .12) !important;
  background: linear-gradient(180deg, rgba(8, 13, 31, .82), rgba(8, 13, 31, .98)) !important;
  backdrop-filter: blur(16px) !important;
}
body.nox-device-phone.nox-keyboard-open .composer-wrap,
body.nox-device-tablet.nox-keyboard-open .composer-wrap {
  padding-bottom: 8px !important;
}

body.nox-device-phone #messageForm.composer,
body.nox-device-tablet #messageForm.composer {
  grid-template-columns: 42px minmax(0, 1fr) 64px !important;
  gap: 6px !important;
  align-items: end !important;
}
body.nox-device-phone #attachBtn,
body.nox-device-phone #messageForm.composer .attach-btn,
body.nox-device-tablet #attachBtn,
body.nox-device-tablet #messageForm.composer .attach-btn {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  border-radius: 15px !important;
}
body.nox-device-phone #messageInput,
body.nox-device-phone #messageForm.composer textarea,
body.nox-device-tablet #messageInput,
body.nox-device-tablet #messageForm.composer textarea {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 112px !important;
  font-size: 16px !important;
  line-height: 1.28 !important;
  border-radius: 15px !important;
}
body.nox-device-phone #sendBtn,
body.nox-device-phone #messageForm.composer button[type="submit"],
body.nox-device-tablet #sendBtn,
body.nox-device-tablet #messageForm.composer button[type="submit"] {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 8px !important;
  border-radius: 15px !important;
  font-size: .78rem !important;
}

body.nox-device-phone .app-shell.mobile-view-chat .channel-sidebar,
body.nox-device-phone .app-shell.mobile-view-chat .info-panel,
body.nox-device-tablet .app-shell.mobile-view-chat .channel-sidebar,
body.nox-device-tablet .app-shell.mobile-view-chat .info-panel { display: none !important; }
body.nox-device-phone .app-shell.mobile-view-chat .chat-panel,
body.nox-device-tablet .app-shell.mobile-view-chat .chat-panel { display: grid !important; }

body.nox-device-phone .app-shell.mobile-view-channels .chat-panel,
body.nox-device-phone .app-shell.mobile-view-channels .info-panel,
body.nox-device-tablet .app-shell.mobile-view-channels .chat-panel,
body.nox-device-tablet .app-shell.mobile-view-channels .info-panel { display: none !important; }
body.nox-device-phone .app-shell.mobile-view-channels .channel-sidebar,
body.nox-device-tablet .app-shell.mobile-view-channels .channel-sidebar { display: flex !important; }
body.nox-device-phone .app-shell.mobile-view-channels .dm-section,
body.nox-device-phone .app-shell.mobile-view-channels .voice-section,
body.nox-device-tablet .app-shell.mobile-view-channels .dm-section,
body.nox-device-tablet .app-shell.mobile-view-channels .voice-section { display: none !important; }

body.nox-device-phone .app-shell.mobile-view-dm .chat-panel,
body.nox-device-phone .app-shell.mobile-view-dm .info-panel,
body.nox-device-tablet .app-shell.mobile-view-dm .chat-panel,
body.nox-device-tablet .app-shell.mobile-view-dm .info-panel { display: none !important; }
body.nox-device-phone .app-shell.mobile-view-dm .channel-sidebar,
body.nox-device-tablet .app-shell.mobile-view-dm .channel-sidebar { display: flex !important; }
body.nox-device-phone .app-shell.mobile-view-dm .brand-panel,
body.nox-device-phone .app-shell.mobile-view-dm .user-card,
body.nox-device-phone .app-shell.mobile-view-dm .side-actions,
body.nox-device-phone .app-shell.mobile-view-dm .channels-section,
body.nox-device-phone .app-shell.mobile-view-dm .voice-section,
body.nox-device-tablet .app-shell.mobile-view-dm .brand-panel,
body.nox-device-tablet .app-shell.mobile-view-dm .user-card,
body.nox-device-tablet .app-shell.mobile-view-dm .side-actions,
body.nox-device-tablet .app-shell.mobile-view-dm .channels-section,
body.nox-device-tablet .app-shell.mobile-view-dm .voice-section { display: none !important; }
body.nox-device-phone .app-shell.mobile-view-dm .dm-section,
body.nox-device-tablet .app-shell.mobile-view-dm .dm-section { display: grid !important; }

body.nox-device-phone .app-shell.mobile-view-voice .chat-panel,
body.nox-device-phone .app-shell.mobile-view-voice .info-panel,
body.nox-device-tablet .app-shell.mobile-view-voice .chat-panel,
body.nox-device-tablet .app-shell.mobile-view-voice .info-panel { display: none !important; }
body.nox-device-phone .app-shell.mobile-view-voice .channel-sidebar,
body.nox-device-tablet .app-shell.mobile-view-voice .channel-sidebar { display: flex !important; }
body.nox-device-phone .app-shell.mobile-view-voice .brand-panel,
body.nox-device-phone .app-shell.mobile-view-voice .user-card,
body.nox-device-phone .app-shell.mobile-view-voice .side-actions,
body.nox-device-phone .app-shell.mobile-view-voice .channels-section,
body.nox-device-phone .app-shell.mobile-view-voice .dm-section,
body.nox-device-tablet .app-shell.mobile-view-voice .brand-panel,
body.nox-device-tablet .app-shell.mobile-view-voice .user-card,
body.nox-device-tablet .app-shell.mobile-view-voice .side-actions,
body.nox-device-tablet .app-shell.mobile-view-voice .channels-section,
body.nox-device-tablet .app-shell.mobile-view-voice .dm-section { display: none !important; }
body.nox-device-phone .app-shell.mobile-view-voice .voice-section,
body.nox-device-tablet .app-shell.mobile-view-voice .voice-section { display: grid !important; }

body.nox-device-phone .app-shell.mobile-view-info .channel-sidebar,
body.nox-device-phone .app-shell.mobile-view-info .chat-panel,
body.nox-device-tablet .app-shell.mobile-view-info .channel-sidebar,
body.nox-device-tablet .app-shell.mobile-view-info .chat-panel { display: none !important; }
body.nox-device-phone .app-shell.mobile-view-info .info-panel,
body.nox-device-tablet .app-shell.mobile-view-info .info-panel { display: grid !important; }

body.nox-device-phone .mobile-voice-dock,
body.nox-device-tablet .mobile-voice-dock {
  left: max(8px, env(safe-area-inset-left)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  z-index: 90 !important;
}
body.nox-device-phone:has(.mobile-voice-dock) .composer-wrap,
body.nox-device-tablet:has(.mobile-voice-dock) .composer-wrap {
  padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
}
body.nox-device-phone.nox-keyboard-open:has(.mobile-voice-dock) .mobile-voice-dock,
body.nox-device-tablet.nox-keyboard-open:has(.mobile-voice-dock) .mobile-voice-dock {
  display: none !important;
}

@media (max-width: 380px) {
  body.nox-device-phone #mobileTopbar .mobile-nav-btn { font-size: .62rem !important; padding-inline: 2px !important; }
  body.nox-device-phone #messageForm.composer { grid-template-columns: 40px minmax(0, 1fr) 58px !important; }
  body.nox-device-phone #sendBtn,
  body.nox-device-phone #messageForm.composer button[type="submit"] { width: 58px !important; min-width: 58px !important; max-width: 58px !important; }
}


/* --------------------------------------------------------------------------
   NOX v5.1.3 - Mobile Topbar Compact Hotfix
   Reduces phone header height and prevents nav wrapping on narrow Android/PWA.
   Desktop/Electron remains protected by nox-device-desktop rules above.
   -------------------------------------------------------------------------- */
body.nox-device-phone #appView.app-shell,
body.nox-device-tablet #appView.app-shell {
  gap: 6px !important;
  padding:
    max(6px, env(safe-area-inset-top))
    max(6px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom))
    max(6px, env(safe-area-inset-left)) !important;
}

body.nox-device-phone #mobileTopbar,
body.nox-device-tablet #mobileTopbar {
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  grid-template-areas: "brand nav notify" !important;
  gap: 5px !important;
  padding: 6px !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  align-items: center !important;
}

body.nox-device-phone #mobileTopbar .mobile-brand,
body.nox-device-tablet #mobileTopbar .mobile-brand {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  overflow: hidden !important;
}
body.nox-device-phone #mobileTopbar .mobile-brand > div,
body.nox-device-tablet #mobileTopbar .mobile-brand > div {
  display: none !important;
}
body.nox-device-phone #mobileTopbar .mobile-symbol,
body.nox-device-tablet #mobileTopbar .mobile-symbol {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 13px !important;
  font-size: 1rem !important;
}

body.nox-device-phone #mobileTopbar .mobile-notify-btn,
body.nox-device-tablet #mobileTopbar .mobile-notify-btn {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 13px !important;
  font-size: 1rem !important;
}

body.nox-device-phone #mobileTopbar .mobile-nav,
body.nox-device-tablet #mobileTopbar .mobile-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  overflow: hidden !important;
  flex-wrap: nowrap !important;
}
body.nox-device-phone #mobileTopbar .mobile-nav-btn,
body.nox-device-tablet #mobileTopbar .mobile-nav-btn {
  min-width: 0 !important;
  width: auto !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 13px !important;
  font-size: 1.02rem !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

body.nox-device-phone .channel-sidebar,
body.nox-device-tablet .channel-sidebar,
body.nox-device-phone .info-panel,
body.nox-device-tablet .info-panel,
body.nox-device-phone .chat-panel,
body.nox-device-tablet .chat-panel {
  border-radius: 18px !important;
}

body.nox-device-phone .section-card,
body.nox-device-tablet .section-card,
body.nox-device-phone .channel-sidebar .panel-section,
body.nox-device-tablet .channel-sidebar .panel-section {
  padding: 12px !important;
  border-radius: 18px !important;
}

@media (max-width: 360px) {
  body.nox-device-phone #mobileTopbar {
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    gap: 4px !important;
    padding: 5px !important;
  }
  body.nox-device-phone #mobileTopbar .mobile-brand,
  body.nox-device-phone #mobileTopbar .mobile-notify-btn {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
  }
  body.nox-device-phone #mobileTopbar .mobile-symbol,
  body.nox-device-phone #mobileTopbar .mobile-notify-btn,
  body.nox-device-phone #mobileTopbar .mobile-nav-btn {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
    font-size: .95rem !important;
  }
}


/* --------------------------------------------------------------------------
   NOX v5.1.4 - Mobile Modern Shell
   Compact topbar + fixed bottom navigation for phone/tablet PWA.
   Guarded by nox-device-phone/tablet; Electron desktop remains untouched.
   -------------------------------------------------------------------------- */
:root {
  --nox-mobile-nav-height: 66px;
  --nox-mobile-topbar-height: 52px;
}

body.nox-device-phone,
body.nox-device-tablet {
  background:
    radial-gradient(circle at 20% 0%, rgba(124, 58, 237, .26), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(45, 212, 191, .16), transparent 32%),
    linear-gradient(180deg, #0a0d1d 0%, #111426 52%, #0b1020 100%) !important;
}

body.nox-device-phone #appView.app-shell,
body.nox-device-tablet #appView.app-shell {
  gap: 8px !important;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    calc(var(--nox-mobile-nav-height) + 12px + env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left)) !important;
}

body.nox-device-phone #mobileTopbar,
body.nox-device-tablet #mobileTopbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  grid-template-areas: "brand notify" !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: var(--nox-mobile-topbar-height) !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(148, 163, 184, .13) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(20, 25, 52, .76), rgba(9, 13, 30, .66)) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.075) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  position: sticky !important;
  top: max(6px, env(safe-area-inset-top)) !important;
  z-index: 84 !important;
}

body.nox-device-phone #mobileTopbar .mobile-brand,
body.nox-device-tablet #mobileTopbar .mobile-brand {
  grid-area: brand !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}
body.nox-device-phone #mobileTopbar .mobile-brand > div,
body.nox-device-tablet #mobileTopbar .mobile-brand > div {
  display: grid !important;
  min-width: 0 !important;
}
body.nox-device-phone #mobileTopbar .mobile-brand strong,
body.nox-device-tablet #mobileTopbar .mobile-brand strong {
  display: block !important;
  font-size: .98rem !important;
  letter-spacing: .02em !important;
  color: rgba(248,250,252,.98) !important;
}
body.nox-device-phone #mobileTopbar #platformPill,
body.nox-device-tablet #mobileTopbar #platformPill {
  display: block !important;
  max-width: 220px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .68rem !important;
  color: rgba(148, 163, 184, .78) !important;
}
body.nox-device-phone #mobileTopbar .mobile-symbol,
body.nox-device-tablet #mobileTopbar .mobile-symbol {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 15px !important;
  font-size: .95rem !important;
  box-shadow: 0 8px 22px rgba(45,212,191,.16) !important;
}
body.nox-device-phone #mobileTopbar .mobile-notify-btn,
body.nox-device-tablet #mobileTopbar .mobile-notify-btn {
  grid-area: notify !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  font-size: 1rem !important;
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(45, 212, 191, .22) !important;
}

body.nox-device-phone #mobileTopbar .mobile-nav,
body.nox-device-tablet #mobileTopbar .mobile-nav {
  position: fixed !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 7px !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .86), rgba(8, 12, 28, .82)) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  overflow: hidden !important;
}
body.nox-device-phone #mobileTopbar .mobile-nav-btn,
body.nox-device-tablet #mobileTopbar .mobile-nav-btn {
  width: auto !important;
  height: 46px !important;
  min-height: 46px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 1.18rem !important;
  line-height: 1 !important;
  color: rgba(203,213,225,.82) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
body.nox-device-phone #mobileTopbar .mobile-nav-btn.active,
body.nox-device-tablet #mobileTopbar .mobile-nav-btn.active {
  color: rgba(240,253,250,.98) !important;
  background:
    radial-gradient(circle at 25% 10%, rgba(45,212,191,.32), transparent 54%),
    linear-gradient(135deg, rgba(124,58,237,.32), rgba(45,212,191,.15)) !important;
  border-color: rgba(45, 212, 191, .34) !important;
  box-shadow: 0 10px 24px rgba(45,212,191,.12), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.nox-device-phone .channel-sidebar,
body.nox-device-tablet .channel-sidebar,
body.nox-device-phone .chat-panel,
body.nox-device-tablet .chat-panel,
body.nox-device-phone .info-panel,
body.nox-device-tablet .info-panel {
  border-radius: 26px !important;
  border-color: rgba(148, 163, 184, .11) !important;
  background: linear-gradient(180deg, rgba(18, 23, 48, .78), rgba(13, 18, 39, .72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 46px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
}
body.nox-device-phone .channel-sidebar,
body.nox-device-tablet .channel-sidebar {
  padding: 10px !important;
}
body.nox-device-phone .brand-panel,
body.nox-device-tablet .brand-panel,
body.nox-device-phone .side-actions,
body.nox-device-tablet .side-actions {
  display: none !important;
}
body.nox-device-phone .section-card,
body.nox-device-tablet .section-card,
body.nox-device-phone .panel-section,
body.nox-device-tablet .panel-section {
  border-radius: 22px !important;
  padding: 12px !important;
  background: rgba(15, 23, 42, .34) !important;
}
body.nox-device-phone .section-head,
body.nox-device-tablet .section-head {
  min-height: 34px !important;
  padding: 2px 4px 10px !important;
  letter-spacing: .16em !important;
}
body.nox-device-phone .channel-list,
body.nox-device-tablet .channel-list,
body.nox-device-phone .dm-list,
body.nox-device-tablet .dm-list,
body.nox-device-phone .voice-channel-list,
body.nox-device-tablet .voice-channel-list {
  gap: 7px !important;
}
body.nox-device-phone .channel-item,
body.nox-device-tablet .channel-item,
body.nox-device-phone .dm-item,
body.nox-device-tablet .dm-item,
body.nox-device-phone .voice-channel-item,
body.nox-device-tablet .voice-channel-item {
  border-radius: 20px !important;
  padding: 11px 12px !important;
  background: rgba(15, 23, 42, .38) !important;
  border-color: rgba(148, 163, 184, .08) !important;
}
body.nox-device-phone .channel-item.active,
body.nox-device-tablet .channel-item.active,
body.nox-device-phone .dm-item.active,
body.nox-device-tablet .dm-item.active {
  background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(45,212,191,.10)) !important;
  border-color: rgba(124, 58, 237, .44) !important;
}

body.nox-device-phone.nox-keyboard-open #mobileTopbar .mobile-nav,
body.nox-device-tablet.nox-keyboard-open #mobileTopbar .mobile-nav {
  transform: translateY(calc(100% + 20px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 370px) {
  body.nox-device-phone #mobileTopbar .mobile-brand strong { font-size: .9rem !important; }
  body.nox-device-phone #mobileTopbar #platformPill { max-width: 150px !important; }
  body.nox-device-phone #mobileTopbar .mobile-nav { gap: 4px !important; padding: 6px !important; border-radius: 22px !important; }
  body.nox-device-phone #mobileTopbar .mobile-nav-btn { height: 42px !important; min-height: 42px !important; border-radius: 16px !important; font-size: 1.08rem !important; }
}


/* ======================================================================
   NOX v5.1.5 - Mobile Modern Shell Force Dock
   Non-Electron mobile/PWA fallback. Purposefully uses media fallback in
   addition to nox-device-phone/tablet, because some Android browsers can
   keep stale body classes while still loading fresh CSS.
   ====================================================================== */
@media (max-width: 760px) {
  body:not(.nox-shell-electron),
  body.nox-device-phone,
  body.nox-device-tablet {
    --nox-mobile-dock-height: 72px;
    --nox-mobile-header-height: 76px;
  }

  body:not(.nox-shell-electron) #appView,
  body.nox-device-phone #appView,
  body.nox-device-tablet #appView,
  body:not(.nox-shell-electron) .app-shell,
  body.nox-device-phone .app-shell,
  body.nox-device-tablet .app-shell {
    padding-bottom: calc(var(--nox-mobile-dock-height) + max(12px, env(safe-area-inset-bottom))) !important;
  }

  body:not(.nox-shell-electron) #mobileTopbar,
  body.nox-device-phone #mobileTopbar,
  body.nox-device-tablet #mobileTopbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    grid-template-areas: "brand notify" !important;
    align-items: center !important;
    min-height: var(--nox-mobile-header-height) !important;
    height: auto !important;
    margin: 8px 10px 10px !important;
    padding: 10px 12px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(13, 18, 39, .82), rgba(10, 14, 32, .72)) !important;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06) !important;
    overflow: visible !important;
  }

  body:not(.nox-shell-electron) #mobileTopbar .mobile-brand,
  body.nox-device-phone #mobileTopbar .mobile-brand,
  body.nox-device-tablet #mobileTopbar .mobile-brand {
    grid-area: brand !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body:not(.nox-shell-electron) #mobileTopbar .mobile-brand strong,
  body.nox-device-phone #mobileTopbar .mobile-brand strong,
  body.nox-device-tablet #mobileTopbar .mobile-brand strong {
    font-size: 1.02rem !important;
    line-height: 1.05 !important;
  }

  body:not(.nox-shell-electron) #mobileTopbar .mobile-symbol,
  body.nox-device-phone #mobileTopbar .mobile-symbol,
  body.nox-device-tablet #mobileTopbar .mobile-symbol {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 16px !important;
    font-size: 1.02rem !important;
  }

  body:not(.nox-shell-electron) #mobileTopbar #platformPill,
  body.nox-device-phone #mobileTopbar #platformPill,
  body.nox-device-tablet #mobileTopbar #platformPill {
    display: block !important;
    max-width: 210px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: rgba(148,163,184,.72) !important;
    font-size: .72rem !important;
  }

  body:not(.nox-shell-electron) #mobileTopbar .mobile-notify-btn,
  body.nox-device-phone #mobileTopbar .mobile-notify-btn,
  body.nox-device-tablet #mobileTopbar .mobile-notify-btn {
    grid-area: notify !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 16px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 1rem !important;
  }

  body:not(.nox-shell-electron) #mobileTopbar .mobile-nav,
  body:not(.nox-shell-electron) .nox-mobile-bottom-dock,
  body.nox-device-phone #mobileTopbar .mobile-nav,
  body.nox-device-phone .nox-mobile-bottom-dock,
  body.nox-device-tablet #mobileTopbar .mobile-nav,
  body.nox-device-tablet .nox-mobile-bottom-dock {
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 2147481000 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 6px !important;
    margin: 0 !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(8, 12, 28, .88)) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    overflow: hidden !important;
    transform: translateZ(0) !important;
  }

  body:not(.nox-shell-electron) .mobile-nav-btn,
  body.nox-device-phone .mobile-nav-btn,
  body.nox-device-tablet .mobile-nav-btn {
    width: auto !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 18px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    line-height: 1 !important;
    color: rgba(203,213,225,.86) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  body:not(.nox-shell-electron) .mobile-nav-btn::before,
  body.nox-device-phone .mobile-nav-btn::before,
  body.nox-device-tablet .mobile-nav-btn::before {
    font-size: 1.22rem !important;
    line-height: 1 !important;
    content: attr(aria-label) !important;
  }
  body:not(.nox-shell-electron) .mobile-nav-btn[data-mobile-view="chat"]::before,
  body.nox-device-phone .mobile-nav-btn[data-mobile-view="chat"]::before,
  body.nox-device-tablet .mobile-nav-btn[data-mobile-view="chat"]::before { content: "💬" !important; }
  body:not(.nox-shell-electron) .mobile-nav-btn[data-mobile-view="voice"]::before,
  body.nox-device-phone .mobile-nav-btn[data-mobile-view="voice"]::before,
  body.nox-device-tablet .mobile-nav-btn[data-mobile-view="voice"]::before { content: "🎧" !important; }
  body:not(.nox-shell-electron) .mobile-nav-btn[data-mobile-view="dm"]::before,
  body.nox-device-phone .mobile-nav-btn[data-mobile-view="dm"]::before,
  body.nox-device-tablet .mobile-nav-btn[data-mobile-view="dm"]::before { content: "👤" !important; }
  body:not(.nox-shell-electron) .mobile-nav-btn[data-mobile-view="channels"]::before,
  body.nox-device-phone .mobile-nav-btn[data-mobile-view="channels"]::before,
  body.nox-device-tablet .mobile-nav-btn[data-mobile-view="channels"]::before { content: "#" !important; font-weight: 900 !important; }
  body:not(.nox-shell-electron) .mobile-nav-btn[data-mobile-view="info"]::before,
  body.nox-device-phone .mobile-nav-btn[data-mobile-view="info"]::before,
  body.nox-device-tablet .mobile-nav-btn[data-mobile-view="info"]::before { content: "☰" !important; }

  body:not(.nox-shell-electron) .mobile-nav-btn.active,
  body.nox-device-phone .mobile-nav-btn.active,
  body.nox-device-tablet .mobile-nav-btn.active {
    color: rgba(240,253,250,.98) !important;
    background: radial-gradient(circle at 25% 10%, rgba(45,212,191,.34), transparent 54%), linear-gradient(135deg, rgba(124,58,237,.34), rgba(45,212,191,.16)) !important;
    border-color: rgba(45, 212, 191, .34) !important;
    box-shadow: 0 10px 24px rgba(45,212,191,.12), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  body:not(.nox-shell-electron) .brand-panel,
  body:not(.nox-shell-electron) .side-actions,
  body.nox-device-phone .brand-panel,
  body.nox-device-phone .side-actions,
  body.nox-device-tablet .brand-panel,
  body.nox-device-tablet .side-actions {
    display: none !important;
  }

  body:not(.nox-shell-electron) .channel-sidebar,
  body:not(.nox-shell-electron) .chat-panel,
  body:not(.nox-shell-electron) .info-panel,
  body.nox-device-phone .channel-sidebar,
  body.nox-device-phone .chat-panel,
  body.nox-device-phone .info-panel,
  body.nox-device-tablet .channel-sidebar,
  body.nox-device-tablet .chat-panel,
  body.nox-device-tablet .info-panel {
    border-radius: 26px !important;
    border-color: rgba(148, 163, 184, .11) !important;
    background: linear-gradient(180deg, rgba(18, 23, 48, .78), rgba(13, 18, 39, .72)) !important;
  }

  body.nox-keyboard-open .nox-mobile-bottom-dock,
  body.nox-keyboard-open #mobileTopbar .mobile-nav {
    transform: translateY(calc(100% + 20px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ======================================================================
   NOX v5.1.6 - Mobile Debug & Dock Polish
   Cleaner SVG-style dock icons + in-app mobile test log exporter.
   ====================================================================== */
@media (max-width: 760px) {
  body:not(.nox-shell-electron) .mobile-nav-btn,
  body.nox-device-phone .mobile-nav-btn,
  body.nox-device-tablet .mobile-nav-btn {
    position: relative !important;
  }
  body:not(.nox-shell-electron) .mobile-nav-btn::before,
  body.nox-device-phone .mobile-nav-btn::before,
  body.nox-device-tablet .mobile-nav-btn::before {
    content: "" !important;
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    background: currentColor !important;
    opacity: .96 !important;
    -webkit-mask: var(--nox-mobile-icon) center / contain no-repeat !important;
    mask: var(--nox-mobile-icon) center / contain no-repeat !important;
  }
  body:not(.nox-shell-electron) .mobile-nav-btn[data-mobile-view="chat"],
  body.nox-device-phone .mobile-nav-btn[data-mobile-view="chat"],
  body.nox-device-tablet .mobile-nav-btn[data-mobile-view="chat"] {
    --nox-mobile-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 5.8C4 4.25 5.25 3 6.8 3h10.4C18.75 3 20 4.25 20 5.8v7.4c0 1.55-1.25 2.8-2.8 2.8H10l-4.6 4.2c-.55.5-1.4.11-1.4-.63V5.8Zm3 .2v9.05L9.22 13H17V6H7Z"/></svg>') !important;
  }
  body:not(.nox-shell-electron) .mobile-nav-btn[data-mobile-view="voice"],
  body.nox-device-phone .mobile-nav-btn[data-mobile-view="voice"],
  body.nox-device-tablet .mobile-nav-btn[data-mobile-view="voice"] {
    --nox-mobile-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 3a4 4 0 0 0-4 4v4a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4Zm-2 4a2 2 0 1 1 4 0v4a2 2 0 1 1-4 0V7Zm-4 3a1 1 0 1 0-2 0v1a8 8 0 0 0 7 7.94V21H8a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-3v-2.06A8 8 0 0 0 20 11v-1a1 1 0 1 0-2 0v1a6 6 0 0 1-12 0v-1Z"/></svg>') !important;
  }
  body:not(.nox-shell-electron) .mobile-nav-btn[data-mobile-view="dm"],
  body.nox-device-phone .mobile-nav-btn[data-mobile-view="dm"],
  body.nox-device-tablet .mobile-nav-btn[data-mobile-view="dm"] {
    --nox-mobile-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm0 2c-4.42 0-8 2.24-8 5v1a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1c0-2.76-3.58-5-8-5Zm-5.82 5c.7-1.2 2.95-3 5.82-3s5.12 1.8 5.82 3H6.18Z"/></svg>') !important;
  }
  body:not(.nox-shell-electron) .mobile-nav-btn[data-mobile-view="channels"],
  body.nox-device-phone .mobile-nav-btn[data-mobile-view="channels"],
  body.nox-device-tablet .mobile-nav-btn[data-mobile-view="channels"] {
    --nox-mobile-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 3a1 1 0 0 1 .98 1.2L9.42 7h5.16l.44-2.2a1 1 0 1 1 1.96.4L16.62 7H20a1 1 0 1 1 0 2h-3.78l-1.2 6H18a1 1 0 1 1 0 2h-3.38l-.64 3.2a1 1 0 1 1-1.96-.4l.56-2.8H7.42l-.64 3.2a1 1 0 1 1-1.96-.4L5.38 17H2a1 1 0 1 1 0-2h3.78l1.2-6H4a1 1 0 0 1 0-2h3.38l.64-3.2A1 1 0 0 1 9 3Zm.02 6-1.2 6h5.16l1.2-6H9.02Z"/></svg>') !important;
  }
  body:not(.nox-shell-electron) .mobile-nav-btn[data-mobile-view="info"],
  body.nox-device-phone .mobile-nav-btn[data-mobile-view="info"],
  body.nox-device-tablet .mobile-nav-btn[data-mobile-view="info"] {
    --nox-mobile-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2H5Z"/></svg>') !important;
  }

  body:not(.nox-shell-electron) .nox-mobile-bottom-dock,
  body.nox-device-phone .nox-mobile-bottom-dock,
  body.nox-device-tablet .nox-mobile-bottom-dock {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 5px !important;
    border-radius: 22px !important;
  }
  body:not(.nox-shell-electron) .mobile-nav-btn,
  body.nox-device-phone .mobile-nav-btn,
  body.nox-device-tablet .mobile-nav-btn {
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 17px !important;
  }

  body:not(.nox-shell-electron) .mobile-debug-export-card,
  body.nox-device-phone .mobile-debug-export-card,
  body.nox-device-tablet .mobile-debug-export-card {
    margin: 10px 0 14px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(45, 212, 191, .18) !important;
    background: radial-gradient(circle at 14% 0%, rgba(45,212,191,.18), transparent 38%), linear-gradient(180deg, rgba(15,23,42,.72), rgba(8,12,28,.58)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 34px rgba(0,0,0,.2) !important;
  }
  body:not(.nox-shell-electron) .mobile-debug-export-head,
  body.nox-device-phone .mobile-debug-export-head,
  body.nox-device-tablet .mobile-debug-export-head {
    display: grid !important;
    gap: 4px !important;
  }
  body:not(.nox-shell-electron) .mobile-debug-export-head span,
  body.nox-device-phone .mobile-debug-export-head span,
  body.nox-device-tablet .mobile-debug-export-head span {
    color: rgba(45,212,191,.85) !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    letter-spacing: .1em !important;
  }
  body:not(.nox-shell-electron) .mobile-debug-export-head strong,
  body.nox-device-phone .mobile-debug-export-head strong,
  body.nox-device-tablet .mobile-debug-export-head strong {
    font-size: 1rem !important;
  }
  body:not(.nox-shell-electron) .mobile-debug-export-head small,
  body.nox-device-phone .mobile-debug-export-head small,
  body.nox-device-tablet .mobile-debug-export-head small {
    color: rgba(203,213,225,.68) !important;
    line-height: 1.35 !important;
  }
  body:not(.nox-shell-electron) .mobile-debug-export-actions,
  body.nox-device-phone .mobile-debug-export-actions,
  body.nox-device-tablet .mobile-debug-export-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  body:not(.nox-shell-electron) .mobile-debug-export-actions button,
  body.nox-device-phone .mobile-debug-export-actions button,
  body.nox-device-tablet .mobile-debug-export-actions button {
    min-height: 40px !important;
    border-radius: 14px !important;
  }
  body:not(.nox-shell-electron) .mobile-debug-export-actions #mobileDebugUploadBtn,
  body.nox-device-phone .mobile-debug-export-actions #mobileDebugUploadBtn,
  body.nox-device-tablet .mobile-debug-export-actions #mobileDebugUploadBtn {
    grid-column: 1 / -1 !important;
  }
  body:not(.nox-shell-electron) .mobile-debug-export-actions #mobileDebugClearBtn,
  body.nox-device-phone .mobile-debug-export-actions #mobileDebugClearBtn,
  body.nox-device-tablet .mobile-debug-export-actions #mobileDebugClearBtn {
    grid-column: 1 / -1 !important;
  }
}

/* ======================================================================
   NOX v5.1.7 - Mobile No Start Card Polish
   Desktop keeps the NOX Start quick menu; mobile uses dock/modules instead.
   ====================================================================== */
@media (max-width: 760px) {
  body:not(.nox-shell-electron) .nox-start-hub,
  body.nox-device-phone .nox-start-hub,
  body.nox-device-tablet .nox-start-hub {
    display: none !important;
  }

  body:not(.nox-shell-electron) .nox-mobile-chat-empty,
  body.nox-device-phone .nox-mobile-chat-empty,
  body.nox-device-tablet .nox-mobile-chat-empty {
    min-height: 100%;
    display: grid;
    align-items: center;
    padding: 18px;
  }

  body:not(.nox-shell-electron) .nox-mobile-chat-empty-card,
  body.nox-device-phone .nox-mobile-chat-empty-card,
  body.nox-device-tablet .nox-mobile-chat-empty-card {
    border: 1px solid rgba(45, 212, 191, .16);
    border-radius: 24px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, .62), rgba(8, 12, 28, .46));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px rgba(0,0,0,.18);
  }

  body:not(.nox-shell-electron) .nox-mobile-chat-empty-kicker,
  body.nox-device-phone .nox-mobile-chat-empty-kicker,
  body.nox-device-tablet .nox-mobile-chat-empty-kicker {
    color: rgba(45, 212, 191, .82);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  body:not(.nox-shell-electron) .nox-mobile-chat-empty h3,
  body.nox-device-phone .nox-mobile-chat-empty h3,
  body.nox-device-tablet .nox-mobile-chat-empty h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    line-height: 1.15;
  }

  body:not(.nox-shell-electron) .nox-mobile-chat-empty p,
  body.nox-device-phone .nox-mobile-chat-empty p,
  body.nox-device-tablet .nox-mobile-chat-empty p {
    margin: 0;
    color: rgba(203, 213, 225, .72);
    line-height: 1.45;
    font-size: .94rem;
  }

  body:not(.nox-shell-electron) .nox-mobile-chat-empty-actions,
  body.nox-device-phone .nox-mobile-chat-empty-actions,
  body.nox-device-tablet .nox-mobile-chat-empty-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }

  body:not(.nox-shell-electron) .nox-mobile-chat-empty-actions button,
  body.nox-device-phone .nox-mobile-chat-empty-actions button,
  body.nox-device-tablet .nox-mobile-chat-empty-actions button {
    min-height: 38px;
    border-radius: 14px;
  }
}

/* ======================================================================
   NOX v5.1.8 - Mobile Chat Context Header + Conversation Picker
   ====================================================================== */
@media (max-width: 760px) {
  body:not(.nox-shell-electron) .mobile-chat-context-header,
  body.nox-device-phone .mobile-chat-context-header,
  body.nox-device-tablet .mobile-chat-context-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
    margin: 0 0 10px;
    padding: 10px;
    border-radius: 22px;
    border: 1px solid rgba(45, 212, 191, .16);
    background: radial-gradient(circle at 8% 0%, rgba(45,212,191,.18), transparent 40%), linear-gradient(135deg, rgba(15,23,42,.72), rgba(8,12,28,.58));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 34px rgba(0,0,0,.18);
  }

  body:not(.nox-shell-electron) .mobile-context-main,
  body.nox-device-phone .mobile-context-main,
  body.nox-device-tablet .mobile-context-main {
    min-width: 0;
    text-align: left;
    display: grid;
    gap: 2px;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 2px 4px;
    cursor: pointer;
  }

  body:not(.nox-shell-electron) .mobile-context-kicker,
  body.nox-device-phone .mobile-context-kicker,
  body.nox-device-tablet .mobile-context-kicker {
    color: rgba(45, 212, 191, .86);
    font-size: .62rem;
    font-weight: 950;
    letter-spacing: .15em;
  }

  body:not(.nox-shell-electron) .mobile-context-main strong,
  body.nox-device-phone .mobile-context-main strong,
  body.nox-device-tablet .mobile-context-main strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.02rem;
    line-height: 1.1;
  }

  body:not(.nox-shell-electron) .mobile-context-main small,
  body.nox-device-phone .mobile-context-main small,
  body.nox-device-tablet .mobile-context-main small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(203,213,225,.66);
    font-size: .78rem;
  }

  body:not(.nox-shell-electron) .mobile-context-change,
  body.nox-device-phone .mobile-context-change,
  body.nox-device-tablet .mobile-context-change {
    border-radius: 16px;
    border: 1px solid rgba(45,212,191,.22);
    background: rgba(15,118,110,.18);
    color: rgba(204,251,241,.94);
    padding: 0 13px;
    font-weight: 900;
    min-height: 44px;
  }

  body:not(.nox-shell-electron) .mobile-conversation-sheet,
  body.nox-device-phone .mobile-conversation-sheet,
  body.nox-device-tablet .mobile-conversation-sheet {
    position: fixed;
    inset: 0;
    z-index: 2147482600;
    display: grid;
    align-items: end;
    pointer-events: auto;
  }

  body:not(.nox-shell-electron) .mobile-conversation-sheet.hidden,
  body.nox-device-phone .mobile-conversation-sheet.hidden,
  body.nox-device-tablet .mobile-conversation-sheet.hidden {
    display: none !important;
  }

  body:not(.nox-shell-electron) .mobile-sheet-backdrop,
  body.nox-device-phone .mobile-sheet-backdrop,
  body.nox-device-tablet .mobile-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,6,23,.58);
    backdrop-filter: blur(8px);
  }

  body:not(.nox-shell-electron) .mobile-sheet-panel,
  body.nox-device-phone .mobile-sheet-panel,
  body.nox-device-tablet .mobile-sheet-panel {
    position: relative;
    max-height: min(78vh, 690px);
    min-height: 360px;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    margin: 0 10px calc(env(safe-area-inset-bottom, 0px) + 8px);
    padding: 10px 12px 12px;
    border-radius: 28px;
    border: 1px solid rgba(45,212,191,.18);
    background: radial-gradient(circle at 18% 0%, rgba(45,212,191,.18), transparent 36%), linear-gradient(180deg, rgba(15,23,42,.96), rgba(8,12,28,.94));
    box-shadow: 0 -24px 70px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08);
  }

  body:not(.nox-shell-electron) .mobile-sheet-handle,
  body.nox-device-phone .mobile-sheet-handle,
  body.nox-device-tablet .mobile-sheet-handle {
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(148,163,184,.34);
    justify-self: center;
    margin: 2px 0 10px;
  }

  body:not(.nox-shell-electron) .mobile-sheet-head,
  body.nox-device-phone .mobile-sheet-head,
  body.nox-device-tablet .mobile-sheet-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
    padding: 0 4px 10px;
  }

  body:not(.nox-shell-electron) .mobile-sheet-head span,
  body.nox-device-phone .mobile-sheet-head span,
  body.nox-device-tablet .mobile-sheet-head span {
    display: block;
    color: rgba(45,212,191,.84);
    font-size: .62rem;
    letter-spacing: .16em;
    font-weight: 950;
  }

  body:not(.nox-shell-electron) .mobile-sheet-head strong,
  body.nox-device-phone .mobile-sheet-head strong,
  body.nox-device-tablet .mobile-sheet-head strong {
    display: block;
    font-size: 1.24rem;
    line-height: 1.15;
  }

  body:not(.nox-shell-electron) .mobile-sheet-head small,
  body.nox-device-phone .mobile-sheet-head small,
  body.nox-device-tablet .mobile-sheet-head small {
    display: block;
    margin-top: 2px;
    color: rgba(203,213,225,.62);
  }

  body:not(.nox-shell-electron) .mobile-sheet-close,
  body.nox-device-phone .mobile-sheet-close,
  body.nox-device-tablet .mobile-sheet-close {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.14);
    background: rgba(15,23,42,.72);
    color: rgba(226,232,240,.88);
  }

  body:not(.nox-shell-electron) .mobile-sheet-tabs,
  body.nox-device-phone .mobile-sheet-tabs,
  body.nox-device-tablet .mobile-sheet-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px;
    margin: 0 0 10px;
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.12);
    background: rgba(2,6,23,.32);
  }

  body:not(.nox-shell-electron) .mobile-sheet-tabs button,
  body.nox-device-phone .mobile-sheet-tabs button,
  body.nox-device-tablet .mobile-sheet-tabs button {
    min-height: 42px;
    border: 0;
    border-radius: 14px;
    color: rgba(203,213,225,.72);
    background: transparent;
    font-weight: 900;
  }

  body:not(.nox-shell-electron) .mobile-sheet-tabs button.active,
  body.nox-device-phone .mobile-sheet-tabs button.active,
  body.nox-device-tablet .mobile-sheet-tabs button.active {
    color: rgba(240,253,250,.98);
    background: linear-gradient(135deg, rgba(124,58,237,.34), rgba(45,212,191,.16));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }

  body:not(.nox-shell-electron) .mobile-picker-online,
  body.nox-device-phone .mobile-picker-online,
  body.nox-device-tablet .mobile-picker-online {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 0 2px 10px;
    color: rgba(203,213,225,.66);
    scrollbar-width: none;
  }

  body:not(.nox-shell-electron) .mobile-picker-online strong,
  body.nox-device-phone .mobile-picker-online strong,
  body.nox-device-tablet .mobile-picker-online strong {
    flex: 0 0 auto;
    color: rgba(94,234,212,.92);
    font-size: .78rem;
  }

  body:not(.nox-shell-electron) .mobile-picker-online span,
  body.nox-device-phone .mobile-picker-online span,
  body.nox-device-tablet .mobile-picker-online span {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(15,23,42,.68);
    border: 1px solid rgba(148,163,184,.12);
    font-size: .72rem;
    font-weight: 800;
  }

  body:not(.nox-shell-electron) .mobile-picker-online span.me,
  body.nox-device-phone .mobile-picker-online span.me,
  body.nox-device-tablet .mobile-picker-online span.me {
    background: rgba(124,58,237,.28);
    color: rgba(240,253,250,.95);
  }

  body:not(.nox-shell-electron) .mobile-picker-list,
  body.nox-device-phone .mobile-picker-list,
  body.nox-device-tablet .mobile-picker-list {
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 2px 0 8px;
  }

  body:not(.nox-shell-electron) .mobile-picker-row,
  body.nox-device-phone .mobile-picker-row,
  body.nox-device-tablet .mobile-picker-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    width: 100%;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 20px;
    border: 1px solid rgba(45,212,191,.13);
    background: rgba(8,13,32,.68);
    color: inherit;
    text-align: left;
  }

  body:not(.nox-shell-electron) .mobile-picker-row.active,
  body.nox-device-phone .mobile-picker-row.active,
  body.nox-device-tablet .mobile-picker-row.active {
    border-color: rgba(45,212,191,.35);
    background: radial-gradient(circle at 0% 0%, rgba(45,212,191,.16), transparent 45%), rgba(15,23,42,.82);
  }

  body:not(.nox-shell-electron) .mobile-picker-avatar,
  body.nox-device-phone .mobile-picker-avatar,
  body.nox-device-tablet .mobile-picker-avatar,
  body:not(.nox-shell-electron) .mobile-picker-hash,
  body.nox-device-phone .mobile-picker-hash,
  body.nox-device-tablet .mobile-picker-hash {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-weight: 950;
    background: linear-gradient(135deg, rgba(45,212,191,.24), rgba(124,58,237,.36));
    border: 1px solid rgba(255,255,255,.08);
  }

  body:not(.nox-shell-electron) .mobile-picker-copy,
  body.nox-device-phone .mobile-picker-copy,
  body.nox-device-tablet .mobile-picker-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  body:not(.nox-shell-electron) .mobile-picker-copy strong,
  body.nox-device-phone .mobile-picker-copy strong,
  body.nox-device-tablet .mobile-picker-copy strong,
  body:not(.nox-shell-electron) .mobile-picker-copy small,
  body.nox-device-phone .mobile-picker-copy small,
  body.nox-device-tablet .mobile-picker-copy small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body:not(.nox-shell-electron) .mobile-picker-copy small,
  body.nox-device-phone .mobile-picker-copy small,
  body.nox-device-tablet .mobile-picker-copy small {
    color: rgba(203,213,225,.62);
  }

  body:not(.nox-shell-electron) .mobile-picker-chevron,
  body.nox-device-phone .mobile-picker-chevron,
  body.nox-device-tablet .mobile-picker-chevron {
    color: rgba(148,163,184,.54);
    font-size: 1.4rem;
  }

  body:not(.nox-shell-electron) .mobile-picker-empty,
  body.nox-device-phone .mobile-picker-empty,
  body.nox-device-tablet .mobile-picker-empty {
    padding: 18px;
    border-radius: 18px;
    border: 1px dashed rgba(148,163,184,.18);
    color: rgba(203,213,225,.64);
    text-align: center;
  }

  body:not(.nox-shell-electron) .mobile-picker-actions,
  body.nox-device-phone .mobile-picker-actions,
  body.nox-device-tablet .mobile-picker-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 8px;
  }

  body:not(.nox-shell-electron) .mobile-picker-actions button,
  body.nox-device-phone .mobile-picker-actions button,
  body.nox-device-tablet .mobile-picker-actions button {
    min-height: 42px;
    border-radius: 15px;
  }
}


/* ======================================================================
   NOX v5.1.9 - Server Diagnostics Inbox
   ====================================================================== */
@media (max-width: 760px) {
  body:not(.nox-shell-electron) #mobileDebugUploadBtn,
  body.nox-device-phone #mobileDebugUploadBtn,
  body.nox-device-tablet #mobileDebugUploadBtn {
    font-weight: 900 !important;
    box-shadow: 0 12px 28px rgba(45,212,191,.16) !important;
  }
}


/* NOX v5.1.13 - install hub Android beta */
.install-recommended-card {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(117, 86, 255, 0.22), rgba(95, 247, 125, 0.10));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.20);
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.install-recommended-card h2 {
  margin: 6px 0 6px;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
}
.install-recommended-card p { margin: 0; color: rgba(255, 255, 255, 0.76); }
.install-platform-android {
  border-color: rgba(95, 247, 125, 0.28) !important;
  background: linear-gradient(180deg, rgba(95, 247, 125, 0.10), rgba(255, 255, 255, 0.045)) !important;
}
.install-recommended-card[data-platform="android"] {
  border-color: rgba(95, 247, 125, 0.34);
}
@media (max-width: 720px) {
  .install-recommended-card { align-items: stretch; flex-direction: column; }
  .install-recommended-card .primary { width: 100%; justify-content: center; }
}


/* ======================================================================
   NOX v5.1.14 - Android Shell Polish / Capacitor Mode
   ====================================================================== */
body.nox-shell-android-capacitor,
body.nox-android-app {
  background: radial-gradient(circle at top, rgba(45,212,191,.10), transparent 34%), var(--bg);
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

body.nox-shell-android-capacitor .install-shortcut,
body.nox-android-app .install-shortcut {
  display: none !important;
}

body.nox-shell-android-capacitor .app-shell,
body.nox-android-app .app-shell {
  min-height: var(--app-height, 100dvh);
  padding-top: max(10px, env(safe-area-inset-top)) !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}

body.nox-shell-android-capacitor .mobile-topbar,
body.nox-android-app .mobile-topbar {
  margin-top: max(0px, env(safe-area-inset-top));
}

body.nox-shell-android-capacitor .nox-mobile-bottom-dock,
body.nox-android-app .nox-mobile-bottom-dock,
body.nox-shell-android-capacitor .mobile-nav,
body.nox-android-app .mobile-nav {
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
}

body.nox-shell-android-capacitor .composer-wrap,
body.nox-android-app .composer-wrap {
  padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
}

body.nox-shell-android-capacitor #platformPill::after,
body.nox-android-app #platformPill::after {
  content: " · APK";
}

body.nox-shell-android-capacitor .mobile-debug-export-head span::after,
body.nox-android-app .mobile-debug-export-head span::after {
  content: " / ANDROID APP";
  color: #5ff77d;
}

/* ======================================================================
   NOX v5.1.15 - Android Mobile Modal & People Fix
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-channel-create-open,
  body.nox-mobile-sheet-open {
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  body.nox-device-phone .nox-channel-create-modal,
  body.nox-shell-android-capacitor .nox-channel-create-modal,
  body.nox-android-app .nox-channel-create-modal {
    z-index: 2147481200 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: stretch !important;
    padding: 0 max(12px, env(safe-area-inset-left)) calc(84px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right)) !important;
  }

  body.nox-device-phone .nox-channel-create-backdrop,
  body.nox-shell-android-capacitor .nox-channel-create-backdrop,
  body.nox-android-app .nox-channel-create-backdrop {
    background: rgba(2, 6, 23, .78) !important;
    backdrop-filter: blur(14px) saturate(1.15) !important;
  }

  body.nox-device-phone .nox-channel-create-card,
  body.nox-device-phone .nox-channel-create-card.private-on,
  body.nox-shell-android-capacitor .nox-channel-create-card,
  body.nox-shell-android-capacitor .nox-channel-create-card.private-on,
  body.nox-android-app .nox-channel-create-card,
  body.nox-android-app .nox-channel-create-card.private-on {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(82dvh, calc(100vh - 110px)) !important;
    grid-template-columns: 1fr !important;
    align-self: auto !important;
    border-radius: 30px 30px 22px 22px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 14% 0%, rgba(45, 212, 191, .16), transparent 38%),
      linear-gradient(180deg, rgba(8, 15, 34, .98), rgba(5, 8, 24, .98)) !important;
    box-shadow: 0 -22px 70px rgba(0,0,0,.62), 0 0 40px rgba(45,212,191,.14) !important;
  }

  body.nox-device-phone .nox-channel-create-card::before,
  body.nox-shell-android-capacitor .nox-channel-create-card::before,
  body.nox-android-app .nox-channel-create-card::before {
    content: "" !important;
    width: 70px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: rgba(203, 213, 225, .28) !important;
    justify-self: center !important;
    margin-top: 12px !important;
  }

  body.nox-device-phone .nox-channel-create-main,
  body.nox-shell-android-capacitor .nox-channel-create-main,
  body.nox-android-app .nox-channel-create-main {
    height: auto !important;
    padding: 16px 18px 14px !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  body.nox-device-phone .nox-channel-create-head,
  body.nox-shell-android-capacitor .nox-channel-create-head,
  body.nox-android-app .nox-channel-create-head {
    margin-bottom: 12px !important;
  }

  body.nox-device-phone .nox-channel-create-head h3,
  body.nox-shell-android-capacitor .nox-channel-create-head h3,
  body.nox-android-app .nox-channel-create-head h3 {
    font-size: 1.25rem !important;
  }

  body.nox-device-phone .nox-channel-create-head p,
  body.nox-shell-android-capacitor .nox-channel-create-head p,
  body.nox-android-app .nox-channel-create-head p {
    max-width: 28ch !important;
  }

  body.nox-device-phone .nox-channel-create-form,
  body.nox-shell-android-capacitor .nox-channel-create-form,
  body.nox-android-app .nox-channel-create-form {
    gap: 10px !important;
  }

  body.nox-device-phone .nox-channel-create-form input[type="text"],
  body.nox-device-phone .nox-channel-create-form input:not([type]),
  body.nox-shell-android-capacitor .nox-channel-create-form input[type="text"],
  body.nox-shell-android-capacitor .nox-channel-create-form input:not([type]),
  body.nox-android-app .nox-channel-create-form input[type="text"],
  body.nox-android-app .nox-channel-create-form input:not([type]) {
    min-height: 46px !important;
  }

  body.nox-device-phone .nox-channel-invite-side,
  body.nox-device-phone .nox-channel-create-card.private-on .nox-channel-invite-side,
  body.nox-shell-android-capacitor .nox-channel-invite-side,
  body.nox-shell-android-capacitor .nox-channel-create-card.private-on .nox-channel-invite-side,
  body.nox-android-app .nox-channel-invite-side,
  body.nox-android-app .nox-channel-create-card.private-on .nox-channel-invite-side {
    display: none !important;
    transform: none !important;
    opacity: 1 !important;
    height: auto !important;
    padding: 0 18px 16px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(45, 212, 191, .18) !important;
    background: linear-gradient(180deg, rgba(45,212,191,.06), rgba(124,58,237,.04)) !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  body.nox-device-phone .nox-channel-create-card.private-on .nox-channel-invite-side,
  body.nox-shell-android-capacitor .nox-channel-create-card.private-on .nox-channel-invite-side,
  body.nox-android-app .nox-channel-create-card.private-on .nox-channel-invite-side {
    display: block !important;
  }

  body.nox-device-phone .nox-channel-invite-head,
  body.nox-shell-android-capacitor .nox-channel-invite-head,
  body.nox-android-app .nox-channel-invite-head {
    padding-top: 12px !important;
  }

  body.nox-device-phone .nox-channel-invite-head h4,
  body.nox-shell-android-capacitor .nox-channel-invite-head h4,
  body.nox-android-app .nox-channel-invite-head h4 {
    margin: 4px 0 !important;
    font-size: 1.05rem !important;
  }

  body.nox-device-phone .nox-channel-invite-users,
  body.nox-shell-android-capacitor .nox-channel-invite-users,
  body.nox-android-app .nox-channel-invite-users {
    max-height: min(34dvh, 310px) !important;
    margin-top: 10px !important;
    padding-right: 5px !important;
  }

  body.nox-device-phone .nox-create-user,
  body.nox-shell-android-capacitor .nox-create-user,
  body.nox-android-app .nox-create-user {
    grid-template-columns: 28px 48px minmax(0, 1fr) !important;
    min-height: 58px !important;
    padding: 9px 10px !important;
    background: rgba(8, 13, 32, .72) !important;
    border-color: rgba(45,212,191,.13) !important;
  }

  body.nox-device-phone .nox-channel-create-actions,
  body.nox-shell-android-capacitor .nox-channel-create-actions,
  body.nox-android-app .nox-channel-create-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    margin-top: 10px !important;
  }

  body.nox-device-phone .nox-channel-create-actions button,
  body.nox-shell-android-capacitor .nox-channel-create-actions button,
  body.nox-android-app .nox-channel-create-actions button {
    min-height: 46px !important;
    border-radius: 16px !important;
  }

  body.nox-device-phone .right-users-list,
  body.nox-shell-android-capacitor .right-users-list,
  body.nox-android-app .right-users-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body.nox-device-phone .right-user-row,
  body.nox-shell-android-capacitor .right-user-row,
  body.nox-android-app .right-user-row {
    width: 100% !important;
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(45, 212, 191, .14) !important;
    background: linear-gradient(135deg, rgba(8, 13, 32, .86), rgba(12, 18, 42, .72)) !important;
    color: rgba(241,245,249,.96) !important;
    text-align: left !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  body.nox-device-phone .right-user-row.online,
  body.nox-shell-android-capacitor .right-user-row.online,
  body.nox-android-app .right-user-row.online {
    border-color: rgba(94,234,212,.22) !important;
    background: radial-gradient(circle at 0 0, rgba(45,212,191,.14), transparent 46%), rgba(8,13,32,.84) !important;
  }

  body.nox-device-phone .right-user-row.me,
  body.nox-shell-android-capacitor .right-user-row.me,
  body.nox-android-app .right-user-row.me {
    border-color: rgba(124,58,237,.34) !important;
  }

  body.nox-device-phone .right-user-avatar-wrap,
  body.nox-shell-android-capacitor .right-user-avatar-wrap,
  body.nox-android-app .right-user-avatar-wrap,
  body.nox-device-phone .right-user-avatar,
  body.nox-shell-android-capacitor .right-user-avatar,
  body.nox-android-app .right-user-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
  }

  body.nox-device-phone .right-user-main,
  body.nox-shell-android-capacitor .right-user-main,
  body.nox-android-app .right-user-main {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
  }

  body.nox-device-phone .right-user-main strong,
  body.nox-device-phone .right-user-main small,
  body.nox-shell-android-capacitor .right-user-main strong,
  body.nox-shell-android-capacitor .right-user-main small,
  body.nox-android-app .right-user-main strong,
  body.nox-android-app .right-user-main small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.nox-device-phone .right-user-main small,
  body.nox-shell-android-capacitor .right-user-main small,
  body.nox-android-app .right-user-main small {
    color: rgba(203,213,225,.66) !important;
  }
}

@media (max-height: 660px) and (max-width: 760px) {
  body.nox-device-phone .nox-channel-create-card,
  body.nox-shell-android-capacitor .nox-channel-create-card,
  body.nox-android-app .nox-channel-create-card {
    max-height: calc(100dvh - 92px) !important;
  }
  body.nox-device-phone .nox-channel-invite-users,
  body.nox-shell-android-capacitor .nox-channel-invite-users,
  body.nox-android-app .nox-channel-invite-users {
    max-height: 170px !important;
  }
}


/* ======================================================================
   NOX v5.1.16 - Android Mobile Stability & Icon Polish
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-shell-android-capacitor .mobile-sheet-backdrop,
  body.nox-android-app .mobile-sheet-backdrop,
  body.nox-shell-android-capacitor .nox-channel-create-backdrop,
  body.nox-android-app .nox-channel-create-backdrop {
    backdrop-filter: blur(7px) saturate(1.05) !important;
    background: rgba(2, 6, 23, .66) !important;
  }

  body.nox-shell-android-capacitor .mobile-chat-context-header,
  body.nox-android-app .mobile-chat-context-header {
    margin: 0 0 8px !important;
    padding: 8px 9px !important;
    border-radius: 18px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  body.nox-shell-android-capacitor .mobile-context-main,
  body.nox-android-app .mobile-context-main {
    gap: 1px !important;
    padding: 0 2px !important;
  }

  body.nox-shell-android-capacitor .mobile-context-kicker,
  body.nox-android-app .mobile-context-kicker {
    font-size: .56rem !important;
    letter-spacing: .13em !important;
  }

  body.nox-shell-android-capacitor .mobile-context-main strong,
  body.nox-android-app .mobile-context-main strong {
    font-size: .96rem !important;
  }

  body.nox-shell-android-capacitor .mobile-context-main small,
  body.nox-android-app .mobile-context-main small {
    font-size: .70rem !important;
  }

  body.nox-shell-android-capacitor .mobile-context-change,
  body.nox-android-app .mobile-context-change {
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    font-size: .82rem !important;
  }

  body.nox-shell-android-capacitor .nox-channel-create-modal,
  body.nox-android-app .nox-channel-create-modal {
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }

  body.nox-shell-android-capacitor .nox-channel-create-card,
  body.nox-shell-android-capacitor .nox-channel-create-card.private-on,
  body.nox-android-app .nox-channel-create-card,
  body.nox-android-app .nox-channel-create-card.private-on {
    max-height: min(76dvh, calc(100dvh - 96px)) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body.nox-shell-android-capacitor .nox-channel-create-main,
  body.nox-android-app .nox-channel-create-main {
    padding: 14px 16px 10px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.nox-shell-android-capacitor .nox-channel-create-actions,
  body.nox-android-app .nox-channel-create-actions {
    position: sticky !important;
    bottom: 0 !important;
    padding-top: 8px !important;
    background: linear-gradient(180deg, rgba(5,8,24,0), rgba(5,8,24,.94) 34%) !important;
    z-index: 2 !important;
  }

  body.nox-shell-android-capacitor .nox-channel-create-card.private-on .nox-channel-invite-side,
  body.nox-android-app .nox-channel-create-card.private-on .nox-channel-invite-side {
    min-height: 0 !important;
    max-height: 34dvh !important;
    overflow: hidden !important;
    padding-bottom: 12px !important;
  }

  body.nox-shell-android-capacitor .nox-channel-invite-users,
  body.nox-android-app .nox-channel-invite-users {
    max-height: min(24dvh, 230px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.nox-shell-android-capacitor .message-input,
  body.nox-android-app .message-input,
  body.nox-shell-android-capacitor #messageInput,
  body.nox-android-app #messageInput {
    font-size: .92rem !important;
  }


  body.nox-shell-android-capacitor .mobile-debug-export-actions .wide,
  body.nox-android-app .mobile-debug-export-actions .wide {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) and (max-height: 620px) {
  body.nox-shell-android-capacitor .nox-channel-create-card,
  body.nox-shell-android-capacitor .nox-channel-create-card.private-on,
  body.nox-android-app .nox-channel-create-card,
  body.nox-android-app .nox-channel-create-card.private-on {
    max-height: calc(100dvh - 24px) !important;
  }
  body.nox-shell-android-capacitor .nox-channel-create-head p,
  body.nox-android-app .nox-channel-create-head p {
    display: none !important;
  }
  body.nox-shell-android-capacitor .nox-channel-invite-users,
  body.nox-android-app .nox-channel-invite-users {
    max-height: 130px !important;
  }
}

/* ======================================================================
   NOX v5.1.17 - Android Hard Overlay Recovery
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-shell-android-capacitor .nox-channel-create-modal.hidden,
  body.nox-android-app .nox-channel-create-modal.hidden,
  body.nox-device-phone .nox-channel-create-modal.hidden,
  body.nox-shell-android-capacitor .mobile-conversation-sheet.hidden,
  body.nox-android-app .mobile-conversation-sheet.hidden,
  body.nox-device-phone .mobile-conversation-sheet.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body:not(.nox-channel-create-open) .nox-channel-create-backdrop,
  body:not(.nox-mobile-sheet-open) .mobile-sheet-backdrop {
    pointer-events: none !important;
  }

  body.nox-shell-android-capacitor .nox-channel-create-modal.hidden *,
  body.nox-android-app .nox-channel-create-modal.hidden *,
  body.nox-shell-android-capacitor .mobile-conversation-sheet.hidden *,
  body.nox-android-app .mobile-conversation-sheet.hidden * {
    pointer-events: none !important;
  }

  body.nox-shell-android-capacitor .nox-channel-create-modal:not(.hidden),
  body.nox-android-app .nox-channel-create-modal:not(.hidden),
  body.nox-shell-android-capacitor .mobile-conversation-sheet:not(.hidden),
  body.nox-android-app .mobile-conversation-sheet:not(.hidden) {
    pointer-events: auto !important;
  }
}


/* ======================================================================
   NOX v5.1.19 - Android Compact Chat Layout
   Compact chat header and more vertical room for messages on mobile.
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-device-phone .chat-panel,
  body.nox-shell-android-capacitor .chat-panel,
  body.nox-android-app .chat-panel {
    gap: 7px !important;
  }

  body.nox-device-phone .chat-header,
  body.nox-shell-android-capacitor .chat-header,
  body.nox-android-app .chat-header {
    min-height: 0 !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
    gap: 7px !important;
  }

  body.nox-device-phone .chat-header h2,
  body.nox-shell-android-capacitor .chat-header h2,
  body.nox-android-app .chat-header h2 {
    font-size: 1.02rem !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  body.nox-device-phone .chat-header p,
  body.nox-shell-android-capacitor .chat-header p,
  body.nox-android-app .chat-header p {
    font-size: .72rem !important;
    line-height: 1.15 !important;
    margin: 2px 0 0 !important;
    max-height: 1.05rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.nox-device-phone .chat-header-actions,
  body.nox-shell-android-capacitor .chat-header-actions,
  body.nox-android-app .chat-header-actions {
    gap: 5px !important;
  }

  body.nox-shell-android-capacitor .mobile-chat-context-header,
  body.nox-android-app .mobile-chat-context-header,
  body.nox-device-phone .mobile-chat-context-header {
    margin: 0 0 5px !important;
    padding: 6px 7px !important;
    border-radius: 15px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    background: linear-gradient(135deg, rgba(15,23,42,.78), rgba(8,12,28,.55)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.14) !important;
  }

  body.nox-shell-android-capacitor .mobile-context-main,
  body.nox-android-app .mobile-context-main,
  body.nox-device-phone .mobile-context-main {
    gap: 0 !important;
    padding: 0 1px !important;
  }

  body.nox-shell-android-capacitor .mobile-context-kicker,
  body.nox-android-app .mobile-context-kicker,
  body.nox-device-phone .mobile-context-kicker {
    font-size: .50rem !important;
    letter-spacing: .11em !important;
    line-height: 1.05 !important;
  }

  body.nox-shell-android-capacitor .mobile-context-main strong,
  body.nox-android-app .mobile-context-main strong,
  body.nox-device-phone .mobile-context-main strong {
    font-size: .90rem !important;
    line-height: 1.08 !important;
  }

  body.nox-shell-android-capacitor .mobile-context-main small,
  body.nox-android-app .mobile-context-main small,
  body.nox-device-phone .mobile-context-main small {
    font-size: .64rem !important;
    line-height: 1.05 !important;
    opacity: .82 !important;
  }

  body.nox-shell-android-capacitor .mobile-context-change,
  body.nox-android-app .mobile-context-change,
  body.nox-device-phone .mobile-context-change {
    min-height: 32px !important;
    padding: 0 9px !important;
    border-radius: 12px !important;
    font-size: .76rem !important;
  }

  body.nox-shell-android-capacitor #messages,
  body.nox-android-app #messages,
  body.nox-device-phone #messages {
    padding-top: 4px !important;
  }

  body.nox-shell-android-capacitor .composer,
  body.nox-android-app .composer,
  body.nox-device-phone .composer {
    padding: 8px 9px max(8px, env(safe-area-inset-bottom)) !important;
    gap: 7px !important;
  }

  body.nox-shell-android-capacitor #messageInput,
  body.nox-android-app #messageInput,
  body.nox-device-phone #messageInput {
    min-height: 38px !important;
    font-size: .94rem !important;
    line-height: 1.25 !important;
  }
}

/* ======================================================================
   NOX v5.1.25 - Android Chat UX Rebuild Pass
   Conversation-focused layout while Android keyboard is open.
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-shell-android-capacitor.nox-keyboard-open,
  body.nox-android-app.nox-keyboard-open,
  body.nox-device-phone.nox-keyboard-open {
    --nox-mobile-keyboard-composer-h: 66px;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode #mobileTopbar,
  body.nox-android-app.nox-mobile-writing-mode #mobileTopbar,
  body.nox-device-phone.nox-mobile-writing-mode #mobileTopbar {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    transform: translateY(-8px) scale(.98) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .chat-panel,
  body.nox-android-app.nox-mobile-writing-mode .chat-panel,
  body.nox-device-phone.nox-mobile-writing-mode .chat-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    min-height: 0 !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .chat-header,
  body.nox-android-app.nox-mobile-writing-mode .chat-header,
  body.nox-device-phone.nox-mobile-writing-mode .chat-header {
    padding: 6px 10px 5px !important;
    min-height: 0 !important;
    gap: 2px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(12,18,42,.78), rgba(3,7,18,.50)) !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .channel-kicker,
  body.nox-android-app.nox-mobile-writing-mode .channel-kicker,
  body.nox-device-phone.nox-mobile-writing-mode .channel-kicker {
    font-size: .48rem !important;
    letter-spacing: .10em !important;
    line-height: 1 !important;
    opacity: .72 !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .chat-header h2,
  body.nox-android-app.nox-mobile-writing-mode .chat-header h2,
  body.nox-device-phone.nox-mobile-writing-mode .chat-header h2 {
    font-size: .96rem !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .chat-header p,
  body.nox-android-app.nox-mobile-writing-mode .chat-header p,
  body.nox-device-phone.nox-mobile-writing-mode .chat-header p,
  body.nox-shell-android-capacitor.nox-mobile-writing-mode .chat-header-actions,
  body.nox-android-app.nox-mobile-writing-mode .chat-header-actions,
  body.nox-device-phone.nox-mobile-writing-mode .chat-header-actions,
  body.nox-shell-android-capacitor.nox-mobile-writing-mode .nox-presence-stack,
  body.nox-android-app.nox-mobile-writing-mode .nox-presence-stack,
  body.nox-device-phone.nox-mobile-writing-mode .nox-presence-stack,
  body.nox-shell-android-capacitor.nox-mobile-writing-mode .presence-radar,
  body.nox-android-app.nox-mobile-writing-mode .presence-radar,
  body.nox-device-phone.nox-mobile-writing-mode .presence-radar,
  body.nox-shell-android-capacitor.nox-mobile-writing-mode .chat-presence-bar,
  body.nox-android-app.nox-mobile-writing-mode .chat-presence-bar,
  body.nox-device-phone.nox-mobile-writing-mode .chat-presence-bar {
    display: none !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .mobile-chat-context-header,
  body.nox-android-app.nox-mobile-writing-mode .mobile-chat-context-header,
  body.nox-device-phone.nox-mobile-writing-mode .mobile-chat-context-header {
    margin: 0 0 4px !important;
    padding: 5px 6px !important;
    border-radius: 13px !important;
    gap: 5px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    background: linear-gradient(135deg, rgba(15,23,42,.60), rgba(8,12,28,.42)) !important;
    box-shadow: none !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .mobile-context-kicker,
  body.nox-android-app.nox-mobile-writing-mode .mobile-context-kicker,
  body.nox-device-phone.nox-mobile-writing-mode .mobile-context-kicker {
    display: none !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .mobile-context-main strong,
  body.nox-android-app.nox-mobile-writing-mode .mobile-context-main strong,
  body.nox-device-phone.nox-mobile-writing-mode .mobile-context-main strong {
    font-size: .86rem !important;
    line-height: 1.05 !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .mobile-context-main small,
  body.nox-android-app.nox-mobile-writing-mode .mobile-context-main small,
  body.nox-device-phone.nox-mobile-writing-mode .mobile-context-main small {
    display: none !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .mobile-context-change,
  body.nox-android-app.nox-mobile-writing-mode .mobile-context-change,
  body.nox-device-phone.nox-mobile-writing-mode .mobile-context-change {
    min-height: 28px !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
    font-size: .72rem !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode #messages,
  body.nox-android-app.nox-mobile-writing-mode #messages,
  body.nox-device-phone.nox-mobile-writing-mode #messages {
    min-height: 0 !important;
    padding: 6px 8px 8px !important;
    gap: 7px !important;
    scroll-padding-bottom: 74px !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode #messages .empty-state,
  body.nox-android-app.nox-mobile-writing-mode #messages .empty-state,
  body.nox-device-phone.nox-mobile-writing-mode #messages .empty-state {
    padding: 18px 10px !important;
    font-size: .86rem !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .msg,
  body.nox-android-app.nox-mobile-writing-mode .msg,
  body.nox-device-phone.nox-mobile-writing-mode .msg {
    padding: 7px 8px !important;
    border-radius: 13px !important;
    gap: 7px !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .msg-avatar,
  body.nox-android-app.nox-mobile-writing-mode .msg-avatar,
  body.nox-device-phone.nox-mobile-writing-mode .msg-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: .72rem !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .msg-meta,
  body.nox-android-app.nox-mobile-writing-mode .msg-meta,
  body.nox-device-phone.nox-mobile-writing-mode .msg-meta {
    margin-bottom: 2px !important;
    font-size: .66rem !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .msg-content,
  body.nox-android-app.nox-mobile-writing-mode .msg-content,
  body.nox-device-phone.nox-mobile-writing-mode .msg-content {
    font-size: .90rem !important;
    line-height: 1.30 !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .emoji-strip,
  body.nox-android-app.nox-mobile-writing-mode .emoji-strip,
  body.nox-device-phone.nox-mobile-writing-mode .emoji-strip {
    display: none !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .composer-wrap,
  body.nox-android-app.nox-mobile-writing-mode .composer-wrap,
  body.nox-device-phone.nox-mobile-writing-mode .composer-wrap {
    padding: 5px 7px 6px !important;
    background: linear-gradient(180deg, rgba(4,7,18,.74), rgba(4,7,18,.98)) !important;
    border-top-color: rgba(45,212,191,.12) !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode #messageForm.composer,
  body.nox-android-app.nox-mobile-writing-mode #messageForm.composer,
  body.nox-device-phone.nox-mobile-writing-mode #messageForm.composer {
    grid-template-columns: 38px minmax(0, 1fr) 72px !important;
    gap: 6px !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode #messageForm.composer .media-upload-btn,
  body.nox-shell-android-capacitor.nox-mobile-writing-mode #messageForm.composer .attach-btn,
  body.nox-android-app.nox-mobile-writing-mode #messageForm.composer .media-upload-btn,
  body.nox-android-app.nox-mobile-writing-mode #messageForm.composer .attach-btn,
  body.nox-device-phone.nox-mobile-writing-mode #messageForm.composer .media-upload-btn,
  body.nox-device-phone.nox-mobile-writing-mode #messageForm.composer .attach-btn {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 13px !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode #messageInput,
  body.nox-android-app.nox-mobile-writing-mode #messageInput,
  body.nox-device-phone.nox-mobile-writing-mode #messageInput {
    min-height: 38px !important;
    max-height: 78px !important;
    padding: 8px 10px !important;
    font-size: .92rem !important;
    border-radius: 13px !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode #messageForm.composer button[type="submit"],
  body.nox-android-app.nox-mobile-writing-mode #messageForm.composer button[type="submit"],
  body.nox-device-phone.nox-mobile-writing-mode #messageForm.composer button[type="submit"] {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
    font-size: .78rem !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-writing-mode .mobile-nav,
  body.nox-shell-android-capacitor.nox-mobile-writing-mode .nox-mobile-bottom-dock,
  body.nox-android-app.nox-mobile-writing-mode .mobile-nav,
  body.nox-android-app.nox-mobile-writing-mode .nox-mobile-bottom-dock,
  body.nox-device-phone.nox-mobile-writing-mode .mobile-nav,
  body.nox-device-phone.nox-mobile-writing-mode .nox-mobile-bottom-dock {
    opacity: .18 !important;
    transform: translateY(10px) scale(.96) !important;
    pointer-events: none !important;
    max-height: 8px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
  }
}


/* ======================================================================
   NOX v5.1.26 - Android Keyboard Chat Tighten
   Full conversation focus while Android keyboard is open.
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight,
  body.nox-android-app.nox-mobile-keyboard-tight,
  body.nox-device-phone.nox-mobile-keyboard-tight {
    --nox-mobile-dock-height: 0px !important;
    --nox-mobile-nav-height: 0px !important;
    --nox-mobile-keyboard-composer-h: 50px !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight #appView.app-shell,
  body.nox-android-app.nox-mobile-keyboard-tight #appView.app-shell,
  body.nox-device-phone.nox-mobile-keyboard-tight #appView.app-shell {
    gap: 3px !important;
    padding: max(4px, env(safe-area-inset-top)) 6px 0 6px !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight #mobileTopbar .mobile-nav,
  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .nox-mobile-bottom-dock,
  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .mobile-nav,
  body.nox-android-app.nox-mobile-keyboard-tight #mobileTopbar .mobile-nav,
  body.nox-android-app.nox-mobile-keyboard-tight .nox-mobile-bottom-dock,
  body.nox-android-app.nox-mobile-keyboard-tight .mobile-nav,
  body.nox-device-phone.nox-mobile-keyboard-tight #mobileTopbar .mobile-nav,
  body.nox-device-phone.nox-mobile-keyboard-tight .nox-mobile-bottom-dock,
  body.nox-device-phone.nox-mobile-keyboard-tight .mobile-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .chat-panel,
  body.nox-android-app.nox-mobile-keyboard-tight .chat-panel,
  body.nox-device-phone.nox-mobile-keyboard-tight .chat-panel {
    height: calc(var(--nox-vvh, 100vh) - max(6px, env(safe-area-inset-top))) !important;
    max-height: calc(var(--nox-vvh, 100vh) - max(6px, env(safe-area-inset-top))) !important;
    min-height: 0 !important;
    gap: 3px !important;
    padding: 5px 6px 0 !important;
    border-radius: 18px !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .chat-header,
  body.nox-android-app.nox-mobile-keyboard-tight .chat-header,
  body.nox-device-phone.nox-mobile-keyboard-tight .chat-header {
    padding: 5px 8px 4px !important;
    border-radius: 13px !important;
    min-height: 0 !important;
    max-height: 42px !important;
    display: grid !important;
    align-content: center !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .channel-kicker,
  body.nox-android-app.nox-mobile-keyboard-tight .channel-kicker,
  body.nox-device-phone.nox-mobile-keyboard-tight .channel-kicker {
    font-size: .46rem !important;
    line-height: .9 !important;
    letter-spacing: .12em !important;
    margin: 0 0 1px !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .chat-header h2,
  body.nox-android-app.nox-mobile-keyboard-tight .chat-header h2,
  body.nox-device-phone.nox-mobile-keyboard-tight .chat-header h2 {
    font-size: .94rem !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .chat-header p,
  body.nox-android-app.nox-mobile-keyboard-tight .chat-header p,
  body.nox-device-phone.nox-mobile-keyboard-tight .chat-header p,
  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .chat-header-actions,
  body.nox-android-app.nox-mobile-keyboard-tight .chat-header-actions,
  body.nox-device-phone.nox-mobile-keyboard-tight .chat-header-actions,
  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .nox-presence-stack,
  body.nox-android-app.nox-mobile-keyboard-tight .nox-presence-stack,
  body.nox-device-phone.nox-mobile-keyboard-tight .nox-presence-stack,
  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .presence-radar,
  body.nox-android-app.nox-mobile-keyboard-tight .presence-radar,
  body.nox-device-phone.nox-mobile-keyboard-tight .presence-radar,
  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .chat-presence-bar,
  body.nox-android-app.nox-mobile-keyboard-tight .chat-presence-bar,
  body.nox-device-phone.nox-mobile-keyboard-tight .chat-presence-bar {
    display: none !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .mobile-chat-context-header,
  body.nox-android-app.nox-mobile-keyboard-tight .mobile-chat-context-header,
  body.nox-device-phone.nox-mobile-keyboard-tight .mobile-chat-context-header {
    min-height: 32px !important;
    max-height: 34px !important;
    margin: 0 0 2px !important;
    padding: 3px 5px 3px 8px !important;
    border-radius: 12px !important;
    gap: 4px !important;
    align-items: center !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .mobile-context-main,
  body.nox-android-app.nox-mobile-keyboard-tight .mobile-context-main,
  body.nox-device-phone.nox-mobile-keyboard-tight .mobile-context-main {
    padding: 0 !important;
    min-height: 0 !important;
    gap: 0 !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .mobile-context-kicker,
  body.nox-android-app.nox-mobile-keyboard-tight .mobile-context-kicker,
  body.nox-device-phone.nox-mobile-keyboard-tight .mobile-context-kicker,
  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .mobile-context-main small,
  body.nox-android-app.nox-mobile-keyboard-tight .mobile-context-main small,
  body.nox-device-phone.nox-mobile-keyboard-tight .mobile-context-main small {
    display: none !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .mobile-context-main strong,
  body.nox-android-app.nox-mobile-keyboard-tight .mobile-context-main strong,
  body.nox-device-phone.nox-mobile-keyboard-tight .mobile-context-main strong {
    font-size: .86rem !important;
    line-height: 1 !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .mobile-context-change,
  body.nox-android-app.nox-mobile-keyboard-tight .mobile-context-change,
  body.nox-device-phone.nox-mobile-keyboard-tight .mobile-context-change {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: .70rem !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight #messages,
  body.nox-android-app.nox-mobile-keyboard-tight #messages,
  body.nox-device-phone.nox-mobile-keyboard-tight #messages {
    min-height: 0 !important;
    height: auto !important;
    padding: 3px 6px 4px !important;
    gap: 4px !important;
    scroll-padding-bottom: 52px !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .msg,
  body.nox-android-app.nox-mobile-keyboard-tight .msg,
  body.nox-device-phone.nox-mobile-keyboard-tight .msg {
    padding: 6px 7px !important;
    border-radius: 12px !important;
    gap: 6px !important;
    min-height: 0 !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .msg-avatar,
  body.nox-android-app.nox-mobile-keyboard-tight .msg-avatar,
  body.nox-device-phone.nox-mobile-keyboard-tight .msg-avatar {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    border-radius: 9px !important;
    font-size: .66rem !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .msg-meta,
  body.nox-android-app.nox-mobile-keyboard-tight .msg-meta,
  body.nox-device-phone.nox-mobile-keyboard-tight .msg-meta {
    margin: 0 0 1px !important;
    font-size: .62rem !important;
    line-height: 1.05 !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .msg-content,
  body.nox-android-app.nox-mobile-keyboard-tight .msg-content,
  body.nox-device-phone.nox-mobile-keyboard-tight .msg-content {
    font-size: .86rem !important;
    line-height: 1.22 !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .msg-reactions,
  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .msg-actions,
  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .reply-btn,
  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .reaction-btn,
  body.nox-android-app.nox-mobile-keyboard-tight .msg-reactions,
  body.nox-android-app.nox-mobile-keyboard-tight .msg-actions,
  body.nox-android-app.nox-mobile-keyboard-tight .reply-btn,
  body.nox-android-app.nox-mobile-keyboard-tight .reaction-btn,
  body.nox-device-phone.nox-mobile-keyboard-tight .msg-reactions,
  body.nox-device-phone.nox-mobile-keyboard-tight .msg-actions,
  body.nox-device-phone.nox-mobile-keyboard-tight .reply-btn,
  body.nox-device-phone.nox-mobile-keyboard-tight .reaction-btn {
    display: none !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .emoji-strip,
  body.nox-android-app.nox-mobile-keyboard-tight .emoji-strip,
  body.nox-device-phone.nox-mobile-keyboard-tight .emoji-strip {
    display: none !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight .composer-wrap,
  body.nox-android-app.nox-mobile-keyboard-tight .composer-wrap,
  body.nox-device-phone.nox-mobile-keyboard-tight .composer-wrap {
    padding: 4px 6px 5px !important;
    margin: 0 !important;
    border-radius: 0 0 14px 14px !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight #messageForm.composer,
  body.nox-android-app.nox-mobile-keyboard-tight #messageForm.composer,
  body.nox-device-phone.nox-mobile-keyboard-tight #messageForm.composer {
    grid-template-columns: 36px minmax(0, 1fr) 68px !important;
    gap: 5px !important;
    align-items: end !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight #messageInput,
  body.nox-android-app.nox-mobile-keyboard-tight #messageInput,
  body.nox-device-phone.nox-mobile-keyboard-tight #messageInput {
    min-height: 36px !important;
    max-height: 68px !important;
    padding: 7px 9px !important;
    font-size: .88rem !important;
    line-height: 1.2 !important;
    border-radius: 12px !important;
  }

  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight #messageForm.composer .media-upload-btn,
  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight #messageForm.composer .attach-btn,
  body.nox-android-app.nox-mobile-keyboard-tight #messageForm.composer .media-upload-btn,
  body.nox-android-app.nox-mobile-keyboard-tight #messageForm.composer .attach-btn,
  body.nox-device-phone.nox-mobile-keyboard-tight #messageForm.composer .media-upload-btn,
  body.nox-device-phone.nox-mobile-keyboard-tight #messageForm.composer .attach-btn,
  body.nox-shell-android-capacitor.nox-mobile-keyboard-tight #messageForm.composer button[type="submit"],
  body.nox-android-app.nox-mobile-keyboard-tight #messageForm.composer button[type="submit"],
  body.nox-device-phone.nox-mobile-keyboard-tight #messageForm.composer button[type="submit"] {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
  }
}

/* =========================================================
   NOX v5.1.27 - Android Chat Bubble & Layout Normalize
   Mobile-only translation of the calmer desktop bubble UX:
   tighter bubbles, compact actions, stable messages height and
   no overlapping chat/context chrome in channel/group views.
   ========================================================= */
@media (max-width: 820px) {
  body.nox-mobile,
  body.nox-phone,
  body.nox-android-app,
  body.nox-shell-android-capacitor {
    --nox-mobile-chat-gap: 5px;
    --nox-mobile-bubble-pad-y: 7px;
    --nox-mobile-bubble-pad-x: 8px;
    --nox-mobile-bubble-radius: 13px;
    --nox-mobile-avatar: 28px;
  }

  body.nox-mobile .chat-panel,
  body.nox-phone .chat-panel,
  body.nox-android-app .chat-panel,
  body.nox-shell-android-capacitor .chat-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    gap: 6px !important;
  }

  body.nox-mobile .chat-header,
  body.nox-phone .chat-header,
  body.nox-android-app .chat-header,
  body.nox-shell-android-capacitor .chat-header {
    position: relative !important;
    z-index: 2 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.nox-mobile .mobile-chat-context-header,
  body.nox-phone .mobile-chat-context-header,
  body.nox-android-app .mobile-chat-context-header,
  body.nox-shell-android-capacitor .mobile-chat-context-header {
    position: relative !important;
    z-index: 2 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 7px 8px 7px 10px !important;
    border-radius: 15px !important;
    gap: 8px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  body.nox-mobile .mobile-context-main,
  body.nox-phone .mobile-context-main,
  body.nox-android-app .mobile-context-main,
  body.nox-shell-android-capacitor .mobile-context-main {
    min-width: 0 !important;
    gap: 1px !important;
  }

  body.nox-mobile .mobile-context-main strong,
  body.nox-phone .mobile-context-main strong,
  body.nox-android-app .mobile-context-main strong,
  body.nox-shell-android-capacitor .mobile-context-main strong {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.nox-mobile .mobile-context-main small,
  body.nox-phone .mobile-context-main small,
  body.nox-android-app .mobile-context-main small,
  body.nox-shell-android-capacitor .mobile-context-main small {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }

  body.nox-mobile #messages,
  body.nox-phone #messages,
  body.nox-android-app #messages,
  body.nox-shell-android-capacitor #messages {
    min-height: 180px !important;
    height: auto !important;
    padding: 8px 8px 10px !important;
    gap: var(--nox-mobile-chat-gap) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scroll-padding-bottom: 72px !important;
  }

  body.nox-mobile .messages > article.msg,
  body.nox-phone .messages > article.msg,
  body.nox-android-app .messages > article.msg,
  body.nox-shell-android-capacitor .messages > article.msg {
    width: min(94%, 520px) !important;
    max-width: min(94%, 520px) !important;
    min-width: 0 !important;
    padding: var(--nox-mobile-bubble-pad-y) var(--nox-mobile-bubble-pad-x) !important;
    border-radius: var(--nox-mobile-bubble-radius) !important;
    gap: 7px !important;
    grid-template-columns: var(--nox-mobile-avatar) minmax(0, 1fr) !important;
    align-items: start !important;
    min-height: 0 !important;
    margin-block: 0 !important;
    box-sizing: border-box !important;
  }

  body.nox-mobile .messages > article.msg.own,
  body.nox-phone .messages > article.msg.own,
  body.nox-android-app .messages > article.msg.own,
  body.nox-shell-android-capacitor .messages > article.msg.own {
    width: min(90%, 500px) !important;
    max-width: min(90%, 500px) !important;
    margin-left: auto !important;
  }

  body.nox-mobile .msg-avatar,
  body.nox-phone .msg-avatar,
  body.nox-android-app .msg-avatar,
  body.nox-shell-android-capacitor .msg-avatar {
    width: var(--nox-mobile-avatar) !important;
    height: var(--nox-mobile-avatar) !important;
    min-width: var(--nox-mobile-avatar) !important;
    border-radius: 10px !important;
    font-size: .66rem !important;
  }

  body.nox-mobile .msg-main,
  body.nox-phone .msg-main,
  body.nox-android-app .msg-main,
  body.nox-shell-android-capacitor .msg-main {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
    padding: 0 !important;
  }

  body.nox-mobile .msg-meta,
  body.nox-phone .msg-meta,
  body.nox-android-app .msg-meta,
  body.nox-shell-android-capacitor .msg-meta {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: .63rem !important;
    line-height: 1.08 !important;
  }

  body.nox-mobile .msg-meta > span,
  body.nox-phone .msg-meta > span,
  body.nox-android-app .msg-meta > span,
  body.nox-shell-android-capacitor .msg-meta > span {
    min-width: 0 !important;
  }

  body.nox-mobile .msg-author,
  body.nox-phone .msg-author,
  body.nox-android-app .msg-author,
  body.nox-shell-android-capacitor .msg-author {
    max-width: 44vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.nox-mobile .msg-time,
  body.nox-phone .msg-time,
  body.nox-android-app .msg-time,
  body.nox-shell-android-capacitor .msg-time {
    margin-left: auto !important;
    opacity: .74 !important;
  }

  body.nox-mobile .msg-content,
  body.nox-phone .msg-content,
  body.nox-android-app .msg-content,
  body.nox-shell-android-capacitor .msg-content {
    font-size: .88rem !important;
    line-height: 1.24 !important;
    margin: 1px 0 0 !important;
    word-break: break-word !important;
  }

  body.nox-mobile .msg-reply-preview,
  body.nox-phone .msg-reply-preview,
  body.nox-android-app .msg-reply-preview,
  body.nox-shell-android-capacitor .msg-reply-preview {
    margin: 1px 0 2px !important;
    padding: 5px 7px !important;
    border-radius: 10px !important;
    font-size: .72rem !important;
    line-height: 1.15 !important;
  }

  body.nox-mobile .msg-reactions.compact,
  body.nox-phone .msg-reactions.compact,
  body.nox-android-app .msg-reactions.compact,
  body.nox-shell-android-capacitor .msg-reactions.compact {
    min-height: 0 !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    gap: 3px !important;
  }

  body.nox-mobile .reaction-summary,
  body.nox-phone .reaction-summary,
  body.nox-android-app .reaction-summary,
  body.nox-shell-android-capacitor .reaction-summary {
    min-height: 0 !important;
    gap: 3px !important;
    flex-wrap: wrap !important;
  }

  body.nox-mobile .reaction-summary-btn,
  body.nox-mobile .reaction-menu-toggle,
  body.nox-mobile .msg-reply-btn,
  body.nox-phone .reaction-summary-btn,
  body.nox-phone .reaction-menu-toggle,
  body.nox-phone .msg-reply-btn,
  body.nox-android-app .reaction-summary-btn,
  body.nox-android-app .reaction-menu-toggle,
  body.nox-android-app .msg-reply-btn,
  body.nox-shell-android-capacitor .reaction-summary-btn,
  body.nox-shell-android-capacitor .reaction-menu-toggle,
  body.nox-shell-android-capacitor .msg-reply-btn {
    min-width: 24px !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    font-size: .70rem !important;
    line-height: 1 !important;
  }

  body.nox-mobile .msg-action-rail,
  body.nox-phone .msg-action-rail,
  body.nox-android-app .msg-action-rail,
  body.nox-shell-android-capacitor .msg-action-rail {
    right: 6px !important;
    top: 5px !important;
    gap: 3px !important;
    opacity: .72 !important;
    transform: scale(.86) !important;
    transform-origin: top right !important;
  }

  body.nox-mobile .attachments,
  body.nox-phone .attachments,
  body.nox-android-app .attachments,
  body.nox-shell-android-capacitor .attachments {
    gap: 5px !important;
    margin-top: 4px !important;
  }
}

@media (max-width: 820px) {
  body.nox-mobile-keyboard-tight #messages,
  body.nox-mobile-writing-mode #messages,
  body.nox-chat-input-focused #messages {
    min-height: 220px !important;
    padding: 5px 7px 7px !important;
    gap: 4px !important;
    scroll-padding-bottom: 48px !important;
  }

  body.nox-mobile-keyboard-tight .messages > article.msg,
  body.nox-mobile-writing-mode .messages > article.msg,
  body.nox-chat-input-focused .messages > article.msg {
    padding: 5px 7px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    grid-template-columns: 25px minmax(0, 1fr) !important;
  }

  body.nox-mobile-keyboard-tight .msg-avatar,
  body.nox-mobile-writing-mode .msg-avatar,
  body.nox-chat-input-focused .msg-avatar {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    border-radius: 9px !important;
  }

  body.nox-mobile-keyboard-tight .msg-meta,
  body.nox-mobile-writing-mode .msg-meta,
  body.nox-chat-input-focused .msg-meta {
    font-size: .59rem !important;
    gap: 4px !important;
  }

  body.nox-mobile-keyboard-tight .msg-meta > span:nth-child(2),
  body.nox-mobile-writing-mode .msg-meta > span:nth-child(2),
  body.nox-chat-input-focused .msg-meta > span:nth-child(2),
  body.nox-mobile-keyboard-tight .msg-edited,
  body.nox-mobile-writing-mode .msg-edited,
  body.nox-chat-input-focused .msg-edited {
    display: none !important;
  }

  body.nox-mobile-keyboard-tight .msg-content,
  body.nox-mobile-writing-mode .msg-content,
  body.nox-chat-input-focused .msg-content {
    font-size: .84rem !important;
    line-height: 1.18 !important;
  }

  body.nox-mobile-keyboard-tight .msg-reactions.compact,
  body.nox-mobile-keyboard-tight .msg-action-rail,
  body.nox-mobile-keyboard-tight .reaction-menu-toggle,
  body.nox-mobile-keyboard-tight .msg-reply-btn {
    display: none !important;
  }

  body.nox-mobile-keyboard-tight .chat-panel,
  body.nox-mobile-writing-mode .chat-panel {
    grid-template-rows: auto auto minmax(220px, 1fr) auto !important;
  }

  body.nox-mobile-keyboard-tight .mobile-chat-context-header {
    max-height: 30px !important;
    min-height: 30px !important;
    padding: 3px 5px 3px 8px !important;
  }

  body.nox-mobile-keyboard-tight .mobile-context-main small,
  body.nox-mobile-keyboard-tight .mobile-context-kicker {
    display: none !important;
  }
}


/* =========================================================
   NOX v5.1.28 - Android Message Action Overlay
   Mobile: reply/reaction controls appear on tap/long-press and do not
   reserve space inside every message bubble. Desktop remains unchanged.
   ========================================================= */
@media (max-width: 820px) {
  body.nox-mobile .messages > article.msg,
  body.nox-phone .messages > article.msg,
  body.nox-android-app .messages > article.msg,
  body.nox-shell-android-capacitor .messages > article.msg {
    position: relative !important;
    overflow: visible !important;
    padding: 7px 8px !important;
    padding-right: 8px !important;
    gap: 6px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    width: min(96%, 520px) !important;
    max-width: min(96%, 520px) !important;
    touch-action: pan-y !important;
  }

  body.nox-mobile .messages > article.msg.own,
  body.nox-phone .messages > article.msg.own,
  body.nox-android-app .messages > article.msg.own,
  body.nox-shell-android-capacitor .messages > article.msg.own {
    width: min(94%, 500px) !important;
    max-width: min(94%, 500px) !important;
  }

  body.nox-mobile .msg-avatar,
  body.nox-phone .msg-avatar,
  body.nox-android-app .msg-avatar,
  body.nox-shell-android-capacitor .msg-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 10px !important;
  }

  body.nox-mobile .msg-main,
  body.nox-phone .msg-main,
  body.nox-android-app .msg-main,
  body.nox-shell-android-capacitor .msg-main {
    gap: 2px !important;
    padding: 0 !important;
    padding-right: 0 !important;
  }

  body.nox-mobile .msg-meta,
  body.nox-phone .msg-meta,
  body.nox-android-app .msg-meta,
  body.nox-shell-android-capacitor .msg-meta {
    font-size: .60rem !important;
    line-height: 1.05 !important;
    gap: 4px !important;
    margin-bottom: 0 !important;
  }

  body.nox-mobile .msg-content,
  body.nox-phone .msg-content,
  body.nox-android-app .msg-content,
  body.nox-shell-android-capacitor .msg-content {
    font-size: .86rem !important;
    line-height: 1.18 !important;
    margin-top: 1px !important;
  }

  body.nox-mobile .msg-action-rail,
  body.nox-phone .msg-action-rail,
  body.nox-android-app .msg-action-rail,
  body.nox-shell-android-capacitor .msg-action-rail {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) scale(.96) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 30 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .12s ease, transform .12s ease !important;
  }

  body.nox-mobile .msg.nox-msg-actions-active .msg-action-rail,
  body.nox-phone .msg.nox-msg-actions-active .msg-action-rail,
  body.nox-android-app .msg.nox-msg-actions-active .msg-action-rail,
  body.nox-shell-android-capacitor .msg.nox-msg-actions-active .msg-action-rail {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(-50%) scale(1) !important;
  }

  body.nox-mobile .msg-action-rail button,
  body.nox-phone .msg-action-rail button,
  body.nox-android-app .msg-action-rail button,
  body.nox-shell-android-capacitor .msg-action-rail button {
    width: 31px !important;
    min-width: 31px !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(7, 12, 24, .96) !important;
    border: 1px solid rgba(45, 212, 191, .36) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.36), 0 0 12px rgba(45,212,191,.10) !important;
    font-size: .86rem !important;
    color: rgba(226, 232, 240, .96) !important;
  }

  body.nox-mobile .msg-reactions.compact,
  body.nox-phone .msg-reactions.compact,
  body.nox-android-app .msg-reactions.compact,
  body.nox-shell-android-capacitor .msg-reactions.compact {
    margin: 2px 0 0 !important;
    min-height: 0 !important;
  }

  body.nox-mobile .msg-reactions.compact:not(.has-summary),
  body.nox-phone .msg-reactions.compact:not(.has-summary),
  body.nox-android-app .msg-reactions.compact:not(.has-summary),
  body.nox-shell-android-capacitor .msg-reactions.compact:not(.has-summary) {
    display: none !important;
  }

  body.nox-mobile .reaction-summary-btn,
  body.nox-phone .reaction-summary-btn,
  body.nox-android-app .reaction-summary-btn,
  body.nox-shell-android-capacitor .reaction-summary-btn {
    min-width: 25px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 6px !important;
    font-size: .68rem !important;
  }

  body.nox-mobile-keyboard-tight .msg-action-rail,
  body.nox-mobile-writing-mode .msg-action-rail,
  body.nox-chat-input-focused .msg-action-rail,
  body.nox-mobile-keyboard-tight .msg-reactions.compact:not(.has-summary),
  body.nox-mobile-writing-mode .msg-reactions.compact:not(.has-summary),
  body.nox-chat-input-focused .msg-reactions.compact:not(.has-summary) {
    display: none !important;
  }

  body.nox-mobile .msg.nox-msg-actions-active,
  body.nox-phone .msg.nox-msg-actions-active,
  body.nox-android-app .msg.nox-msg-actions-active,
  body.nox-shell-android-capacitor .msg.nox-msg-actions-active {
    border-color: rgba(94, 234, 212, .42) !important;
    box-shadow: 0 0 0 1px rgba(45, 212, 191, .10), 0 14px 34px rgba(0,0,0,.20) !important;
  }
}

/* =========================================================
   NOX v5.1.29 - Android Message Actions Reaction Fix
   Mobile: one action sheet for reply/reactions/copy. Message bubbles stay clean.
   ========================================================= */
@media (max-width: 820px) {
  body.nox-mobile .msg-action-rail,
  body.nox-phone .msg-action-rail,
  body.nox-android-app .msg-action-rail,
  body.nox-shell-android-capacitor .msg-action-rail {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.nox-mobile .messages > article.msg,
  body.nox-phone .messages > article.msg,
  body.nox-android-app .messages > article.msg,
  body.nox-shell-android-capacitor .messages > article.msg {
    padding: 6px 8px !important;
    gap: 5px !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
  }

  body.nox-mobile .msg-main,
  body.nox-phone .msg-main,
  body.nox-android-app .msg-main,
  body.nox-shell-android-capacitor .msg-main {
    gap: 1px !important;
  }

  body.nox-mobile .msg-content,
  body.nox-phone .msg-content,
  body.nox-android-app .msg-content,
  body.nox-shell-android-capacitor .msg-content {
    margin-top: 0 !important;
    line-height: 1.16 !important;
  }

  body.nox-mobile .msg.nox-msg-actions-active,
  body.nox-phone .msg.nox-msg-actions-active,
  body.nox-android-app .msg.nox-msg-actions-active,
  body.nox-shell-android-capacitor .msg.nox-msg-actions-active {
    border-color: rgba(94, 234, 212, .34) !important;
    box-shadow: 0 0 0 1px rgba(45, 212, 191, .08), 0 10px 24px rgba(0,0,0,.18) !important;
  }

  .nox-mobile-message-action-menu.hidden {
    display: none !important;
  }

  .nox-mobile-message-action-menu {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    display: block !important;
    pointer-events: auto !important;
  }

  .nox-mobile-message-action-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, .42) !important;
    backdrop-filter: blur(4px) !important;
  }

  .nox-mobile-message-action-sheet {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    display: grid !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(45, 212, 191, .24) !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(5, 10, 22, .98)) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset !important;
  }

  .nox-mobile-message-action-handle {
    width: 42px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(148, 163, 184, .42) !important;
    justify-self: center !important;
    margin-top: 1px !important;
  }

  .nox-mobile-message-action-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .nox-mobile-message-action-head strong,
  .nox-mobile-message-action-head span {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .nox-mobile-message-action-head strong {
    font-size: .82rem !important;
    color: rgba(226, 232, 240, .98) !important;
  }

  .nox-mobile-message-action-head span {
    margin-top: 2px !important;
    font-size: .72rem !important;
    color: rgba(148, 163, 184, .88) !important;
  }

  .nox-mobile-message-action-close {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    background: rgba(15, 23, 42, .92) !important;
    color: rgba(226, 232, 240, .92) !important;
    font-size: 1.1rem !important;
  }

  .nox-mobile-message-action-primary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .nox-mobile-message-action-primary button {
    min-height: 40px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(45, 212, 191, .22) !important;
    background: rgba(8, 15, 31, .96) !important;
    color: rgba(226, 232, 240, .95) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-weight: 800 !important;
  }

  .nox-mobile-message-action-primary button span {
    font-size: .78rem !important;
  }

  .nox-mobile-message-action-reactions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 4px !important;
    border-radius: 17px !important;
    background: rgba(2, 6, 23, .46) !important;
    border: 1px solid rgba(148, 163, 184, .12) !important;
  }

  .nox-mobile-message-action-reactions .nox-mobile-action-reaction-btn,
  .nox-mobile-message-action-reactions .reaction-more-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(45, 212, 191, .18) !important;
    background: rgba(15, 23, 42, .86) !important;
    color: rgba(226, 232, 240, .98) !important;
    font-size: 1.02rem !important;
  }

  .nox-mobile-message-action-reactions .nox-mobile-action-reaction-btn.active {
    background: rgba(45, 212, 191, .20) !important;
    border-color: rgba(45, 212, 191, .52) !important;
  }

  .nox-mobile-message-action-reactions .nox-mobile-action-reaction-btn.pending {
    opacity: .62 !important;
    transform: scale(.96) !important;
  }
}


/* NOX v5.1.30 - Android Message Actions Reaction Fix */
@media (max-width: 720px) {
  body.nox-mobile .nox-mobile-message-action-reactions,
  body.nox-phone .nox-mobile-message-action-reactions,
  body.nox-android-app .nox-mobile-message-action-reactions,
  body.nox-shell-android-capacitor .nox-mobile-message-action-reactions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  body.nox-mobile .nox-mobile-message-action-reactions .nox-mobile-action-reaction-btn,
  body.nox-phone .nox-mobile-message-action-reactions .nox-mobile-action-reaction-btn,
  body.nox-android-app .nox-mobile-message-action-reactions .nox-mobile-action-reaction-btn,
  body.nox-shell-android-capacitor .nox-mobile-message-action-reactions .nox-mobile-action-reaction-btn,
  body.nox-mobile .nox-mobile-message-action-reactions .reaction-more-btn,
  body.nox-phone .nox-mobile-message-action-reactions .reaction-more-btn,
  body.nox-android-app .nox-mobile-message-action-reactions .reaction-more-btn,
  body.nox-shell-android-capacitor .nox-mobile-message-action-reactions .reaction-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    font-size: 1.18rem !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    touch-action: manipulation !important;
  }

  body.nox-mobile-keyboard-tight .nox-mobile-message-action-reactions .nox-mobile-action-reaction-btn,
  body.nox-mobile-keyboard-tight .nox-mobile-message-action-reactions .reaction-more-btn {
    display: inline-flex !important;
  }
}

/* NOX v5.1.31 - Android Text Chats Home */
.mobile-text-chats-home { display: none; }
@media (max-width: 920px) {
  body.nox-phone .app-shell.mobile-view-chats .channel-sidebar,
  body.nox-phone .app-shell.mobile-view-chats .chat-panel,
  body.nox-phone .app-shell.mobile-view-chats .info-panel,
  body.nox-mobile .app-shell.mobile-view-chats .channel-sidebar,
  body.nox-mobile .app-shell.mobile-view-chats .chat-panel,
  body.nox-mobile .app-shell.mobile-view-chats .info-panel {
    display: none !important;
  }
  body.nox-phone .app-shell.mobile-view-chats .mobile-text-chats-home,
  body.nox-mobile .app-shell.mobile-view-chats .mobile-text-chats-home {
    display: grid !important;
  }
  body.nox-phone .mobile-text-chats-home,
  body.nox-mobile .mobile-text-chats-home {
    min-height: 0;
    height: 100%;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
    padding: 12px;
    border-radius: 24px;
    border: 1px solid rgba(45, 212, 191, .16);
    background: linear-gradient(180deg, rgba(12, 16, 38, .96), rgba(5, 8, 24, .96));
    box-shadow: 0 18px 60px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
  }
  body.nox-phone .mobile-chats-hero,
  body.nox-mobile .mobile-chats-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 2px; }
  body.nox-phone .mobile-chats-hero span,
  body.nox-mobile .mobile-chats-hero span { display: block; color: rgba(45, 212, 191, .92); letter-spacing: .14em; text-transform: uppercase; font-weight: 1000; font-size: .66rem; }
  body.nox-phone .mobile-chats-hero h2,
  body.nox-mobile .mobile-chats-hero h2 { margin: 2px 0 2px; font-size: 1.42rem; line-height: 1; }
  body.nox-phone .mobile-chats-hero p,
  body.nox-mobile .mobile-chats-hero p { margin: 0; color: rgba(148, 163, 184, .86); font-size: .82rem; }
  body.nox-phone .mobile-chats-refresh,
  body.nox-mobile .mobile-chats-refresh { width: 42px; height: 42px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.055); color: rgba(226,232,240,.96); font-weight: 1000; }
  body.nox-phone .mobile-chats-search-wrap input,
  body.nox-mobile .mobile-chats-search-wrap input { width: 100%; min-height: 42px; border-radius: 16px; border: 1px solid rgba(255,255,255,.09); background: rgba(2,6,23,.46); color: rgba(226,232,240,.98); padding: 0 14px; outline: none; }
  body.nox-phone .mobile-chats-quick-actions,
  body.nox-mobile .mobile-chats-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.nox-phone .mobile-chats-quick-actions button,
  body.nox-mobile .mobile-chats-quick-actions button { min-height: 38px; border: 1px solid rgba(45, 212, 191, .18); border-radius: 15px; background: rgba(45, 212, 191, .07); color: rgba(226,232,240,.96); font-weight: 900; }
  body.nox-phone .mobile-text-chats-list,
  body.nox-mobile .mobile-text-chats-list { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 8px; padding: 2px 2px 92px; }
  body.nox-phone .mobile-chat-row,
  body.nox-mobile .mobile-chat-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-radius: 18px; border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.042); color: inherit; text-align: left; min-height: 64px; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
  body.nox-phone .mobile-chat-row.active,
  body.nox-mobile .mobile-chat-row.active { border-color: rgba(45, 212, 191, .34); background: linear-gradient(135deg, rgba(45,212,191,.12), rgba(139,92,246,.08)); }
  body.nox-phone .mobile-chat-row.unread,
  body.nox-mobile .mobile-chat-row.unread { border-color: rgba(251,191,36,.34); background: linear-gradient(135deg, rgba(251,191,36,.10), rgba(45,212,191,.06)); }
  body.nox-phone .mobile-chat-avatar,
  body.nox-mobile .mobile-chat-avatar { width: 42px; height: 42px; border-radius: 16px; display: grid; place-items: center; font-weight: 1000; font-size: .82rem; color: #071014; background: linear-gradient(135deg, #2dd4bf, #a78bfa); }
  body.nox-phone .mobile-chat-avatar.channel,
  body.nox-mobile .mobile-chat-avatar.channel { color: rgba(226,232,240,.98); background: rgba(139,92,246,.22); border: 1px solid rgba(139,92,246,.28); }
  body.nox-phone .mobile-chat-copy,
  body.nox-mobile .mobile-chat-copy { min-width: 0; display: grid; gap: 3px; }
  body.nox-phone .mobile-chat-line,
  body.nox-mobile .mobile-chat-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
  body.nox-phone .mobile-chat-line strong,
  body.nox-mobile .mobile-chat-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .96rem; }
  body.nox-phone .mobile-chat-line em,
  body.nox-mobile .mobile-chat-line em { margin-left: auto; color: rgba(148,163,184,.78); font-size: .72rem; font-style: normal; }
  body.nox-phone .mobile-chat-copy small,
  body.nox-mobile .mobile-chat-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(148,163,184,.86); font-size: .78rem; }
  body.nox-phone .mobile-chat-copy small b,
  body.nox-mobile .mobile-chat-copy small b { color: rgba(45,212,191,.9); font-weight: 900; margin-right: 5px; }
  body.nox-phone .mobile-chat-unread,
  body.nox-mobile .mobile-chat-unread { width: 10px; height: 10px; border-radius: 999px; background: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,.12); }
  body.nox-phone .mobile-chats-empty,
  body.nox-mobile .mobile-chats-empty { display: grid; gap: 4px; place-items: center; min-height: 180px; border: 1px dashed rgba(255,255,255,.14); border-radius: 20px; color: rgba(148,163,184,.85); text-align: center; padding: 20px; }
  body.nox-phone .mobile-chat-back-btn,
  body.nox-mobile .mobile-chat-back-btn { align-self: stretch; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.055); color: rgba(226,232,240,.96); border-radius: 14px; padding: 0 10px; font-weight: 900; white-space: nowrap; }
  body.nox-phone .mobile-chat-context,
  body.nox-mobile .mobile-chat-context { grid-template-columns: auto minmax(0, 1fr) auto; }
  body.nox-phone .mobile-nav,
  body.nox-mobile .mobile-nav { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.nox-phone .mobile-nav-btn span,
  body.nox-mobile .mobile-nav-btn span { display: block; font-size: .64rem; margin-top: 1px; }
}


/* NOX v5.1.32b - Android Mobile Shell Simplify Safe
   Active only after login via .nox-mobile-shell-simplified-safe. */
@media (max-width: 920px) {
  body.nox-mobile-shell-simplified-safe.nox-android-app .mobile-topbar,
  body.nox-mobile-shell-simplified-safe.nox-shell-android-capacitor .mobile-topbar,
  html.nox-mobile-shell-simplified-safe body .mobile-topbar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.nox-mobile-shell-simplified-safe .nox-presence-stack,
  body.nox-mobile-shell-simplified-safe .presence-radar,
  body.nox-mobile-shell-simplified-safe .chat-presence-bar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.nox-mobile-shell-simplified-safe .chat-panel {
    gap: 8px !important;
  }

  body.nox-mobile-shell-simplified-safe .mobile-chat-context-header {
    min-height: 44px !important;
    padding: 6px 8px !important;
    border-radius: 16px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(8, 13, 31, .84) !important;
    border-color: rgba(45, 212, 191, .16) !important;
  }

  body.nox-mobile-shell-simplified-safe .mobile-chat-back-btn {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: .78rem !important;
  }

  body.nox-mobile-shell-simplified-safe .mobile-context-kicker,
  body.nox-mobile-shell-simplified-safe .mobile-context-main small {
    display: none !important;
  }

  body.nox-mobile-shell-simplified-safe .mobile-context-main {
    gap: 0 !important;
    min-width: 0 !important;
  }

  body.nox-mobile-shell-simplified-safe .mobile-context-main strong {
    font-size: .96rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.nox-mobile-shell-simplified-safe .mobile-context-change {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: .76rem !important;
  }

  body.nox-mobile-shell-simplified-safe .mobile-text-chats-home {
    border-radius: 20px !important;
  }
}


/* =========================================================
   NOX v5.1.33 - Android Mobile Visual Cleanup
   Safe visual polish after v5.1.32b. Auth/login is not targeted.
   ========================================================= */
@media (max-width: 820px) {
  html.nox-mobile-shell-simplified-safe body.nox-android-app #mobileTopbar,
  body.nox-mobile-shell-simplified-safe #mobileTopbar,
  body.nox-mobile-visual-cleanup #mobileTopbar,
  body.nox-mobile-visual-cleanup .mobile-notify-btn,
  body.nox-mobile-visual-cleanup #mobileNotificationsBtn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  body.nox-mobile-visual-cleanup .app-shell,
  body.nox-mobile-shell-simplified-safe .app-shell {
    padding-top: max(6px, env(safe-area-inset-top)) !important;
  }

  body.nox-mobile-visual-cleanup .chat-presence-bar,
  body.nox-mobile-visual-cleanup .presence-radar,
  body.nox-mobile-visual-cleanup .nox-presence-stack,
  body.nox-mobile-shell-simplified-safe .chat-presence-bar,
  body.nox-mobile-shell-simplified-safe .presence-radar,
  body.nox-mobile-shell-simplified-safe .nox-presence-stack {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .chat-panel,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .chat-panel {
    min-height: 0 !important;
    gap: 4px !important;
    padding: 6px 7px 0 !important;
    border-radius: 18px !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .chat-header,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .chat-header {
    padding: 5px 8px 4px !important;
    border-radius: 13px !important;
    min-height: 0 !important;
    max-height: 42px !important;
    display: grid !important;
    align-content: center !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .chat-header p,
  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .chat-header-actions,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .chat-header p,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .chat-header-actions {
    display: none !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .mobile-chat-context-header,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .mobile-chat-context-header {
    min-height: 30px !important;
    max-height: 32px !important;
    margin: 0 0 2px !important;
    padding: 3px 5px 3px 8px !important;
    border-radius: 12px !important;
    gap: 4px !important;
    align-items: center !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .mobile-context-kicker,
  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .mobile-context-main small,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .mobile-context-kicker,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .mobile-context-main small {
    display: none !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .mobile-context-main strong,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .mobile-context-main strong {
    font-size: .88rem !important;
    line-height: 1 !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .mobile-context-change,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .mobile-context-change {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: .70rem !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat #messages,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat #messages {
    min-height: 220px !important;
    padding: 5px 7px 7px !important;
    gap: 4px !important;
    scroll-padding-bottom: 52px !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .messages > article.msg,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .messages > article.msg {
    padding: 5px 7px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    grid-template-columns: 25px minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .msg-avatar,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .msg-avatar {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    border-radius: 9px !important;
    font-size: .62rem !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .msg-meta,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .msg-meta {
    font-size: .59rem !important;
    line-height: 1.05 !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .msg-meta > span:nth-child(2),
  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .msg-edited,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .msg-meta > span:nth-child(2),
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .msg-edited {
    display: none !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .msg-content,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .msg-content {
    font-size: .84rem !important;
    line-height: 1.18 !important;
    margin-top: 0 !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .msg-reactions.compact:not(.has-summary),
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .msg-reactions.compact:not(.has-summary),
  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .msg-action-rail,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .msg-action-rail {
    display: none !important;
  }

  body.nox-mobile-visual-cleanup #appView.mobile-view-chat .reaction-summary-btn,
  body.nox-mobile-shell-simplified-safe #appView.mobile-view-chat .reaction-summary-btn {
    min-width: 24px !important;
    height: 19px !important;
    min-height: 19px !important;
    padding: 0 6px !important;
    font-size: .66rem !important;
  }
}


/* =========================================================
   NOX v5.1.35 - Android Chat List Start Cleanup
   On Android/mobile, before a concrete conversation is opened, show only
   the unified Czaty list. Never show the legacy Groups/Channels pane as the
   start screen.
   ========================================================= */
@media (max-width: 920px) {
  body.nox-mobile-chat-list-start-cleanup .app-shell.mobile-view-channels .channel-sidebar,
  body.nox-mobile-chat-list-start-cleanup .app-shell.mobile-view-channels .chat-panel,
  body.nox-mobile-chat-list-start-cleanup .app-shell.mobile-view-channels .info-panel,
  body.nox-mobile-chat-list-start-cleanup .app-shell.mobile-view-dm .channel-sidebar,
  body.nox-mobile-chat-list-start-cleanup .app-shell.mobile-view-dm .chat-panel,
  body.nox-mobile-chat-list-start-cleanup .app-shell.mobile-view-dm .info-panel,
  body.nox-mobile-chat-list-start-cleanup .app-shell.mobile-view-chat:not(.nox-has-open-chat) .channel-sidebar,
  body.nox-mobile-chat-list-start-cleanup .app-shell.mobile-view-chat:not(.nox-has-open-chat) .chat-panel,
  body.nox-mobile-chat-list-start-cleanup .app-shell.mobile-view-chat:not(.nox-has-open-chat) .info-panel {
    display: none !important;
  }

  body.nox-mobile-chat-list-start-cleanup .app-shell.mobile-view-channels .mobile-text-chats-home,
  body.nox-mobile-chat-list-start-cleanup .app-shell.mobile-view-dm .mobile-text-chats-home,
  body.nox-mobile-chat-list-start-cleanup .app-shell.mobile-view-chat:not(.nox-has-open-chat) .mobile-text-chats-home,
  body.nox-mobile-chat-list-start-cleanup .app-shell.mobile-view-chats .mobile-text-chats-home {
    display: grid !important;
  }

  body.nox-mobile-chat-list-start-cleanup .mobile-text-chats-home {
    margin: 0 !important;
    min-height: calc(100dvh - 118px) !important;
  }
}


/* =========================================================
   NOX v5.1.35b - Android Chat List Start Fix
   Do not show the legacy Rozmowy picker as the mobile home screen.
   It is allowed only from an already opened chat context.
   ========================================================= */
@media (max-width: 920px) {
  body.nox-mobile-chat-list-start-fix:not(.nox-mobile-allow-conversation-picker) #mobileConversationSheet,
  body.nox-mobile-chat-list-start-fix:not(.nox-mobile-allow-conversation-picker) #mobileConversationSheet .mobile-sheet-backdrop,
  body.nox-mobile-chat-list-start-fix:not(.nox-mobile-allow-conversation-picker) #mobileConversationSheet .mobile-sheet-panel {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.nox-mobile-chat-list-start-fix:not(.nox-mobile-allow-conversation-picker).nox-mobile-sheet-open {
    overflow: auto !important;
  }

  body.nox-mobile-chat-list-start-fix .app-shell.mobile-view-chats .mobile-text-chats-home {
    display: grid !important;
    min-height: calc(100dvh - 118px) !important;
  }
}


/* =========================================================
   NOX v5.1.35c - Android Chat List Click Fix
   Ensure the unified Czaty rows are touchable and visually pressed.
   ========================================================= */
@media (max-width: 920px) {
  body.nox-mobile-chat-list-click-fix #mobileTextChatsList,
  body.nox-mobile-chat-list-click-fix #mobileTextChatsList * {
    pointer-events: auto !important;
  }

  body.nox-mobile-chat-list-click-fix #mobileTextChatsList {
    position: relative !important;
    z-index: 8 !important;
    touch-action: pan-y !important;
  }

  body.nox-mobile-chat-list-click-fix #mobileTextChatsList .mobile-chat-row {
    position: relative !important;
    z-index: 9 !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: rgba(45, 212, 191, .18) !important;
    touch-action: manipulation !important;
  }

  body.nox-mobile-chat-list-click-fix #mobileTextChatsList .mobile-chat-row.pressed,
  body.nox-mobile-chat-list-click-fix #mobileTextChatsList .mobile-chat-row:active {
    transform: scale(.992) !important;
    border-color: rgba(45, 212, 191, .42) !important;
    background: linear-gradient(135deg, rgba(45,212,191,.14), rgba(139,92,246,.10)) !important;
  }
}


/* =========================================================
   NOX v5.1.36 - Android Mobile Messenger Home
   Stronger mobile vibe for the Czaty home: messenger-like list,
   compact chrome, floating create action. Auth/login untouched.
   ========================================================= */
@media (max-width: 920px) {
  body.nox-mobile-messenger-home .mobile-text-chats-home {
    position: relative !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 13px 12px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(7, 10, 28, .98), rgba(4, 7, 20, .98)) !important;
    box-shadow: none !important;
    min-height: calc(100dvh - 94px) !important;
  }

  body.nox-mobile-messenger-home .mobile-messenger-hero,
  body.nox-mobile-messenger-home .mobile-chats-hero {
    padding: 4px 1px 3px !important;
  }

  body.nox-mobile-messenger-home .mobile-chats-hero span {
    color: rgba(45, 212, 191, .88) !important;
    letter-spacing: .20em !important;
    font-size: .60rem !important;
  }

  body.nox-mobile-messenger-home .mobile-chats-hero h2 {
    font-size: 1.72rem !important;
    letter-spacing: -.03em !important;
    margin: 1px 0 0 !important;
  }

  body.nox-mobile-messenger-home .mobile-chats-hero p {
    font-size: .76rem !important;
    opacity: .78 !important;
    margin-top: 3px !important;
  }

  body.nox-mobile-messenger-home .mobile-chats-refresh {
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, .76) !important;
    opacity: .76 !important;
  }

  body.nox-mobile-messenger-home .mobile-chats-search-wrap input {
    min-height: 40px !important;
    border-radius: 999px !important;
    padding: 0 15px !important;
    background: rgba(15, 23, 42, .72) !important;
    border-color: rgba(148, 163, 184, .11) !important;
    font-size: .86rem !important;
  }

  body.nox-mobile-messenger-home .mobile-chats-quick-actions {
    display: none !important;
  }

  body.nox-mobile-messenger-home .mobile-text-chats-list {
    gap: 3px !important;
    padding: 2px 0 96px !important;
    border-radius: 0 !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-row {
    min-height: 66px !important;
    padding: 9px 6px !important;
    border-radius: 0 !important;
    border-width: 0 0 1px 0 !important;
    border-color: rgba(148, 163, 184, .075) !important;
    background: transparent !important;
    box-shadow: none !important;
    grid-template-columns: 46px minmax(0, 1fr) 16px !important;
    gap: 9px !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-row.active,
  body.nox-mobile-messenger-home .mobile-chat-row.unread {
    background: linear-gradient(90deg, rgba(45, 212, 191, .075), transparent 72%) !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 16px !important;
    font-size: .72rem !important;
    box-shadow: 0 8px 24px rgba(45, 212, 191, .10) !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-avatar.channel {
    border-radius: 15px !important;
    background: rgba(139, 92, 246, .18) !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-copy {
    gap: 4px !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-line strong {
    font-size: .98rem !important;
    letter-spacing: -.01em !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-line em {
    font-size: .66rem !important;
    opacity: .76 !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-copy small {
    display: flex !important;
    min-width: 0 !important;
    gap: 6px !important;
    align-items: center !important;
    font-size: .76rem !important;
    color: rgba(148, 163, 184, .82) !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-copy small b {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    background: rgba(45, 212, 191, .09) !important;
    color: rgba(94, 234, 212, .94) !important;
    font-size: .60rem !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-copy small span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-status {
    display: grid !important;
    place-items: center !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-status i {
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: #fbbf24 !important;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, .10) !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-status i.idle {
    width: 6px !important;
    height: 6px !important;
    background: rgba(148, 163, 184, .20) !important;
    box-shadow: none !important;
  }

  body.nox-mobile-messenger-home .mobile-chat-unread {
    display: none !important;
  }

  body.nox-mobile-messenger-home .mobile-chats-empty {
    min-height: 190px !important;
    border-radius: 22px !important;
    background: rgba(15, 23, 42, .34) !important;
  }

  body.nox-mobile-messenger-home .mobile-chats-fab {
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    z-index: 70 !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 19px !important;
    border: 1px solid rgba(45, 212, 191, .35) !important;
    background: linear-gradient(135deg, rgba(45, 212, 191, .96), rgba(139, 92, 246, .96)) !important;
    color: #071014 !important;
    font-size: 1.7rem !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    box-shadow: 0 18px 48px rgba(45, 212, 191, .22), 0 10px 30px rgba(0,0,0,.38) !important;
  }

  body.nox-mobile-messenger-home .mobile-chats-fab-menu {
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: calc(146px + env(safe-area-inset-bottom)) !important;
    z-index: 69 !important;
    display: grid !important;
    gap: 8px !important;
    min-width: 150px !important;
    opacity: 0 !important;
    transform: translateY(8px) scale(.98) !important;
    pointer-events: none !important;
    transition: opacity .16s ease, transform .16s ease !important;
  }

  body.nox-mobile-messenger-home .mobile-text-chats-home.fab-open .mobile-chats-fab-menu {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  body.nox-mobile-messenger-home .mobile-chats-fab-menu button {
    min-height: 42px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    background: rgba(15, 23, 42, .96) !important;
    color: rgba(226,232,240,.98) !important;
    font-weight: 950 !important;
    padding: 0 14px !important;
    box-shadow: 0 10px 32px rgba(0,0,0,.34) !important;
  }
}


/* =========================================================
   NOX v5.1.36b - Android Mobile Messenger Home FAB Fix
   Hardens the floating + button against default/browser button
   styles that rendered it as a large white rectangle on Android.
   ========================================================= */
@media (max-width: 920px) {
  html.nox-mobile-messenger-home body.nox-mobile-messenger-home #mobileTextChatsHome > #mobileChatsFab.mobile-chats-fab,
  body.nox-mobile-messenger-home #mobileTextChatsHome > button#mobileChatsFab.mobile-chats-fab {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    z-index: 700 !important;
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 19px !important;
    border: 1px solid rgba(45, 212, 191, .38) !important;
    outline: none !important;
    background: linear-gradient(135deg, rgba(45, 212, 191, .96), rgba(139, 92, 246, .96)) !important;
    color: #061018 !important;
    font: 1000 1.75rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-align: center !important;
    box-shadow: 0 18px 48px rgba(45, 212, 191, .22), 0 10px 30px rgba(0,0,0,.38) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    touch-action: manipulation !important;
  }

  html.nox-mobile-messenger-home body.nox-mobile-messenger-home #mobileTextChatsHome > #mobileChatsFabMenu.mobile-chats-fab-menu,
  body.nox-mobile-messenger-home #mobileTextChatsHome > div#mobileChatsFabMenu.mobile-chats-fab-menu {
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: calc(146px + env(safe-area-inset-bottom)) !important;
    z-index: 699 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 150px !important;
    max-width: calc(100vw - 36px) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transform: translateY(8px) scale(.98) !important;
    pointer-events: none !important;
    transition: opacity .16s ease, transform .16s ease !important;
  }

  html.nox-mobile-messenger-home body.nox-mobile-messenger-home #mobileTextChatsHome.fab-open > #mobileChatsFabMenu.mobile-chats-fab-menu,
  body.nox-mobile-messenger-home #mobileTextChatsHome.fab-open > div#mobileChatsFabMenu.mobile-chats-fab-menu {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  body.nox-mobile-messenger-home #mobileTextChatsHome > #mobileChatsFabMenu.mobile-chats-fab-menu > button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 150px !important;
    max-width: 220px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    background: rgba(15, 23, 42, .96) !important;
    color: rgba(226,232,240,.98) !important;
    font: 950 .88rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-align: center !important;
    box-shadow: 0 10px 32px rgba(0,0,0,.34) !important;
    touch-action: manipulation !important;
  }
}


/* =========================================================
   NOX v5.1.36c - Android Mobile Messenger Home Activation + FAB Fix
   Defensive FAB styling that also works when the messenger-home class is
   applied late. This prevents Android WebView from rendering the + as a
   large default white button.
   ========================================================= */
@media (max-width: 920px) {
  body.nox-android-app #mobileTextChatsHome > #mobileChatsFab.mobile-chats-fab,
  body.nox-mobile-chat-list-click-fix #mobileTextChatsHome > #mobileChatsFab.mobile-chats-fab,
  body.nox-mobile-text-chats-home-ready #mobileTextChatsHome > #mobileChatsFab.mobile-chats-fab,
  body.nox-mobile-messenger-home-activation-fix #mobileTextChatsHome > #mobileChatsFab.mobile-chats-fab {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    top: auto !important;
    z-index: 900 !important;
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 19px !important;
    border: 1px solid rgba(45, 212, 191, .42) !important;
    outline: none !important;
    background: linear-gradient(135deg, rgba(45, 212, 191, .97), rgba(139, 92, 246, .97)) !important;
    color: #061018 !important;
    font: 1000 1.75rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-align: center !important;
    text-indent: 0 !important;
    box-shadow: 0 18px 48px rgba(45, 212, 191, .24), 0 10px 30px rgba(0,0,0,.40) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    touch-action: manipulation !important;
  }

  body.nox-android-app #mobileTextChatsHome > #mobileChatsFabMenu.mobile-chats-fab-menu,
  body.nox-mobile-chat-list-click-fix #mobileTextChatsHome > #mobileChatsFabMenu.mobile-chats-fab-menu,
  body.nox-mobile-text-chats-home-ready #mobileTextChatsHome > #mobileChatsFabMenu.mobile-chats-fab-menu,
  body.nox-mobile-messenger-home-activation-fix #mobileTextChatsHome > #mobileChatsFabMenu.mobile-chats-fab-menu {
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: calc(158px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    top: auto !important;
    z-index: 899 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 156px !important;
    max-width: calc(100vw - 36px) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transform: translateY(8px) scale(.98) !important;
    pointer-events: none !important;
    transition: opacity .16s ease, transform .16s ease !important;
  }

  body.nox-android-app #mobileTextChatsHome.fab-open > #mobileChatsFabMenu.mobile-chats-fab-menu,
  body.nox-mobile-chat-list-click-fix #mobileTextChatsHome.fab-open > #mobileChatsFabMenu.mobile-chats-fab-menu,
  body.nox-mobile-text-chats-home-ready #mobileTextChatsHome.fab-open > #mobileChatsFabMenu.mobile-chats-fab-menu,
  body.nox-mobile-messenger-home-activation-fix #mobileTextChatsHome.fab-open > #mobileChatsFabMenu.mobile-chats-fab-menu {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  body.nox-android-app #mobileTextChatsHome > #mobileChatsFabMenu.mobile-chats-fab-menu > button,
  body.nox-mobile-chat-list-click-fix #mobileTextChatsHome > #mobileChatsFabMenu.mobile-chats-fab-menu > button,
  body.nox-mobile-text-chats-home-ready #mobileTextChatsHome > #mobileChatsFabMenu.mobile-chats-fab-menu > button,
  body.nox-mobile-messenger-home-activation-fix #mobileTextChatsHome > #mobileChatsFabMenu.mobile-chats-fab-menu > button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 156px !important;
    max-width: 230px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(15, 23, 42, .97) !important;
    color: rgba(226,232,240,.98) !important;
    font: 950 .88rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-align: center !important;
    box-shadow: 0 10px 32px rgba(0,0,0,.36) !important;
    touch-action: manipulation !important;
  }
}


/* ======================================================================
   NOX v5.1.36d - Android Mobile Modal Layout Audit
   - create-channel private mode no longer overlays action buttons on inputs
   - mobile dialogs use safe scroll instead of sticky desktop-like overlays
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-android-app.nox-channel-create-open,
  body.nox-shell-android-capacitor.nox-channel-create-open,
  body.nox-device-phone.nox-channel-create-open {
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  body.nox-android-app .nox-channel-create-modal,
  body.nox-shell-android-capacitor .nox-channel-create-modal,
  body.nox-device-phone .nox-channel-create-modal {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 max(12px, env(safe-area-inset-left)) calc(84px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right)) !important;
  }

  body.nox-android-app .nox-channel-create-card,
  body.nox-android-app .nox-channel-create-card.private-on,
  body.nox-shell-android-capacitor .nox-channel-create-card,
  body.nox-shell-android-capacitor .nox-channel-create-card.private-on,
  body.nox-device-phone .nox-channel-create-card,
  body.nox-device-phone .nox-channel-create-card.private-on {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(82dvh, calc(100dvh - 108px)) !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    border-radius: 30px 30px 22px 22px !important;
  }

  body.nox-android-app .nox-channel-create-main,
  body.nox-shell-android-capacitor .nox-channel-create-main,
  body.nox-device-phone .nox-channel-create-main {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 16px 18px 10px !important;
  }

  body.nox-android-app .nox-channel-create-form,
  body.nox-shell-android-capacitor .nox-channel-create-form,
  body.nox-device-phone .nox-channel-create-form {
    display: grid !important;
    gap: 12px !important;
    align-content: start !important;
  }

  body.nox-android-app .nox-channel-create-actions,
  body.nox-shell-android-capacitor .nox-channel-create-actions,
  body.nox-device-phone .nox-channel-create-actions {
    position: static !important;
    inset: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.nox-android-app .nox-channel-create-actions button,
  body.nox-shell-android-capacitor .nox-channel-create-actions button,
  body.nox-device-phone .nox-channel-create-actions button {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 16px !important;
  }

  body.nox-android-app .nox-channel-create-actions .ghost,
  body.nox-shell-android-capacitor .nox-channel-create-actions .ghost,
  body.nox-device-phone .nox-channel-create-actions .ghost {
    order: 2 !important;
    background: rgba(15, 23, 42, .72) !important;
  }

  body.nox-android-app .nox-channel-create-actions .primary,
  body.nox-shell-android-capacitor .nox-channel-create-actions .primary,
  body.nox-device-phone .nox-channel-create-actions .primary {
    order: 1 !important;
  }

  body.nox-android-app .nox-channel-invite-side,
  body.nox-shell-android-capacitor .nox-channel-invite-side,
  body.nox-device-phone .nox-channel-invite-side {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 18px 16px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(45, 212, 191, .18) !important;
  }

  body.nox-android-app .nox-channel-create-card:not(.private-on) .nox-channel-invite-side,
  body.nox-shell-android-capacitor .nox-channel-create-card:not(.private-on) .nox-channel-invite-side,
  body.nox-device-phone .nox-channel-create-card:not(.private-on) .nox-channel-invite-side {
    display: none !important;
  }

  body.nox-android-app .nox-channel-create-card.private-on .nox-channel-invite-side,
  body.nox-shell-android-capacitor .nox-channel-create-card.private-on .nox-channel-invite-side,
  body.nox-device-phone .nox-channel-create-card.private-on .nox-channel-invite-side {
    display: block !important;
  }

  body.nox-android-app .nox-channel-invite-users,
  body.nox-shell-android-capacitor .nox-channel-invite-users,
  body.nox-device-phone .nox-channel-invite-users {
    max-height: min(30dvh, 260px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-right: 5px !important;
  }

  body.nox-android-app .nox-confirm-card,
  body.nox-shell-android-capacitor .nox-confirm-card,
  body.nox-device-phone .nox-confirm-card {
    max-height: min(78dvh, calc(100dvh - 120px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.nox-android-app .nox-confirm-actions,
  body.nox-shell-android-capacitor .nox-confirm-actions,
  body.nox-device-phone .nox-confirm-actions {
    position: static !important;
  }
}


/* ======================================================================
   NOX v5.1.37 - Android Mobile Chat Screen UX
   Compact mobile chat header and desktop chrome removal.
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-mobile-chat-screen-ux .chat-panel {
    border-radius: 0 !important;
    border: 0 !important;
    background: radial-gradient(circle at top, rgba(20, 184, 166, .10), transparent 34%), rgba(7, 10, 18, .98) !important;
    box-shadow: none !important;
    min-height: 100dvh !important;
  }
  body.nox-mobile-chat-screen-ux .chat-panel > .chat-header,
  body.nox-mobile-chat-screen-ux .channel-kicker,
  body.nox-mobile-chat-screen-ux .chat-title-block,
  body.nox-mobile-chat-screen-ux .chat-header-actions,
  body.nox-mobile-chat-screen-ux #presenceStack,
  body.nox-mobile-chat-screen-ux #presenceRadar,
  body.nox-mobile-chat-screen-ux .chat-presence-bar,
  body.nox-mobile-chat-screen-ux .nox-presence-stack,
  body.nox-mobile-chat-screen-ux .presence-radar {
    display: none !important;
  }
  body.nox-mobile-chat-screen-ux #mobileChatContextHeader.nox-mobile-chat-compact-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    display: grid !important;
    grid-template-columns: 42px 40px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 62px !important;
    padding: max(10px, env(safe-area-inset-top)) 12px 9px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(7, 10, 18, .94) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 12px 22px rgba(0,0,0,.22) !important;
  }
  body.nox-mobile-chat-screen-ux .mobile-chat-back-btn.nox-chat-screen-back,
  body.nox-mobile-chat-screen-ux .nox-chat-screen-more {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.06) !important;
    color: rgba(241,245,249,.96) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
  }
  body.nox-mobile-chat-screen-ux .nox-chat-screen-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 15px !important;
    display: grid !important;
    place-items: center !important;
    color: #071016 !important;
    font-weight: 1000 !important;
    font-size: .82rem !important;
    background: linear-gradient(135deg, #5eead4, #a78bfa) !important;
    box-shadow: 0 10px 20px rgba(20,184,166,.16) !important;
  }
  body.nox-mobile-chat-screen-ux .nox-chat-screen-titlebox {
    min-width: 0 !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    text-align: left !important;
    color: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
  }
  body.nox-mobile-chat-screen-ux .nox-chat-screen-titlebox strong {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
    color: rgba(248,250,252,.98) !important;
    letter-spacing: -.01em !important;
  }
  body.nox-mobile-chat-screen-ux .nox-chat-screen-titlebox small {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: .72rem !important;
    line-height: 1.1 !important;
    color: rgba(148,163,184,.88) !important;
  }
  body.nox-mobile-chat-screen-ux .messages {
    padding-top: 10px !important;
  }
}


/* ======================================================================
   NOX v5.1.37b - Android Mobile Chat Header Stabilization
   Stabilizes v5.1.37 compact chat header without touching bubbles/composer.
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-mobile-chat-screen-ux.nox-mobile-chat-header-stabilized #mobileChatContextHeader.nox-mobile-chat-compact-header,
  body.nox-mobile-chat-screen-ux #mobileChatContextHeader.nox-mobile-chat-compact-header[data-chat-header-stabilized="v5.1.37b"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 70 !important;
    display: grid !important;
    grid-template-columns: 38px 36px minmax(0, 1fr) 38px !important;
    gap: 8px !important;
    min-height: 54px !important;
    max-height: 58px !important;
    padding: 8px 10px !important;
    align-items: center !important;
    background: rgba(7, 10, 18, .96) !important;
    border-bottom: 1px solid rgba(94, 234, 212, .12) !important;
    box-shadow: 0 10px 18px rgba(0,0,0,.18) !important;
    overflow: hidden !important;
  }

  body.nox-mobile-chat-screen-ux.nox-mobile-chat-header-stabilized .mobile-chat-back-btn.nox-chat-screen-back,
  body.nox-mobile-chat-screen-ux.nox-mobile-chat-header-stabilized .nox-chat-screen-more,
  body.nox-mobile-chat-screen-ux #mobileChatContextHeader[data-chat-header-stabilized="v5.1.37b"] .mobile-chat-back-btn.nox-chat-screen-back,
  body.nox-mobile-chat-screen-ux #mobileChatContextHeader[data-chat-header-stabilized="v5.1.37b"] .nox-chat-screen-more {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 14px !important;
    font-size: 1.05rem !important;
    box-shadow: none !important;
  }

  body.nox-mobile-chat-screen-ux.nox-mobile-chat-header-stabilized .nox-chat-screen-avatar,
  body.nox-mobile-chat-screen-ux #mobileChatContextHeader[data-chat-header-stabilized="v5.1.37b"] .nox-chat-screen-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    font-size: .78rem !important;
    box-shadow: none !important;
  }

  body.nox-mobile-chat-screen-ux.nox-mobile-chat-header-stabilized .nox-chat-screen-titlebox,
  body.nox-mobile-chat-screen-ux #mobileChatContextHeader[data-chat-header-stabilized="v5.1.37b"] .nox-chat-screen-titlebox {
    min-height: 36px !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  body.nox-mobile-chat-screen-ux.nox-mobile-chat-header-stabilized .nox-chat-screen-titlebox strong,
  body.nox-mobile-chat-screen-ux #mobileChatContextHeader[data-chat-header-stabilized="v5.1.37b"] .nox-chat-screen-titlebox strong {
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  body.nox-mobile-chat-screen-ux.nox-mobile-chat-header-stabilized .nox-chat-screen-titlebox small,
  body.nox-mobile-chat-screen-ux #mobileChatContextHeader[data-chat-header-stabilized="v5.1.37b"] .nox-chat-screen-titlebox small {
    display: none !important;
  }

  body.nox-mobile-chat-screen-ux.nox-mobile-chat-header-stabilized .messages {
    padding-top: 14px !important;
    scroll-padding-top: 72px !important;
  }

  body.nox-mobile-chat-screen-ux.nox-mobile-chat-header-stabilized .chat-panel {
    overflow: hidden !important;
  }
}


/* ======================================================================
   NOX v5.1.38a - Android Mobile Bubbles Only
   Conservative mobile-only bubble polish. Header/composer/Voice untouched.
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-mobile-bubbles-only #messages,
  body.nox-android-app.nox-mobile-bubbles-only #messages,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages {
    gap: 7px !important;
    align-items: stretch !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg {
    width: fit-content !important;
    max-width: min(86%, 360px) !important;
    min-width: 0 !important;
    margin: 2px auto 2px 0 !important;
    padding: 7px 9px 7px 7px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    column-gap: 7px !important;
    row-gap: 2px !important;
    border-radius: 17px 17px 17px 7px !important;
    background: rgba(15, 23, 42, .78) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14) !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg.own,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg.own,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg.own {
    margin-left: auto !important;
    margin-right: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 7px 9px !important;
    border-radius: 17px 17px 7px 17px !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, .34), rgba(45, 212, 191, .13)) !important;
    border-color: rgba(167, 139, 250, .30) !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg.own .msg-avatar,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg.own .msg-avatar,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg.own .msg-avatar {
    display: none !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg .msg-avatar,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg .msg-avatar,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg .msg-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 11px !important;
    font-size: .68rem !important;
    align-self: end !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg .msg-main,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg .msg-main,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg .msg-main {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg .msg-meta,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg .msg-meta,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg .msg-meta {
    margin: 0 0 3px !important;
    gap: 5px !important;
    font-size: .66rem !important;
    line-height: 1.05 !important;
    opacity: .78 !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg.own .msg-meta,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg.own .msg-meta,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg.own .msg-meta {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg .msg-meta span:nth-child(2),
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg .msg-meta span:nth-child(2),
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg .msg-meta span:nth-child(2) {
    display: none !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg .msg-content,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg .msg-content,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg .msg-content {
    font-size: .94rem !important;
    line-height: 1.34 !important;
    word-break: break-word !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg .msg-action-rail,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg .msg-action-rail,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg .msg-action-rail {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg .msg-reactions.compact,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg .msg-reactions.compact,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg .msg-reactions.compact {
    margin-top: 5px !important;
    min-height: 0 !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg .reaction-summary,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg .reaction-summary,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg .reaction-summary {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg.own .reaction-summary,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg.own .reaction-summary,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg.own .reaction-summary {
    justify-content: flex-end !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg .reaction-summary-btn,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg .reaction-summary-btn,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg .reaction-summary-btn {
    min-height: 22px !important;
    padding: 1px 7px !important;
    border-radius: 999px !important;
    font-size: .76rem !important;
    background: rgba(2, 6, 23, .34) !important;
    border-color: rgba(255, 255, 255, .12) !important;
  }

  body.nox-mobile-bubbles-only #messages > article.msg .msg-reply-preview,
  body.nox-android-app.nox-mobile-bubbles-only #messages > article.msg .msg-reply-preview,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only #messages > article.msg .msg-reply-preview {
    margin: 0 0 5px !important;
    padding: 6px 8px !important;
    border-radius: 11px !important;
    background: rgba(2, 6, 23, .25) !important;
  }

  body.nox-mobile-bubbles-only .message-context-menu,
  body.nox-android-app.nox-mobile-bubbles-only .message-context-menu,
  body.nox-shell-android-capacitor.nox-mobile-bubbles-only .message-context-menu {
    border-radius: 16px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.34) !important;
  }
}


/* ======================================================================
   NOX v5.1.38b - Android Mobile Reply & Reactions Visibility
   Small mobile-only hotfix on top of v5.1.38a. Header/composer/Voice untouched.
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-mobile-reply-reactions-visible #messages,
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages,
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages {
    padding-bottom: 18px !important;
  }

  body.nox-mobile-reply-reactions-visible #messages > article.msg,
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages > article.msg,
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages > article.msg {
    overflow: visible !important;
    isolation: isolate !important;
  }

  body.nox-mobile-reply-reactions-visible #messages > article.msg:has(.reaction-summary:not(:empty)),
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages > article.msg:has(.reaction-summary:not(:empty)),
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages > article.msg:has(.reaction-summary:not(:empty)) {
    margin-bottom: 16px !important;
  }

  body.nox-mobile-reply-reactions-visible #messages > article.msg .msg-reply-preview,
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages > article.msg .msg-reply-preview,
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages > article.msg .msg-reply-preview {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    margin: 1px 0 8px !important;
    padding: 7px 9px 7px 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(94, 234, 212, .34) !important;
    border-left: 4px solid rgba(45, 212, 191, .92) !important;
    background: linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(30, 41, 59, .72)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025) !important;
    color: rgba(241, 245, 249, .96) !important;
    text-align: left !important;
  }

  body.nox-mobile-reply-reactions-visible #messages > article.msg.own .msg-reply-preview,
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages > article.msg.own .msg-reply-preview,
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages > article.msg.own .msg-reply-preview {
    background: linear-gradient(135deg, rgba(49, 46, 129, .76), rgba(15, 23, 42, .74)) !important;
    border-color: rgba(167, 139, 250, .36) !important;
    border-left-color: rgba(94, 234, 212, .94) !important;
  }

  body.nox-mobile-reply-reactions-visible #messages > article.msg .msg-reply-preview .reply-label,
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages > article.msg .msg-reply-preview .reply-label,
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages > article.msg .msg-reply-preview .reply-label {
    display: block !important;
    color: rgba(94, 234, 212, 1) !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    line-height: 1.12 !important;
    letter-spacing: .01em !important;
  }

  body.nox-mobile-reply-reactions-visible #messages > article.msg .msg-reply-preview .reply-text,
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages > article.msg .msg-reply-preview .reply-text,
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages > article.msg .msg-reply-preview .reply-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(226, 232, 240, .96) !important;
    font-size: .82rem !important;
    line-height: 1.22 !important;
  }

  body.nox-mobile-reply-reactions-visible #messages > article.msg .msg-reactions.compact,
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages > article.msg .msg-reactions.compact,
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages > article.msg .msg-reactions.compact {
    position: absolute !important;
    z-index: 3 !important;
    right: auto !important;
    left: 42px !important;
    bottom: -13px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: calc(100% - 56px) !important;
    pointer-events: auto !important;
  }

  body.nox-mobile-reply-reactions-visible #messages > article.msg.own .msg-reactions.compact,
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages > article.msg.own .msg-reactions.compact,
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages > article.msg.own .msg-reactions.compact {
    left: auto !important;
    right: 8px !important;
    max-width: calc(100% - 24px) !important;
  }

  body.nox-mobile-reply-reactions-visible #messages > article.msg .reaction-summary,
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages > article.msg .reaction-summary,
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages > article.msg .reaction-summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  body.nox-mobile-reply-reactions-visible #messages > article.msg .reaction-summary:empty,
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages > article.msg .reaction-summary:empty,
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages > article.msg .reaction-summary:empty {
    display: none !important;
  }

  body.nox-mobile-reply-reactions-visible #messages > article.msg .reaction-summary-btn,
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages > article.msg .reaction-summary-btn,
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages > article.msg .reaction-summary-btn {
    min-width: 28px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: .82rem !important;
    line-height: 1 !important;
    background: rgba(2, 6, 23, .92) !important;
    border: 1px solid rgba(94, 234, 212, .36) !important;
    color: rgba(248, 250, 252, .98) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.035) !important;
    backdrop-filter: blur(10px) !important;
  }

  body.nox-mobile-reply-reactions-visible #messages > article.msg .reaction-summary-btn.active,
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages > article.msg .reaction-summary-btn.active,
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages > article.msg .reaction-summary-btn.active {
    background: linear-gradient(135deg, rgba(45, 212, 191, .30), rgba(124, 58, 237, .38)) !important;
    border-color: rgba(94, 234, 212, .72) !important;
  }

  body.nox-mobile-reply-reactions-visible #messages > article.msg .reply-bar,
  body.nox-android-app.nox-mobile-reply-reactions-visible #messages > article.msg .reply-bar,
  body.nox-shell-android-capacitor.nox-mobile-reply-reactions-visible #messages > article.msg .reply-bar {
    font-size: .88rem !important;
  }
}


/* ======================================================================
   NOX v5.1.38c - Android Mobile Reactions Hard Visible
   Keep reply improvements from 38b, but make reactions visible as normal rows
   instead of fragile absolute badges.
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-mobile-reactions-hard-visible #messages > article.msg,
  body.nox-android-app.nox-mobile-reactions-hard-visible #messages > article.msg,
  body.nox-shell-android-capacitor.nox-mobile-reactions-hard-visible #messages > article.msg {
    overflow: visible !important;
  }

  body.nox-mobile-reactions-hard-visible #messages > article.msg:has(.reaction-summary:not(:empty)),
  body.nox-android-app.nox-mobile-reactions-hard-visible #messages > article.msg:has(.reaction-summary:not(:empty)),
  body.nox-shell-android-capacitor.nox-mobile-reactions-hard-visible #messages > article.msg:has(.reaction-summary:not(:empty)) {
    margin-bottom: 8px !important;
  }

  body.nox-mobile-reactions-hard-visible #messages > article.msg .msg-reactions.compact,
  body.nox-android-app.nox-mobile-reactions-hard-visible #messages > article.msg .msg-reactions.compact,
  body.nox-shell-android-capacitor.nox-mobile-reactions-hard-visible #messages > article.msg .msg-reactions.compact {
    position: static !important;
    z-index: 4 !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body.nox-mobile-reactions-hard-visible #messages > article.msg.own .msg-reactions.compact,
  body.nox-android-app.nox-mobile-reactions-hard-visible #messages > article.msg.own .msg-reactions.compact,
  body.nox-shell-android-capacitor.nox-mobile-reactions-hard-visible #messages > article.msg.own .msg-reactions.compact {
    justify-content: flex-end !important;
    align-self: stretch !important;
  }

  body.nox-mobile-reactions-hard-visible #messages > article.msg:not(.own) .msg-reactions.compact,
  body.nox-android-app.nox-mobile-reactions-hard-visible #messages > article.msg:not(.own) .msg-reactions.compact,
  body.nox-shell-android-capacitor.nox-mobile-reactions-hard-visible #messages > article.msg:not(.own) .msg-reactions.compact {
    justify-content: flex-start !important;
  }

  body.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary,
  body.nox-android-app.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary,
  body.nox-shell-android-capacitor.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary:empty,
  body.nox-android-app.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary:empty,
  body.nox-shell-android-capacitor.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary:empty {
    display: none !important;
  }

  body.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary-btn,
  body.nox-android-app.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary-btn,
  body.nox-shell-android-capacitor.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 42px !important;
    width: auto !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(94, 234, 212, .62) !important;
    background: linear-gradient(135deg, rgba(7, 16, 38, .98), rgba(49, 46, 129, .88)) !important;
    color: rgba(248, 250, 252, 1) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.045) !important;
    font-size: .82rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    backdrop-filter: blur(10px) !important;
  }

  body.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary-btn.active,
  body.nox-android-app.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary-btn.active,
  body.nox-shell-android-capacitor.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary-btn.active {
    border-color: rgba(45, 212, 191, .96) !important;
    background: linear-gradient(135deg, rgba(20, 184, 166, .42), rgba(124, 58, 237, .56)) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.44), 0 0 18px rgba(45, 212, 191, .18) !important;
  }

  body.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary-emoji,
  body.nox-android-app.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary-emoji,
  body.nox-shell-android-capacitor.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary-emoji {
    display: inline-block !important;
    font-size: .96rem !important;
    line-height: 1 !important;
  }

  body.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary-count,
  body.nox-android-app.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary-count,
  body.nox-shell-android-capacitor.nox-mobile-reactions-hard-visible #messages > article.msg .reaction-summary-count {
    display: inline-block !important;
    min-width: 10px !important;
    color: rgba(226, 232, 240, .98) !important;
    font-size: .72rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }
}


/* ======================================================================
   NOX v5.1.38f - Android Mobile Reaction Pill Layout Polish
   Reactions work after 38e; this pass makes badges smaller and prevents
   them from stretching/warping the bubble layout on narrow Android screens.
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-mobile-reaction-pill-layout-polish #messages > article.msg,
  body.nox-android-app.nox-mobile-reaction-pill-layout-polish #messages > article.msg,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-layout-polish #messages > article.msg {
    overflow: visible !important;
  }

  body.nox-mobile-reaction-pill-layout-polish #messages > article.msg:has(.reaction-summary:not(:empty)),
  body.nox-android-app.nox-mobile-reaction-pill-layout-polish #messages > article.msg:has(.reaction-summary:not(:empty)),
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-layout-polish #messages > article.msg:has(.reaction-summary:not(:empty)) {
    margin-bottom: 14px !important;
  }

  body.nox-mobile-reaction-pill-layout-polish #messages > article.msg .msg-main,
  body.nox-android-app.nox-mobile-reaction-pill-layout-polish #messages > article.msg .msg-main,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-layout-polish #messages > article.msg .msg-main {
    position: relative !important;
    overflow: visible !important;
  }

  body.nox-mobile-reaction-pill-layout-polish #messages > article.msg .msg-reactions.compact,
  body.nox-android-app.nox-mobile-reaction-pill-layout-polish #messages > article.msg .msg-reactions.compact,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-layout-polish #messages > article.msg .msg-reactions.compact {
    position: absolute !important;
    z-index: 12 !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 20px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body.nox-mobile-reaction-pill-layout-polish #messages > article.msg.own .msg-reactions.compact,
  body.nox-android-app.nox-mobile-reaction-pill-layout-polish #messages > article.msg.own .msg-reactions.compact,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-layout-polish #messages > article.msg.own .msg-reactions.compact {
    right: 8px !important;
    left: auto !important;
    bottom: -13px !important;
    justify-content: flex-end !important;
  }

  body.nox-mobile-reaction-pill-layout-polish #messages > article.msg:not(.own) .msg-reactions.compact,
  body.nox-android-app.nox-mobile-reaction-pill-layout-polish #messages > article.msg:not(.own) .msg-reactions.compact,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-layout-polish #messages > article.msg:not(.own) .msg-reactions.compact {
    left: 10px !important;
    right: auto !important;
    bottom: -13px !important;
    justify-content: flex-start !important;
  }

  body.nox-mobile-reaction-pill-layout-polish #messages > article.msg .reaction-summary,
  body.nox-android-app.nox-mobile-reaction-pill-layout-polish #messages > article.msg .reaction-summary,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-layout-polish #messages > article.msg .reaction-summary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.nox-mobile-reaction-pill-layout-polish #messages > article.msg .reaction-summary-btn,
  body.nox-android-app.nox-mobile-reaction-pill-layout-polish #messages > article.msg .reaction-summary-btn,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-layout-polish #messages > article.msg .reaction-summary-btn {
    min-width: 32px !important;
    width: auto !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 7px !important;
    gap: 3px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(94, 234, 212, .58) !important;
    background: linear-gradient(135deg, rgba(11, 18, 38, .96), rgba(76, 29, 149, .84)) !important;
    box-shadow: 0 5px 12px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.035) !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    opacity: .98 !important;
    backdrop-filter: blur(8px) !important;
  }

  body.nox-mobile-reaction-pill-layout-polish #messages > article.msg .reaction-summary-emoji,
  body.nox-android-app.nox-mobile-reaction-pill-layout-polish #messages > article.msg .reaction-summary-emoji,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-layout-polish #messages > article.msg .reaction-summary-emoji {
    font-size: .82rem !important;
    line-height: 1 !important;
  }

  body.nox-mobile-reaction-pill-layout-polish #messages > article.msg .reaction-summary-count,
  body.nox-android-app.nox-mobile-reaction-pill-layout-polish #messages > article.msg .reaction-summary-count,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-layout-polish #messages > article.msg .reaction-summary-count {
    font-size: .62rem !important;
    min-width: 8px !important;
    line-height: 1 !important;
  }
}


/* ======================================================================
   NOX v5.1.38g - Android Mobile Reaction Pill Alignment Stabilization
   Keeps the working submit/render path from 38e/38f, but stabilizes badge
   placement so reactions sit on bubble edges and do not drift into avatars
   or compress rows when the Android keyboard changes viewport height.
   ====================================================================== */
@media (max-width: 760px) {
  body.nox-mobile-reaction-pill-alignment-stabilization #messages,
  body.nox-android-app.nox-mobile-reaction-pill-alignment-stabilization #messages,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-alignment-stabilization #messages {
    scroll-padding-bottom: 138px !important;
    padding-bottom: 18px !important;
  }

  body.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg,
  body.nox-android-app.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg {
    overflow: visible !important;
    isolation: isolate !important;
  }

  body.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg:has(.reaction-summary:not(:empty)),
  body.nox-android-app.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg:has(.reaction-summary:not(:empty)),
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg:has(.reaction-summary:not(:empty)) {
    margin-bottom: 18px !important;
  }

  body.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .msg-main,
  body.nox-android-app.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .msg-main,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .msg-main {
    position: relative !important;
    overflow: visible !important;
    contain: none !important;
  }

  /* Own messages: keep Messenger-like badge on the lower-right edge. */
  body.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg.own .msg-reactions.compact,
  body.nox-android-app.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg.own .msg-reactions.compact,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg.own .msg-reactions.compact {
    position: absolute !important;
    right: 8px !important;
    left: auto !important;
    bottom: -12px !important;
    width: auto !important;
    max-width: calc(100% - 18px) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 14 !important;
    transform: none !important;
  }

  /* Incoming messages: place the badge on the bubble edge, not near the avatar. */
  body.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg:not(.own) .msg-reactions.compact,
  body.nox-android-app.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg:not(.own) .msg-reactions.compact,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg:not(.own) .msg-reactions.compact {
    position: absolute !important;
    right: 8px !important;
    left: auto !important;
    bottom: -12px !important;
    width: auto !important;
    max-width: calc(100% - 18px) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 14 !important;
    transform: none !important;
  }

  body.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary,
  body.nox-android-app.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    max-width: 148px !important;
    min-width: 0 !important;
  }

  body.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary:empty,
  body.nox-android-app.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary:empty,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary:empty {
    display: none !important;
  }

  body.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary-btn,
  body.nox-android-app.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary-btn,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary-btn {
    min-width: 31px !important;
    width: auto !important;
    height: 21px !important;
    min-height: 21px !important;
    padding: 0 6px !important;
    gap: 3px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(94, 234, 212, .58) !important;
    background: linear-gradient(135deg, rgba(12, 20, 40, .97), rgba(76, 29, 149, .86)) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.035) !important;
    font-size: .70rem !important;
    line-height: 1 !important;
    opacity: .98 !important;
    backdrop-filter: blur(8px) !important;
  }

  body.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary-emoji,
  body.nox-android-app.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary-emoji,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary-emoji {
    font-size: .80rem !important;
    line-height: 1 !important;
  }

  body.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary-count,
  body.nox-android-app.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary-count,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .reaction-summary-count {
    font-size: .60rem !important;
    min-width: 8px !important;
    line-height: 1 !important;
  }

  body.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .msg-reply-preview,
  body.nox-android-app.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .msg-reply-preview,
  body.nox-shell-android-capacitor.nox-mobile-reaction-pill-alignment-stabilization #messages > article.msg .msg-reply-preview {
    margin-bottom: 8px !important;
  }
}