/**
 * Maya — final approved styles, matched to Priya's real AsianThrill
 * DT_AI_Coach implementation (source-verified, not screenshot-estimated).
 * 760px width, source-confirmed colors/proportions. This is the current
 * baseline; prior "muted richness" and "screenshot-sampled" iterations
 * are superseded, not preserved anywhere in this file.
 *
 * THEME INTEGRATION CONTRACT (read this before changing any color/font
 * value below): every visual token here is a CSS custom property with a
 * standalone fallback, never a bare hex/font value. A host theme MAY
 * define these at :root to make Maya visually native to that theme; if
 * it doesn't, every rule below still resolves to a real, correct value
 * on its own. This file has ZERO knowledge of which theme (if any) is
 * active — no theme-name checks, no PHP conditionals, nothing beyond
 * plain CSS variable fallback syntax. That is deliberate: the plugin
 * must look correct in any WordPress theme, always.
 *
 *   --adc-font-body              Body/UI font stack
 *   --adc-font-display           Display font stack (Maya's name in the header)
 *   --adc-ink                     Primary dark color (text, borders)
 *   --adc-paper                    Light color (text-on-dark)
 *   --adc-gold                      Accent (focus rings, hover states) -- secondary, not the primary color story
 *   --adc-maya-bubble-bg          Maya's own message bubble background
 *   --adc-maya-bubble-text-color  Text color inside both bubble types (defaults to --adc-ink)
 *   --adc-maya-bubble-border      Maya-bubble border color (a distinct opacity from the card/transcript borders in the source)
 *   --adc-maya-card-bg            The card's background
 *   --adc-maya-card-border        The outer card's border color
 *   --adc-maya-transcript-bg      The transcript panel's own background (distinct from the card)
 *   --adc-maya-transcript-border  Transcript panel border (a third, distinct opacity from card/bubble borders)
 *   --adc-maya-surface-bg         Genuine white for chip/input surfaces -- deliberately NOT --adc-paper, which is the page's own ivory background token; using it here pulled in a faint ivory tint instead of true white
 *   --adc-maya-input-border       Message input textarea border (defaults to --adc-maya-card-border)
 *   --adc-maya-focus-ring         Textarea focus box-shadow color (a soft glow, not an outline ring)
 *   --adc-maya-send-btn-start     Gradient start -- shared by the Send button AND user bubbles (the real Priya source uses identical colors for both)
 *   --adc-maya-send-btn-end       Gradient end (same sharing, same fallback-to-solid behavior when unset)
 *   --adc-maya-header-name-color  "Maya" text color in the header (the italic display-font name specifically)
 *   --adc-maya-tagline-color      "Your AI Dating Coach" tagline text color -- a DIFFERENT, more muted color than the name; these two were previously conflated under one misnamed variable, fixed in this cleanup
 *   --adc-maya-chip-text          Suggestion chip text color (defaults to --adc-ink)
 *   --adc-maya-chip-border        Suggestion chip border color (defaults to --adc-maya-card-border)
 *   --adc-maya-disclaimer-color   Disclaimer text color (defaults to --adc-mist)
 *   --adc-mist                     Muted/system text, disabled-state color
 *
 * The AsianDatingCoach theme defines all of these at :root (see its
 * style.css) — under that theme, Maya adopts the approved richer
 * blush/rose/plum palette automatically, purely through the CSS
 * cascade. Under any other theme, or standalone, every rule below falls
 * back to a sensible, deliberately neutral default and still looks
 * correct -- richness is an AsianDatingCoach.ai brand decision, not a
 * plugin-wide default forced on every WordPress site this plugin might
 * ever run on.
 */

/* ==========================================================================
   The card -- a visually bounded container matching Priya's actual
   AsianThrill implementation. Width, colors, and shadow below are
   sourced from her real DT_AI_Coach CSS (via direct source inspection,
   not screenshot estimation) -- this is the approved final baseline,
   not an interpretation. max-width references the shared
   --adc-maya-column-width variable (760px) rather than a hardcoded
   literal, specifically so this file and the theme's style.css can
   never drift out of sync the way they briefly did before this cleanup.
   ========================================================================== */

.maya-card {
	position: relative;
	max-width: var( --adc-maya-column-width, 680px );
	margin: 0 auto;
	padding: 32px 24px;
	background: var( --adc-maya-card-bg, #fff );
	border: 1px solid var( --adc-maya-card-border, rgba( 0, 0, 0, 0.08 ) );
	border-radius: 24px;
	box-shadow: none;
}

/* ==========================================================================
   Coach identity header -- purely presentational (the avatar is
   aria-hidden), gives Maya a stronger sense of being a real product
   rather than a generic embedded chat box. Centered layout, italic
   display-font name, matching Priya's actual title treatment.
   ========================================================================== */

.maya-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
	padding: 0;
	margin: 0 0 24px;
}

.maya-avatar {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var( --adc-gold, var( --adc-ink, #1a1a1a ) );
	color: var( --adc-paper, #fff );
	font-family: var( --adc-font-display, Georgia, serif );
	font-size: 18px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Real avatar image (maya-app.js's renderHeader()) -- fills the circle
   completely via object-fit: cover, so the badge's own circular art
   crops cleanly against this element's circular mask regardless of the
   source image's exact aspect ratio. */
.maya-avatar--image {
	background: none;
}

.maya-avatar--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.maya-header-text {
	text-align: center;
}

.maya-header-name {
	font-family: var( --adc-font-display, Georgia, serif );
	font-size: 26px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.25;
	color: var( --adc-maya-header-name-color, var( --adc-ink, #1a1a1a ) );
}

.maya-header-tagline {
	font-family: var( --adc-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif );
	font-style: normal;
	font-size: 14px;
	line-height: 1.5;
	color: var( --adc-maya-tagline-color, var( --adc-mist, #6b6b6b ) );
	margin-top: 0;
}

.maya-transcript {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* Bounded-height, internally-scrolling panel matching Priya's real
	   implementation (confirmed via source inspection, not just a
	   visible scrollbar in a screenshot). scrollToLatest() in
	   maya-app.js scrolls this element's own scrollTop, not the page. */
	background: var( --adc-maya-transcript-bg, #fff );
	border: 1px solid var( --adc-maya-transcript-border, var( --adc-maya-card-border, rgba( 0, 0, 0, 0.08 ) ) );
	border-radius: 16px;
	margin: 0 0 16px;
	padding: 20px;
	min-height: 400px;
	max-height: 500px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.maya-bubble {
	font-family: var( --adc-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif );
	font-size: 14px;
	line-height: 1.6;
	padding: 10px 14px;
	border-radius: 16px;
	max-width: 80%;
	white-space: pre-wrap;
}

.maya-bubble--maya {
	background: var( --adc-maya-bubble-bg, #f5f5f4 );
	color: var( --adc-maya-bubble-text-color, var( --adc-ink, #1a1a1a ) );
	border: 1px solid var( --adc-maya-bubble-border, var( --adc-maya-card-border, rgba( 0, 0, 0, 0.08 ) ) );
	align-self: flex-start;
	border-radius: 4px 16px 16px 16px;
}

.maya-bubble--user {
	/* Same two-stop gradient as .maya-send-btn, deliberately sharing
	   the --adc-maya-send-btn-start/end token pair rather than
	   introducing separate user-bubble-specific gradient variables --
	   the real Priya source uses identical colors for both elements. */
	background: linear-gradient( 135deg, var( --adc-maya-send-btn-start, var( --adc-ink, #1a1a1a ) ), var( --adc-maya-send-btn-end, var( --adc-ink, #1a1a1a ) ) );
	color: var( --adc-paper, #fff );
	align-self: flex-end;
	border-radius: 16px 4px 16px 16px;
}

.maya-bubble--system {
	background: transparent;
	color: var( --adc-mist, #6b6b6b );
	font-size: 14px;
	align-self: center;
	text-align: center;
	max-width: 100%;
}

/* ==========================================================================
   Age gate (Step 1)
   ========================================================================== */

.maya-age-gate {
	display: flex;
	gap: 12px;
	align-self: flex-start;
	flex-wrap: wrap;
}

.maya-age-btn {
	font-family: var( --adc-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif );
	font-size: 15px;
	font-weight: 600;
	padding: 12px 20px;
	border-radius: 999px;
	border: 1.5px solid var( --adc-ink, #1a1a1a );
	background: transparent;
	color: var( --adc-ink, #1a1a1a );
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.maya-age-btn:hover:not( :disabled ) {
	background: var( --adc-ink, #1a1a1a );
	color: var( --adc-paper, #fff );
}

.maya-age-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.maya-age-btn:focus-visible {
	outline: 2px solid var( --adc-gold, var( --adc-ink, #1a1a1a ) );
	outline-offset: 2px;
}

/* ==========================================================================
   Suggestion chips -- real <button> elements, styled as pills matching
   the age-gate button treatment for visual consistency. Gold accent on
   hover/focus specifically, since these are the one place a slightly
   more assertive use of the accent color earns its keep (a genuine
   call-to-action, not decoration).
   ========================================================================== */

.maya-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 0 12px;
}

.maya-chip {
	font-family: var( --adc-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif );
	font-size: 12px;
	font-weight: 400;
	padding: 6px 14px;
	border-radius: 20px;
	/* White background + colored border + colored text, matching
	   Priya's actual chip treatment precisely (source-confirmed). */
	border: 1.5px solid var( --adc-maya-chip-border, var( --adc-maya-card-border, rgba( 0, 0, 0, 0.15 ) ) );
	/* Deliberately NOT var(--adc-paper, ...) here -- --adc-paper is the
	   page's own ivory background token; a literal white fallback plus
	   an optional dedicated surface variable keeps this genuinely white
	   regardless of the page's ivory tone, matching the approved
	   result exactly. */
	background: var( --adc-maya-surface-bg, #fff );
	color: var( --adc-maya-chip-text, var( --adc-ink, #1a1a1a ) );
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.maya-chip:hover:not( :disabled ) {
	background: var( --adc-maya-bubble-bg, rgba( 0, 0, 0, 0.04 ) );
	transform: none;
}

.maya-chip:disabled {
	opacity: 0.45;
	cursor: default;
	transform: none;
}

.maya-chip:focus-visible {
	outline: 2px solid var( --adc-gold, var( --adc-ink, #1a1a1a ) );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.maya-chip {
		transition: none;
	}
}

/* ==========================================================================
   Step 2: message input area
   ========================================================================== */

.maya-input-area {
	position: static;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

.maya-input-area textarea {
	flex: 1;
	font-family: var( --adc-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif );
	/* 16px minimum is deliberate, not a style preference -- iOS Safari
	   auto-zooms the viewport on focus for any input/textarea under
	   16px, which is jarring inside a chat interface. Preserved exactly
	   even though everything else here changed. */
	font-size: 16px;
	line-height: 1.4;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1.5px solid var( --adc-maya-input-border, var( --adc-maya-card-border, rgba( 0, 0, 0, 0.15 ) ) );
	/* Same reasoning as .maya-chip above -- genuinely white, not the
	   page's ivory --adc-paper token. */
	background: var( --adc-maya-surface-bg, #fff );
	color: var( --adc-maya-bubble-text-color, var( --adc-ink, #1a1a1a ) );
	resize: none;
	max-height: 160px;
	min-height: 52px;
}

.maya-input-area textarea:focus-visible {
	/* Box-shadow glow instead of a hard outline ring -- still a fully
	   visible, real focus indicator, just implemented differently. */
	outline: none;
	border-color: var( --adc-maya-tagline-color, var( --adc-gold, var( --adc-ink, #1a1a1a ) ) );
	box-shadow: 0 0 0 3px var( --adc-maya-focus-ring, rgba( 0, 0, 0, 0.12 ) );
}

.maya-input-area textarea:disabled {
	opacity: 0.6;
}

.maya-send-btn {
	font-family: var( --adc-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif );
	font-size: 14px;
	font-weight: 600;
	padding: 12px 20px;
	height: 52px;
	border-radius: 12px;
	border: none;
	/* Gradient when the theme defines both stops; when it doesn't, both
	   var() calls fall back to the same --adc-ink value, which reads as
	   a plain solid button -- a standalone theme never gets an
	   unrequested gradient it didn't define. */
	background: linear-gradient( 135deg, var( --adc-maya-send-btn-start, var( --adc-ink, #1a1a1a ) ), var( --adc-maya-send-btn-end, var( --adc-ink, #1a1a1a ) ) );
	color: var( --adc-paper, #fff );
	box-shadow: none;
	cursor: pointer;
	flex-shrink: 0;
}

.maya-send-btn:hover:not( :disabled ) {
	opacity: 1;
}

.maya-send-btn:disabled {
	opacity: 0.4;
	cursor: default;
	box-shadow: none;
}

.maya-send-btn:focus-visible {
	outline: 2px solid var( --adc-gold, var( --adc-ink, #1a1a1a ) );
	outline-offset: 2px;
}

/* ==========================================================================
   Disclaimer -- small trust/liability note inside the card, below the
   input area.
   ========================================================================== */

.maya-disclaimer {
	text-align: center;
	font-size: 12px;
	color: var( --adc-maya-disclaimer-color, var( --adc-mist, #6b6b6b ) );
	padding: 0;
	margin: 8px 0 0;
}

/* ==========================================================================
   Step 2: typing indicator
   ========================================================================== */

.maya-typing {
	display: flex;
	gap: 5px;
	align-items: center;
	padding: 16px 18px;
}

.maya-typing-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --adc-mist, #999 );
	animation: maya-typing-pulse 1.2s infinite ease-in-out;
}

.maya-typing-dot:nth-child( 2 ) {
	animation-delay: 0.15s;
}

.maya-typing-dot:nth-child( 3 ) {
	animation-delay: 0.3s;
}

@keyframes maya-typing-pulse {
	0%, 60%, 100% {
		opacity: 0.3;
	}
	30% {
		opacity: 1;
	}
}

/* ==========================================================================
   Step 2: retry prompt
   ========================================================================== */

.maya-retry {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.maya-retry-btn {
	font-family: var( --adc-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif );
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1.5px solid var( --adc-mist, #6b6b6b );
	background: transparent;
	color: var( --adc-ink, #1a1a1a );
	cursor: pointer;
}

.maya-retry-btn:hover {
	border-color: var( --adc-ink, #1a1a1a );
}

.maya-retry-btn:focus-visible {
	outline: 2px solid var( --adc-gold, var( --adc-ink, #1a1a1a ) );
	outline-offset: 2px;
}

/* ==========================================================================
   Reduced motion — both Step 1's transitions and Step 2's additions.
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	.maya-age-btn {
		transition: none;
	}

	.maya-typing-dot {
		animation: none;
		opacity: 0.6;
	}
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media ( max-width: 640px ) {
	.maya-card {
		margin: 0 8px;
		padding: 24px 16px;
		border-radius: 20px;
	}

	.maya-transcript {
		margin: 0 0 14px;
		padding: 16px;
		min-height: 340px;
		max-height: 460px;
	}

	.maya-header {
		padding: 0;
		margin-bottom: 20px;
	}

	.maya-avatar {
		width: 46px;
		height: 46px;
	}

	.maya-chips {
		padding: 0;
		margin-bottom: 12px;
	}

	.maya-chip {
		font-size: 12px;
		padding: 6px 12px;
	}

	.maya-input-area {
		padding: 0;
	}

	.maya-disclaimer {
		padding: 0;
	}

	.maya-bubble {
		max-width: 90%;
	}
}

/* ==========================================================================
   Recommendation card -- reuses every existing token (gradient, fonts,
   surfaces, borders), nothing new invented. Renders as a distinct
   element inside .maya-transcript, not a separate panel.
   ========================================================================== */

.maya-recommendation {
	background: var( --adc-maya-surface-bg, #fff );
	border: 1px solid var( --adc-maya-card-border, rgba( 0, 0, 0, 0.1 ) );
	border-radius: 16px;
	overflow: hidden;
	align-self: flex-start;
	max-width: 92%;
}

.maya-recommendation__accent {
	height: 4px;
	background: linear-gradient( 90deg, var( --adc-maya-send-btn-start, var( --adc-ink, #1a1a1a ) ), var( --adc-maya-send-btn-end, var( --adc-ink, #1a1a1a ) ) );
}

.maya-recommendation__body {
	padding: 18px 20px;
}

.maya-recommendation__badge {
	display: inline-block;
	font-family: var( --adc-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif );
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --adc-maya-tagline-color, var( --adc-mist, #6b6b6b ) );
	background: var( --adc-maya-bubble-bg, #f5f5f4 );
	border-radius: 999px;
	padding: 3px 10px;
	margin-bottom: 10px;
}

.maya-recommendation__name {
	font-family: var( --adc-font-display, Georgia, serif );
	font-style: italic;
	font-size: 22px;
	font-weight: 500;
	color: var( --adc-maya-header-name-color, var( --adc-ink, #1a1a1a ) );
	margin: 0 0 4px;
}

.maya-recommendation__tagline {
	font-family: var( --adc-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif );
	font-size: 13.5px;
	color: var( --adc-maya-tagline-color, var( --adc-mist, #6b6b6b ) );
	margin: 0 0 14px;
}

.maya-recommendation__list {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
}

.maya-recommendation__list li {
	font-family: var( --adc-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif );
	font-size: 13.5px;
	color: var( --adc-maya-bubble-text-color, var( --adc-ink, #1a1a1a ) );
	padding: 4px 0 4px 20px;
	position: relative;
}

.maya-recommendation__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --adc-maya-send-btn-start, var( --adc-ink, #1a1a1a ) );
}

.maya-recommendation__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.maya-recommendation__cta {
	font-family: var( --adc-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif );
	font-size: 14px;
	font-weight: 600;
	padding: 11px 20px;
	border-radius: 12px;
	border: none;
	color: var( --adc-paper, #fff );
	background: linear-gradient( 135deg, var( --adc-maya-send-btn-start, var( --adc-ink, #1a1a1a ) ), var( --adc-maya-send-btn-end, var( --adc-ink, #1a1a1a ) ) );
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.maya-recommendation__secondary {
	font-family: var( --adc-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif );
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 12px;
	border: 1.5px solid var( --adc-maya-chip-border, var( --adc-maya-card-border, rgba( 0, 0, 0, 0.15 ) ) );
	color: var( --adc-maya-chip-text, var( --adc-ink, #1a1a1a ) );
	background: transparent;
	cursor: pointer;
}

.maya-tie-wrap {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-self: flex-start;
	max-width: 96%;
}

.maya-tie-wrap .maya-recommendation {
	flex: 1;
	min-width: 220px;
	max-width: none;
}

.maya-tie-wrap .maya-recommendation__body {
	padding: 16px 18px;
}

.maya-tie-wrap .maya-recommendation__name {
	font-size: 19px;
}

@media ( max-width: 640px ) {
	.maya-tie-wrap {
		flex-direction: column;
	}

	.maya-recommendation {
		max-width: 100%;
	}
}