/* Shared card used by the mobile Pins tab, the desktop pins
   popover, and the Pin-it-good confirmation modal. Renders a
   pinned message with its author, timestamp, text content, and
   any image / file attachments inline. Each row is its own
   rounded `--background-secondary` surface so the list reads
   as a stack of cards (matches the Fluxer reference). */

.card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	margin: 6px 12px;
	background-color: var(--background-secondary);
	border: 1px solid var(--background-header-secondary);
	border-radius: 0.625rem;
	color: var(--text-primary);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.1s, border-color 0.1s;
	-webkit-tap-highlight-color: transparent;
	width: auto;
}

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

.cardStatic {
	cursor: default;
}

.cardStatic:hover {
	background-color: var(--background-secondary);
	border-color: var(--background-header-secondary);
}

/* Mobile (≤768px) overrides — the Pins tab lives inside the
   ChannelDetailsDrawer, whose own sheet surface already uses
   `--background-secondary`, so a card on that same color would
   disappear into the background. Flip to
   `--background-modifier-hover` (hsla(220, 13%, 100%, 0.05) — a
   translucent white wash) so each card visually lifts off the
   drawer surface. Desktop keeps the default `--background-secondary`
   because the popover uses `--background-primary` as its own
   surface and the card stands out against it naturally. */
@media (max-width: 768px) {
	.card {
		background-color: var(--background-modifier-hover);
	}

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

}

.avatar {
	flex-shrink: 0;
	padding-top: 2px;
}

.body {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.meta {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex-wrap: nowrap;
}

.author {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.timestamp {
	font-size: 0.75rem;
	color: var(--text-primary-muted);
	font-weight: 500;
	flex-shrink: 0;
}

/* Desktop hover actions — sit at the far right of the meta row
   (pushed there via `margin-left: auto`) and fade in on card
   hover. Hidden by default so the author + timestamp read
   cleanly when the card is idle. */
.hoverActions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease, visibility 0.12s ease;
	flex-shrink: 0;
}

.card:hover .hoverActions,
.card:focus-within .hoverActions {
	opacity: 1;
	visibility: visible;
}

.jumpButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	background-color: var(--background-primary);
	border: 1px solid var(--background-header-secondary);
	border-radius: 0.375rem;
	color: var(--text-primary-muted);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.1s, border-color 0.1s, color 0.1s;
	-webkit-tap-highlight-color: transparent;
}

.jumpButton:hover {
	background-color: var(--background-modifier-hover);
	border-color: var(--background-modifier-accent);
	color: var(--text-primary);
}

.closeButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background-color: var(--background-primary);
	border: 1px solid var(--background-header-secondary);
	border-radius: 0;
	color: var(--text-primary-muted);
	cursor: pointer;
	transition: background-color 0.1s, color 0.1s, border-color 0.1s;
	-webkit-tap-highlight-color: transparent;
}

.closeButton:hover {
	background-color: var(--background-modifier-hover);
	color: hsl(350, calc(90% * var(--saturation-factor)), 65%);
	border-color: var(--background-modifier-accent);
}

.content {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--text-primary);
	word-break: break-word;
}

.content :global(p) {
	margin: 0;
}

.undecryptable {
	font-style: italic;
	color: var(--text-primary-muted);
}

/* Attachments — mirror the same layout MessageGroup uses, sized
   smaller so previews fit comfortably inside the card. */

.attachments {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 2px;
}

.imageAttachment {
	display: block;
	max-width: 100%;
	max-height: 260px;
	border-radius: 0.5rem;
	object-fit: contain;
	cursor: zoom-in;
	background-color: var(--background-secondary);
}

.fileAttachment {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background-color: var(--background-secondary);
	border: 1px solid var(--background-header-secondary);
	border-radius: 0.5rem;
	color: var(--text-link, var(--brand-primary-light));
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	max-width: 100%;
	word-break: break-all;
}

.fileAttachment:hover {
	text-decoration: underline;
}

/* Terminator block shown at the bottom of the pinned list — flag
   icon + "You've reached the end" + explanatory body. Also used
   as the empty state when there are zero pins. */

.reachedEnd {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px 24px 20px;
	text-align: center;
}

.reachedEndIcon {
	color: var(--text-primary-muted);
	margin-bottom: 4px;
}

.reachedEndTitle {
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--text-primary);
}

.reachedEndBody {
	font-size: 0.8125rem;
	color: var(--text-primary-muted);
	line-height: 1.4;
	max-width: 280px;
}
