/**
 * Frontend styles for WP LLM Live.
 *
 * @package WPLLMLive
 * @since 0.1.0
 */

/* Design tokens */
:root {
	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;

	/* Font sizes */
	--fs-xs: 10px;
	--fs-sm: 11px;
	--fs-base: 12px;
	--fs-md: 13px;
	--fs-lg: 14px;
	--fs-xl: 16px;
	--fs-2xl: 18px;
	--fs-3xl: 20px;

	/* Font weights */
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Border radii */
	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-xl: 8px;
	--radius-2xl: 12px;
	--radius-full: 9999px;
	--radius-circle: 50%;

	/* Semantic colors */
	--color-orange-50: #fff8f0;
	--color-orange-100: #ffe8cc;
	--color-orange-500: #ff8c00;
	--color-orange-600: #e07b00;
	--color-orange-700: #c46e00;
	--color-green-50: #f0fff4;
	--color-green-500: #00a32a;
	--color-green-600: #007a1f;
	--color-blue-50: #f0f6ff;
	--color-blue-500: #2271b1;
	--color-blue-600: #135e96;
	--color-red-50: #fff0f0;
	--color-red-500: #d63638;
	--color-red-600: #b32d2e;
	--color-amber-500: #dba617;
	--color-amber-600: #c49a00;

	/* Gray scale */
	--gray-50: #f9fafb;
	--gray-100: #f6f7f7;
	--gray-200: #e8e9ea;
	--gray-300: #c3c4c7;
	--gray-400: #a7aaad;
	--gray-500: #787c82;
	--gray-600: #646970;
	--gray-700: #50575e;
	--gray-800: #3c434a;
	--gray-900: #1d2327;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.2);

	/* Transitions */
	--transition-fast: 0.1s ease;
	--transition-base: 0.2s ease;
	--transition-slow: 0.3s ease-in-out;
}

/* Main chat interface container - add margin to prevent title and footer overlap */
.wpllmlive-chat-interface {
	position: relative;
	z-index: 1;
	/* WP admin palette */
	--wp-blue: var(--color-blue-500);
	--wp-blue-hover: var(--color-blue-600);
	--wp-text: var(--gray-900);
	--wp-text-muted: var(--gray-600);
	--wp-chrome-bg: var(--gray-100);
	--wp-border: var(--gray-300);
	--wp-success: var(--color-green-500);
	--wp-danger: var(--color-red-500);
	--wp-white: #fff;
	border: 1px solid var(--wp-border);
	border-radius: var(--radius-sm);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	background: #fff;
	--wp--preset--font-size--small: 12px;
	--wp--preset--font-size--medium: 12px;
	--wp--preset--font-size--large: 12px;
	--wp--preset--font-size--x-large: 12px;
	font-size: var(--fs-base);
	display: flex;
	flex-direction: column;
	margin: 20px 0 0 0;
	min-height: 400px;
	padding-bottom: 0;
	height: calc(100dvh - var(--wpllmlive-chat-height));
	overflow: hidden; /* Only messages area scrolls internally */
}

/* ==============================
   Fullscreen Focus Mode
   ============================== */

/* Toggle button — small, unobtrusive */
.wpllmlive-fullscreen-btn {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 15; /* Above turn-status (10), below content overlays */
	width: 28px;
	height: 28px;
	border: 1px solid var(--wp-border);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.5;
	transition: opacity var(--transition-base);
	font-size: var(--fs-xl);
	line-height: 1;
	color: var(--gray-800);
	padding: 0;
}
.wpllmlive-fullscreen-btn:hover,
.wpllmlive-fullscreen-btn:focus-visible {
	opacity: 1;
}

/* BACK-1408: corner controls as a flow header bar, right-aligned, so the
   dark-mode + focus buttons never overlap the content below them (previously
   absolute-positioned, which collided with the turn-status bar and, once
   Player Status moved to the top, the first player card). */
.wpllmlive-corner-controls {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	background: var(--wp-chrome-bg);
	border-bottom: 1px solid var(--wp-border);
}
.wpllmlive-corner-controls .wpllmlive-fullscreen-btn,
.wpllmlive-corner-controls .wpllmlive-theme-toggle-btn {
	position: static;
	top: auto;
	right: auto;
}

/* BACK-1408 phase 4: blog launch button — a call-to-action on a content page
   that sends the visitor to a game's full-screen page. Self-contained colours
   so it holds up on any theme. */
.wpllmlive-launch-button {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 14px 30px;
	background: #2563eb;
	color: #fff;
	text-decoration: none;
	border-radius: 12px;
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.2;
	box-shadow: 0 2px 8px rgba(20, 28, 45, 0.14);
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.wpllmlive-launch-button:hover,
.wpllmlive-launch-button:focus-visible {
	background: #1d4ed8;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(20, 28, 45, 0.2);
}
.wpllmlive-launch-button:focus-visible {
	outline: 2px solid #1e3a8a;
	outline-offset: 2px;
}
.wpllmlive-launch-sub {
	font-size: 0.8rem;
	font-weight: 400;
	opacity: 0.9;
}
.wpllmlive-launch-error {
	color: #b00020;
	font-family: monospace;
	font-size: 0.85em;
}

/* Body scroll lock when fullscreen is active */
body.wpllmlive-fullscreen-active {
	overflow: hidden !important;
	position: fixed;
	width: 100%;
	height: 100%;
}

/* The fullscreen overlay state */
.wpllmlive-chat-interface.wpllmlive-fullscreen {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10001; /* Above toast (10002), below lightbox (999999) */
	height: 100dvh !important;
	width: 100% !important;
	margin: 0 !important;
	border-radius: 0;
	border: none;
}

/* When WP admin bar is present, offset top */
.admin-bar .wpllmlive-chat-interface.wpllmlive-fullscreen {
	top: var(--wpllmlive-sticky-offset, 32px);
	height: calc(100dvh - var(--wpllmlive-sticky-offset, 32px)) !important;
}

/* Icon swap */
.wpllmlive-fullscreen .wpllmlive-fullscreen-icon-expand { display: none !important; }
.wpllmlive-fullscreen .wpllmlive-fullscreen-icon-collapse { display: inline !important; }

/* iOS safe area for input in fullscreen */
.wpllmlive-fullscreen .wpllmlive-chat-input-area {
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* Mobile admin bar is 46px */
@media (max-width: 782px) {
	.admin-bar .wpllmlive-chat-interface.wpllmlive-fullscreen {
		top: var(--wpllmlive-sticky-offset, 46px);
		height: calc(100dvh - var(--wpllmlive-sticky-offset, 46px)) !important;
	}
}

.wpllmlive-players-grid-container {
	border-bottom: 1px solid var(--wp-border);
}

.wpllmlive-players-grid {
	padding: var(--space-2);
	background: var(--wp-chrome-bg);
}

.wpllmlive-players-grid-toggle {
	cursor: pointer;
	padding: var(--space-1);
	text-align: center;
	background: var(--wp-chrome-bg);
	font-family: inherit;
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	color: var(--wp-text);
	list-style: none; /* Hide default arrow in some browsers if desired, or let it show. Let's let it show natively */
}

/* Add a subtle border to separate toggle from content when open */
.wpllmlive-players-grid-container[open] .wpllmlive-players-grid-toggle {
	border-bottom: 1px dashed var(--wp-border);
}


/* Chat container - must participate in parent flex to respect max-height */
/* Reset WP block-theme font-size custom properties for all game chrome */
.wpllmlive-chat-container {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0; /* Allow shrinking below content size within 80vh parent */
	overflow: hidden;
	margin: 0;
	padding: 0;
}

/* BACK-1039: Offline/connection-lost banner */
.wpllmlive-connection-banner {
	background: #ff9800;
	color: #fff;
	padding: 8px;
	font-size: 14px;
	text-align: center;
}

/* BACK-1042: Message queued while offline — muted to indicate it is pending */
.wpllmlive-message.wpllmlive-queued {
	opacity: 0.55;
	font-style: italic;
}

/* BACK-1345: Session-expired banner — an auth problem, not a network one */
.wpllmlive-auth-expired-banner {
	background: #c62828;
	color: #fff;
	padding: 10px;
	font-size: 14px;
	text-align: center;
}

.wpllmlive-auth-expired-banner .wpllmlive-auth-expired-reload {
	background: #fff;
	color: #c62828;
	border: 0;
	border-radius: 3px;
	padding: 3px 10px;
	font-size: 13px;
	cursor: pointer;
}

.wpllmlive-auth-expired-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
}

/* ==============================
   Dark Mode (BACK-1396)
   Viewer preference toggled per chat interface; the palette tokens defined
   on .wpllmlive-chat-interface are remapped, then the surfaces that hard-code
   light colors are patched individually.
   ============================== */

/* Toggle button — sits beside the fullscreen toggle */
.wpllmlive-theme-toggle-btn {
	position: absolute;
	top: 6px;
	right: 40px;
	z-index: 15;
	width: 28px;
	height: 28px;
	border: 1px solid var(--wp-border);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.5;
	transition: opacity var(--transition-base);
	font-size: var(--fs-xl);
	line-height: 1;
	color: var(--gray-800);
	padding: 0;
}
.wpllmlive-theme-toggle-btn:hover,
.wpllmlive-theme-toggle-btn:focus-visible {
	opacity: 1;
}

.wpllmlive-chat-interface.wpllmlive-dark-mode {
	--wp-text: #e2e2e8;
	--wp-text-muted: #a0a0aa;
	--wp-chrome-bg: #1e1e26;
	--wp-border: #3a3a46;
	--wp-white: #17171e;
	color-scheme: dark;
	background: #17171e;
	color: #e2e2e8;
}

/* Chat surfaces */
.wpllmlive-dark-mode .wpllmlive-chat-container,
.wpllmlive-dark-mode .wpllmlive-chat-messages {
	background: #17171e;
	color: #e2e2e8;
	scrollbar-color: #4a4a56 #22222a;
}

/* Message bubbles: remap the custom properties the bubbles are built on */
.wpllmlive-dark-mode .wpllmlive-message {
	--wpllmlive-msg-bg: #242430;
	color: #e2e2e8;
}
.wpllmlive-dark-mode .wpllmlive-message-user {
	--wpllmlive-msg-bg: #33302a;
	color: #e8e3d8;
}
.wpllmlive-dark-mode .wpllmlive-message-author {
	--wpllmlive-msg-author-color: #9fb0c8;
}
/* Seat accent in dark mode: the lighter variant of the seat's hue. */
.wpllmlive-dark-mode .wpllmlive-message-user {
	border-left-color: var(--wpllmlive-seat-accent-dark, transparent);
}
.wpllmlive-dark-mode .wpllmlive-message-user .wpllmlive-message-author {
	color: var(--wpllmlive-seat-accent-dark, #9fb0c8);
}
.wpllmlive-dark-mode .wpllmlive-player-slot {
	border-left-color: var(--wpllmlive-seat-accent-dark, var(--wpllmlive-card-border));
}
.wpllmlive-dark-mode .wpllmlive-message-content code,
.wpllmlive-dark-mode .wpllmlive-message-content pre {
	background: rgba(255, 255, 255, 0.08);
}
/* Message text that hard-codes dark ink (unreadable on the dark bubbles) */
.wpllmlive-dark-mode .wpllmlive-message-content strong {
	color: #f0f0f4;
}
.wpllmlive-dark-mode .wpllmlive-message-content :is(h1, h2, h3) {
	color: #e8e8ee;
}
.wpllmlive-dark-mode .wpllmlive-message-content blockquote {
	color: #cfc2a0;
}
.wpllmlive-dark-mode .wpllmlive-message-content a {
	color: #7fb0e8;
}
.wpllmlive-dark-mode .wpllmlive-message-user .wpllmlive-message-content hr {
	background: rgba(255, 255, 255, 0.15);
}
.wpllmlive-dark-mode .wpllmlive-round-header,
.wpllmlive-dark-mode .wpllmlive-next-player,
.wpllmlive-dark-mode .wpllmlive-next-player .wpllmlive-message-content {
	color: #a0a0aa;
}

/* Status chrome: turn bar, player grid, slot cards */
.wpllmlive-dark-mode .wpllmlive-players-grid {
	background: #22222a;
}
/* BACK-1408: the player cards read their surface from --wpllmlive-card-bg /
   --wpllmlive-card-border (not --wpllmlive-slot-bg), and their text colours
   were hardcoded light-mode greys — so in dark mode they stayed black-on-white.
   Set the right variables and the child text colours, plus dark variants of
   the highlight states. */
.wpllmlive-dark-mode .wpllmlive-slot-card,
.wpllmlive-dark-mode .wpllmlive-player-slot {
	--wpllmlive-card-bg: #242430;
	--wpllmlive-card-border: #3a3a46;
	color: #e2e2e8;
}
.wpllmlive-dark-mode .wpllmlive-player-slot .wpllmlive-slot-number,
.wpllmlive-dark-mode .wpllmlive-slot-card .wpllmlive-slot-number { color: #9a9aa6; }
.wpllmlive-dark-mode .wpllmlive-player-slot .wpllmlive-slot-name,
.wpllmlive-dark-mode .wpllmlive-slot-card .wpllmlive-slot-name { color: #e8e8ee; }
.wpllmlive-dark-mode .wpllmlive-player-slot .wpllmlive-slot-score,
.wpllmlive-dark-mode .wpllmlive-slot-card .wpllmlive-slot-score { color: #6fdb9a; }
.wpllmlive-dark-mode .wpllmlive-player-slot.wpllmlive-user-slot { --wpllmlive-card-bg: #38301d; --wpllmlive-card-border: #d98a2b; }
.wpllmlive-dark-mode .wpllmlive-player-slot.wpllmlive-ai-slot { --wpllmlive-card-bg: #2a2a34; --wpllmlive-card-border: #4a4a56; }
.wpllmlive-dark-mode .wpllmlive-player-slot.wpllmlive-current-player { --wpllmlive-card-bg: #1e3a26; --wpllmlive-card-border: #4caf50; }
.wpllmlive-dark-mode .wpllmlive-player-slot.wpllmlive-empty-slot { --wpllmlive-card-bg: #1e1e26; }

/* Input area */
.wpllmlive-dark-mode .wpllmlive-chat-input-area {
	background: #1e1e26;
}
.wpllmlive-dark-mode .wpllmlive-message-input,
.wpllmlive-dark-mode .wpllmlive-identity-form input[type="text"],
.wpllmlive-dark-mode .wpllmlive-identity-form textarea {
	background: #242430;
	color: #e8e8ee;
	border-color: #3a3a46;
}
.wpllmlive-dark-mode .wpllmlive-message-input::placeholder {
	color: #7a7a86;
}

/* Panels and fixed areas */
.wpllmlive-dark-mode .wpllmlive-inline-panel,
.wpllmlive-dark-mode .wpllmlive-agent-fixed-area,
.wpllmlive-dark-mode .wpllmlive-fixed-area-content,
.wpllmlive-dark-mode .wpllmlive-inline-panel-content {
	background: #1e1e26;
	color: #e2e2e8;
}
.wpllmlive-dark-mode .wpllmlive-fixed-area-header,
.wpllmlive-dark-mode .wpllmlive-inline-panel-header {
	background: #26262e;
	color: #e2e2e8;
}
.wpllmlive-dark-mode .wpllmlive-game-banner {
	background: #22222a;
	color: #e2e2e8;
}

/* BACK-1408: the join / spectator / magic-link area had no dark styling, so it
   stayed light while the rest of the interface inverted. */
.wpllmlive-dark-mode .wpllmlive-spectator-banner {
	background: #1a1a22;
	border-top-color: #3a3a46;
}
.wpllmlive-dark-mode .wpllmlive-spectator-message,
.wpllmlive-dark-mode .wpllmlive-or-divider,
.wpllmlive-dark-mode .wpllmlive-your-slot-label {
	color: #b8b8c2;
}
.wpllmlive-dark-mode .wpllmlive-magic-link-form,
.wpllmlive-dark-mode .wpllmlive-magic-auth-bar {
	background: #1e1e26;
	color: #e2e2e8;
	border-color: #3a3a46;
}
.wpllmlive-dark-mode .wpllmlive-magic-link-form label,
.wpllmlive-dark-mode .wpllmlive-magic-link-consent,
.wpllmlive-dark-mode .wpllmlive-magic-auth-identity {
	color: #c6c6d0;
}
.wpllmlive-dark-mode .wpllmlive-magic-link-form input[type="text"],
.wpllmlive-dark-mode .wpllmlive-magic-link-form input[type="email"],
.wpllmlive-dark-mode .wpllmlive-magic-link-fields input {
	background: #242430;
	color: #e8e8ee;
	border-color: #3a3a46;
}
.wpllmlive-dark-mode .wpllmlive-magic-link-form input::placeholder,
.wpllmlive-dark-mode .wpllmlive-magic-link-fields input::placeholder {
	color: #7a7a86;
}

/* BACK-1408: the slot-booking (Join Game) panel. The slot cards here read
   --wpllmlive-slot-bg (not the --wpllmlive-card-bg the player cards use),
   and their state variants hardcode light colours at equal specificity, so
   each variant needs its own dark override. */
.wpllmlive-dark-mode .wpllmlive-slot-booking {
	background: #1a1a22;
	border-bottom-color: #3a3a46;
}
.wpllmlive-dark-mode .wpllmlive-slot-booking-title {
	color: #e8e8ee;
}
.wpllmlive-dark-mode .wpllmlive-slot-card {
	--wpllmlive-slot-bg: #242430;
	--wpllmlive-slot-border: #3a3a46;
}
.wpllmlive-dark-mode .wpllmlive-slot-card.wpllmlive-slot-occupied { --wpllmlive-slot-bg: #1e1e26; }
.wpllmlive-dark-mode .wpllmlive-slot-card.wpllmlive-slot-selected { --wpllmlive-slot-bg: #1e3a26; --wpllmlive-slot-border: #4caf50; }
.wpllmlive-dark-mode .wpllmlive-slot-card.wpllmlive-slot-yours { --wpllmlive-slot-bg: #38301d; --wpllmlive-slot-border: #d98a2b; }
.wpllmlive-dark-mode .wpllmlive-slot-card.wpllmlive-slot-ai { --wpllmlive-slot-bg: #2a2a34; --wpllmlive-slot-border: #4a4a56; }
.wpllmlive-dark-mode .wpllmlive-slot-card.wpllmlive-slot-claimable {
	/* the light rule paints a background-image gradient, not the bg variable */
	background: linear-gradient(135deg, #34301c 0%, #38301d 100%);
}
.wpllmlive-dark-mode .wpllmlive-slot-card.wpllmlive-slot-ai-locked {
	--wpllmlive-slot-bg: #1e1e26;
	--wpllmlive-slot-border: #4a4a56;
	color: #7a7a86;
}
.wpllmlive-dark-mode .wpllmlive-spectator-waiting-slots .wpllmlive-slot-occupied {
	background: #1e1e26;
	border-color: #3a3a46;
	color: #9a9aa6;
}
.wpllmlive-dark-mode .wpllmlive-book-slot-form {
	background: #1e1e26;
	border-color: #3a3a46;
}
.wpllmlive-dark-mode .wpllmlive-book-slot-form input[type="text"],
.wpllmlive-dark-mode .wpllmlive-book-slot-form textarea {
	background: #242430;
	color: #e8e8ee;
	border-color: #3a3a46;
}
.wpllmlive-dark-mode .wpllmlive-book-slot-form input::placeholder,
.wpllmlive-dark-mode .wpllmlive-book-slot-form textarea::placeholder {
	color: #7a7a86;
}
.wpllmlive-dark-mode .wpllmlive-slot-booking .wpllmlive-button {
	background: #242430;
	color: #e2e2e8;
	border-color: #3a3a46;
}
.wpllmlive-dark-mode .wpllmlive-slot-booking .wpllmlive-button-primary {
	background: var(--wp-blue);
	border-color: var(--wp-blue);
	color: #fff;
}

/* The corner-controls toolbar band */
.wpllmlive-dark-mode .wpllmlive-corner-controls {
	background: #1a1a22;
	border-bottom-color: #3a3a46;
}

/* The corner toggles themselves */
.wpllmlive-dark-mode .wpllmlive-fullscreen-btn,
.wpllmlive-dark-mode .wpllmlive-theme-toggle-btn {
	background: rgba(36, 36, 48, 0.85);
	color: #e2e2e8;
}

/* The page around the game follows the toggle (body class set by the same
   JS). Kept deliberately generic: background + text + links, headings —
   enough for block themes that paint on body, without chasing theme
   internals. */
body.wpllmlive-page-dark {
	background: #101016;
	color: #cfcfd6;
	color-scheme: dark;
}
body.wpllmlive-page-dark .wp-site-blocks,
body.wpllmlive-page-dark main {
	background: transparent;
}
body.wpllmlive-page-dark :is(h1, h2, h3, h4, h5, h6) {
	color: #e8e8ee;
}
body.wpllmlive-page-dark a:not(.wpllmlive-button) {
	color: #7fb0e8;
}
body.wpllmlive-page-dark hr {
	border-color: #34343e;
	background: #34343e;
}