.wrapper {
	display: flex;
	flex-direction: column;
	/* Prefer dvh so the mobile browser chrome (address bar showing/hiding)
	   doesn't crop the app below the keyboard. Falls back to vh on older
	   browsers that don't support the dynamic viewport unit. */
	height: 100vh;
	height: 100dvh;
	width: 100vw;
	overflow: hidden;
}

.container {
	display: flex;
	flex: 1;
	min-height: 0;
	position: relative;
	/* Matches the guild list + TitleBar background so the sidebar's
	   rounded top-left corner has the right colour to cut into. The
	   content column paints its own bg on top so this only peeks
	   through the 8px corner radius. */
	background-color: var(--background-secondary);
}

.guildList {
	width: var(--layout-guild-list-width);
	min-width: var(--layout-guild-list-width);
	background-color: var(--background-secondary);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: var(--spacing-1);
	padding-bottom: calc(var(--layout-user-area-height) + var(--spacing-2));
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
}

.guildList::-webkit-scrollbar {
	display: none;
}

.sidebar {
	width: var(--layout-sidebar-width);
	min-width: var(--layout-sidebar-width);
	background-color: var(--background-secondary);
	display: flex;
	flex-direction: column;
	position: relative;
	/* Reserve space at bottom for the UserArea overlay */
	padding-bottom: var(--layout-user-area-height);
	border-left: 1px solid var(--user-area-divider-color);
}

/* Frameless Electron: the TitleBar sits flush with the guild list
   (same background, no separator) but the sidebar + content cards
   "hang" below it with a hairline top border. The sidebar also
   rounds its top-left corner so the join with the title bar reads
   as an inset panel, matching the Fluxer reference. */
:global(body.has-window-controls) .sidebar {
	border-top: 1px solid var(--background-tertiary);
	border-top-left-radius: 8px;
}

:global(body.has-window-controls) .content {
	border-top: 1px solid var(--background-tertiary);
}

/* Inset the vertical divider so it starts below the horizontal
   hairline instead of crossing over it. */
:global(body.has-window-controls) .sidebarDivider {
	top: 1px;
}

/* Divider between sidebar and content */
.sidebarDivider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--layout-guild-list-width) + var(--layout-sidebar-width));
	width: 1px;
	background: var(--user-area-divider-color);
	pointer-events: none;
	z-index: 2;
}

.content {
	flex: 1;
	min-width: 0;
	background-color: var(--background-secondary-lighter);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* UserArea wrapper — absolutely positioned across guild list + sidebar */
.userAreaWrapper {
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(var(--layout-guild-list-width) + var(--layout-sidebar-width));
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	pointer-events: none;
	z-index: var(--z-index-elevated-1, 10);
}

.userAreaWrapper > * {
	pointer-events: auto;
}

/* ── Mobile layout (≤768px) ──────────────────────────────────────────

   Fluxer/Discord-style single-column mobile: EITHER the nav column
   (guild list rail + channel list) OR the chat column is visible, never
   both. Which one shows is decided in GuildsLayout.tsx by parsing the
   current URL — a channel in the URL means chat mode, no channel means
   nav mode. The data-mobile-mode attribute switches between them.

   The bottom user area (avatar + mute + deafen + settings gear) is
   hidden in both modes on mobile; its functionality is reachable via
   the avatar popout from the top of the channel list instead.
*/
@media (max-width: 768px) {
	/* Common: no divider, no bottom user area strip, no padding reserved
	   for it. Guild list rail shrinks to an icon column. */
	.sidebarDivider {
		display: none;
	}

	.userAreaWrapper {
		display: none;
	}

	/* Guild list keeps its default 72px layout width on mobile too —
	   the previous 56px override made the icon column feel cramped
	   and pushed the icons off-center relative to their tooltips. */
	.guildList {
		padding-bottom: var(--spacing-2);
	}

	.sidebar {
		padding-bottom: 0;
	}

	/* Nav mode: guild rail + full-width sidebar (channel list / DM list),
	   chat area hidden. */
	.wrapper[data-mobile-mode='nav'] .sidebar {
		display: flex;
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.wrapper[data-mobile-mode='nav'] .content {
		display: none;
	}

	/* Chat mode: hide nav columns entirely, chat fills the viewport.
	   The bottom nav is also hidden — the chat has its own back button
	   in the header, so the tab bar would be redundant and would just
	   take vertical space away from the input. */
	.wrapper[data-mobile-mode='chat'] .guildList {
		display: none;
	}

	.wrapper[data-mobile-mode='chat'] .sidebar {
		display: none;
	}

	.wrapper[data-mobile-mode='chat'] .content {
		flex: 1 1 auto;
		min-width: 0;
	}

	.wrapper[data-mobile-mode='chat'] > nav {
		display: none;
	}

	/* You mode: identical column-hiding to chat mode (guild rail +
	   sidebar hidden, content fills), but the MobileBottomNav stays
	   visible underneath — that's the whole point of the tab. */
	.wrapper[data-mobile-mode='you'] .guildList {
		display: none;
	}

	.wrapper[data-mobile-mode='you'] .sidebar {
		display: none;
	}

	.wrapper[data-mobile-mode='you'] .content {
		flex: 1 1 auto;
		min-width: 0;
		background-color: var(--background-primary);
	}
}
