/* Livetweets Threads — Front-End Styles */

/* ── Entry animation ─────────────────────────────────────────────────────── */

/* New tweets slide in from above, then pulse their background to draw the eye */
@keyframes ltt-tweet-enter {
	0%   { opacity: 0; transform: translateY( -0.75rem ); background-color: rgba(219,238,255,0); }
	25%  { opacity: 1; transform: translateY( 0 );         background-color: #dbeeff; }
	65%  { background-color: #dbeeff; }
	100% { opacity: 1; transform: translateY( 0 );         background-color: rgba(219,238,255,0); }
}

.ltt-tweet-entering {
	animation: ltt-tweet-enter 1.6s ease-out forwards;
	border-radius: 4px;
}

/* Header pulse — fires on tweet count and last-updated when new tweets arrive */
@keyframes ltt-header-pulse {
	0%   { opacity: 1; }
	20%  { opacity: 0.25; color: #2271b1; font-weight: 700; }
	50%  { opacity: 1;    color: #2271b1; font-weight: 700; }
	80%  { opacity: 0.25; color: #2271b1; font-weight: 700; }
	100% { opacity: 1; }
}

.ltt-header-pulse {
	animation: ltt-header-pulse 0.9s ease-in-out forwards;
}

/* ── Thread wrapper ──────────────────────────────────────────────────────── */

/* overflow: visible so scroll anchoring works correctly */
.ltt-thread,
.ltt-tweet-list {
	overflow: visible;
}

/* ── Live pill ───────────────────────────────────────────────────────────── */

@keyframes ltt-pill-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.75; }
}
.ltt-live-pill {
	animation: ltt-pill-pulse 2s ease-in-out infinite;
	white-space: nowrap;      /* prevent letters stacking on narrow screens */
	flex-shrink: 0;           /* never compress the pill */
	align-self: center;
}

/* ── Tweet row ───────────────────────────────────────────────────────────── */

/* Item 3: hover background */
.ltt-tweet {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 1rem;
	padding: 0.6rem 0.5rem;
	border-radius: 4px;
	transition: background-color 0.15s ease;
}

.ltt-tweet:hover {
	background-color: #eeeeee;
}

.ltt-tweet + .ltt-tweet {
	border-top: 1px solid #f0f0f0;
}

.ltt-tweet-body {
	flex: 1;
	min-width: 0;
}

/* ── Tweet text ──────────────────────────────────────────────────────────── */

.ltt-tweet-text {
	margin: 0 0 0.5rem;
	line-height: 1.65;
	word-break: break-word;
}

.ltt-tweet-text a {
	color: #1d9bf0;
	text-decoration: none;
}

.ltt-tweet-text a:hover {
	text-decoration: underline;
}

/* ── Photos & video ──────────────────────────────────────────────────────── */

.ltt-photo {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}

.ltt-video-thumb {
	display: inline-block;
	position: relative;
}

.ltt-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2rem;
	color: #fff;
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
	pointer-events: none;
}

/* ── OG cards ────────────────────────────────────────────────────────────── */

.ltt-og-card {
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
	margin-top: 0.75rem;
	max-width: 640px;
}

.ltt-og-card-link {
	display: flex;
	text-decoration: none;
	color: inherit;
	align-items: stretch;
}

.ltt-og-card-link:hover {
	opacity: 0.9;
}

.ltt-og-card-img {
	width: 200px;
	flex-shrink: 0;
	object-fit: cover;
}

.ltt-og-card-text {
	padding: 0.75rem 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ltt-og-card-text strong {
	display: block;
	line-height: 1.4;
	font-size: 1em;
}

.ltt-og-card-text p {
	margin: 0.4rem 0 0;
	font-size: 0.875em;
	color: #555;
	line-height: 1.4;
}

/* ── Date/link column ────────────────────────────────────────────────────── */

.ltt-tweet-date {
	flex-shrink: 0;
	width: 11em;
	margin: 0;
	text-align: right;
	font-size: 0.75em;
	line-height: 1.4;
}

.ltt-tweet-date a {
	color: #888;
	text-decoration: none;
	white-space: nowrap;
}

.ltt-tweet-date a:hover {
	color: #444;
	text-decoration: underline;
}

/* ── Quoted tweets ───────────────────────────────────────────────────────── */

.ltt-quoted-tweet {
	border: 1px solid #cfd9de;
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin-top: 0.6rem;
	background: #f7f9fa;
	max-width: 100%;
}

.ltt-quoted-tweet--unavailable {
	color: #888;
	font-style: italic;
}

.ltt-quoted-tweet-header {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.35rem;
	flex-wrap: wrap;
}

.ltt-quoted-tweet-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
}

.ltt-quoted-tweet-name {
	font-weight: 600;
	font-size: 0.875em;
}

.ltt-quoted-tweet-handle {
	color: #555;
	font-size: 0.8em;
}

.ltt-quoted-tweet-date {
	margin-left: auto;
	font-size: 0.75em;
	color: #888;
	text-decoration: none;
	white-space: nowrap;
}

.ltt-quoted-tweet-date:hover {
	color: #444;
	text-decoration: underline;
}

.ltt-quoted-tweet-text {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.5;
	word-break: break-word;
}

.ltt-quoted-tweet-text a {
	color: #1d9bf0;
	text-decoration: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media ( max-width: 600px ) {
	.ltt-tweet {
		flex-direction: column;
	}
	.ltt-tweet-date {
		width: auto;
		text-align: left;
	}
}

/* ── Thread header responsive ────────────────────────────────────────────── */

/*
 * The header row contains: [LIVE pill] [N tweets] [last updated] [refresh message]
 * On narrow screens this needs to reflow.
 *
 * Strategy:
 *   - Allow flex-wrap on the header row
 *   - LIVE pill + count + updated-at stay on row 1 together (they're short)
 *   - Refresh message gets its own full-width row beneath on mobile
 *   - The PHP template already renders refresh message last in the flex row
 */

.ltt-thread-header {
	flex-wrap: wrap !important;     /* allow wrapping; PHP inline style uses nowrap */
	row-gap: 0.4rem;
}

/* Refresh message: allow it to break to its own line on narrow screens */
.ltt-refresh-message {
	flex-basis: 0;
	flex-grow: 1;
	min-width: 180px;               /* wraps to its own row when header is too narrow */
}

/* Below ~480px: refresh message takes full width */
@media ( max-width: 480px ) {
	.ltt-refresh-message {
		flex-basis: 100%;
		margin-top: 0.1rem;
	}
	/* Slightly smaller pill text on very small screens */
	.ltt-live-pill p {
		font-size: 0.75rem !important;
		padding: 0.25rem 0.5rem;
	}
}