/* ── CHAT HEADER ───────────────────────── */
.chat-header {
  height: var(--header-h);
  min-height: var(--header-h);
  background: var(--bg-channel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
  overflow: hidden;
}
.mobile-back-btn {
  display: none;
  background: none; border: none;
  color: var(--text); font-size: 1.6rem;
  cursor: pointer; padding: 0 4px;
  line-height: 1;
}
.chat-header-hash {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
}
.chat-header-title {
  font-size: 0.95rem; font-weight: 700;
  color: var(--text-header);
}
.chat-header-spacer { flex: 1; }

/* members button */
.members-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  width: 32px; height: 32px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  padding: 4px;
}
.members-btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text);
}

/* header icons */
.chat-header-icons {
  display: flex; gap: 4px; align-items: center;
}
.hdr-icon {
  width: 24px; height: 24px;
  color: var(--text-muted);
  fill: var(--text-muted);
  filter: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  transition: color var(--transition), fill var(--transition), filter var(--transition);
  flex-shrink: 0;
}
/* For <img> hdr-icons (legacy fallback) */
img.hdr-icon {
  filter: invert(0.6);
  color: unset;
  fill: unset;
}
img.hdr-icon:hover { filter: invert(1); }
/* For inline SVG hdr-icons */
svg.hdr-icon:hover { color: var(--text); fill: var(--text); }