/**
 * Cycle AI — Shared chat, progress, and preview styles
 *
 * Shared styles used by the Cycle AI chat panel: chat bubbles,
 * progress steps, storefront preview, reasoning section, and actions.
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/admin/cycle-ai-create-modal.css
 * @since      1.0.0
 */

/* ==========================================================================
   Chat area
   ========================================================================== */

.wsscd-cycle-ai-modal__chat {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 24px;
	max-height: 320px;
	overflow-y: auto;
	flex: 1 1 auto;
}

.wsscd-cycle-ai-modal__chat:empty {
	display: none;
}

/* Scrollbar styling */
.wsscd-cycle-ai-modal__chat::-webkit-scrollbar {
	width: 4px;
}

.wsscd-cycle-ai-modal__chat::-webkit-scrollbar-track {
	background: transparent;
}

.wsscd-cycle-ai-modal__chat::-webkit-scrollbar-thumb {
	background: var(--wsscd-color-border);
	border-radius: 2px;
}

/* --- User bubble --- */

.wsscd-cycle-ai-modal__user-bubble {
	align-self: flex-end;
	max-width: 75%;
	padding: 10px 18px;
	background: var(--wsscd-color-primary);
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 18px 18px 6px 18px;
	word-wrap: break-word;
	animation: wsscd-bubble-in 0.2s ease-out;
}

@keyframes wsscd-bubble-in {
	from {
		opacity: 0;
		transform: translateY( 8px ) scale( 0.97 );
	}
	to {
		opacity: 1;
		transform: translateY( 0 ) scale( 1 );
	}
}

/* --- AI bubble --- */

.wsscd-cycle-ai-modal__ai-bubble {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	align-self: flex-start;
	max-width: 95%;
}

.wsscd-cycle-ai-modal__ai-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: linear-gradient( 135deg, #e8f0fe, #d4e4f7 );
	border: none;
	border-radius: 50%;
	flex-shrink: 0;
	color: var(--wsscd-color-primary);
	font-size: 14px;
	line-height: 1;
}

.wsscd-cycle-ai-modal__ai-content {
	flex: 1 1 auto;
	min-width: 0;
	padding: 16px 18px;
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	border-radius: 4px 16px 16px 16px;
}

/* ==========================================================================
   Progress steps (inside AI bubble, State 2: Thinking)
   ========================================================================== */

.wsscd-cycle-ai-modal__progress-steps {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wsscd-cycle-ai-modal__progress-step {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.wsscd-cycle-ai-modal__step-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Pending state */
.wsscd-cycle-ai-modal__progress-step--pending .wsscd-cycle-ai-modal__step-circle {
	background: #f0f0f0;
	border: 2px solid #dcdcde;
}

.wsscd-cycle-ai-modal__progress-step--pending .wsscd-cycle-ai-modal__step-label {
	color: var(--wsscd-color-gray-400);
}

/* Active state */
.wsscd-cycle-ai-modal__progress-step--active .wsscd-cycle-ai-modal__step-circle {
	background: #fff;
	border: 2px solid var(--wsscd-color-primary);
	position: relative;
}

.wsscd-cycle-ai-modal__progress-step--active .wsscd-cycle-ai-modal__step-circle::after {
	content: '';
	position: absolute;
	width: 7px;
	height: 7px;
	background: var(--wsscd-color-primary);
	border-radius: 50%;
	animation: wsscd-pulse 1.2s ease-in-out infinite;
}

.wsscd-cycle-ai-modal__progress-step--active .wsscd-cycle-ai-modal__step-label {
	color: var(--wsscd-color-text);
}

/* Completed state */
.wsscd-cycle-ai-modal__progress-step--completed .wsscd-cycle-ai-modal__step-circle {
	background: var(--wsscd-color-primary);
	border: 2px solid var(--wsscd-color-primary);
}

.wsscd-cycle-ai-modal__progress-step--completed .wsscd-cycle-ai-modal__step-circle svg {
	display: block;
}

.wsscd-cycle-ai-modal__progress-step--completed .wsscd-cycle-ai-modal__step-label {
	color: var(--wsscd-color-text);
	font-weight: 500;
}

/* Error state */
.wsscd-cycle-ai-modal__progress-step--error .wsscd-cycle-ai-modal__step-circle {
	background: var(--wsscd-color-danger);
	border: 2px solid var(--wsscd-color-danger);
}

.wsscd-cycle-ai-modal__progress-step--error .wsscd-cycle-ai-modal__step-circle svg {
	display: block;
}

.wsscd-cycle-ai-modal__progress-step--error .wsscd-cycle-ai-modal__step-label {
	color: var(--wsscd-color-danger);
}

/* Step label & subtitle */
.wsscd-cycle-ai-modal__step-label {
	font-size: 13px;
	line-height: 1.3;
	transition: color 0.2s ease;
}

.wsscd-cycle-ai-modal__step-subtitle {
	display: block;
	font-size: 11px;
	color: var(--wsscd-color-text-muted);
	font-weight: 400;
	margin-top: 1px;
}

/* Checkmark SVG hidden by default */
.wsscd-cycle-ai-modal__step-circle svg {
	display: none;
	width: 12px;
	height: 12px;
}

/* Pulse animation */
@keyframes wsscd-pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.4);
		opacity: 0.5;
	}
}

/* ==========================================================================
   Preview content (inside AI bubble, State 3: Response)
   ========================================================================== */

.wsscd-cycle-ai-modal__preview {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Campaign name header */
.wsscd-cycle-ai-modal__preview-name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wsscd-color-text);
	line-height: 1.3;
}

.wsscd-cycle-ai-modal__preview-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: var(--wsscd-color-primary);
	border-radius: 50%;
	flex-shrink: 0;
}

.wsscd-cycle-ai-modal__preview-check svg {
	width: 12px;
	height: 12px;
}

.wsscd-cycle-ai-modal__preview-desc {
	font-size: 12px;
	color: var(--wsscd-color-text-muted);
	line-height: 1.4;
	margin: -8px 0 0;
}

/* Two-column grid: details + storefront */
.wsscd-cycle-ai-modal__preview-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Details card (left) */
.wsscd-cycle-ai-modal__preview-details {
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wsscd-cycle-ai-modal__detail-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wsscd-cycle-ai-modal__detail-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--wsscd-color-gray-400);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.wsscd-cycle-ai-modal__detail-value {
	font-size: 12px;
	color: var(--wsscd-color-text);
	font-weight: 500;
}

/* Storefront card (right) */
.wsscd-cycle-ai-modal__preview-storefront {
	background: #f8f9fa;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wsscd-cycle-ai-modal__mini-product {
	position: relative;
	width: 100%;
	max-width: 180px;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 6px;
	overflow: hidden;
}

.wsscd-cycle-ai-modal__mini-product-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	background: #f9f9f9;
	color: var(--wsscd-color-border);
	font-size: 28px;
}

.wsscd-cycle-ai-modal__mini-product-info {
	padding: 8px 10px;
}

.wsscd-cycle-ai-modal__mini-product-name {
	font-size: 11px;
	color: var(--wsscd-color-text);
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wsscd-cycle-ai-modal__mini-product-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 4px;
}

.wsscd-cycle-ai-modal__price-discounted {
	font-size: 13px;
	font-weight: 700;
	color: var(--wsscd-color-primary);
}

.wsscd-cycle-ai-modal__price-original {
	font-size: 11px;
	color: var(--wsscd-color-gray-400);
	text-decoration: line-through;
}

/* Badge */
.wsscd-cycle-ai-modal__mini-badge {
	position: absolute;
	padding: 3px 7px;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.2;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	z-index: 1;
}

.wsscd-cycle-ai-modal__mini-badge--top-right {
	top: 6px;
	right: 6px;
}

.wsscd-cycle-ai-modal__mini-badge--top-left {
	top: 6px;
	left: 6px;
}

.wsscd-cycle-ai-modal__mini-badge--bottom-right {
	bottom: 6px;
	right: 6px;
}

.wsscd-cycle-ai-modal__mini-badge--bottom-left {
	bottom: 6px;
	left: 6px;
}

/* ==========================================================================
   Streaming text container
   ========================================================================== */

/*
 * Streamed assistant text before the campaign JSON arrives. Lives inside
 * .wsscd-cycle-ai-modal__ai-content and is populated character-by-character
 * from the SSE text events, so it needs wrapping rules that preserve
 * whitespace from the model output.
 */
.wsscd-cycle-ai-modal__stream-text {
	font-size: 13px;
	line-height: 1.6;
	color: #3c434a;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* ==========================================================================
   Reasoning section
   ========================================================================== */

.wsscd-cycle-ai-modal__reasoning {
	background: linear-gradient( 135deg, #f0f6fc, #f5f8fc );
	border: 1px solid #d4e4f2;
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 10px;
	font-size: 12px;
	line-height: 1.6;
	color: #3c434a;
}

.wsscd-cycle-ai-modal__reasoning-label {
	font-weight: 600;
	color: var(--wsscd-color-primary);
	margin-right: 4px;
}

/* Typewriter cursor */
.wsscd-cycle-ai-modal__cursor {
	display: inline-block;
	width: 2px;
	height: 1em;
	background: var(--wsscd-color-primary);
	vertical-align: text-bottom;
	margin-left: 1px;
	animation: wsscd-cursor-blink 0.6s step-end infinite;
}

@keyframes wsscd-cursor-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* Preview slide-in reveal */
.wsscd-cycle-ai-modal__preview--reveal {
	animation: wsscd-preview-slide-in 0.35s ease-out both;
}

@keyframes wsscd-preview-slide-in {
	from {
		opacity: 0;
		transform: translateY( 12px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* ==========================================================================
   Action buttons (State 3: Response)
   ========================================================================== */

.wsscd-cycle-ai-modal__actions {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	padding-top: 4px;
}

.wsscd-cycle-ai-modal__action-btn {
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 8px;
	cursor: pointer;
	border: none;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
	line-height: 1.3;
}

.wsscd-cycle-ai-modal__action-btn:active {
	transform: scale( 0.97 );
}

.wsscd-cycle-ai-modal__action-btn--primary {
	background: var(--wsscd-color-primary);
	color: #fff;
}

.wsscd-cycle-ai-modal__action-btn--primary:hover {
	background: var(--wsscd-color-primary-dark);
}

.wsscd-cycle-ai-modal__action-btn--secondary {
	background: transparent;
	color: var(--wsscd-color-primary);
	border: 1px solid var(--wsscd-color-primary);
}

.wsscd-cycle-ai-modal__action-btn--secondary:hover {
	background: #f0f6fc;
}

/* ==========================================================================
   Error message in progress
   ========================================================================== */

.wsscd-cycle-ai-modal__step-error-msg {
	font-size: 12px;
	color: var(--wsscd-color-danger);
	line-height: 1.4;
	margin-top: 4px;
	padding: 8px 10px;
	background: #fcf0f1;
	border: 1px solid #f0c9cb;
	border-radius: 4px;
}

/* --- Discount Summary (advanced types) --- */

.wsscd-cycle-ai-modal__discount-summary {
	padding: 6px 10px;
	font-size: 11px;
	color: var(--wsscd-text-secondary, #646970);
	text-align: center;
	border-top: 1px solid var(--wsscd-border-light, #e0e0e0);
	margin-top: 4px;
}

/* --- Remaining Uses Warning --- */

.wsscd-cycle-ai-modal__remaining-warning {
	padding: 6px 16px;
	font-size: 12px;
	color: var(--wsscd-text-secondary, #646970);
	text-align: center;
	opacity: 0.8;
}

/* --- Conversation Warning (soft limit) --- */

.wsscd-cycle-ai-modal__conversation-warning {
	padding: 6px 16px;
	font-size: 12px;
	color: var(--wsscd-text-secondary, #646970);
	text-align: center;
	opacity: 0.8;
}

/* --- Updating Spinner (refinements) --- */

.wsscd-cycle-ai-modal__updating {
	font-size: 13px;
	color: var(--wsscd-text-secondary, #646970);
	padding: 12px 0;
}

.wsscd-cycle-ai-modal__updating::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 8px;
	border: 2px solid var(--wsscd-border-light, #d0d5dd);
	border-top-color: var(--wsscd-color-primary);
	border-radius: 50%;
	animation: wsscd-spin 0.8s linear infinite;
}

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

/* --- New Conversation Button --- */

.wsscd-cycle-ai-modal__action-btn--text {
	background: none;
	border: none;
	color: var(--wsscd-text-secondary, #646970);
	font-size: 12px;
	cursor: pointer;
	padding: 6px 10px;
	text-decoration: underline;
}

.wsscd-cycle-ai-modal__action-btn--text:hover {
	color: var(--wsscd-text-primary, #1d2327);
}

/* --- Used Suggestion Cards --- */

.wsscd-cycle-ai-modal__suggestion-card--used {
	opacity: 0.5;
	position: relative;
}

.wsscd-cycle-ai-modal__suggestion-card--used::after {
	content: '\2713';
	position: absolute;
	top: 6px;
	right: 8px;
	font-size: 11px;
	color: var(--wsscd-text-secondary, #646970);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 480px) {
	.wsscd-cycle-ai-modal__preview-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wsscd-cycle-ai-modal__progress-step--active .wsscd-cycle-ai-modal__step-circle::after {
		animation: none;
	}

	.wsscd-cycle-ai-modal__cursor {
		animation: none;
	}

	.wsscd-cycle-ai-modal__preview--reveal {
		animation: none;
	}

	.wsscd-cycle-ai-modal__user-bubble {
		animation: none;
	}
}