/* ── Pending attachment row ──────────────────────────────────
   Horizontal strip of cards that sits directly above the chat
   input. Horizontally scrollable when the user has too many
   files for the visible width, with a subtle bottom border so
   the row visually detaches from the textarea pill below it. */

.row {
	display: flex;
	gap: 10px;
	/* Top padding is bumped so the floating action bar (which
	   hangs above each card by 14px) has room to live inside
	   the row's own clip box — `overflow-x: auto` forces
	   overflow-y to also clip, so we can't just let it leak. */
	padding: 24px 16px 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--background-modifier-accent) transparent;
}

.row::-webkit-scrollbar {
	height: 6px;
}

.row::-webkit-scrollbar-track {
	background: transparent;
}

.row::-webkit-scrollbar-thumb {
	background-color: var(--background-modifier-accent);
	border-radius: 999px;
}

/* ── Individual card ────────────────────────────────────────── */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	min-width: 200px;
	max-width: 200px;
	min-height: 200px;
	max-height: 200px;
	padding: 8px;
	background-color: var(--background-primary);
	border: 1px solid var(--background-modifier-accent);
	border-radius: 0.5rem;
	transition: border-color 0.12s;
	box-sizing: border-box;
}

.card:hover {
	border-color: var(--background-modifier-hover);
}

.cardSpoiler {
	border-color: var(--brand-primary);
}

.cardError {
	border-color: hsl(0, calc(70% * var(--saturation-factor, 1)), 55%);
}

/* ── Preview area ───────────────────────────────────────────── */

.preview {
	position: relative;
	flex: 1;
	width: 100%;
	min-height: 0;
	background-color: var(--background-secondary-alt, var(--background-secondary));
	border-radius: 0.375rem;
	overflow: hidden;
}

.previewImage,
.previewVideo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.iconPreview {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-primary-muted, #a0a3a8);
}

/* Small play badge over video preview thumbnails so it reads
   as playable (Fluxer pattern). */
.videoPlayBadge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.55);
	border-radius: 50%;
	color: #fff;
	pointer-events: none;
}

/* Spoiler overlay — dark film + eye-slash icon + "SPOILER"
   label so the card reads as hidden even though it's staged. */
.spoilerOverlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background-color: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	pointer-events: none;
}

.altBadge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 2px 6px;
	background-color: rgba(0, 0, 0, 0.65);
	border-radius: 4px;
	color: #fff;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.06em;
}

/* ── Always-visible action bar (Spoiler / Edit / Delete) ────
   Floating pill that hangs above the card's top-right edge,
   matching MessageActionBar's visual language:
   `--background-primary` surface with a 1px
   `--background-header-secondary` border and 8px radius.
   Lives as a direct child of the card (not .preview) so it
   can escape the preview's overflow clip. The row reserves
   enough top padding for the overhang to avoid being clipped
   by its own `overflow-x: auto` clip box. */

.actions {
	position: absolute;
	top: -14px;
	right: 8px;
	display: flex;
	align-items: center;
	padding: 2px;
	background-color: var(--background-primary);
	border: 1px solid var(--background-header-secondary);
	border-radius: 8px;
	z-index: 3;
}

.actionButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 4px;
	background: none;
	border: none;
	border-radius: 6px;
	color: var(--text-tertiary);
	cursor: pointer;
	transition: background-color 0.1s, color 0.1s;
}

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

.actionButtonActive {
	color: var(--brand-primary);
}

.actionButtonActive:hover {
	background-color: var(--background-modifier-hover);
	color: var(--brand-primary);
	filter: brightness(1.1);
}

.actionButtonDanger {
	color: var(--status-danger);
}

.actionButtonDanger:hover {
	background-color: var(--background-modifier-hover);
	color: var(--status-danger);
}

/* ── Upload progress bar ─────────────────────────────────────
   Fixed to the bottom of the preview area. Track is the same
   --background-modifier-accent as the card border; fill is
   brand-primary and scales via a --progress CSS variable so
   we never reach into the DOM to mutate widths. */

.progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: rgba(0, 0, 0, 0.55);
	overflow: hidden;
	z-index: 1;
}

.progressFill {
	height: 100%;
	width: var(--progress, 0%);
	background-color: var(--brand-primary);
	transition: width 0.12s linear;
}

/* ── Meta row below the preview ─────────────────────────── */

.meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 4px 0;
	background-color: var(--background-primary);
}

.filename {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Bottom row of the meta — size on the left, uppercase file-type
   badge flush to the right. Matches the Fluxer pattern of
   surfacing the extension as a brand-primary label. */
.metaBottomRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.size {
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--text-primary-muted, #a0a3a8);
	font-variant-numeric: tabular-nums;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ext {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--brand-primary-light);
	flex-shrink: 0;
}

.cardError .size {
	color: hsl(0, calc(70% * var(--saturation-factor, 1)), 60%);
}
