/* WooAI Assistant — chat widget styles.
 * Premium Soft-UI redesign. 10-tier sage palette, asymmetric bubbles,
 * pulse-ring avatar, typing indicator, flat color layers (no gradients).
 * All selectors prefixed with .wooai- and host-theme-isolated.
 */

.wooai-widget {
	--wooai-sage-50:  #F3F9F5;
	--wooai-sage-100: #E7F3EA;
	--wooai-sage-200: #CFE6D4;
	--wooai-sage-300: #A9D2B3;
	--wooai-sage-400: #73B085;
	--wooai-sage-500: #4A9164;
	--wooai-sage-600: #347049;
	--wooai-sage-700: #265438;
	--wooai-sage-800: #1A3D28;
	--wooai-sage-900: #0E2518;

	--wooai-accent-mint: #10B981;
	--wooai-amber-500:   #F59E0B;

	--wooai-canvas:  #FAFCFA;
	--wooai-surface: #FFFFFF;

	--wooai-text-primary:     var( --wooai-sage-900 );
	--wooai-text-body:        var( --wooai-sage-800 );
	--wooai-text-muted:       var( --wooai-sage-600 );
	--wooai-text-subtle:      var( --wooai-sage-400 );
	--wooai-text-placeholder: rgba( 38, 84, 56, 0.45 );
	--wooai-text-footer:      rgba( 38, 84, 56, 0.50 );

	--wooai-border-panel:  rgba( 38, 84, 56, 0.12 );
	--wooai-border-header: rgba( 38, 84, 56, 0.08 );
	--wooai-border-chip:   var( --wooai-sage-300 );
	--wooai-border-input:  var( --wooai-sage-200 );

	--wooai-radius-panel:       24px;
	--wooai-radius-bubble:      20px;
	--wooai-radius-bubble-tail: 6px;
	--wooai-radius-chip:        16px;
	--wooai-radius-input:       24px;
	--wooai-radius-close:       50%;

	position: fixed;
	z-index: 999999;
	bottom: 24px;
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: var( --wooai-text-body );
}

.wooai-widget[data-position="bottom-left"]  { left:  24px; }
.wooai-widget[data-position="bottom-right"] { right: 24px; }

/* ---------- Theme isolation reset ----------
 * Defends widget elements from aggressive host-theme styles (WoodMart,
 * Astra, Flatsome etc.) that target raw tags. Tag-qualified component
 * rules below re-assert our styles with equal/higher specificity.
 */

.wooai-widget button,
.wooai-widget input,
.wooai-widget textarea,
.wooai-widget select,
.wooai-widget a,
.wooai-widget img,
.wooai-widget p,
.wooai-widget h1,
.wooai-widget h2,
.wooai-widget h3,
.wooai-widget h4,
.wooai-widget h5,
.wooai-widget h6,
.wooai-widget ul,
.wooai-widget ol,
.wooai-widget li,
.wooai-widget span,
.wooai-widget div,
.wooai-widget form,
.wooai-widget header,
.wooai-widget footer,
.wooai-widget section {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-weight: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	min-height: 0;
	max-height: none;
	text-decoration: none;
}

.wooai-widget button {
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.wooai-widget input,
.wooai-widget textarea {
	outline: none;
	font: inherit;
}

.wooai-widget img {
	display: block;
	max-width: 100%;
	height: auto;
}

.wooai-widget a {
	text-decoration: none;
	color: inherit;
}

/* Inline links inside assistant chat bubbles must be visible + clickable.
   Overrides the global reset above for the message body context only. */
.wooai-widget .wooai-widget__message--assistant a,
.wooai-widget .wooai-widget__bubble-text a {
	color: var( --wooai-link-color, #0a66c2 );
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-word;
}
.wooai-widget .wooai-widget__message--assistant a:hover,
.wooai-widget .wooai-widget__bubble-text a:hover {
	text-decoration-thickness: 2px;
	opacity: 0.85;
}

.wooai-widget ul,
.wooai-widget ol {
	list-style: none;
}

.wooai-widget *,
.wooai-widget *::before,
.wooai-widget *::after {
	box-sizing: border-box;
}

/* ---------- Keyframes ---------- */

@keyframes wooai-pulse-ring {
	0%   { transform: scale( 1 );    opacity: 0.4; }
	100% { transform: scale( 1.35 ); opacity: 0;   }
}

@keyframes wooai-pulse-dot {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}

@keyframes wooai-slide-up {
	from { opacity: 0; transform: translateY( 8px ); }
	to   { opacity: 1; transform: translateY( 0 );   }
}

@keyframes wooai-typing-bounce {
	0%, 60%, 100% { opacity: 0.35; transform: translateY( 0 );    }
	30%           { opacity: 1;    transform: translateY( -3px ); }
}

/* Görev 3.8 — horizontal shake for "correcting" state (silme hissi). */
@keyframes wooai-typing-correct {
	0%, 100% { transform: translateX( 0 )    scale( 1 );   opacity: 0.7; }
	25%      { transform: translateX( -3px ) scale( 0.9 ); opacity: 0.5; }
	50%      { transform: translateX( 0 )    scale( 1 );   opacity: 0.8; }
	75%      { transform: translateX( 3px )  scale( 1.1 ); opacity: 1;   }
}

/* Görev 3.8 — bubble fades out, briefly disappears, fades back in.
 * Triggered rarely (~5% from typing, 3% from paused) to hint that the
 * assistant "stepped away" for a breath before continuing.
 */
@keyframes wooai-typing-vanish {
	0%   { opacity: 1; transform: scale( 1 )    translateY( 0 );   }
	35%  { opacity: 0; transform: scale( 0.85 ) translateY( 4px ); }
	65%  { opacity: 0; transform: scale( 0.85 ) translateY( 4px ); }
	100% { opacity: 1; transform: scale( 1 )    translateY( 0 );   }
}

@keyframes wooai-panel-open {
	from { opacity: 0; transform: translateY( 16px ) scale( 0.96 ); }
	to   { opacity: 1; transform: translateY( 0 )    scale( 1 );    }
}

/* ---------- Bubble (closed) ---------- */

.wooai-widget button.wooai-widget__bubble {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var( --wooai-sage-500 );
	color: var( --wooai-canvas );
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: transform 200ms ease, background 200ms ease;
}

.wooai-widget button.wooai-widget__bubble:hover {
	transform: scale( 1.05 );
	background: var( --wooai-sage-600 );
}

.wooai-widget button.wooai-widget__bubble:focus-visible {
	outline: 2px solid var( --wooai-sage-400 );
	outline-offset: 2px;
}

.wooai-widget.is-open button.wooai-widget__bubble {
	transform: scale( 0.92 );
	opacity: 0.8;
}

/* ---------- Panel ----------
 * Transitions (not @keyframes) so both open AND close animate smoothly.
 * The wooai-panel-open keyframe is defined above for semantic / spec use.
 */

div.wooai-widget__panel {
	position: absolute;
	bottom: 80px;
	width: 380px;
	height: 640px;
	background: var( --wooai-canvas );
	border-radius: var( --wooai-radius-panel );
	border: 0.5px solid var( --wooai-border-panel );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY( 16px ) scale( 0.96 );
	pointer-events: none;
	transition: opacity 420ms cubic-bezier( 0.16, 1, 0.3, 1 ),
	            transform 420ms cubic-bezier( 0.16, 1, 0.3, 1 );
}

.wooai-widget.is-open div.wooai-widget__panel {
	opacity: 1;
	transform: translateY( 0 ) scale( 1 );
	pointer-events: auto;
}

.wooai-widget[data-position="bottom-left"]  div.wooai-widget__panel {
	left: 0;
	transform-origin: bottom left;
}
.wooai-widget[data-position="bottom-right"] div.wooai-widget__panel {
	right: 0;
	transform-origin: bottom right;
}

/* ---------- Header ---------- */

header.wooai-widget__header {
	padding: 18px 20px;
	background: var( --wooai-sage-100 );
	border-bottom: 0.5px solid var( --wooai-border-header );
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* ---------- Avatar (ring + circle + dot) ---------- */

div.wooai-widget__avatar {
	position: relative;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
}

div.wooai-widget__avatar-ring {
	position: absolute;
	inset: 0;
	border: 1.5px solid var( --wooai-sage-500 );
	border-radius: 50%;
	animation: wooai-pulse-ring 2s ease-out infinite;
	pointer-events: none;
}

div.wooai-widget__avatar-circle {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var( --wooai-sage-500 );
	color: var( --wooai-canvas );
	font-size: 17px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

img.wooai-widget__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

div.wooai-widget__avatar-dot {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var( --wooai-accent-mint );
	border: 2px solid var( --wooai-sage-100 );
	animation: wooai-pulse-dot 2.4s ease-in-out infinite;
	z-index: 2;
}

/* ---------- Identity ---------- */

div.wooai-widget__identity {
	flex: 1;
	min-width: 0;
}

div.wooai-widget__name {
	font-size: 15px;
	font-weight: 500;
	color: var( --wooai-text-primary );
	line-height: 1.25;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

div.wooai-widget__status {
	font-size: 12px;
	font-weight: 400;
	color: var( --wooai-text-muted );
	margin-top: 3px;
	line-height: 1.3;
}

/* ---------- Close ---------- */

.wooai-widget button.wooai-widget__close {
	width: 28px;
	height: 28px;
	border-radius: var( --wooai-radius-close );
	background: rgba( 38, 84, 56, 0.06 );
	color: var( --wooai-sage-700 );
	border: 0;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s ease;
}

.wooai-widget button.wooai-widget__close:hover {
	background: rgba( 38, 84, 56, 0.12 );
}

.wooai-widget button.wooai-widget__close:focus-visible {
	outline: 2px solid var( --wooai-sage-400 );
	outline-offset: 2px;
}

/* ---------- Messages ---------- */

div.wooai-widget__messages {
	flex: 1;
	min-width: 0;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-gutter: stable;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var( --wooai-canvas );
	scroll-behavior: smooth;
	contain: layout;
}

div.wooai-widget__messages::-webkit-scrollbar { width: 6px; }
div.wooai-widget__messages::-webkit-scrollbar-thumb {
	background: var( --wooai-sage-300 );
	border-radius: 3px;
}
div.wooai-widget__messages::-webkit-scrollbar-track { background: transparent; }

/* ---------- Timestamp ---------- */

div.wooai-widget__timestamp {
	text-align: center;
	font-size: 11px;
	color: var( --wooai-text-subtle );
	margin: 2px 0 8px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	flex-shrink: 0;
}

/* ---------- Message bubbles (asymmetric) ---------- */

div.wooai-widget__message {
	font-size: 14px;
	line-height: 1.55;
	padding: 12px 16px;
	min-width: 0;
	box-sizing: border-box;
	flex-shrink: 0;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
	overflow: hidden;
	hyphens: auto;
	animation: wooai-slide-up 0.35s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

div.wooai-widget__message--assistant {
	align-self: flex-start;
	max-width: min( 76%, calc( 100% - 48px ) );
	margin-left: 2px;
	background: var( --wooai-sage-100 );
	color: var( --wooai-sage-800 );
	border-radius: var( --wooai-radius-bubble ) var( --wooai-radius-bubble ) var( --wooai-radius-bubble ) var( --wooai-radius-bubble-tail );
}

div.wooai-widget__message--user {
	align-self: flex-end;
	max-width: min( 72%, calc( 100% - 56px ) );
	margin-right: 6px;
	background: var( --wooai-sage-500 );
	color: var( --wooai-canvas );
	border-radius: var( --wooai-radius-bubble ) var( --wooai-radius-bubble ) var( --wooai-radius-bubble-tail ) var( --wooai-radius-bubble );
}

/* ---------- Typing indicator (inside messages) ---------- */

div.wooai-widget__typing {
	align-self: flex-start;
	max-width: min( 76%, calc( 100% - 48px ) );
	min-width: 0;
	margin-left: 2px;
	background: var( --wooai-sage-100 );
	padding: 14px 18px;
	border-radius: var( --wooai-radius-bubble ) var( --wooai-radius-bubble ) var( --wooai-radius-bubble ) var( --wooai-radius-bubble-tail );
	margin-top: 6px;
	display: flex;
	gap: 4px;
	align-items: center;
	flex-shrink: 0;
	overflow: hidden;
}

span.wooai-widget__typing-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --wooai-sage-500 );
	display: inline-block;
}

/* Görev 3.8 — human-like typing sub-state machine. widget.js sets
 * data-typing-state on the bubble; each value scopes a different dot
 * animation. 'vanish' targets the bubble itself (fade out → back in)
 * while the dots pause, so the whole indicator disappears briefly.
 */
div.wooai-widget__typing[data-typing-state="typing"] span.wooai-widget__typing-dot {
	animation: wooai-typing-bounce 1.4s ease-in-out infinite;
}
div.wooai-widget__typing[data-typing-state="typing"] span.wooai-widget__typing-dot:nth-child( 2 ) { animation-delay: 0.15s; }
div.wooai-widget__typing[data-typing-state="typing"] span.wooai-widget__typing-dot:nth-child( 3 ) { animation-delay: 0.3s;  }

div.wooai-widget__typing[data-typing-state="paused"] span.wooai-widget__typing-dot {
	animation: none;
	opacity: 0.4;
	transform: translateY( 0 );
}

div.wooai-widget__typing[data-typing-state="correcting"] span.wooai-widget__typing-dot {
	animation: wooai-typing-correct 0.55s ease-in-out infinite;
}
div.wooai-widget__typing[data-typing-state="correcting"] span.wooai-widget__typing-dot:nth-child( 1 ) { animation-delay: 0s;    }
div.wooai-widget__typing[data-typing-state="correcting"] span.wooai-widget__typing-dot:nth-child( 2 ) { animation-delay: 0.08s; }
div.wooai-widget__typing[data-typing-state="correcting"] span.wooai-widget__typing-dot:nth-child( 3 ) { animation-delay: 0.16s; }

div.wooai-widget__typing[data-typing-state="vanish"] {
	animation: wooai-typing-vanish 1.2s ease-in-out forwards;
}
div.wooai-widget__typing[data-typing-state="vanish"] span.wooai-widget__typing-dot {
	animation: none;
}

/* ---------- Status row (error + countdown + retry) ---------- */

div.wooai-widget__status-row {
	padding: 0 18px 4px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: var( --wooai-text-muted );
	flex-shrink: 0;
}

div.wooai-widget__status-row:empty { padding: 0; }

span.wooai-widget__error { color: #8A1F1F; }

.wooai-widget button.wooai-widget__retry {
	background: transparent;
	border: 0.5px solid var( --wooai-sage-500 );
	color: var( --wooai-sage-700 );
	padding: 4px 12px;
	border-radius: var( --wooai-radius-chip );
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s ease;
}

.wooai-widget button.wooai-widget__retry:hover {
	background: var( --wooai-sage-100 );
}

.wooai-widget button.wooai-widget__retry:focus-visible {
	outline: 2px solid var( --wooai-sage-400 );
	outline-offset: 2px;
}

/* ---------- Quick reply chips ---------- */

div.wooai-widget__chips {
	padding: 8px 18px 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
	background: var( --wooai-canvas );
	flex-shrink: 0;
}

div.wooai-widget__chips--hidden { display: none; }

.wooai-widget button.wooai-widget__chip {
	font-size: 12px;
	padding: 7px 13px;
	border-radius: var( --wooai-radius-chip );
	border: 0.5px solid var( --wooai-border-chip );
	color: var( --wooai-sage-700 );
	background: rgba( 231, 243, 234, 0.5 );
	font-family: inherit;
	font-weight: 500;
	cursor: pointer;
	line-height: 1.2;
	white-space: nowrap;
	animation: wooai-slide-up 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
	transition: background 0.15s ease, transform 0.15s ease;
}

.wooai-widget button.wooai-widget__chip:nth-child( 2 ) { animation-delay: 0.1s; }
.wooai-widget button.wooai-widget__chip:nth-child( 3 ) { animation-delay: 0.2s; }
.wooai-widget button.wooai-widget__chip:nth-child( 4 ) { animation-delay: 0.3s; }
.wooai-widget button.wooai-widget__chip:nth-child( 5 ) { animation-delay: 0.4s; }

.wooai-widget button.wooai-widget__chip:hover {
	background: var( --wooai-sage-100 );
	transform: translateY( -1px );
}

.wooai-widget button.wooai-widget__chip:focus-visible {
	outline: 2px solid var( --wooai-sage-400 );
	outline-offset: 2px;
}

/* ---------- Input area ---------- */

div.wooai-widget__input-wrap {
	padding: 4px 14px 12px;
	background: var( --wooai-canvas );
	flex-shrink: 0;
}

div.wooai-widget__input-capsule {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var( --wooai-surface );
	border-radius: var( --wooai-radius-input );
	/* AUDIT-FIX [widget-input] Reduced left padding (18→14) — themes
	 * occasionally inject leading whitespace via inset-shadow that made
	 * 18px feel like a "white block" on the left.
	 * Reduced vertical padding (7→4) so the capsule hugs the 36px send
	 * button — eliminates the white "obstacle" above the placeholder. */
	padding: 4px 4px 4px 14px;
	border: 0.5px solid var( --wooai-border-input );
	transition: border-color 0.15s ease;
	position: relative;
	box-sizing: border-box;
}

/* AUDIT-FIX [widget-input] Some themes add ::before icons to form rows.
 * Kill any pseudo-element decorations inside the capsule. */
div.wooai-widget__input-capsule::before,
div.wooai-widget__input-capsule::after {
	content: none !important;
	display: none !important;
}

div.wooai-widget__input-capsule:focus-within {
	border-color: var( --wooai-sage-400 );
}

.wooai-widget textarea.wooai-widget__input {
	flex: 1 1 auto !important;
	width: 100% !important;
	font-size: 14px !important;
	color: var( --wooai-sage-800 ) !important;
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	resize: none !important;
	height: auto !important;
	min-height: 22px !important;
	max-height: 120px !important;
	font-family: inherit !important;
	line-height: 1.5 !important;
	/* AUDIT-FIX [widget-input] !important + explicit zero left/right
	 * padding so theme overrides (Woodmart, Astra inject form padding)
	 * cannot push the text behind the capsule edge. */
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	background-image: none !important;
}

/* AUDIT-FIX [widget-input] Theme-injected ::before icons on textarea. */
.wooai-widget textarea.wooai-widget__input::before,
.wooai-widget textarea.wooai-widget__input::after {
	content: none !important;
	display: none !important;
}

.wooai-widget textarea.wooai-widget__input::placeholder {
	color: var( --wooai-text-placeholder );
}

.wooai-widget textarea.wooai-widget__input[disabled] {
	color: var( --wooai-text-muted );
	opacity: 0.7;
}

.wooai-widget button.wooai-widget__send {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var( --wooai-sage-500 );
	color: var( --wooai-canvas );
	border: 0;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s ease, transform 0.1s ease;
}

.wooai-widget button.wooai-widget__send:hover {
	background: var( --wooai-sage-600 );
}

.wooai-widget button.wooai-widget__send:active {
	transform: scale( 0.95 );
}

.wooai-widget button.wooai-widget__send:focus-visible {
	outline: 2px solid var( --wooai-sage-300 );
	outline-offset: 2px;
}

.wooai-widget button.wooai-widget__send[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ---------- Footer ---------- */

div.wooai-widget__footer {
	font-size: 11px;
	color: var( --wooai-text-footer );
	text-align: center;
	margin-top: 10px;
	letter-spacing: 0.01em;
}

/* ---------- Mobile (partial, not full-screen) ---------- */

@media ( max-width: 767px ) {
	.wooai-widget[data-position] { bottom: 16px; }
	.wooai-widget[data-position="bottom-left"]  { left:  12px; }
	.wooai-widget[data-position="bottom-right"] { right: 12px; }

	div.wooai-widget__panel {
		width: calc( 100vw - 24px );
		max-width: 380px;
		height: 78dvh;
		max-height: 640px;
		bottom: 80px;
	}
}

/* ---------- Connecting banner (Phase 4.1) ---------- */

/* Inline variant — sits at the top of the messages area so the customer
 * can still read prior transcript (returning visitor) or type queued
 * questions underneath. Spec §2.3 override: input stays open during
 * the wait, so no input-disabled styling here.
 */
.wooai-widget div.wooai-widget__connecting {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	margin: 0 0 4px;
	background: var( --wooai-sage-50 );
	border: 0.5px solid var( --wooai-sage-200 );
	border-radius: 14px;
	animation: wooai-slide-up 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
	flex-shrink: 0;
}

.wooai-widget div.wooai-widget__connecting-icon {
	width: 18px;
	height: 18px;
	border: 2px solid var( --wooai-sage-200 );
	border-top-color: var( --wooai-sage-500 );
	border-radius: 50%;
	animation: wooai-spin 1.2s linear infinite;
	flex-shrink: 0;
}

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

.wooai-widget div.wooai-widget__connecting-content {
	flex: 1;
	min-width: 0;
}

.wooai-widget div.wooai-widget__connecting-title {
	font-size: 13px;
	font-weight: 500;
	color: var( --wooai-sage-800 );
	line-height: 1.35;
}

.wooai-widget p.wooai-widget__connecting-subtitle {
	font-size: 12px;
	color: var( --wooai-sage-600 );
	margin: 2px 0 0;
	line-height: 1.4;
}

.wooai-widget p.wooai-widget__connecting-subtitle strong {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var( --wooai-sage-800 );
}

/* ---------- Reduced motion ---------- */

@media ( prefers-reduced-motion: reduce ) {
	.wooai-widget *,
	.wooai-widget *::before,
	.wooai-widget *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	/* Görev 3.8 — typing sub-state machine off entirely. Dots stay
	 * visible with a muted opacity so the bubble still reads as
	 * "assistant thinking" without any motion.
	 */
	.wooai-widget div.wooai-widget__typing[data-typing-state] span.wooai-widget__typing-dot {
		animation: none !important;
		opacity: 0.6;
	}

	/* Görev 3.9 — idle banner slide-up and rating emoji spring are the
	 * two new animations introduced by this milestone. Neither carries
	 * essential information; disable so motion-sensitive users see an
	 * instant appear/resize instead.
	 */
	.wooai-widget div.wooai-widget__idle-banner {
		animation: none;
	}
	.wooai-widget button.wooai-widget__rating-emoji {
		transition: none;
	}

	/* Phase 4.1 — connecting spinner + slide-up kept static. The
	 * countdown digits still update (that's a text change, not motion).
	 */
	.wooai-widget div.wooai-widget__connecting {
		animation: none !important;
	}
	.wooai-widget div.wooai-widget__connecting-icon {
		animation: none !important;
	}
}

/* ---------- Idle banner + countdown (Görev 3.9) ---------- */

.wooai-widget div.wooai-widget__idle-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 18px;
	padding: 12px 14px;
	background: var( --wooai-sage-50 );
	border: 0.5px solid var( --wooai-sage-300 );
	border-radius: 14px;
	animation: wooai-slide-up 0.3s cubic-bezier( 0.22, 1, 0.36, 1 );
	flex-shrink: 0;
}

.wooai-widget div.wooai-widget__idle-icon {
	font-size: 18px;
	opacity: 0.75;
	flex-shrink: 0;
	line-height: 1;
}

.wooai-widget div.wooai-widget__idle-content {
	flex: 1;
	min-width: 0;
}

.wooai-widget div.wooai-widget__idle-title {
	font-size: 13px;
	font-weight: 500;
	color: var( --wooai-sage-800 );
	line-height: 1.3;
}

.wooai-widget div.wooai-widget__idle-subtitle {
	font-size: 12px;
	color: var( --wooai-sage-600 );
	margin-top: 2px;
	line-height: 1.4;
}

.wooai-widget div.wooai-widget__idle-subtitle strong {
	font-weight: 500;
	color: var( --wooai-sage-800 );
	font-variant-numeric: tabular-nums;
}

/* ---------- Satisfaction rating overlay (Görev 3.6, 3.9 revise) ---------- */

.wooai-widget div.wooai-widget__rating {
	margin: 12px 18px;
	padding: 20px 18px 16px;
	background: var( --wooai-sage-50 );
	border: 0.5px solid var( --wooai-border-panel );
	border-radius: var( --wooai-radius-bubble );
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wooai-widget div.wooai-widget__rating-title {
	font-size: 14px;
	font-weight: 600;
	color: var( --wooai-text-primary );
	text-align: center;
}

/* Görev 3.9 — emoji drag row. touch-action:none suppresses page scroll
 * while the customer is sliding a finger horizontally, and user-select
 * prevents the emoji glyphs from being selected as text mid-drag.
 */
.wooai-widget div.wooai-widget__rating-emojis {
	display: flex;
	justify-content: space-between;
	padding: 14px 16px;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.wooai-widget button.wooai-widget__rating-emoji {
	background: transparent;
	border: 0;
	padding: 4px;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	will-change: transform, opacity;
	transform-origin: center bottom;
	transition: transform 0.42s cubic-bezier( 0.34, 1.35, 0.64, 1 ),
	            opacity   0.38s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
	transform: scale( 0.85 );
	opacity: 0.6;
	pointer-events: auto;
}

.wooai-widget button.wooai-widget__rating-emoji.is-adjacent {
	transform: scale( 1.0 );
	opacity: 0.85;
}

.wooai-widget button.wooai-widget__rating-emoji.is-selected {
	transform: scale( 1.5 );
	opacity: 1;
}

.wooai-widget button.wooai-widget__rating-emoji:focus-visible {
	outline: 2px solid var( --wooai-sage-400 );
	outline-offset: 2px;
	border-radius: 8px;
}

.wooai-widget div.wooai-widget__rating-label {
	text-align: center;
	font-size: 13px;
	color: var( --wooai-sage-700 );
	min-height: 18px;
	font-weight: 500;
}

.wooai-widget div.wooai-widget__rating-label.is-placeholder {
	color: var( --wooai-sage-400 );
	font-weight: 400;
	font-style: italic;
}

.wooai-widget textarea.wooai-widget__rating-comment {
	width: 100%;
	background: var( --wooai-canvas );
	border: 0.5px solid var( --wooai-sage-200 );
	border-radius: 12px;
	padding: 10px 12px;
	resize: none;
	min-height: 52px;
	font-size: 13px;
	line-height: 1.5;
	color: var( --wooai-text-body );
	font-family: inherit;
	outline: none;
	transition: border-color 0.15s ease;
}

.wooai-widget textarea.wooai-widget__rating-comment:focus {
	border-color: var( --wooai-sage-500 );
}

.wooai-widget textarea.wooai-widget__rating-comment::placeholder {
	color: var( --wooai-text-placeholder );
}

.wooai-widget button.wooai-widget__rating-submit {
	background: var( --wooai-sage-500 );
	border: 0;
	color: var( --wooai-canvas );
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	align-self: center;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.wooai-widget button.wooai-widget__rating-submit:hover:not( [disabled] ) {
	background: var( --wooai-sage-600 );
}

.wooai-widget button.wooai-widget__rating-submit:focus-visible {
	outline: 2px solid var( --wooai-sage-400 );
	outline-offset: 2px;
}

.wooai-widget button.wooai-widget__rating-submit[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.wooai-widget div.wooai-widget__rating-thanks {
	text-align: center;
	color: var( --wooai-sage-600 );
	font-size: 13px;
	font-weight: 500;
	padding: 8px;
}

/* ---------- Lifecycle (Görev 3.7) — idle system message + closed banner ---------- */

.wooai-widget div.wooai-widget__message--system {
	align-self: center;
	max-width: 86%;
	background: var( --wooai-sage-50 );
	color: var( --wooai-sage-700 );
	border: 0.5px dashed var( --wooai-sage-300 );
	border-radius: 14px;
	font-style: italic;
	padding: 8px 14px;
	font-size: 12.5px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.wooai-widget span.wooai-widget__system-icon {
	font-style: normal;
	font-size: 14px;
	opacity: 0.72;
	flex-shrink: 0;
}

.wooai-widget span.wooai-widget__system-text {
	line-height: 1.5;
}

/* AUDIT-FIX [widget-banner] Single tight box with !important guards
 * against parent theme CSS (Woodmart often italicizes/underlines
 * <small> + adds link-like decoration to anything inside chat areas). */
.wooai-widget div.wooai-widget__closed-banner {
	align-self: center !important;
	max-width: 86% !important;
	margin: 12px auto !important;
	background: rgba( 38, 84, 56, 0.06 ) !important;
	border: 1px solid var( --wooai-border-panel ) !important;
	border-radius: 14px !important;
	padding: 12px 16px !important;
	text-align: center !important;
	color: var( --wooai-sage-800 ) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	font-style: normal !important;
	text-decoration: none !important;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
}
.wooai-widget div.wooai-widget__closed-banner-title {
	font-weight: 600 !important;
	color: var( --wooai-sage-800 ) !important;
	text-decoration: none !important;
	font-style: normal !important;
}
.wooai-widget div.wooai-widget__closed-banner-hint {
	margin-top: 4px !important;
	color: var( --wooai-sage-600 ) !important;
	font-size: 11.5px !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	font-style: normal !important;
	opacity: 1 !important;
}

/* ====================================================================
 * Phase 4.4 — Product recommendation cards (horizontal carousel).
 * Rendered when /chat response includes a non-empty products[] array.
 * All classes new + tag-qualified by `.wooai-widget` on the container.
 * No changes to the 2.3 bubble/typing/rating/idle layers above.
 * ==================================================================== */

.wooai-widget .wooai-widget__message--catalog {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-self: stretch;
	align-items: flex-start;
	background: transparent !important;
	padding: 0 !important;
	max-width: 100% !important;
}

.wooai-widget .wooai-widget__bubble-text {
	align-self: flex-start;
	max-width: 88%;
	padding: 10px 14px;
	background: var( --wooai-sage-100 );
	color: var( --wooai-sage-800 );
	border-radius: var( --wooai-radius-bubble );
	border-bottom-left-radius: var( --wooai-radius-bubble-tail );
	font-size: 13.5px;
	line-height: 1.5;
}

/* Carousel wrap — right-to-left scrollable, smooth snap. */
.wooai-widget .wooai-widget__pcards {
	align-self: stretch;
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 10px;
	padding: 4px 14px 10px 4px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-left: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba( 38, 84, 56, 0.25 ) transparent;
	-webkit-mask-image: linear-gradient( to right, black calc( 100% - 18px ), transparent );
	        mask-image: linear-gradient( to right, black calc( 100% - 18px ), transparent );
}
.wooai-widget .wooai-widget__pcards::-webkit-scrollbar        { height: 4px; }
.wooai-widget .wooai-widget__pcards::-webkit-scrollbar-track  { background: transparent; }
.wooai-widget .wooai-widget__pcards::-webkit-scrollbar-thumb {
	background: rgba( 38, 84, 56, 0.22 );
	border-radius: 2px;
}
.wooai-widget .wooai-widget__pcards::-webkit-scrollbar-thumb:hover {
	background: rgba( 38, 84, 56, 0.42 );
}

/* Entrance animation — cards slide in from the right, staggered. */
@keyframes wooai-pcard-enter {
	from { opacity: 0; transform: translateX( 28px ); }
	to   { opacity: 1; transform: translateX( 0 ); }
}

.wooai-widget .wooai-widget__pcard {
	background: white;
	border: 1px solid rgba( 38, 84, 56, 0.10 );
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba( 14, 37, 24, 0.04 );
	transition: box-shadow 220ms cubic-bezier( 0.3, 0.8, 0.4, 1 ),
	            transform  220ms cubic-bezier( 0.3, 0.8, 0.4, 1 );
	flex-shrink: 0;
	scroll-snap-align: start;
	animation: wooai-pcard-enter 420ms cubic-bezier( 0.25, 0.85, 0.35, 1 ) both;
}
.wooai-widget .wooai-widget__pcard:hover {
	box-shadow: 0 6px 18px rgba( 14, 37, 24, 0.10 );
	transform: translateY( -2px );
}

.wooai-widget .wooai-widget__pcard-image {
	position: relative;
	background: linear-gradient( 135deg, #f8f8f8 0%, #eaeaea 100% );
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.wooai-widget .wooai-widget__pcard-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wooai-widget .wooai-widget__pcard-image.is-fallback::after {
	content: '🛍️';
	font-size: 32px;
	opacity: 0.35;
}

.wooai-widget .wooai-widget__pcard-body {
	display: flex;
	flex-direction: column;
}
.wooai-widget .wooai-widget__pcard-title {
	font-weight: 700;
	color: var( --wooai-sage-900 );
	line-height: 1.3;
	letter-spacing: -0.005em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wooai-widget .wooai-widget__message--assistant a.wooai-widget__pcard-cta,
.wooai-widget .wooai-widget__pcard-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --wooai-sage-800 );
	color: white !important;
	text-decoration: none !important;
	font-weight: 600;
	transition: background 140ms;
}
.wooai-widget .wooai-widget__message--assistant a.wooai-widget__pcard-cta:hover,
.wooai-widget .wooai-widget__pcard-cta:hover {
	background: var( --wooai-sage-900 );
	color: white !important;
	text-decoration: none !important;
}
.wooai-widget .wooai-widget__pcard-cta span,
.wooai-widget .wooai-widget__pcard-cta svg {
	color: white;
	text-decoration: none;
}

/* --- SIZE VARIANTS --- */

/* COMPACT — yatay iç layout, ~2 kart görünür */
.wooai-widget .wooai-widget__pcards[data-card-size="compact"] .wooai-widget__pcard {
	width: 56%;
	min-width: 200px;
	max-width: 240px;
	border-radius: 10px;
	flex-direction: row;
	align-items: stretch;
}
.wooai-widget .wooai-widget__pcards[data-card-size="compact"] .wooai-widget__pcard-image {
	aspect-ratio: 1 / 1;
	width: 72px;
	flex-shrink: 0;
}
.wooai-widget .wooai-widget__pcards[data-card-size="compact"] .wooai-widget__pcard-body {
	flex: 1;
	padding: 8px 10px;
	gap: 6px;
	justify-content: space-between;
}
.wooai-widget .wooai-widget__pcards[data-card-size="compact"] .wooai-widget__pcard-title { font-size: 11.5px; }
.wooai-widget .wooai-widget__pcards[data-card-size="compact"] .wooai-widget__pcard-cta {
	padding: 5px 10px;
	border-radius: 7px;
	font-size: 10.5px;
	gap: 4px;
	align-self: flex-start;
}
.wooai-widget .wooai-widget__pcards[data-card-size="compact"] .wooai-widget__pcard-cta svg { width: 10px; height: 10px; }

/* NORMAL — dikey orta kart, ~1.3 kart görünür (default) */
.wooai-widget .wooai-widget__pcards[data-card-size="normal"] .wooai-widget__pcard,
.wooai-widget .wooai-widget__pcards:not([data-card-size]) .wooai-widget__pcard {
	width: 72%;
	min-width: 210px;
	max-width: 260px;
	border-radius: 14px;
}
.wooai-widget .wooai-widget__pcards[data-card-size="normal"] .wooai-widget__pcard-image,
.wooai-widget .wooai-widget__pcards:not([data-card-size]) .wooai-widget__pcard-image {
	aspect-ratio: 4 / 3;
}
.wooai-widget .wooai-widget__pcards[data-card-size="normal"] .wooai-widget__pcard-body,
.wooai-widget .wooai-widget__pcards:not([data-card-size]) .wooai-widget__pcard-body {
	padding: 9px 11px 11px;
	gap: 7px;
}
.wooai-widget .wooai-widget__pcards[data-card-size="normal"] .wooai-widget__pcard-title,
.wooai-widget .wooai-widget__pcards:not([data-card-size]) .wooai-widget__pcard-title {
	font-size: 12.5px;
}
.wooai-widget .wooai-widget__pcards[data-card-size="normal"] .wooai-widget__pcard-cta,
.wooai-widget .wooai-widget__pcards:not([data-card-size]) .wooai-widget__pcard-cta {
	padding: 7px 12px;
	border-radius: 9px;
	font-size: 11.5px;
	gap: 6px;
}
.wooai-widget .wooai-widget__pcards[data-card-size="normal"] .wooai-widget__pcard-cta svg,
.wooai-widget .wooai-widget__pcards:not([data-card-size]) .wooai-widget__pcard-cta svg {
	width: 11px;
	height: 11px;
}

/* LARGE — dikey geniş, tek kart + peek */
.wooai-widget .wooai-widget__pcards[data-card-size="large"] .wooai-widget__pcard {
	width: 84%;
	min-width: 240px;
	max-width: 320px;
	border-radius: 18px;
}
.wooai-widget .wooai-widget__pcards[data-card-size="large"] .wooai-widget__pcard-image {
	aspect-ratio: 1 / 1;
}
.wooai-widget .wooai-widget__pcards[data-card-size="large"] .wooai-widget__pcard-body {
	padding: 12px 14px 14px;
	gap: 10px;
}
.wooai-widget .wooai-widget__pcards[data-card-size="large"] .wooai-widget__pcard-title { font-size: 14px; }
.wooai-widget .wooai-widget__pcards[data-card-size="large"] .wooai-widget__pcard-cta {
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 13px;
	gap: 8px;
}
.wooai-widget .wooai-widget__pcards[data-card-size="large"] .wooai-widget__pcard-cta svg { width: 14px; height: 14px; }

/* Category fallback card — shown at match_quality=medium/low or when
   recommendations[] is empty but category_link is present. */
.wooai-widget .wooai-widget__catcard {
	align-self: flex-start;
	width: 78%;
	padding: 12px 14px;
	background: white;
	border: 1px dashed var( --wooai-sage-300 );
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.wooai-widget .wooai-widget__catcard-title {
	font-weight: 700;
	color: var( --wooai-sage-900 );
	font-size: 12.5px;
}
.wooai-widget .wooai-widget__catcard-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	padding: 7px 12px;
	font-weight: 600;
	color: white;
	background: var( --wooai-sage-700 );
	text-decoration: none;
	font-size: 11.5px;
	border-radius: 9px;
	align-self: flex-start;
}
.wooai-widget .wooai-widget__catcard-link:hover { background: var( --wooai-sage-800 ); }

/* AUDIT-FIX [v3.2.2] WCOP sipariş takip butonu — bot cevabının altında,
   inline link yerine net "Siparişimi Takip Et" CTA'sı. */
.wooai-widget .wooai-widget__message--assistant a.wooai-widget__tracking-btn,
.wooai-widget .wooai-widget__tracking-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 8px 14px;
	font-weight: 600;
	font-size: 12px;
	color: white;
	background: var( --wooai-sage-700, #4a8a5e );
	text-decoration: none !important;
	border-radius: 10px;
	transition: background 0.15s, transform 0.15s;
	align-self: flex-start;
	max-width: 100%;
}
.wooai-widget .wooai-widget__message--assistant a.wooai-widget__tracking-btn:hover,
.wooai-widget .wooai-widget__tracking-btn:hover {
	background: var( --wooai-sage-800, #3a6b48 );
	color: white;
	transform: translateY( -1px );
	text-decoration: none !important;
}
.wooai-widget .wooai-widget__tracking-btn span {
	text-decoration: none;
}
.wooai-widget .wooai-widget__tracking-btn:focus-visible {
	outline: 2px solid var( --wooai-sage-500, #4a9164 );
	outline-offset: 2px;
}

/* AUDIT-FIX [v3.2-categories] Önerilen ürünlerle ilişkili kategori chip'leri.
   Ürün kartlarının altında, küçük rounded chip satırı. */
.wooai-widget .wooai-widget__related-categories {
	align-self: flex-start;
	width: 100%;
	margin: 6px 0 2px;
}
.wooai-widget .wooai-widget__related-categories-label {
	font-size: 11.5px;
	color: var( --wooai-sage-700, #4a5d52 );
	opacity: 0.85;
	margin-bottom: 6px;
}
.wooai-widget .wooai-widget__category-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.wooai-widget .wooai-widget__message--assistant a.wooai-widget__category-chip,
.wooai-widget .wooai-widget__category-chip {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 18px;
	background: var( --wooai-sage-100, rgba( 74, 145, 100, 0.12 ) );
	color: var( --wooai-sage-900, #1f3a2a );
	text-decoration: none !important;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
	border: 1px solid var( --wooai-sage-200, rgba( 74, 145, 100, 0.25 ) );
}
.wooai-widget .wooai-widget__message--assistant a.wooai-widget__category-chip:hover,
.wooai-widget .wooai-widget__category-chip:hover {
	background: var( --wooai-sage-200, rgba( 74, 145, 100, 0.22 ) );
	color: var( --wooai-sage-900, #1f3a2a );
	transform: translateY( -1px );
	box-shadow: 0 2px 6px rgba( 74, 145, 100, 0.18 );
	text-decoration: none !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.wooai-widget .wooai-widget__pcards { scroll-behavior: auto; }
	.wooai-widget .wooai-widget__pcard  { animation: none !important; }
}

/* AUDIT-FIX [v3-B5] Collection suggester — kararsız müşteriye sunulan
   kategori kartı grid'i. 2 sütunluk grid; her kart name + adet bilgisi
   taşır; hover'da sage-400 border ile vurgu. */
.wooai-widget .wooai-widget__collection-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 10px;
}
.wooai-widget a.wooai-widget__collection-card {
	background: var( --wooai-surface );
	border: 1px solid var( --wooai-border-panel );
	border-radius: 12px;
	padding: 12px 14px;
	text-decoration: none;
	color: var( --wooai-sage-800 );
	transition: border-color 0.15s ease;
}
.wooai-widget a.wooai-widget__collection-card:hover {
	border-color: var( --wooai-sage-400 );
}
.wooai-widget div.wooai-widget__collection-name {
	font-weight: 600;
	font-size: 14px;
}
.wooai-widget div.wooai-widget__collection-count {
	font-size: 11.5px;
	color: var( --wooai-sage-600 );
	margin-top: 4px;
}