.container {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	height: var(--layout-header-height, 3.5rem);
	min-height: var(--layout-header-height, 3.5rem);
	padding: 0 16px;
	gap: 16px;
	border-bottom: 1px solid var(--user-area-divider-color);
	background-color: var(--background-secondary-lighter, var(--background-primary));
	z-index: var(--z-index-elevated-3, 30);
	flex-shrink: 0;
}

.channelInfo {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	overflow: hidden;
}

/* Desktop 1:1 DM — converts the channelInfo row into a tappable
   button that opens the other user's profile modal. Resets the
   native button chrome and adds a subtle hover background so the
   click target reads as interactive. */
.channelInfoClickable {
	padding: 4px 8px;
	margin-left: -8px;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.channelInfoClickable:hover {
	background-color: color-mix(in srgb, var(--interactive-normal) 10%, transparent);
}

.icon {
	color: var(--channel-icon, var(--text-muted));
	flex-shrink: 0;
}

/* Wrapper for the small user-avatar rendered in place of the
   channel icon when viewing a 1:1 DM. Zeroes the layout chrome
   around the Avatar so it sits flush in the header row like the
   Hash icon it replaces. */
.dmAvatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-right: 2px;
}

/* Mobile-only back button — appears on the left of the channel title
   when SelectionStore.isMobileViewport is true. Navigates to the parent
   space's channel list (or the DM list). */
.backButton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-right: 4px;
	margin-left: -8px;
	background: transparent;
	border: none;
	border-radius: var(--radius-md, 6px);
	color: var(--interactive-normal);
	cursor: pointer;
	flex-shrink: 0;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.backButton:hover {
	background-color: color-mix(in srgb, var(--interactive-normal) 10%, transparent);
	color: var(--interactive-hover);
}

/* Mobile-only channel info wrapper — holds the back button + the
   tappable channel-name-with-caret button side by side. */
.channelInfoMobile {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	overflow: hidden;
}

.channelInfoButton {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 6px 8px;
	border-radius: var(--radius-md, 6px);
	background: transparent;
	border: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.channelInfoButton:hover {
	background-color: color-mix(in srgb, var(--interactive-normal) 10%, transparent);
}

.channelInfoButton .name {
	font-weight: 600;
	font-size: 1rem;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.caretRight {
	color: var(--text-tertiary);
	flex-shrink: 0;
}

.name {
	font-weight: 600;
	font-size: 1rem;
	color: var(--text-primary);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.5rem;
	max-height: 1.5rem;
}

.divider {
	width: 1px;
	height: 24px;
	background-color: var(--background-modifier-accent);
	flex-shrink: 0;
}

.topic {
	font-size: 0.875rem;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.headerButtons {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.headerButton {
	position: relative;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: var(--radius-md);
	color: var(--interactive-normal);
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.headerButton:hover {
	background-color: color-mix(in srgb, var(--interactive-normal) 10%, transparent);
	color: var(--interactive-hover);
}

.headerButtonActive {
	color: var(--interactive-active);
}

/* Circular-background variant used for the DM Phone / Video call
   buttons. Matches the Fluxer reference image where the icons sit
   inside a solid dark circle. Uses --guild-list-foreground (same
   shade as the empty server icon and the DM sidebar action pills)
   for visual consistency with the rest of the DM chrome. */
.headerButtonCircle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--guild-list-foreground);
	color: var(--text-primary);
}

.headerButtonCircle:hover {
	background-color: var(--guild-list-foreground);
	filter: brightness(1.15);
	color: var(--text-primary);
}

/* Disabled appearance for the members-list toggle at narrow viewports.
   We use aria-disabled rather than the native disabled attribute so the
   Tooltip wrapper can still fire on hover and explain WHY the button is
   unavailable. The class below overrides the hover state so it doesn't
   lie about being interactive. */
.headerButtonDisabled {
	opacity: 0.5;
	cursor: not-allowed;
	color: var(--interactive-normal);
}

.headerButtonDisabled:hover {
	background: transparent;
	color: var(--interactive-normal);
}

/* ── Search bar (always visible) ─────────────────────────────── */

.searchBarWrapper {
	position: relative;
}

.searchBar {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 244px;
	height: 36px;
	padding: 0 8px;
	border-radius: var(--radius-xl, 12px);
	border: 1px solid var(--background-modifier-accent);
	background-color: var(--background-tertiary);
	transition: border-color 0.1s;
}

.searchBar:focus-within {
	border-color: var(--background-modifier-accent);
}

.searchBarIcon {
	flex-shrink: 0;
	color: var(--text-tertiary);
}

.searchBarInput {
	flex: 1;
	border: none;
	background: none;
	color: var(--text-primary);
	font-size: 0.875rem;
	font-family: inherit;
	padding: 0;
	outline: none;
	min-width: 0;
}

.searchBarInput:focus,
.searchBarInput:focus-visible {
	outline: none;
	box-shadow: none;
}

.searchBarInput::placeholder {
	color: var(--text-tertiary);
}

.searchBarClear {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border: none;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--text-tertiary);
	cursor: pointer;
}

.searchBarClear:hover {
	background-color: var(--background-modifier-hover);
	color: var(--text-primary);
}

/* ── Filter dropdown ─────────────────────────────────────────── */

.filterDropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 380px;
	border-radius: var(--radius-xl, 12px);
	border: 1px solid var(--background-modifier-accent);
	background-color: var(--background-floating, var(--background-tertiary));
	box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.28);
	z-index: 1000;
	padding: 4px;
}

.filterSection {
	display: flex;
	flex-direction: column;
}

.filterSectionHeader {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-tertiary);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.filterSectionIcon {
	display: flex;
	align-items: center;
	color: var(--text-tertiary);
}

.filterOption {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 4px 8px;
	border-radius: var(--radius-md);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-size: 0.875rem;
	color: var(--text-primary);
	transition: background-color 0.1s;
}

.filterOption:hover {
	background-color: var(--background-modifier-hover);
}

.filterBadge {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 4px;
	background-color: var(--background-secondary);
	color: var(--text-primary);
	font-size: 0.8125rem;
	font-weight: 500;
	border: 1px solid var(--background-modifier-accent);
	flex-shrink: 0;
}

.filterDesc {
	flex: 1;
	color: var(--text-tertiary);
	font-size: 0.8125rem;
}

.filterPlus {
	flex-shrink: 0;
	color: var(--text-tertiary);
}

.filterOption:hover .filterPlus {
	color: var(--text-primary);
}

.dmHeaderButton {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 10px 4px 4px;
	border-radius: 6px;
	background: transparent;
	border: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	min-width: 0;
}

.dmHeaderButton:hover {
	background: var(--background-modifier-hover, rgba(255, 255, 255, 0.06));
}

.dmHeaderName {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-primary, #fff);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
