:root {
  /* black, white and greys; colour only where it means something
     (speaking, errors/danger, connection quality) */
  --ink-0: #0a0a0a;
  --ink-1: #111111;
  --ink-2: #161616;
  --ink-3: #1f1f1f;
  --ink-4: #2a2a2a;
  --line: #262626;
  --text: #ededed;
  --muted: #9b9b9b;
  --dim: #616161;
  --accent: #ededed;
  --accent-hover: #ffffff;
  --on-accent: #0a0a0a;
  --gold: #d6b25e;
  --speak: #5fbf8f;
  --danger: #e0525a;
  --radius: 10px;
  --serif: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* headings: same family as the UI */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink-2);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--danger); min-height: 1.4em; margin: 0; font-size: 13px; }
::selection { background: #ffffff33; }
* { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }

/* ---- controls ---- */
label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
input, select {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s, background .15s;
}
input:focus, select:focus { border-color: #8a8a8a; background: var(--ink-1); }
input[type="range"] { padding: 0; border: 0; background: none; accent-color: var(--accent); }
label.check { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 14px; }
label.check input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
label.check .small { color: var(--muted); }
button { cursor: pointer; }
.primary {
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  color: var(--on-accent);
  letter-spacing: .01em;
  transition: background .15s, transform .05s;
}
.primary:hover { background: var(--accent-hover); }
.primary:active { transform: translateY(1px); }
.primary:disabled { opacity: .6; cursor: default; }
.secondary {
  background: var(--ink-4);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 14px;
  font-weight: 600;
}
.secondary:hover { background: #343434; }
.secondary:disabled { opacity: .6; cursor: default; }
.link { background: none; border: 0; padding: 0; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--text); }
.danger, .link.danger { color: var(--danger); }
input:disabled { opacity: .6; }

.icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  transition: background .12s, color .12s;
}
.icon:hover { background: var(--ink-3); color: var(--text); }
.icon:disabled { opacity: .45; cursor: not-allowed; }
.icon svg { grid-area: 1 / 1; width: 19px; height: 19px; }
.icon.small { width: 24px; height: 24px; border-radius: 6px; }
.icon.small svg { width: 15px; height: 15px; }
.slash { display: none; }
.icon.off { color: var(--danger); }
.icon.off .slash, .status-icon .slash { display: block; }

/* ---- start ---- */
.start-screen {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 35%, #1a1a1a 0%, var(--ink-0) 70%);
}
.start-card { width: min(340px, 100%); display: grid; justify-items: center; gap: 16px; text-align: center; }
.start-logo { width: 88px; height: 88px; }
.start-word { height: 14px; opacity: .9; margin-bottom: 8px; }
.start-card p { margin: 0; line-height: 1.6; }
.start-card strong { color: var(--text); font-weight: 600; }
#pinSetup, #joinStep { display: grid; gap: 12px; width: 100%; }
#joinBtn { width: 100%; padding: 12px; font-size: 15px; letter-spacing: .08em; }

/* ---- app layout ---- */
#app { display: flex; height: 100%; }
#sidebar {
  width: 268px;
  flex: none;
  background: var(--ink-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px; }
.brand-word { height: 11px; opacity: .92; }
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 4px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
#channels { flex: 1; overflow-y: auto; padding: 4px 10px 12px; }

.channel { margin-bottom: 2px; }
.channel-row { position: relative; display: flex; align-items: center; border-radius: 8px; }
.channel-row:hover { background: var(--ink-3); }
.channel.active .channel-row { background: var(--ink-4); }
.channel.active .channel-row::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.channel-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  padding: 8px 10px;
  color: var(--muted);
  text-align: left;
}
.channel-name svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.channel-name .cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.channel-row:hover .channel-name, .channel.active .channel-name { color: var(--text); }
.channel .count { font-size: 11px; color: var(--dim); padding-right: 10px; }
.channel-tools { display: none; gap: 2px; padding-right: 4px; }
.channel-row:hover .channel-tools { display: flex; }
.channel-row:hover .count { display: none; }
.channel-edit { flex: 1; margin: 3px; padding: 5px 9px; font-size: 14px; }
.channel ul { list-style: none; margin: 2px 0 6px; padding: 0 0 0 30px; }
.channel li { display: flex; align-items: center; gap: 8px; padding: 3px 6px; font-size: 14px; color: var(--muted); border-radius: 6px; }
.channel li.speaking { color: var(--text); }
.uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.new-channel { margin: 4px 0; }
.new-channel input { width: 100%; padding: 7px 10px; font-size: 14px; }

.role { display: inline-grid; place-items: center; flex: none; width: 15px; height: 15px; }
.role svg { width: 13px; height: 13px; }
.role.admin { color: var(--text); }
.role.mod { color: var(--muted); }
.msg .head .role { align-self: center; }

.avatar {
  --h: 20;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: hsl(var(--h) 12% 34%);
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow .08s;
}
.speaking .avatar, .avatar.speaking { box-shadow: 0 0 0 2px var(--ink-1), 0 0 0 4px var(--speak); }
#meAvatar { width: 34px; height: 34px; font-size: 14px; }

.status-icon { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--danger); }
.status-icon svg { grid-area: 1 / 1; width: 15px; height: 15px; }

/* ---- me panel ---- */
#mePanel { background: var(--ink-0); border-top: 1px solid var(--line); padding: 10px; display: grid; gap: 8px; }
.me-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.me-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.me-info > div { min-width: 0; }
#meName { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#connState { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#connState.bad { color: var(--danger); }
.controls { display: flex; gap: 0; }
#pttBtn {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--ink-3);
  font-weight: 600;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#pttBtn.down { background: var(--speak); color: #08140e; }

/* ---- main / chat ---- */
#app > main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ink-2); }
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 0 22px;
  height: 58px;
  flex: none;
  border-bottom: 1px solid var(--line);
}
.title-wrap { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
#channelTitle { font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#messages { flex: 1; overflow-y: auto; padding: 18px 0 10px; display: flex; flex-direction: column; }
.msg { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 2px 22px; }
.msg.first { margin-top: 14px; padding-top: 4px; }
.msg:hover { background: #ffffff05; }
.msg .avatar { width: 40px; height: 40px; font-size: 15px; grid-row: span 2; margin-top: 2px; }
.msg .head { display: flex; align-items: baseline; gap: 8px; }
.msg .who { font-weight: 600; }
.msg time { color: var(--dim); font-size: 11px; }
.msg .side-time { grid-column: 1; text-align: right; font-size: 10px; color: var(--dim); opacity: 0; padding-top: 3px; }
.msg:hover .side-time { opacity: 1; }
.msg .text { grid-column: 2; white-space: pre-wrap; overflow-wrap: anywhere; color: #ddd6c8; }
.msg-tools { position: absolute; right: 18px; top: -12px; display: none; background: var(--ink-1); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.msg:hover .msg-tools { display: flex; }
.msg-tools .icon { width: 28px; height: 28px; }
.msg-tools .icon:hover { color: var(--danger); }
.sys { align-self: center; margin: 14px 22px 4px; font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 10px; width: calc(100% - 44px); }
.sys::before, .sys::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.empty { margin: auto; display: grid; justify-items: center; gap: 14px; color: var(--dim); text-align: center; padding: 24px; }
.empty img { width: 120px; height: 120px; opacity: .14; }
.empty .ename { font-family: var(--serif); font-size: 20px; color: var(--muted); }

#chatForm { padding: 4px 18px 18px; }
#chatInput { width: 100%; padding: 13px 16px; border-radius: 12px; background: var(--ink-3); }
.banner { display: flex; align-items: center; gap: 12px; margin: 12px 18px 0; padding: 10px 14px; background: var(--ink-3); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); font-size: 14px; }
.banner span { flex: 1; }
.banner .primary { padding: 6px 12px; white-space: nowrap; }

#toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  background: var(--ink-0);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  box-shadow: 0 8px 30px #0008;
  z-index: 10;
  max-width: calc(100% - 32px);
}

/* ---- settings ---- */
dialog {
  background: var(--ink-1);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  width: min(460px, calc(100% - 32px));
  box-shadow: 0 20px 60px #000a;
}
dialog::backdrop { background: #000b; backdrop-filter: blur(2px); }
.settings { padding: 22px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.settings p { margin: 0; }
.settings h3 { margin: 0 0 4px; font-size: 14px; }
.tab-panel { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; color: var(--muted); font-weight: 600; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.list > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink-3); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.list > li.muted { background: none; border: 0; padding: 0; }
.members { max-height: 52vh; overflow-y: auto; }
.members > li { display: grid; gap: 8px; justify-content: stretch; }
.member-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.member-head .who { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.member-head select { padding: 3px 6px; font-size: 12px; border-radius: 6px; }
.perms { display: flex; flex-wrap: wrap; gap: 4px 14px; }
label.check.inline { align-items: center; gap: 6px; font-size: 13px; }
label.check.inline input { margin: 0; }
.member-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.member-actions:empty { display: none; }
.add-member, .inline-form { display: flex; gap: 8px; }
.add-member input, .inline-form input { flex: 1 1 0; width: 0; min-width: 0; }
.handle { color: var(--muted); font-weight: 400; font-size: 13px; }
.row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.row strong { color: var(--text); }
.role-card { background: var(--ink-3); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; margin-bottom: 10px; }
.role-card h3 { display: flex; align-items: center; gap: 8px; }
#pttBind { background: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 6px 14px; min-width: 80px; }
.meter { position: relative; height: 8px; background: var(--ink-3); border-radius: 4px; overflow: hidden; }
#meterFill { height: 100%; width: 0; background: var(--dim); }
#meterFill.hot { background: var(--speak); }
#meterMark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); }

/* ---- phone ---- */
@media (max-width: 700px) {
  #app { flex-direction: column; }
  #sidebar { width: auto; max-height: 52%; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 10px 14px 6px; }
  #channels { padding: 4px 8px 8px; }
  #topbar { height: 48px; padding: 0 10px 0 16px; }
  .msg { padding: 2px 14px; }
  .msg-tools { display: flex; position: static; grid-column: 2; justify-self: start; background: none; border: 0; padding: 0; }
  .msg:not(:hover) .msg-tools { display: none; }
  #chatForm { padding: 4px 12px 12px; }
}

/* ---- gate (sign-in): deliberately bare ---- */
body.gate {
  --gate-bg: #0a0a0a;
  --gate-line: #252525;
  --gate-text: #dcdcdc;
  --gate-dim: #5e5e5e;
  --gate-red: #e0525a;
  --gate-hover: #ffffff;
  background: var(--gate-bg);
  color: var(--gate-text);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  display: grid;
  place-items: center;
  padding: 16px;
}
.gate-box { width: min(300px, 100%); display: grid; justify-items: center; gap: 18px; margin-top: -6vh; }
.gate-logo { width: 96px; height: 96px; }
.gate-word { height: 11px; opacity: .55; margin-top: -2px; }
.gate .step { width: 100%; display: grid; gap: 12px; justify-items: center; margin-top: 18px; }
.gate .field { position: relative; width: 100%; display: flex; align-items: center; }
.gate input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gate-line);
  border-radius: 0;
  padding: 10px 34px 10px 4px;
  color: var(--gate-text);
  font-family: inherit;
  transition: border-color .15s;
}
.gate .field .at + input { padding-left: 20px; }
.gate input::placeholder { color: var(--gate-dim); }
.gate input:focus { border-color: var(--gate-text); }
.gate input.pin { text-align: center; letter-spacing: .6em; text-indent: .6em; padding-left: 34px; font-size: 16px; }
.gate input.pin::placeholder { letter-spacing: .3em; }
.gate .at { position: absolute; left: 4px; color: var(--gate-dim); pointer-events: none; }
.gate .go {
  position: absolute;
  right: 0;
  width: 30px;
  height: 30px;
  background: none;
  border: 0;
  color: var(--gate-dim);
  font-size: 16px;
}
.gate .go:hover, .gate .go:focus-visible { color: var(--gate-hover); outline: none; }
.gate .who { color: var(--gate-dim); font-size: 12px; }
.gate .hint { margin: 0; color: var(--gate-dim); font-size: 12px; text-align: center; line-height: 1.6; }
.gate .ghost {
  background: none;
  border: 1px solid var(--gate-line);
  border-radius: 999px;
  padding: 8px 18px;
  color: var(--gate-text);
  font-family: inherit;
  font-size: 13px;
}
.gate .ghost:hover { border-color: var(--gate-text); }
.gate .link { color: var(--gate-dim); font-family: inherit; font-size: 12px; text-decoration: none; }
.gate .link:hover { color: var(--gate-text); }
.gate-error { margin: 0; min-height: 1.4em; color: var(--gate-red); font-size: 12px; text-align: center; }
.gate button:disabled, .gate input:disabled { opacity: .5; }
#membersError:empty, #rolesError:empty { display: none; }

/* ---- presence, voice and connection ---- */
.people { list-style: none; margin: 0 0 8px; padding: 0 10px 0 14px; overflow-y: auto; max-height: 30vh; }
.people li { display: flex; align-items: center; gap: 8px; padding: 3px 6px; font-size: 14px; color: var(--dim); }
.people .avatar { opacity: .7; }
.channel.voice-here > .channel-row .channel-name svg { color: var(--speak); }

#voicePanel { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; border-bottom: 1px solid var(--line); }
.vp-info { flex: 1; min-width: 0; }
.vp-state { font-size: 12px; font-weight: 600; color: var(--dim); }
#voicePanel.in .vp-state { color: var(--speak); }
#vpChannel { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-stat { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.link-stat:hover { color: var(--text); border-color: var(--ink-4); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
[data-q="good"] .dot { background: var(--speak); }
[data-q="meh"] .dot { background: var(--gold); }
[data-q="bad"] .dot { background: var(--danger); }
button.leave { color: #fff; background: #b8353c; border-radius: 8px; }
button.leave:hover { background: var(--danger); }

#topbar { gap: 10px; }
#topbar .title-wrap { flex: 1; }
#voiceBtn { padding: 6px 14px; white-space: nowrap; }
.admin-bar { background: var(--ink-1); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; font-variant-numeric: tabular-nums; }
.admin-bar::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--speak); vertical-align: 1px; }
.admin-bar[data-q="meh"]::before { background: var(--gold); }
.admin-bar[data-q="bad"]::before { background: var(--danger); }
.admin-bar:hover { color: var(--text); }

dl.stats { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
dl.stats dt { color: var(--muted); cursor: help; }
dl.stats dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.q-label { font-size: 12px; font-weight: 600; margin-left: 8px; }
.q-label[data-q="good"] { color: var(--speak); }
.q-label[data-q="meh"] { color: var(--gold); }
.q-label[data-q="bad"] { color: var(--danger); }
#tab-server h3 { margin: 6px 0 2px; }
#serverInfo { display: grid; gap: 8px; }
table.conns { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; display: block; overflow-x: auto; }
table.conns th, table.conns td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.conns th { color: var(--muted); font-weight: 600; }
ul.errors { margin: 0; padding-left: 16px; color: var(--muted); }
#settings:has(#tab-server:not(.hidden)) { width: min(720px, calc(100% - 32px)); }

@media (max-width: 720px) {
  .admin-bar { max-width: 38vw; }
}
@media (max-width: 520px) { .admin-bar { display: none; } }

/* ---- categories, private channels, timers, colours ---- */
.head-tools { display: flex; gap: 2px; }
.category { margin-top: 10px; }
.category-head { position: relative; display: flex; align-items: center; border-radius: 6px; }
.category-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px 4px; color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.category-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-name:hover { color: var(--muted); }
.category-name .chev { width: 12px; height: 12px; flex: none; transition: transform .12s; }
.category.collapsed .chev { transform: rotate(-90deg); }
.category-head:hover .channel-tools { display: flex; }
.chan-timer { display: inline-grid; color: var(--dim); padding-right: 6px; }
.chan-timer svg { width: 13px; height: 13px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.chip svg { width: 12px; height: 12px; }

.composer { position: relative; display: flex; align-items: center; gap: 6px; background: var(--ink-3); border: 1px solid var(--line); border-radius: 12px; padding: 0 6px; }
.composer:focus-within { border-color: #8a8a8a; }
.composer #chatInput { flex: 1; border: 0; background: none; padding: 13px 8px; border-radius: 0; }
#timerBtn { width: auto; min-width: 34px; display: inline-flex; gap: 4px; padding: 0 6px; font-size: 12px; font-weight: 600; }
#timerBtn svg { width: 18px; height: 18px; }
#timerBtn.on { color: var(--text); background: var(--ink-4); }
.menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; display: grid; min-width: 150px; background: var(--ink-1); border: 1px solid var(--line); border-radius: 10px; padding: 4px; box-shadow: 0 10px 30px #000a; }
.menu button { background: none; border: 0; text-align: left; padding: 7px 10px; border-radius: 6px; font-size: 14px; color: var(--muted); }
.menu button:hover { background: var(--ink-3); color: var(--text); }
.menu button.on { color: var(--text); font-weight: 600; }
.menu button.on::after { content: " ✓"; }
.expires { display: inline-block; margin-left: 8px; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.expires::before { content: "⏱ "; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; background: var(--c); padding: 0; }
.swatch.auto { background: conic-gradient(from 0deg, #f2b8b5, #f3e08c, #b5e3a1, #9cc8f2, #e3a6e6, #f2b8b5); }
.swatch[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--ink-1) inset; }

.allowed { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; padding: 4px 2px; }
.dialog-actions { display: flex; align-items: center; gap: 8px; }
.dialog-actions .spacer { flex: 1; }
#channelDialog h3 { margin: 0; }
#channels { min-height: 120px; }
@media (max-width: 700px) {
  .people { max-height: 84px; }
  #onlineHead { padding-top: 4px; }
}

/* ---- ordering, pins, people search ---- */
.brand .head-tools { margin-left: auto; }
.channel-row[draggable="true"], .category-head[draggable="true"] { cursor: grab; }
.dragging { opacity: .4; }
.drop-before { box-shadow: inset 0 2px 0 var(--text); }
.drop-into { background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--muted); }
.category.pinned .category-name { color: var(--muted); }
.channel-tools .icon.on { color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.person-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ink-4); border-radius: 999px; padding: 3px 4px 3px 4px; font-size: 13px; color: var(--text); }
.person-chip .avatar { width: 20px; height: 20px; font-size: 10px; }
.person-chip button { background: none; border: 0; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 6px 0 2px; }
.person-chip button:hover { color: var(--text); }
.people-search { display: grid; gap: 4px; margin-top: 8px; }
.people-search input { width: 100%; }
.results { display: grid; gap: 2px; }
.results button { display: flex; align-items: center; gap: 8px; background: none; border: 0; border-radius: 6px; padding: 6px 8px; text-align: left; font-size: 14px; color: var(--text); }
.results button:hover, .results button:focus-visible { background: var(--ink-3); outline: none; }
.results .muted { font-size: 12px; }

.channel-section + .channel-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border, #292929); }
.channel-section-title { margin: 12px 12px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #aaa); }
.channel-section-empty { margin: 8px 12px; font-size: 12px; color: var(--muted, #aaa); }

/* Attachments, reactions and direct transfers share the existing neutral palette. */
.rich-dialog { width: min(540px, calc(100vw - 24px)); max-height: 90vh; overflow-y: auto; }
.rich-dialog .settings { width: 100%; box-sizing: border-box; }
.picker-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.picker-heading h3 { margin:0; }
.share-details { overflow-wrap:anywhere; }
#sharePreview { display:flex; justify-content:center; border-radius:10px; overflow:hidden; }
#sharePreview img { max-width:100%; max-height:300px; object-fit:contain; }
#shareRecipientRow label { display:grid; gap:8px; }
.emoji-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:4px; max-height:300px; overflow-y:auto; }
.emoji-choice { min-height:44px; border:0; background:transparent; border-radius:6px; font-size:25px; cursor:pointer; }
.emoji-choice:hover, .emoji-choice:focus-visible { background:var(--ink-3); }
.message-attachment, .message-reactions { grid-column:2; }
.message-attachment { display:flex; flex-direction:column; align-items:start; gap:5px; margin:6px 0; color:var(--muted); width:fit-content; max-width:100%; font-size:12px; overflow-wrap:anywhere; }
.message-attachment img { max-width:min(360px,100%); max-height:300px; border-radius:10px; object-fit:contain; margin-top:4px; }
.message-reactions { display:flex; flex-wrap:wrap; gap:5px; margin:4px 0; }
.reaction-pill, .reaction-add { background:var(--ink-3); color:var(--muted); border:1px solid var(--line); border-radius:14px; padding:3px 8px; cursor:pointer; min-height:28px; }
.reaction-pill.selected { border-color:var(--accent); color:var(--paper); }
.reaction-add { opacity:0; }
.msg:hover .reaction-add, .msg:focus-within .reaction-add { opacity:1; }
#transferTray { padding:0 18px; max-height:190px; overflow-y:auto; }
.transfer-row { display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:12px; margin-bottom:8px; border:1px solid var(--line); border-radius:10px; background:var(--ink-2); }
.transfer-row strong { font-size:13px; overflow-wrap:anywhere; }
.transfer-row > span, .transfer-row progress { grid-column:1; }
.transfer-row progress { width:100%; height:5px; accent-color:var(--accent); }
.transfer-controls { grid-column:2; grid-row:1 / span 3; display:flex; gap:6px; flex-direction:column; justify-content:center; }
@media (hover:none) { .reaction-add { opacity:1; } .msg-tools { position:static; display:flex; grid-column:2; width:fit-content; } }
@media (max-width:600px) { .composer > .icon { min-width:32px; width:32px; } #transferTray { padding:0 12px; } .transfer-row { grid-template-columns:1fr; } .transfer-controls { grid-column:1; grid-row:auto; flex-direction:row; } }
/* Member rail and profile surfaces */
#memberSidebar { width:266px; flex:none; border-left:1px solid var(--line); background:var(--ink-1); display:flex; flex-direction:column; min-height:0; }
.member-sidebar-heading { padding:22px 16px 12px; display:flex; align-items:start; justify-content:space-between; }
.member-sidebar-heading h2 { font-size:14px; margin:0 0 5px; }
.member-sidebar-heading h2 span { color:var(--dim); margin-left:5px; }
.member-sidebar-heading p { color:var(--dim); font-size:11px; margin:0; text-transform:uppercase; letter-spacing:.08em; }
.member-sidebar-actions { display:flex; align-items:center; gap:8px; padding:0 14px 12px; }
.member-sidebar-actions .secondary { flex:1; }
.member-search { padding:0 12px 10px; }
.member-search input { width:100%; font-size:12px; }
#memberCards { overflow-y:auto; padding:2px 10px 16px; display:grid; align-content:start; gap:8px; }
.member-card { width:100%; display:flex; gap:10px; align-items:center; min-height:90px; text-align:left; position:relative; border:1px solid #ffffff0c; border-radius:10px; padding:12px; color:var(--paper); overflow:hidden; isolation:isolate; background-color:#191b20; }
.member-card::before,.profile-cover::before,.profile-preview-cover::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--profile-background,linear-gradient(115deg,#20252c,#101113)); opacity:.7; }
.member-card::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#10111488,#101114cc); }
.member-card:hover { border-color:#ffffff35; }
.member-info { display:grid; gap:4px; min-width:0; flex:1; }
.member-info strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.member-status { font-size:10px; color:#c4c7ce; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.member-online-dot { position:absolute; top:12px; right:12px; width:6px; height:6px; border-radius:50%; background:#86c6a0; box-shadow:0 0 0 3px #1118; }
.member-avatar,.profile-avatar { width:38px; height:38px; object-fit:cover; border-radius:50%; flex:none; background:#24272d; }
.avatar.has-photo { padding:0; overflow:hidden; background:transparent; }
.avatar.has-photo img { display:block; width:100%; height:100%; object-fit:cover; }
#meAvatar { cursor:pointer; }
.role-pills { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.role-pill { --role-color:#b8bcc6; font-size:9px; font-weight:600; line-height:1.3; padding:3px 6px; color:var(--role-color); border:1px solid color-mix(in srgb,var(--role-color) 35%,transparent); background:color-mix(in srgb,var(--role-color) 9%,#15161ae6); border-radius:5px; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.base-admin { --role-color:#eed4a3; }.base-mod { --role-color:#a9c8dd; }.base-member { --role-color:#a7acb5; }
.community-tools { display:flex; align-items:center; gap:3px; margin-left:auto; }
.notification-button { position:relative; }
#notificationBadge { position:absolute; right:-2px; top:0; background:#d5b77c; color:#171717; font-size:9px; min-width:12px; border-radius:6px; }
#notificationBadge:empty { display:none; }
#membersClose { display:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.community-dialog { width:min(580px,calc(100vw - 24px)); max-height:92vh; overflow-y:auto; }
.community-dialog h2 { font-size:20px; margin:0; letter-spacing:-.02em; }
.community-dialog h3 { font-size:13px; }
.community-dialog .settings { min-width:0; }
.community-dialog input:not([type=checkbox]):not([type=color]),.community-dialog select,.community-dialog textarea { width:100%; }
.community-dialog textarea { background:var(--ink-3); border:1px solid var(--line); border-radius:8px; padding:10px; color:var(--paper); resize:vertical; font-family:inherit; }
.profile-preview { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--ink-2); padding-bottom:14px; }
.profile-preview > strong,.profile-preview > .role-pills { margin:10px 16px 0; display:flex; }
.profile-cover,.profile-preview-cover { position:relative; isolation:isolate; background:#20242d; border-radius:10px; height:125px; margin-bottom:38px; }
.profile-preview-cover { border-radius:0; height:105px; margin-bottom:34px; }
.large-avatar { width:76px; height:76px; object-fit:cover; border-radius:50%; border:5px solid var(--ink-2); position:absolute; left:16px; bottom:-30px; background:#232831; }
.profile-bio { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; color:var(--muted); }
.profile-status { font-size:13px; }
.avatar-presets { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.avatar-preset { border:2px solid transparent; padding:5px; background:var(--ink-3); border-radius:10px; min-width:0; }
.avatar-preset img { width:100%; height:auto; aspect-ratio:1; }
.avatar-preset[aria-pressed=true] { border-color:var(--accent); }
.photo-upload { font-size:12px; margin-top:12px; display:grid; gap:8px; }
.asset-credit { font-size:10px; color:var(--dim); margin:0; }
.role-checks { display:flex; flex-wrap:wrap; gap:8px 14px; }
.role-checks .check { font-size:12px; }
.role-create { display:grid; grid-template-columns:1fr 65px; gap:10px; }
.role-create .check,.role-create button { grid-column:1/-1; }
.custom-role-row { display:grid; grid-template-columns:1fr 44px; gap:8px; padding:14px 0; border-bottom:1px solid var(--line); }
.custom-role-row small,.custom-role-row label { grid-column:1/-1; }
.invite-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; padding:12px 0; border-bottom:1px solid var(--line); }
#inviteForm { display:grid; gap:14px; }
#inviteResult { display:grid; gap:12px; }
.notification-row,.pinned-message-row { display:block; text-align:left; width:100%; border:1px solid var(--line); background:var(--ink-3); color:var(--muted); padding:14px; margin-bottom:8px; border-radius:8px; line-height:1.5; font-size:13px; overflow-wrap:anywhere; }
.notification-row.unread { border-left:3px solid var(--accent); color:var(--paper); }
.mention-menu { position:absolute; left:8px; right:8px; bottom:calc(100% + 8px); max-height:250px; overflow-y:auto; border:1px solid var(--line); border-radius:10px; padding:5px; background:var(--ink-1); box-shadow:0 8px 30px #0008; z-index:30; }
.mention-option { display:block; width:100%; text-align:left; padding:10px 12px; border:0; border-radius:6px; background:transparent; color:var(--paper); }
.mention-option.selected,.mention-option:hover { background:var(--ink-3); }
.mention-token { color:#dfc494; background:#d5b77c13; border-radius:3px; padding:0 2px; }
.msg.mentioned { background:#d5b77c0b; border-left:2px solid #d5b77c80; padding-left:20px; }
.msg.message-highlight { background:#d5b77c24; }
.profile-link { cursor:pointer; }.profile-link:hover { text-decoration:underline; }
.msg .head .role-pills { margin:0; }.msg .head { flex-wrap:wrap; }
.message-pin-action { font-size:10px; border:0; color:var(--muted); background:transparent; padding:4px 6px; }
.pinned-marker { grid-column:2; color:var(--dim); font-size:10px; order:-1; }
.capacity-bubble { font-variant-numeric:tabular-nums; border:1px solid #ffffff19; padding:2px 5px; border-radius:6px; font-size:10px; }
.capacity-bubble.full { color:#e8bb98; border-color:#e8bb9840; background:#e8bb980a; }
.banner-midnight { --profile-background:linear-gradient(125deg,#263043,#11131a); }
.banner-aurora { --profile-background:radial-gradient(ellipse at 10% 0%,#438b75aa,transparent 65%),linear-gradient(125deg,#183e49,#131a27); }
.banner-dunes { --profile-background:radial-gradient(ellipse at 70% 120%,#b58b51,transparent 65%),linear-gradient(150deg,#57442e,#1c2123); }
.banner-ocean { --profile-background:linear-gradient(160deg,#224e68,#132c3b 50%,#142427); }
.banner-ember { --profile-background:radial-gradient(ellipse at 0% 0%,#9b513a,transparent 75%),linear-gradient(125deg,#38232a,#171c20); }
.banner-grid { --profile-background:repeating-linear-gradient(0deg,#ffffff09 0 1px,transparent 1px 16px),repeating-linear-gradient(90deg,#ffffff09 0 1px,transparent 1px 16px),linear-gradient(135deg,#24424b,#141c25); }
.community-gate { overflow-y:auto; }
.login-card { width:min(420px,calc(100vw - 36px)); margin:auto; padding:34px 0; }
.login-brand { display:flex; align-items:center; gap:15px; margin-bottom:36px; }
.login-card h1 { font-size:30px; margin:8px 0 10px; letter-spacing:-.04em; }
.login-card .eyebrow { color:var(--dim); font-size:9px; letter-spacing:.2em; }
.login-tabs { display:flex; border-bottom:1px solid var(--line); margin:26px 0 22px; }
.login-tabs button { flex:1; background:none; border:0; border-bottom:2px solid transparent; padding:12px; color:var(--dim); }
.login-tabs button[aria-selected=true] { color:var(--paper); border-bottom-color:var(--accent); }
.login-form { display:grid; gap:18px; margin-bottom:14px; }
.login-form label { display:grid; gap:8px; font-size:12px; color:var(--muted); }
.login-form input { width:100%; }
.login-card > .secondary { width:100%; }
@media (max-width:1200px) { #adminBar { display:none!important; } #sidebar { width:230px; } #memberSidebar { width:240px; } }
@media (max-width:950px) { #memberSidebar { display:none; position:fixed; right:0; top:0; bottom:0; width:min(300px,90vw); z-index:50; box-shadow:-10px 0 40px #0008; } body.members-open #memberSidebar { display:flex; } #membersClose { display:block; } }
@media (max-width:600px) { #sidebar { width:auto; } .avatar-presets { grid-template-columns:repeat(4,1fr); } .community-tools .icon { width:30px; } }

.banner-flag-ae { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/ae.svg") center/cover; }
.banner-flag-bg { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/bg.svg") center/cover; }
.banner-flag-gb { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/gb.svg") center/cover; }
.banner-flag-us { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/us.svg") center/cover; }
.banner-flag-de { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/de.svg") center/cover; }
.banner-flag-fr { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/fr.svg") center/cover; }
.banner-flag-jp { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/jp.svg") center/cover; }
.banner-flag-in { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/in.svg") center/cover; }
.banner-flag-ca { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/ca.svg") center/cover; }
.banner-flag-br { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/br.svg") center/cover; }
.banner-flag-ua { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/ua.svg") center/cover; }
.banner-flag-es { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/es.svg") center/cover; }
.banner-flag-it { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/it.svg") center/cover; }
.banner-flag-tr { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/tr.svg") center/cover; }
.banner-flag-sa { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/sa.svg") center/cover; }
.banner-flag-ph { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/ph.svg") center/cover; }
.banner-flag-nl { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/nl.svg") center/cover; }
.banner-flag-eg { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/eg.svg") center/cover; }
.banner-flag-au { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/au.svg") center/cover; }
.banner-flag-kr { --profile-background:linear-gradient(110deg,#11161b26 0%,#11161b73 55%,#11161be6 100%),url("flags/kr.svg") center/cover; }
.msg:focus-within .msg-tools { display:flex; }

@media (min-width:951px) { body.members-collapsed #memberSidebar { display:none; } }

.banner-dropdown { border:1px solid var(--line); border-radius:10px; background:var(--ink-2); overflow:hidden; }
.banner-dropdown > summary { display:flex; align-items:center; gap:12px; padding:13px 14px; cursor:pointer; list-style:none; min-height:56px; }
.banner-dropdown > summary::-webkit-details-marker { display:none; }
.banner-dropdown > summary::after { content:'⌄'; margin-left:auto; color:var(--muted); transition:transform .18s ease-out; }
.banner-dropdown[open] > summary::after { transform:rotate(180deg); }
.banner-dropdown > summary:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; border-radius:8px; }
.banner-summary-swatch { display:block; flex:none; width:46px; height:32px; border:1px solid #ffffff1a; border-radius:6px; background:var(--profile-background,linear-gradient(125deg,#263043,#11131a)); }
.banner-summary-label { display:grid; gap:4px; font-size:13px; font-weight:600; }
#profileBannerSelection { color:var(--muted); font-size:11px; font-weight:400; }
.banner-dropdown-content { display:grid; gap:16px; padding:16px 14px; border-top:1px solid var(--line); }
.banner-dropdown-content > label { display:grid; gap:8px; }
.banner-preview-section { display:grid; gap:10px; }
.banner-preview-section h3,.banner-preview-section p,.banner-dropdown-content > p { margin:0; }
.banner-live-preview.profile-cover { height:110px; margin:0; border:1px solid #ffffff0d; }
.banner-member-preview { max-width:320px; cursor:default; }
/* Flag SVGs stretch to these wide bounds; the dark gradient blends the artwork. */
.member-card[class*="banner-flag-"]::before,
.profile-cover[class*="banner-flag-"]::before,
.profile-preview-cover[class*="banner-flag-"]::before { background-size:100% 100%,100% 100%; }

/* Compact member rail: role hierarchy, discreet tools and on-demand search. */
.member-sidebar-heading { padding:15px 12px 10px; align-items:center; gap:8px; }
.member-sidebar-heading h2 { margin:0; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.member-sidebar-heading h2 span { font-variant-numeric:tabular-nums; }
.member-header-tools { display:flex; align-items:center; gap:1px; margin-left:auto; }
.member-header-tools .icon { width:26px; height:28px; color:var(--dim); border-radius:6px; }
.member-header-tools .icon:hover,.member-header-tools .icon.active { background:var(--ink-3); color:var(--paper); }
.member-header-tools svg { width:15px; height:15px; }
.member-search { display:flex; align-items:center; gap:4px; margin:0 12px 8px; padding:0 3px 0 10px; border:1px solid var(--line); border-radius:7px; background:var(--ink-2); }
.member-search label { min-width:0; flex:1; }
.member-search input { padding:8px 0; min-height:32px; border:0; background:transparent; font-size:11px; }
.member-search:focus-within { border-color:#ffffff40; }
.member-search input:focus { outline:none; box-shadow:none; }
#memberCards { padding:0 10px 16px; gap:0; }
.member-role-section { margin-top:14px; }
.member-role-section:first-child { margin-top:5px; }
.member-role-heading { display:flex; align-items:center; gap:7px; padding:8px 4px; margin:0; font-size:10px; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--group-color,var(--muted)); }
.member-role-count { font-size:10px; font-weight:400; color:var(--dim); }
.member-role-count::before { content:'—'; margin-right:7px; }
.member-role-list { display:grid; gap:6px; }
.member-role-list .member-card { min-height:76px; padding:10px; }
.member-role-list .member-avatar { width:32px; height:32px; }
.member-role-list .member-info { gap:3px; }
.member-role-list .member-info strong { font-size:12px; }
.member-search-empty { font-size:12px; color:var(--dim); padding:14px 4px; }
.role-order-controls { grid-column:1 / -1; display:flex; gap:4px; align-items:center; }
.role-order-controls > small { margin-right:auto; }
@media (hover:none) { .member-header-tools .icon { width:30px; height:36px; } }

/* Dense member rows: status belongs to section headings, not every row. */
#memberCards .member-row { min-height:40px; height:40px; padding:4px 7px; border:0; border-radius:5px; background-color:transparent; gap:9px; }
#memberCards .member-row::before { opacity:.28; }
#memberCards .member-row::after { opacity:.45; }
#memberCards .member-row:hover { background-color:#ffffff08; }
#memberCards .member-row:hover::before { opacity:.4; }
.member-avatar-wrap { position:relative; width:28px; height:28px; flex:none; }
#memberCards .member-row .member-avatar { display:block; width:28px; height:28px; }
.member-row .member-online-dot { width:7px; height:7px; top:auto; left:auto; right:-1px; bottom:-1px; border:2px solid var(--ink-1); box-sizing:content-box; box-shadow:none; }
.member-row-name { font-size:12px; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.member-voice-indicator { margin-left:auto; flex:none; color:var(--dim); }
.member-voice-indicator svg { width:12px; height:12px; }
#memberCards .member-offline { opacity:.58; }
.member-offline .member-online-dot { background:#777e89; }
.member-offline .member-avatar { filter:grayscale(.7); }
.member-status-section + .member-status-section { margin-top:14px; }
.member-status-heading { display:flex; align-items:center; gap:6px; margin:0; padding:10px 4px 5px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:650; color:var(--muted); }
.member-role-section { margin-top:5px; }
.member-role-heading { padding:5px 5px 3px; font-size:9px; }
.member-role-list { gap:1px; }

/* Small non-modal tools leave the conversation usable. */
.floating-panel { position:fixed; z-index:80; width:330px; max-width:calc(100vw - 16px); max-height:min(420px,calc(100dvh - 24px)); overflow:hidden; border:1px solid #ffffff24; border-radius:11px; background:var(--ink-1); box-shadow:0 12px 36px #0009; color:var(--paper); }
#chatForm { position:relative; }
.emoji-popover { display:flex; flex-direction:column; gap:9px; padding:10px; max-height:min(390px,calc(100dvh - 110px)); }
.emoji-popup-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.emoji-popup-header h3,.header-panel h3 { margin:0; font-size:12px; font-weight:600; }
.emoji-popup-tools { display:flex; gap:6px; }
.emoji-popup-tools label:first-child { flex:1; min-width:0; }
.emoji-popup-tools input { width:100%; font-size:11px; min-height:31px; padding:7px 8px; }
.emoji-popup-tools select { width:108px; font-size:10px; min-height:31px; padding:5px; }
.emoji-popup-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.emoji-popover h4 { margin:6px 2px; color:var(--dim); font-size:10px; font-weight:500; }
.emoji-popover .emoji-grid { grid-template-columns:repeat(8,minmax(0,1fr)); gap:1px; max-height:none; overflow:visible; }
.emoji-popover .emoji-choice { min-height:32px; height:32px; padding:0; font-size:22px; }
.emoji-popover #emojiRecentEmpty { font-size:10px; margin:6px 2px 12px; }
.emoji-popup-footer { display:flex; align-items:center; justify-content:space-between; color:var(--dim); font-size:10px; border-top:1px solid var(--line); padding-top:6px; }
.emoji-popup-footer button { font-size:10px; }
.compact-panel-content { padding:12px; display:grid; gap:10px; }
.compact-panel-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.compact-panel-actions .link { font-size:10px; }
.compact-panel-list { max-height:280px; overflow-y:auto; overscroll-behavior:contain; }
.header-panel .notification-row,.header-panel .pinned-message-row { font-size:11px; padding:9px 10px; margin-bottom:5px; border-radius:6px; line-height:1.5; }
.header-panel .pinned-message-row { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-height:70px; }
.header-panel p { font-size:11px; margin:0; }
.header-panel #notificationHelp { font-size:10px; }

.banner-member-preview.member-row { height:40px; min-height:40px; padding:4px 7px; gap:9px; border:0; border-radius:5px; }
.banner-member-preview.member-row .member-avatar { width:28px; height:28px; }
.banner-member-preview.member-row .member-info strong { font-size:12px; }
.banner-member-preview.member-row::before { opacity:.28; }

.profile-popout{width:300px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;z-index:1500}
.profile-popout .settings{padding:12px;gap:10px}.profile-popout .picker-heading h2{font-size:12px;color:var(--muted)}
.profile-popout .profile-cover{height:82px;margin:0 0 30px;border-radius:8px}.profile-popout h2{font-size:19px;margin:8px 0}.profile-popout p{margin:6px 0}.profile-popout .profile-edit{width:auto;padding:6px 10px;margin-top:8px}.profile-popout details{margin-top:10px}.profile-popout summary{cursor:pointer;font-size:12px}.profile-popout input[type=range]{width:100%}
#meName,#connState,[role=button]{cursor:pointer}

/* Brand artwork: public/logo.svg (mark) and public/wordmark.svg. */
.wordmark{display:block;height:14px;width:auto;flex-shrink:0}
.brand{gap:8px;padding-left:14px;padding-right:12px;min-height:62px}
.brand .head-tools{display:flex;gap:2px}
.start-brand,.login-brand .wordmark{height:20px;margin-bottom:8px}
.empty .empty-brand{height:28px;opacity:.19}
.mark{display:block;width:30px;height:30px;flex-shrink:0}
.start-mark,.login-brand .mark{width:72px;height:72px;margin:0 auto 14px}
.login-brand{text-align:center}.login-brand .wordmark{margin-left:auto;margin-right:auto}
.start-card>.start-brand{margin-left:auto;margin-right:auto}
.empty .empty-mark{width:72px;height:72px;opacity:.19;margin-bottom:14px}
.login-brand{display:flex;align-items:center;justify-content:flex-start;gap:14px;text-align:left}
.login-brand .mark{width:44px;height:44px;margin:0}
.login-brand .wordmark{margin:0}

#splash{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#0a0a0a;transition:opacity .35s}
#splash.done{opacity:0;pointer-events:none}
.splash-mark{width:96px;height:96px;animation:splash-in .6s ease-out both,splash-breathe 2.2s ease-in-out .6s infinite}
@keyframes splash-in{from{opacity:0;transform:scale(.7) rotate(-45deg)}to{opacity:1;transform:none}}
@keyframes splash-breathe{0%,100%{opacity:1;transform:scale(1) rotate(0)}50%{opacity:.55;transform:scale(.94) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.splash-mark{animation:none}}
.ask-dialog{width:min(380px,calc(100vw - 24px));padding:22px}
.ask-dialog p{margin:0 0 20px;line-height:1.45}
.ask-dialog .dialog-actions{justify-content:flex-end}