/**
 * Chat Log block — frontend styles.
 *
 * 2.0 contract:
 *   Format-paint sections route through var(--pfbt-format-chat-*, NEUTRAL)
 *   tokens (see /styles/format-tokens.css and /docs/DESIGN-TOKENS.md).
 *   Themes paint by setting the tokens in theme.json or stylesheet;
 *   themes that stay silent see neutral inheritance from the surrounding
 *   post content.
 *
 * @pfbt-allow-color brand-replica   exemption for device-frame replicas.
 *   The .chatlog-device-frame--phone | --desktop | --slack-app |
 *   --discord-app | .chatlog--irc selectors render recognizable brand
 *   replicas of those platforms (Slack purple, Discord gray, IRC
 *   black-on-green, iPhone notch). These are SEMANTIC colors — themes
 *   never want to override Slack's brand to something else without
 *   losing the "this is what Slack looks like" cue. Tokenizing them
 *   would harm the feature without benefit. The marker comment above
 *   each affected block exempts those literals from the
 *   test-no-color-leakage.php contract guardrail.
 *
 * Accessibility considerations:
 *   - High contrast ratios (4.5:1 minimum) — assumes themes set tokens
 *     with sufficient contrast. Plugin defaults inherit from the
 *     theme's normal post text, which the theme is expected to have
 *     audited.
 *   - Focus indicators: keyboard focus uses currentColor outlines so
 *     the visible color always matches the surrounding text contrast.
 *   - Reduced motion support unchanged from 1.x.
 *   - Touch target sizes (44x44px minimum) preserved structurally.
 */

.chatlog {
	font-family: var(--pfbt-format-chat-font, inherit);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--pfbt-format-chat-fg, inherit);
	background: var(--pfbt-format-chat-bg, transparent);
	border-radius: 8px;
	padding: 1.5rem;
	margin: 1rem 0;

	&.format-chat {
		border: 1px solid var(--pfbt-format-chat-rule, currentColor);
	}
}

/* Participant list */
.chatlog-participants {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: var(--pfbt-format-chat-row-bg-odd, transparent);
	border-radius: 6px;

	summary {
		cursor: pointer;
		font-weight: 600;
		padding: 0.5rem;
		user-select: none;

		&:hover,
		&:focus {
			background: var(--pfbt-format-chat-row-bg-even, transparent);
			border-radius: 4px;
		}

		&:focus-visible {
			outline: 2px solid currentColor;
			outline-offset: 2px;
		}
	}
}

.chatlog-participants-list {
	list-style: none;
	padding: 1rem 0 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;

	li {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 0.75rem;
		background: var(--pfbt-format-chat-bg, transparent);
		border-radius: 20px;
		border: 1px solid var(--pfbt-format-chat-rule, currentColor);
	}
}

/* Avatar component.
   --avatar-bg is set inline by the chatlog edit/view JS based on a
   per-speaker hash so each speaker gets a stable distinct circle.
   The token fallback inherits currentColor; themes that want a
   default mat color set --pfbt-format-chat-avatar-bg.  */
.chatlog-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 50%;
	background-color: var(--avatar-bg, var(--pfbt-format-chat-avatar-bg, currentColor));
	color: var(--pfbt-format-chat-avatar-fg, inherit);
	font-weight: 600;
	font-size: 14px;
	overflow: hidden;
	flex-shrink: 0;
	text-transform: uppercase;

	&::before {
		content: attr(data-initials);
		position: relative;
		z-index: 1;
	}

	img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 2;
	}

	img[src=""],
	img:not([src]) {
		display: none;
	}
}

/* Messages container */
.chatlog-messages {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Individual message */
.chatlog-message {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	scroll-margin-top: 2rem;

	&:target {
		animation: highlight-message 1s ease-in-out;
	}

	&.chatlog-message--system {
		font-style: italic;
		color: var(--pfbt-format-chat-meta-fg, inherit);
		text-align: center;
		padding: 0.5rem;
		font-size: 0.875rem;
	}

	&.chatlog-message--highlighted {
		background: var(--pfbt-format-chat-highlight-bg, transparent);
		border-left: 3px solid var(--pfbt-format-chat-highlight-accent, currentColor);
		padding-left: 1rem;
		margin-left: -1rem;
	}

	&.chatlog-message--thread {
		margin-left: 2rem;
		padding-left: 1rem;
		border-left: 2px solid var(--pfbt-format-chat-rule, currentColor);
	}
}

@keyframes highlight-message {
	0%, 100% { background: transparent; }
	50% { background: var(--pfbt-format-chat-highlight-bg, transparent); }
}

/* Message header */
.chatlog-message-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.chatlog-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.chatlog-speaker {
	font-weight: 600;
	color: var(--pfbt-format-chat-speaker-fg, inherit);
}

.chatlog-timestamp {
	font-size: 0.875rem;
	color: var(--pfbt-format-chat-meta-fg, inherit);
	text-decoration: none;

	&:hover,
	&:focus {
		color: var(--pfbt-format-chat-link-hover-fg, inherit);
		text-decoration: underline;
	}

	&:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
		border-radius: 2px;
	}
}

.chatlog-thread-indicator {
	font-size: 0.8125rem;
	color: var(--pfbt-format-chat-meta-fg, inherit);
	font-style: italic;
}

/* Message body */
.chatlog-body {
	margin: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;

	p {
		margin: 0 0 0.5rem;

		&:last-child {
			margin-bottom: 0;
		}
	}

	a {
		color: var(--pfbt-format-chat-link-fg, inherit);
		text-decoration: underline;

		&:hover,
		&:focus {
			color: var(--pfbt-format-chat-link-hover-fg, inherit);
		}

		&:focus-visible {
			outline: 2px solid currentColor;
			outline-offset: 2px;
		}
	}

	code {
		background: var(--pfbt-format-chat-code-bg, transparent);
		padding: 0.125rem 0.25rem;
		border-radius: 3px;
		font-family: monospace;
		font-size: 0.875em;
	}

	strong {
		font-weight: 700;
	}

	em {
		font-style: italic;
	}
}

/* Reactions */
.chatlog-reactions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

.chatlog-reaction {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	background: var(--pfbt-format-chat-row-bg-odd, transparent);
	border: 1px solid var(--pfbt-format-chat-rule, currentColor);
	border-radius: 12px;
	font-size: 0.875rem;

	.chatlog-reaction-count {
		font-weight: 600;
		color: var(--pfbt-format-chat-meta-fg, inherit);
	}
}

/* Thread replies */
.chatlog-thread {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0 3rem;
	border-left: 2px solid var(--pfbt-format-chat-rule, currentColor);
	padding-left: 1rem;

	.chatlog-message {
		font-size: 0.9375rem;
	}
}

/* Bubbles style */
.chatlog--bubbles {
	.chatlog-message {
		&:not(.chatlog-message--system) {
			.chatlog-body {
				background: var(--pfbt-format-chat-row-bg-even, transparent);
				padding: 0.75rem 1rem;
				border-radius: 18px;
				max-width: 70%;
			}
		}

		&.chatlog-message--highlighted {
			.chatlog-body {
				background: var(--pfbt-format-chat-highlight-bg, transparent);
				border-color: var(--pfbt-format-chat-highlight-accent, currentColor);
			}
		}
	}
}

/* @pfbt-allow-color brand-replica
   IRC theme: classic terminal aesthetic — black background, green text,
   cyan speakers. These are recognizable IRC client conventions; themes
   never want to override them without losing the "this is IRC" cue.
   Exempt from the no-color-leakage guardrail per the marker above. */
.chatlog--irc {
	font-family: monospace;
	background: #000;
	color: #0f0;
	padding: 1rem;

	.chatlog-message {
		flex-direction: row;
		gap: 0.5rem;
		font-size: 0.875rem;

		.chatlog-avatar {
			display: none;
		}
	}

	.chatlog-timestamp {
		color: #888;
		flex-shrink: 0;
	}

	.chatlog-speaker {
		color: #0ff;
		flex-shrink: 0;

		&::after {
			content: ':';
		}
	}

	.chatlog-body {
		color: #0f0;
		margin: 0;
	}
}

/* Transcript style */
.chatlog--transcript {
	.chatlog-message-header {
		border-bottom: 1px solid var(--pfbt-format-chat-rule, currentColor);
		padding-bottom: 0.5rem;
		margin-bottom: 0.5rem;
	}

	.chatlog-speaker {
		font-size: 1.125rem;
	}

	.chatlog-body {
		padding-left: 3.5rem;
	}
}

/* Timeline style.
   The timeline rail and bullet inherit currentColor by default; themes
   can paint via --pfbt-format-chat-rule and --pfbt-format-chat-highlight-accent. */
.chatlog--timeline {
	position: relative;
	padding-left: 3rem;

	&::before {
		content: '';
		position: absolute;
		left: 1.25rem;
		top: 0;
		bottom: 0;
		width: 2px;
		background: var(--pfbt-format-chat-rule, currentColor);
	}

	.chatlog-message {
		position: relative;

		&::before {
			content: '';
			position: absolute;
			left: -2.5rem;
			top: 0.5rem;
			width: 12px;
			height: 12px;
			background: var(--pfbt-format-chat-highlight-accent, currentColor);
			border: 2px solid var(--pfbt-format-chat-bg, transparent);
			border-radius: 50%;
			box-shadow: 0 0 0 2px var(--pfbt-format-chat-rule, currentColor);
		}
	}
}

/* Device frames */
.chatlog-device-frame {
	max-width: 100%;
	margin: 0 auto;
	position: relative;
}

/* @pfbt-allow-color brand-replica
   iPhone-style frame: deep matte body, screen well, notch. Tuned to
   look like an iPhone — black body + neutral notch. Themes don't
   override Apple's industrial design palette. */
.chatlog-device-frame--phone {
	max-width: 390px;
	padding: 20px;
	background: #1e1e1e;
	border-radius: 40px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3),
				0 0 0 1px rgba(255, 255, 255, 0.1) inset;

	/* Notch */
	&::before {
		content: '';
		position: absolute;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		width: 160px;
		height: 30px;
		background: #1e1e1e;
		border-radius: 0 0 20px 20px;
		z-index: 10;
	}

	/* Screen container */
	.chatlog {
		margin: 50px 0 30px;
		border-radius: 30px;
		overflow: hidden;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
		max-height: 700px;
		overflow-y: auto;
	}
}

/* @pfbt-allow-color brand-replica
   macOS-style window frame: dark window chrome + traffic-light buttons
   (red/yellow/green). Replicates Apple's macOS Big Sur+ window controls
   verbatim — these colors are recognizable platform identity. */
.chatlog-device-frame--desktop {
	max-width: 1200px;
	padding: 40px 20px 20px;
	background: linear-gradient(180deg, #2a2a2a 0%, #1e1e1e 100%);
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
				0 0 0 1px rgba(255, 255, 255, 0.05) inset;

	/* Window controls */
	&::before {
		content: '';
		position: absolute;
		top: 15px;
		left: 20px;
		width: 12px;
		height: 12px;
		background: #ff5f56;
		border-radius: 50%;
		box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
	}

	.chatlog {
		margin: 0;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
		max-height: 600px;
		overflow-y: auto;
	}
}

/* @pfbt-allow-color brand-replica
   Slack: aubergine purple header. Recognizable Slack identity. */
.chatlog-device-frame--slack-app {
	max-width: 1000px;
	background: #f8f8f8;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

	/* Slack header */
	&::before {
		content: '';
		display: block;
		height: 50px;
		background: #4a154b;
		border-bottom: 1px solid #350d36;
	}

	.chatlog {
		margin: 0;
		border-radius: 0;
		background: #fff;
		max-height: 600px;
		overflow-y: auto;
	}
}

/* @pfbt-allow-color brand-replica
   Discord: dark gray chrome (#36393f), darker header (#2f3136), text
   in Discord's specific gray-on-gray palette. Recognizable Discord identity. */
.chatlog-device-frame--discord-app {
	max-width: 1000px;
	background: #36393f;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);

	/* Discord header */
	&::before {
		content: '';
		display: block;
		height: 48px;
		background: #2f3136;
		border-bottom: 1px solid #202225;
	}

	.chatlog {
		margin: 0;
		border-radius: 0;
		background: #36393f;
		color: #dcddde;
		max-height: 600px;
		overflow-y: auto;

		.chatlog-speaker {
			color: #fff;
		}

		.chatlog-timestamp {
			color: #72767d;
		}

		.chatlog-body {
			color: #dcddde;
		}
	}
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.chatlog-message {
		animation: none;
		transition: none;
	}

	.chatlog-thread {
		transition: none;
	}
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
	.chatlog {
		border: 2px solid currentColor;
	}

	.chatlog-body {
		border-left: 3px solid currentColor;
		padding-left: 0.5rem;
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.chatlog-device-frame--phone {
		max-width: 100%;
		padding: 15px;

		.chatlog {
			margin: 40px 0 20px;
		}
	}

	.chatlog-device-frame--desktop,
	.chatlog-device-frame--slack-app,
	.chatlog-device-frame--discord-app {
		padding: 10px;

		.chatlog {
			max-height: 500px;
		}
	}

	.chatlog--bubbles .chatlog-message .chatlog-body {
		max-width: 85%;
	}

	.chatlog-message--thread {
		margin-left: 1rem;
	}
}

/* Screen reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Print styles.
   Print preserves the format paint via tokens — themes that have
   defined chat tokens see them respected on print. The print
   override on .chatlog-device-frame is structural (hiding device
   chrome that doesn't print well), not a paint decision. */
@media print {
	.chatlog {
		border: 1px solid currentColor;
		page-break-inside: avoid;
	}

	.chatlog-message {
		page-break-inside: avoid;
	}

	.chatlog--bubbles .chatlog-body {
		background: var(--pfbt-format-chat-row-bg-even, transparent) !important;
		color: var(--pfbt-format-chat-fg, inherit) !important;
	}

	.chatlog-device-frame--phone,
	.chatlog-device-frame--desktop,
	.chatlog-device-frame--slack-app,
	.chatlog-device-frame--discord-app {
		background: none !important;
		box-shadow: none !important;

		&::before {
			display: none;
		}
	}
}