/* ── Delete confirmation modal ────────────────────────────────────
   Shown before `api.messageActions.remove` actually runs. Parallels
   PinConfirmationModal: description + static PinnedMessageRow
   preview + Cancel / Delete actions. Two differences from the pin
   dialog: the action row is horizontal (Cancel left, Delete right)
   and the primary button is always the danger variant. */

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

.headerFlush {
	border-bottom: none;
}

.description {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--text-secondary);
	margin: 0;
}

.previewWrap {
	margin: 0 -12px;
}

.actions {
	display: flex;
	flex-direction: row;
	gap: 8px;
	margin-top: 4px;
}

.primaryButton,
.secondaryButton {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border: none;
	border-radius: 0.75rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.primaryButton {
	background-color: var(--brand-primary);
	color: #fff;
	transition: filter 0.15s;
}

.primaryButton:active:not(:disabled) {
	filter: brightness(0.92);
}

.primaryButton:disabled {
	opacity: 0.55;
	cursor: default;
}

/* Danger variant — Delete is always destructive so this is always on. */
.primaryButtonDanger {
	background-color: var(--button-danger-fill);
}

.primaryButtonDanger:hover:not(:disabled) {
	filter: brightness(1.05);
}

.primaryButtonDanger:active:not(:disabled) {
	background-color: var(--button-danger-active-fill);
	filter: none;
}

.secondaryButton {
	background-color: var(--background-secondary-alt);
	color: var(--text-primary);
	transition: background-color 0.15s;
}

.secondaryButton:hover,
.secondaryButton:active {
	background-color: var(--background-modifier-hover);
}

.error {
	padding: 10px 14px;
	background-color: hsl(0, calc(60% * var(--saturation-factor)), 22%);
	color: hsl(0, calc(80% * var(--saturation-factor)), 85%);
	border-radius: 0.5rem;
	font-size: 0.8125rem;
}