/* Thin frameless-window chrome. The bar itself is a drag handle;
   the action buttons explicitly opt out so clicks land on them
   instead of starting a window drag.

   Uses `position: fixed` so the flex/height math of page layouts
   (GuildsLayout's `height: 100vh`, AuthLayout's `position: fixed`
   background pattern, etc.) can't displace or cover it. The app
   body reserves space via the `body.has-window-controls` padding
   rule applied from TitleBar.tsx when we know we're in Electron. */
.bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 32px;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	background-color: var(--background-secondary);
	-webkit-app-region: drag;
	user-select: none;
	z-index: 20000;
}

.buttons {
	display: flex;
	align-items: stretch;
	-webkit-app-region: no-drag;
}

.button {
	width: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	transition: background-color 0.12s, color 0.12s;
}

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

.closeButton:hover {
	background-color: #e81123;
	color: #ffffff;
}
