/**
 * Timer and countdown styles for WP LLM Live.
 *
 * Countdown badges, turn timers, time extension button,
 * player badge, and chess clock modes.
 * Part of BACK-932 CSS split.
 *
 * @package WPLLMLive
 * @since BACK-932
 */

/* Countdown Timer (Version 5.0.0) */
.wpllmlive-countdown {
	display: inline-block;
	margin-left: 10px;
	padding: var(--space-1) 10px;
	background: #e3f2fd;
	border-radius: var(--radius-2xl);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	color: #1976d2;
}

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

/* Countdown Timer Element (Version 5.7.8) */
.wpllmlive-countdown-timer {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: 6px var(--space-3);
	background: #e3f2fd;
	border-radius: var(--radius-xl);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	color: #1976d2;
	margin-bottom: 6px;
}

.wpllmlive-countdown-timer .wpllmlive-countdown-label {
	font-weight: var(--fw-medium);
	font-size: var(--fs-base);
	color: var(--wp-text-muted);
}

.wpllmlive-countdown-timer .wpllmlive-time-remaining {
	font-family: monospace;
	font-size: var(--fs-md);
	min-width: 40px;
}

.wpllmlive-time-progress-bar {
	flex: 1;
	height: 6px;
	background: var(--wp-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	min-width: 60px;
}

.wpllmlive-time-progress {
	height: 100%;
	background: var(--wp-blue);
	border-radius: var(--radius-sm);
	transition: width 1s linear;
}

.wpllmlive-countdown-timer.wpllmlive-time-warning {
	background: #fff3e0;
	color: #f57c00;
	animation: pulse-countdown 0.5s infinite;
}

.wpllmlive-countdown-timer.wpllmlive-time-warning .wpllmlive-time-progress {
	background: #f57c00;
}

.wpllmlive-countdown-timer.wpllmlive-time-warning .wpllmlive-time-progress-bar {
	background: #ffe0b2;
}

/* BUG-27: Paused timer state (Version 5.7.7.8) */
.wpllmlive-countdown-timer.wpllmlive-time-paused {
	background: #f5f5f5;
	color: #757575;
	opacity: 0.7;
	animation: none; /* Disable pulse animation when paused */
}

.wpllmlive-countdown-timer.wpllmlive-time-paused .wpllmlive-time-remaining {
	opacity: 0.8;
}

.wpllmlive-countdown-timer.wpllmlive-time-paused .wpllmlive-time-progress {
	background: #bdbdbd;
}

.wpllmlive-countdown-timer.wpllmlive-time-paused .wpllmlive-time-progress-bar {
	background: #e0e0e0;
}

/* Time Extension Button (Version 5.7.7.2) */
.wpllmlive-time-extension-container {
	display: inline-block;
	margin-left: 8px;
}

.wpllmlive-extend-time-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	color: #fff;
	background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
	border: none;
	border-radius: 16px; /* no token: pill button, between --radius-2xl and --radius-full */
	cursor: pointer;
	transition: all var(--transition-base);
	box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);
	white-space: nowrap;
}

.wpllmlive-extend-time-button:hover:not(:disabled) {
	background: linear-gradient(135deg, #f57c00 0%, #ef6c00 100%);
	box-shadow: 0 4px 8px rgba(255, 152, 0, 0.4);
	transform: translateY(-1px);
}

.wpllmlive-extend-time-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.wpllmlive-extend-time-button .wpllmlive-ext-remaining {
	font-weight: var(--fw-normal);
	font-size: var(--fs-sm);
	opacity: 0.9;
}

/* ============================================
 * Version 5.7.6.7: Chess Clock Mode Styles
 * ============================================ */

/* Chess clock container */
.wpllmlive-chess-clock-container {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	border-radius: var(--radius-xl);
	margin-bottom: 12px;
}

/* Chess clock display */
.wpllmlive-chess-clock {
	font-size: 1.5em;
	font-weight: var(--fw-bold);
	font-family: 'Courier New', Consolas, monospace;
	padding: 6px 14px;
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	min-width: 100px;
	text-align: center;
}

/* Clock states */
.wpllmlive-clock-warning {
	color: #856404;
	background: #fff3cd;
	box-shadow: 0 2px 4px rgba(133, 100, 4, 0.2);
}

/* Inactivity Timer - Stack Mode (Version 5.7.7.3a) */
.wpllmlive-inactivity-timer {
	display: block;
	font-size: var(--fs-sm);
	color: #999;
	text-align: center;
	margin-top: 4px;
	transition: color 0.3s ease;
}

/* Ask AI button */
.wpllmlive-ask-ai-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
	color: #fff;
	background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
	border: none;
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--transition-base);
	box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}

.wpllmlive-ask-ai-button:hover:not(:disabled) {
	background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
	box-shadow: 0 4px 8px rgba(23, 162, 184, 0.4);
	transform: translateY(-1px);
}

.wpllmlive-ask-ai-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.wpllmlive-ask-ai-button .dashicons {
	font-size: var(--fs-xl);
	width: 16px;
	height: 16px;
}