/* Whitebird brand override for the ChangAI chat widget.

   ChangAI ships as a compiled Tailwind bundle with its own "brand" purple
   (#6d4fc2) and blue accent (#4b89ff) baked in as literal hex values —
   Tailwind inlines colors at build time, so redefining the --color-brand-*
   custom properties alone does not cascade to already-compiled utility
   classes. These are the exact same selectors pulled from
   changai/public/dist/changai-chatbot.css with Whitebird's sage
   green (#8aad9f) and orange (#e06a1b) substituted in, loaded after the
   vendor stylesheet with !important to win.

   Fragile by nature: if ChangAI ships a new bundle with different
   compiled class names, this may need regenerating. See the "Update this
   file" note at the bottom for how it was built. */

/* FOUC guard: the launcher button briefly paints with the vendor's own
   default (small, purple, unrepositioned) look for a beat after mount,
   before changai_brand.js finishes injecting this stylesheet inside the
   widget's shadow root and applying the logo/label swaps -- confirmed
   live. #changai-chatbot-host is the shadow HOST element, which lives in
   the normal page DOM (not inside the shadow root it hosts), so this
   page-level rule can hide it directly even though the shadow content
   itself is otherwise unreachable from outside. changai_brand.js adds
   the wb-brand-ready class once the shadow-injected copy of this same
   file has actually loaded. */
#changai-chatbot-host:not(.wb-brand-ready) {
	visibility: hidden !important;
}

/* Beyond the custom "brand" tokens, the widget also mixes in a few of
   Tailwind's own stock palette tokens as extra gradient/accent stops (e.g.
   the header is a from-brand-600 via-brand-500 to-violet-400 gradient) —
   those need overriding too, using the same values already chosen for the
   specific opacity-variant utilities below (.bg-violet-400\/15 etc.) so
   both stay consistent. */
:root,:host{--color-brand-500:#8aad9f !important;--color-brand-600:#5f7d70 !important;--color-brand-50:#eef4f1 !important;--color-violet-300:#c9dcd2 !important;--color-violet-400:#e8a878 !important;--color-violet-700:#5f7d70 !important;--color-indigo-300:#a8c9bb !important;--color-sky-300:#f0b384 !important;--color-amber-50:#fdf1e8 !important;--color-amber-500:#e06a1b !important;--color-amber-700:#c25a14 !important}
#changai-chatbot-root .chat-card code{background:#8aad9f14 !important;border-radius:4px !important;padding:.1em .35em !important;font-family:monospace !important;font-size:.8em !important}
#changai-chatbot-root .chat-scrollbar{scrollbar-width:auto !important;scrollbar-color:#8aad9fad #8aad9f29 !important;scrollbar-gutter:stable !important}
#changai-chatbot-root .chat-scrollbar::-webkit-scrollbar-track{background:#8aad9f1f !important;border-radius:9999px !important}
#changai-chatbot-root .chat-scrollbar::-webkit-scrollbar-thumb{background:linear-gradient(#8aad9fc7,#8aad9f6b) !important;border:2px solid #8aad9f1f !important;border-radius:9999px !important}
#changai-chatbot-root .chat-scrollbar::-webkit-scrollbar-thumb:hover{background:linear-gradient(#8aad9fe6,#8aad9f85) !important}
#changai-chatbot-root .chat-shell{background:radial-gradient(120% 120% at 100% 0,#8aad9f1a,#8aad9f00 58%),radial-gradient(120% 120% at 0 100%,#8aad9f0f,#8aad9f00 55%),#fff !important}
.border-t-\[\#e06a1b\]{border-top-color:#e06a1b !important}
.border-r-\[\#e06a1b\]\/70{border-right-color:#e06a1bb3 !important}
.bg-amber-500\/45{background-color:#e06a1b73 !important}
.bg-brand-500\/15{background-color:#8aad9f26 !important}
.bg-violet-400\/15{background-color:#e8a87826 !important}
.from-violet-300\/36{--tw-gradient-from:#c9dcd25c !important}
.via-indigo-300\/30{--tw-gradient-via:#a8c9bb4d !important}
.to-sky-300\/28{--tw-gradient-to:#f0b38447 !important}
.text-\[\#c25a14\]{color:#c25a14 !important}
.text-\[\#e06a1b\]{color:#e06a1b !important}
.shadow-\[0_10px_18px_-12px_rgba\(109\,79\,194\,0\.85\)\]{--tw-shadow:0 10px 18px -12px var(--tw-shadow-color,#8aad9fd9) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) !important}
.shadow-\[0_10px_24px_-16px_rgba\(109\,79\,194\,0\.85\)\]{--tw-shadow:0 10px 24px -16px var(--tw-shadow-color,#8aad9fd9) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) !important}
.shadow-\[0_14px_30px_-18px_rgba\(109\,79\,194\,0\.85\)\]{--tw-shadow:0 14px 30px -18px var(--tw-shadow-color,#8aad9fd9) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) !important}
.shadow-\[0_20px_36px_-20px_rgba\(109\,79\,194\,0\.85\)\]{--tw-shadow:0 20px 36px -20px var(--tw-shadow-color,#8aad9fd9) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) !important}
.focus-within\:ring-brand-500\/25:focus-within{--tw-ring-color:#8aad9f40 !important}
.hover\:shadow-\[0_22px_40px_-22px_rgba\(109\,79\,194\,1\)\]:hover{--tw-shadow:0 22px 40px -22px var(--tw-shadow-color,#8aad9f) !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) !important}

/* Mobile fixes, found from real device screenshots (2026-08-01):

   1. Keyboard covers the message input. The widget's own mobile
      breakpoint (@media not all and (min-width:600px)) sizes the panel
      with .max-\[600px\]\:h-screen / .max-\[600px\]\:max-h-screen, both
      set to plain `100vh` — the *layout* viewport, which does not
      shrink when the on-screen keyboard opens (only the *visual*
      viewport does). The panel keeps its full pre-keyboard height, so
      the input at the bottom of it ends up positioned behind the
      keyboard instead of just above it. `100dvh` (dynamic viewport
      height) is the standard fix — it re-measures against the visual
      viewport on every supporting browser (iOS Safari 15.4+, current
      Android Chrome). Kept the original 100vh line first as a fallback
      for anything older that doesn't recognize dvh at all — an
      unsupported value is ignored, not applied as 0, so the safe order
      is plain value first, dvh override second.

   2. Chat panel "disappears" (just a floating close button, portal page
      visible behind it) when the phone is rotated to landscape. The
      widget's only mobile breakpoint is *width*-based
      (min-width:600px) — a phone in landscape is often wider than
      600px even though its *height* is very short, so that breakpoint
      never fires at all in landscape, and the widget falls back to
      sizing meant for a real desktop window, which doesn't fit in
      ~350-430px of height. Forces the exact same classes the width
      breakpoint already defines to apply whenever height is short
      *and* width isn't full desktop-sized (avoids retriggering this on
      an actually-short desktop browser window), regardless of
      orientation. */
@media (max-height: 480px) and (max-width: 1000px) {
	#changai-chatbot-root .max-\[600px\]\:inset-0 {
		inset: calc(var(--spacing) * 0) !important;
	}
	#changai-chatbot-root .max-\[600px\]\:rounded-none {
		border-radius: 0 !important;
	}
	#changai-chatbot-root .max-\[600px\]\:max-w-screen {
		max-width: 100vw !important;
		max-width: 100dvw !important;
	}
}

@media not all and (min-width: 600px), (max-height: 480px) and (max-width: 1000px) {
	#changai-chatbot-root .max-\[600px\]\:h-screen {
		height: 100vh !important;
		height: 100dvh !important;
	}
	#changai-chatbot-root .max-\[600px\]\:max-h-screen {
		max-height: 100vh !important;
		max-height: 100dvh !important;
	}
}

/* "Open chat in its own page" mode (2026-08-02): rather than keep chasing
   the vendor's fixed-overlay CSS through every new small-screen edge case
   (see the mobile fixes block above), the launcher now navigates mobile
   users to a dedicated /assistant page (www/assistant/) where this SAME
   widget mounts but is stretched into normal page flow instead of
   floating as a `position:fixed` panel over other content — ordinary,
   non-fixed page content already gets on-screen-keyboard and rotation
   handling right in every mobile browser, which is what actually
   sidesteps this whole class of bug rather than patching around it.
   changai_brand.js tags #changai-chatbot-root with data-wb-assistant="1"
   only on that page and only once the widget has mounted there. */
#changai-chatbot-root[data-wb-assistant] > button {
	display: none !important;
}
#changai-chatbot-root[data-wb-assistant] .chat-shell {
	position: static !important;
	inset: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
	max-height: none !important;
	border-radius: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

/* --- Launcher: labeled pill instead of an icon-only circle (2026-08) ------
   A bare circular icon read as a small utility button rather than an
   invitation to talk to someone -- especially now that it's the only
   floating affordance left (the separate Assistant Tools button is gone,
   see the removed .wb-qq-* block below). Widened into a pill via
   changai_brand.js's add_launcher_label(), and moved up from the vendor's
   very-bottom-edge default now that nothing else needs to sit above it.
   button[aria-pressed="false"] (not a structural #changai-chatbot-root >
   button assumption) -- the same unique-to-the-launcher attribute
   add_launcher_label() itself keys off, see that function's own comment
   for why it's reliable. No separate /assistant-page carve-out needed
   here: the existing #changai-chatbot-root[data-wb-assistant] > button
   rule above already hides that button there entirely (display:none wins
   over these other properties regardless). */
button[aria-pressed="false"] {
	width: auto !important;
	height: 52px !important;
	max-width: none !important;
	border-radius: 999px !important;
	padding: 0 22px 0 18px !important;
	gap: 8px !important;
	bottom: 32px !important;
}
.wb-launcher-label {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: inherit;
}
/* aria-pressed="true" means the panel is open -- if the vendor ever keeps
   this same button in the DOM in that state rather than swapping it for a
   separate in-panel close control, a text label next to a close icon would
   read wrong, so make sure it never shows there either way. */
button[aria-pressed="true"] .wb-launcher-label {
	display: none;
}

/* Update this file: grep changai/public/dist/changai-chatbot.css for the
   rule blocks containing #6d4fc2 / #5f44ad / #f6f2ff (brand purple family)
   and #4b89ff / #3a67c9 (blue accent), copy each selector+declaration
   block verbatim, substitute the Whitebird hex codes for the old ones
   (preserving any alpha suffix appended after the 6-digit hex), and add
   !important to every declaration. */