/**
 * Gameplay styles for WP LLM Live.
 *
 * Fixed-area agents, inline panels, image handling, slot booking,
 * turn status, player grid, game controls, score/inventory, AI demo,
 * agent debug, magic-link auth, showcase/archive, smart image gen,
 * layout modes, mobile breakpoints, and spectator waiting view.
 * Part of BACK-932 CSS split.
 *
 * @package WPLLMLive
 * @since BACK-932
 */

/* Fixed Area Agents */
.wpllmlive-fixed-areas {
	border-bottom: 1px solid #ddd;
	background-color: #fafafa;
}

.wpllmlive-agent-fixed-area {
	border-bottom: 1px solid #e0e0e0;
}

.wpllmlive-agent-fixed-area:last-child {
	border-bottom: none;
}

.wpllmlive-fixed-area-header {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	background-color: #fff3e0;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--transition-base);
}

.wpllmlive-fixed-area-header:hover,
.wpllmlive-fixed-area-header:focus {
	background-color: #ffe0b2;
	outline: none;
}

.wpllmlive-fixed-area-header:focus-visible {
	outline: 2px solid #e65100;
	outline-offset: -2px;
}

.wpllmlive-fixed-area-toggle {
	margin-right: 10px;
	font-size: var(--fs-base);
	color: #e65100;
	width: 16px;
}

.wpllmlive-fixed-area-name {
	font-weight: var(--fw-semibold);
	color: #e65100;
	flex: 1;
}

/* Focus states for keyboard navigation */
.wpllmlive-slot-card:focus-visible,
.wpllmlive-button:focus-visible,
.wpllmlive-message-input:focus-visible,
.wpllmlive-extend-time-button:focus-visible {
	outline: 3px solid #1976d2;
	outline-offset: 2px;
}

.wpllmlive-fixed-area-updated {
	font-size: var(--fs-sm);
	color: #757575; /* Improved contrast from #999 for WCAG AA */
	font-style: italic;
}

.wpllmlive-fixed-area-content {
	padding: 15px;
	overflow-y: auto;
	background-color: #fff;
	border-top: 1px solid #ffe0b2;
}

.wpllmlive-fixed-area-placeholder {
	text-align: center;
	color: #999;
	font-style: italic;
	padding: var(--space-5) 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.wpllmlive-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #ddd;
	border-top-color: #ff9800;
	border-radius: var(--radius-circle);
	animation: wpllmlive-spin 0.8s linear infinite;
}

@keyframes wpllmlive-spin {
	to {
		transform: rotate(360deg);
	}
}

.wpllmlive-status-text {
	font-size: var(--fs-lg);
}

.wpllmlive-fixed-area-content .wpllmlive-analysis-content {
	margin: 0;
}

/* Paragraph styles inherited from base .wpllmlive-analysis-content rules (BACK-128) */

/* Highlight effect when fixed area is updated */
.wpllmlive-fixed-area-updated-highlight {
	animation: fixedAreaPulse 1s ease-in-out;
}

@keyframes fixedAreaPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(255, 152, 0, 0);
	}
}

/* Inline Panel Styling */
.wpllmlive-inline-panel {
	margin: 15px 0;
	border: 1px solid #ddd;
	border-radius: var(--radius-xl);
	background: #f9f9f9;
	transition: box-shadow var(--transition-base);
}

.wpllmlive-inline-panel:hover {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wpllmlive-inline-panel-header {
	display: flex;
	align-items: center;
	padding: var(--space-2) var(--space-3);
	background: #f0f0f0;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--transition-base);
}

.wpllmlive-inline-panel-header:hover,
.wpllmlive-inline-panel-header:focus {
	background-color: #e8e8e8;
	outline: none;
}

.wpllmlive-inline-panel-header:focus-visible {
	outline: 2px solid #2196f3;
	outline-offset: -2px;
}

.wpllmlive-inline-panel-toggle {
	margin-right: 8px;
	transition: transform var(--transition-base);
	font-size: var(--fs-base);
	color: #666;
	width: 16px;
	display: inline-block;
}

.wpllmlive-inline-panel.collapsed .wpllmlive-inline-panel-toggle {
	transform: rotate(-90deg);
}

.wpllmlive-inline-panel.collapsed .wpllmlive-inline-panel-content {
	display: none;
}

.wpllmlive-inline-panel-name {
	font-weight: var(--fw-semibold);
	color: #333;
	flex: 1;
}

.wpllmlive-inline-panel-time {
	font-size: var(--fs-base);
	color: #999;
	margin-left: 8px;
}

.wpllmlive-inline-panel-status {
	font-size: var(--fs-base);
	color: #666;
	font-style: italic;
	margin-left: 8px;
}

.wpllmlive-inline-panel-content {
	padding: var(--space-3);
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
	background: #fff;
	/* Ensure scrollbar is visible */
	scrollbar-width: thin;
	scrollbar-color: #ccc #f0f0f0;
}

/* Image panels need more height to display full images */
.wpllmlive-inline-panel-content.wpllmlive-image-panel-content {
	max-height: 600px;
}

/* Webkit scrollbar styling for better visibility */
.wpllmlive-inline-panel-content::-webkit-scrollbar {
	width: 8px;
}

.wpllmlive-inline-panel-content::-webkit-scrollbar-track {
	background: #f0f0f0;
	border-radius: var(--radius-md);
}

.wpllmlive-inline-panel-content::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: var(--radius-md);
}

.wpllmlive-inline-panel-content::-webkit-scrollbar-thumb:hover {
	background: #999;
}

.wpllmlive-inline-panel-placeholder {
	text-align: center;
	color: #999;
	font-style: italic;
	padding: var(--space-5) 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.wpllmlive-inline-panel-processing {
	border-color: #ffa726;
	background: #fff8e1;
}

.wpllmlive-inline-panel-processing .wpllmlive-inline-panel-header {
	background: #ffe0b2;
}

/* Host Float: Image floated inside host message bubble */
.wpllmlive-host-float-image {
	float: right;
	width: 40%;
	max-width: 280px;
	margin: 0 0 12px 16px;
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.wpllmlive-host-float-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-xl);
}

.wpllmlive-host-float-image .wpllmlive-image-shimmer {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-xl);
}

/* Clear float after message content */
.wpllmlive-message-content:has(.wpllmlive-host-float-image)::after {
	content: '';
	display: table;
	clear: both;
}

/* On small screens, stack instead of float */
@media (max-width: 480px) {
	.wpllmlive-host-float-image {
		float: none;
		width: 100%;
		max-width: none;
		margin: 0 0 12px 0;
	}
}

/* Generated Image Styles */
.wpllmlive-generated-image-container {
	margin: 10px 0;
	position: relative;
	border-radius: var(--radius-xl);
	overflow: visible; /* Changed from hidden to allow full image display */
	background: #f5f5f5;
}

/* Apply border-radius to the image itself instead of clipping container */
.wpllmlive-generated-image-container .wpllmlive-generated-image {
	border-radius: var(--radius-xl);
}

/* Aspect ratio containers for layout stability during loading */
/* Applied to both image containers and placeholders */
/* Simplified with :is() */
:is(.wpllmlive-generated-image-container, .wpllmlive-image-placeholder)[data-aspect-ratio="1:1"] {
	aspect-ratio: 1 / 1;
}

:is(.wpllmlive-generated-image-container, .wpllmlive-image-placeholder)[data-aspect-ratio="16:9"] {
	aspect-ratio: 16 / 9;
}

:is(.wpllmlive-generated-image-container, .wpllmlive-image-placeholder)[data-aspect-ratio="9:16"] {
	aspect-ratio: 9 / 16;
	max-width: 350px;
}

:is(.wpllmlive-generated-image-container, .wpllmlive-image-placeholder)[data-aspect-ratio="4:3"] {
	aspect-ratio: 4 / 3;
}

:is(.wpllmlive-generated-image-container, .wpllmlive-image-placeholder)[data-aspect-ratio="3:4"] {
	aspect-ratio: 3 / 4;
	max-width: 350px;
}

.wpllmlive-generated-image-link {
	display: block;
	text-decoration: none;
	line-height: 0;
}

.wpllmlive-generated-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-xl);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.wpllmlive-generated-image-link:hover .wpllmlive-generated-image {
	transform: scale(1.02);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wpllmlive-generated-image-prompt {
	padding: 10px var(--space-3);
	background: #f0f0f0;
	border-top: 1px solid #e0e0e0;
	font-size: var(--fs-md);
	line-height: 1.5;
	color: #666;
}

.wpllmlive-generated-image-prompt strong {
	color: #333;
	font-weight: var(--fw-semibold);
}

.wpllmlive-generated-image-prompt span {
	font-style: italic;
}

/* Image quality rating thumbs-up button */
.wpllmlive-image-rate-btn {
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: var(--radius-circle);
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: var(--fs-xl);
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--transition-base), background var(--transition-base), transform var(--transition-fast);
	z-index: 2;
	padding: 0;
}

.wpllmlive-generated-image-container:hover .wpllmlive-image-rate-btn {
	opacity: 1;
}

.wpllmlive-image-rate-btn:hover {
	background: rgba(0, 0, 0, 0.7);
	transform: scale(1.1);
}

.wpllmlive-image-rate-btn.wpllmlive-image-rating-active {
	opacity: 1;
	background: #2e7d32;
}

.wpllmlive-image-rate-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	opacity: 1;
}

/* ASCII art mode */
.wpllmlive-ascii-art-container {
	margin: 10px 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: #1a1a2e;
}

.wpllmlive-ascii-art {
	margin: 0;
	padding: var(--space-4);
	font-family: 'Courier New', Courier, monospace;
	font-size: var(--fs-base);
	line-height: 1.2;
	color: #0f0;
	background: #1a1a2e;
	white-space: pre;
	overflow-x: auto;
	border: none;
}

/* Image policy refusal message */
.wpllmlive-image-policy-refusal {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px var(--space-5);
	background: #f5f5f5;
	border: 1px dashed #ccc;
	border-radius: var(--radius-xl);
	color: #666;
	font-size: var(--fs-lg);
}

.wpllmlive-image-policy-refusal .dashicons {
	font-size: var(--fs-3xl);
	width: 20px;
	height: 20px;
	color: #999;
}

/* Image generation error — collapsed single-line display (BACK-155) */
.wpllmlive-image-error-collapsed {
	margin: 4px 0;
	border: none;
}

.wpllmlive-image-error-collapsed summary {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	cursor: pointer;
	color: #c62828;
	font-size: var(--fs-base);
	list-style: none;
	user-select: none;
}

.wpllmlive-image-error-collapsed summary::-webkit-details-marker {
	display: none;
}

.wpllmlive-image-error-collapsed summary::after {
	content: ' ▸';
	font-size: var(--fs-xs);
	color: #999;
}

.wpllmlive-image-error-collapsed[open] summary::after {
	content: ' ▾';
}

.wpllmlive-image-error-expanded {
	margin-top: 6px;
	padding: 10px var(--space-3);
	background: #ffebee;
	border: 1px solid #ef5350;
	border-radius: var(--radius-lg);
	font-size: var(--fs-base);
	color: #333;
}

.wpllmlive-image-error-expanded .wpllmlive-image-error-message {
	color: #666;
	margin-bottom: 6px;
}

.wpllmlive-image-error-expanded .wpllmlive-image-error-prompt {
	margin-top: 6px;
	padding: 6px var(--space-2);
	background: #fff;
	border-radius: var(--radius-md);
	color: #555;
	word-break: break-word;
}

.wpllmlive-image-error-expanded .wpllmlive-image-error-prompt strong {
	display: block;
	margin-bottom: 2px;
	color: #444;
}

.wpllmlive-image-error-expanded .wpllmlive-image-error-api {
	margin-top: 6px;
	padding: 6px var(--space-2);
	background: #fff;
	border-radius: var(--radius-md);
}

.wpllmlive-image-error-expanded .wpllmlive-image-error-api code {
	white-space: pre-wrap;
	word-break: break-word;
	font-size: var(--fs-sm);
	color: #333;
}

/* Image loading placeholder */
.wpllmlive-image-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	background: linear-gradient(135deg, #f5f5f5 0%, #eee 100%);
	border-radius: var(--radius-xl);
	padding: 30px;
	text-align: center;
}

.wpllmlive-image-loading .wpllmlive-spinner {
	width: 32px;
	height: 32px;
	margin-bottom: 15px;
}

.wpllmlive-image-loading-text {
	color: #666;
	font-size: var(--fs-lg);
	font-style: italic;
}

/* =========================================================================
   GAMEPLAY MODE STYLES
   ========================================================================= */

/* Slot Booking Interface */
.wpllmlive-slot-booking {
	padding: 10px;
	background: var(--wp-chrome-bg);
	border-bottom: 1px solid var(--wp-border);
	margin-bottom: 0;
}

/* BACK-1408: the panel heading previously shared the muted label class. */
.wpllmlive-slot-booking-title {
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--wp-text);
	margin-bottom: 2px;
}


.wpllmlive-slots-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.wpllmlive-slot-card {
	--wpllmlive-slot-bg: #fff;
	--wpllmlive-slot-border: var(--wp-border);
	display: flex;
	align-items: center;
	gap: var(--space-1);
	background: var(--wpllmlive-slot-bg);
	border: 1px solid var(--wpllmlive-slot-border);
	border-radius: var(--radius-sm);
	padding: 2px 6px;
	cursor: pointer;
}

.wpllmlive-slot-card:hover:not(.wpllmlive-slot-occupied),
.wpllmlive-slot-card:focus:not(.wpllmlive-slot-occupied) {
	--wpllmlive-slot-border: var(--wp-blue);
	box-shadow: 0 0 0 1px var(--wp-blue);
	outline: none;
}

.wpllmlive-slot-card:focus-visible:not(.wpllmlive-slot-occupied) {
	outline: 2px solid var(--wp-blue);
	outline-offset: 2px;
}

.wpllmlive-slot-card.wpllmlive-slot-free { border-style: dashed; }
.wpllmlive-slot-card.wpllmlive-slot-occupied { --wpllmlive-slot-bg: #f5f5f5; cursor: default; }
.wpllmlive-slot-card.wpllmlive-slot-selected { --wpllmlive-slot-bg: #e8f5e9; --wpllmlive-slot-border: #4caf50; }
.wpllmlive-slot-card.wpllmlive-slot-yours { --wpllmlive-slot-bg: #fff3e0; --wpllmlive-slot-border: #ff9800; }
.wpllmlive-slot-card.wpllmlive-slot-ai { --wpllmlive-slot-bg: #fafafa; --wpllmlive-slot-border: #9e9e9e; }

/* AI Slot Claiming */
@keyframes pulse-claim {
	0%, 100% { border-color: #ff9800; box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4); }
	50% { border-color: #f57c00; box-shadow: 0 0 0 4px rgba(255, 152, 0, 0); }
}

.wpllmlive-slot-card.wpllmlive-slot-claimable {
	background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
	border-color: #ff9800;
	animation: pulse-claim 1.8s ease-in-out infinite;
	cursor: pointer;
}

.wpllmlive-slot-card.wpllmlive-slot-claimable:hover,
.wpllmlive-slot-card.wpllmlive-slot-claimable:focus {
	--wpllmlive-slot-border: #f57c00;
	box-shadow: 0 2px 8px rgba(255, 152, 0, 0.4);
	outline: none;
}

.wpllmlive-slot-card.wpllmlive-slot-claimable:focus-visible {
	outline: 2px solid #f57c00;
	outline-offset: 2px;
}

.wpllmlive-slot-card.wpllmlive-slot-ai-locked {
	--wpllmlive-slot-bg: #f0f0f0;
	--wpllmlive-slot-border: #bdbdbd;
	color: #9e9e9e;
	cursor: not-allowed;
	opacity: 0.7;
}

.wpllmlive-slot-number {
	color: #999;
	font-weight: var(--fw-semibold);
}

.wpllmlive-slot-name {
	font-weight: var(--fw-semibold);
	font-size: var(--fs-md);
	color: #333;
	margin-bottom: 2px;
}

.wpllmlive-slot-score {
	color: #4caf50;
	font-weight: var(--fw-semibold);
	/* BACK-1408: pin the score to the right of the card with room for a few
	   digits, so cards stay aligned as scores grow. */
	margin-left: auto;
	flex: none;
	min-width: 2.5ch;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Agent task placeholder (BUG-32) */
.wpllmlive-agent-placeholder {
	margin: 15px 0;
	padding: var(--space-3) var(--space-4);
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: var(--radius-md);
	display: none; /* Hidden by default; shown via JS with display:flex */
	align-items: center;
}

.wpllmlive-placeholder-content {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wpllmlive-placeholder-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #ffc107;
	border-top: 2px solid transparent;
	border-radius: var(--radius-circle);
	animation: wpllmlive-spin 1s linear infinite;
}

/* wpllmlive-spin keyframes defined once in Fixed Area Agents section */

.wpllmlive-placeholder-text {
	font-size: var(--fs-lg);
	color: #856404;
	font-weight: var(--fw-medium);
}

.wpllmlive-slot-status {
	font-size: var(--fs-base);
	color: #545454; /* Improved contrast from #666 for WCAG AA */
}

.wpllmlive-slot-status.available {
	color: #4caf50;
}

.wpllmlive-slot-status.taken {
	color: #f44336;
}

.wpllmlive-slot-status.ai {
	color: #9e9e9e;
}

.wpllmlive-book-slot-form {
	background: #fff;
	padding: 10px;
	border-radius: var(--radius-md);
	border: 1px solid #e0e0e0;
}

.wpllmlive-slot-form-row {
	display: flex;
	gap: var(--space-2);
	align-items: flex-end;
}

.wpllmlive-slot-form-row .wpllmlive-your-slot-info {
	display: flex;
	flex-direction: column;
	/* The generic .wpllmlive-your-slot-info centers its children; in this
	   column layout that centered the field labels over their inputs. */
	align-items: stretch;
}

.wpllmlive-slot-form-row .wpllmlive-field-name {
	flex: 2;
	min-width: 0;
}

.wpllmlive-slot-form-row .wpllmlive-field-desc {
	/* BACK-1408: was flex:3 — the Character (optional) field crowded the row
	   so it didn't fit; half its previous share. */
	flex: 1.5;
	min-width: 0;
}

.wpllmlive-slot-form-row .wpllmlive-game-controls {
	flex-shrink: 0;
	align-self: flex-end;
}

.wpllmlive-book-slot-form input[type="text"] {
	/* border-box: the plugin's fullscreen template has no theme reset, so a
	   content-box input at width:100% overflows its capped flex container
	   and rides under the neighboring field. */
	box-sizing: border-box;
	width: 100%;
	padding: 6px var(--space-2);
	border: 1px solid #ddd;
	border-radius: var(--radius-md);
}

.wpllmlive-book-slot-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 6px var(--space-2);
	border: 1px solid #ddd;
	border-radius: var(--radius-md);
	resize: none;
	overflow: hidden;
}

.wpllmlive-book-slot-form .required {
	color: #f44336;
}

/* Disclosure primitive: a collapsed summary line + plain-text lines,
   rendered server-side from message metadata (approved display vocabulary). */
.wpllmlive-disclosure {
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px dashed var(--wp-border);
	font-size: var(--fs-base);
	color: var(--wp-text-muted);
}
.wpllmlive-disclosure summary {
	cursor: pointer;
}
.wpllmlive-disclosure .wpllmlive-disclosure-lines {
	padding: 4px 0 0 22px;
}

/* BACK-1408: cap both booking fields on one-line layouts — halving the flex
   share alone would just hand the freed space to the other field. Display
   Name capped at half its former desktop width; Character keeps the size it
   already had after its own halving. Sub-400px stacking is unaffected. */
@media (min-width: 401px) {
	.wpllmlive-slot-form-row .wpllmlive-field-name {
		max-width: 14rem;
	}
	.wpllmlive-slot-form-row .wpllmlive-field-desc {
		max-width: 21rem;
	}
}

@media (max-width: 400px) {
	.wpllmlive-slot-form-row {
		flex-wrap: wrap;
	}
	.wpllmlive-slot-form-row .wpllmlive-field-name,
	.wpllmlive-slot-form-row .wpllmlive-field-desc {
		flex: 1 1 100%;
	}
}

/* Turn Status Panel - Made sticky for always-visible game state */
.wpllmlive-turn-status {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px var(--space-3);
	background: var(--wp-chrome-bg);
	border-bottom: 1px solid var(--wp-border);
	margin-bottom: 0;
	align-items: center;
	/* Sticky positioning so header stays visible while scrolling */
	/* Removed sticky positioning because container is now bounded by 80vh and doesn't scroll externally */
	position: relative;
	z-index: 10;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* BACK-1408: Round shares the top line with the To Lobby button (right-aligned),
   and Current Turn reads on its own line beneath — a calm two-line header.
   The round counter hugs the right side (before To Lobby) instead of
   stretching, so the top line reads [theme][game-ends]…[Round N][To Lobby]. */
.wpllmlive-turn-status .wpllmlive-round-info {
	flex: 0 0 auto;
	order: 1;
	margin-left: auto;
}
.wpllmlive-turn-status .wpllmlive-game-controls {
	order: 2;
	margin-left: auto;
}
.wpllmlive-turn-status .wpllmlive-turn-info {
	flex: 0 0 100%;
	order: 3;
}

/* BACK-1408: the "Player Status" summary label is redundant (the cards speak
   for themselves) — hide it visually but keep it for assistive tech; the grid
   stays open via the <details open> markup. Specificity beats the mobile
   touch-target rule (.wpllmlive-chat-interface summary), and min-height:0
   undoes its 44px floor so the label collapses fully. */
.wpllmlive-chat-interface .wpllmlive-players-grid-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	min-height: 0;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wpllmlive-round-info {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.wpllmlive-round-label {
	font-size: var(--fs-base);
	color: var(--wp-text-muted);
	text-transform: uppercase;
}

.wpllmlive-round-number {
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	color: var(--wp-blue);
	line-height: 1;
}

/* Round title display (theme, location, challenge, etc.) */
.wpllmlive-round-title-info {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.7);
	padding: 6px 14px;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(25, 118, 210, 0.2);
}

.wpllmlive-round-title-name {
	font-weight: var(--fw-semibold);
	color: #1565c0;
	font-size: 15px; /* no token: between --fs-lg (14px) and --fs-xl (16px) */
}

/* Game end condition display */
.wpllmlive-game-ends-info {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-md);
	color: #555;
	background: rgba(255, 255, 255, 0.6);
	padding: 6px var(--space-3); /* same vertical padding as the round-title chip */
	border-radius: var(--radius-lg);
	border: 1px solid rgba(0, 0, 0, 0.08);
}

.wpllmlive-game-ends-icon {
	font-size: var(--fs-lg);
}

.wpllmlive-game-ends-text {
	font-weight: var(--fw-medium);
	color: #333;
}

.wpllmlive-turn-info {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.wpllmlive-turn-label {
	font-size: var(--fs-base);
	color: var(--wp-text-muted);
}

.wpllmlive-turn-player {
	font-weight: var(--fw-semibold);
	color: var(--wp-text);
}

.wpllmlive-turn-player.your-turn {
	color: #4caf50;
	font-size: var(--fs-md);
}

.wpllmlive-your-slot-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1;
}

.wpllmlive-your-slot-label {
	font-size: var(--fs-base);
	color: var(--wp-text-muted);
}

.wpllmlive-your-slot-name {
	font-weight: var(--fw-semibold);
	color: #ff9800;
}

/* BACK-996: "Slot Available!" is a clickable booking trigger */
.wpllmlive-your-slot-name[data-has-slot="true"] {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: dotted;
}

.wpllmlive-your-slot-name[data-has-slot="true"]:hover {
	color: #e65100;
}

/* BACK-996: Inline booking form inside the Your Slot area */
.wpllmlive-inline-booking-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}

.wpllmlive-inline-booking-name {
	font-size: var(--fs-sm, 0.75rem);
	padding: 2px 6px;
	border: 1px solid #bbb;
	border-radius: var(--radius-sm, 3px);
	width: 10rem;
	max-width: 100%;
}

.wpllmlive-inline-booking-cancel {
	background: transparent;
	border-color: transparent;
	color: var(--wp-text-muted);
	padding: 2px 4px;
	min-width: 0;
}

.wpllmlive-inline-booking-error {
	display: block;
	width: 100%;
	font-size: var(--fs-sm, 0.75rem);
	color: #c0392b;
	margin-top: 2px;
}

/* Players Grid */
/* BACK-1408: a packed, fixed-size grid — two cards per row, each "PN: Name
   Score", with the score right-aligned and room for a few digits. */
.wpllmlive-players-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	padding: var(--space-2);
	background: #f5f5f5;
	border-radius: var(--radius-md);
	margin-bottom: 0;
}

/* Player Slot Cards — inline "P1: Name Score" layout */
.wpllmlive-player-slot {
	--wpllmlive-card-border: #e0e0e0;
	--wpllmlive-card-bg: #fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-1);
	padding: 4px 8px;
	background: var(--wpllmlive-card-bg);
	border: 1px solid var(--wpllmlive-card-border);
	border-radius: var(--radius-md);
	min-width: 0; /* let the grid cell constrain the card, so the name ellipsizes */
}

/* The seat's colour on the chip, so the chip row is the key to the bubbles. */
.wpllmlive-player-slot {
	border-left: 4px solid var(--wpllmlive-seat-accent, var(--wpllmlive-card-border));
}

.wpllmlive-player-slot .wpllmlive-slot-name {
	color: #333;
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	margin-bottom: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wpllmlive-player-slot.wpllmlive-current-player {
	--wpllmlive-card-border: #4caf50;
	--wpllmlive-card-bg: #e8f5e9;
	animation: pulse-turn 1.5s infinite;
	will-change: box-shadow;
}

.wpllmlive-player-slot.wpllmlive-user-slot { --wpllmlive-card-border: #ff9800; --wpllmlive-card-bg: #fff3e0; }
.wpllmlive-player-slot.wpllmlive-ai-slot { --wpllmlive-card-border: #9e9e9e; --wpllmlive-card-bg: #fafafa; }

.wpllmlive-player-slot.wpllmlive-empty-slot {
	border-style: dashed;
	opacity: 0.6;
}

/* Turn Status Panel Enhancements */
.wpllmlive-turn-status .wpllmlive-turn-player.wpllmlive-your-turn {
	color: #4caf50;
	font-weight: var(--fw-bold);
	animation: pulse-text 1s infinite;
	will-change: opacity;
}

/* Waiting for Players (Lobby Mode) */
.wpllmlive-turn-status .wpllmlive-turn-player.wpllmlive-waiting-for-players {
	color: #ff9800;
	font-weight: var(--fw-normal);
	font-style: italic;
	animation: waiting-pulse 2s infinite;
	will-change: opacity;
}

@keyframes waiting-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

@keyframes pulse-text {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

/* Hidden Messages (Simultaneous Reveal Mode) */
.wpllmlive-message.wpllmlive-message-hidden {
	background-color: #f5f5f5 !important;
	border: 2px dashed #ccc;
	opacity: 0.8;
}

.wpllmlive-message.wpllmlive-message-hidden .wpllmlive-message-content {
	color: #666;
	font-style: italic;
	text-align: center;
	padding: 15px 10px;
}

.wpllmlive-hidden-lock {
	font-size: 1.5em;
	margin-right: 5px;
	display: inline-block;
	animation: lock-pulse 1.5s ease-in-out infinite;
	will-change: transform;
}

@keyframes lock-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

/* Reveal Animation */
.wpllmlive-message.wpllmlive-message-revealing {
	animation: reveal-message 0.6s ease-out;
	will-change: opacity, transform;
}

@keyframes reveal-message {
	0% {
		opacity: 0;
		transform: scale(0.95);
		background-color: #fff9c4 !important;
	}
	50% {
		background-color: #fff59d !important;
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}


/* Gameplay Mode Input Disabled State */
.wpllmlive-gameplay-mode .wpllmlive-message-form.turn-disabled {
	opacity: 0.7;
}

.wpllmlive-gameplay-mode .wpllmlive-message-form.turn-disabled input,
.wpllmlive-gameplay-mode .wpllmlive-message-form.turn-disabled button {
	cursor: not-allowed;
}

.wpllmlive-gameplay-mode .wpllmlive-turn-waiting-message {
	text-align: center;
	padding: 10px;
	color: #666;
	font-style: italic;
}

/* BACK-260: Gameplay error message display */
.wpllmlive-gameplay-error {
	display: none;
	padding: 10px 14px;
	margin: 8px 0;
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-radius: var(--radius-lg);
	color: #991b1b;
	font-size: var(--fs-lg);
	line-height: 1.4;
}

/* AI Player Message Styling */
.wpllmlive-ai-player {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: var(--fw-semibold);
	color: #9e9e9e;
}

.wpllmlive-ai-player::before {
	content: "🤖";
	font-size: var(--fs-base);
}

.wpllmlive-timeout {
	color: #f44336;
}

.wpllmlive-player-name {
	font-weight: var(--fw-semibold);
	color: #1976d2;
}

/* Button Styles for Gameplay */
.wpllmlive-button-small {
	padding: var(--space-1) 10px !important;
	font-size: var(--fs-base) !important;
}

/* Game Controls (End Game, Restart) */
.wpllmlive-game-controls {
	display: flex;
	gap: var(--space-1);
	margin-left: auto;
	align-items: center;
}

/* =========================================================================
   GAME STATE: SCORE & INVENTORY DISPLAY
   ========================================================================= */

/* Player Score Display */
.wpllmlive-player-score {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: #1976d2;
	background: #e3f2fd;
	padding: 2px var(--space-2);
	border-radius: 10px; /* no token: score pill badge, between --radius-xl and --radius-2xl */
	margin-top: 5px;
}

/* Player Inventory Display */
.wpllmlive-player-inventory {
	font-size: var(--fs-xs);
	color: #666;
	margin-top: 4px;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Highlight score when changed */
.wpllmlive-player-card .wpllmlive-player-score.score-changed {
	animation: score-pulse 0.5s ease;
}

@keyframes score-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.2); background: #4caf50; color: #fff; }
}

/* Winning score highlight */
.wpllmlive-player-card.wpllmlive-winner .wpllmlive-player-score {
	background: #ffd700;
	color: #333;
	font-size: var(--fs-base);
}

/* Inventory item badge style */
.wpllmlive-inventory-badge {
	display: inline-block;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: var(--radius-md);
	padding: 1px 5px;
	font-size: var(--fs-xs);
	margin: 1px;
}

/* Expanded inventory panel (for detailed view) */
.wpllmlive-inventory-expanded {
	position: absolute;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: var(--radius-xl);
	padding: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 100;
	min-width: 150px;
	max-width: 250px;
}

.wpllmlive-inventory-expanded-header {
	font-weight: var(--fw-semibold);
	margin-bottom: 8px;
	padding-bottom: var(--space-2);
	border-bottom: 1px solid #eee;
}

.wpllmlive-inventory-expanded-items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

/* Score Leaderboard Display (optional) */
.wpllmlive-scores-leaderboard {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: 10px;
	background: #f9f9f9;
	border-radius: var(--radius-xl);
	margin-bottom: 10px;
}

.wpllmlive-score-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 10px;
	background: #fff;
	border-radius: var(--radius-md);
}

.wpllmlive-score-row.leading {
	background: #e8f5e9;
	border: 1px solid #4caf50;
}

.wpllmlive-score-row .player-name {
	font-weight: var(--fw-medium);
}

.wpllmlive-score-row .player-score {
	font-weight: var(--fw-bold);
	color: #1976d2;
}

/* =========================================================================
   AI-ONLY DEMO MODE STYLES
   ========================================================================= */

/* AI Demo Start Interface */
.wpllmlive-ai-demo-start {
	padding: 30px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: var(--radius-2xl);
	text-align: center;
	color: #fff;
}

.wpllmlive-ai-demo-banner {
	margin-bottom: 25px;
}

.wpllmlive-ai-demo-icon {
	font-size: 48px;
	display: block;
	margin-bottom: 10px;
}

.wpllmlive-ai-demo-start h3 {
	margin: 0 0 10px 0;
	color: #fff;
	font-size: 24px; /* no token: display heading above --fs-3xl (20px) */
}

.wpllmlive-ai-demo-description {
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--fs-xl);
	max-width: 400px;
	margin: 0 auto;
}

/* AI Players Preview */
.wpllmlive-ai-players-preview {
	margin-bottom: 25px;
}

.wpllmlive-ai-players-grid {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
}

.wpllmlive-ai-player-card {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 10px; /* no token: AI player card, between --radius-xl and --radius-2xl */
	padding: 15px var(--space-5);
	min-width: 140px;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.wpllmlive-ai-player-icon {
	font-size: 32px;
	margin-bottom: 8px;
}

.wpllmlive-ai-player-name {
	font-weight: var(--fw-semibold);
	font-size: var(--fs-lg);
	margin-bottom: 5px;
}

.wpllmlive-ai-player-persona {
	font-size: var(--fs-base);
	color: rgba(255, 255, 255, 0.8);
	font-style: italic;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Start AI Game Button */
.wpllmlive-start-ai-game-btn {
	background: #4caf50 !important;
	color: #fff !important;
	padding: 15px var(--space-10) !important;
	font-size: var(--fs-2xl) !important;
	border-radius: 30px !important; /* no token: large CTA pill button override, intentional */
	box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
	transition: all 0.3s ease !important;
}

.wpllmlive-start-ai-game-btn:hover {
	background: #43a047 !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5);
}

.wpllmlive-start-ai-game-btn:disabled {
	background: #9e9e9e !important;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.wpllmlive-start-icon {
	margin-right: 8px;
}

/* =========================================================================
   AGENT DEBUG MODE STYLES
   ========================================================================= */

.wpllmlive-agent-debug {
	margin-top: 15px;
	border-top: 1px dashed #ddd;
	padding-top: 10px;
}

.wpllmlive-agent-debug-toggle {
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: var(--radius-md);
	padding: 6px var(--space-3);
	font-size: var(--fs-base);
	cursor: pointer;
	color: #666;
	transition: all var(--transition-base);
}

.wpllmlive-agent-debug-toggle:hover {
	background: #eee;
	color: #333;
}

.wpllmlive-agent-debug-content {
	margin-top: 10px;
	background: #1e1e1e;
	color: #d4d4d4;
	border-radius: var(--radius-lg);
	padding: 15px;
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	font-size: var(--fs-base);
	line-height: 1.5;
	overflow-x: auto;
}

.wpllmlive-agent-debug-header {
	color: #569cd6;
	font-weight: var(--fw-bold);
	margin-bottom: 10px;
}

.wpllmlive-agent-debug-footer {
	color: #569cd6;
	font-weight: var(--fw-bold);
	margin-top: 10px;
	margin-bottom: 0;
}

.wpllmlive-agent-debug-section {
	margin-bottom: 15px;
}

.wpllmlive-agent-debug-section strong {
	color: #f5f5f5; /* Light gray for better readability */
	display: inline;
	margin-bottom: 0;
	font-size: var(--fs-md);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.wpllmlive-debug-subtitle {
	display: block;
	color: #9ca3af; /* Muted gray for subtitle */
	font-size: var(--fs-sm);
	font-weight: var(--fw-normal);
	font-style: italic;
	margin-bottom: 8px;
	margin-top: 2px;
}

.wpllmlive-agent-debug-pre {
	background: #2d2d2d;
	border: 1px solid #3d3d3d;
	border-radius: var(--radius-md);
	padding: 10px;
	margin: 0;
	white-space: pre-wrap;
	word-wrap: break-word;
	max-height: 300px;
	overflow-y: auto;
	color: #ce9178;
}

/* =========================================================================
   MAGIC LINK AUTHENTICATION STYLES
   ========================================================================= */

/* Magic Link Section in Spectator Banner */
.wpllmlive-magic-link-section {
	width: 100%;
	max-width: 400px;
}

.wpllmlive-magic-link-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.wpllmlive-or-divider {
	color: #6c757d;
	font-size: var(--fs-base);
	text-transform: lowercase;
}

/* Magic Link Form */
.wpllmlive-magic-link-form {
	background: #fff;
	border-radius: var(--radius-md);
	padding: 10px;
	margin-top: 8px;
	border: 1px solid #e0e0e0;
	text-align: left;
}


.wpllmlive-magic-link-fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: 8px;
}

.wpllmlive-field-group {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wpllmlive-field-group label {
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	color: #333;
}

.wpllmlive-field-group label .required {
	color: #e53935;
}

.wpllmlive-field-group input[type="text"],
.wpllmlive-field-group input[type="email"] {
	padding: 6px var(--space-2);
	border: 1px solid #ddd;
	border-radius: var(--radius-md);
	font-size: var(--fs-base);
}

.wpllmlive-field-group input[type="text"]:focus,
.wpllmlive-field-group input[type="email"]:focus {
	outline: none;
	border-color: #0073aa;
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

.wpllmlive-magic-link-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.wpllmlive-cancel-magic-form {
	background: #f5f5f5 !important;
	color: #666 !important;
}

.wpllmlive-cancel-magic-form:hover {
	background: #e0e0e0 !important;
}

/* Message Display */
.wpllmlive-magic-link-message {
	margin-top: 8px;
	padding: 6px var(--space-2);
	border-radius: var(--radius-md);
	font-size: var(--fs-base);
}

.wpllmlive-magic-link-message.success {
	background: #e8f5e9;
	color: #2e7d32;
	border: 1px solid #a5d6a7;
}

.wpllmlive-magic-link-message.error {
	background: #ffebee;
	color: #c62828;
	border: 1px solid #ef9a9a;
}

/* Success State (Link Sent) */
.wpllmlive-magic-link-sent {
	background: #e8f5e9;
	border-radius: var(--radius-md);
	padding: 10px;
	margin-top: 8px;
	text-align: center;
}

.wpllmlive-magic-sent-icon {
	font-size: 24px; /* no token: icon/emoji size above --fs-3xl (20px) */
	display: block;
	margin-bottom: 6px;
}

.wpllmlive-magic-sent-message {
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: #2e7d32;
	margin: 0 0 4px 0;
}

.wpllmlive-magic-sent-hint {
	font-size: var(--fs-base);
	color: #558b2f;
	margin: 0 0 8px 0;
}

.wpllmlive-resend-magic-link {
	background: #fff !important;
	color: #2e7d32 !important;
	border: 1px solid #a5d6a7 !important;
}

.wpllmlive-resend-magic-link:hover {
	background: #f1f8e9 !important;
}

/* Magic Auth Mode - Logged In Indicator */
.wpllmlive-magic-auth-indicator {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--space-2) 15px;
	background: #e3f2fd;
	border-radius: var(--radius-lg);
	margin-bottom: 10px;
}

.wpllmlive-magic-auth-indicator .wpllmlive-magic-icon {
	font-size: var(--fs-xl);
}

.wpllmlive-magic-auth-indicator .wpllmlive-magic-name {
	font-weight: var(--fw-medium);
	color: #1976d2;
}

.wpllmlive-magic-auth-indicator .wpllmlive-magic-logout {
	margin-left: auto;
	font-size: var(--fs-base);
	color: #666;
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}

.wpllmlive-magic-auth-indicator .wpllmlive-magic-logout:hover {
	color: #c62828;
}

/* Magic Auth Bar — identity + logout inside input area */
.wpllmlive-magic-auth-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px var(--space-3);
	background: #e3f2fd;
	border-radius: var(--radius-md);
	margin-bottom: 8px;
	font-size: var(--fs-md);
}

.wpllmlive-magic-auth-identity {
	flex: 1;
	color: #1976d2;
}
.wpllmlive-magic-logout {
	font-size: var(--fs-base);
	color: #0073aa; /* Improved contrast from #666 for WCAG AA */
	text-decoration: underline;
}

.wpllmlive-magic-logout-button {
	font: inherit;
	cursor: pointer;
	background: none;
	border: none;
	padding: 2px var(--space-1);
	/* BACK-1333: explicit accessible colour — was inheriting the composer's text
	   colour and rendering white-on-white on the light auth bar. */
	color: #0073aa;
	text-decoration: underline;
}

.wpllmlive-magic-logout-button:hover {
	color: #c62828;
}

.wpllmlive-magic-logout-button:disabled {
	color: #999;
	cursor: default;
	text-decoration: none;
}

/* Returning Player Link */
.wpllmlive-returning-link {
	background: none;
	border: none;
	color: #0073aa;
	font-size: var(--fs-base);
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

.wpllmlive-returning-link:hover {
	color: #005177;
}

.wpllmlive-returning-message {
	margin-top: 8px;
	padding: 6px var(--space-2);
	border-radius: var(--radius-md);
	font-size: var(--fs-base);
}

.wpllmlive-returning-message.success {
	background: #e8f5e9;
	color: #2e7d32;
	border: 1px solid #a5d6a7;
}

.wpllmlive-returning-message.error {
	background: #ffebee;
	color: #c62828;
	border: 1px solid #ef9a9a;
}

/* Loading State */
.wpllmlive-magic-link-form.loading .wpllmlive-button-text {
	display: none;
}

.wpllmlive-magic-link-form.loading .wpllmlive-button-loading {
	display: inline !important;
}

.wpllmlive-magic-link-form.loading button[type="submit"] {
	opacity: 0.7;
	cursor: wait;
}

/* Auth Success Flash */
.wpllmlive-auth-success-flash {
	position: absolute;
	top: 20px;
	right: 20px;
	background: #4caf50;
	color: #fff;
	padding: 15px 25px;
	border-radius: var(--radius-xl);
	box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
	z-index: 100;
	animation: slideInRight 0.3s ease, fadeOut 0.3s ease 2.7s;
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/* =========================================================================
   Showcase Mode (Archived Sessions)
   ========================================================================= */

/* Showcase Selector Dropdown */
.wpllmlive-showcase-selector {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-5);
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.wpllmlive-showcase-label {
	color: #fff;
	font-weight: var(--fw-semibold);
	font-size: var(--fs-lg);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.wpllmlive-showcase-dropdown {
	flex: 1;
	max-width: 350px;
	padding: 10px var(--space-10) 10px 15px;
	font-size: 15px; /* no token: between --fs-lg (14px) and --fs-xl (16px) */
	font-weight: var(--fw-medium);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-xl);
	background: rgba(255, 255, 255, 0.95);
	color: #333;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	transition: all var(--transition-base);
}

.wpllmlive-showcase-dropdown:hover {
	border-color: rgba(255, 255, 255, 0.6);
	background: #fff;
}

.wpllmlive-showcase-dropdown:focus {
	outline: none;
	border-color: #fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* =========================================================================
   ARCHIVE & REPLAY
   ========================================================================= */

/* Archived Games Selector Dropdown (for game pages) */
.wpllmlive-archived-selector {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 6px var(--space-3);
	background: var(--wp-chrome-bg);
	border-bottom: 1px solid var(--wp-border);
}

.wpllmlive-archived-label {
	color: var(--wp-text);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-base);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.wpllmlive-archived-dropdown {
	flex: 1;
	max-width: 320px;
	padding: var(--space-1) 28px var(--space-1) var(--space-2);
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	border: 1px solid var(--wp-border);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.95);
	color: var(--wp-text);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233b82f6' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	transition: all var(--transition-base);
}

.wpllmlive-archived-dropdown:hover {
	border-color: var(--wp-blue);
}

.wpllmlive-archived-dropdown:focus {
	outline: none;
	border-color: var(--wp-blue);
	box-shadow: 0 0 0 1px var(--wp-blue);
}

/* Debug Panel — rendered by tmpl-wpllmlive-message-debug template */
.wpllmlive-debug-panel {
	padding: var(--space-2);
	font-size: var(--fs-base);
	max-height: 400px;
	overflow: auto;
}

.wpllmlive-debug-pre {
	white-space: pre-wrap;
	max-height: 200px;
	overflow: auto;
}

/* Session debug pill — visible to all users when debug_mode is on */
.wpllmlive-session-pill {
	color: #666;
	text-transform: uppercase;
	padding: 2px var(--space-2);
}

/* Admin Debug Toolbar — combined session info + actions */
.wpllmlive-admin-debug-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-1) var(--space-3);
	background: #f5f5f5;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.wpllmlive-admin-debug-info {
	color: #666;
	text-transform: uppercase;
}

.wpllmlive-admin-debug-actions {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.wpllmlive-debug-snapshot-btn,
.wpllmlive-debug-state-toggle {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px var(--space-2);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	color: #666;
	background: rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.wpllmlive-debug-snapshot-btn:hover,
.wpllmlive-debug-state-toggle:hover {
	color: #333;
	background: rgba(0, 0, 0, 0.1);
	border-color: rgba(0, 0, 0, 0.25);
}

.wpllmlive-debug-snapshot-btn:disabled {
	opacity: 0.7;
	cursor: wait;
}

.wpllmlive-debug-icon {
	font-size: var(--fs-base);
}

.wpllmlive-debug-label {
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* Collapsible debug state panel */
.wpllmlive-debug-state-panel {
	background: #eee;
	padding: var(--space-1) var(--space-3);
	color: #666;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.wpllmlive-debug-state-table {
	border-collapse: collapse;
	width: 100%;
}

.wpllmlive-debug-state-table td {
	padding: 1px 6px;
	white-space: nowrap;
}

.wpllmlive-debug-state-label {
	color: #999;
	font-weight: var(--fw-bold);
	text-transform: uppercase;
}

/* Archive Button - Success variant (green) */
.wpllmlive-button-success {
	background: var(--wp-success);
	border-color: var(--wp-success);
	color: #fff;
}

.wpllmlive-button-success:hover {
	background: #008a20;
	border-color: #008a20;
}

/* Viewing Archive Mode - Disable interactivity */
.wpllmlive-viewing-archive .wpllmlive-chat-input-area,
.wpllmlive-viewing-archive .wpllmlive-slot-booking {
	display: none !important;
}

.wpllmlive-viewing-archive .wpllmlive-game-controls {
	opacity: 0.5;
	pointer-events: none;
}

/* Visual indicator for viewing archived game */
.wpllmlive-viewing-archive .wpllmlive-chat-messages::before {
	content: "📁 Viewing Archived Game";
	display: block;
	padding: var(--space-2) var(--space-4);
	margin-bottom: 16px;
	background: #fef3c7;
	color: #92400e;
	font-size: var(--fs-md);
	font-weight: var(--fw-medium);
	text-align: center;
	border-radius: var(--radius-lg);
	border: 1px solid #fcd34d;
}

/* Static Mode Styles - Hide interactive elements */
/* Simplified with :is() */
.wpllmlive-static-mode :is(
	.wpllmlive-spectator-banner,
	.wpllmlive-identity-form,
	.wpllmlive-slot-booking,
	.wpllmlive-chat-input-area,
	.wpllmlive-game-controls,
	.wpllmlive-rate-limit-warning,
	.wpllmlive-ai-demo-start
) {
	display: none !important;
}

/* Static mode appearance tweaks */
.wpllmlive-static-mode {
	border-color: #dee2e6;
}

.wpllmlive-static-mode .wpllmlive-chat-container {
	border-top: none;
}

/* Showcase mode with multiple sessions - make scrollable area taller */
.wpllmlive-showcase-mode .wpllmlive-chat-messages {
	min-height: 500px;
}

/* Loading state for showcase switching */
.wpllmlive-showcase-loading .wpllmlive-chat-messages {
	opacity: 0.5;
	pointer-events: none;
}

.wpllmlive-showcase-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #667eea;
	border-radius: var(--radius-circle);
	animation: wpllmlive-spin 1s linear infinite;
}

/* wpllmlive-spin keyframes defined once in Fixed Area Agents section */


/* ============================================
 * Smart Image Generation Styles
 * ============================================ */

@keyframes wpllmlive-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Image fade-in animation */
.wpllmlive-generated-image-container img {
	opacity: 0;
	transition: opacity 0.3s ease-in;
}

.wpllmlive-generated-image-container img.wpllmlive-image-loaded {
	opacity: 1;
}

/* Thumbnail mode */
.wpllmlive-image-thumbnail {
	max-width: 150px;
	max-height: 150px;
	cursor: pointer;
	border-radius: var(--radius-lg);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wpllmlive-image-thumbnail:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Lightbox for expanded image view */
.wpllmlive-image-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	cursor: pointer;
	animation: wpllmlive-lightbox-fadein 0.2s ease;
}

@keyframes wpllmlive-lightbox-fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}

.wpllmlive-image-lightbox img {
	max-width: 90vw;
	max-height: 90vh;
	border-radius: var(--radius-xl);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.wpllmlive-image-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 32px;
	color: #fff;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity var(--transition-base);
	background: none;
	border: none;
	padding: var(--space-2);
	line-height: 1;
}

.wpllmlive-image-lightbox-close:hover,
.wpllmlive-image-lightbox-close:focus {
	opacity: 1;
	outline: none;
}

.wpllmlive-image-lightbox-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ==========================================================================
   Image Generation Placeholder
   Shows shimmer + spinner while async image generation is in progress.
   Uses data-aspect-ratio to match final image dimensions.
   ========================================================================== */

.wpllmlive-image-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: wpllmlive-shimmer 1.5s infinite;
	will-change: background-position;
	border-radius: var(--radius-xl);
}

/* When aspect ratio is set, use it instead of min-height for proper sizing */
.wpllmlive-image-placeholder[data-aspect-ratio] {
	min-height: auto;
}

.wpllmlive-image-placeholder-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #e0e0e0;
	border-top-color: #666;
	border-radius: var(--radius-circle);
	animation: wpllmlive-spin 1s linear infinite;
	will-change: transform;
}

.wpllmlive-image-placeholder-text {
	margin-top: 12px;
	color: #666;
	font-size: var(--fs-lg);
}

/* wpllmlive-shimmer keyframes defined once in Smart Image Generation section */

/* Placeholder message styling */
.wpllmlive-message.wpllmlive-is-placeholder {
	opacity: 0.9;
}

/* ==========================================================================
   Layout Modes — controlled via [wpllmlive_session layout="compact|minimal"]
   ========================================================================== */

/* Compact layout: tighter spacing, smaller text */
.wpllmlive-layout-compact .wpllmlive-message {
	padding: 6px 10px;
	margin-bottom: 4px;
	font-size: var(--fs-lg);
	line-height: 1.4;
}

.wpllmlive-layout-compact .wpllmlive-message-author {
	font-size: var(--fs-xs);
	margin-bottom: 2px;
}

.wpllmlive-layout-compact .wpllmlive-chat-messages {
	padding: 10px;
}

.wpllmlive-layout-compact .wpllmlive-players-grid {
	padding: 6px;
}

/* Minimal layout: messages only, no player grid */
.wpllmlive-layout-minimal .wpllmlive-players-grid-container {
	display: none;
}

.wpllmlive-layout-minimal .wpllmlive-turn-status {
	display: none;
}

.wpllmlive-layout-minimal .wpllmlive-message {
	padding: var(--space-2) var(--space-3);
	margin-bottom: 6px;
	--wpllmlive-msg-margin-left: 0;
	--wpllmlive-msg-margin-right: 0;
}

/* ==========================================================================
   Mobile Responsive Breakpoints
   ========================================================================== */

@media (max-width: 768px) {

	/* Message bubbles — reduce side margins via custom properties */
	.wpllmlive-message-user { --wpllmlive-msg-margin-left: 5%; }
	.wpllmlive-message-llm { --wpllmlive-msg-margin-right: 5%; }
	.wpllmlive-message-agent { --wpllmlive-msg-margin-right: 5%; }

	/* Chat area — tighten padding */
	.wpllmlive-chat-messages {
		padding: var(--space-3);
		font-size: var(--fs-lg);
	}

	.wpllmlive-chat-input-area {
		padding: 10px var(--space-3);
	}

	.wpllmlive-message {
		padding: 10px;
		font-size: var(--fs-lg);
	}

	/* BACK-564: Turn status bar — stack vertically on mobile */
	.wpllmlive-turn-status {
		padding: var(--space-2);
		flex-wrap: wrap;
		gap: 6px;
	}

	.wpllmlive-turn-info {
		flex: 0 0 100%;
		order: 1;
	}

	/* BACK-1408: keep the packed two-per-row grid on mobile too (replaces the
	   old horizontal-scroll strip), so scores stay visible without sideways
	   scrolling. */
	.wpllmlive-players-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow-x: visible;
	}

	.wpllmlive-player-slot {
		min-width: 0;
	}

	.wpllmlive-player-slot .wpllmlive-slot-name {
		max-width: none;
	}

	/* Slots grid — already flex-wrap, no change needed on mobile */

	/* Model dropdown — fit mobile width */
	.wpllmlive-model-dropdown {
		min-width: 0;
		width: 100%;
	}

	/* Transcript view — reduce padding */
	.wpllmlive-transcript {
		padding: var(--space-3);
	}

	/* Chess clock — full width row, larger font on mobile */
	.wpllmlive-chess-clock-container {
		flex: 0 0 100%;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	.wpllmlive-chess-clock {
		font-size: 1.4em;
		min-width: 80px;
	}

	/* Images — prevent overflow on portrait aspect ratios */
	[data-aspect-ratio="9:16"],
	[data-aspect-ratio="3:4"] {
		max-width: 100%;
	}

	/* BACK-562: Full-viewport mobile layout — fill screen and hide WP admin bar */
	.wpllmlive-chat-interface {
		width: 100vw;
		max-width: 100vw;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		box-sizing: border-box;
		overflow: hidden;
		height: 100dvh;
		border-radius: 0;
		margin-top: 0;
		--wpllmlive-chat-height: 0px;
		font-size: var(--fs-lg);
	}

	/* BACK-567: Font size accessibility — 14px minimum body text on mobile */
	.wpllmlive-message-author,
	.wpllmlive-message-timestamp,
	.wpllmlive-button-small {
		font-size: var(--fs-md) !important;
	}

	body.wpllmlive-gameplay-active #wpadminbar {
		display: none;
	}

	body.wpllmlive-gameplay-active {
		margin-top: 0 !important;
	}

	/* Touch targets — 44px minimum for all interactive elements (WCAG 2.5.8) */
	.wpllmlive-button,
	.wpllmlive-button-small,
	.wpllmlive-chat-interface button,
	.wpllmlive-chat-interface summary,
	.wpllmlive-slot-book-button,
	.wpllmlive-player-status-toggle summary,
	.wpllmlive-turn-status button,
	.wpllmlive-debug-panel button {
		min-height: 44px;
		padding: 10px var(--space-4);
	}

	/* BACK-1408: the two corner control buttons (dark-mode + focus toggles)
	   are icon toggles, not primary actions — exempt them from the generic
	   touch-target padding above, which inflated them so the theme-toggle's
	   fixed right:40px offset (sized for the base 28px button) no longer
	   cleared the full-screen button and the two collided. Keep them square
	   and re-space; higher specificity so this wins over the rule above. */
	.wpllmlive-chat-interface .wpllmlive-fullscreen-btn,
	.wpllmlive-chat-interface .wpllmlive-theme-toggle-btn {
		width: 32px;
		height: 32px;
		min-height: 32px;
		padding: 0;
	}
	.wpllmlive-chat-interface .wpllmlive-theme-toggle-btn {
		right: 44px; /* 6px edge + 32px full-screen btn + 6px gap */
	}

	/* BACK-565: Overflow menu — hide buttons behind "..." toggle on mobile */
	.wpllmlive-overflow-menu {
		position: relative;
		display: inline-block;
	}

	.wpllmlive-overflow-toggle {
		min-width: 44px;
		font-size: 1.2em;
		cursor: pointer;
	}

	.wpllmlive-overflow-items {
		display: none;
		position: absolute;
		right: 0;
		bottom: 100%;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: var(--radius-md);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		padding: var(--space-1);
		z-index: 100;
		white-space: nowrap;
	}

	.wpllmlive-overflow-menu.is-open .wpllmlive-overflow-items {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
	}
}

/* BACK-566: Narrow screens — tighter message bubble margins */
@media (max-width: 480px) {
	.wpllmlive-message-user { --wpllmlive-msg-margin-left: 2%; }
	.wpllmlive-message-llm { --wpllmlive-msg-margin-right: 2%; }
	.wpllmlive-message-agent { --wpllmlive-msg-margin-right: 2%; }
}

/* BACK-565: On desktop, hide the toggle and show overflow items inline */
@media (min-width: 769px) {
	.wpllmlive-overflow-toggle {
		display: none;
	}

	.wpllmlive-overflow-items {
		display: contents;
	}
}


/* ==============================
   Spectator Waiting View (BACK-703)
   ============================== */

.wpllmlive-spectator-waiting-slots {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: var(--space-2);
	background: var(--wp-chrome-bg);
	border-bottom: 1px solid var(--wp-border);
}

/* BACK-1408: scoped to the spectator waiting view — the bare selector was
   also hitting the Join Game panel's occupied slot cards (same class, later
   in the cascade), overriding their --wpllmlive-slot-bg background. */
.wpllmlive-spectator-waiting-slots .wpllmlive-slot-occupied {
	background: #f0f0f1;
	border: 1px solid var(--wp-border);
	border-radius: var(--radius-sm);
	padding: 6px 10px;
	color: var(--wp-text-muted);
	opacity: 0.7;
	font-size: var(--fs-base);
}

.wpllmlive-spectator-waiting-banner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 10px var(--space-4);
	background: #f0f6fc;
	border-bottom: 1px solid #c0d8f0;
	color: var(--wp-text);
	font-size: var(--fs-base);
}

.wpllmlive-spectator-waiting-banner .wpllmlive-spectator-waiting-message {
	flex: 1;
	margin: 0;
}

.wpllmlive-idle-countdown {
	font-family: monospace;
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	color: var(--wp-text-muted);
}

/* Hide regular spectator/input UI when all slots are occupied */
.wpllmlive-chat-interface[data-spectator-waiting="1"] .wpllmlive-spectator-banner {
	display: none;
}

.wpllmlive-chat-interface[data-spectator-waiting="1"] .wpllmlive-chat-input-area {
	display: none;
}

.wpllmlive-chat-interface[data-spectator-waiting="1"] .wpllmlive-rate-limit-warning {
	display: none !important;
}