/* ── Pin confirmation modal ──────────────────────────────────────────
   Fluxer-style "Pin it. Pin it good." dialog shown when the user
   taps Pin Message from either the desktop action bar or the
   mobile long-press sheet. Uses the shared Modal primitive for
   the chrome (backdrop, centring, size), so the styling here is
   just the content layout: description + static preview card +
   two stacked action buttons. */

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

/* Override the shared Modal.Header — strip its default 1px
   bottom divider so the title sits flush against the body. The
   title + description + preview form one cohesive block, and
   the divider added visual noise between the two. */
.headerFlush {
	border-bottom: none;
}

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

/* The PinnedMessageRow card already has its own margin/padding;
   wrap it in a container that resets the horizontal margin so the
   preview spans the modal body cleanly. */
.previewWrap {
	/* Zero out the 12px horizontal margin PinnedMessageRow adds so
	   the preview card aligns with the modal body padding. */
	margin: 0 -12px;
}

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

.primaryButton {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	background-color: var(--brand-primary);
	border: none;
	border-radius: 0.75rem;
	color: #fff;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s;
	-webkit-tap-highlight-color: transparent;
}

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

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

/* Danger variant — used by the unpin confirmation. Uses the
   global `--button-danger-fill` token so the red matches every
   other destructive button in the app (and picks up theme
   changes for free). Active state darkens via
   `--button-danger-active-fill`. */
.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 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	background-color: var(--background-secondary-alt);
	border: none;
	border-radius: 0.75rem;
	color: var(--text-primary);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.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;
}
