/* =============================================================
   WooCommerce AI Assistant — Chat Widget Styles
   ============================================================= */

/* ---------- CSS Custom Properties (defaults) ---------- */
:root {
	--wai-primary:        #6366f1;
	--wai-primary-dark:   #4f46e5;
	--wai-primary-light:  #e0e7ff;
	--wai-bg:             #ffffff;
	--wai-bg-alt:         #f8fafc;
	--wai-surface:        #f1f5f9;
	--wai-text:           #1f2937;
	--wai-text-muted:     #6b7280;
	--wai-border:         #e5e7eb;
	--wai-shadow:         0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
	--wai-font:           'Inter', system-ui, -apple-system, sans-serif;
	--wai-radius-sm:      8px;
	--wai-radius-md:      14px;
	--wai-radius-lg:      20px;
	--wai-radius-widget:  16px;
	--wai-widget-width:   380px;
	--wai-widget-height:  560px;
	--wai-z:              999999;
	--wai-transition:     .22s cubic-bezier(.4,0,.2,1);
}

/* ---------- Dark Theme ---------- */
.wai-widget--dark {
	--wai-bg:       #1e2430;
	--wai-bg-alt:   #252d3d;
	--wai-surface:  #2d3748;
	--wai-text:     #f1f5f9;
	--wai-text-muted: #94a3b8;
	--wai-border:   #374151;
}

@media (prefers-color-scheme: dark) {
	.wai-widget--auto {
		--wai-bg:       #1e2430;
		--wai-bg-alt:   #252d3d;
		--wai-surface:  #2d3748;
		--wai-text:     #f1f5f9;
		--wai-text-muted: #94a3b8;
		--wai-border:   #374151;
	}
}

/* ---------- Widget Wrapper ---------- */
.wai-widget {
	position: fixed;
	z-index:  var(--wai-z);
	font-family: var(--wai-font);
	font-size:   15px;
	line-height: 1.5;
	box-sizing:  border-box;
}

.wai-widget *,
.wai-widget *::before,
.wai-widget *::after {
	box-sizing: inherit;
}

.wai-widget--bottom-right { bottom: 24px; right: 24px; }
.wai-widget--bottom-left  { bottom: 24px; left:  24px; }

/* ---------- Floating Action Button ---------- */
.wai-fab {
	width:            60px;
	height:           60px;
	border-radius:    50%;
	background:       var(--wai-primary);
	color:            #fff;
	border:           none;
	cursor:           pointer;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	box-shadow:       0 4px 20px rgba(99,102,241,.4);
	transition:       background var(--wai-transition), transform var(--wai-transition), box-shadow var(--wai-transition);
	position:         relative;
	outline:          none;
	-webkit-tap-highlight-color: transparent;
}

.wai-fab:hover {
	background: var(--wai-primary-dark);
	transform:  translateY(-2px);
	box-shadow: 0 8px 28px rgba(0,0,0,.30);
}

.wai-fab:focus-visible {
	outline: 3px solid var(--wai-primary);
	outline-offset: 3px;
}

.wai-fab::before {
	content:       '';
	position:      absolute;
	inset:         -6px;
	border-radius: 50%;
	border:        2px solid var(--wai-primary);
	opacity:       0;
	animation:     wai-pulse 2.5s ease-in-out infinite;
}

@keyframes wai-pulse {
	0%, 100% { transform: scale(.9); opacity: 0; }
	50%       { transform: scale(1.15); opacity: .3; }
}

.wai-fab__icon { position: absolute; transition: opacity var(--wai-transition), transform var(--wai-transition); }
.wai-fab__icon--close { opacity: 0; transform: rotate(-90deg) scale(.7); }

.wai-widget--open .wai-fab__icon--open  { opacity: 0; transform: rotate(90deg) scale(.7); }
.wai-widget--open .wai-fab__icon--close { opacity: 1; transform: rotate(0deg) scale(1); }

/* Unread badge */
.wai-badge-dot {
	position:      absolute;
	top:           4px;
	right:         4px;
	width:         18px;
	height:        18px;
	border-radius: 50%;
	background:    #ef4444;
	color:         #fff;
	font-size:     11px;
	font-weight:   600;
	display:       flex;
	align-items:   center;
	justify-content: center;
	border:        2px solid var(--wai-bg);
}

/* ---------- Unread alert signals (v2.6.1) ---------- */
/* Strong, always-on pulse on the FAB while the customer has unread agent messages */
.wai-fab--unread {
	box-shadow: 0 6px 24px rgba(239, 68, 68, .35), 0 0 0 0 rgba(239, 68, 68, .55);
	animation: wai-fab-unread-pulse 1.6s ease-in-out infinite;
}
@keyframes wai-fab-unread-pulse {
	0%, 100% { box-shadow: 0 6px 24px rgba(239, 68, 68, .35), 0 0 0 0   rgba(239, 68, 68, .55); }
	50%       { box-shadow: 0 6px 24px rgba(239, 68, 68, .35), 0 0 0 14px rgba(239, 68, 68, 0);   }
}
/* One-shot bump animation on the badge each time the unread counter ticks */
.wai-badge-dot--bump {
	animation: wai-badge-bump 0.45s cubic-bezier(.22, 1, .36, 1);
}
@keyframes wai-badge-bump {
	0%   { transform: scale(1);    }
	30%  { transform: scale(1.45); }
	60%  { transform: scale(.92);  }
	100% { transform: scale(1);    }
}

/* Mute toggle in the panel header */
.wai-mute-toggle .wai-mute-icon--on,
.wai-mute-toggle .wai-mute-icon--off {
	display: inline-block;
}
.wai-mute-toggle[aria-pressed="true"] .wai-mute-icon--on  { display: none; }
.wai-mute-toggle[aria-pressed="true"] .wai-mute-icon--off { display: inline-block; }
.wai-mute-toggle[aria-pressed="false"] .wai-mute-icon--off { display: none; }
.wai-mute-toggle[aria-pressed="true"] {
	color: rgba(255, 255, 255, .55);
}

/* ---------- Chat Panel ---------- */
.wai-panel {
	position:      absolute;
	width:         var(--wai-widget-width);
	height:        var(--wai-widget-height);
	background:    var(--wai-bg);
	border-radius: var(--wai-radius-widget);
	box-shadow:    var(--wai-shadow);
	display:       flex;
	flex-direction: column;
	overflow:      hidden;
	pointer-events: none;
	opacity:       0;
}

.wai-widget--bottom-right .wai-panel { bottom: 72px; right: 0; }
.wai-widget--bottom-left  .wai-panel { bottom: 72px; left:  0; }

/* --- Slide animation --- */
.wai-widget--anim-slide .wai-panel {
	transform: translateY(20px) scale(.97);
	transition: opacity var(--wai-transition), transform var(--wai-transition);
}
.wai-widget--anim-slide.wai-widget--open .wai-panel {
	transform: translateY(0) scale(1);
}

/* --- Fade animation --- */
.wai-widget--anim-fade .wai-panel {
	transform: none;
	transition: opacity var(--wai-transition);
}

/* --- Bounce animation --- */
.wai-widget--anim-bounce .wai-panel {
	transform: scale(.8) translateY(20px);
	transition: opacity .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.wai-widget--anim-bounce.wai-widget--open .wai-panel {
	transform: scale(1) translateY(0);
}

.wai-widget--open .wai-panel {
	opacity:        1;
	pointer-events: auto;
}

/* ---------- Header ---------- */
.wai-panel__header {
	display:         flex;
	align-items:     center;
	gap:             12px;
	padding:         16px 18px;
	background:      var(--wai-primary);
	color:           #fff;
	flex-shrink:     0;
}

.wai-panel__avatar {
	position:    relative;
	flex-shrink: 0;
}

.wai-avatar-img,
.wai-avatar-initials {
	width:         40px;
	height:        40px;
	border-radius: 50%;
	display:       flex;
	align-items:   center;
	justify-content: center;
	font-weight:   700;
	font-size:     16px;
	color:         #fff;
	border:        2px solid rgba(255,255,255,.3);
	object-fit:    cover;
}

.wai-status-dot {
	position:      absolute;
	bottom:        1px;
	right:         1px;
	width:         10px;
	height:        10px;
	background:    #22c55e;
	border-radius: 50%;
	border:        2px solid var(--wai-primary);
}

.wai-panel__header-info {
	flex:           1;
	min-width:      0;
}

.wai-panel__bot-name {
	display:     block;
	font-weight: 600;
	font-size:   15px;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

.wai-panel__bot-status {
	display:   block;
	font-size: 12px;
	opacity:   .8;
}

/* ============================================================
 * v2.8.46 — Live Support pill
 * v2.8.49 — Adaptive header text rewrite
 *
 * Communicates HUMAN team availability specifically. The AI is
 * always working — this pill is exclusively about whether a real
 * person can be reached right now. JS toggles state classes:
 *   .wai-live-support-pill--online   → 🟢 pulsing green dot
 *   .wai-live-support-pill--offline  → 🔴 red dot
 * Hidden via [hidden] attribute when state is master_off /
 * no_agents / offline_no_schedule (no useful info to show).
 *
 * v2.8.49 design — DROPPED the v2.8.47 solid white pill chrome.
 * The white pill looked visually intrusive on every brand color
 * (heavy white badge sitting in the header). Replaced with a
 * "free-floating" treatment: just the colored dot + text, no
 * background, no shadow. The text uses --wai-header-text-color
 * which is computed server-side from the header bg (Primary
 * Color) via the same luminance formula as the v2.7.2 footer
 * text color: dark text on light brand bg, light text on dark
 * brand bg. Works on any admin-configured brand color without
 * needing to know what color is behind it. The dot stays
 * saturated green/red regardless of bg — saturated dots contrast
 * against virtually any brand color (the rare exception of
 * exactly-green-on-green or exactly-red-on-red is acceptable;
 * the tooltip carries explicit semantics).
 * ============================================================ */
.wai-live-support-pill {
	display:        inline-flex;
	align-items:    center;
	gap:            6px;
	margin-top:     3px;
	padding:        2px 0;
	font-size:      11px;
	font-weight:    600;
	letter-spacing: 0.2px;
	white-space:    nowrap;
	max-width:      100%;
	overflow:       hidden;
	text-overflow:  ellipsis;
	line-height:    1.4;
	background:     transparent;
	/* v2.8.49 — Adaptive text color from --wai-header-text-color
	   (luminance-computed from Primary Color). Works on any brand
	   color: dark text on light Primary, light text on dark. */
	color:          var( --wai-header-text-color, inherit );
	transition:     opacity 0.18s ease;
}
.wai-live-support-pill[hidden] { display: none !important; }
.wai-live-support-pill__dot {
	display:       inline-block;
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    currentColor;
	flex-shrink:   0;
	position:      relative;
	/* v2.8.51 — White ring around the dot so it's visible on EVERY
	   header background color. Per user feedback: "the green flashing
	   dot doesn't actually show at all in different colors such as
	   light blue or maybe green. Maybe we can put a [solid] background
	   surrounding just over the edge in white or something like that."
	   Outline is the right tool here: (a) doesn't take layout space,
	   (b) doesn't interfere with the pulse box-shadow on the --online
	   variant. The white ring separates the dot from any matching-tone
	   background (green dot on green header, etc.) without changing
	   the dot's color identity. */
	outline:        2px solid #ffffff;
	outline-offset: 0;
}
.wai-live-support-pill--online .wai-live-support-pill__dot {
	background: #10b981;
	/* Pulsing halo — draws attention to "human reachable right now"
	   without being distracting. */
	box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
	animation:  wai-live-support-pulse 2s infinite;
}
.wai-live-support-pill--offline .wai-live-support-pill__dot {
	background: #ef4444;
}

@keyframes wai-live-support-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0.65); }
	70%  { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
	100% { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0); }
}

/* Respect prefers-reduced-motion — disable the pulse but keep the
   solid green dot so the state semantic remains clear. */
@media (prefers-reduced-motion: reduce) {
	.wai-live-support-pill--online .wai-live-support-pill__dot {
		animation: none;
		box-shadow: none;
	}
}

/* Inline troubleshoot variant — same visual language. */
#wai-live-support-pill-inline {
	margin-top:  4px;
	font-size:   11px;
	display:     inline-flex; /* override any parent that hides inline-flex children */
}

/* Mobile — slightly tighter padding so the pill fits in narrower
   headers without competing for space against the bot status row. */
@media (max-width: 480px) {
	.wai-live-support-pill {
		font-size: 10.5px;
	}
}

.wai-panel__header-actions {
	display:    flex;
	gap:        4px;
	flex-shrink: 0;
}

.wai-icon-btn {
	width:         32px;
	height:        32px;
	border-radius: 8px;
	background:    transparent;
	border:        none;
	color:         rgba(255,255,255,.8);
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    background var(--wai-transition), color var(--wai-transition);
}

.wai-icon-btn:hover {
	background: rgba(255,255,255,.15);
	color:      #fff;
}

.wai-icon-btn:focus-visible {
	outline: 2px solid rgba(255,255,255,.8);
	outline-offset: 1px;
}

/* ---------- Messages Area ---------- */
.wai-messages {
	flex:            1;
	overflow-y:      auto;
	padding:         16px 16px 8px;
	display:         flex;
	flex-direction:  column;
	gap:             6px;
	scroll-behavior: smooth;
	background:      var(--wai-bg-alt);
}

.wai-messages::-webkit-scrollbar { width: 4px; }
.wai-messages::-webkit-scrollbar-track { background: transparent; }
.wai-messages::-webkit-scrollbar-thumb { background: var(--wai-border); border-radius: 4px; }

/* Time separator */
.wai-time-sep {
	text-align:   center;
	font-size:    11px;
	color:        var(--wai-text-muted);
	margin:       8px 0 4px;
	position:     relative;
}

.wai-time-sep::before,
.wai-time-sep::after {
	content:    '';
	position:   absolute;
	top:        50%;
	width:      28%;
	height:     1px;
	background: var(--wai-border);
}

.wai-time-sep::before { left: 0; }
.wai-time-sep::after  { right: 0; }

/* Message bubbles */
.wai-msg {
	display:        flex;
	flex-direction: column;
	max-width:      82%;
	animation:      wai-msg-in .18s ease-out both;
}

@keyframes wai-msg-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.wai-msg--bot  { align-self: flex-start; align-items: flex-start; }
.wai-msg--user { align-self: flex-end;   align-items: flex-end; }

.wai-msg__bubble {
	padding:       10px 14px;
	border-radius: var(--wai-radius-md);
	font-size:     14px;
	line-height:   1.55;
	word-break:    break-word;
	position:      relative;
}

.wai-msg--bot .wai-msg__bubble {
	background:    var(--wai-bg);
	color:         var(--wai-text);
	border:        1px solid var(--wai-border);
	border-bottom-left-radius: var(--wai-radius-sm);
}

.wai-msg--user .wai-msg__bubble {
	background:    var(--wai-primary);
	color:         #fff;
	border-bottom-right-radius: var(--wai-radius-sm);
}

.wai-msg__time {
	font-size:  11px;
	color:      var(--wai-text-muted);
	margin-top: 4px;
	padding:    0 4px;
}

/* =========================================================
   Read receipts (v2.6.11)
   WhatsApp/Messenger-style ✓ (delivered) and ✓✓ (read) ticks
   shown beneath user-authored bubbles. Glyphs are painted via
   CSS pseudo-elements so JS can update state with class toggles
   only (no innerHTML churn). Right-aligned because user bubbles
   sit at align-self: flex-end on the message column.
========================================================= */
.wai-msg__ticks {
	font-size:    11px;
	line-height:  1;
	margin-top:   2px;
	padding:      0 4px;
	display:      inline-block;
	letter-spacing: -2px;  /* Tightens the ✓✓ pair so it reads as one glyph */
	user-select:  none;
	-webkit-user-select: none;
	transition:   color 0.18s ease;
}

.wai-msg__ticks--delivered::before {
	content: "\2713";       /* ✓ — single check, "delivered" state */
	color:   var(--wai-text-muted);
}

.wai-msg__ticks--read::before {
	content: "\2713\2713";  /* ✓✓ — paired checks, "read" state */
	color:   var(--wai-primary, #5c6bc0);
	font-weight: 600;
}

.wai-widget--dark .wai-msg__ticks--delivered::before,
.wai-widget--auto .wai-msg__ticks--delivered::before {
	color: rgba(255, 255, 255, 0.45);
}

.wai-widget--dark .wai-msg__ticks--read::before,
.wai-widget--auto .wai-msg__ticks--read::before {
	color: var(--wai-primary, #818cf8);
}

@media (prefers-color-scheme: dark) {
	.wai-widget--auto .wai-msg__ticks--delivered::before {
		color: rgba(255, 255, 255, 0.45);
	}
	.wai-widget--auto .wai-msg__ticks--read::before {
		color: var(--wai-primary, #818cf8);
	}
}

/* Links inside chat bubbles */
.wai-msg__bubble a.wai-link {
	color: var(--wai-primary, #5c6bc0);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-all;
}
.wai-msg__bubble a.wai-link:hover {
	opacity: 0.8;
}
.wai-msg--user .wai-msg__bubble a.wai-link {
	color: #fff;
}

/* PDF document links */
.wai-msg__bubble a.wai-link[href$=".pdf"]::before {
	content: "\1F4C4 ";
}

/* Override theme styling for italic/emphasis text - keep normal color */
.wai-msg__bubble em,
.wai-msg__bubble i {
	color: inherit !important;
	font-style: italic;
}
.wai-msg--bot .wai-msg__bubble em,
.wai-msg--bot .wai-msg__bubble i {
	color: var(--wai-text) !important;
}
.wai-msg--user .wai-msg__bubble em,
.wai-msg--user .wai-msg__bubble i {
	color: #fff !important;
}

/* Lists inside chat bubbles */
.wai-msg__bubble ul.wai-list,
.wai-msg__bubble ol.wai-list {
	margin:         6px 0 4px 0;
	padding-left:   18px;
	list-style-position: outside;
}
.wai-msg__bubble ul.wai-list { list-style-type: none; padding-left: 0; }
.wai-msg__bubble ol.wai-list { list-style-type: decimal; }

.wai-msg__bubble .wai-list li {
	padding:        5px 0;
	line-height:    1.5;
	border-bottom:  1px solid var(--wai-border);
}
.wai-msg__bubble .wai-list li:last-child {
	border-bottom:  none;
}

/* Product-style links inside list items */
.wai-msg__bubble .wai-list li a.wai-link {
	color:               var(--wai-primary);
	text-decoration:     none;
	font-weight:         500;
	word-break:          break-word;
}
.wai-msg__bubble .wai-list li a.wai-link:hover {
	text-decoration: underline;
	opacity:         1;
}

/* Headings inside chat bubbles */
.wai-msg__bubble .wai-heading {
	font-size:   14px;
	font-weight: 600;
	margin:      8px 0 4px;
	line-height: 1.4;
}
.wai-msg__bubble .wai-heading:first-child {
	margin-top: 0;
}

/* Strong inside bubbles */
.wai-msg__bubble strong {
	font-weight: 600;
}

/* ---------- Typing Indicator ---------- */
.wai-typing {
	display:     flex;
	align-items: center;
	gap:         10px;
	padding:     8px 16px 4px;
	background:  var(--wai-bg-alt);
}

.wai-typing__avatar {
	width:         30px;
	height:        30px;
	border-radius: 50%;
	overflow:      hidden;
	flex-shrink:   0;
}

.wai-typing__avatar img,
.wai-typing__avatar span {
	width:  100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
}

.wai-typing__dots {
	display:     flex;
	gap:         5px;
	padding:     10px 14px;
	background:  var(--wai-bg);
	border:      1px solid var(--wai-border);
	border-radius: var(--wai-radius-md);
	border-bottom-left-radius: var(--wai-radius-sm);
}

.wai-typing__dots span {
	width:         7px;
	height:        7px;
	border-radius: 50%;
	background:    var(--wai-text-muted);
	animation:     wai-bounce .9s ease-in-out infinite;
}

.wai-typing__dots span:nth-child(2) { animation-delay: .15s; }
.wai-typing__dots span:nth-child(3) { animation-delay: .3s; }

@keyframes wai-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: .5; }
	40%            { transform: translateY(-6px); opacity: 1; }
}

/* ---------- Quick-Reply Chips ---------- */
.wai-chips {
	display:       flex;
	flex-wrap:     wrap;
	gap:           8px;
	padding:       8px 16px;
	flex-shrink:   0;
	background:    var(--wai-bg-alt);
}

.wai-chip {
	padding:         6px 14px;
	border-radius:   999px;
	border:          1.5px solid var(--wai-primary);
	color:           var(--wai-primary);
	background:      transparent;
	font-size:       13px;
	font-family:     inherit;
	cursor:          pointer;
	white-space:     normal;
	word-break:      break-word;
	text-align:      left;
	transition:      background var(--wai-transition), color var(--wai-transition);
}

.wai-chip:hover {
	background: var(--wai-primary);
	color:      #fff;
}

.wai-chip:focus-visible {
	outline: 2px solid var(--wai-primary);
	outline-offset: 2px;
}

/* Flow Builder option chips — slightly bolder to indicate flow context */
.wai-chip--flow {
	border-width:   2px;
	font-weight:    500;
}
.wai-chip--flow:hover {
	background: var(--wai-primary);
	color:      #fff;
}

/* Flow starter chips in welcome area */
.wai-chip--flow-starter {
	border-style:   dashed;
	border-color:   var(--wai-secondary, var(--wai-primary));
	color:          var(--wai-secondary, var(--wai-primary));
}
.wai-chip--flow-starter:hover {
	background: var(--wai-secondary, var(--wai-primary));
	color:      #fff;
	border-style: solid;
}

/* ---------- Order Lookup Form ---------- */
.wai-order-form {
	padding:        12px 16px;
	background:     var(--wai-surface);
	border-top:     1px solid var(--wai-border);
	flex-shrink:    0;
}

.wai-order-form__label {
	display:     block;
	font-size:   12px;
	font-weight: 500;
	color:       var(--wai-text-muted);
	margin-bottom: 4px;
}

.wai-order-input {
	width:           100%;
	padding:         8px 12px;
	border:          1.5px solid var(--wai-border);
	border-radius:   var(--wai-radius-sm);
	font-family:     inherit;
	font-size:       14px;
	color:           var(--wai-text);
	background:      var(--wai-bg);
	margin-bottom:   8px;
	transition:      border-color var(--wai-transition);
}

.wai-order-input:focus {
	outline:      none;
	border-color: var(--wai-primary);
}

.wai-order-submit {
	width:         100%;
	padding:       9px;
	background:    var(--wai-primary);
	color:         #fff;
	border:        none;
	border-radius: var(--wai-radius-sm);
	font-family:   inherit;
	font-size:     14px;
	font-weight:   600;
	cursor:        pointer;
	transition:    background var(--wai-transition);
}

.wai-order-submit:hover { background: var(--wai-primary-dark); }

/* ---------- Input Area ---------- */
.wai-input-area {
	display:      flex;
	align-items:  flex-end;
	gap:          10px;
	padding:      12px 16px;
	background:   var(--wai-bg);
	border-top:   1px solid var(--wai-border);
	flex-shrink:  0;
}

.wai-textarea {
	flex:         1;
	min-height:   40px;
	max-height:   120px;
	padding:      10px 14px;
	border:       1.5px solid var(--wai-border);
	border-radius: var(--wai-radius-sm);
	resize:       none;
	font-family:  inherit;
	font-size:    14px;
	color:        var(--wai-text);
	background:   var(--wai-bg);
	line-height:  1.5;
	overflow-y:   auto;
	transition:   border-color var(--wai-transition);
	scrollbar-width: none;
}

.wai-textarea::-webkit-scrollbar { display: none; }

.wai-textarea:focus {
	outline:      none;
	border-color: var(--wai-primary);
}

.wai-textarea::placeholder { color: var(--wai-text-muted); }

.wai-send-btn {
	width:         42px;
	height:        42px;
	flex-shrink:   0;
	border-radius: var(--wai-radius-sm);
	background:    var(--wai-primary);
	color:         #fff;
	border:        none;
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    background var(--wai-transition), transform var(--wai-transition), opacity var(--wai-transition);
}

.wai-send-btn:hover:not(:disabled) {
	background: var(--wai-primary-dark);
	transform:  translateY(-1px);
}

.wai-send-btn:disabled {
	opacity:  .4;
	cursor:   not-allowed;
	transform: none;
}

.wai-send-btn:focus-visible {
	outline: 2px solid var(--wai-primary);
	outline-offset: 2px;
}

/* ---------- Voice Input Button ---------- */
.wai-voice-btn {
	width:           42px;
	height:          42px;
	min-width:       42px;
	flex-shrink:     0;
	border-radius:   var(--wai-radius-sm);
	background:      transparent;
	color:           var(--wai-text-muted, #6b7280);
	border:          1.5px solid var(--wai-border);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.wai-voice-btn:hover {
	color:        var(--wai-primary);
	border-color: var(--wai-primary);
	background:   rgba(99, 102, 241, 0.05);
}

.wai-voice-btn:focus-visible {
	outline:        2px solid var(--wai-primary);
	outline-offset: 2px;
}

/* Active recording state */
.wai-voice-btn--recording {
	color:        #ef4444;
	border-color: #ef4444;
	background:   rgba(239, 68, 68, 0.08);
	animation:    wai-pulse-mic 1.5s ease-in-out infinite;
}

.wai-voice-btn--recording:hover {
	color:        #dc2626;
	border-color: #dc2626;
	background:   rgba(239, 68, 68, 0.12);
}

@keyframes wai-pulse-mic {
	0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
	50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* Dark theme voice button */
.wai-widget--dark .wai-voice-btn,
.wai-widget--auto .wai-voice-btn {
	color:        var(--wai-text-muted, #9ca3af);
	border-color: var(--wai-border);
}

.wai-widget--dark .wai-voice-btn:hover,
.wai-widget--auto .wai-voice-btn:hover {
	color:        var(--wai-primary);
	border-color: var(--wai-primary);
	background:   rgba(99, 102, 241, 0.1);
}

/* Mobile: ensure 44px touch target */
@media (max-width: 480px) {
	.wai-voice-btn {
		width:     44px;
		height:    44px;
		min-width: 44px;
	}
}

/* ---------- Attach (image upload) Button — v2.6.7 ----------
   Customer-side 📎 button. Hidden by default; shown only when the
   agent has flipped the per-conversation uploads_enabled flag in the
   admin takeover panel. Visual style mirrors the voice button so the
   input toolbar reads as a coherent set. */
.wai-attach-btn {
	width:           42px;
	height:          42px;
	min-width:       42px;
	flex-shrink:     0;
	border-radius:   var(--wai-radius-sm);
	background:      transparent;
	color:           var(--wai-text-muted, #6b7280);
	border:          1.5px solid var(--wai-border);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.wai-attach-btn:hover {
	color:        var(--wai-primary);
	border-color: var(--wai-primary);
	background:   rgba(99, 102, 241, 0.05);
}

.wai-attach-btn:focus-visible {
	outline:        2px solid var(--wai-primary);
	outline-offset: 2px;
}

.wai-attach-btn--uploading {
	opacity:       0.5;
	pointer-events: none;
	animation:     wai-pulse-mic 1.2s ease-in-out infinite;
}

.wai-widget--dark .wai-attach-btn,
.wai-widget--auto .wai-attach-btn {
	color:        var(--wai-text-muted, #9ca3af);
	border-color: var(--wai-border);
}

.wai-widget--dark .wai-attach-btn:hover,
.wai-widget--auto .wai-attach-btn:hover {
	color:        var(--wai-primary);
	border-color: var(--wai-primary);
	background:   rgba(99, 102, 241, 0.1);
}

@media (max-width: 480px) {
	.wai-attach-btn {
		width:     44px;
		height:    44px;
		min-width: 44px;
	}
}

/* Inline-widget variant — smaller (36px) to match the inline voice button. */
.wai-attach-btn-inline {
	width:           36px;
	height:          36px;
	min-width:       36px;
	flex-shrink:     0;
	border-radius:   8px;
	background:      transparent;
	color:           #6b7280;
	border:          1.5px solid #e5e7eb;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background 0.15s, color 0.15s, border-color 0.15s;
}

.wai-attach-btn-inline:hover {
	color:        var(--wai-primary, #6366f1);
	border-color: var(--wai-primary, #6366f1);
	background:   rgba(99, 102, 241, 0.05);
}

/* ---------- Image Attachment Bubble + Lightbox ---------- */
.wai-bubble--attachment {
	padding:    4px;
	background: transparent !important;
	border:     none !important;
	box-shadow: none !important;
}

.wai-attachment-thumb {
	display:        block;
	max-width:      220px;
	max-height:     220px;
	width:          auto;
	height:         auto;
	border-radius:  10px;
	cursor:         zoom-in;
	border:         1px solid var(--wai-border);
	background:     #f3f4f6;
	transition:     transform 0.15s, box-shadow 0.15s;
}

.wai-attachment-thumb:hover {
	transform:  scale(1.02);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.wai-widget--dark .wai-attachment-thumb,
.wai-widget--auto .wai-attachment-thumb {
	background: #1f2937;
	border-color: #374151;
}

/* Fullscreen lightbox overlay shown on thumbnail click. */
.wai-lightbox {
	position:        fixed;
	inset:           0;
	z-index:         9999999;
	background:      rgba(0, 0, 0, 0.88);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         24px;
	cursor:          zoom-out;
	animation:       wai-lightbox-fade 0.18s ease-out;
}

@keyframes wai-lightbox-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.wai-lightbox__img {
	max-width:    95vw;
	max-height:   95vh;
	width:        auto;
	height:       auto;
	border-radius: 8px;
	box-shadow:   0 20px 60px rgba(0, 0, 0, 0.6);
	cursor:       default;
}

.wai-lightbox__close {
	position:        absolute;
	top:             16px;
	right:           20px;
	width:           44px;
	height:          44px;
	border-radius:   50%;
	background:      rgba(255, 255, 255, 0.15);
	color:           #fff;
	border:          none;
	font-size:       28px;
	line-height:     1;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background 0.15s;
}

.wai-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.28);
}

/* ---------- Footer ---------- */
.wai-footer {
	text-align:  center;
	padding:     6px 16px 10px;
	background:  var(--wai-bg);
	flex-shrink: 0;
}

.wai-powered-by {
	font-size:  11px;
	/* v2.7.2 — Was `var(--wai-text-muted)` which only adapted to the theme
	   class (.wai-widget--dark), not to the actual configured Background
	   Color. With a dark bg under a "light" theme, the muted-gray text
	   went invisible. Now uses --wai-footer-text-color which is resolved
	   server-side: admin's manual Footer Text Color override if set,
	   otherwise a contrast-aware luminance-based default computed from
	   the resolved --wai-bg. Always readable. Opacity is now 1 since
	   the resolved color already includes appropriate alpha. */
	color:      var(--wai-footer-text-color, rgba(0, 0, 0, 0.55));
}
/* Anchor inside the powered-by footer inherits the resolved color so
   admin-supplied <a> links stay readable on any background. */
.wai-powered-by a {
	color:           inherit;
	text-decoration: underline;
}
.wai-powered-by a:hover {
	opacity: 0.85;
}

/* ---------- Product Cards ---------- */
.wai-product-cards {
	display:        flex;
	flex-wrap:      wrap;
	gap:            8px;
	padding:        4px 0 8px;
	max-width:      82%;
	align-self:     flex-start;
}

.wai-product-card {
	display:         flex !important;
	align-items:     center;
	gap:             10px;
	padding:         8px 12px;
	background:      var(--wai-bg);
	border:          1px solid var(--wai-border);
	border-radius:   var(--wai-radius-sm);
	text-decoration: none;
	color:           var(--wai-text);
	transition:      border-color var(--wai-transition), box-shadow var(--wai-transition);
	width:           100%;
	cursor:          pointer !important;
	pointer-events:  auto !important;
	user-select:     none;
	-webkit-user-select: none;
}

.wai-product-card:hover {
	border-color: var(--wai-primary);
	box-shadow:   0 2px 8px rgba(99,102,241,.15);
	background:   var(--wai-bg-alt);
}

.wai-product-card__img {
	width:         52px;
	height:        52px;
	flex-shrink:   0;
	border-radius: 6px;
	overflow:      hidden;
	background:    var(--wai-surface);
}

.wai-product-card__img img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.wai-product-card__info {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	min-width:      0;
	flex:           1;
}

.wai-product-card__name {
	font-size:     13px;
	font-weight:   600;
	color:         var(--wai-primary);
	line-height:   1.3;
	word-break:    break-word;
}

.wai-product-card__price {
	font-size:   12px;
	color:       var(--wai-text-muted);
	font-weight: 500;
}

/* ---------- Error message ---------- */
.wai-msg--error .wai-msg__bubble {
	background:  #fef2f2;
	color:       #b91c1c;
	border-color: #fecaca;
}

.wai-widget--dark .wai-msg--error .wai-msg__bubble {
	background:  #3b1010;
	color:       #fca5a5;
	border-color: #7f1d1d;
}

/* System/Status message styling - Yellow background */
.wai-msg--system {
	justify-content: center;
	width: 100%;
}

.wai-msg--system .wai-msg__bubble {
	background:  #fef3c7;
	color:       #92400e;
	border:      1px solid #fbbf24;
	font-size:   12px;
	padding:     10px 14px;
	max-width:   80%;
	text-align:  center;
	font-weight: 500;
}

.wai-widget--dark .wai-msg--system .wai-msg__bubble {
	background:  #78350f;
	color:       #fcd34d;
	border-color: #f59e0b;
}

/* ---------- Mobile Full-Screen ---------- */
@media (max-width: 480px) {
	.wai-widget--mobile-fullscreen .wai-panel,
	.wai-widget--bottom-right .wai-panel,
	.wai-widget--bottom-left  .wai-panel {
		position:      fixed;
		inset:         0;
		width:         100%;
		height:        100%;
		border-radius: 0;
		bottom:        0 !important;
		right:         0 !important;
		left:          0 !important;
	}

	.wai-widget--bottom-right,
	.wai-widget--bottom-left {
		bottom: 16px;
		right:  16px;
		left:   auto;
	}

	.wai-widget--bottom-left {
		right: auto;
		left:  16px;
	}
}

/* ---------- Product Grid (Vertical Card Layout) ---------- */
.wai-product-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap:                   12px;
	margin-top:            12px;
	width:                 100%;
}

.wai-product-grid a {
	display:           flex;
	flex-direction:    column;
	text-decoration:   none;
	color:             inherit;
	cursor:            pointer;
	transition:        transform 0.2s ease, box-shadow 0.2s ease;
	border-radius:     8px;
	overflow:          hidden;
	background:        var(--wai-surface, #ffffff);
	border:            1px solid var(--wai-border, #e5e7eb);
	padding:           8px;
	height:            100%;
}

.wai-product-grid a:hover {
	transform:  translateY(-2px);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
	border-color: var(--wai-primary, #6366f1);
}

.wai-product-grid img {
	width:        100%;
	height:       140px;
	object-fit:   cover;
	border-radius: 6px;
	margin-bottom: 8px;
	background:    var(--wai-bg-alt, #f3f4f6);
	display:       block;
	transition:    transform 0.2s ease;
}

.wai-product-grid a:hover img {
	transform: scale(1.08);
}

.wai-product-grid .wai-product-name {
	font-weight:     600;
	font-size:       13px;
	line-height:     1.3;
	color:           var(--wai-primary, #6366f1);
	text-decoration: underline;
	word-break:      break-word;
	margin-bottom:   4px;
}

.wai-product-grid span[style*="color:#6b7280"] {
	font-size:   12px;
	color:       var(--wai-text-muted, #6b7280) !important;
	font-weight: 500;
	margin-top:  4px;
}

/* Dark mode adjustments for product cards */
.wai-widget--dark .wai-product-grid a {
	background: var(--wai-surface, #1f2937);
	border-color: var(--wai-border, #374151);
}

.wai-widget--dark .wai-product-grid a:hover {
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
	border-color: var(--wai-primary, #818cf8);
}

/* Mobile responsive */
@media (max-width: 480px) {
	.wai-product-grid {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 8px;
		margin-top: 8px;
	}

	.wai-product-grid a {
		padding: 6px;
	}

	.wai-product-grid img {
		height: 120px;
		margin-bottom: 6px;
	}

	.wai-product-grid .wai-product-name {
		font-size: 12px;
	}
}

/* ---------- YouTube Video Cards ---------- */
.wai-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.wai-video-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--wai-border, #e5e7eb);
	background: var(--wai-bg, #fff);
	transition: all 0.2s ease;
}

.wai-video-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.wai-widget--dark .wai-video-card {
	background: var(--wai-surface, #1f2937);
	border-color: var(--wai-border, #374151);
}

.wai-widget--dark .wai-video-card:hover {
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
	border-color: var(--wai-primary, #818cf8);
}

@media (max-width: 480px) {
	.wai-video-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* ---------- Contact Form (Escalation) ---------- */
.wai-msg--form .wai-msg__bubble {
	max-width: 95%;
	width: 95%;
	background: var(--wai-bg);
	border: 1px solid var(--wai-border);
	padding: 24px;
	border-radius: var(--wai-radius-lg);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.wai-form-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 16px;
	color: var(--wai-text);
}

.wai-contact-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.wai-form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* GDPR consent row — checkbox + label side by side */
.wai-form-group--gdpr {
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 10px !important;
}
.wai-form-group--gdpr input[type="checkbox"] {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px;
	flex-shrink: 0;
	margin: 3px 0 0 0;
	accent-color: var(--wai-primary, #6366f1);
	cursor: pointer;
}
.wai-form-group--gdpr label {
	font-size: 12px;
	color: var(--wai-text-muted, #6b7280);
	line-height: 1.4;
	cursor: pointer;
	margin: 0;
}

.wai-form-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--wai-text);
	margin: 0;
}

.wai-form-input {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var(--wai-border);
	border-radius: var(--wai-radius-sm);
	font-size: 14px;
	font-family: inherit;
	color: var(--wai-text);
	background: var(--wai-bg);
	transition: border-color var(--wai-transition), box-shadow var(--wai-transition);
	box-sizing: border-box;
}

.wai-form-input:focus {
	outline: none;
	border-color: var(--wai-primary);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.wai-widget--dark .wai-form-input {
	background: var(--wai-surface);
	border-color: var(--wai-border);
	color: var(--wai-text);
}

.wai-widget--dark .wai-form-input:focus {
	border-color: var(--wai-primary);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.wai-form-buttons {
	display: flex;
	gap: 12px;
	margin-top: 20px;
	justify-content: center;
	width: 100%;
}

.wai-form-btn {
	padding: 12px 28px;
	border: none;
	border-radius: var(--wai-radius-sm);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--wai-transition);
	font-family: inherit;
	min-width: 120px;
	text-transform: capitalize;
}

.wai-form-btn-primary {
	background: var(--wai-primary, #6366f1);
	background-color: var(--wai-primary, #6366f1);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	border: none;
	opacity: 1;
}

/* Troubleshoot form button override */
.wai-msg--form[data-troubleshoot="true"] .wai-form-btn-primary {
	background: #0fc0fb !important;
	background-color: #0fc0fb !important;
	box-shadow: 0 2px 8px rgba(15, 192, 251, 0.3) !important;
}

.wai-form-btn-primary:hover:not(:disabled) {
	background: var(--wai-primary-dark, #4f46e5);
	background-color: var(--wai-primary-dark, #4f46e5);
	opacity: 1;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Troubleshoot form button hover override */
.wai-msg--form[data-troubleshoot="true"] .wai-form-btn-primary:hover:not(:disabled) {
	background: #000000 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.wai-form-btn-primary:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.wai-form-btn-primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.wai-form-btn-secondary {
	background: var(--wai-surface);
	color: var(--wai-text);
	border: 1px solid var(--wai-border);
}

.wai-form-btn-secondary:hover:not(:disabled) {
	background: var(--wai-bg-alt);
	border-color: var(--wai-text-muted);
}

.wai-widget--dark .wai-form-btn-secondary {
	background: var(--wai-surface);
	color: var(--wai-text);
	border-color: var(--wai-border);
}

.wai-widget--dark .wai-form-btn-secondary:hover:not(:disabled) {
	background: var(--wai-border);
	border-color: var(--wai-text-muted);
}

.wai-form-error {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fecaca;
	padding: 12px;
	border-radius: var(--wai-radius-sm);
	font-size: 13px;
	margin-bottom: 12px;
}

.wai-widget--dark .wai-form-error {
	background: #3b1010;
	color: #fca5a5;
	border-color: #7f1d1d;
}

/* ---------- Focus trap guard ---------- */
.wai-focus-guard {
	position: absolute;
	width:    1px;
	height:   1px;
	overflow: hidden;
	opacity:  0;
}

/* ---------- Satisfaction Rating Widget ---------- */
.wai-satisfaction-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 16px 12px;
	background: var(--wai-surface);
	border-radius: var(--wai-radius);
	border: 1px solid var(--wai-border);
	margin: 12px;
	animation: slideUp 0.3s ease-out;
}

.wai-widget--dark .wai-satisfaction-wrapper {
	background: var(--wai-surface);
	border-color: var(--wai-border);
}

.wai-satisfaction-prompt {
	font-size: 14px;
	font-weight: 500;
	color: var(--wai-text);
	text-align: center;
	transition: all 0.3s ease;
}

.wai-satisfaction-prompt.wai-satisfaction-success {
	color: #059669;
	font-weight: 600;
}

.wai-widget--dark .wai-satisfaction-prompt.wai-satisfaction-success {
	color: #10b981;
}

.wai-satisfaction-stars {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.wai-satisfaction-star {
	background: none;
	border: none;
	font-size: 28px;
	cursor: pointer;
	color: #d1d5db;
	transition: all 0.15s ease;
	padding: 4px;
	line-height: 1;
	appearance: none;
	-webkit-appearance: none;
}

.wai-widget--dark .wai-satisfaction-star {
	color: #4b5563;
}

.wai-satisfaction-star:hover {
	transform: scale(1.1);
}

.wai-satisfaction-star--hover,
.wai-satisfaction-star--selected {
	color: #fbbf24;
	text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

.wai-satisfaction-star--hover {
	transform: scale(1.15);
}

.wai-satisfaction-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	width: 100%;
	flex-wrap: wrap;
}

.wai-satisfaction-actions .wai-btn {
	flex: 1;
	min-width: 80px;
}

.wai-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =========================================================
   Chat Commerce Cards
========================================================= */

.wai-msg--commerce {
	padding: 4px 16px;
	animation: wai-msg-in 0.2s ease-out;
}

.wai-commerce-card {
	background: var(--wai-bg, #fff);
	border: 1px solid var(--wai-border, #e5e7eb);
	border-radius: 12px;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.4;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.wai-commerce-card__header {
	padding: 10px 14px;
	font-weight: 600;
	font-size: 13px;
	background: linear-gradient(135deg, var(--wai-primary, #6366f1) 0%, var(--wai-secondary, #8b5cf6) 100%);
	color: #fff;
}

.wai-commerce-card__header--error {
	background: #fef2f2;
	color: #dc2626;
}

.wai-commerce-card__body {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
}

.wai-commerce-card__body--coupon {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.wai-commerce-card__img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}

.wai-commerce-card__details {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wai-commerce-card__details strong {
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wai-commerce-card__price {
	font-weight: 600;
	color: var(--wai-primary, #6366f1);
}

.wai-commerce-card__qty {
	font-size: 12px;
	opacity: .7;
}

.wai-commerce-card__coupon-code {
	display: inline-block;
	font-family: monospace;
	font-weight: 700;
	font-size: 15px;
	background: #f0fdf4;
	color: #15803d;
	padding: 4px 10px;
	border-radius: 6px;
	border: 1px dashed #86efac;
	letter-spacing: .5px;
}

.wai-commerce-card__discount {
	font-size: 12px;
	color: #15803d;
	font-weight: 500;
}

.wai-commerce-card__items {
	padding: 8px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wai-commerce-card__item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wai-commerce-card__item-img {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}

.wai-commerce-card__item-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wai-commerce-card__item-price {
	font-weight: 600;
	flex-shrink: 0;
}

.wai-commerce-card__coupons {
	padding: 6px 14px;
	font-size: 12px;
	color: #15803d;
	background: #f0fdf4;
	border-top: 1px solid var(--wai-border, #e5e7eb);
}

.wai-commerce-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px;
	border-top: 1px solid var(--wai-border, #e5e7eb);
	background: #fafafa;
}

.wai-commerce-card__total {
	font-size: 12px;
	color: var(--wai-text, #1f2937);
}

.wai-commerce-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	font-weight: 600;
	font-size: 12px;
	border-radius: 8px;
	padding: 8px 14px;
	transition: opacity .15s, transform .1s;
	cursor: pointer;
	border: none;
	text-align: center;
}

.wai-commerce-btn:hover {
	opacity: .9;
	transform: translateY(-1px);
}

.wai-commerce-btn--checkout {
	background: linear-gradient(135deg, var(--wai-primary, #6366f1) 0%, var(--wai-secondary, #8b5cf6) 100%);
	color: #fff !important;
	white-space: nowrap;
}

.wai-commerce-btn--cart {
	background: transparent;
	color: var(--wai-primary, #6366f1) !important;
	border: 1px solid var(--wai-primary, #6366f1);
	white-space: nowrap;
}

.wai-commerce-btn--lg {
	padding: 12px 20px;
	font-size: 14px;
	width: 100%;
	justify-content: center;
}

.wai-commerce-card--checkout {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
}

/* Dark mode overrides */
.wai-widget--dark .wai-commerce-card,
.wai-widget--auto .wai-commerce-card {
	border-color: #374151;
	background: #1f2937;
}

.wai-widget--dark .wai-commerce-card__footer,
.wai-widget--auto .wai-commerce-card__footer {
	background: #111827;
	border-color: #374151;
}

.wai-widget--dark .wai-commerce-card__coupon-code,
.wai-widget--auto .wai-commerce-card__coupon-code {
	background: #064e3b;
	border-color: #059669;
	color: #a7f3d0;
}

.wai-widget--dark .wai-commerce-card__coupons,
.wai-widget--auto .wai-commerce-card__coupons {
	background: #064e3b;
	border-color: #374151;
}

@media (prefers-color-scheme: dark) {
	.wai-widget--auto .wai-commerce-card { border-color: #374151; background: #1f2937; }
	.wai-widget--auto .wai-commerce-card__footer { background: #111827; border-color: #374151; }
	.wai-widget--auto .wai-commerce-card__coupon-code { background: #064e3b; border-color: #059669; color: #a7f3d0; }
	.wai-widget--auto .wai-commerce-card__coupons { background: #064e3b; border-color: #374151; color: #a7f3d0; }
}

/* Proactive trigger FAB animation */
.wai-fab--proactive {
	animation: wai-proactive-pulse 0.6s ease-in-out 3;
}
@keyframes wai-proactive-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.15); box-shadow: 0 0 0 12px rgba(99, 102, 241, 0.15); }
}

/* --- Discount Card -------------------------------------------------------- */
.wai-discount-card {
  margin: 8px 0 8px 40px;
  padding: 16px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0f9ff 100%);
  border: 2px dashed #10b981;
  border-radius: 12px;
  max-width: 300px;
  animation: wai-msg-in 0.3s ease-out;
}
.wai-widget--dark .wai-discount-card,
.wai-widget--auto .wai-discount-card {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #0c4a6e 100%);
  border-color: #34d399;
}
@media (prefers-color-scheme: dark) {
  .wai-widget--auto .wai-discount-card {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #0c4a6e 100%);
    border-color: #34d399;
  }
}
.wai-discount-card__badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #059669;
  margin-bottom: 8px;
}
.wai-widget--dark .wai-discount-card__badge { color: #6ee7b7; }
.wai-discount-card__code {
  font-size: 20px;
  font-weight: 800;
  font-family: monospace;
  color: #065f46;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 8px;
  user-select: all;
}
.wai-widget--dark .wai-discount-card__code {
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
}
.wai-discount-card__desc {
  font-size: 13px;
  font-weight: 600;
  color: #047857;
  text-align: center;
  margin-bottom: 4px;
}
.wai-widget--dark .wai-discount-card__desc { color: #6ee7b7; }
.wai-discount-card__expiry {
  font-size: 11px;
  color: #6b7280;
  text-align: center;
  margin-bottom: 12px;
}
.wai-widget--dark .wai-discount-card__expiry { color: #9ca3af; }
.wai-discount-card__actions {
  display: flex;
  gap: 8px;
}
.wai-discount-card__actions button {
  flex: 1;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s;
}
.wai-discount-card__copy {
  background: white;
  color: #374151;
  border-color: #d1d5db !important;
}
.wai-discount-card__copy:hover { background: #f3f4f6; }
.wai-widget--dark .wai-discount-card__copy {
  background: rgba(255,255,255,0.1);
  color: #e5e7eb;
  border-color: rgba(255,255,255,0.2) !important;
}
.wai-discount-card__apply {
  background: #10b981;
  color: white;
  border-color: #10b981 !important;
}
.wai-discount-card__apply:hover { background: #059669; }
.wai-discount-card__apply:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Troubleshoot form styling */
.wai-msg--form[data-troubleshoot="true"] .wai-form-title {
	color: #0fc0fb !important;
}

/* ============================================================ */
/* Email Transcript (v2.6.9)                                    */
/* Inline confirmation strip rendered into the messages area    */
/* when the customer clicks the ✉️ envelope button in the      */
/* widget header. Wraps a mini email-collection form with a    */
/* GDPR consent checkbox (when no email is on file yet).        */
/* ============================================================ */
.wai-email-transcript-strip {
	width:           100%;
	display:         block;
	padding:         0 8px;
	margin:          6px 0;
	box-sizing:      border-box;
}

.wai-email-transcript-card {
	background:      var(--wai-bg, #fff);
	border:          1px solid var(--wai-border, #e5e7eb);
	border-radius:   12px;
	padding:         14px 16px;
	box-shadow:      0 2px 6px rgba(0, 0, 0, 0.04);
	display:         flex;
	flex-direction:  column;
	gap:             10px;
}

.wai-email-transcript-prompt {
	font-size:       13.5px;
	line-height:     1.45;
	color:           var(--wai-text, #1f2937);
	margin:          0;
}

.wai-email-transcript-input {
	width:           100%;
	box-sizing:      border-box;
	padding:         10px 12px;
	border-radius:   8px;
	border:          1px solid var(--wai-border, #d1d5db);
	font-size:       14px;
	color:           var(--wai-text, #1f2937);
	background:      var(--wai-bg, #fff);
	transition:      border-color 0.15s, box-shadow 0.15s;
}

.wai-email-transcript-input:focus {
	outline:         none;
	border-color:    var(--wai-primary, #6366f1);
	box-shadow:      0 0 0 3px rgba(99, 102, 241, 0.15);
}

.wai-email-transcript-consent {
	display:         flex;
	align-items:     flex-start;
	gap:             8px;
	font-size:       12.5px;
	line-height:     1.4;
	color:           var(--wai-text-muted, #6b7280);
}

.wai-email-transcript-consent input[type="checkbox"] {
	margin-top:      2px;
	flex-shrink:     0;
	accent-color:    var(--wai-primary, #6366f1);
	cursor:          pointer;
}

.wai-email-transcript-consent label {
	cursor:          pointer;
}

.wai-email-transcript-error {
	font-size:       12.5px;
	color:           #dc2626;
	background:      #fef2f2;
	border:          1px solid #fecaca;
	border-radius:   6px;
	padding:         6px 10px;
	margin:          0;
}

.wai-email-transcript-buttons {
	display:         flex;
	gap:             8px;
	justify-content: flex-end;
	flex-wrap:       wrap;
}

.wai-email-transcript-btn-send,
.wai-email-transcript-btn-cancel {
	padding:         8px 16px;
	border-radius:   8px;
	font-size:       13px;
	font-weight:     500;
	cursor:          pointer;
	border:          1px solid transparent;
	transition:      background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
	min-height:      36px;
}

.wai-email-transcript-btn-send {
	background:      var(--wai-primary, #6366f1);
	color:           #fff;
	border-color:    var(--wai-primary, #6366f1);
}

.wai-email-transcript-btn-send:hover:not(:disabled) {
	background:      var(--wai-primary-dark, #4f46e5);
	border-color:    var(--wai-primary-dark, #4f46e5);
}

.wai-email-transcript-btn-cancel {
	background:      transparent;
	color:           var(--wai-text-muted, #6b7280);
	border-color:    var(--wai-border, #d1d5db);
}

.wai-email-transcript-btn-cancel:hover:not(:disabled) {
	background:      var(--wai-bg-alt, #f3f4f6);
	color:           var(--wai-text, #1f2937);
}

.wai-email-transcript-btn-send:disabled,
.wai-email-transcript-btn-cancel:disabled {
	opacity:         0.6;
	cursor:          not-allowed;
}

/* Dark-mode parity */
.wai-widget--dark .wai-email-transcript-card,
.wai-widget--auto .wai-email-transcript-card {
	background:      #1f2937;
	border-color:    #374151;
	box-shadow:      0 2px 6px rgba(0, 0, 0, 0.2);
}

.wai-widget--dark .wai-email-transcript-prompt,
.wai-widget--auto .wai-email-transcript-prompt {
	color:           #f3f4f6;
}

.wai-widget--dark .wai-email-transcript-input,
.wai-widget--auto .wai-email-transcript-input {
	background:      #111827;
	border-color:    #374151;
	color:           #f3f4f6;
}

.wai-widget--dark .wai-email-transcript-consent,
.wai-widget--auto .wai-email-transcript-consent {
	color:           #9ca3af;
}

.wai-widget--dark .wai-email-transcript-error,
.wai-widget--auto .wai-email-transcript-error {
	background:      rgba(220, 38, 38, 0.1);
	border-color:    rgba(220, 38, 38, 0.3);
	color:           #fca5a5;
}

.wai-widget--dark .wai-email-transcript-btn-cancel,
.wai-widget--auto .wai-email-transcript-btn-cancel {
	color:           #9ca3af;
	border-color:    #374151;
}

.wai-widget--dark .wai-email-transcript-btn-cancel:hover:not(:disabled),
.wai-widget--auto .wai-email-transcript-btn-cancel:hover:not(:disabled) {
	background:      #111827;
	color:           #f3f4f6;
}

@media (prefers-color-scheme: dark) {
	.wai-widget--auto .wai-email-transcript-card {
		background:      #1f2937;
		border-color:    #374151;
	}
	.wai-widget--auto .wai-email-transcript-input {
		background:      #111827;
		border-color:    #374151;
		color:           #f3f4f6;
	}
}

/* Mobile — keep send/cancel buttons reachable as 44px touch targets. */
@media (max-width: 480px) {
	.wai-email-transcript-btn-send,
	.wai-email-transcript-btn-cancel {
		min-height:    44px;
		padding:       10px 18px;
		flex:          1;
	}
}

/* =========================================================
   v2.7.54 (R7 chunk 3) — Capture File upload card
========================================================= */

.wai-file-upload-card .wai-msg__bubble {
	background:    var( --wai-bg, #fff );
	border:        1px solid var( --wai-border, #e5e7eb );
	border-radius: var( --wai-radius, 12px );
	padding:       12px;
	width:         100%;
	max-width:     320px;
}

.wai-file-upload-dropzone {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	padding:        20px 12px;
	border:         2px dashed var( --wai-border, #e5e7eb );
	border-radius:  10px;
	background:     var( --wai-bg-alt, #f9fafb );
	cursor:         pointer;
	transition:     all 0.15s ease;
	text-align:     center;
}
.wai-file-upload-dropzone:hover,
.wai-file-upload-dropzone:focus,
.wai-file-upload-dropzone--active {
	border-color: var( --wai-primary, #6366f1 );
	background:   rgba( 99, 102, 241, 0.04 );
	outline:      none;
}

.wai-file-upload-dropzone__icon {
	font-size:    28px;
	line-height:  1;
	margin-bottom: 6px;
	color:        var( --wai-primary, #6366f1 );
}

.wai-file-upload-dropzone__label {
	font-size:   13px;
	font-weight: 500;
	color:       var( --wai-text, #1f2937 );
	margin-bottom: 4px;
}

.wai-file-upload-dropzone__help {
	font-size: 11px;
	color:     var( --wai-text-muted, #6b7280 );
}

.wai-file-upload-list {
	margin-top: 10px;
	display:    flex;
	flex-direction: column;
	gap:        6px;
}

.wai-file-upload-row {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       6px 8px;
	background:    var( --wai-bg-alt, #f9fafb );
	border:        1px solid var( --wai-border, #e5e7eb );
	border-radius: 8px;
}

.wai-file-upload-row--error {
	background:   rgba( 239, 68, 68, 0.05 );
	border-color: rgba( 239, 68, 68, 0.3 );
}

.wai-file-upload-row__icon,
.wai-file-upload-row__thumb {
	width:         32px;
	height:        32px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	background:    var( --wai-primary-soft, #eef2ff );
	border-radius: 6px;
	flex-shrink:   0;
	overflow:      hidden;
	font-size:     16px;
}
.wai-file-upload-row__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}
.wai-file-upload-row__thumb-placeholder {
	font-size: 14px;
}

.wai-file-upload-row__info {
	flex:       1;
	min-width:  0;
	overflow:   hidden;
}

.wai-file-upload-row__name {
	font-size:    12px;
	font-weight:  500;
	color:        var( --wai-text, #1f2937 );
	white-space:  nowrap;
	overflow:     hidden;
	text-overflow: ellipsis;
}

.wai-file-upload-row__meta {
	font-size: 10px;
	color:     var( --wai-text-muted, #6b7280 );
	margin-top: 2px;
}

.wai-file-upload-row__error {
	font-size: 10px;
	color:     #ef4444;
	margin-top: 2px;
}

.wai-file-upload-row__progress {
	height:        4px;
	background:    var( --wai-border, #e5e7eb );
	border-radius: 2px;
	margin-top:    4px;
	overflow:      hidden;
}
.wai-file-upload-row__progress-bar {
	height:     100%;
	background: var( --wai-primary, #6366f1 );
	transition: width 0.2s ease;
}

.wai-file-upload-row__delete,
.wai-file-upload-row__dismiss {
	background:    transparent;
	border:        0;
	color:         var( --wai-text-muted, #6b7280 );
	cursor:        pointer;
	padding:       4px 8px;
	font-size:     16px;
	line-height:   1;
	border-radius: 4px;
	flex-shrink:   0;
}
.wai-file-upload-row__delete:hover,
.wai-file-upload-row__dismiss:hover {
	color:      #ef4444;
	background: rgba( 239, 68, 68, 0.08 );
}

.wai-file-upload-actions {
	margin-top: 12px;
	display:    flex;
	gap:        8px;
	justify-content: flex-end;
}

.wai-file-upload-btn {
	padding:       8px 16px;
	border-radius: 8px;
	font-size:     13px;
	font-weight:   500;
	cursor:        pointer;
	border:        1px solid transparent;
	transition:    all 0.15s ease;
}
.wai-file-upload-btn--done {
	background: var( --wai-primary, #6366f1 );
	color:      #fff;
	border-color: var( --wai-primary, #6366f1 );
}
.wai-file-upload-btn--done:hover:not(:disabled) {
	background: var( --wai-primary-dark, #4f46e5 );
	border-color: var( --wai-primary-dark, #4f46e5 );
}
.wai-file-upload-btn--done:disabled {
	opacity: 0.5;
	cursor:  not-allowed;
}
.wai-file-upload-btn--skip {
	background: transparent;
	color:      var( --wai-text-muted, #6b7280 );
	border-color: var( --wai-border, #e5e7eb );
}
.wai-file-upload-btn--skip:hover {
	background: var( --wai-bg-alt, #f9fafb );
	color:      var( --wai-text, #1f2937 );
}

/* Dark mode parity */
.wai-widget--dark .wai-file-upload-dropzone,
.wai-widget--auto .wai-file-upload-dropzone,
.wai-widget--dark .wai-file-upload-row,
.wai-widget--auto .wai-file-upload-row {
	background:   rgba( 255, 255, 255, 0.04 );
	border-color: rgba( 255, 255, 255, 0.1 );
}
.wai-widget--dark .wai-file-upload-row--error,
.wai-widget--auto .wai-file-upload-row--error {
	background:   rgba( 239, 68, 68, 0.1 );
	border-color: rgba( 239, 68, 68, 0.3 );
}

@media (prefers-color-scheme: dark) {
	.wai-widget--auto .wai-file-upload-dropzone,
	.wai-widget--auto .wai-file-upload-row {
		background:   rgba( 255, 255, 255, 0.04 );
		border-color: rgba( 255, 255, 255, 0.1 );
	}
}

/* Mobile — keep buttons reachable as 44px touch targets. */
@media (max-width: 480px) {
	.wai-file-upload-btn {
		min-height: 44px;
		padding:    10px 18px;
		flex:       1;
	}
	.wai-file-upload-card .wai-msg__bubble {
		max-width: 95%;
	}
}