/* ── Video attachment card ────────────────────────────────
   Inline video renderer for `video/*` message attachments.
   Poster → click → inline playback with a custom control
   overlay (top hover bar + bottom bar with seek + play +
   volume + time + fullscreen). */

.wrapper {
	position: relative;
	display: inline-block;
	max-width: 100%;
	border-radius: var(--radius-lg, 12px);
	overflow: hidden;
	background-color: var(--background-secondary);
}

.video {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: inherit;
	border-radius: var(--radius-lg, 12px);
	/* `object-fit: contain` keeps portrait videos centered inside
	   the 400 × 300 cap instead of being cropped. */
	object-fit: contain;
	background-color: #000;
	cursor: pointer;
}

/* ── Center play overlay (poster state) ───────────────────
   Shown before the user first clicks play. Fades away once
   hasStarted is true so the native video surface + custom
   control bar take over. */
.playOverlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.25);
	transition: background-color 0.12s;
	z-index: 2;
}

.playOverlay:hover {
	background-color: rgba(0, 0, 0, 0.35);
}

.playBadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.6);
	border: none;
	color: #fff;
	/* Nudge the play triangle 2px right so the visual weight
	   sits centered inside the circle — the triangle's
	   geometric centroid is left of its bounding box. */
	padding-left: 4px;
	box-sizing: border-box;
	transition: transform 0.12s;
}

.playOverlay:hover .playBadge {
	transform: scale(1.05);
}

/* ── Top hover bar (Trash / Download / Favorite) ──────────
   Pinned to the top-right of the card. Hidden at rest,
   fades in on wrapper hover or focus-within. */
.topBar {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	z-index: 3;
}

.wrapper:hover .topBar,
.wrapper:focus-within .topBar {
	opacity: 1;
	visibility: visible;
}

.topBarButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background-color: rgba(0, 0, 0, 0.6);
	border: none;
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.12s, color 0.12s;
}

.topBarButton:hover:not(:disabled) {
	background-color: rgba(0, 0, 0, 0.8);
}

.topBarButton:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Favorited state — brand-primary fill matches the image
   lightbox's star treatment so the visual language stays
   consistent across all three attachment viewers. */
.topBarButtonActive {
	background-color: var(--brand-primary);
	color: var(--text-on-brand-primary, #fff);
}

.topBarButtonActive:hover:not(:disabled) {
	background-color: var(--brand-primary);
	filter: brightness(1.08);
}

.topBarButtonDanger:hover:not(:disabled) {
	background-color: hsl(0, calc(70% * var(--saturation-factor, 1)), 55%);
}

/* ── Bottom control bar (after hasStarted) ────────────────
   Seek bar + play + volume + time + fullscreen. Fades in on
   wrapper hover so it doesn't clutter a video the user is
   actively watching at rest. Permanently visible inside
   fullscreen because the wrapper receives the :hover state
   from the system cursor whenever it moves. */
.bottomBar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px 12px 10px;
	/* Gradient so the white controls stay readable against
	   bright video content without a hard edge. */
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.75) 0%,
		rgba(0, 0, 0, 0) 100%
	);
	display: flex;
	flex-direction: column;
	gap: 6px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	z-index: 3;
}

.wrapperPlaying:hover .bottomBar,
.wrapperPlaying:focus-within .bottomBar {
	opacity: 1;
	visibility: visible;
}

/* ── Seek track ──────────────────────────────────────────
   Native range input layered over a visual track+fill so we
   get keyboard + drag support for free while keeping full
   visual control. Same pattern as AttachmentAudio. */
.seekTrack {
	position: relative;
	height: 4px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.25);
	cursor: pointer;
}

.seekFill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--progress, 0%);
	border-radius: 999px;
	background-color: var(--brand-primary);
	pointer-events: none;
}

.seekInput {
	position: absolute;
	inset: -8px 0;
	width: 100%;
	height: calc(100% + 16px);
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
}

.seekInput::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--brand-primary);
	cursor: pointer;
}

.seekInput::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: none;
	border-radius: 50%;
	background: var(--brand-primary);
	cursor: pointer;
}

/* ── Control row (play / volume / time / fullscreen) ─────── */
.controlsRow {
	display: flex;
	align-items: center;
	gap: 8px;
}

.controlButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.12s;
}

.controlButton:hover {
	background-color: rgba(255, 255, 255, 0.14);
}

.timeLabel {
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
	font-variant-numeric: tabular-nums;
	margin-left: 2px;
}

.controlsSpacer {
	flex: 1;
}

/* ── Spoiler state ────────────────────────────────────────
   Blurs the poster and swaps the play badge for a SPOILER
   label. First click reveals, a second click plays — same
   two-step reveal the image attachment uses. */
.wrapperBlurred .video {
	filter: blur(44px);
	clip-path: inset(0 round var(--radius-lg, 12px));
}

.wrapperBlurred .playOverlay {
	background-color: rgba(0, 0, 0, 0.45);
}

.spoilerCoverLabel {
	padding: 8px 16px;
	background-color: rgba(0, 0, 0, 0.75);
	border-radius: 999px;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	pointer-events: none;
}
