/* ============================================================
   chat-widget-overrides.css
   Companion to /vendor/chat-widget.css (vendored upstream from
   ai-chat-widget.netlify.app). Loaded AFTER it.

   Purpose: Skin the floating chat bubble at <=899px viewport so
   it mirrors the quicklinks notch in the bottom-right corner —
   same green, same 12px corner radius rotated 180°, same shadow.

   Why this is in @layer components:
   The vendored widget puts its !important rules in @layer utilities.
   Per the CSS Cascade spec, layered !important cascade is REVERSED:
   earlier-declared layers WIN. The widget's file declares layers in
   source order: components → properties → theme → base → utilities.
   So @layer components { ... !important } beats @layer utilities {
   ... !important }, regardless of source order between the two files.

   Re-curling the vendored CSS will not affect this file.
   ============================================================ */

@layer components {
	@media (max-width: 899px) {

		/* Wrapper — pin to bottom-right with iPhone safe-area clearance */
		.chat-widget {
			bottom: env(safe-area-inset-bottom, 0px) !important;
			right:  env(safe-area-inset-right, 0px)  !important;
			z-index: 40 !important;  /* below mobile-menu sheet (60) */
			transition: opacity 0.25s ease;
		}

		/* Bubble — tablet shape, 12px top-left corner mirrors the
		   quicklinks notch (which has 12px bottom-left corner). */
		.chat-widget > button {
			border-radius: 12px 0 0 0 !important;
			background-color: #2d5a2d !important;     /* var(--moss) */
			color: #ffffff !important;
			box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
			min-width: 56px !important;
			min-height: 44px !important;
			padding: 0.7rem 1.4rem !important;
			width: auto !important;
			height: auto !important;
			transition:
				transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
				background-color 0.2s ease !important;
		}

		.chat-widget > button:hover {
			background-color: #1f3f1f !important;     /* deeper moss */
		}

		/* Icon stays white */
		.chat-widget > button svg,
		.chat-widget > button svg path {
			color: #ffffff !important;
			stroke: currentColor !important;
		}

		/* Hide the bubble while the mobile menu sheet is open
		   (body.mobile-menu-open is set by quicklinks Alpine x-effect) */
		body.mobile-menu-open .chat-widget {
			opacity: 0 !important;
			pointer-events: none !important;
		}
	}
}