:root {
  --bg: #12110f;
  --panel: #1c1b19;
  --panel-2: #2a2826;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f5f2ec;
  --muted: #a8a096;
  --amber: #8d6bff;
  --amber-2: #d4c4ff;
  --online: #7dcea0;
  --away: #e6b15a;
  --busy: #e07a6a;
  --offline: #6f6a64;
  --danger: #e07a6a;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  --font: system-ui, sans-serif;
  --display: system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  overflow: auto;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse 80% 40% at 50% -20%, rgba(141, 107, 255, 0.16), transparent 55%),
    var(--bg);
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--amber-2); }

.gate {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 1.25rem 2.5rem;
}
.card {
  width: min(440px, 100%);
  margin: auto 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.6rem 1.35rem 1.25rem;
  box-shadow: var(--shadow);
}
.brand {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.7rem;
  margin: 0 0 0.35rem;
}
.claim { color: var(--muted); margin: 0 0 1.15rem; }
label { display: block; margin: 0.75rem 0 0.3rem; color: var(--muted); font-size: 0.92rem; }
input, textarea, select {
  width: 100%;
  background: #141311;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.72rem 0.75rem;
}
textarea { resize: none; min-height: 44px; max-height: 140px; }
.composer textarea#box {
  min-height: calc(1em * 1.45 * 2 + 1.4rem);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--amber); border-color: transparent; }
.btn {
  border: 0;
  background: var(--amber);
  color: #160f24;
  font-weight: 600;
  border-radius: 12px;
  padding: 0.78rem 1rem;
  touch-action: manipulation;
}
.btn:disabled { opacity: 0.7; }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn--danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); box-shadow: none; }
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.row > * { flex: 1; }
.form-actions { margin-top: 1rem; }
.form-actions .btn { width: 100%; }
.error { color: var(--danger); min-height: 1.2em; margin: 0.6rem 0 0; }
.hint { color: var(--muted); font-size: 0.92rem; }

.layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 72px 230px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.rail { grid-column: 1; grid-row: 1 / span 3; }
.side { grid-column: 2; grid-row: 1 / span 3; }
.topbar { grid-column: 3; grid-row: 1; }
.chat { grid-column: 3; grid-row: 2; }
.composer-wrap { grid-column: 3; grid-row: 3; position: relative; }
.side {
  grid-row: 1 / span 3;
  background: #161513;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.side__head, .topbar, .members__head {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rail {
  background: #0c0b0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  overflow: hidden;
}
.rail__servers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0;
  overflow: auto;
  width: 100%;
  flex: 1;
}
.rail .server {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 700;
  padding: 0;
  overflow: hidden;
}
.rail .server { position: relative; }
.rail .server.active { border-radius: 16px; background: var(--amber); color: #160f24; }
.rail .server.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 4px;
  height: 20px;
  border-radius: 0 4px 4px 0;
  background: #fff;
}
.rail .server img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail .server-add { color: #7dcea0; font-size: 1.4rem; background: var(--panel); }
.rail-gap { width: 32px; height: 2px; background: var(--line); border-radius: 2px; }
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-grid;
  place-items: center;
  background: var(--panel-2);
  font-size: 0.8rem;
  flex: none;
}
.thread-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  border: 1px solid var(--line);
  background: #141311;
  border-radius: 10px;
  padding: 0.28rem 0.55rem;
  color: var(--amber-2);
}
.thread-chip .ico { width: 14px; height: 14px; }
.thread-pane {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 100%);
  background: var(--panel);
  border-left: 1px solid var(--line);
  z-index: 6;
  display: flex;
  flex-direction: column;
}
.thread-pane[hidden] { display: none; }
.thread-pane header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.8rem;
  border-bottom: 1px solid var(--line);
}
.thread-pane header strong { margin-right: auto; }
.thread-chat {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.thread-pane .composer { padding: 0.6rem; }
.thread-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-top: 0.35rem;
  max-width: min(420px, 100%);
  border: 1px solid var(--line);
  background: #141311;
  border-radius: 10px;
  padding: 0.35rem 0.65rem;
  color: var(--amber-2);
  text-align: left;
}
.thread-chip__count { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.thread-chip__preview { color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.thread-sep {
  margin: 0.55rem 0 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.thread-root { background: rgba(255,255,255,0.03); border-radius: 12px; padding: 0.55rem 0.65rem; }
.thread-reply { padding: 0.35rem 0.15rem; }
.thread-empty { margin: 0.4rem 0; }
.layout.show-thread .thread-pane { display: flex; }
@media (max-width: 979px) {
  .thread-pane {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    z-index: 40;
    box-shadow: none;
  }
  .layout.show-thread .backdrop { display: block; z-index: 35; }
}
@media (min-width: 980px) {
  .layout.show-thread .members { display: none; }
  .thread-pane { width: min(400px, 42vw); }
}

.emoji { height: 1.35em; width: auto; vertical-align: -0.25em; }
.role-tag, .role-pick {
  font-size: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  margin: 0.1rem;
  background: transparent;
}
.role-pick.is-on { background: var(--amber); color: #160f24; border-color: transparent; }
.role-picks { display: flex; flex-wrap: wrap; }
.jump-latest {
  position: absolute;
  right: 0.8rem;
  top: -2.4rem;
  z-index: 4;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}
.layout { position: relative; }
.me-bar {
  position: absolute;
  z-index: 4;
  left: 72px;
  bottom: 0;
  width: 230px;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border-top: 1px solid var(--line);
  background: #10100e;
  text-align: left;
}
.me-bar small { display: block; color: var(--muted); font-size: 0.72rem; }
.me-id { display: flex; gap: 0.5rem; align-items: center; min-width: 0; flex: 1; text-align: left; background: transparent; border: 0; padding: 0; color: inherit; }
.me-tools { display: flex; gap: 0.25rem; flex: none; }
.me-tools button { width: auto; padding: 0.35rem 0.5rem; border-radius: 10px; }
.table-ask { padding: 0.35rem 0.45rem 0.7rem; }
.table-ask strong { display: block; margin-bottom: 0.35rem; }
.table-now { padding: 0.35rem 0.2rem; }
.table-now small { display: block; color: var(--muted); }
.side__head.has-banner {
  min-height: 92px;
  background-size: cover;
  background-position: center;
  align-items: flex-end;
}
.side__head.has-banner strong { text-shadow: 0 1px 8px #000; }
.side__head strong, .topbar strong {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.side__claim { color: var(--muted); font-size: 0.78rem; margin-left: auto; }
.channels { flex: 1; overflow: auto; padding: 0.6rem 0.55rem 4.4rem; }
.inbox { display: flex; flex-direction: column; gap: 0.35rem; }
.inbox input {
  margin: 0.15rem 0.2rem 0.45rem;
  background-color: #0e0d0c;
  color: var(--text);
  border: 0;
  border-radius: 8px;
  padding: 0.55rem 0.7rem 0.55rem 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23a8a096' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.55rem center;
  background-size: 1rem;
}
.dm-row {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: 8px;
  padding: 0.45rem;
}
.dm-row.active, .dm-row:hover { background: #242220; }
.dm-row .avatar { width: 40px; height: 40px; }
.dm-row__body { min-width: 0; flex: 1; }
.dm-row__top { display: flex; justify-content: space-between; gap: 0.4rem; }
.dm-row__top time, .dm-row small { color: var(--muted); font-size: 0.75rem; }
.dm-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 0.45rem 0.2rem;
}
.day {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.75rem;
  margin: 0.85rem 0.2rem;
}
.day::before, .day::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.color-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.35rem; }
.color-row label { margin: 0; font-size: 0.78rem; }
.color-row input { width: 2.4rem; height: 2rem; padding: 0.15rem; }
.saved-list { display: flex; flex-direction: column; gap: 0.35rem; max-height: 50vh; overflow: auto; margin: 0.6rem 0 1rem; }
.saved-row {
  text-align: left;
  background: #141311;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
}
.saved-row b { display: block; font-size: 0.78rem; color: var(--amber-2); }
.saved-row span { display: block; color: var(--text); }
.poll { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.35rem; max-width: 420px; }
.poll__opt {
  position: relative;
  overflow: hidden;
  text-align: left;
  background: #141311;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.poll__opt i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: rgba(141, 107, 255, 0.28);
}
.poll__opt.mine { border-color: var(--amber); }
.poll__opt span, .poll__opt b { position: relative; }
.poll__q { display: block; margin-bottom: 0.35rem; font-size: 1.02rem; }
.poll__opt { align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.poll__mark { position: relative; flex: 0 0 auto; opacity: 0.9; }
.poll__label { position: relative; flex: 1 1 auto; }
.poll__names { position: relative; flex: 1 1 100%; color: var(--muted); font-size: 0.78rem; }
.poll__foot { margin-top: 0.35rem; color: var(--muted); font-size: 0.85rem; }
.poll__opt:disabled { opacity: 0.85; cursor: default; }

.card-banner { height: 72px; border-radius: 12px; background: #241c33 center/cover; margin-bottom: 0.6rem; }
#cardBody { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.8rem; }
#cardBody .avatar { width: 64px; height: 64px; margin-top: -2rem; }
.msg__reply { display: block; width: 100%; text-align: left; }
.bot-tag {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--amber);
  color: #160f24;
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  margin-left: 0.25rem;
}
.screen-stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.screen-tile { position: relative; }
.screen-tile video {
  width: 100%;
  max-height: 280px;
  background: #000;
  border-radius: 12px;
}
.screen-tile span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 8px;
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
}
.events {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: -0.4rem 0 0.2rem;
  background: var(--bg);
}
.event {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.5rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.event small { color: var(--muted); }
.event span { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.event button {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 8px;
  padding: 0.2rem 0.5rem;
}
.event button.mine { border-color: var(--amber); color: var(--amber-2); }
.unread-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--danger);
  font-size: 0.75rem;
  margin: 0.35rem 0;
}
.unread-line::before, .unread-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 30;
  border: 0;
  background: rgba(0, 0, 0, 0.82);
  display: grid;
  place-items: center;
  padding: 1rem;
}
#lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; }
.channels h2, .members h2 {
  margin: 0.9rem 0.45rem 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.channel, .member, .icon-btn, .menu-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  touch-action: manipulation;
}
.channel.active {
  background: var(--panel-2);
  box-shadow: none;
}
.channel:hover, .member:hover, .icon-btn:hover { background: rgba(255, 255, 255, 0.04); }
.channel { display: flex; justify-content: space-between; gap: 0.4rem; }
.side-actions { display: flex; flex-direction: row; gap: 0.35rem; margin-top: 1rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.side-actions .icon-btn { width: auto; }
.ch-ico { display: inline-flex; align-items: center; gap: 0.35rem; }
.ch-ico .ico { width: 1rem; height: 1rem; }
.dot-unread {
  width: 8px; height: 8px; border-radius: 99px; background: var(--amber); margin-top: 0.4rem;
  box-shadow: 0 0 8px var(--amber);
}
.topbar {
  grid-row: 1;
  background: rgba(18, 17, 15, 0.9);
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(8px);
}
.topbar { flex-wrap: wrap; }
.topbar__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.topbar__title { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.topbar__title strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar__title .dm-peer {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}
.topbar__title .dm-peer__name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar .who { margin-left: auto; color: var(--text); font-weight: 600; }
.topic {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  min-width: 0;
}
.topic:empty { display: none; }
.searchbox {
  flex: 1 1 140px;
  width: auto;
  min-width: 0;
  padding: 0.35rem 0.55rem 0.35rem 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23a8a096' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.55rem center;
  background-size: 1rem;
}
.formatbar { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.formatbar button {
  width: auto;
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  color: var(--amber-2);
  font-size: 0.78rem;
}
.image-preview { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.image-preview img, .msg__img { max-width: min(100%, 280px); border-radius: 12px; display: block; margin-top: 0.35rem; }
.image-preview img { width: 72px; height: 72px; object-fit: cover; margin: 0; }
.spoiler { background: #141311; color: transparent; border-radius: 4px; cursor: pointer; }
.spoiler.open { color: inherit; background: rgba(141, 107, 255, 0.18); }
blockquote { margin: 0.2rem 0; padding-left: 0.5rem; border-left: 2px solid var(--amber); color: var(--muted); }
code, pre.code {
  font-family: ui-monospace, monospace;
  background: #141311;
  border-radius: 6px;
}
code { padding: 0 0.2rem; }
pre.code { padding: 0.45rem 0.55rem; overflow: auto; }
.side-empty { margin: 0.2rem 0.4rem 0.6rem; }
.member .icon-btn { width: auto; margin-top: 0.25rem; margin-right: 0.25rem; }
.menu-btn, .icon-btn {
  width: auto;
  border: 1px solid var(--line);
  background: transparent;
  padding: 0.35rem 0.65rem;
}
.desktop-only { display: none; }
.chat {
  min-height: 0;
  overflow: auto;
  padding: 1rem 0.9rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.empty { color: var(--muted); margin: auto; text-align: center; line-height: 1.5; }
.msg {
  position: relative;
  padding: 0.45rem 1.6rem 0.35rem 0.15rem;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
}
.msg--own {
  background: rgba(141, 107, 255, 0.1);
  padding-left: 0.65rem;
  padding-right: 1.7rem;
}
.msg__more {
  position: absolute;
  top: 0.2rem;
  right: 0.15rem;
  width: auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0.15rem 0.35rem;
  font-size: 1rem;
  line-height: 1;
}
.msg__meta { display: flex; gap: 0.45rem; align-items: center; }
.msg__meta .avatar { width: 28px; height: 28px; }
.msg__name { font-weight: 600; color: var(--text); }
.msg__time, .msg__edited { color: var(--muted); font-size: 0.78rem; }
.msg__reply {
  border-left: 2px solid var(--amber);
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.15rem 0 0.25rem;
  padding-left: 0.45rem;
}
.msg__text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.msg__actions { display: flex; gap: 0.7rem; margin-top: 0.2rem; }
.msg__actions button {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 0;
  font-size: 0.78rem;
}
.msg__actions button:hover { color: var(--amber-2); }
.msg--mention { box-shadow: inset 3px 0 0 var(--amber); }
.mention {
  color: var(--amber-2);
  background: rgba(141, 107, 255, 0.18);
  border-radius: 6px;
  padding: 0 0.18rem;
}
.mention--me { background: rgba(141, 107, 255, 0.32); }
.msg__reacts, .react-row { display: flex; flex-wrap: wrap; gap: 0.28rem; align-items: center; }
.msg__reacts { margin-top: 0.35rem; }
.react {
  width: auto;
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-size: 0.85rem;
}
.react.mine { border-color: var(--amber); background: rgba(141, 107, 255, 0.22); }
.react--add { color: var(--muted); }
.pins {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(18, 17, 15, 0.94);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.45rem 0.65rem;
  margin: 0 0 0.45rem;
  display: grid;
  gap: 0.25rem;
}
.pins__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--amber-2);
  font-weight: 700;
  font-size: 0.85rem;
}
.pins__head small { color: var(--muted); font-weight: 600; }
.pins__row { display: flex; align-items: flex-start; gap: 0.35rem; }
.pins__jump {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 0.28rem 0;
  display: grid;
  gap: 0.1rem;
}
.pins__jump b { color: var(--amber-2); font-size: 0.82rem; }
.pins__jump span {
  color: var(--muted);
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pins__unpin {
  flex: 0 0 auto;
  min-width: 28px;
  min-height: 28px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
}
.pins__unpin:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.msg-act__text { display: none; }
@media (max-width: 979px) {
  .msg.menu .msg-act--pin {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
  }
  .msg.menu .msg-act__text { display: inline; font-size: 0.85rem; }
}
.typing {
  color: var(--muted);
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
}
.mentions { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.35rem; }
.mentions button {
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.4rem 0.55rem;
}
.mentions small { color: var(--muted); }
.dot-mention { background: var(--amber-2); }
.voice-who {
  color: var(--muted);
  font-size: 0.82rem;
  padding: 0.1rem 0.85rem 0.25rem;
}
.voice-who.talking { color: var(--online); }
.voicebar {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.65rem 0.7rem 0.5rem;
  margin-bottom: 0.55rem;
}
.voicebar__top, .voicebar__controls, .voice-person {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: wrap;
}
.voicebar__people { margin: 0.35rem 0; }
.voice-person { justify-content: space-between; }
.voice-person input { width: 110px; }
.voice-person.talking span { color: var(--online); }
.menu-btn.is-off, .icon-btn.is-off { color: var(--danger); border-color: var(--danger); }
.icon-btn.is-live { color: var(--online); border-color: var(--online); }
.ico { width: 1.2rem; height: 1.2rem; display: block; pointer-events: none; }
.menu-btn:has(.ico),
.icon-btn:has(.ico),
.formatbar button,
.me-tools .icon-btn,
.msg__actions button,
.btn.send,
.btn--icon {
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.35rem;
}
.btn.send { width: auto; border-radius: 12px; }
.form-actions .btn.btn--icon,
.row .btn.btn--icon,
.btn.btn--icon { width: auto; flex: none; }
.formatbar button { border-radius: 10px; }
.voice-help { margin: 0.35rem 0 0; }
.composer-wrap {
  padding: 0.65rem 0.8rem calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #161513;
}
.replybar {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}
.composer { display: flex; gap: 0.45rem; align-items: flex-end; }
.composer textarea { flex: 1; }
.send { width: auto; min-width: 5.5rem; }
.members { display: none; }
.member { display: flex; gap: 0.55rem; align-items: center; padding: 0.35rem 0.4rem; }
.presence {
  width: 9px; height: 9px; border-radius: 99px; background: var(--offline); flex: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25);
}
.presence.online { background: var(--online); box-shadow: 0 0 8px rgba(157, 206, 134, 0.7); }
.presence.away { background: var(--away); }
.presence.busy { background: var(--busy); }
.member small { color: var(--muted); display: block; font-size: 0.75rem; }
.backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 5, 3, 0.55);
  z-index: 4;
}
dialog {
  width: min(440px, calc(100% - 1.5rem));
  max-height: calc(100% - 1.5rem);
  overflow: auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1rem 1rem 0.9rem;
  box-shadow: var(--shadow);
}
.sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: auto;
  background: #12110f;
  padding: 1rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
}
.sheet[hidden] { display: none; }
.sheet-actions { display: flex; flex-direction: row; align-items: center; gap: 0.45rem; }
.sheet-actions .btn:not(.btn--icon) { flex: 1; }
.avatar-preview {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0.2rem 0 0.8rem;
  background: var(--panel-2);
}
.person-row {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  padding: 0.35rem 0.2rem;
}
.person-row .icon-btn { flex: none; }
.person-row .dm-row__body { min-width: 0; flex: 1; }
dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
dialog h3 { font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.4rem; }
.invite-url {
  background: #141311;
  border: 1px solid #4a3424;
  border-radius: 10px;
  padding: 0.6rem;
  overflow-wrap: anywhere;
  margin: 0.6rem 0;
}
.channel-admin { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.6rem 0; }
.channel-admin .line { display: flex; gap: 0.35rem; align-items: center; }
.channel-admin .line span { flex: 1; }

@media (min-width: 980px) {
  .layout { grid-template-columns: 72px 230px minmax(0, 1fr) 230px; }
  .members {
    display: flex;
    flex-direction: column;
    grid-column: 4;
    grid-row: 1 / span 3;
    background: #161513;
    border-left: 1px solid var(--line);
    min-height: 0;
  }
  .members .list { overflow: auto; padding: 0.4rem; }
  .menu-btn { display: none; }
  .desktop-only { display: inline; }
  .msg__more { display: none; }
  .msg__actions { display: flex; opacity: 0; }
  .msg:hover .msg__actions, .msg:focus-within .msg__actions, .msg.menu .msg__actions { opacity: 1; }
}

@media (max-width: 979px) {
  .layout {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .rail {
    grid-column: 1;
    grid-row: 1 / span 3;
    flex-direction: column;
    height: auto;
    width: auto;
  }
  .side {
    position: relative;
    transform: none;
    width: auto;
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
  }
  .topbar, .chat, .composer-wrap { display: none; }
  .layout.in-chat .side { display: none; }
  .layout.in-chat .topbar {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: auto minmax(5rem, 1fr) auto auto auto auto;
    grid-template-areas:
      "back title saved mentions mute people"
      "topic topic topic topic topic topic"
      "search search search search search read";
    align-items: center;
    column-gap: 0.15rem;
  }
  .layout.in-chat .topbar .topbar__heading { display: contents; }
  .layout.in-chat .topbar #openChannels { grid-area: back; }
  .layout.in-chat .topbar .topbar__title { grid-area: title; min-width: 0; overflow: hidden; }
  .layout.in-chat .topbar .topic {
    grid-area: topic;
    padding: 0.2rem 0 0.15rem;
    line-height: 1.4;
  }
  .layout.in-chat .topbar #openSaved { grid-area: saved; }
  .layout.in-chat .topbar #openMentions { grid-area: mentions; }
  .layout.in-chat .topbar #muteChannel { grid-area: mute; }
  .layout.in-chat .topbar #openMembers { grid-area: people; }
  .layout.in-chat .topbar #markAllRead { grid-area: read; display: inline-flex; }
  .layout.in-chat .topbar #updatePill:not([hidden]) { grid-area: people; }
  .layout.in-chat .topbar #searchBox { grid-area: search; width: 100%; flex: none; }
  .layout.in-chat .topbar .who { display: none; }
  .layout.in-chat .chat {
    display: flex;
    grid-column: 2;
    grid-row: 2;
  }
  .layout.in-chat .composer-wrap {
    display: block;
    grid-column: 2;
    grid-row: 3;
    margin-bottom: 72px;
  }
  .me-bar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    background: #1c1b19;
  }
  .members {
    position: fixed;
    z-index: 6;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: min(320px, 88vw);
    background: #161513;
    transform: translateX(105%);
    transition: transform 0.18s ease;
    display: flex;
    flex-direction: column;
  }
  .members .list { overflow: auto; padding: 0.4rem; }
  .layout.show-members .members { transform: none; }
  .layout.show-members .backdrop { display: block; }
  .msg__actions { display: none; }
  .msg.menu .msg__actions { display: flex; flex-wrap: wrap; }
  .msg__reacts:not(:has(.react:not(.react--add))) { display: none; }
  .msg.menu .msg__reacts { display: flex; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Feinschliff (23.09.2026, Mr.Harry)

   Gemessen am Bestand, nicht geraten: 0 Tastatur-Fokus, 0 Bildlaufleisten-
   Farben, 0 Auswahlfarbe, 1 Uebergang auf 881 Zeilen und keine Ruecksicht
   auf abgeschaltete Animationen. Alles additiv - kein bestehender Selektor
   wird angefasst, keine Klasse umbenannt, die app.js kennt.
   ───────────────────────────────────────────────────────────────────── */

/* Tastatur sichtbar machen. Vorher sah ein Mensch, der mit Tab navigiert,
   ueberhaupt nicht, wo er gerade steht - das ist kein Schoenheitsfehler.
   :focus-visible trifft nur die Tastatur, die Maus bekommt keinen Rahmen. */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--amber-2);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Bildlaufleisten: ohne Angabe malt der Browser sie hell. In einer dunklen
   Oberflaeche sind das zwei grelle Streifen neben Kanalliste und Verlauf. */
* { scrollbar-width: thin; scrollbar-color: #3a3835 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #3a3835;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #4a4743; background-clip: content-box; }

/* Markierter Text lag bisher auf dem Blau des Browsers - neben Violett wirkt
   das wie ein Fremdkoerper. */
::selection { background: rgba(141, 107, 255, 0.35); color: var(--text); }

/* Weiches Anfassen. Das fuehlt sich fluessig an, wenn Zustandswechsel
   nicht springen. 120 ms sind kurz genug, um nicht traege zu wirken. */
.rail .server,
.channels .channel,
.members .member,
.msg .react,
button {
  transition: background-color 120ms ease, color 120ms ease,
              border-color 120ms ease, transform 120ms ease, opacity 120ms ease;
}
.rail .server:hover { transform: translateY(-1px); }
button:active { transform: translateY(1px); }

/* Wer Animationen abgeschaltet hat, meint es ernst - oft wegen Uebelkeit
   oder Migraene. Dann alles sofort, ohne Bewegung. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rail .server:hover, button:active { transform: none; }
}

/* iOS vergroessert Text in Querlage eigenmaechtig und zerlegt damit das
   Raster der Kanalliste. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── Gruppierte Nachrichten ausrichten ────────────────────────────────────
   Folgt eine Nachricht demselben Absender innerhalb von 5 Minuten, laesst
   app.js Bild, Name und Uhrzeit weg. Bisher rutschte der Text dann nach
   ganz links und die Spalte brach.
   Der Text steht jetzt buendig unter dem Namen darueber:
   Bild 28px + Abstand 0.45rem. */
.msg--grouped { padding-top: 0.02rem; padding-bottom: 0.2rem; }
.msg--grouped .msg__text,
.msg--grouped .msg__reply,
.msg--grouped .msg__reacts,
.msg--grouped .msg__actions,
.msg--grouped .thread-chip,
.msg--grouped .msg__img { margin-left: calc(28px + 0.45rem); }

/* Die Uhrzeit sitzt im freien Rand links und erscheint erst beim Zeigen -
   so bleibt die Spalte ruhig, die Zeit ist aber jederzeit erreichbar. */
.msg__gtime {
  position: absolute;
  left: 0.15rem;
  top: 0.25rem;
  width: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
}
.msg--own .msg__gtime { left: 0.65rem; }
.msg:hover .msg__gtime,
.msg:focus-within .msg__gtime { opacity: 0.75; }

/* Auf dem Handy gibt es kein Zeigen - dort waere die Zeit nie sichtbar und
   der eingerueckte Text kostet nur Breite. */
@media (max-width: 979px) {
  .msg__gtime { display: none; }
  .msg--grouped .msg__text,
  .msg--grouped .msg__reply,
  .msg--grouped .msg__reacts,
  .msg--grouped .msg__actions,
  .msg--grouped .thread-chip,
  .msg--grouped .msg__img { margin-left: 0; }
}

/* ═════════════════════════════════════════════════════════════════════════
   TIEFE (23.09.2026, Mr.Harry) — Henner: "gesamtes Design zu schlicht"

   Der Bestand ist flach gebaut: jede Flaeche eine Volltonfarbe, ein
   Trennstrich, fertig. Das wirkt sauber, aber leblos. Gute Chat-Apps sehen nicht
   deshalb gut aus, weil sie bunt sind, sondern weil jede Flaeche eine Kante
   aus Licht hat und der Akzent an wenigen Stellen wirklich leuchtet.

   Alles hier ist additiv und ueberschreibt nur Aussehen, nie Position.
   Zum Zurueckdrehen reicht es, diesen Block zu loeschen.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Schrift: vorher nur system-ui. Segoe UI Variable ist auf Windows 11 da
     und deutlich feiner gezeichnet als der Standard. */
  --font: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI Semibold", Inter, system-ui, sans-serif;
  --glow: 0 0 0 1px rgba(141, 107, 255, 0.35), 0 8px 24px rgba(141, 107, 255, 0.18);
  --kante: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Der Hintergrund bekommt eine zweite, tiefere Lichtquelle unten rechts.
   Ein einzelner Schein oben wirkt wie ein Versehen, zwei wie Absicht. */
body {
  background:
    radial-gradient(ellipse 80% 40% at 50% -20%, rgba(141, 107, 255, 0.16), transparent 55%),
    radial-gradient(ellipse 60% 50% at 110% 110%, rgba(125, 206, 160, 0.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Flaechen: leichter Verlauf statt Vollton, dazu oben eine Lichtkante.
   Das ist der Griff, der am meisten ausmacht - Flaechen bekommen eine
   Oberseite und wirken dadurch koerperhaft statt aufgemalt. */
.rail, .side, .members, .topbar, .composer-wrap, .me-bar {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 120px);
  box-shadow: var(--kante);
}

/* Der aktive Kanal war nur etwas heller. Jetzt traegt er den Akzent:
   ein Balken links, ein Verlauf nach rechts, der sich verliert. */
.channel.active {
  background: linear-gradient(90deg, rgba(141, 107, 255, 0.22), rgba(141, 107, 255, 0.04) 70%, transparent);
  box-shadow: inset 2px 0 0 var(--amber);
  color: var(--text);
}
.channel.active::marker { color: var(--amber); }
.channel:hover { background: rgba(255, 255, 255, 0.055); }

/* Ueberschriften der Spalten: gesperrt und klein, wie in jedem guten
   Chatprogramm - das ordnet die Liste, ohne Linien zu ziehen. */
.channels h2, .members h2 {
  font-family: var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--muted);
  opacity: 0.85;
}

/* Profilbilder bekommen einen Ring. Ohne Ring schwimmen runde Bilder auf
   dunklem Grund; mit Ring sitzen sie. */
.avatar {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.35);
  background-color: var(--panel-2);
}
.rail .server { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.rail .server.active { box-shadow: var(--glow); }

/* Anwesenheitspunkte leuchten leicht - das ist der Punkt, auf den man als
   Erstes schaut, wenn man wissen will, wer da ist. */
.dot { box-shadow: 0 0 0 2px var(--panel), 0 0 6px currentColor; }

/* Erwaehnungen: bisher nur eine andere Hintergrundfarbe. Jetzt zusaetzlich
   ein Balken links, damit man sie beim Ueberfliegen findet. */
.msg--mention { box-shadow: inset 3px 0 0 var(--away); }
.msg--pinned { box-shadow: inset 3px 0 0 var(--online); }

/* Eingabezeile: der Ort, an dem man am haeufigsten hinsieht. Beim Tippen
   hebt sie sich jetzt sichtbar ab. */
.composer-wrap { border-top: 1px solid var(--line); }
.composer:focus-within {
  box-shadow: var(--glow);
  border-color: rgba(141, 107, 255, 0.5);
}

/* Trennlinien laufen an den Enden aus, statt hart abzubrechen. */
.day::before, .day::after {
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* Knoepfe mit Akzent bekommen einen Verlauf und eine Lichtkante oben.
   Die Klasse heisst hier .btn - meine erste Fassung zielte auf .btn--primary
   und .primary, beide gibt es im JS gar nicht. Nachgesehen: 14x .btn,
   dazu --ghost, --danger und --icon, die ihren eigenen Auftritt behalten. */
.btn:not(.btn--ghost):not(.btn--danger):not(.btn--icon) {
  background: linear-gradient(180deg, #9d7dff, var(--amber));
  box-shadow: var(--kante), 0 6px 16px rgba(141, 107, 255, 0.28);
}
.btn:not(.btn--ghost):not(.btn--danger):not(.btn--icon):hover { filter: brightness(1.06); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); }

/* Eigene Nachrichten: der violette Teppich wirkte flach, jetzt mit Kante. */
.msg--own { box-shadow: inset 1px 0 0 rgba(141, 107, 255, 0.45); }

/* Karten der Anmeldeseite bekommen Tiefe statt nur Rahmen. */
.card {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 180px);
  box-shadow: var(--shadow), var(--kante);
}
.brand { font-family: var(--display); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { filter: none; }
}

.jump-unread {
  top: -4.7rem;
  background: var(--panel-2, var(--panel));
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
@media (max-width: 640px) {
  .jump-latest { top: -2.2rem; right: 0.55rem; font-size: 0.82rem; padding: 0.35rem 0.7rem; }
  .jump-unread { top: -4.35rem; }
}

.events-tools { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin: 0 1rem 0.55rem; }
.events--empty { margin-bottom: 0.4rem; }
.tisch-card__head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
.tisch-card__head h2 { margin: 0; }
.tisch-dabei-empty--actions { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }


/* Gruppen-DM */
.avatar--group {
  display: inline-grid;
  place-items: center;
  font-size: 0.95rem;
  background: color-mix(in srgb, var(--accent, #7c5cff) 35%, #1c1a22);
}
.dm-group-tag {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.05em 0.4em;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 600;
  vertical-align: middle;
  background: color-mix(in srgb, var(--accent, #7c5cff) 28%, transparent);
  color: var(--text-muted, #b7b0c4);
}
.dm-row--group .dm-row__top b,
.channel--group span {
  font-weight: 650;
}
.friends-panel__tools {
  display: flex;
  gap: 0.4rem;
  margin: 0.35rem 0 0.55rem;
}
.group-dm-friends {
  max-height: min(42vh, 280px);
  overflow: auto;
  display: grid;
  gap: 0.35rem;
  margin: 0.6rem 0 0.4rem;
}
.group-dm-pick {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.45rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel, #1a1820) 80%, #000);
}
.group-dm-pick span {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.group-dm-pick small {
  opacity: 0.65;
}
.dm-peer--group {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  pointer-events: none;
}