/*
 * AI Multi-Business Chatbot — Widget Styles
 *
 * Design: Okada Manila-inspired clean header with white bg,
 *         fullscreen expand, three-dot menu, and footer branding.
 *
 * @package AI_Chatbot
 */

/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
#ai-chatbot-wrapper {
	--ai-primary:               #7B1FA2;
	--ai-primary-dark:          #6a1890;
	--ai-primary-light:         #f3e6fd;
	--ai-secondary:             #9C27B0;
	--ai-surface:               #ffffff;
	--ai-surface-alt:           #f7f7f8;
	--ai-border:                #e8e0f0;
	--ai-text:                  #1a1a2e;
	--ai-text-muted:            #8a8a9a;
	--ai-bubble-user:           #6B1494;
	--ai-bubble-user-text:      #ffffff;
	--ai-bubble-assistant:      #ffffff;
	--ai-bubble-assistant-text: #1a1a2e;
	--ai-error:                 #ef4444;
	--ai-status-green:          #22c55e;
	--ai-font:                  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	--ai-font-size:             14px;
	--ai-line-height:           1.55;
	--ai-widget-width:          370px;
	--ai-widget-height:         540px;
	--ai-radius:                16px;
	--ai-radius-sm:             8px;
	--ai-shadow:                0 8px 40px rgba(0,0,0,.18), 0 2px 12px color-mix(in srgb, var(--ai-primary) 12%, transparent);
	--ai-toggle-size:           58px;
	--ai-z:                     999999;
	--ai-trans:                 0.22s cubic-bezier(.4,0,.2,1);

	position:   fixed !important;
	bottom:     max(24px, env(safe-area-inset-bottom, 24px)) !important;
	right:      24px !important;
	z-index:    999999 !important;
	font-family: var(--ai-font) !important;
	font-size:  var(--ai-font-size) !important;
	line-height: var(--ai-line-height) !important;
	color:      var(--ai-text) !important;
	box-sizing: border-box !important;
	display:    block !important;
	visibility: visible !important;
	opacity:    1 !important;
	pointer-events: auto !important;
	transform:  none !important;
	margin:     0 !important;
	padding:    0 !important;
	width:      auto !important;
	height:     auto !important;
	max-width:  none !important;
	max-height: none !important;
	overflow:   visible !important;
	clip:       auto !important;
	float:      none !important;
}

#ai-chatbot-wrapper *,
#ai-chatbot-wrapper *::before,
#ai-chatbot-wrapper *::after {
	box-sizing: border-box !important;
}


/* ════════════════════════════════════════════════════════════════════
   TOGGLE BUTTON
   ════════════════════════════════════════════════════════════════════ */
#ai-chatbot-toggle {
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	width:           var(--ai-toggle-size) !important;
	height:          var(--ai-toggle-size) !important;
	min-width:       var(--ai-toggle-size) !important;
	border-radius:   50% !important;
	background:      linear-gradient(135deg, #7B1FA2 0%, #9C27B0 100%) !important;
	color:           #ffffff !important;
	border:          none !important;
	cursor:          pointer !important;
	box-shadow:      0 4px 20px color-mix(in srgb, var(--ai-primary) 50%, transparent) !important;
	transition:      transform 0.2s, box-shadow 0.2s !important;
	position:        relative !important;
	outline:         none !important;
	padding:         0 !important;
	margin:          0 !important;
	line-height:     1 !important;
	text-decoration: none !important;
	-webkit-appearance: none !important;
	appearance:      none !important;
}

#ai-chatbot-toggle:hover {
	transform:  translateY(-2px) scale(1.06) !important;
	box-shadow: 0 8px 28px color-mix(in srgb, var(--ai-primary) 65%, transparent) !important;
}

#ai-chatbot-toggle:active { transform: scale(.95) !important; }

#ai-chatbot-toggle:focus-visible {
	outline:        3px solid #7B1FA2 !important;
	outline-offset: 3px !important;
}

#ai-chatbot-toggle img {
	width:       30px !important;
	height:      30px !important;
	display:     block !important;
	flex-shrink: 0 !important;
	filter:      brightness(0) invert(1) !important;
	object-fit:  contain !important;
}

/* Pulse ring */
#ai-chatbot-toggle::before {
	content:        '';
	position:       absolute;
	inset:          -5px;
	border-radius:  50%;
	border:         2px solid color-mix(in srgb, var(--ai-primary) 40%, transparent);
	opacity:        0;
	animation:      ai-pulse 2.5s ease-in-out infinite;
	pointer-events: none;
}

@keyframes ai-pulse {
	0%,100% { opacity:0; transform:scale(1);    }
	50%      { opacity:1; transform:scale(1.15); }
}

.ai-chatbot-toggle-icon {
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
}

.ai-chatbot-toggle-close { display: none !important; }
.ai-chatbot-toggle-open  { display: flex !important; }


/* ════════════════════════════════════════════════════════════════════
   CHAT WINDOW — floating card
   ════════════════════════════════════════════════════════════════════ */
#ai-chatbot-window {
	position:        absolute !important;
	bottom:          calc(var(--ai-toggle-size) + 16px) !important;
	right:           0 !important;
	width:           var(--ai-widget-width) !important;
	max-width:       calc(100vw - 32px) !important;
	height:          var(--ai-widget-height) !important;
	max-height:      calc(100vh - 120px) !important;
	background:      var(--ai-surface) !important;
	border-radius:   20px !important;
	box-shadow:      var(--ai-shadow) !important;
	display:         flex !important;
	flex-direction:  column !important;
	overflow:        hidden !important;
	border:          1px solid color-mix(in srgb, var(--ai-primary) 12%, transparent) !important;
	transform-origin: bottom right !important;
	animation:       ai-popup-in var(--ai-trans) forwards !important;
	transition:      width .3s ease, height .3s ease, border-radius .3s ease !important;
}

#ai-chatbot-window[hidden] { display: none !important; }

@keyframes ai-popup-in {
	from { opacity:0; transform: scale(.92) translateY(10px); }
	to   { opacity:1; transform: scale(1)   translateY(0); }
}

/* ── Fullscreen mode ── */
#ai-chatbot-wrapper.ai-chatbot-fullscreen #ai-chatbot-window {
	position:      fixed !important;
	inset:         0 !important;
	width:         100vw !important;
	height:        100dvh !important;
	max-width:     100vw !important;
	max-height:    100dvh !important;
	border-radius: 0 !important;
	bottom:        0 !important;
	right:         0 !important;
	z-index:       999999 !important;
	animation:     none !important;
}

@supports not (height: 100dvh) {
	#ai-chatbot-wrapper.ai-chatbot-fullscreen #ai-chatbot-window {
		height: 100vh !important;
	}
}


/* ════════════════════════════════════════════════════════════════════
   HEADER — Okada Manila-style: white bg, dark text, icon actions
   ════════════════════════════════════════════════════════════════════ */
#ai-chatbot-header {
	display:       flex !important;
	align-items:   center !important;
	gap:           10px !important;
	padding:       11px 14px !important;
	background:    #ffffff !important;
	border-bottom: 1px solid #ede8f5 !important;
	flex-shrink:   0 !important;
	position:      relative !important;
	color:         var(--ai-text) !important;
}

/* Avatar circle */
.ai-chatbot-header-avatar {
	width:           38px !important;
	height:          38px !important;
	border-radius:   50% !important;
	background:      linear-gradient(135deg, #7B1FA2 0%, #9C27B0 100%) !important;
	border:          2px solid color-mix(in srgb, var(--ai-primary) 25%, transparent) !important;
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	flex-shrink:     0 !important;
	overflow:        hidden !important;
}

.ai-chatbot-header-avatar img {
	width:         100% !important;
	height:        100% !important;
	object-fit:    cover !important;
	border-radius: 50% !important;
}

/* Text info */
.ai-chatbot-header-info {
	flex:           1 !important;
	min-width:      0 !important;
	display:        flex !important;
	flex-direction: column !important;
	gap:            1px !important;
}

.ai-chatbot-business-name {
	font-weight:   700 !important;
	font-size:     13px !important;
	letter-spacing: 0.4px !important;
	text-transform: uppercase !important;
	color:         var(--ai-text) !important;
	white-space:   nowrap !important;
	overflow:      hidden !important;
	text-overflow: ellipsis !important;
}

.ai-chatbot-status {
	font-size:   11px !important;
	color:       #555 !important;
	display:     flex !important;
	align-items: center !important;
	gap:         5px !important;
	font-weight: 500 !important;
}

.ai-chatbot-status-dot {
	width:         7px !important;
	height:        7px !important;
	border-radius: 50% !important;
	background:    var(--ai-status-green) !important;
	animation:     ai-status-pulse 2s ease-in-out infinite !important;
	flex-shrink:   0 !important;
}

@keyframes ai-status-pulse {
	0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
	50%      { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

/* Header action buttons: expand, dots, close */
.ai-chatbot-header-actions {
	display:     flex !important;
	align-items: center !important;
	gap:         2px !important;
	flex-shrink: 0 !important;
}

.ai-chatbot-header-actions button,
.ai-chatbot-header-btn {
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	width:           30px !important;
	height:          30px !important;
	min-width:       30px !important;
	border-radius:   50% !important;
	border:          none !important;
	background:      transparent !important;
	cursor:          pointer !important;
	color:           #2a2a2a !important;
	padding:         0 !important;
	margin:          0 !important;
	transition:      background 0.15s !important;
	-webkit-appearance: none !important;
	appearance:      none !important;
	outline:         none !important;
	box-shadow:      none !important;
}

.ai-chatbot-header-actions button:hover,
.ai-chatbot-header-btn:hover {
	background: #ede5f7 !important;
	color:      #5a1280 !important;
}

.ai-chatbot-header-actions button:focus-visible {
	outline:        2px solid #7B1FA2 !important;
	outline-offset: 1px !important;
}

.ai-chatbot-header-btn svg {
	display:     block !important;
	flex-shrink: 0 !important;
	width:       17px !important;
	height:      17px !important;
	stroke:      currentColor !important;
	fill:        currentColor !important;
}

/* Three-dot menu button — active state */
.ai-chatbot-menu-btn.ai-menu-open {
	background: #f0ebf8 !important;
	color:      #7B1FA2 !important;
}


/* ════════════════════════════════════════════════════════════════════
   DROPDOWN MENU
   ════════════════════════════════════════════════════════════════════ */
.ai-chatbot-dropdown {
	position:      absolute !important;
	top:           calc(100% + 4px) !important;
	right:         8px !important;
	background:    #ffffff !important;
	border-radius: 12px !important;
	box-shadow:    0 6px 30px rgba(0,0,0,.16), 0 1px 6px rgba(0,0,0,.08) !important;
	min-width:     220px !important;
	overflow:      hidden !important;
	z-index:       10 !important;
	border:        1px solid #ede8f5 !important;
	animation:     ai-dropdown-in .15s ease forwards !important;
}

@keyframes ai-dropdown-in {
	from { opacity:0; transform: translateY(-6px) scale(.97); }
	to   { opacity:1; transform: translateY(0) scale(1); }
}

.ai-chatbot-dropdown[hidden] { display: none !important; }

.ai-chatbot-dropdown-item {
	display:     flex !important;
	align-items: center !important;
	gap:         10px !important;
	width:       100% !important;
	padding:     12px 16px !important;
	background:  none !important;
	border:      none !important;
	text-align:  left !important;
	cursor:      pointer !important;
	font-family: var(--ai-font) !important;
	font-size:   13.5px !important;
	color:       #333 !important;
	line-height: 1.4 !important;
	transition:  background 0.12s !important;
	-webkit-appearance: none !important;
	appearance:  none !important;
	outline:     none !important;
	border-radius: 0 !important;
	box-shadow:  none !important;
	margin:      0 !important;
}

.ai-chatbot-dropdown-item:hover {
	background: #f5f0fb !important;
	color:      #7B1FA2 !important;
}

.ai-chatbot-dropdown-item:not(:last-child) {
	border-bottom: 1px solid #f0ebf8 !important;
}

.ai-chatbot-dropdown-icon {
	width:       18px !important;
	height:      18px !important;
	flex-shrink: 0 !important;
	opacity:     0.65 !important;
}


/* ════════════════════════════════════════════════════════════════════
   MESSAGES AREA
   ════════════════════════════════════════════════════════════════════ */
#ai-chatbot-messages {
	flex:           1;
	overflow-y:     auto;
	padding:        16px 14px;
	display:        flex;
	flex-direction: column;
	gap:            10px;
	scroll-behavior: smooth;
	background:     var(--ai-surface-alt);
}

#ai-chatbot-messages::-webkit-scrollbar        { width: 4px; }
#ai-chatbot-messages::-webkit-scrollbar-track  { background: transparent; }
#ai-chatbot-messages::-webkit-scrollbar-thumb  { background: #ddd; border-radius: 4px; }
#ai-chatbot-messages::-webkit-scrollbar-thumb:hover { background: #bbb; }

/* Message rows */
.ai-chatbot-message-row {
	display:        flex;
	flex-direction: column;
	gap:            3px;
	opacity:        0;
	transform:      translateY(8px);
	transition:     opacity .2s ease, transform .2s ease;
}

.ai-chatbot-message-visible {
	opacity:   1;
	transform: translateY(0);
}

.ai-chatbot-role-user      { align-items: flex-end; }
.ai-chatbot-role-assistant { align-items: flex-start; }

/* Assistant message row — with small avatar */
.ai-chatbot-role-assistant {
	flex-direction: row !important;
	align-items:    flex-end !important;
	gap:            7px !important;
}

.ai-chatbot-role-assistant .ai-chatbot-message-col {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            3px;
}

.ai-chatbot-row-avatar {
	width:           26px !important;
	height:          26px !important;
	border-radius:   50% !important;
	background:      linear-gradient(135deg, #7B1FA2 0%, #9C27B0 100%) !important;
	flex-shrink:     0 !important;
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	overflow:        hidden !important;
	margin-bottom:   16px !important; /* aligns with bubble bottom */
}

.ai-chatbot-row-avatar img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* Bubbles */
.ai-chatbot-bubble {
	max-width:    82%;
	padding:      10px 14px;
	border-radius: 18px;
	word-break:   break-word;
	line-height:  var(--ai-line-height);
	font-size:    var(--ai-font-size);
}

.ai-chatbot-role-user .ai-chatbot-bubble {
	background:                 var(--ai-bubble-user);
	color:                      var(--ai-bubble-user-text);
	border-bottom-right-radius: 4px;
}

.ai-chatbot-role-assistant .ai-chatbot-bubble {
	background:                var(--ai-bubble-assistant);
	color:                     var(--ai-bubble-assistant-text);
	border-bottom-left-radius: 4px;
	border:                    1px solid var(--ai-border);
	box-shadow:                0 1px 3px rgba(0,0,0,.06);
}

.ai-chatbot-time {
	font-size: 11px;
	color:     var(--ai-text-muted);
	padding:   0 4px;
}


/* ════════════════════════════════════════════════════════════════════
   TYPING INDICATOR
   ════════════════════════════════════════════════════════════════════ */
#ai-chatbot-typing {
	display:     flex;
	align-items: center;
	gap:         5px;
	padding:     8px 16px 4px;
	flex-shrink: 0;
}

.ai-typing-dot {
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    var(--ai-text-muted);
	animation:     ai-typing-bounce 1.2s ease-in-out infinite;
}

.ai-typing-dot:nth-child(1) { animation-delay: 0s; }
.ai-typing-dot:nth-child(2) { animation-delay: .2s; }
.ai-typing-dot:nth-child(3) { animation-delay: .4s; }

@keyframes ai-typing-bounce {
	0%,60%,100% { transform:translateY(0);    opacity:.4; }
	30%         { transform:translateY(-6px); opacity:1; }
}


/* ════════════════════════════════════════════════════════════════════
   INPUT AREA
   ════════════════════════════════════════════════════════════════════ */
#ai-chatbot-input-area {
	display:        flex !important;
	align-items:    flex-end !important;
	gap:            8px !important;
	padding:        10px 12px !important;
	padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
	border-top:     1px solid var(--ai-border) !important;
	background:     var(--ai-surface) !important;
	flex-shrink:    0 !important;
}

#ai-chatbot-input {
	flex:          1;
	resize:        none;
	border:        1px solid #ddd;
	border-radius: 22px;
	padding:       10px 14px;
	font-family:   var(--ai-font);
	font-size:     var(--ai-font-size);
	line-height:   var(--ai-line-height);
	color:         var(--ai-text);
	background:    #fafafa;
	min-height:    42px;
	max-height:    120px;
	overflow-y:    auto;
	transition:    border-color var(--ai-trans), box-shadow var(--ai-trans);
	outline:       none;
}

#ai-chatbot-input:focus {
	border-color: var(--ai-primary);
	box-shadow:   0 0 0 3px var(--ai-primary-light);
	background:   #fff;
}

#ai-chatbot-input::placeholder { color: var(--ai-text-muted); }




/* Send button */
#ai-chatbot-send {
	width:              40px !important;
	height:             40px !important;
	min-width:          40px !important;
	min-height:         40px !important;
	border-radius:      50% !important;
	background:         linear-gradient(135deg, #7B1FA2 0%, #9C27B0 100%) !important;
	cursor:             pointer !important;
	display:            flex !important;
	align-items:        center !important;
	justify-content:    center !important;
	flex-shrink:        0 !important;
	padding:            0 !important;
	margin:             0 !important;
	box-shadow:         0 3px 10px color-mix(in srgb, var(--ai-primary) 40%, transparent) !important;
	transition:         transform 0.15s, box-shadow 0.2s, opacity 0.2s !important;
	-webkit-tap-highlight-color: transparent !important;
	user-select:        none !important;
	-webkit-user-select: none !important;
	border:             none !important;
	outline:            none !important;
	-webkit-appearance: none !important;
	appearance:         none !important;
}

#ai-chatbot-send:hover:not([aria-disabled="true"]) {
	transform:  scale(1.1) translateY(-1px) !important;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--ai-primary) 55%, transparent) !important;
}

#ai-chatbot-send:active { transform: scale(.93) !important; }

#ai-chatbot-send svg {
	width:       20px !important;
	height:      20px !important;
	fill:        #ffffff !important;
	display:     block !important;
	flex-shrink: 0 !important;
	margin-left: 2px !important;
}


/* ════════════════════════════════════════════════════════════════════
   FOOTER — "Automated conversation" with green dot
   ════════════════════════════════════════════════════════════════════ */
#ai-chatbot-footer {
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	gap:             6px !important;
	padding:         7px 12px !important;
	font-size:       11px !important;
	color:           #555 !important;
	font-weight:     500 !important;
	background:      #ffffff !important;
	border-top:      1px solid #f0ebf8 !important;
	flex-shrink:     0 !important;
	letter-spacing:  0.1px !important;
}

.ai-chatbot-footer-dot {
	width:         7px !important;
	height:        7px !important;
	border-radius: 50% !important;
	background:    var(--ai-status-green) !important;
	flex-shrink:   0 !important;
}


/* ════════════════════════════════════════════════════════════════════
   BOOK NOW BUTTON
   ════════════════════════════════════════════════════════════════════ */
.ai-book-now-btn {
	display:         inline-flex !important;
	align-items:     center !important;
	gap:             6px !important;
	margin-top:      8px !important;
	padding:         10px 20px !important;
	background:      linear-gradient(135deg, #7B1FA2 0%, #9C27B0 100%) !important;
	color:           #ffffff !important;
	border:          none !important;
	border-radius:   100px !important;
	font-family:     var(--ai-font) !important;
	font-size:       13px !important;
	font-weight:     700 !important;
	cursor:          pointer !important;
	box-shadow:      0 3px 14px color-mix(in srgb, var(--ai-primary) 35%, transparent) !important;
	transition:      transform .15s, box-shadow .2s !important;
	letter-spacing:  0.2px !important;
	white-space:     nowrap !important;
}

.ai-book-now-btn:hover {
	transform:  translateY(-2px) !important;
	box-shadow: 0 6px 20px color-mix(in srgb, var(--ai-primary) 50%, transparent) !important;
}

.ai-book-now-btn:active { transform: scale(.96) !important; }


/* ════════════════════════════════════════════════════════════════════
   LANGUAGE QUICK-REPLY BUTTONS
   ════════════════════════════════════════════════════════════════════ */
.ai-lang-group {
	display:   flex !important;
	flex-wrap: wrap !important;
	gap:       6px !important;
	margin-top: 8px !important;
}

.ai-lang-btn {
	padding:       7px 14px !important;
	border:        1.5px solid var(--ai-primary) !important;
	border-radius: 100px !important;
	background:    #ffffff !important;
	color:         var(--ai-primary) !important;
	font-family:   var(--ai-font) !important;
	font-size:     12.5px !important;
	font-weight:   600 !important;
	cursor:        pointer !important;
	transition:    background .15s, color .15s !important;
	-webkit-appearance: none !important;
	appearance:    none !important;
	outline:       none !important;
}

.ai-lang-btn:hover,
.ai-lang-btn.ai-lang-selected {
	background: var(--ai-primary) !important;
	color:      #ffffff !important;
}

.ai-lang-btn:disabled {
	cursor:  default !important;
	opacity: 0.55 !important;
}


/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media ( max-width: 480px ) {
	#ai-chatbot-window {
		width:         calc(100vw - 24px) !important;
		right:         0 !important;
		max-height:    72dvh !important;
		height:        500px !important;
		border-radius: 20px !important;
	}

	#ai-chatbot-input { font-size: 16px !important; }

	html body button#ai-chatbot-toggle {
		width:      52px !important;
		height:     52px !important;
		min-width:  52px !important;
		min-height: 52px !important;
	}
}

@media ( min-width: 481px ) and ( max-width: 768px ) {
	#ai-chatbot-window {
		width:      360px !important;
		max-height: 72dvh !important;
	}
	#ai-chatbot-input { font-size: 15px !important; }
}

@supports (height: 100dvh) {
	#ai-chatbot-window { max-height: calc(100dvh - 120px) !important; }
}

/* Touch — remove hover flicker */
@media ( hover: none ) and ( pointer: coarse ) {
	html body button#ai-chatbot-toggle:hover {
		transform:  none !important;
		box-shadow: 0 4px 20px color-mix(in srgb, var(--ai-primary) 55%, transparent) !important;
	}
	#ai-chatbot-send:hover { transform: none !important; }
	* { -webkit-tap-highlight-color: transparent !important; }
	.ai-book-now-btn:hover { transform: none !important; }
}

/* Reduced motion */
@media ( prefers-reduced-motion: reduce ) {
	#ai-chatbot-toggle::before,
	.ai-chatbot-status-dot,
	.ai-typing-dot,
	.ai-chatbot-message-row,
	#ai-chatbot-window,
	.ai-chatbot-dropdown {
		animation:  none !important;
		transition: none !important;
	}
}

/* Messenger / in-app browser */
#ai-chatbot-input-area {
	padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
}

/* ── Expand/Minimize icon fix ── */
.ai-chatbot-expand-btn .ai-icon-expand   { display: inline !important; }
.ai-chatbot-expand-btn .ai-icon-minimize { display: none   !important; }
.ai-chatbot-fullscreen .ai-chatbot-expand-btn .ai-icon-expand   { display: none   !important; }
.ai-chatbot-fullscreen .ai-chatbot-expand-btn .ai-icon-minimize { display: inline !important; }


/* ════════════════════════════════════════════════════════════════════
   GLASSMORPHISM — frosted glass chat window
   ════════════════════════════════════════════════════════════════════ */
#ai-chatbot-window {
	background:      rgba(255, 255, 255, 0.82) !important;
	backdrop-filter: blur(18px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(180%) !important;
	border:          1px solid rgba(255, 255, 255, 0.45) !important;
}

#ai-chatbot-header {
	background:      rgba(255, 255, 255, 0.75) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border-bottom:   1px solid rgba(255, 255, 255, 0.4) !important;
}

#ai-chatbot-messages {
	background: rgba(247, 247, 248, 0.65) !important;
}

#ai-chatbot-input-area {
	background:    rgba(255, 255, 255, 0.8) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}

#ai-chatbot-footer {
	background: rgba(255, 255, 255, 0.75) !important;
}

.ai-chatbot-role-assistant .ai-chatbot-bubble {
	background: rgba(255, 255, 255, 0.85) !important;
	backdrop-filter: blur(6px) !important;
	-webkit-backdrop-filter: blur(6px) !important;
}

.ai-chatbot-dropdown {
	background:      rgba(255, 255, 255, 0.88) !important;
	backdrop-filter: blur(16px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

/* ════════════════════════════════════════════════════════════════════
   GLASSMORPHISM — full frosted glass on all chatbot surfaces
   ════════════════════════════════════════════════════════════════════ */

/* Chat window */
#ai-chatbot-window {
	background:              rgba(255, 255, 255, 0.75) !important;
	backdrop-filter:         blur(20px) saturate(180%) brightness(1.05) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.05) !important;
	border:                  1px solid rgba(255, 255, 255, 0.5) !important;
	box-shadow:              0 8px 40px rgba(0,0,0,.15), 0 2px 12px rgba(0,0,0,.08) !important;
}

/* Header */
#ai-chatbot-header {
	background:              rgba(255, 255, 255, 0.70) !important;
	backdrop-filter:         blur(16px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(16px) saturate(160%) !important;
	border-bottom:           1px solid rgba(255, 255, 255, 0.45) !important;
}

/* Messages area */
#ai-chatbot-messages {
	background: rgba(247, 247, 248, 0.55) !important;
}

/* Assistant bubbles */
.ai-chatbot-role-assistant .ai-chatbot-bubble {
	background:              rgba(255, 255, 255, 0.80) !important;
	backdrop-filter:         blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border:                  1px solid rgba(255, 255, 255, 0.6) !important;
}

/* Input area */
#ai-chatbot-input-area {
	background:              rgba(255, 255, 255, 0.72) !important;
	backdrop-filter:         blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border-top:              1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Input field */
#ai-chatbot-input {
	background:   rgba(255, 255, 255, 0.65) !important;
	border:       1px solid rgba(255, 255, 255, 0.5) !important;
	backdrop-filter: blur(6px) !important;
	-webkit-backdrop-filter: blur(6px) !important;
}

#ai-chatbot-input:focus {
	background:  rgba(255, 255, 255, 0.90) !important;
	border-color: var(--ai-primary) !important;
}

/* Footer */
#ai-chatbot-footer {
	background:              rgba(255, 255, 255, 0.68) !important;
	backdrop-filter:         blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border-top:              1px solid rgba(255, 255, 255, 0.4) !important;
}

/* Typing indicator */
#ai-chatbot-typing {
	background:              rgba(247, 247, 248, 0.70) !important;
	backdrop-filter:         blur(6px) !important;
	-webkit-backdrop-filter: blur(6px) !important;
}

/* Dropdown menu */
.ai-chatbot-dropdown {
	background:              rgba(255, 255, 255, 0.82) !important;
	backdrop-filter:         blur(20px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(160%) !important;
	border:                  1px solid rgba(255, 255, 255, 0.5) !important;
}

.ai-chatbot-dropdown-item:hover {
	background: rgba(245, 240, 251, 0.85) !important;
}

/* Toggle button — glass ring effect */
#ai-chatbot-toggle {
	box-shadow: 0 4px 20px color-mix(in srgb, var(--ai-primary) 50%, transparent),
	            0 0 0 4px rgba(255,255,255,0.25) !important;
}

#ai-chatbot-toggle:hover {
	box-shadow: 0 8px 28px color-mix(in srgb, var(--ai-primary) 65%, transparent),
	            0 0 0 6px rgba(255,255,255,0.3) !important;
}

/* ════════════════════════════════════════════════════════════════════
   GLASSMORPHISM — ultra frosted glass
   ════════════════════════════════════════════════════════════════════ */

/* Chat window */
#ai-chatbot-window {
	background:              rgba(255, 255, 255, 0.55) !important;
	backdrop-filter:         blur(32px) saturate(200%) brightness(1.08) !important;
	-webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.08) !important;
	border:                  1px solid rgba(255, 255, 255, 0.60) !important;
	box-shadow:              0 8px 48px rgba(0,0,0,.18),
	                         0 2px 16px rgba(0,0,0,.10),
	                         inset 0 1px 0 rgba(255,255,255,0.80) !important;
}

/* Header */
#ai-chatbot-header {
	background:              rgba(255, 255, 255, 0.52) !important;
	backdrop-filter:         blur(24px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
	border-bottom:           1px solid rgba(255, 255, 255, 0.50) !important;
}

/* Messages area */
#ai-chatbot-messages {
	background: rgba(240, 240, 245, 0.38) !important;
}

/* Assistant bubbles */
.ai-chatbot-role-assistant .ai-chatbot-bubble {
	background:              rgba(255, 255, 255, 0.72) !important;
	backdrop-filter:         blur(12px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(12px) saturate(160%) !important;
	border:                  1px solid rgba(255, 255, 255, 0.70) !important;
	box-shadow:              0 2px 12px rgba(0,0,0,.06),
	                         inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* User bubbles — keep solid but slight glass */
.ai-chatbot-role-user .ai-chatbot-bubble {
	box-shadow: 0 2px 12px rgba(0,0,0,.15),
	            inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* Input area */
#ai-chatbot-input-area {
	background:              rgba(255, 255, 255, 0.55) !important;
	backdrop-filter:         blur(20px) saturate(160%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(160%) !important;
	border-top:              1px solid rgba(255, 255, 255, 0.50) !important;
}

/* Input field */
#ai-chatbot-input {
	background:              rgba(255, 255, 255, 0.60) !important;
	border:                  1px solid rgba(255, 255, 255, 0.65) !important;
	backdrop-filter:         blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	box-shadow:              inset 0 1px 4px rgba(0,0,0,.06) !important;
}

#ai-chatbot-input:focus {
	background:   rgba(255, 255, 255, 0.88) !important;
	border-color: var(--ai-primary) !important;
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--ai-primary) 15%, transparent),
	              inset 0 1px 4px rgba(0,0,0,.04) !important;
}

/* Footer */
#ai-chatbot-footer {
	background:              rgba(255, 255, 255, 0.52) !important;
	backdrop-filter:         blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border-top:              1px solid rgba(255, 255, 255, 0.45) !important;
}

/* Typing indicator */
#ai-chatbot-typing {
	background:              rgba(240, 240, 245, 0.50) !important;
	backdrop-filter:         blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}

/* Dropdown */
.ai-chatbot-dropdown {
	background:              rgba(255, 255, 255, 0.75) !important;
	backdrop-filter:         blur(28px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(28px) saturate(180%) !important;
	border:                  1px solid rgba(255, 255, 255, 0.60) !important;
	box-shadow:              0 8px 32px rgba(0,0,0,.14),
	                         inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

.ai-chatbot-dropdown-item:hover {
	background: rgba(245, 240, 251, 0.80) !important;
}

/* Toggle button — glass ring */
#ai-chatbot-toggle {
	box-shadow: 0 4px 20px color-mix(in srgb, var(--ai-primary) 50%, transparent),
	            0 0 0 4px rgba(255,255,255,0.30),
	            inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

#ai-chatbot-toggle:hover {
	box-shadow: 0 8px 28px color-mix(in srgb, var(--ai-primary) 65%, transparent),
	            0 0 0 6px rgba(255,255,255,0.35),
	            inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* Header action buttons glass hover */
.ai-chatbot-header-btn:hover {
	background: rgba(255, 255, 255, 0.65) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}

/* Message row avatar */
.ai-chatbot-row-avatar {
	box-shadow: 0 2px 8px rgba(0,0,0,.15),
	            inset 0 1px 0 rgba(255,255,255,0.3) !important;
}