:root {
  --bg-primary: #090d1a;
  --bg-secondary: #0f1528;
  --bg-tertiary: #182038;
  --bg-input: #090d1a;
  --text-primary: #dcdff8;
  --text-secondary: #8090b8;
  --text-muted: #505878;
  --accent: #e84070;
  --accent-hover: #d03060;
  --online: #40c880;
  --offline: #303858;
  --border: #18223c;
  --error: #e84070;
  --success: #40c880;
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
}

/* Theme: Exile — cold ash with muted steel-blue */
[data-theme="exile"] {
  --bg-primary: #0d0e10;
  --bg-secondary: #141618;
  --bg-tertiary: #1e2124;
  --bg-input: #0d0e10;
  --text-primary: #ccd0d8;
  --text-secondary: #7888a0;
  --text-muted: #485060;
  --accent: #7898b8;
  --accent-hover: #6888a8;
  --online: #48b870;
  --offline: #384048;
  --border: #242830;
  --error: #c07878;
  --success: #48b870;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Druid — deep ancient forest with rich emerald */
[data-theme="druid"] {
  --bg-primary: #0a1008;
  --bg-secondary: #101c0e;
  --bg-tertiary: #182c18;
  --bg-input: #0a1008;
  --text-primary: #c0d4b0;
  --text-secondary: #70986a;
  --text-muted: #486048;
  --accent: #44c870;
  --accent-hover: #34b860;
  --online: #44c870;
  --offline: #2c4830;
  --border: #1c3018;
  --error: #c06050;
  --success: #44c870;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Warlock — pure void with vivid crimson */
[data-theme="warlock"] {
  --bg-primary: #060606;
  --bg-secondary: #0e0e0e;
  --bg-tertiary: #181818;
  --bg-input: #060606;
  --text-primary: #f2f2f2;
  --text-secondary: #b0b0b0;
  --text-muted: #606060;
  --accent: #e02828;
  --accent-hover: #c81c1c;
  --online: #3ac870;
  --offline: #3c3c3c;
  --border: #282828;
  --error: #e02828;
  --success: #3ac870;
  --nav-hover-bg: rgba(255, 255, 255, 0.06);
}

/* Theme: Necromancer — void black with blight green */
[data-theme="necromancer"] {
  --bg-primary: #0b0e0b;
  --bg-secondary: #111511;
  --bg-tertiary: #171e17;
  --bg-input: #0b0e0b;
  --text-primary: #c4d4b4;
  --text-secondary: #7a9468;
  --text-muted: #4a5e42;
  --accent: #7ecf3c;
  --accent-hover: #6abf2c;
  --online: #7ecf3c;
  --offline: #38503a;
  --border: #1a261a;
  --error: #c05040;
  --success: #7ecf3c;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Sorcerer — midnight deep blue with electric violet */
[data-theme="sorcerer"] {
  --bg-primary: #0c0a18;
  --bg-secondary: #131028;
  --bg-tertiary: #1c1840;
  --bg-input: #0c0a18;
  --text-primary: #d8d0f0;
  --text-secondary: #9888c8;
  --text-muted: #585478;
  --accent: #a855f7;
  --accent-hover: #9040e0;
  --online: #34d399;
  --offline: #3a305e;
  --border: #201c3c;
  --error: #e05070;
  --success: #34d399;
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
}

/* Theme: Witch — shadow-black with ghostly pale lavender */
[data-theme="witch"] {
  --bg-primary: #0c0c14;
  --bg-secondary: #13131e;
  --bg-tertiary: #1c1c2c;
  --bg-input: #0c0c14;
  --text-primary: #d4d0ec;
  --text-secondary: #8880a8;
  --text-muted: #4e4868;
  --accent: #c8b8f8;
  --accent-hover: #b8a4f0;
  --online: #50c880;
  --offline: #343048;
  --border: #1e1c30;
  --error: #d06080;
  --success: #50c880;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Arcanist — deep indigo with arcane gold */
[data-theme="arcanist"] {
  --bg-primary: #0a0a1c;
  --bg-secondary: #10102c;
  --bg-tertiary: #18183e;
  --bg-input: #0a0a1c;
  --text-primary: #e0ddf8;
  --text-secondary: #9898c8;
  --text-muted: #585880;
  --accent: #c8a840;
  --accent-hover: #b89830;
  --online: #44c870;
  --offline: #383868;
  --border: #1e1e40;
  --error: #c85060;
  --success: #44c870;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Shaman — dark sienna earth with vermilion ritual-fire */
[data-theme="shaman"] {
  --bg-primary: #160c08;
  --bg-secondary: #201410;
  --bg-tertiary: #2c1c18;
  --bg-input: #160c08;
  --text-primary: #e8c8b8;
  --text-secondary: #a87060;
  --text-muted: #6c4840;
  --accent: #c84830;
  --accent-hover: #b03c26;
  --online: #58b860;
  --offline: #503830;
  --border: #301c18;
  --error: #c04038;
  --success: #58b860;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Psion — cold steel with crystalline cyan */
[data-theme="psion"] {
  --bg-primary: #0a1018;
  --bg-secondary: #101820;
  --bg-tertiary: #18222e;
  --bg-input: #0a1018;
  --text-primary: #c8d8ec;
  --text-secondary: #6890b8;
  --text-muted: #405870;
  --accent: #00c8d8;
  --accent-hover: #00b0c0;
  --online: #44c884;
  --offline: #2c4058;
  --border: #182030;
  --error: #d06080;
  --success: #44c884;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Stormcaller — storm grey with lightning gold */
[data-theme="stormcaller"] {
  --bg-primary: #0e0e0c;
  --bg-secondary: #161614;
  --bg-tertiary: #20201c;
  --bg-input: #0e0e0c;
  --text-primary: #e8e8d4;
  --text-secondary: #a0a088;
  --text-muted: #606050;
  --accent: #d4c830;
  --accent-hover: #c4b820;
  --online: #50c068;
  --offline: #404038;
  --border: #282820;
  --error: #c85040;
  --success: #50c068;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Alchemist — dark olive-grey with acid sulfur-green */
[data-theme="alchemist"] {
  --bg-primary: #0c1008;
  --bg-secondary: #141a0e;
  --bg-tertiary: #1c2414;
  --bg-input: #0c1008;
  --text-primary: #d0d8b0;
  --text-secondary: #88a060;
  --text-muted: #506040;
  --accent: #a0c418;
  --accent-hover: #8cb010;
  --online: #58b860;
  --offline: #384830;
  --border: #202e14;
  --error: #c05040;
  --success: #58b860;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Enchanter — deep plum with vivid rose */
[data-theme="enchanter"] {
  --bg-primary: #140c18;
  --bg-secondary: #1e1228;
  --bg-tertiary: #281838;
  --bg-input: #140c18;
  --text-primary: #ead0f0;
  --text-secondary: #b078c0;
  --text-muted: #705880;
  --accent: #d45cb4;
  --accent-hover: #c04ca0;
  --online: #50c880;
  --offline: #503060;
  --border: #281838;
  --error: #d05060;
  --success: #50c880;
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
}

/* Theme: Oracle — void-black with deep sapphire blue */
[data-theme="oracle"] {
  --bg-primary: #080810;
  --bg-secondary: #0e0e1c;
  --bg-tertiary: #151528;
  --bg-input: #080810;
  --text-primary: #c8c8e4;
  --text-secondary: #7880a8;
  --text-muted: #484868;
  --accent: #4880e0;
  --accent-hover: #3870d0;
  --online: #44c880;
  --offline: #2c2c50;
  --border: #141428;
  --error: #c86070;
  --success: #44c880;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Hexblade — void black with eldritch sea-jade */
[data-theme="hexblade"] {
  --bg-primary: #06080a;
  --bg-secondary: #0c1018;
  --bg-tertiary: #141820;
  --bg-input: #06080a;
  --text-primary: #b8c8c0;
  --text-secondary: #6888a0;
  --text-muted: #384858;
  --accent: #40e0a0;
  --accent-hover: #30c890;
  --online: #40e0a0;
  --offline: #283848;
  --border: #141c28;
  --error: #d06070;
  --success: #40e0a0;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

/* Theme: Pyromancer — dark charcoal with vivid lava-orange */
[data-theme="pyromancer"] {
  --bg-primary: #100c06;
  --bg-secondary: #181208;
  --bg-tertiary: #221a10;
  --bg-input: #100c06;
  --text-primary: #f0d4b8;
  --text-secondary: #b08858;
  --text-muted: #705838;
  --accent: #f06020;
  --accent-hover: #e05010;
  --online: #50c068;
  --offline: #484020;
  --border: #2c2010;
  --error: #e03030;
  --success: #50c068;
  --nav-hover-bg: rgba(255, 255, 255, 0.07);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
}

#app {
  height: 100%;
}

/* Skip-to-content link (accessibility) */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-to-content:focus {
  top: 0;
  outline: 3px solid var(--text-primary);
  outline-offset: 2px;
}

/* Keyboard focus rings for interactive list items */
.nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.channel-item:focus-visible,
.dm-item:focus-visible,
.voice-channel-item:focus-visible,
.project-header:focus-visible,
.project-channel-add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Auth Layout */
.auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem;
}

.auth-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  width: 100%;
  max-width: 400px;
}

.auth-card h1 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  color: var(--accent);
}

.auth-card .subtitle {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-group input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus {
  border-color: var(--accent);
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
  text-align: center;
}

.btn:hover {
  background: var(--accent-hover);
}

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

.auth-switch {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.auth-switch a {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.auth-switch a:hover {
  text-decoration: underline;
}

.auth-password-hint {
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin: 4px 0 0;
}

.auth-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.auth-checkbox-label input[type="checkbox"] {
  width: auto;
  margin-top: 2px;
  flex-shrink: 0;
}

.auth-checkbox-label a {
  color: var(--accent);
  text-decoration: none;
}

.auth-checkbox-label a:hover {
  text-decoration: underline;
}

.error-message {
  background: rgba(233, 69, 96, 0.15);
  border: 1px solid var(--error);
  color: var(--error);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.ban-notice {
  background: rgba(192, 57, 43, 0.15);
  border: 1px solid #c0392b;
  border-radius: 6px;
  color: #e8a09a;
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  gap: 0.2rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem;
}

.ban-notice strong {
  color: #e57373;
  font-weight: 600;
}

.session-notice {
  background: rgba(52, 152, 219, 0.08);
  border: 1px solid rgba(52, 152, 219, 0.35);
  border-radius: 6px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  gap: 0.2rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem;
}

.session-notice strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Chat Layout */
.chat-layout {
  display: grid;
  grid-template-columns: 260px 4px 1fr;
  height: 100%;
}

/* Sidebar */
.sidebar {
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Sidebar brand — full-width header with favicon toggle + "Kenoma" */
.sidebar-brand {
  padding: 0.55rem 0.75rem 0.55rem 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-brand-btn {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.sidebar-brand-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-lower {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 0;
}

/* Nav rail — 56px wide, shown below sidebar brand; hidden when .collapsed */
.nav-rail {
  width: 56px;
  flex-shrink: 0;
  background: var(--bg-primary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-logo-img {
  width: 26px;
  height: 26px;
  display: block;
}

.nav-rail-top {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
  scrollbar-width: none;
}

.nav-rail-top::-webkit-scrollbar {
  display: none;
}

.nav-rail-bottom {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.nav-rail.collapsed {
  display: none;
}

.nav-item {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
  position: relative;
  flex-shrink: 0;
}

.nav-item:hover {
  background: var(--nav-hover-bg);
  color: var(--text-primary);
}

.nav-item.active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--text-primary);
}

.nav-item-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.nav-item-realm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: border-radius 0.15s, background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.nav-item:hover .nav-item-realm {
  border-radius: 10px;
  color: var(--text-primary);
}

.nav-item.active .nav-item-realm {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
}

.nav-item-realm.has-avatar {
  background: transparent;
  overflow: hidden;
}

.nav-item-realm-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.nav-item-create-realm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px dashed var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-muted);
  transition: border-radius 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
  line-height: 1;
}

.nav-item:hover .nav-item-create-realm {
  border-radius: 10px;
  border-color: var(--accent);
  color: var(--accent);
}

.nav-item.active .nav-item-create-realm {
  border-radius: 10px;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}

.nav-item-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
  line-height: 1.5;
  pointer-events: none;
}

.sidebar-brand-name {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.95rem;
}

/* Sidebar channel content */
.sidebar-channel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.sidebar-realm-header {
  padding: 0.6rem 1rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.sidebar-realm-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-realm-settings-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.1rem 0.2rem;
  border-radius: 3px;
  line-height: 1;
  transition: color 0.15s;
  opacity: 0;
  pointer-events: none;
}

.sidebar-realm-header:hover .sidebar-realm-settings-btn {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-realm-settings-btn:hover {
  color: var(--text-primary);
}

.sidebar-scroll-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-scroll-area .channel-list {
  flex: none;
  overflow-y: visible;
  overflow-x: visible;
}

/* Blank screens (realm-manager / docs / admin) */
.blank-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blank-screen-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}

.blank-screen-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ── UX2-4: Help Center ─────────────────────────────────────────────────────── */

.help-center {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.help-header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.help-header-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.help-header-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.help-search {
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.875rem;
  box-sizing: border-box;
}
.help-search:focus {
  outline: none;
  border-color: var(--accent);
}

.help-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.help-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.help-tab:hover { background: var(--bg-tertiary); color: var(--text); }
.help-tab.active { background: var(--bg-tertiary); color: var(--accent); font-weight: 700; }

.help-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

/* Article list */
.help-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.help-article-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.6rem 0.9rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text);
  text-align: left;
}
.help-article-item:hover { border-color: var(--accent); }

.help-article-item-title { font-weight: 500; }
.help-article-item-arrow { color: var(--text-muted); font-size: 1.1rem; }

.help-empty {
  color: var(--text-muted);
  font-size: 0.875rem;
  padding: 1rem 0;
}

/* Article view */
.help-article-view { max-width: 640px; }

.help-back-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  padding: 0 0 0.75rem;
  display: block;
}
.help-back-btn:hover { text-decoration: underline; }

.help-article-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.help-article-body {}

.help-article-para {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.help-article-para strong { color: var(--text); }

/* FAQ */
.help-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 640px;
}

.help-faq-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

.help-faq-q {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.help-faq-a {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* Keyboard shortcuts */
.help-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 560px;
}

.help-shortcut-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.help-shortcut-table {
  width: 100%;
  border-collapse: collapse;
}

.help-shortcut-row td {
  padding: 0.35rem 0;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.help-shortcut-row:last-child td { border-bottom: none; }

.help-shortcut-keys {
  width: 44%;
  white-space: nowrap;
}

.help-key {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--text);
}

.help-key-sep {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 0 0.15rem;
}

.help-shortcut-desc {
  color: var(--text-muted);
  padding-left: 0.75rem;
}

/* UX2-4: First-time channel notices */
.channel-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.channel-notice-info {
  background: rgba(52, 152, 219, 0.08);
  border-bottom-color: rgba(52, 152, 219, 0.2);
}

.channel-notice-icon { flex-shrink: 0; }

.channel-notice-text {
  flex: 1;
  line-height: 1.45;
  color: var(--text-muted);
}
.channel-notice-text strong { color: var(--text); }

.channel-notice-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}
.channel-notice-dismiss:hover { color: var(--text); }

/* CT-1: forum channel plaintext warning (amber/warning tone) */
.channel-notice-warn {
  background: rgba(224, 160, 48, 0.1);
  border-bottom-color: rgba(224, 160, 48, 0.25);
}

/* CT-1: forum channel sidebar icon */
.forum-hash, .announcement-hash { display: flex; align-items: center; }

/* CT-2: announcement channel read-only input replacement */
.announcement-read-only-notice {
  padding: 0.75rem 1.25rem;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.875rem;
  text-align: center;
  flex-shrink: 0;
}

/* CT-1: forum board */
.forum-board {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.forum-board-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: rgba(224, 160, 48, 0.08);
  border-bottom: 1px solid rgba(224, 160, 48, 0.25);
  font-size: 0.82rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.forum-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  gap: 0.5rem;
}
.forum-sort-tabs { display: flex; gap: 0.25rem; }
.forum-sort-tab {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.forum-sort-tab:hover { color: var(--text); }
.forum-sort-tab.active {
  color: var(--accent);
  border-color: var(--accent);
}
.forum-board-loading, .forum-board-error, .forum-board-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.forum-board-error { color: var(--danger, #c0392b); }
.forum-thread-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.25rem 0;
}
.forum-thread-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.1s;
}
.forum-thread-card:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); }
.forum-thread-card--pinned { background: rgba(var(--accent-rgb, 74,144,226), 0.04); }
.forum-thread-card-main { flex: 1; min-width: 0; }
.forum-thread-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.25rem;
}
.forum-pin-badge { font-size: 0.75rem; }
.forum-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.3rem;
}
.forum-tag-chip {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.forum-thread-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.forum-thread-sep { opacity: 0.4; }
.forum-thread-author { color: var(--text-secondary); }
.forum-vote-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
  min-width: 2rem;
}
.forum-vote-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  font-size: 0.7rem;
  line-height: 1;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.forum-vote-btn:hover { color: var(--accent); background: rgba(var(--accent-rgb, 74,144,226), 0.1); }
.forum-vote-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1;
}
/* Forum post composer */
.forum-composer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.forum-composer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
}
.forum-composer-title {
  background: var(--bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.4rem 0.65rem;
  font-size: 0.88rem;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}
.forum-composer-title:focus { outline: none; border-color: var(--accent); }
.forum-composer-body {
  background: var(--bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.5rem 0.65rem;
  font-size: 0.88rem;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
}
.forum-composer-body:focus { outline: none; border-color: var(--accent); }
.forum-composer-error {
  font-size: 0.82rem;
  color: var(--danger, #c0392b);
}
.forum-composer-actions { display: flex; gap: 0.5rem; }
/* forum header badge */
.forum-plaintext-badge {
  font-size: 0.85rem;
  opacity: 0.8;
}

.sidebar-resize-handle {
  background: var(--border);
  cursor: col-resize;
  transition: background 0.15s;
}

.sidebar-resize-handle:hover {
  background: #574b72;
}

/* .sidebar-header and .sidebar-logo removed — replaced by .nav-rail */
/* .realm-selector and .realm-btn removed — realm switching via nav-rail items */

.sidebar-section {
  padding: 0.75rem 1rem 0.25rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.channel-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.25rem 0;
}

.channel-item {
  display: flex;
  align-items: center;
  padding: 0.4rem 1rem;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: all 0.15s;
}

.channel-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.channel-item.active {
  background: rgba(233, 69, 96, 0.15);
  color: var(--text-primary);
}

.channel-item .hash {
  color: var(--text-muted);
  margin-right: 0.35rem;
  font-weight: 600;
}

.member-list {
  border-top: 1px solid var(--border);
  max-height: 200px;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.presence-dot.online {
  background: var(--online);
}

.presence-dot.offline {
  background: var(--offline);
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.71rem;
  color: var(--text-muted, #555577);
}
.sidebar-footer-links a {
  color: var(--text-muted, #555577);
  text-decoration: none;
}
.sidebar-footer-links a:hover { color: var(--text-secondary); }

.sidebar-footer .user-info {
  font-size: 0.85rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.2s;
}

.logout-btn:hover {
  border-color: var(--error);
  color: var(--error);
}

/* Main Chat Area */
.chat-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.chat-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chat-header .hash {
  color: var(--text-muted);
}

.sfs-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: rgba(52, 152, 219, 0.18);
  color: #5dade2;
  border: 1px solid rgba(52, 152, 219, 0.3);
  margin-left: 0.5rem;
  vertical-align: middle;
  cursor: pointer;
}

/* UX2-3: clickable security badge buttons — only reset what browsers don't inherit on <button> */
button.sec-help-badge {
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
}
button.sec-help-badge:hover {
  filter: brightness(1.2);
}

/* UX2-3: E2EE lock icon in chat header */
.sec-help-lock-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 0.25rem 0 0;
  vertical-align: middle;
  line-height: 1;
  opacity: 0.65;
  transition: opacity 0.15s;
}
.sec-help-lock-btn:hover {
  opacity: 1;
}

/* UX2-3: clickable key-change alert */
button.msg-key-alert {
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
}
button.msg-key-alert:hover {
  color: #e67e22;
}

/* UX2-3: security help modal overrides */
.sec-help-modal {
  max-width: 480px;
  width: 94%;
}
.sec-help-icon {
  font-size: 1.2rem;
  margin-right: 0.4rem;
  flex-shrink: 0;
}
.sec-help-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
}
.sec-help-body {
  gap: 0.75rem;
}
.sec-help-section {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sec-help-section-heading {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.sec-help-section-body {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.sk-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.3);
  margin-left: 0.5rem;
  vertical-align: middle;
  cursor: pointer;
}

.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.message {
  padding: 0.3rem 0;
  line-height: 1.4;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.msg-avatar-col {
  flex-shrink: 0;
  width: 40px;
}

.msg-body-col {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* Message sender avatar */
.msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
}

.msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-sender {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.9rem;
}

.message-time {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.message-edited {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
}

.msg-key-alert {
  font-size: 0.68rem;
  font-weight: 600;
  color: #e67e22;
  background: rgba(230, 126, 34, 0.12);
  border: 1px solid rgba(230, 126, 34, 0.35);
  border-radius: 3px;
  padding: 1px 5px;
  cursor: default;
  white-space: nowrap;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.member-tooltip-key-alert {
  font-size: 0.75rem;
  color: #e67e22;
  background: rgba(230, 126, 34, 0.1);
  padding: 5px 10px;
  border-top: 1px solid rgba(230, 126, 34, 0.3);
  line-height: 1.4;
  display: block;
  width: 100%;
  text-align: left;
  border-left: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline dotted;
}

.message-encrypted-placeholder {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

/* SC-8: Sender Keys permanent decrypt failure (evicted skipped key) */
.sk-cannot-decrypt {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  cursor: help;
}

/* SC-8: no-history session notice for secure/DM channels on new devices */
.sk-no-history-banner {
  margin: 0.75rem 1rem 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.message-content {
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-top: 0.1rem;
  word-break: break-word;
}

.message-deleted .message-content {
  color: var(--text-muted);
  font-style: italic;
}

.message-group {
  display: block;
  padding-left: calc(40px + 0.5rem);
}

/* Message hover actions */
.message-actions {
  position: absolute;
  top: 2px;
  right: 4px;
  display: none;
  gap: 2px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 2px;
}

.message:hover .message-actions,
.message:focus-within .message-actions {
  display: inline-flex;
}

.action-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 7px;
  border-radius: 3px;
  line-height: 1;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.action-btn-danger:hover {
  color: var(--error);
}

/* Inline edit */
.message-edit-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  background: var(--bg-input);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
  margin-top: 0.15rem;
}

.edit-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* Unread badges */
.channel-item .channel-name {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  padding-right: 1.2rem;
}

/* Channel settings gear icon — always in DOM, hidden via opacity so hover state
   survives re-renders without layout recalculation */
.channel-settings-btn {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}

.channel-settings-btn:hover {
  color: var(--text-primary);
}

.channel-item:hover .channel-settings-btn {
  opacity: 1;
  pointer-events: auto;
}

.channel-item.has-unread .channel-name {
  font-weight: 600;
  color: var(--text-primary);
}

.unread-badge {
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}

/* Channel Creation */
.channel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.channel-section-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* CO-1: Channel Categories */
.category-list {
  flex: none;
}

.channel-category {
  margin-bottom: 0.1rem;
}

.category-header {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  gap: 0.15rem;
  min-height: 1.75rem;
}

.category-header:hover .category-actions {
  opacity: 1;
}

.category-collapse-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  min-width: 0;
  text-align: left;
}

.category-collapse-btn:hover {
  color: var(--text-secondary);
}

.category-chevron {
  font-size: 0.65rem;
  flex-shrink: 0;
}

.category-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-rename-input {
  flex: 1;
  min-width: 0;
  padding: 0.1rem 0.3rem;
  font-size: 0.7rem;
  background: var(--bg-input);
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.category-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  opacity: 0;
  transition: opacity 0.1s;
  flex-shrink: 0;
}

.category-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 0.15rem 0.25rem;
  border-radius: 3px;
  line-height: 1;
  transition: background 0.1s, color 0.1s;
}

.category-action-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}

.category-delete-btn:hover {
  color: var(--danger, #c0392b);
}

.category-channel-list {
  padding-left: 0.5rem;
}

/* Drag handles */
.drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 0.7rem;
  padding: 0.1rem 0.2rem;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.1s;
  user-select: none;
  -webkit-user-select: none;
}

.channel-item:hover .drag-handle,
.category-header:hover .drag-handle {
  opacity: 0.6;
}

.drag-handle:hover {
  opacity: 1 !important;
  color: var(--text-secondary);
}

.drag-handle:active {
  cursor: grabbing;
}

/* Category create form */
.category-create-form {
  padding: 0.35rem 0.75rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
}

.channel-create-form {
  padding: 0.35rem 0.75rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
}

.channel-create-input {
  width: 100%;
  padding: 0.35rem 0.6rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.8rem;
  outline: none;
  margin-bottom: 4px;
  transition: border-color 0.2s;
}

.channel-create-input:focus {
  border-color: var(--accent);
}

.channel-create-btn {
  padding: 0.3rem 0.6rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background 0.2s;
}

.channel-create-btn:hover {
  background: var(--accent-hover);
}

.channel-create-btn.cancel {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.channel-create-btn.cancel:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.channel-create-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.channel-create-error {
  font-size: 0.7rem;
  color: var(--error);
  margin-left: 4px;
}

/* DM Section */
.dm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dm-new-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.dm-new-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.dm-list {
  overflow-y: auto;
  padding: 0.25rem 0;
}

.dm-item {
  display: flex;
  align-items: center;
  padding: 0.4rem 1rem;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: all 0.15s;
}

.dm-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.dm-item.active {
  background: rgba(233, 69, 96, 0.15);
  color: var(--text-primary);
}

.dm-item .dm-name {
  flex: 1;
}

.dm-item.has-unread .dm-name {
  font-weight: 600;
  color: var(--text-primary);
}

.dm-picker {
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  max-height: 180px;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.dm-picker-item {
  display: flex;
  align-items: center;
  padding: 0.35rem 1rem;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.85rem;
  transition: all 0.15s;
}

.dm-picker-item:hover {
  background: rgba(233, 69, 96, 0.15);
  color: var(--text-primary);
}

.dm-picker-empty {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* DM Picker Modal */
.dm-picker-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
}

.dm-picker-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 440px; max-height: 560px;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.dm-picker-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem 0.75rem;
  font-weight: 600; font-size: 1rem;
  border-bottom: 1px solid var(--border);
}

.dm-picker-close-btn {
  background: none; border: none;
  color: var(--text-muted); cursor: pointer; font-size: 1.1rem;
}

.dm-picker-close-btn:hover { color: var(--text-primary); }

.dm-picker-search-input {
  margin: 0.75rem 1rem 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px; color: var(--text-primary);
  font-size: 0.875rem; outline: none;
  width: calc(100% - 2rem); box-sizing: border-box;
}

.dm-picker-search-input:focus { border-color: var(--accent); }

.dm-picker-user-list {
  flex: 1; overflow-y: auto; padding: 0.25rem 0;
}

.dm-picker-user-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  cursor: pointer; color: var(--text-secondary);
  transition: background 0.1s;
  user-select: none;
  /* button reset (element is now <button>) */
  width: 100%; border: none; background: transparent; font: inherit; text-align: left;
}

.dm-picker-user-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }

.dm-picker-user-item.selected {
  background: rgba(233, 69, 96, 0.12);
  color: var(--text-primary);
}

.dm-picker-user-item.disabled {
  opacity: 0.4; cursor: default;
}

.dm-picker-check {
  margin-left: auto; color: var(--accent);
  font-size: 0.85rem;
}

.dm-picker-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem; color: var(--text-muted);
}

.dm-picker-start-btn {
  padding: 0.4rem 1rem;
  background: var(--accent); color: white;
  border: none; border-radius: 4px; cursor: pointer;
  font-size: 0.875rem; font-weight: 500;
  transition: opacity 0.15s;
}

.dm-picker-start-btn:disabled { opacity: 0.4; cursor: default; }
.dm-picker-start-btn:not(:disabled):hover { opacity: 0.85; }

.dm-item .dm-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-right: 0.4rem;
  font-size: 0.85rem;
}

/* DM list avatar with presence indicator overlay */
.dm-avatar-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-right: 0.4rem;
}
button.dm-avatar-wrap {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
button.dm-avatar-wrap:focus-visible {
  outline: 2px solid var(--accent);
  border-radius: 50%;
  outline-offset: 1px;
}

.dm-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
}

.dm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-presence-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
}

.dm-presence-indicator.online { background: var(--online); }
.dm-presence-indicator.offline { background: var(--offline); }

/* DM read receipt seen indicators */
.dm-seen-row {
  display: flex;
  justify-content: flex-end;
  padding: 0 0.75rem 0.15rem;
}

.dm-seen-avatars {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: default;
}

.dm-seen-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 0.55rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--bg-primary);
}

.dm-seen-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-seen-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}

.dm-seen-avatars:hover .dm-seen-tooltip {
  display: block;
}

.typing-indicator {
  padding: 0.25rem 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  min-height: 1.5rem;
}

/* Message Input */
.message-input-container {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  position: relative;
}

.message-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.message-input {
  flex: 1;
  padding: 0.6rem 0.75rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s;
  min-height: 2.4rem;
  max-height: 12rem;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.message-input:focus {
  border-color: var(--accent);
}

/* Placeholder via CSS pseudo-element (contenteditable has no native placeholder) */
.message-input:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

.message-input.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary));
}

/* Live markdown formatting inside the composer */
.message-input .md-marker {
  opacity: 0.45;
  font-weight: normal !important;
  font-style: normal !important;
  text-decoration: none !important;
}

.message-input .md-list-item {
  display: block;
  padding-left: 1.2em;
  position: relative;
}
.message-input .md-list-item::before {
  content: '•';
  position: absolute;
  left: 0.35em;
  color: var(--text-secondary);
}

.send-btn {
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
}

.send-btn:hover {
  background: var(--accent-hover);
}

/* Sentinel (invisible trigger for IntersectionObserver) */
.message-list-sentinel {
  height: 1px;
  width: 100%;
}

/* Loading spinner */
.message-list-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

.spinner-dots {
  display: flex;
  gap: 6px;
}

.spinner-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: spinner-bounce 1.4s ease-in-out infinite both;
}

.spinner-dots span:nth-child(1) { animation-delay: -0.32s; }
.spinner-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes spinner-bounce {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Jump-to-message highlight */
.message-highlight {
  animation: msg-highlight 2s ease-out;
}

@keyframes msg-highlight {
  0%, 20% { background-color: rgba(233, 69, 96, 0.25); }
  100% { background-color: transparent; }
}

/* Reactions */
.reactions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.reaction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.4;
}

.reaction-badge:hover {
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.1);
}

.reaction-badge.active {
  border-color: rgba(139, 92, 246, 0.6);
  background: rgba(139, 92, 246, 0.15);
  color: var(--text-primary);
}

/* Reaction user list panel */
.reaction-badge-wrapper {
  position: relative;
  display: inline-flex;
}

.reaction-users-panel {
  display: none;
  position: fixed;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  min-width: 100px;
  max-width: 180px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  pointer-events: none;
}

.reaction-user-entry {
  font-size: 0.75rem;
  color: var(--text-primary);
  padding: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Emoji Picker */
.emoji-picker {
  position: absolute;
  top: 100%;
  right: 4px;
  z-index: 100;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px 8px 8px;
  width: 400px;
  max-width: calc(100vw - 20px);
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.emoji-picker::-webkit-scrollbar {
  width: 5px;
}

.emoji-picker::-webkit-scrollbar-track {
  background: transparent;
}

.emoji-picker::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.emoji-picker::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

.emoji-picker-category {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 6px 4px 4px;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 2px;
}

.emoji-picker-item {
  background: none;
  border: none;
  font-size: 1.2rem;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  text-align: center;
}

.emoji-picker-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.emoji-picker-coming-soon {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 4px 8px;
}

/* Channel Settings Pane */
.channel-settings-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
}

.channel-settings-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.channel-settings-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px 7px;
  border-radius: 3px;
  line-height: 1;
}

.channel-settings-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

/* Inline confirmation overlay — used in channel-settings and user-settings */
.settings-confirm-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.settings-confirm-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.settings-confirm-msg {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 1rem;
  color: var(--text-primary);
  white-space: pre-line;
}
.settings-confirm-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.channel-settings-body {
  padding: 1.5rem;
}

.channel-settings-body h2 {
  font-size: 1.25rem;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.channel-settings-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.channel-settings-desc.muted {
  color: var(--text-muted);
  font-style: italic;
}

/* Channel Settings Editing */
.channel-settings-field {
  margin-bottom: 0.75rem;
}

.channel-settings-edit-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1;
  vertical-align: middle;
  margin-left: 4px;
}

.channel-settings-edit-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.channel-settings-edit-btn.always-visible {
  display: inline;
}

.channel-settings-edit-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  background: var(--bg-input);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
  outline: none;
}

.channel-settings-edit-textarea {
  width: 100%;
  padding: 0.4rem 0.6rem;
  background: var(--bg-input);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
  resize: vertical;
  font-family: inherit;
}

.channel-settings-edit-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.channel-settings-edit-error {
  font-size: 0.7rem;
  color: var(--error);
  margin-top: 4px;
}

/* Channel Settings Danger Zone */
.channel-settings-danger {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.channel-settings-danger h3 {
  font-size: 0.9rem;
  color: var(--error);
  margin-bottom: 0.5rem;
}

.channel-settings-danger p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.channel-delete-btn {
  padding: 0.4rem 1rem;
  background: var(--error);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.2s;
}

.channel-delete-btn:hover {
  background: #c0283d;
}

/* Chat Main Wrapper */
.chat-main-wrapper {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

.chat-main-wrapper > .chat-main {
  flex: 1;
  min-width: 0;
}

/* Notification Icon Button */
.notification-icon-btn {
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.notification-icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.notification-icon-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(233, 69, 96, 0.1);
}

.notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Chat Header Title */
.chat-header-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* No-channel state with notification button */
.no-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 1.1rem;
  gap: 1rem;
}

/* Right Panel Resize Handle */
.right-panel-resize-handle {
  width: 3px;
  background: var(--border);
  cursor: col-resize;
  transition: background 0.15s;
}

.right-panel-resize-handle:hover {
  background: #574b72;
}

/* Right Panel (members / notifications) */
.right-panel {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.right-panel-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.right-panel .member-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0;
  border-top: none;
  max-height: none;
}

/* Notification Panel */
.notification-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.notification-panel-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notification-panel-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.notification-mark-all-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  transition: all 0.2s;
}

.notification-mark-all-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.notification-list {
  flex: 1;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.notification-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.notification-item.unread {
  background: rgba(233, 69, 96, 0.08);
}

.notification-item.unread:hover {
  background: rgba(233, 69, 96, 0.12);
}

.notification-type-icon {
  font-size: 1rem;
  line-height: 1.4;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.notification-body {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.notification-excerpt {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.notification-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.9rem;
  padding: 2rem;
}

/* Mentions */
.mention {
  color: var(--accent);
  background: rgba(233, 69, 96, 0.15);
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 500;
}

.mention-self {
  background: rgba(233, 69, 96, 0.3);
}

/* Mention Autocomplete */
.mention-autocomplete {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
  z-index: 100;
  margin-bottom: 4px;
}

.mention-autocomplete-item {
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s;
}

.mention-autocomplete-item:hover,
.mention-autocomplete-item.active {
  background: rgba(233, 69, 96, 0.2);
  color: var(--text-primary);
}

/* Clickable notification items */
.notification-item.clickable {
  cursor: pointer;
}

/* File Upload Button */
.file-upload-hidden {
  display: none;
}

.file-upload-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.file-upload-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Upload Progress */
.upload-progress {
  padding: 0.4rem 0.75rem;
  margin-bottom: 0.4rem;
  background: var(--bg-tertiary);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.upload-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.upload-progress-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: 0.5rem;
}

.upload-progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.15s;
}

.upload-error {
  padding: 0.4rem 0.75rem;
  margin-bottom: 0.4rem;
  background: rgba(233, 69, 96, 0.15);
  border: 1px solid var(--error);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--error);
}

/* File Content in Messages */
.file-content {
  margin-top: 0.25rem;
  max-width: 400px;
}

/* File Image */
.file-image-container {
  position: relative;
  display: inline-block;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.file-image {
  display: block;
  max-width: 400px;
  max-height: 300px;
  object-fit: contain;
  cursor: pointer;
}

.file-image-placeholder {
  width: 200px;
  height: 120px;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* File Audio */
.file-audio-container {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem;
  background: var(--bg-tertiary);
}

.file-audio-container audio {
  width: 100%;
  height: 36px;
}

/* File Video */
.file-video-container {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.file-video-container video {
  display: block;
  max-width: 400px;
  max-height: 300px;
}

/* Generic File Badge */
.file-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.file-badge-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.file-badge-info {
  flex: 1;
  min-width: 0;
}

.file-badge-name {
  font-size: 0.85rem;
  color: var(--text-primary);
  word-break: break-word;
}

.file-badge-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.file-download-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: all 0.2s;
}

.file-download-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* File Info Bar (shared by image/audio/video) */
.file-info-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.file-info-bar .file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-info-bar .file-size {
  flex-shrink: 0;
}

.file-download-link {
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}

.file-download-link:hover {
  color: var(--accent);
}

/* Inline URL links within message text */
.message-link {
  color: #7aadff;
  text-decoration: none;
  word-break: break-all;
}
.message-link:hover {
  text-decoration: underline;
}

/* URL Embed — shared dismiss button */
.url-embed-dismiss {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  line-height: 20px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.url-embed-media:hover .url-embed-dismiss,
.url-embed-card:hover .url-embed-dismiss {
  opacity: 1;
}
.url-embed-dismiss:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Inline media (image / video / audio) */
.url-embed-media {
  position: relative;
  display: inline-block;
  margin-top: 0.35rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  max-width: 420px;
}

.url-embed-image {
  display: block;
  max-width: 420px;
  max-height: 320px;
  object-fit: contain;
}

.url-embed-video {
  display: block;
  max-width: 420px;
  max-height: 300px;
  background: #000;
}

.url-embed-audio {
  display: block;
  width: 360px;
  max-width: 100%;
  padding: 6px;
  background: var(--bg-secondary);
}

/* OG preview card */
.url-embed-card {
  position: relative;
  margin-top: 0.4rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  overflow: hidden;
  max-width: 420px;
  background: var(--bg-secondary);
}

.url-embed-card-image {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}

.url-embed-card-body {
  padding: 8px 10px;
}

.url-embed-card-site {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.url-embed-card-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.url-embed-card-title:hover {
  text-decoration: underline;
  color: var(--accent);
}

.url-embed-card-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Markdown formatting in messages */
.md-list {
  margin: 0.15em 0;
  padding-left: 1.4em;
  list-style-type: disc;
}
.md-list li {
  margin: 0.1em 0;
}
.md-blockquote {
  border-left: 3px solid var(--accent);
  margin: 0.2em 0;
  padding: 0.15em 0.65em;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.15);
  border-radius: 0 3px 3px 0;
}
.md-code {
  font-family: 'Consolas', 'Courier New', monospace;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  font-size: 0.88em;
  color: #e6b87a;
}

/* Pinned Messages */
.message-pinned {
  background: rgba(233, 69, 96, 0.06);
  border-left: 2px solid var(--accent);
}

.action-btn.pin-active {
  color: var(--accent);
}

.pin-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pin-panel-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.pin-list {
  flex: 1;
  overflow-y: auto;
}

.pin-item {
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.pin-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.pin-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.pin-item-sender {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.pin-item-time {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.pin-item-content {
  font-size: 0.85rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.pin-item-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.pin-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Pinned thread card variant */
.pin-item-thread {
  border-left: 2px solid var(--accent);
}

.pin-thread-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--bg-secondary);
  border-radius: 3px;
  padding: 0.1em 0.4em;
}

.pin-thread-status {
  font-size: 0.65rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  padding: 0.1em 0.4em;
}

.pin-thread-title {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pin-media-thumb {
  margin: 0.4rem 0;
  max-width: 100%;
}

.pin-media-thumb img {
  max-width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  display: block;
}

.pin-media-player {
  margin: 0.4rem 0;
}

.pin-media-player audio,
.pin-media-player video {
  width: 100%;
  max-height: 120px;
  display: block;
  border-radius: 6px;
}

.pin-media-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pin-media-loading {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.4rem 0;
  font-style: italic;
}

.channel-settings-pins {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.channel-settings-pins h3 {
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.pin-settings-item {
  padding: 0.4rem 0;
  cursor: pointer;
  transition: color 0.15s;
}

.pin-settings-item:hover {
  color: var(--accent);
}

.pin-settings-sender {
  font-weight: 600;
  font-size: 0.8rem;
}

.pin-settings-content {
  font-size: 0.8rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Search panel */
.search-panel { display: flex; flex-direction: column; height: 100%; }
.search-scope-buttons { display: flex; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); }
.search-scope-btn { flex: 1; padding: 0.3rem 0; background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); cursor: pointer; font-size: 0.8rem; }
.search-scope-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.search-input-row { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.search-input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: 0.4rem 0.6rem; color: var(--text-primary); font-size: 0.85rem; }
.search-input:focus { outline: none; border-color: var(--accent); }
.search-submit-btn { background: var(--accent); border: none; border-radius: 4px; padding: 0.4rem 0.7rem; color: #fff; cursor: pointer; font-size: 0.9rem; }
.search-submit-btn:hover { opacity: 0.85; }
.search-loading { display: flex; justify-content: center; padding: 1rem; }
.search-empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }
.search-results { flex: 1; overflow-y: auto; padding: 0.5rem 0; }
.search-result-item { padding: 0.6rem 1rem; cursor: pointer; border-bottom: 1px solid var(--border); }
.search-result-item:hover { background: var(--bg-tertiary); }
.search-result-channel { font-size: 0.75rem; color: var(--accent); margin-bottom: 0.2rem; }
.search-result-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.search-result-sender-wrap { display: flex; align-items: center; gap: 0.4rem; }
.search-result-sender { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.search-result-time { font-size: 0.75rem; color: var(--text-muted); }
.search-result-preview { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; }
.search-result-preview mark { background: rgba(233,69,96,0.3); color: var(--text-primary); border-radius: 2px; padding: 0 1px; }

/* Search type tabs */
.search-type-tabs { display: flex; border-bottom: 1px solid var(--border); }
.search-type-tab { flex: 1; padding: 0.5rem 0; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); cursor: pointer; font-size: 0.82rem; transition: color 0.15s, border-color 0.15s; }
.search-type-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.search-type-tab:hover:not(.active) { color: var(--text-primary); }

/* Search entity results (users / channels) */
.search-entity-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; }
.search-entity-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; overflow: hidden; }
.search-entity-avatar img { width: 100%; height: 100%; object-fit: cover; }
.search-entity-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; color: var(--text-secondary); }
.search-entity-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.search-entity-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-entity-sub { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Search history note (fast-path channel search) */
.search-history-note { padding: 0.4rem 1rem; font-size: 0.76rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); background: var(--bg-tertiary); }
.search-history-server-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.76rem; padding: 0; text-decoration: underline; }
.search-history-server-btn:hover { opacity: 0.8; }

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ==================== Projects Section ==================== */

/* Sidebar */
.project-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-list {
  overflow-y: auto;
  padding: 0.25rem 0;
}

.project-group {
  margin-bottom: 2px;
}

.project-header {
  display: flex;
  align-items: center;
  padding: 0.4rem 1rem;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}

.project-header:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.project-header.active {
  background: rgba(233, 69, 96, 0.15);
  color: var(--text-primary);
}

.project-expand {
  font-size: 1rem;
  margin-right: 0.35rem;
  color: var(--text-muted);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}

.project-expand:hover {
  color: var(--text-primary);
}

.project-expand:focus-visible {
  outline: 2px solid var(--accent);
  border-radius: 2px;
  outline-offset: 1px;
}

.project-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.project-status-dot.status-plan { background: var(--text-muted); }
.project-status-dot.status-in-progress { background: #f0ad4e; }
.project-status-dot.status-complete { background: var(--success); }

.project-channels {
  padding-left: 1.25rem;
}

.project-channels .channel-item {
  padding-left: 0.75rem;
  font-size: 0.85rem;
}

.project-channel-add {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.8rem;
  transition: color 0.15s;
}

.project-channel-add:hover {
  color: var(--accent);
}

.project-channel-add .hash {
  margin-right: 0.3rem;
}

.project-channel-add .add-channel {
  font-style: italic;
}

.project-channel-create {
  margin-left: 0;
  padding: 0.25rem 0.5rem;
}

/* Project Page */
.project-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.project-page-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.project-page-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.project-page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-style: italic;
}

.project-title {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* Status */
.project-status-section {
  margin-bottom: 1rem;
}

.project-status-badge {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.project-status-badge.status-plan {
  background: rgba(106, 106, 122, 0.2);
  color: var(--text-muted);
  border: 1px solid var(--text-muted);
}

.project-status-badge.status-in-progress {
  background: rgba(240, 173, 78, 0.15);
  color: #f0ad4e;
  border: 1px solid #f0ad4e;
}

.project-status-badge.status-complete {
  background: rgba(67, 181, 129, 0.15);
  color: var(--success);
  border: 1px solid var(--success);
}

.project-status-select {
  padding: 0.3rem 0.6rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.project-status-select:focus {
  border-color: var(--accent);
  outline: none;
}

.project-status-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Placeholder sections */
.project-placeholder-section {
  margin: 1rem 0;
  padding: 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.project-placeholder-section h3 {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.muted-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Member list */
.project-members-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.project-members-section h3,
.project-channels-section h3 {
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.project-member-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-member-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.project-member-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-member-role {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
}

/* Project channels in page */
.project-channels-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.project-channel-link {
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.85rem;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.project-channel-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent);
}

.project-channel-link .hash {
  color: var(--text-muted);
  margin-right: 0.25rem;
}

/* Project row settings gear — hover reveal */
.project-settings-gear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 0.15s;
  margin-left: auto;
  flex-shrink: 0;
}
.project-header:hover .project-settings-gear { opacity: 1; }
.project-header:hover .project-settings-gear:hover { color: var(--text-primary); }

/* Project settings panel */
.project-settings {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.project-settings-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
}

.project-settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.project-settings-card {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 1rem;
}

.project-settings-card h3 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem 0;
}

.project-settings-field {
  margin-bottom: 0.75rem;
}

.project-settings-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.project-settings-value {
  font-size: 0.9rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.project-settings-role-select {
  font-size: 0.75rem;
  padding: 0.15rem 0.35rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
}

.project-settings-remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
  font-size: 1rem;
  line-height: 1;
}
.project-settings-remove-btn:hover { color: var(--error, #e94560); }

.project-add-member-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.75rem;
}

.project-add-member-select { flex: 1; min-width: 120px; }
.project-add-role-select { min-width: 90px; }

/* Custom role tags */
.project-role-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.project-role-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  color: var(--text-primary);
}

.project-role-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  font-size: 0.85rem;
  line-height: 1;
}
.project-role-tag-remove:hover { color: var(--error, #e94560); }

.project-role-limit-badge {
  font-size: 0.7rem;
  font-weight: normal;
  color: var(--text-muted);
  margin-left: 0.4rem;
}

/* Multi-role picker */
.project-role-backdrop { position: fixed; inset: 0; z-index: 19; }
.project-role-picker { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; flex-shrink: 0; }
.project-role-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem; }
.project-role-chip {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); padding: 1px 5px;
  border: 1px solid var(--border); border-radius: 3px; white-space: nowrap;
}
.project-role-chip-remove {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 0; font-size: 0.8rem; line-height: 1;
}
.project-role-chip-remove:hover { color: #e94560; }
.project-role-add-btn {
  background: none; border: 1px solid var(--border); border-radius: 3px;
  color: var(--text-muted); cursor: pointer; font-size: 0.7rem; padding: 1px 4px; line-height: 1.4;
}
.project-role-add-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.project-role-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.4rem 0; min-width: 160px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.project-role-dropdown-item {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem; font-size: 0.82rem;
  color: var(--text-secondary); cursor: pointer; user-select: none;
}
.project-role-dropdown-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.project-role-dropdown-item input[type="checkbox"] { accent-color: var(--accent); }
.project-add-role-trigger {
  font-size: 0.75rem; padding: 0.15rem 0.5rem;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-primary); cursor: pointer; min-width: 110px; text-align: left;
}
.project-add-role-trigger:hover { border-color: var(--accent); }

/* Reset the large channel-name input style when used inside project settings */
.project-settings-body .channel-settings-edit-input {
  font-size: 0.875rem;
  font-weight: normal;
}
.project-settings-body .channel-settings-edit-textarea {
  font-size: 0.875rem;
}

.project-external-link {
  color: var(--accent);
  font-size: 0.85rem;
  word-break: break-all;
}
.project-external-link:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────
   Phase 7: Voice Channels
   ───────────────────────────────────────────── */

/* Voice Channels sidebar section */
.voice-channels-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.25rem;
}

.voice-channel-list {
  padding: 0.25rem 0;
}

.voice-channel-empty {
  padding: 0.25rem 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.voice-channel-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.voice-channel-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.voice-channel-item.active {
  background: rgba(67, 181, 129, 0.12);
  color: var(--online);
}

.voice-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
}

.voice-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--online);
  flex-shrink: 0;
  animation: voice-pulse 2s ease-in-out infinite;
}

@keyframes voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Sidebar footer layout update */
.sidebar-user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--bg-tertiary);
  flex-shrink: 0;
}

.sidebar-user-identity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.user-bar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
}

.user-bar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sidebar user actions row */
.sidebar-user-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.user-settings-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.user-settings-btn:hover {
  color: var(--text-primary);
  background: var(--hover);
}

/* User Settings Pane */
.user-settings-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-secondary);
  position: relative;
}

.user-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  flex-shrink: 0;
}

.user-settings-body {
  overflow-y: auto;
  flex: 1;
}

.user-settings-body-inner {
  padding: 1.5rem 2rem;
  max-width: 600px;
}

.settings-section {
  margin-bottom: 2.25rem;
}

.settings-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-avatar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.settings-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
  user-select: none;
}

.settings-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.settings-avatar-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: border-color 0.15s, color 0.15s;
}

.settings-avatar-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.settings-avatar-btn.uploading {
  opacity: 0.6;
  cursor: default;
}

.settings-avatar-file-input {
  display: none;
}

.settings-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.settings-avatar-error {
  font-size: 0.8rem;
  color: var(--error);
}

.settings-soon-tag {
  font-size: 0.6rem;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1rem 0.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

.settings-field-group {
  margin-bottom: 1.25rem;
}

.settings-field-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.settings-field-sublabel {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.settings-value-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.settings-value {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.settings-value.muted {
  color: var(--text-muted);
}

.settings-field-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.settings-edit-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.settings-edit-block input[type="password"] {
  font-size: 0.875rem;
  font-weight: 400;
}

.settings-success-msg {
  font-size: 0.82rem;
  color: #4caf50;
  margin-top: 0.25rem;
}

/* Settings Edit Button (inline edit in settings panes) */
.settings-edit-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.settings-edit-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.settings-value-empty {
  color: var(--text-muted);
  font-style: italic;
}

/* Realm avatar in settings — initials use bg-tertiary instead of accent */
.realm-settings-avatar {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 1.25rem;
}

/* Realm Settings */
.realm-settings-banner-area {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.realm-settings-banner-img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.realm-settings-banner-placeholder {
  width: 100%;
  height: 120px;
  border: 2px dashed var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.realm-settings-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.realm-settings-banner-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.82rem;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.realm-settings-banner-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.realm-settings-banner-btn.loading {
  opacity: 0.6;
  cursor: default;
}

.realm-settings-banner-error {
  font-size: 0.8rem;
  color: var(--error);
}

.realm-settings-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.realm-settings-placeholder-card {
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  opacity: 0.6;
}

.realm-settings-placeholder-card p {
  margin: 0;
  font-size: 0.83rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.realm-settings-error {
  font-size: 0.8rem;
  color: var(--error);
}

.realm-settings-member-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.realm-settings-member-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
}

.realm-settings-member-row:hover {
  background: var(--bg-tertiary);
}

.realm-settings-member-name {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.realm-settings-you {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.realm-settings-role-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.realm-settings-role-badge.role-owner {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}

.realm-settings-role-badge.role-admin {
  background: rgba(255, 165, 0, 0.15);
  color: #ffa500;
}

.realm-settings-role-badge.role-member {
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.realm-settings-remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  opacity: 0;
}

.realm-settings-member-row:hover .realm-settings-remove-btn {
  opacity: 1;
}

.realm-settings-remove-btn:hover {
  color: var(--error);
  background: rgba(233, 69, 96, 0.1);
}

/* Voice Panel — appears above user bar in sidebar footer */
.voice-panel {
  background: rgba(67, 181, 129, 0.08);
  border-top: 1px solid rgba(67, 181, 129, 0.2);
  padding: 0.5rem 0.75rem;
  flex-shrink: 0;
}

.voice-panel-channel {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.voice-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.voice-status-dot.live {
  background: var(--online);
  animation: voice-pulse 2s ease-in-out infinite;
}

.voice-status-dot.connecting {
  background: #f0ad4e;
  animation: voice-pulse 1s ease-in-out infinite;
}

.voice-channel-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--online);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.voice-channel-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-panel-controls {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.voice-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text-secondary);
  transition: all 0.15s;
  flex-shrink: 0;
  padding: 0;
}

.voice-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

.voice-btn.muted,
.voice-btn.deafened {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(233, 69, 96, 0.1);
}

.voice-btn.leave-btn {
  border-color: var(--accent);
  color: var(--accent);
}

.voice-btn.leave-btn:hover {
  background: var(--accent);
  color: white;
}

.voice-btn.placeholder,
.voice-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.voice-btn.camera-on {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Mobile-only voice controls bar — sits at the bottom of the voice screen */
.mobile-voice-controls-bar { display: none; }

/* ── Voice screen center pane ── */

.voice-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
}

.voice-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.voice-screen-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.voice-screen-share-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
  transition: background 0.15s, border-color 0.15s;
}

.voice-screen-share-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--accent);
}

/* Participant grid (standard mode) */
.voice-participant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
  align-content: start;
  overflow-y: auto;
  flex: 1;
}

.voice-participant-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 1rem;
  border-radius: 0.5rem;
  transition: background 0.15s;
}

.voice-participant-card:hover {
  background: var(--bg-tertiary);
}

/* Camera-on video tile */
.voice-participant-card.has-camera {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
  padding: 0.5rem;
  align-items: flex-end;
  justify-content: flex-end;
}

.voice-participant-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.has-camera .voice-avatar-ring {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
}

.has-camera .voice-participant-name {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  color: #fff;
}

.has-camera .voice-participant-indicators {
  position: relative;
  z-index: 1;
}

/* Avatar ring */
.voice-avatar-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding: 3px;
  border: 3px solid transparent;
  transition: border-color 0.1s, box-shadow 0.1s;
  box-sizing: border-box;
}

.voice-avatar-ring.speaking {
  border-color: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.voice-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
}

.voice-avatar-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.voice-participant-name {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-participant-indicators {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
  font-size: 0.8rem;
  min-height: 1.2em;
}

/* Screen share layout */
.voice-screen-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.voice-screen-share-feed {
  flex: 3;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}

.voice-screen-share-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.voice-participants-strip {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  align-items: center;
  border-top: 1px solid var(--border);
  min-height: 0;
}

.voice-participants-strip .voice-avatar-ring {
  width: 56px;
  height: 56px;
}

.voice-participants-strip .voice-avatar {
  font-size: 1rem;
}

.voice-participants-strip .voice-participant-card {
  flex-shrink: 0;
  padding: 0.5rem;
  min-width: 70px;
}

/* Per-user volume popover
   Position (fixed + bottom/left/transform) is set via inline style at render time
   so the popover escapes the overflow:auto clip on .voice-participant-grid. */
.voice-volume-popover {
  z-index: 200;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem;
  min-width: 220px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: default;
}

.voice-volume-popover-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-volume-popover-slider-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.voice-volume-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
}

.voice-volume-slider {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}

.voice-volume-pct {
  font-size: 0.78rem;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.voice-volume-popover-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.voice-volume-reset-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  transition: background 0.15s;
}

.voice-volume-reset-btn:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.voice-volume-profile-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  transition: background 0.15s;
}

.voice-volume-profile-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Small badge shown on cards with a non-default user volume */
.voice-volume-indicator {
  font-size: 0.7rem;
  color: var(--accent);
  white-space: nowrap;
}

/* CT-3: Stage channel voice view */
.stage-screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.stage-header-badge {
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 600;
}
.stage-channel-name {
  font-size: 0.88rem;
  color: var(--text-muted);
}
.stage-speakers-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.25rem;
  flex-shrink: 0;
}
.stage-no-speakers {
  color: var(--text-muted);
  font-size: 0.88rem;
  padding: 0.5rem;
}
.stage-speaker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 80px;
  position: relative;
}
.stage-speaker-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
}
.stage-speaker-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 1.2rem;
  font-weight: 600;
}
.stage-speaker-name {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage-remove-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger, #c0392b);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.stage-audience-section {
  padding: 0.5rem 1.25rem;
  flex-shrink: 0;
  border-top: 1px solid var(--border-color);
}
.stage-audience-count {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.stage-controls-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color);
  margin-top: auto;
  flex-shrink: 0;
}

/* Sidebar participant names under voice channel */
.voice-sidebar-members {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--text-muted);
  padding: 0 0 0.2rem 2rem;
  line-height: 1.4;
}

/* Attachment preview strip (pre-send staging area) */
.attachment-preview-strip {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0.75rem 0;
  max-height: 8rem;
}

.attachment-preview-item {
  position: relative;
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.attachment-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-preview-name {
  font-size: 0.65rem;
  color: var(--text-muted);
  word-break: break-all;
  text-align: center;
  padding: 0.25rem;
}

.attachment-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  font-size: 0.7rem;
  cursor: pointer;
  line-height: 1.2rem;
  text-align: center;
}

.attachment-preview-remove:hover {
  background: var(--accent);
}

/* Edit mode attachment strip (inside message edit area) */
.edit-attachment-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-items: center;
}

.edit-attachment-item {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-attachment-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-attachment-discard {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  font-size: 0.65rem;
  cursor: pointer;
  line-height: 1.1rem;
  text-align: center;
}

.edit-attachment-discard:hover {
  background: var(--accent);
}

.edit-attachment-add {
  width: 3rem;
  height: 3rem;
  border-radius: 4px;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
}

.edit-attachment-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Reply bar (above input, shown when replying to a message) */
.reply-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.reply-bar-label {
  font-weight: 600;
  color: var(--text-primary);
}

.reply-bar-body {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.reply-bar-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  padding: 0 0.25rem;
  flex-shrink: 0;
}

.reply-bar-dismiss:hover {
  color: var(--accent);
}

/* Reply preview (inside message, shown when message has a reply_to) */
.reply-preview {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
  border-left: 2px solid var(--accent);
  background: var(--bg-tertiary);
  border-radius: 0 4px 4px 0;
  font-size: 0.78rem;
  cursor: pointer;
  max-width: 480px;
  opacity: 0.85;
}

.reply-preview:hover {
  opacity: 1;
  background: var(--bg-secondary);
}

.reply-preview-sender {
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.1rem;
}

.reply-preview-content {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-preview-deleted {
  font-style: italic;
  cursor: default;
  opacity: 0.6;
}

/* ── Sound & Alert Preference ─────────────────────────────── */

/* Notification panel: sound toggle button */
.notif-sound-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.25rem;
  opacity: 0.5;
  transition: opacity 0.15s;
  line-height: 1;
}
.notif-sound-toggle.active {
  opacity: 1;
}
.notif-sound-toggle:hover {
  opacity: 0.85;
}

/* Channel settings: alert preference select + label */
.channel-settings-alert-pref {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.channel-settings-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}
.channel-settings-select {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
  width: 100%;
  max-width: 260px;
}
.channel-settings-select:focus {
  border-color: var(--accent);
  outline: none;
}
.channel-settings-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.channel-settings-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

/* User settings: alert pref row */
.settings-alert-pref-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.settings-success-inline {
  font-size: 0.8rem;
  color: var(--success);
}

/* Theme picker */
.theme-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
}

.theme-picker-panel {
  position: fixed;
  left: 64px;
  bottom: 8px;
  z-index: 1000;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  min-width: 172px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  user-select: none;
}

.theme-picker-header {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 8px 6px;
}

.theme-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
  /* button reset (element is now <button>) */
  width: 100%; border: none; background: transparent; font: inherit; color: inherit; text-align: left;
}

.theme-picker-item:hover {
  background: var(--nav-hover-bg);
}

.theme-picker-item.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.theme-swatch {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.theme-swatch-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(128, 128, 128, 0.25);
  display: inline-block;
}

.theme-picker-name {
  font-size: 0.85rem;
  color: var(--text-primary);
  flex: 1;
}

.theme-picker-check {
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 700;
}

/* ── Project Media Viewer (Steam-style: main pane + thumbnail strip) ── */

/* Side-by-side layout: gallery (~68%) + info card (flex:1) */
.project-media-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.project-media-viewer {
  flex: 0 0 68%;
  min-width: 0;
}

.project-info-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.project-info-card .project-title {
  margin: 0 0 0.1rem;
}

.project-info-card .project-status-section {
  margin-bottom: 0.1rem;
}

.project-info-card .channel-settings-field {
  margin: 0;
}

.project-info-link-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.project-info-link-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.project-media-main-pane {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.4rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-media-main-pane a {
  display: block;
  width: 100%;
  height: 100%;
}

.project-media-main-pane img,
.project-media-main-pane video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.project-media-main-pane a:hover img {
  opacity: 0.9;
}

/* Hover navigation arrows */
.project-media-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s;
  z-index: 2;
  padding: 0;
}

.project-media-nav.nav-left  { left: 0; justify-content: flex-start; padding-left: 0.5rem; }
.project-media-nav.nav-right { right: 0; justify-content: flex-end; padding-right: 0.5rem; }

.project-media-main-pane:hover .project-media-nav {
  opacity: 1;
}

.project-media-nav-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: background 0.15s, transform 0.1s;
  pointer-events: none;
}

.project-media-nav:hover .project-media-nav-icon {
  background: rgba(0,0,0,0.8);
  transform: scale(1.1);
}

.project-media-strip-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
}

.project-media-strip-arrow {
  flex-shrink: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  transition: color 0.15s, border-color 0.15s;
}

.project-media-strip-arrow:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.project-media-strip {
  flex: 1;
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 3px;
}

.project-media-strip-thumb {
  flex-shrink: 0;
  width: 160px;
  height: 90px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--bg-tertiary);
  transition: border-color 0.15s;
}

.project-media-strip-thumb.active {
  border-color: var(--accent);
}

.project-media-strip-thumb:hover:not(.active) {
  border-color: var(--text-muted);
}

.project-media-strip-thumb img,
.project-media-strip-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* ── Project Media Settings (project-settings pane) ───────────────── */

.project-media-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.project-media-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
}

.project-media-thumb {
  width: 60px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  display: block;
}

.project-media-row-name {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.project-media-order-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  font-size: 0.65rem;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}

.project-media-order-btn:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.project-media-order-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.project-media-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  font-size: 1rem;
  flex-shrink: 0;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}

.project-media-delete-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.project-media-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.82rem;
  transition: border-color 0.15s, color 0.15s;
  margin-top: 0.25rem;
}

.project-media-upload-label:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.project-media-upload-label input[type="file"] {
  display: none;
}

/* User Profile Banner */
.user-settings-banner {
  width: 100%;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.user-settings-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-settings-banner-empty {
  width: 100%;
  height: 100%;
  border: 2px dashed var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-settings-banner-actions {
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.user-settings-banner-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.82rem;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.user-settings-banner-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.user-settings-banner-btn.uploading {
  opacity: 0.6;
  cursor: default;
}

/* User Profile Pane (center screen) */
.user-profile-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg-primary);
}

.user-profile-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 2rem 2rem;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.user-profile-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  align-self: flex-start;
  padding-top: 48px;
  margin-left: auto;
  flex-shrink: 0;
}

.user-profile-action-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.15rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
}

.user-profile-action-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.profile-modal-banner {
  width: 100%;
  height: 160px;
  background: var(--bg-tertiary);
  position: relative;
  flex-shrink: 0;
}

.profile-modal-banner-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.profile-modal-identity {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding: 0 2rem 1rem;
  margin-top: -36px;
  position: relative;
}

.profile-modal-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 4px solid var(--bg-primary);
  overflow: hidden;
}

.profile-modal-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}

.profile-modal-name-block {
  flex: 1;
  min-width: 0;
  padding-top: 48px;
}

.profile-modal-display-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.profile-modal-username {
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.profile-modal-role-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  margin-left: 0.4rem;
  vertical-align: middle;
  flex-shrink: 0;
}

.profile-modal-note {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 1rem 0 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.75rem;
}

.profile-modal-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.profile-modal-account-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border);
}

.profile-modal-account-row:last-child { border-bottom: none; }

.profile-modal-account-platform {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-radius: 3px;
  padding: 2px 5px;
  min-width: 44px;
  text-align: center;
  flex-shrink: 0;
}

.profile-modal-account-value {
  flex: 1;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.profile-modal-account-value a {
  color: var(--accent);
  text-decoration: none;
}

.profile-modal-account-value a:hover { text-decoration: underline; }

.profile-modal-skeleton-line {
  height: 12px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.profile-modal-error {
  padding: 0.75rem 0;
  font-size: 0.85rem;
  color: var(--error);
  text-align: center;
}

/* Member Hover Tooltip */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.member-tooltip {
  position: fixed;
  z-index: 500;
  width: 260px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  overflow: hidden;
  pointer-events: none;
  animation: fadeIn 0.12s ease;
}

.member-tooltip-banner {
  width: 100%;
  height: 60px;
  background: var(--bg-tertiary);
  object-fit: cover;
  display: block;
}

.member-tooltip-identity {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0 0.75rem 0.6rem;
  margin-top: -18px;
}

.member-tooltip-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 3px solid var(--bg-secondary);
  overflow: hidden;
}

.member-tooltip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-tooltip-info {
  flex: 1;
  min-width: 0;
  padding-top: 20px;
}

.member-tooltip-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-tooltip-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.member-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.member-tooltip-dot.online  { background: #3ba55d; }
.member-tooltip-dot.offline { background: #747f8d; }

.member-tooltip-status {
  padding: 0 0.75rem 0.65rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* External Accounts */
.ext-account-list {
  display: flex;
  flex-direction: column;
}

.ext-account-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.ext-account-row:last-child {
  border-bottom: none;
}

.ext-account-platform {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-radius: 4px;
  padding: 2px 6px;
  min-width: 48px;
  text-align: center;
  flex-shrink: 0;
}

.ext-account-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  min-width: 80px;
  flex-shrink: 0;
}

.ext-account-value {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ext-account-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.ext-account-add-form {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ext-account-add-row {
  display: flex;
  gap: 0.4rem;
}


/* ─── Admin Account Manager ─────────────────────────────────────── */

.admin-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.admin-pane-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.admin-pane-header h2 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.admin-tabs {
  display: flex;
  gap: 0.25rem;
}

.admin-tab-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.35rem 0.65rem;
  transition: background 0.15s, color 0.15s;
}

.admin-tab-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.admin-tab-btn.active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}

.admin-pane-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table th {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: 600;
}

.admin-table td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.admin-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.admin-class-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--bg-secondary);
}

.admin-class-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-class-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.admin-class-card-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.admin-class-card-body {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.admin-permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.admin-perm-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.admin-perm-checkbox input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}

.admin-ban-form {
  background: var(--bg-tertiary);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.admin-ban-form-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.admin-badge-banned {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent);
}

.admin-badge-temp {
  background: color-mix(in srgb, #f59e0b 20%, transparent);
  color: #f59e0b;
}

.admin-ip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.35rem;
  flex-shrink: 0;
}

.admin-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1.25rem 0 0.5rem;
}

.admin-new-class-form {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.admin-inline-edit {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.admin-inline-edit input {
  flex: 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
}

.settings-save-btn {
  padding: 0.3rem 0.65rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.2s;
}

.settings-save-btn:hover {
  background: var(--accent-hover);
}

.settings-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-cancel-btn {
  padding: 0.3rem 0.65rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.8rem;
  transition: border-color 0.2s, color 0.2s;
}

.settings-cancel-btn:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.danger-btn {
  background: #c0392b !important;
  color: #fff !important;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.danger-btn:hover {
  background: #a93226 !important;
}

/* ─── User Reports ─────────────────────────────────────────────────────────── */

.report-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.report-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  gap: 1rem;
  flex-wrap: wrap;
}

.report-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.report-reporter strong {
  color: var(--text-primary);
}

.report-date {
  font-size: 0.75rem;
}

.report-jump-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 4px;
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.report-jump-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.report-message-embed {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
}

.report-message-embed-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.report-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
  color: var(--text-primary);
}

.report-message-embed-meta {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  flex: 1;
}

.report-sender-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.report-sender-username {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.report-message-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.report-channel-badge {
  font-size: 0.72rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

.report-badge-dm {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.report-message-content {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.5;
  padding-left: calc(32px + 0.5rem);
  word-break: break-word;
  white-space: pre-wrap;
}

.report-dm-notice {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0.5rem 0 0;
  padding-left: calc(32px + 0.5rem);
}

.report-content-deleted {
  color: var(--text-muted);
}

.report-status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.report-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-tertiary);
  color: var(--text-muted);
}

.report-badge-pending {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #f59e0b;
}

.report-badge-reviewing {
  background: color-mix(in srgb, #3b82f6 18%, transparent);
  color: #60a5fa;
}

.report-badge-complete {
  background: color-mix(in srgb, #22c55e 18%, transparent);
  color: #4ade80;
}

/* ─── Severity badges ─────────────────────────────────────────────────────── */

.severity-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15em 0.55em;
  border-radius: 4px;
}

.severity-badge-none {
  background: color-mix(in srgb, var(--text-muted) 15%, transparent);
  color: var(--text-muted);
}

.severity-badge-spam {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #fbbf24;
}

.severity-badge-harassment {
  background: color-mix(in srgb, #f97316 18%, transparent);
  color: #fb923c;
}

.severity-badge-illegal {
  background: color-mix(in srgb, #ef4444 18%, transparent);
  color: #f87171;
}

.severity-badge-csam {
  background: color-mix(in srgb, #7f1d1d 50%, transparent);
  color: #fca5a5;
  border: 1px solid #991b1b;
}

/* ─── SLA badge ───────────────────────────────────────────────────────────── */

.sla-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15em 0.55em;
  border-radius: 4px;
}

.sla-ok {
  background: color-mix(in srgb, #22c55e 15%, transparent);
  color: #4ade80;
}

.sla-overdue {
  background: color-mix(in srgb, #ef4444 20%, transparent);
  color: #f87171;
  animation: sla-pulse 2s ease-in-out infinite;
}

@keyframes sla-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* ─── Report card enhancements ────────────────────────────────────────────── */

.report-card-overdue {
  border-color: color-mix(in srgb, #ef4444 50%, transparent) !important;
}

.report-card-badges {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.report-severity-row,
.report-assignment-row {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.report-severity-select {
  font-size: 0.82rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.2em 0.5em;
  cursor: pointer;
}

.report-assignee {
  font-size: 0.85rem;
  color: var(--text-primary);
}

.report-assignee-none {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ─── Report filter bar ───────────────────────────────────────────────────── */

.report-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.report-filter-select {
  font-size: 0.82rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.25em 0.5em;
  cursor: pointer;
}

.report-filter-overdue {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

/* ─── Resolution form ─────────────────────────────────────────────────────── */

.report-resolve-form {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.report-resolution-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ─── Appeal section ──────────────────────────────────────────────────────── */

.report-appeal-section {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid #f59e0b;
  background: color-mix(in srgb, #f59e0b 5%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.report-appeal-label {
  color: #f59e0b !important;
}

.report-appeal-text {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.report-appeal-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.report-appeal-resolved {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.report-appeal-reopen-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

/* ─── Report severity picker (inline in message list) ─────────────────────── */

.report-picker {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 200;
  background: var(--bg-floating);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  min-width: 230px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.report-picker-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 0.3rem 0;
  padding: 0 0.25rem;
}

.report-picker-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 5px;
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.12s;
}

.report-picker-option:hover {
  background: var(--bg-hover);
}

.report-picker-cancel {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  margin-top: 0.2rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 0 0 5px 5px;
  transition: background 0.12s;
}

.report-picker-cancel:hover {
  background: var(--bg-hover);
}

.report-comment-area {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.report-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: block;
}

.report-comment-text {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.report-comment-placeholder {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

.report-comment-input {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  resize: vertical;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.report-comment-input:focus {
  outline: none;
  border-color: var(--accent);
}

.report-comment-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.report-error {
  font-size: 0.8rem;
  color: var(--error, #e74c3c);
}

.report-message-actions,
.report-ban-section {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.report-ban-active {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

.report-ban-section:last-child,
.report-message-actions:last-child {
  border-bottom: none;
}

.report-action-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.report-edit-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.admin-ban-type-row {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.admin-ban-type-row label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.action-btn.report-sent {
  color: #f59e0b;
  border-color: #f59e0b;
  opacity: 0.75;
}

.admin-loading {
  color: var(--text-muted);
  font-size: 0.875rem;
  padding: 1rem;
}

/* ─── Content Screening ────────────────────────────────────────────────────── */

.screening-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.screening-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.screening-toggle-label input {
  cursor: pointer;
}

.screening-bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.screening-bulk-count {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-right: 0.25rem;
}

.screening-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

.screening-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  position: relative;
}

.screening-item:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

.screening-item-approved {
  opacity: 0.6;
}

.screening-item-selected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}

.screening-item-checkbox {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  background: var(--bg-primary);
  border-radius: 3px;
  padding: 1px;
  line-height: 0;
}

.screening-item-checkbox input {
  cursor: pointer;
  width: 15px;
  height: 15px;
  margin: 0;
}

.screening-item-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-tertiary);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screening-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screening-item-placeholder {
  font-size: 2rem;
  color: var(--text-muted);
  user-select: none;
}

.screening-thumb-loading {
  font-size: 1.1rem;
  animation: screening-pulse 1.2s ease-in-out infinite;
}

@keyframes screening-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.screening-approved-indicator {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #22c55e;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.screening-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.screening-item:hover .screening-item-overlay {
  opacity: 1;
}

.screening-overlay-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, background 0.15s;
}

.screening-overlay-btn:hover {
  transform: scale(1.1);
}

.screening-overlay-approve {
  background: #22c55e;
  color: #fff;
}

.screening-overlay-approve:disabled {
  background: #166534;
  color: #4ade80;
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.screening-overlay-delete {
  background: var(--error, #e74c3c);
  color: #fff;
}

.screening-item-info {
  padding: 0.45rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-height: 0;
}

.screening-item-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screening-item-channel {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screening-item-submeta {
  font-size: 0.67rem;
  color: var(--text-muted);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screening-count-footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0 1rem 1.25rem;
  margin: 0;
}

.screening-approve-btn-solid {
  background: #166534 !important;
  border-color: #22c55e !important;
  color: #4ade80 !important;
}

.screening-approve-btn-solid:hover {
  background: #15803d !important;
}

.screening-approved-badge {
  font-size: 0.78rem;
  color: #4ade80;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
}

/* ─── Content Screening — Lightbox ─────────────────────────────────────────── */

.screening-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.screening-lightbox-inner {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: min(900px, 100%);
  max-height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.screening-lightbox-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.screening-lightbox-title {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.screening-lightbox-filename {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
}

.screening-lightbox-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.screening-lightbox-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.screening-lightbox-content {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  min-height: 0;
  padding: 1rem;
  box-sizing: border-box;
}

.screening-lightbox-img {
  max-width: 100%;
  max-height: calc(90vh - 120px);
  object-fit: contain;
  display: block;
  border-radius: 4px;
}

.screening-lightbox-video {
  max-width: 100%;
  max-height: calc(90vh - 120px);
  display: block;
  border-radius: 4px;
}

.screening-lightbox-loading {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.screening-lightbox-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-primary);
  gap: 0.25rem;
}

/* ── Audio Settings ────────────────────────────────────────────────────────── */

.audio-level-bar {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.audio-level-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 50ms linear;
}

.audio-device-select {
  width: 100%;
  padding: 0.4rem 0.6rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
}

.audio-device-select:focus {
  border-color: var(--accent);
  outline: none;
}

.audio-device-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.audio-volume-slider {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
  margin-top: 0.4rem;
}

.audio-settings-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

/* ── Channel Visibility ────────────────────────────────────────── */

/* Lock badge in channel list */
.channel-visibility-badge {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-left: 0.2rem;
  flex-shrink: 0;
}

/* Public / Private toggle in channel create form */
.channel-vis-toggle {
  display: flex;
  gap: 0.4rem;
  margin: 0.35rem 0 0.2rem;
}

.channel-vis-option {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: transparent;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
}

.channel-vis-option input[type="radio"] {
  margin: 0;
  accent-color: var(--accent);
}

.channel-vis-option.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text-primary);
}

/* Rules panel (channel create form + channel settings) */
.channel-vis-rules-panel {
  margin-top: 0.4rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.channel-vis-loading {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0.3rem 0;
}

.channel-vis-group {
  margin-bottom: 0.6rem;
}

.channel-vis-group:last-child {
  margin-bottom: 0;
}

.channel-vis-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.channel-vis-check-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 0.15rem 0;
  cursor: pointer;
  user-select: none;
}

.channel-vis-check-item input[type="checkbox"] {
  accent-color: var(--accent);
  margin: 0;
}

.channel-vis-user-list {
  max-height: 130px;
  overflow-y: auto;
}

.channel-vis-summary {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.channel-vis-summary.muted {
  color: var(--text-muted);
  font-style: italic;
}

/* Creator meta row in channel settings pane */
.channel-settings-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.channel-settings-meta-item {
  display: inline-flex;
  align-items: center;
}

.channel-settings-meta-sep {
  color: var(--text-muted);
}

.channel-visibility-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.channel-visibility-pill.public {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.channel-visibility-pill.private {
  background: color-mix(in srgb, #f0a500 15%, transparent);
  color: #f0a500;
}

/* Visibility rules section wrapper in channel settings */
.channel-settings-section {
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.channel-settings-section h3 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: 0 0 0.6rem 0;
}

.channel-settings-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
}

/* ── Realm Roles ────────────────────────────────────────────────── */

.realm-roles-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.realm-role-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.realm-role-card-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
}

.realm-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.realm-role-members-panel {
  padding: 0.5rem 0.75rem 0.65rem;
  border-top: 1px solid var(--border);
  background: var(--bg-tertiary);
}

.realm-role-member-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

.realm-role-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 0.2rem 0;
}

.realm-role-add-member {
  margin-top: 0.4rem;
}

.realm-role-add-member .channel-settings-select {
  width: 100%;
}

.realm-role-create-form {
  margin-top: 0.6rem;
}

.realm-role-create-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.realm-role-create-row .channel-settings-edit-input {
  flex: 1;
  min-width: 0;
}

.realm-role-color-picker {
  width: 2.2rem;
  height: 2rem;
  padding: 0.1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  cursor: pointer;
  flex-shrink: 0;
}

/* Custom emoji picker */
.emoji-picker-item-custom { padding: 2px; }
.emoji-picker-custom-img {
  width: 28px; height: 28px;
  object-fit: contain; border-radius: 4px; display: block;
}

/* Reactions — custom emoji images */
.reaction-custom-emoji {
  width: 18px; height: 18px;
  object-fit: contain; vertical-align: middle; border-radius: 2px;
}

/* User settings — emoji keyboard */
.emoji-keyboard-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.emoji-keyboard-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--bg-tertiary); border-radius: 6px; padding: 8px; width: 90px;
}
.emoji-keyboard-img { width: 48px; height: 48px; object-fit: contain; border-radius: 4px; }
.emoji-keyboard-name { font-size: 0.7rem; color: var(--text-muted); word-break: break-all; text-align: center; }
.emoji-keyboard-sharing-badge { font-size: 0.65rem; color: var(--text-muted); }
.emoji-keyboard-actions { display: flex; gap: 4px; }
.emoji-keyboard-edit-btn {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; color: var(--text-muted); padding: 2px 6px;
}
.emoji-keyboard-delete-btn { padding: 2px 6px; font-size: 0.75rem; }
.emoji-upload-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px;
}
.emoji-upload-name-input {
  background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-primary); padding: 6px 10px; font-size: 0.85rem; width: 180px;
}
.emoji-upload-sharing-select {
  background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-primary); padding: 6px 8px; font-size: 0.85rem;
}
.emoji-upload-btn, .emoji-upload-chosen {
  background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 12px; font-size: 0.85rem; cursor: pointer; color: var(--text-primary);
  white-space: nowrap;
}
.emoji-sharing-editor {
  width: 100%; background: var(--bg-secondary); border-radius: 4px; padding: 8px;
  margin-top: 4px; display: flex; flex-direction: column; gap: 6px;
}
.emoji-sharing-editor-actions { display: flex; gap: 6px; }
.emoji-realm-checkboxes { display: flex; flex-direction: column; gap: 4px; }
.emoji-placeholder-card {
  margin-top: 24px; background: var(--bg-tertiary); border-radius: 8px;
  padding: 16px; border: 1px solid var(--border);
}
.emoji-placeholder-card h3 { margin: 0 0 8px; font-size: 0.95rem; color: var(--text-secondary); }

/* DM active voice call indicator */
.dm-voice-members {
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 0 1rem 0.25rem calc(1rem + 28px + 0.5rem);
  line-height: 1.3;
}

/* Incoming DM call card */
.incoming-call-card {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border);
  padding: 8px 10px;
  animation: incoming-call-pulse 1.5s ease-in-out infinite;
}
@keyframes incoming-call-pulse {
  0%, 100% { background: var(--bg-tertiary); }
  50% { background: color-mix(in srgb, var(--accent) 18%, var(--bg-tertiary)); }
}
.incoming-call-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-secondary); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 600; color: var(--text-secondary);
  flex-shrink: 0;
}
.incoming-call-avatar img { width: 100%; height: 100%; object-fit: cover; }
.incoming-call-text { flex: 1; min-width: 0; }
.incoming-call-label { font-size: 0.65rem; color: var(--text-muted); line-height: 1.2; }
.incoming-call-name { font-size: 0.8rem; color: var(--text-primary); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.incoming-call-actions { display: flex; gap: 5px; flex-shrink: 0; }
.incoming-call-accept {
  width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: #27ae60; color: #fff; font-size: 0.85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.incoming-call-accept:hover { background: #2ecc71; }
.incoming-call-reject {
  width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: #c0392b; color: #fff; font-size: 0.85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.incoming-call-reject:hover { background: #e74c3c; }

/* ─────────────────────────────────────────────
   Mobile Responsive Layout
   ───────────────────────────────────────────── */

/* Base styles for mobile-only elements (always rendered, hidden on desktop) */
.mobile-menu-btn {
  display: none;
  position: fixed; top: 10px; left: 10px; z-index: 200;
  width: 44px; height: 44px; border: none; border-radius: 8px;
  background: var(--bg-secondary); color: var(--text-primary); font-size: 1.2rem;
  cursor: pointer; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.mobile-sidebar-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.6); z-index: 299;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.mobile-sidebar-backdrop.visible { opacity: 1; pointer-events: all; }
.sidebar-mobile-close-btn { display: none; }
.mobile-msg-actions-btn { display: none; }
.mobile-panel-close-btn { display: none; }
.mobile-right-panel-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 249;
}

/* Mobile breakpoint */
@media (max-width: 767px) {
  /* Single-column layout */
  .chat-layout { grid-template-columns: 1fr !important; }
  .sidebar-resize-handle, .right-panel-resize-handle { display: none; }

  /* Sidebar as overlay drawer — use bottom:0 instead of height so it anchors
     to the visual viewport bottom even when the user pinch-zooms */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(300px, 85vw); z-index: 300;
    transform: translateX(-100%); transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .sidebar.mobile-open { transform: translateX(0); }

  /* Show mobile-only elements */
  .mobile-menu-btn { display: flex; }
  .mobile-sidebar-backdrop { display: block; }
  .sidebar-mobile-close-btn {
    display: flex; margin-left: auto;
    background: none; border: none; color: var(--text-muted);
    font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: 4px;
  }
  .sidebar-mobile-close-btn:hover { color: var(--text-primary); }

  /* Right panel as slide-in overlay from right — same bottom:0 anchoring */
  .right-panel {
    position: fixed; right: 0; top: 0; bottom: 0;
    width: min(320px, 90vw); z-index: 250;
    transform: translateX(100%); transition: transform 0.25s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.5);
  }
  .right-panel.mobile-panel-open { transform: translateX(0); }
  .mobile-panel-close-btn {
    display: flex; position: absolute; top: 0.6rem; right: 0.75rem;
    background: none; border: none; color: var(--text-muted);
    font-size: 1rem; cursor: pointer; padding: 4px 8px; border-radius: 4px;
    z-index: 1;
  }
  .mobile-panel-close-btn:hover { color: var(--text-primary); }

  /* Message actions — disable hover-only, enable tap-expand */
  .message-actions { display: none !important; }
  .message:hover .message-actions { display: none !important; }
  .message.actions-expanded .message-actions {
    display: inline-flex !important;
    position: absolute; top: 2px; right: 4px; z-index: 10;
  }
  .mobile-msg-actions-btn {
    display: inline-flex; align-items: center;
    background: none; border: none; color: var(--text-muted);
    font-size: 0.9rem; font-weight: bold; letter-spacing: 1px;
    padding: 0 10px; cursor: pointer; margin-left: 0.35rem;
    line-height: 1; flex-shrink: 0;
    /* WCAG 2.5.5 touch target: min 44×44px */
    min-height: 44px; min-width: 44px; justify-content: center;
  }
  .mobile-msg-actions-btn:hover { color: var(--text-primary); }
  /* Enlarge header icon buttons to 44×44px on mobile */
  .notification-icon-btn { width: 44px; height: 44px; }

  /* Header padding-left for hamburger button clearance */
  .chat-header { padding-left: 54px; }

  /* Dynamic viewport height (handles iOS Safari URL bar) */
  .chat-main { height: 100dvh; }

  /* Message input: fixed to the visual viewport bottom so it stays on-screen
     even when the user pinch-zooms or the virtual keyboard shifts the layout */
  .message-input-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--bg-primary);
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  /* Modal sizing */
  .dm-picker-modal { width: 95vw; max-height: 80vh; }
  .profile-modal { width: 95vw; }

  /* Reduced padding on mobile; extra bottom padding so last messages aren't
     hidden behind the fixed message-input-container */
  .message-list { padding: 0.75rem 0.75rem 120px; }
  .user-settings-body { padding: 1rem; }

  /* All right-panel headers: pad right to clear the absolute ✕ close button */
  .notification-panel-header,
  .right-panel-header,
  .pin-panel-header { padding-right: 3rem; }

  /* Center pane header clearance for fixed ☰ hamburger button */
  .blank-screen-header,
  .project-page-header,
  .project-settings-header,
  .user-settings-header,
  .voice-screen-header,
  .admin-pane-header,
  .help-header {
    padding-left: 54px;
  }

  /* Voice screen mobile controls bar */
  .mobile-voice-controls-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 0.75rem 1rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .mobile-voice-controls-bar .voice-btn {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }
}

/* Tablet breakpoint */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Narrower right panel on tablet */
  .right-panel { width: 240px; }
  .right-panel-resize-handle { display: none; }
}

/* ─── Admin Audit Log ──────────────────────────────────────────────────────── */

.audit-log-filter-bar {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  flex-wrap: wrap;
}

.audit-log-filter-select {
  padding: 5px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.82rem;
  cursor: pointer;
  min-width: 140px;
}

.audit-log-table {
  width: 100%;
  font-size: 0.82rem;
}

.audit-log-table th {
  white-space: nowrap;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 8px 10px;
}

.audit-log-row td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.audit-log-row:hover td {
  background: var(--bg-tertiary);
}

.audit-log-time {
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.78rem;
  min-width: 130px;
}

.audit-log-admin {
  white-space: nowrap;
}

.audit-log-admin-name {
  font-weight: 600;
  color: var(--text-primary);
}

.audit-log-system-actor {
  color: var(--text-muted);
  font-style: italic;
}

.audit-log-admin-username {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-left: 4px;
}

.audit-log-action-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.audit-log-action-red {
  background: color-mix(in srgb, #e74c3c 18%, transparent);
  color: #e74c3c;
  border: 1px solid color-mix(in srgb, #e74c3c 30%, transparent);
}

.audit-log-action-green {
  background: color-mix(in srgb, #2ecc71 18%, transparent);
  color: #27ae60;
  border: 1px solid color-mix(in srgb, #2ecc71 30%, transparent);
}

.audit-log-action-amber {
  background: color-mix(in srgb, #f39c12 18%, transparent);
  color: #e67e22;
  border: 1px solid color-mix(in srgb, #f39c12 30%, transparent);
}

.audit-log-action-blue {
  background: color-mix(in srgb, #3498db 18%, transparent);
  color: #2980b9;
  border: 1px solid color-mix(in srgb, #3498db 30%, transparent);
}

.audit-log-action-neutral {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.audit-log-target {
  color: var(--text-primary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-log-details {
  color: var(--text-muted);
  font-size: 0.78rem;
  max-width: 220px;
}

.audit-log-empty,
.audit-log-error {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.audit-log-error {
  color: #e74c3c;
}

.audit-log-load-more {
  display: flex;
  justify-content: center;
  padding: 16px;
}

/* ─── Notification 3-dot menu ─────────────────────────────────────── */

.notification-item {
  position: relative;
}

.notification-menu-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  line-height: 1;
}

.notification-item:hover .notification-menu-btn {
  opacity: 1;
}

.notification-menu-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.notification-menu-dropdown {
  position: absolute;
  top: 28px;
  right: 6px;
  z-index: 200;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  min-width: 180px;
  padding: 4px 0;
}

.notification-menu-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-primary);
  text-align: left;
  padding: 8px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.12s;
}

.notification-menu-item:hover {
  background: var(--bg-tertiary);
}

/* ─── Notification Settings Panel ────────────────────────────────── */

.notif-settings-btn {
  /* Same style as .notification-icon-btn — no extra rules needed */
}

.notif-settings-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.notif-settings-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}

.notif-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
}

.notif-type-label {
  font-size: 0.9rem;
  color: var(--text-primary);
  flex: 1;
}

/* CSS toggle switch */
.notif-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.notif-toggle-track {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  background: var(--bg-tertiary);
  border-radius: 9px;
  border: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.notif-toggle.on .notif-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}

.notif-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.notif-toggle.on .notif-toggle-thumb {
  transform: translateX(16px);
}

.notif-toggle-label {
  min-width: 22px;
  text-align: left;
}

/* ── Realm Home ─────────────────────────────────────────────────────────── */

.realm-home-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  background: var(--bg-primary);
}

.realm-home-banner {
  height: 160px;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  background-size: cover;
  background-position: center;
}

.realm-home-identity {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding: 0 1.5rem 0.75rem;
  margin-top: -36px;
  position: relative;
}

.realm-home-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid var(--bg-primary);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
  object-fit: cover;
}

.realm-home-identity-info {
  flex: 1;
  min-width: 0;
  padding-top: 48px;
}

.realm-home-name {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.realm-home-description {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.realm-home-header-btns {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  align-self: flex-start;
  padding-top: 48px;
  margin-left: auto;
  flex-shrink: 0;
}

.realm-home-content {
  padding: 0.75rem 1.5rem 2rem;
  flex: 1;
}

.realm-home-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
}
.realm-home-refresh-btn {
  font-size: 0.8rem;
  padding: 0 0.2rem;
  opacity: 0.5;
  line-height: 1;
}
.realm-home-refresh-btn:hover { opacity: 1; }

.realm-home-cols {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.realm-home-col {
  flex: 1;
  min-width: 240px;
}

.realm-home-col-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
}

.realm-home-pinned-post {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s;
}

.realm-home-pinned-post:hover {
  border-color: var(--accent);
}

.realm-home-pinned-channel {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 3px;
  padding: 1px 5px;
  display: inline-block;
  margin-bottom: 0.35rem;
}

.realm-home-pinned-sender {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.realm-home-pinned-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  flex-shrink: 0;
  object-fit: cover;
}

.realm-home-pinned-content {
  font-size: 0.82rem;
  color: var(--text-primary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.realm-home-project-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s;
}

.realm-home-project-card:hover {
  border-color: var(--accent);
}

.realm-home-project-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.realm-home-project-status {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 1px 6px;
  display: inline-block;
  margin-bottom: 0.3rem;
}

.realm-home-project-status.status-plan { background: var(--bg-tertiary); color: var(--text-secondary); }
.realm-home-project-status.status-in-progress { background: color-mix(in srgb, #f39c12 20%, transparent); color: #f39c12; }
.realm-home-project-status.status-complete { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }

.realm-home-project-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.realm-home-activity-placeholder {
  margin-bottom: 1.25rem;
}

.realm-home-members {
  margin-top: 0.25rem;
}

.realm-home-member-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.realm-home-member-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s;
}

.realm-home-member-item:hover {
  border-color: var(--accent);
}

.realm-home-member-avatar-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.realm-home-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-primary);
  object-fit: cover;
}

.realm-home-member-name {
  font-size: 0.82rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.realm-home-member-role {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
  padding: 1px 5px;
}

.realm-home-member-role.role-owner { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.realm-home-member-role.role-admin { background: color-mix(in srgb, #f39c12 20%, transparent); color: #f39c12; }

/* Sidebar realm name as a button */
.sidebar-realm-name-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.sidebar-realm-name-btn:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Realm Settings — Pinned Posts list */
.realm-pinned-posts-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.realm-pinned-post-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}

.realm-pinned-post-preview {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-secondary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.realm-pinned-post-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* Realm Settings — Invite Codes */
.realm-invite-create-form {
  margin-top: 0.6rem;
}

.realm-invite-create-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.realm-invite-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

.realm-invite-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-tertiary);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  flex-wrap: wrap;
}

.realm-invite-row-inactive {
  opacity: 0.5;
}

.realm-invite-row-new {
  outline: 2px solid var(--accent);
}

.realm-invite-code {
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--accent);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.realm-invite-badge-inactive {
  font-size: 0.7rem;
  background: var(--bg-secondary);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 1px 6px;
}

.realm-invite-actions {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Sidebar — Join Realm panel */
.join-realm-panel {
  position: fixed;
  left: 64px;
  bottom: 8px;
  z-index: 1000;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  width: 220px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.join-realm-panel-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Project game launch button */
.project-launch-game-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-bottom: 3px solid color-mix(in srgb, var(--accent) 60%, #000);
  border-radius: 6px;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: filter 0.1s, transform 0.1s, border-bottom-width 0.1s, padding-bottom 0.1s;
}
.project-launch-game-btn:hover { filter: brightness(1.12); }
.project-launch-game-btn:active {
  filter: brightness(0.95);
  border-bottom-width: 1px;
  padding-bottom: calc(0.45rem + 2px);
  transform: translateY(2px);
}

/* GitHub Activity Panel */
.project-github-section { margin-top: 1.5rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.project-github-header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.85rem; gap: 0.5rem; }
.project-github-header-left { display: flex; align-items: center; gap: 0.5rem; }
.project-github-repo-link { font-size: 0.75rem; color: var(--text-muted); text-decoration: none; font-weight: 400; }
.project-github-repo-link:hover { color: var(--accent); }
.project-github-refresh-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; padding: 0.1rem 0.3rem; border-radius: 4px; }
.project-github-refresh-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.project-github-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 0.75rem; }
.project-github-tab { display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.6rem; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 0.78rem; cursor: pointer; margin-bottom: -1px; }
.project-github-tab:hover { color: var(--text-primary); }
.project-github-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.project-github-tab-count { background: var(--bg-tertiary); border-radius: 10px; padding: 0.05rem 0.35rem; font-size: 0.7rem; }
.project-github-tab.active .project-github-tab-count { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.project-github-feed { max-height: 280px; overflow-y: auto; }
.project-github-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 1rem; text-decoration: none; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.project-github-item:last-child { border-bottom: none; }
.project-github-item:hover { background: var(--bg-tertiary); }
.project-github-sha { flex-shrink: 0; font-family: monospace; font-size: 0.72rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); padding: 0.15rem 0.4rem; border-radius: 4px; margin-top: 0.2rem; }
.project-github-num { flex-shrink: 0; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; min-width: 2.5rem; margin-top: 0.15rem; }
.project-github-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.project-github-item-title { font-size: 0.82rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.3rem; }
.project-github-item-meta { font-size: 0.72rem; color: var(--text-muted); }
.project-github-label { display: inline-block; padding: 0.05rem 0.35rem; border-radius: 10px; border: 1px solid; font-size: 0.65rem; font-weight: 600; flex-shrink: 0; }
.project-github-empty, .project-github-error { padding: 1.25rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.82rem; }
.project-github-error { color: #e74c3c; }

/* ─── Admin Storage Tracker ─────────────────────────────────────────────────── */

.storage-main-body { padding: 20px; }

/* Overview card */
.storage-overview-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}
.storage-overview-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

/* Stacked progress bar */
.storage-bar-track {
  height: 16px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  display: flex;
  overflow: hidden;
  margin-bottom: 12px;
}
.storage-bar-segment {
  height: 100%;
  min-width: 2px;
}

/* Color key */
.storage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.storage-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.storage-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Stat tiles below the bar */
.storage-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.storage-stat {
  background: var(--bg-tertiary);
  border-radius: 6px;
  padding: 10px 12px;
}
.storage-stat-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.storage-stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.storage-stat-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Section label */
.storage-section-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* User list grid */
.storage-user-list-header {
  display: grid;
  grid-template-columns: 1fr 110px 90px 82px 80px;
  gap: 6px;
  padding: 4px 12px;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.storage-user-row {
  display: grid;
  grid-template-columns: 1fr 110px 90px 82px 80px;
  gap: 6px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.storage-user-row:hover { background: var(--bg-secondary); }

.storage-col-user   { display: flex; align-items: center; gap: 10px; min-width: 0; }
.storage-col-channel,
.storage-col-dm     { display: flex; flex-direction: column; align-items: flex-end; }
.storage-col-total  { display: flex; align-items: center; justify-content: flex-end; }
.storage-col-bar    { display: flex; align-items: center; justify-content: flex-end; }

/* User avatar (shared between list and drilldown) */
.storage-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.storage-user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.storage-user-info  { display: flex; flex-direction: column; min-width: 0; }
.storage-user-name  { font-size: 0.88rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.storage-user-username { font-size: 0.73rem; color: var(--text-muted); }

.storage-user-size-val   { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.storage-user-size-label { font-size: 0.68rem; color: var(--text-muted); }
.storage-user-total      { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }

/* Mini per-user usage bar */
.storage-user-bar      { width: 72px; height: 4px; background: var(--bg-tertiary); border-radius: 2px; overflow: hidden; }
.storage-user-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; }

/* ── Drilldown ── */
.storage-drill-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.storage-drill-back {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.storage-drill-back:hover { color: var(--text-primary); background: var(--bg-tertiary); }

.storage-drill-user   { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.storage-drill-name   { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.storage-drill-username { font-size: 0.78rem; color: var(--text-muted); }
.storage-drill-total  { font-size: 0.82rem; color: var(--text-muted); flex-shrink: 0; }

.storage-drill-body { flex: 1; overflow-y: auto; }

/* File table */
.storage-file-table {
  width: 100%;
  font-size: 0.82rem;
  border-collapse: collapse;
}
.storage-file-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: 1;
}
.storage-file-row td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.storage-file-row:hover td { background: var(--bg-tertiary); }
.storage-dm-row td { color: var(--text-muted); font-style: italic; }

.storage-file-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.storage-file-mime-icon { font-size: 1rem; flex-shrink: 0; }
.storage-file-name-text {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.storage-file-channel { font-size: 0.78rem; color: var(--text-muted); }
.storage-file-realm   { color: var(--text-muted); }
.storage-file-sep     { color: var(--text-muted); opacity: 0.5; }
.storage-file-size    { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.storage-file-date    { color: var(--text-muted); white-space: nowrap; font-size: 0.78rem; }

.storage-file-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.storage-jump-placeholder { width: 28px; }

.storage-jump-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 3px 5px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.12s;
}
.storage-jump-btn:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }

.storage-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 3px 5px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.12s, background 0.12s;
}
.storage-delete-btn:hover:not(:disabled) { color: #e74c3c; background: color-mix(in srgb, #e74c3c 12%, transparent); }
.storage-delete-btn:disabled             { opacity: 0.4; cursor: default; }

/* Generic states */
.storage-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.storage-error { color: #e74c3c; }

/* ── Mnemonic Recovery Phrase ─────────────────────────────────────────────── */
.mnemonic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: var(--bg-tertiary);
  border-radius: 8px;
  border: 1px solid var(--border);
}
@media (max-width: 480px) {
  .mnemonic-grid { grid-template-columns: repeat(3, 1fr); }
}
.mnemonic-word {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  background: var(--bg-secondary);
  border-radius: 4px;
  border: 1px solid var(--border);
}
.mnemonic-num {
  font-size: 0.65rem;
  color: var(--text-muted);
  min-width: 16px;
  text-align: right;
  flex-shrink: 0;
  font-family: monospace;
}
.mnemonic-text {
  font-size: 0.8rem;
  color: var(--text-primary);
  font-weight: 500;
  word-break: break-word;
}
.mnemonic-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, #e67e22 12%, transparent);
  border: 1px solid color-mix(in srgb, #e67e22 40%, transparent);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.mnemonic-step-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 0.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Devlog channel ──────────────────────────────────────── */
.devlog-meta-panel {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}
.devlog-meta-input {
  flex: 1;
  padding: 0.3rem 0.5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.8rem;
}
.devlog-meta-input::placeholder { color: var(--text-muted); }
.devlog-meta-input:focus { outline: none; border-color: var(--accent); }
.devlog-version-input { max-width: 140px; }
.devlog-meta-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}
.devlog-version-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.devlog-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.devlog-tag-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 0.7rem;
}
.devlog-hash {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.devlog-public-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0.2rem 0;
}

/* ── Review channel widget ───────────────────────────────── */
.review-widget {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
  padding: 0.35rem 0.5rem;
  background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.78rem;
}
.review-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.review-badge-pending {
  background: color-mix(in srgb, var(--text-muted) 15%, transparent);
  color: var(--text-muted);
}
.review-badge-approved {
  background: color-mix(in srgb, #27ae60 20%, transparent);
  color: #27ae60;
  border-color: color-mix(in srgb, #27ae60 35%, transparent);
}
.review-badge-revision {
  background: color-mix(in srgb, #e67e22 20%, transparent);
  color: #e67e22;
  border-color: color-mix(in srgb, #e67e22 35%, transparent);
}
.review-reviewer {
  color: var(--text-muted);
  font-size: 0.73rem;
}
.review-actions {
  display: inline-flex;
  gap: 0.3rem;
  margin-left: auto;
}
.review-btn {
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.73rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.review-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.review-approve-btn.active {
  background: color-mix(in srgb, #27ae60 20%, transparent);
  color: #27ae60;
  border-color: color-mix(in srgb, #27ae60 40%, transparent);
}
.review-revision-btn.active {
  background: color-mix(in srgb, #e67e22 20%, transparent);
  color: #e67e22;
  border-color: color-mix(in srgb, #e67e22 40%, transparent);
}
.review-hash {
  font-style: normal;
  font-size: 0.9em;
  opacity: 0.85;
}
/* Expanded review widget */
.review-widget-expanded {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0.6rem 0.75rem;
  background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.78rem;
}
.review-widget-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.review-widget-title {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: auto;
}
.review-voter-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.review-voter-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.review-voter-status {
  min-width: 1.6rem;
  text-align: center;
  font-size: 0.72rem;
}
.review-voter-name {
  flex: 1;
  color: var(--text-secondary);
  font-size: 0.78rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-voter-name.review-voter-me {
  color: var(--text-primary);
  font-weight: 500;
}
.review-voter-remove {
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s;
}
.review-voter-remove:hover {
  opacity: 1;
  color: #e74c3c;
  border-color: color-mix(in srgb, #e74c3c 40%, transparent);
}
/* Comments section */
.review-comments-section {
  border-top: 1px solid var(--border);
  padding-top: 0.4rem;
  margin-top: 0.1rem;
}
.review-comments-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.review-comments-toggle:hover {
  color: var(--text-secondary);
}
.review-comment-count {
  font-weight: 500;
}
.review-comments-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  max-height: 180px;
  overflow-y: auto;
}
.review-comment {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.review-comment-author {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.review-comment-text {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}
.review-comment-input-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.review-comment-input {
  flex: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.78rem;
  outline: none;
}
.review-comment-input:focus {
  border-color: var(--accent);
}
/* Review submit toggle (message-input.js) */
.review-submit-toggle {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-secondary) 40%, transparent);
  border-bottom: 1px solid var(--border);
}
.review-submit-toggle label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
}
.review-submit-toggle input[type="checkbox"] {
  cursor: pointer;
}
.review-submit-toggle.active {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
/* Channel type toggle (sidebar create forms) */
.channel-type-toggle {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.channel-type-option {
  flex: 1;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.78rem;
  text-align: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.channel-type-option.selected {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  font-weight: 500;
}

/* ── Poll widget (message-list) ─────────────────────────────────── */
.poll-widget {
  margin-top: 0.4rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.poll-question {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.3;
}
/* Voting view */
.poll-options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.poll-option-btn {
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.poll-option-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-tertiary));
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.poll-option-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Results view */
.poll-results {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.poll-result-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.poll-result-row.poll-result-row-clickable {
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}
.poll-result-row.poll-result-row-clickable:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-tertiary));
}
.poll-result-row.poll-result-myvote .poll-result-label {
  font-weight: 600;
  color: var(--text-primary);
}
.poll-result-row.poll-result-myvote .poll-result-bar {
  background: var(--accent);
}
.poll-result-bar-wrap {
  flex: 1;
  position: relative;
  height: 1.6rem;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.poll-result-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: color-mix(in srgb, var(--accent) 35%, var(--bg-tertiary));
  transition: width 0.3s ease;
}
.poll-result-label {
  position: relative;
  padding: 0 0.5rem;
  line-height: 1.6rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.poll-result-count {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  min-width: 3.5rem;
  text-align: right;
}
.poll-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.1rem;
}
.poll-total {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.poll-view-results-btn,
.poll-change-vote-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.poll-view-results-btn:hover,
.poll-change-vote-btn:hover:not(:disabled) {
  opacity: 1;
  text-decoration: underline;
}
.poll-change-vote-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Poll open button (toolbar) ─────────────────────────────────── */
.poll-open-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.poll-open-btn:hover,
.poll-open-btn.active {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ── Poll composer (above message input) ─────────────────────────── */
.poll-composer {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.poll-composer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.poll-composer-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.poll-composer-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0.2rem;
  line-height: 1;
}
.poll-composer-close:hover {
  color: var(--text-primary);
}
.poll-composer-question {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.6rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.875rem;
}
.poll-composer-question:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.poll-composer-options {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.poll-composer-option-row {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.poll-composer-option-input {
  flex: 1;
  padding: 0.35rem 0.6rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.85rem;
}
.poll-composer-option-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.poll-composer-remove-option {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  flex-shrink: 0;
}
.poll-composer-remove-option:hover {
  color: var(--text-primary);
}
.poll-composer-add-option {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  text-align: left;
  transition: color 0.15s, border-color 0.15s;
}
.poll-composer-add-option:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.poll-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.poll-composer-cancel {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.3rem 0.7rem;
  transition: color 0.15s;
}
.poll-composer-cancel:hover {
  color: var(--text-primary);
}
.poll-composer-send {
  background: var(--accent);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0.9rem;
  transition: opacity 0.15s;
}
.poll-composer-send:hover:not(:disabled) {
  opacity: 0.88;
}
.poll-composer-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Poll widget: new elements */
.poll-closed-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  margin-left: auto;
}
.poll-countdown {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-left: auto;
}
.poll-multi-label {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.poll-option-btn.poll-option-selected {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-tertiary));
  border-color: var(--accent);
  color: var(--text-primary);
}
/* Poll composer: settings row */
.poll-composer-settings {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.poll-composer-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.poll-composer-expiry-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.poll-composer-expiry {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.8rem;
  padding: 0.15rem 0.4rem;
}
.poll-composer-expiry:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Realm Calendar ── */
.realm-home-calendar-section { margin-bottom: 2rem; }

.realm-calendar { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }

.realm-calendar-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.realm-calendar-month-label { font-weight: 600; min-width: 9rem; text-align: center; font-size: 1rem; }
.realm-calendar-nav-btn { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); cursor: pointer; padding: 0.2rem 0.5rem; font-size: 0.9rem; }
.realm-calendar-nav-btn:hover { background: var(--bg-tertiary); }
.realm-calendar-add-btn { margin-left: auto; background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 0.25rem 0.65rem; cursor: pointer; font-size: 0.82rem; }

.realm-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border-radius: 6px; overflow: hidden; }
.calendar-day-header { background: var(--bg-tertiary); text-align: center; padding: 0.3rem 0; font-size: 0.72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }

.calendar-day { background: var(--bg-secondary); min-height: 78px; padding: 0.3rem; position: relative; cursor: default; }
.calendar-day.other-month { background: var(--bg-primary); }
.calendar-day.other-month .calendar-day-num { opacity: 0.35; }
.calendar-day.can-create { cursor: pointer; }
.calendar-day.can-create:hover { background: var(--bg-tertiary); }
.calendar-day-num { font-size: 0.76rem; color: var(--text-muted); margin-bottom: 0.2rem; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.calendar-day.today .calendar-day-num { background: var(--accent); color: #fff; font-weight: 700; }

.calendar-event-pill { background: var(--accent); color: #fff; border-radius: 3px; font-size: 0.67rem; padding: 1px 4px; margin-bottom: 2px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; display: block; width: 100%; border: none; text-align: left; font: inherit; }
.calendar-event-pill:hover { filter: brightness(1.15); }
.calendar-event-pill.all-day { opacity: 0.85; font-style: italic; }
.calendar-overflow-label { font-size: 0.65rem; color: var(--text-muted); cursor: pointer; background: transparent; border: none; padding: 0; font: inherit; display: block; width: 100%; text-align: left; }

/* Calendar modals */
.calendar-modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; }
.calendar-modal { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; width: 440px; max-width: 95vw; max-height: 90vh; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.calendar-modal-title { font-size: 1.1rem; font-weight: 600; margin: 0; }
.calendar-modal-field { display: flex; flex-direction: column; gap: 0.3rem; }
.calendar-modal-field label { font-size: 0.82rem; color: var(--text-muted); }
.calendar-modal-field input, .calendar-modal-field textarea, .calendar-modal-field select { background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); padding: 0.4rem 0.6rem; font-size: 0.9rem; width: 100%; }
.calendar-modal-row { display: flex; gap: 0.75rem; }
.calendar-modal-row .calendar-modal-field { flex: 1; }
.calendar-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.25rem; }
.calendar-modal-delete-row { display: flex; gap: 0.5rem; margin-right: auto; }

/* Event detail view */
.calendar-event-detail-title { font-size: 1.05rem; font-weight: 600; }
.calendar-event-detail-time { font-size: 0.85rem; color: var(--text-muted); }
.calendar-event-detail-desc { font-size: 0.88rem; white-space: pre-wrap; }
.calendar-event-detail-meta { font-size: 0.78rem; color: var(--text-muted); }

/* Calendar button helpers */
.btn-primary { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 0.35rem 0.75rem; cursor: pointer; font-size: 0.88rem; transition: background 0.2s; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: none; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 4px; padding: 0.35rem 0.75rem; cursor: pointer; font-size: 0.88rem; transition: background 0.2s; }
.btn-secondary:hover:not(:disabled) { background: var(--bg-tertiary); }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── User calendar (.user-cal-*) ─────────────────────────────────────────── */
.user-cal-wrapper { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; max-width: 900px; }
.user-cal-header { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.user-cal-title { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
.user-cal-visibility-pill { font-size: 0.75rem; background: var(--accent); color: #fff; border-radius: 12px; padding: 0.15rem 0.6rem; cursor: pointer; white-space: nowrap; border: none; font: inherit; }
.user-cal-visibility-pill:hover { filter: brightness(1.1); }
.user-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border-radius: 6px; overflow: hidden; }
.user-cal-event-dot--realm.calendar-event-pill { background: var(--text-muted); }
.user-cal-event-dot--copy.calendar-event-pill { background: var(--accent); font-style: italic; }
.user-cal-busy-block { background: var(--accent); opacity: 0.4; border-radius: 2px; height: 6px; margin: 1px 2px; cursor: default; }
.user-cal-busy-block:hover { opacity: 0.65; }
.user-cal-event-time { font-size: 0.58rem; color: var(--accent); line-height: 1.2; margin: 1px 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.user-cal-empty-state { text-align: center; color: var(--text-muted); font-size: 0.9rem; padding: 3rem 1rem; }
.user-cal-subscription-panel { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem 1rem; }
.user-cal-subscription-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.user-cal-subscription-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.user-cal-subscription-row:last-child { border-bottom: none; }
.user-cal-subscription-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.user-cal-subscription-avatar--placeholder { background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; }
.user-cal-subscription-name { flex: 1; font-size: 0.875rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-cal-subscription-btn { margin-left: auto; font-size: 0.8rem; padding: 0.2rem 0.6rem; }
.user-cal-source-badge { font-size: 0.78rem; color: var(--text-muted); font-style: italic; padding: 0.25rem 0; }
.user-cal-e2ee-guard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 300px; color: var(--text-muted); }
.user-cal-e2ee-guard-text { font-size: 0.95rem; text-align: center; }

/* ── Profile modal calendar free/busy grid ───────────────────────────────── */
.profile-modal-calendar { margin-top: 0.25rem; margin-bottom: 0.75rem; }
.profile-modal-cal-grid .calendar-day { min-height: 48px; }

/* ── SC-7b: Safety Numbers ───────────────────────────────────────────────── */
/* Verified badge inline in member name */
.verified-badge { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.6rem; font-weight: 700; margin-left: 4px; vertical-align: middle; flex-shrink: 0; }

/* Safety numbers button in member tooltip */
.member-tooltip-safety-row { padding: 0.35rem 0.75rem 0.5rem; border-top: 1px solid var(--border); margin-top: 0.25rem; }
.member-tooltip-safety-btn { background: none; border: none; color: var(--text-muted); font-size: 0.8rem; cursor: pointer; padding: 0.2rem 0; width: 100%; text-align: left; border-radius: 4px; transition: color 0.15s; }
.member-tooltip-safety-btn:hover { color: var(--text-primary); }

/* Safety numbers modal */
.safety-modal-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.safety-modal { background: var(--bg-secondary); border-radius: 10px; width: 100%; max-width: 400px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); overflow: hidden; }
.safety-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem 0.75rem; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.95rem; }
.safety-modal-close { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: 0 0.25rem; line-height: 1; border-radius: 4px; }
.safety-modal-close:hover { color: var(--text-primary); }
.safety-modal-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.safety-modal-intro { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.safety-modal-loading { font-size: 0.875rem; color: var(--text-muted); text-align: center; padding: 1rem 0; }
.safety-modal-error { font-size: 0.875rem; color: var(--error); background: rgba(192,57,43,0.1); border-radius: 6px; padding: 0.5rem 0.75rem; }

/* The 4-word keyphrase display */
.safety-numbers { background: var(--bg-tertiary); border-radius: 8px; padding: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; text-align: center; }
.safety-numbers-word { color: var(--text-primary); }
.safety-numbers-sep { color: var(--text-muted); font-weight: 400; }

.safety-modal-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0; text-align: center; }
.safety-modal-actions { display: flex; align-items: center; gap: 0.75rem; justify-content: flex-end; padding-top: 0.25rem; }
.safety-verified-status { font-size: 0.85rem; color: var(--accent); font-weight: 600; margin-right: auto; }

/* Safety numbers button in 1-to-1 DM header */
.dm-safety-btn { background: none; border: none; color: var(--text-muted); font-size: 0.95rem; cursor: pointer; padding: 0.2rem 0.35rem; border-radius: 4px; margin-left: 0.25rem; transition: color 0.15s, background 0.15s; line-height: 1; }
.dm-safety-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); }

/* Blocking modal for verified-contact key change */
.safety-alert-backdrop { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.safety-alert-modal { background: var(--bg-secondary); border-radius: 10px; width: 100%; max-width: 380px; padding: 1.5rem; box-shadow: 0 8px 32px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 0.75rem; text-align: center; }
.safety-alert-icon { font-size: 2rem; line-height: 1; }
.safety-alert-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.safety-alert-body { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.safety-alert-actions { display: flex; gap: 0.75rem; justify-content: center; margin-top: 0.25rem; }

/* ── Admin Setup Wizard ────────────────────────────────────────────────────── */
.setup-wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.setup-wizard-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 1rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.setup-wizard-card {
  width: 100%;
  max-width: 660px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.setup-wizard-header {
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.setup-wizard-logo {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.setup-wizard-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.setup-wizard-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.setup-wizard-body {
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.setup-wizard-section {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}
.setup-wizard-section:last-child {
  border-bottom: none;
}
.setup-section-heading {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.setup-section-icon {
  font-size: 1.2rem;
  line-height: 1.3;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.setup-section-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.2rem;
}
.setup-section-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.setup-field-group {
  margin-bottom: 1rem;
}
.setup-field-group:last-child {
  margin-bottom: 0;
}
.setup-field-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}
.setup-field-hint {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.78rem;
}
.setup-field-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.setup-field-input {
  flex: 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem 0.65rem;
  color: var(--text-primary);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s;
}
.setup-field-input:focus {
  border-color: var(--accent);
}
.setup-save-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.setup-save-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.setup-field-saved {
  font-size: 0.78rem;
  color: #2ecc71;
  margin-left: 0.25rem;
}
.setup-field-saving {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.setup-field-error {
  display: block;
  font-size: 0.78rem;
  color: #e74c3c;
  margin-top: 0.3rem;
}
.setup-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}
.setup-toggle-wrap {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.setup-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.setup-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: background 0.2s;
  cursor: pointer;
}
.setup-toggle-track::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  top: 2px;
  left: 2px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.setup-toggle-input:checked ~ .setup-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.setup-toggle-input:checked ~ .setup-toggle-track::after {
  transform: translateX(16px);
  background: #fff;
}
.setup-toggle-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  flex: 1;
}
.setup-env-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
}
.setup-env-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}
.setup-env-card-body {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.setup-env-card-body code {
  background: var(--bg-primary);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.setup-env-card-body ol {
  margin: 0.4rem 0 0 1.1rem;
  padding: 0;
}
.setup-env-card-body a { color: var(--accent); }
.setup-status-badge {
  display: inline-block;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.setup-status-badge.ok { background: color-mix(in srgb, #2ecc71 20%, transparent); color: #2ecc71; }
.setup-status-badge.warn { background: color-mix(in srgb, #f39c12 20%, transparent); color: #f39c12; }
.setup-inline-warn { color: #f39c12; font-size: 0.8rem; }
.setup-privacy-note {
  display: block;
  background: color-mix(in srgb, #f39c12 12%, transparent);
  border: 1px solid color-mix(in srgb, #f39c12 35%, transparent);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 0.4rem;
}
.setup-env-loading {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.5rem 0;
}
.setup-wizard-footer {
  padding: 1.25rem 2rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.setup-wizard-footer-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}
.setup-complete-btn {
  width: 100%;
  max-width: 280px;
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.setup-skip-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  transition: color 0.15s;
}
.setup-skip-btn:hover { color: var(--text-secondary); }
.setup-skip-btn:disabled { opacity: 0.4; cursor: default; }
.setup-complete-error {
  font-size: 0.82rem;
  color: #e74c3c;
}
@media (max-width: 600px) {
  .setup-wizard-scroll { padding: 0; }
  .setup-wizard-card { border-radius: 0; border: none; min-height: 100vh; }
  .setup-wizard-header { padding: 1.5rem 1.25rem 1rem; }
  .setup-wizard-body { padding: 1rem 1.25rem; }
  .setup-wizard-footer { padding: 1rem 1.25rem 1.5rem; }
}

/* ── Thread Card (inline in message timeline) ───────────────────────────────── */
.thread-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.4rem 0 0.2rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  max-width: 520px;
}
.thread-card:hover { background: var(--bg-hover); border-color: var(--accent); }
.thread-card-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.thread-card-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thread-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.77rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.thread-card-badge {
  font-size: 0.72rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-weight: 500;
}
.thread-card-badge-closed { background: rgba(192,57,43,0.15); color: #e74c3c; }
.thread-card-badge-pinned { background: rgba(241,196,15,0.12); color: #f39c12; }
.thread-card-open-btn {
  flex-shrink: 0;
  font-size: 0.77rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.thread-card-open-btn:hover { background: var(--accent-hover, #2980b9); }

/* ── Thread Create Modal ─────────────────────────────────────────────────────── */
.thread-create-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thread-create-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  width: 90%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.thread-create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.thread-create-heading { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.thread-create-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}
.thread-create-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.thread-create-preview {
  background: var(--bg-tertiary);
  border-left: 3px solid var(--border-color);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 0.83rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.thread-create-preview-sender { font-weight: 600; color: var(--text-primary); }
.thread-create-preview-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thread-create-form { display: flex; flex-direction: column; gap: 0.4rem; }
.thread-create-label { font-size: 0.82rem; color: var(--text-muted); }
.thread-create-input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
}
.thread-create-input:focus { outline: none; border-color: var(--accent); }
.thread-create-error { font-size: 0.82rem; color: #e74c3c; }
.thread-create-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.thread-create-cancel {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 4px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s;
}
.thread-create-cancel:hover { background: var(--bg-hover); }
.thread-create-submit { font-size: 0.9rem; padding: 0.4rem 1rem; }

/* ── Thread View (center pane) ───────────────────────────────────────────────── */
.thread-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg-primary);
}
.thread-view-loading,
.thread-view-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  gap: 0.5rem;
}
.thread-view-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex-shrink: 0;
}
.thread-view-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.thread-view-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}
.thread-title-edit-input {
  font-size: 1rem;
  font-weight: 600;
  background: var(--bg-tertiary);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 0.2rem 0.5rem;
  flex: 1;
  min-width: 0;
}
.thread-title-edit-input:focus { outline: none; }
.thread-title-save-btn, .thread-title-cancel-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-size: 0.82rem;
  cursor: pointer;
}
.thread-title-save-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.thread-title-cancel-btn:hover { background: var(--bg-hover); }
.thread-title-edit-btn { margin-left: 0.25rem; font-size: 0.8rem; }
.thread-badge {
  font-size: 0.72rem;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-weight: 500;
  flex-shrink: 0;
}
.thread-badge-closed { background: rgba(192,57,43,0.15); color: #e74c3c; }
.thread-badge-pinned { background: rgba(241,196,15,0.12); color: #f39c12; }
.thread-view-meta { font-size: 0.8rem; color: var(--text-muted); }
.thread-reply-count { font-size: 0.8rem; color: var(--text-muted); }
.thread-view-header-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.thread-alert-pref {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 4px;
  font-size: 0.78rem;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
}
.thread-view-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}
.thread-load-older {
  text-align: center;
  padding: 0.5rem;
}
.thread-load-older-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 0.3rem 0.8rem;
  font-size: 0.82rem;
  cursor: pointer;
}
.thread-load-older-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
.thread-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.thread-closed-notice {
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  font-size: 0.83rem;
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
}
.thread-input-area {
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-shrink: 0;
}
.thread-input-area > div:first-child { display: flex; gap: 0.5rem; align-items: flex-end; }
.thread-input-area > .thread-send-row { display: flex; gap: 0.5rem; align-items: flex-end; }
/* Wrap textarea + button in the flex row */
.thread-input-area { flex-direction: column; }
.thread-input {
  flex: 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  resize: none;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
}
.thread-input:focus { outline: none; border-color: var(--accent); }
.thread-input:disabled { opacity: 0.6; }
.thread-send-btn { flex-shrink: 0; padding: 0.4rem 0.9rem; }
.thread-send-error { font-size: 0.8rem; color: #e74c3c; }

/* Fix: thread-input-area inner layout */
.thread-input-area {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

@media (max-width: 600px) {
  .thread-card { max-width: 100%; }
  .thread-create-modal { padding: 1rem; }
}

/* ── Sidebar Thread List ──────────────────────────────────────────────────────── */
.channel-group { display: flex; flex-direction: column; }

.channel-thread-expand {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.65rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: color 0.15s, background 0.15s;
}
.channel-thread-expand:hover { color: var(--text-primary); background: var(--bg-tertiary); }

.channel-thread-expand-spacer {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.channel-thread-list {
  display: flex;
  flex-direction: column;
  padding: 0 0 2px 22px;
}

.channel-thread-loading,
.channel-thread-empty {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.2rem 0.5rem;
}

.channel-thread-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  cursor: pointer;
  min-height: 24px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  transition: background 0.1s, color 0.1s;
  user-select: none;
  border-left: 2px solid transparent;
}
.channel-thread-item:hover { background: var(--hover-bg); color: var(--text-primary); }
.channel-thread-item.active {
  background: var(--active-bg, rgba(255,255,255,0.06));
  color: var(--text-primary);
  border-left-color: var(--accent);
}

.channel-thread-item-icon {
  flex-shrink: 0;
  font-size: 0.75rem;
  opacity: 0.7;
}

.channel-thread-item-title {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.82rem;
}

.channel-thread-item-pin {
  flex-shrink: 0;
  font-size: 0.65rem;
  opacity: 0.7;
}

.channel-thread-item-closed {
  flex-shrink: 0;
  font-size: 0.65rem;
  opacity: 0.5;
}

.channel-thread-item-count {
  flex-shrink: 0;
  font-size: 0.7rem;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 0 5px;
  min-width: 18px;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .channel-thread-list { padding-left: 18px; }
}

/* ── CO-2: Realm Onboarding ───────────────────────────────── */

.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
}

.onboarding-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 2.5rem 2rem 2rem;
  max-width: 480px;
  width: calc(100% - 2rem);
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.onboarding-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  transition: background 0.2s;
}

.onboarding-dot--active {
  background: var(--accent);
}

.onboarding-dot--past {
  background: color-mix(in srgb, var(--accent) 50%, transparent);
}

.onboarding-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}

.onboarding-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.onboarding-icon--success {
  font-size: 3rem;
}

.onboarding-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.onboarding-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  max-width: 36ch;
}

.onboarding-welcome-msg {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: left;
  width: 100%;
  max-height: 180px;
  overflow-y: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.75rem;
  line-height: 1.55;
}

.onboarding-rules {
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-align: left;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.75rem;
  line-height: 1.55;
}

.onboarding-agree-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.onboarding-btn {
  margin-top: 0.5rem;
  min-width: 160px;
}

/* ── CO-2: Realm Settings — Onboarding section form inputs ── */

.settings-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.875rem;
  padding: 0.5rem 0.6rem;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}

.settings-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.settings-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.875rem;
  padding: 0.45rem 0.6rem;
}

.settings-input:focus {
  outline: none;
  border-color: var(--accent);
}

.settings-select {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.875rem;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}

.settings-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── CO-3: Realm Template Picker ─────────────────────────── */

.template-card-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.template-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  min-width: 80px;
  background: var(--bg-tertiary);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.8rem;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.template-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-color);
}

.template-card--selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-tertiary));
}

.template-card-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.template-card-name {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
}

/* ── CO-4: Custom Role Badges ────────────────────────────── */

.role-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 3px;
  color: #fff;
  margin: 1px 2px 1px 0;
  white-space: nowrap;
}