/* =============================================================
   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(99,102,241,.45);
}

.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);
}

/* ---------- 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;
}

.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;
}

/* 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;
}

/* ---------- 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;
}

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

.wai-powered-by {
	font-size:  11px;
	color:      var(--wai-text-muted);
	opacity:    .7;
}

/* ---------- 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;
}

/* ---------- 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;
	}
}

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