/* Minimal layer:loaded last. Calmer surfaces, Discord-sized type, less chrome.
   Delete this file's <link> in app/index.html to get the previous look back. */

.nx-app {
  --nx-bg: #15131b;
  --nx-panel: #100e15;
  --nx-rail: #0a090e;
  --nx-raised: #1e1b26;
  --nx-hover: #ffffff0a;
  --nx-text: #f2eff7;
  --nx-soft: #c9c3d4;
  --nx-muted: #8e879b;
  --nx-border: #ffffff0d;
  --nx-accent: #9d68e4;
  --nx-accent-light: #d7b6ff;
  font-family: "gg sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size:15px;
  color: var(--nx-text);
  background: var(--nx-bg);
  -webkit-font-smoothing:antialiased;
}

/* ---------- server rail ---------- */
.nx-rail { background: var(--nx-rail); border-right:0; padding:12px 0; gap:8px; }
.nx-server {
  width:48px; height:48px; border-radius:50%; border:0;
  background: var(--nx-raised); color: var(--nx-soft);
  font-size:16px !important; font-weight:600 !important;
  transition:border-radius .15s ease, background .15s ease, color .15s ease;
}
.nx-server:hover, .nx-server.is-active { border-radius:16px; background: var(--nx-accent); color:#fff; border-color:transparent; }
.nx-server.nx-home { background: var(--nx-raised); }
.nx-server.nx-home:hover, .nx-server.nx-home.is-active { background: var(--nx-accent); }
.nx-server.nx-home:hover svg, .nx-server.nx-home.is-active svg, .nx-server.nx-home:hover img, .nx-server.nx-home.is-active img { filter:brightness(0) invert(1); }
.nx-server.nx-add-server { background: var(--nx-raised); color:#3ba55d; border:0; }
.nx-server.nx-add-server:hover { background:#3ba55d; color:#fff; }
/* Discord-style pill:a dot on hover, a tall bar when selected */
.nx-server::before {
  content: ''; position:absolute; left:-12px; top:50%; width:4px; height:0;
  border-radius:0 4px 4px 0; background:#fff; transform:translateY(-50%);
  transition:height .15s ease;
}
.nx-server:hover::before { height:20px; }
.nx-server.is-active::before { height:40px; top:50%; bottom:auto; left:-12px; width:4px; background:#fff; }
.nx-rail-divider { width:32px; height:2px; border-radius:1px; background:#ffffff12; }
.nx-servers { gap:8px; padding:0 12px; margin:0; }
.nx-rail .nx-beta { display:none; }

/* ---------- channel sidebar ---------- */
.nx-sidebar { background: var(--nx-panel); border-right:0; }
.nx-server-banner { min-height:0; background:none; }
.nx-server-banner:has(> img) { min-height:120px; }
.nx-server-banner:not(:has(> img)) > .nx-sidebar-heading { min-height:48px; align-items:center; padding-bottom:0; text-shadow:none; background:none; }
.nx-sidebar-heading {
  min-height:48px; padding:0 16px; border-bottom:1px solid #00000040;
  box-shadow:0 1px 0 #ffffff06; color: var(--nx-text);
  font-size:15px !important; font-weight:600 !important;
}
.nx-sidebar-heading:hover { background: var(--nx-hover); }
.nx-sidebar-scroll { padding:12px 8px; }
.nx-section-label { font-size:12px; letter-spacing:.02em; color: var(--nx-muted); padding:16px 8px 4px; }
.nx-room {
  padding:6px 8px; margin-bottom:2px; border:0; border-radius:6px;
  color: var(--nx-muted); font-size:15px !important; font-weight:500;
}
.nx-room:hover { background: var(--nx-hover); color: var(--nx-soft); }
.nx-room.is-active { background:#ffffff12; color:#fff; border-color:transparent; }
.nx-room.has-unread { color:#fff; font-weight:600; }
.nx-room-list > .nx-room .nx-icon, .nx-room .nx-icon { width:20px; height:20px; color:inherit; opacity:.7; }
.nx-sidebar-empty { font-size:13px; color: var(--nx-muted); line-height:1.5; }

/* user panel */
.nx-user-panel { padding:10px 8px; background:var(--nx-rail); border-top:0; color: var(--nx-text); }
.nx-user-panel:hover { background: var(--nx-bg, #15131b); }
.nx-user-panel strong { font-size:14px; font-weight:600; }
.nx-user-panel small { font-size:12px; color: var(--nx-muted); margin-top:1px; }

/* ---------- main column ---------- */
.nx-header {
  height:48px; padding:0 16px; border-bottom:1px solid #00000040;
  box-shadow:0 1px 0 #ffffff06;
}
.nx-header-title > strong { font-size:16px; font-weight:600; color: var(--nx-text); }
.nx-header-title > .nx-icon { color: var(--nx-muted); }
.nx-topic { font-size:14px !important; color: var(--nx-muted) !important; border-left: 1px solid var(--nx-border); padding-left:12px; }
.nx-connection.is-connected { display:none; }
.nx-icon-button { color: var(--nx-muted); }
.nx-icon-button:hover { color: var(--nx-text); }

/* channel intro */
.nx-thread-start { padding:32px 16px 16px; }
.nx-thread-start h2 { font-size:30px; font-weight:700; letter-spacing:-.02em; color:#fff; margin-bottom:6px; }
.nx-thread-start p { font-size:15px; color: var(--nx-muted); line-height:1.5; }
.nx-thread-icon { background: var(--nx-raised) !important; border-radius:50% !important; }

/* messages */
.nx-message { padding:4px 48px 4px 16px; gap:16px; margin-top:12px; border-left:0; }
.nx-message:hover { background:#ffffff05; }
.nx-message .nx-avatar { --avatar: 40px; }
.nx-message-meta { gap:8px; margin:0 0 2px; }
.nx-message-meta strong { font-size:16px; font-weight:600; color: var(--nx-text); }
.nx-message-meta time, .nx-message-meta small { font-size:12px; color: var(--nx-muted); }
.nx-app .nx-message p { font-size: calc(16px * var(--nx-font-scale, 1)); line-height:1.375; color:var(--nx-text); }
.nx-message.is-mentioned { background:#f0b2320f; box-shadow:inset 2px 0 0 #f0b232; }
.nx-message-actions { background: var(--nx-raised); border:1px solid #00000040; border-radius:8px; box-shadow:0 4px 12px #0006; }
/* BETA tags read as noise next to every name; keep them on profiles only */
.nx-message .nx-user-badge-beta, .nx-user-panel .nx-user-badge-beta { display:none; }

/* composer */
.nx-composer-wrap { padding:0 16px 20px; }
.nx-composer { border:0; border-radius:10px; background: var(--nx-raised); padding:4px 8px; align-items:center; }
.nx-composer:focus-within { border-color:transparent; }
.nx-composer > textarea { font-size:16px; line-height:1.375; color: var(--nx-text); padding:11px 4px; height:44px; min-height:44px; }
.nx-composer > textarea::placeholder { color:var(--nx-muted); }
.nx-composer-hint { display:none; }
.nx-typing { font-size:13px; color: var(--nx-soft); padding:0 16px; }

/* member list column */
.nx-app > aside:last-child:not(.nx-sidebar) { background: var(--nx-panel); border-left:0; }

/* phones and the iOS app */
@media (max-width:760px) {
  .nx-app { font-size:15px; }
  .nx-server { width:44px; height:44px; }
  .nx-message { padding:4px 12px; gap:12px; }
  .nx-composer-wrap { padding:0 8px max(12px, env(safe-area-inset-bottom)); }
}

/* Server header:flat like Discord unless the server has a banner image */
.nx-server-banner:not(:has(> img)) { background-image:none; }
.nx-sidebar-scroll > .nx-section-label:first-child { padding-top:4px; }

/* iOS zooms into any field under 16px when it's focused; keep inputs at 16px on phones */
@media (max-width:760px) {
  input, textarea, select { font-size:16px !important; }
}

/* Category headers, Discord-style:small caps label with a chevron that turns when collapsed */
.nx-channel-category { margin-top:16px; }
.nx-channel-category > summary {
  display:flex; align-items:center; gap:4px; list-style:none;
  font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color: var(--nx-muted); padding:6px 4px 4px; cursor:pointer; user-select:none;
}
.nx-channel-category > summary::-webkit-details-marker { display:none; }
.nx-channel-category > summary::before {
  content: ''; width:6px; height:6px; margin:0 4px 0 2px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .15s ease;
}
.nx-channel-category:not([open]) > summary::before { transform:rotate(-45deg); }
.nx-channel-category > summary:hover { color: var(--nx-soft); }
.nx-channel-category[open] > summary { margin-bottom:2px; }

/* Official Nexus account tag */
.nx-user-badge-official { display:inline-flex; align-items:center; gap:2px; padding:1px 5px 1px 3px; border:0; border-radius:4px; background: var(--nx-accent, #9d68e4); color:#fff; font-size:10px; font-weight:700; letter-spacing:.03em; vertical-align:middle; }
.nx-user-badge-official .nx-icon { width:11px; height:11px; stroke-width:3; }

/* Staff:servers tab */
.nx-staff-servers { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.nx-staff-server { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:10px; background: var(--nx-raised, #1e1b26); }
.nx-staff-server strong { display:block; font-size:15px; color: var(--nx-text, #f2eff7); }
.nx-staff-server small { color: var(--nx-muted, #8e879b); font-size:12px; }
.nx-staff-server form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.nx-staff-server input { height:36px; min-width:220px; border:1px solid #ffffff14; border-radius:8px; background:var(--nx-rail); color: var(--nx-text, #f2eff7); font:inherit; padding:0 10px; }
.nx-staff-server .nx-error { flex-basis:100%; margin:0; }
/* What's new */
.nx-release{display:grid;gap:14px}
.nx-release-version{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-accent)}
.nx-release-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nx-release-list li{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:baseline;font-size:14px;line-height:1.45}
.nx-release-list strong{font-weight:700;color:var(--nx-text,#f2eff7)}
.nx-release-list span{color:var(--nx-soft,#c9c3d4)}
.nx-release .nx-button{justify-self:end}