.body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px 16px 32px;
}

/* Quick reactions row — the row itself is transparent; each button
   is its own rounded tile on top of the drawer background, matching
   the Fluxer mobile layout. */

.quickRow {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}

.quickButton {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0;
	background-color: var(--background-modifier-hover);
	border: none;
	border-radius: 10px;
	color: var(--text-primary, #fff);
	cursor: pointer;
	transition: background-color 0.1s;
	-webkit-tap-highlight-color: transparent;
}

.quickButton:active {
	background-color: var(--background-modifier-active, rgba(255, 255, 255, 0.08));
}

.quickEmoji {
	width: 28px;
	height: 28px;
	display: block;
	pointer-events: none;
}

/* Action list — items sit flush with no outer gap. The whole list
   is a single rounded card; a 1px divider (inset by 1rem on each
   side) separates adjacent items. First / last items get their
   rounded corners via the parent's overflow: hidden. */

.actionList {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-radius: 12px;
	overflow: hidden;
}

.actionItem {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 16px 16px;
	background-color: var(--background-secondary-alt);
	border: none;
	border-radius: 0;
	color: var(--text-primary, #fff);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.1s;
	-webkit-tap-highlight-color: transparent;
}

.actionItem:active {
	background-color: var(--background-modifier-hover, rgba(255, 255, 255, 0.08));
}

.actionItem svg {
	flex-shrink: 0;
	color: var(--text-primary-muted, #a0a3a8);
}

/* Thin inset divider between adjacent items — drawn as an absolutely
   positioned element at the bottom of every item except the last. */
.actionItem:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 0;
	height: 1px;
	background-color: var(--background-header-secondary);
	pointer-events: none;
}

.actionItemDanger {
	/* Fluxer's exact delete red — HSL tied to saturation-factor so
	   it follows the theme's saturation setting in both dark and
	   light modes. Overrides both the text and icon color. */
	color: hsl(350, calc(90% * var(--saturation-factor)), 65%);
}

.actionItemDanger svg {
	color: hsl(350, calc(90% * var(--saturation-factor)), 65%);
}
