/* =========================================================================
   Wp karayel Assistant — Professional Chat Widget Stylesheet
   Isolated with scoped CSS custom properties.

   There is deliberately no @import for a web font here.
   -----------------------------------------------------
   This file used to open with an @import of Inter from Google Fonts, which
   cost every visitor on every page a serialised chain: fetch this stylesheet,
   parse it, only then discover the font stylesheet, fetch that, and only then
   fetch the font files. An @import cannot be preloaded or run in parallel, and
   it sits on the critical rendering path - so it delayed first paint on pages
   where nobody ever opened the chat.

   It was also a third-party request to Google on every page view, carrying the
   visitor's IP. German courts have already found that arrangement to breach the
   GDPR, which is not a liability worth taking on for one typeface.

   The stack below uses the fonts already on the device. They render instantly,
   they are what the rest of the operating system uses, and on the platforms
   that matter they are excellent faces in their own right.
   ========================================================================= */

/* ---- CSS Reset for widget scope ---- */
#uwaia-chat-widget,
#uwaia-chat-widget *,
#uwaia-chat-widget *::before,
#uwaia-chat-widget *::after {
  box-sizing: border-box !important;
}

/* ---- Root tokens ---- */
#uwaia-chat-widget {
  --uw-primary:     #2563eb; /* Clean modern blue */
  --uw-secondary:   #1d4ed8;
  --uw-bg:          #ffffff;
  --uw-bg-user:     #2563eb;
  --uw-bg-bot:      #f4f6f8; /* Soft light background as requested */
  --uw-text:        #1f2937;
  --uw-text-muted:  #9ca3af;
  --uw-border:      #e5e7eb;
  --uw-radius:      16px; /* Requested 12px-16px */
  --uw-shadow:      0 10px 25px rgba(0, 0, 0, 0.08); /* Requested shadow */
  --uw-header-h:    72px;
  --uw-input-h:     72px;

  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 2147483647 !important;
  /* Inter stays first so a site that already loads it keeps it; every other
     name is a face the device already has, so nothing is ever fetched. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Variable", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--uw-text) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ---- Toggle Button ---- */
#uwaia-toggle-btn {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--uw-bg-user) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}

#uwaia-toggle-btn:hover {
  transform: scale(1.05) translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
}

#uwaia-toggle-btn:active {
  transform: scale(0.96) !important;
}

#uwaia-toggle-btn svg {
  width: 26px !important;
  height: 26px !important;
  pointer-events: none !important;
  transition: transform 0.3s ease !important;
  fill: none !important;
}

#uwaia-toggle-btn[aria-expanded="true"] svg#uwaia-icon-chat {
  display: none !important;
}
#uwaia-toggle-btn[aria-expanded="true"] svg#uwaia-icon-close {
  display: block !important;
  transform: rotate(90deg) !important;
}
#uwaia-toggle-btn[aria-expanded="false"] svg#uwaia-icon-close {
  display: none !important;
}

/* Pulse ring */
#uwaia-toggle-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: -5px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(37, 99, 235, 0.3) !important;
  animation: uwaia-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
  pointer-events: none !important;
}

@keyframes uwaia-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ---- Chat Modal ---- */
#uwaia-chat-modal {
  position: absolute !important;
  bottom: calc(60px + 16px) !important;
  right: 0 !important;
  width: 380px !important;
  height: 600px !important;
  max-height: calc(100vh - 100px) !important;
  background: var(--uw-bg) !important;
  border-radius: var(--uw-radius) !important;
  box-shadow: var(--uw-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  transform-origin: bottom right !important;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin: 0 !important;
  padding: 0 !important;
}

#uwaia-chat-modal[hidden] {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.95) translateY(8px) !important;
  display: flex !important;
}

#uwaia-chat-modal:not([hidden]) {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: scale(1) translateY(0) !important;
}

/* ---- Header ---- */
.uwaia-chat__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  background: #111827 !important; /* Dark premium background */
  height: var(--uw-header-h) !important;
  flex-shrink: 0 !important;
  color: white !important;
  margin: 0 !important;
}

.uwaia-chat__header-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.uwaia-chat__avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: #1f2937 !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.uwaia-chat__avatar svg {
  width: 100% !important;
  height: 100% !important;
}

.uwaia-chat__name {
  display: block !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  color: #fff !important;
}

.uwaia-chat__status {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: rgba(255,255,255,0.7) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
}

.uwaia-online-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5) !important;
}

.uwaia-chat__close-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: rgba(255,255,255,0.6) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
}

.uwaia-chat__close-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}

.uwaia-chat__close-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

/* ---- Messages ---- */
.uwaia-chat__messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 20px 20px 8px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  scroll-behavior: smooth !important;
  background: #ffffff !important;
  margin: 0 !important;
}

.uwaia-chat__messages::-webkit-scrollbar { width: 5px !important; }
.uwaia-chat__messages::-webkit-scrollbar-track  { background: transparent !important; }
.uwaia-chat__messages::-webkit-scrollbar-thumb  { background: rgba(0,0,0,0.1) !important; border-radius: 10px !important; }

/* Message bubble base */
.uwaia-msg {
  max-width: 78% !important; /* Around 75-80% requested */
  padding: 10px 14px !important; /* Requested 10px 14px */
  border-radius: 14px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
  animation: uwaia-msg-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  margin: 0 !important;
  display: inline-block !important;
}

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

/* Bot message */
.uwaia-msg--bot {
  background: var(--uw-bg-bot) !important;
  color: var(--uw-text) !important;
  border-bottom-left-radius: 4px !important;
  align-self: flex-start !important;
}

/* User message */
.uwaia-msg--user {
  background: var(--uw-bg-user) !important;
  color: #ffffff !important;
  border-bottom-right-radius: 4px !important;
  align-self: flex-end !important;
}

/* Typing indicator */
.uwaia-typing {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
  align-self: flex-start !important;
  background: var(--uw-bg-bot) !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  border-bottom-left-radius: 4px !important;
  margin: 0 !important;
}

.uwaia-typing span {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--uw-text-muted) !important;
  animation: uwaia-dot 1.4s infinite ease-in-out both !important;
  display: block !important;
}

.uwaia-typing span:nth-child(1) { animation-delay: -0.32s !important; }
.uwaia-typing span:nth-child(2) { animation-delay: -0.16s !important; }

@keyframes uwaia-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* ---- Input Area ---- */
.uwaia-chat__input-area {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 20px !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Wrapping the textarea and button together for clean alignment */
.uwaia-chat__input-wrapper {
  flex: 1 !important;
  display: flex !important;
  align-items: flex-end !important;
  background: #ffffff !important;
  border: 1.5px solid var(--uw-border) !important; /* Light gray border */
  border-radius: 20px !important;
  padding: 4px 6px 4px 14px !important;
  transition: border-color 0.2s ease !important;
}

.uwaia-chat__input-wrapper:focus-within {
  border-color: var(--uw-primary) !important; /* Shift to accent color on focus */
}

.uwaia-chat__textarea {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  padding: 10px 0 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  resize: none !important;
  line-height: 1.4 !important;
  color: var(--uw-text) !important;
  max-height: 100px !important;
  overflow-y: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.uwaia-chat__textarea::placeholder {
  color: var(--uw-text-muted) !important;
}

.uwaia-chat__send-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--uw-primary) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
  margin: 0 0 4px 8px !important;
  padding: 0 !important;
}

.uwaia-chat__send-btn:hover:not(:disabled) {
  background: var(--uw-secondary) !important;
  transform: translateY(-1px) !important;
}

.uwaia-chat__send-btn:disabled {
  opacity: 0.5 !important;
  background: #e5e7eb !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}

.uwaia-chat__send-btn svg {
  width: 16px !important;
  height: 16px !important;
  margin-left: -2px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

/* ---- Footer ---- */
.uwaia-chat__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 0 16px 0 !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #9ca3af !important; /* Muted light gray */
}

.uwaia-chat__footer a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #1f2937 !important; /* Dark slate for premium feel */
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 11px !important; /* Perfectly match 'Powered by' size */
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.uwaia-chat__footer a:hover {
  opacity: 0.75 !important;
  transform: translateY(-1px) !important;
}

.uwaia-brand-icon {
  width: 12px !important;
  height: 12px !important;
  color: var(--uw-primary) !important; /* Brand accent color */
}

/* ---- Search Bar Mode ---- */
#uwaia-chat-widget.uwaia-mode-search-bar {
  right: 50% !important;
  transform: translateX(50%) !important;
  width: calc(100% - 48px) !important;
  max-width: 900px !important;
  bottom: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

#uwaia-chat-widget.uwaia-mode-search-bar #uwaia-toggle-btn {
  display: none !important;
}

/* Base Modal in Search Bar Mode */
#uwaia-chat-widget.uwaia-mode-search-bar #uwaia-chat-modal {
  position: relative !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
}

/* Closed State & Closing State */
#uwaia-chat-widget.uwaia-mode-search-bar:not(.uwaia-is-open) #uwaia-chat-modal,
#uwaia-chat-widget.uwaia-mode-search-bar .uwaia-closing {
  height: 60px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
}

.uwaia-mode-search-bar:not(.uwaia-is-open) .uwaia-chat__header,
.uwaia-mode-search-bar:not(.uwaia-is-open) .uwaia-chat__messages,
.uwaia-mode-search-bar:not(.uwaia-is-open) .uwaia-chat__footer {
  display: none !important;
  opacity: 0 !important;
}

.uwaia-mode-search-bar:not(.uwaia-is-open) .uwaia-chat__input-area,
.uwaia-mode-search-bar .uwaia-closing .uwaia-chat__input-area {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

#uwaia-chat-widget.uwaia-mode-search-bar:not(.uwaia-is-open) .uwaia-chat__input-wrapper,
#uwaia-chat-widget.uwaia-mode-search-bar .uwaia-closing .uwaia-chat__input-wrapper {
  background: var(--uw-bg) !important;
  box-shadow: var(--uw-shadow-color) !important;
  border-radius: 40px !important; /* Pill shape */
  padding: 8px 16px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Open State */
#uwaia-chat-widget.uwaia-mode-search-bar.uwaia-is-open #uwaia-chat-modal:not(.uwaia-closing) {
  height: 600px !important;
  max-height: calc(100vh - 48px) !important;
  background: var(--uw-bg) !important;
  box-shadow: var(--uw-shadow-color) !important;
  border-radius: 24px !important;
}

.uwaia-mode-search-bar.uwaia-is-open .uwaia-chat__input-wrapper {
  border-radius: 8px !important; /* Revert to normal border radius */
}

/* Add smooth fade in for content */
.uwaia-mode-search-bar.uwaia-is-open #uwaia-chat-modal:not(.uwaia-closing) .uwaia-chat__header,
.uwaia-mode-search-bar.uwaia-is-open #uwaia-chat-modal:not(.uwaia-closing) .uwaia-chat__messages,
.uwaia-mode-search-bar.uwaia-is-open #uwaia-chat-modal:not(.uwaia-closing) .uwaia-chat__footer {
  animation: uwaia-fade-in 0.3s ease forwards !important;
}

/* Smooth fade out when closing */
.uwaia-mode-search-bar .uwaia-closing .uwaia-chat__header,
.uwaia-mode-search-bar .uwaia-closing .uwaia-chat__messages,
.uwaia-mode-search-bar .uwaia-closing .uwaia-chat__footer {
  animation: uwaia-fade-out 0.3s ease forwards !important;
  pointer-events: none !important;
}

@keyframes uwaia-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes uwaia-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ---- Entrance Animations ---- */
@keyframes uwaia-slide-up {
  from { opacity: 0; translate: 0 40px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes uwaia-slide-down {
  from { opacity: 0; translate: 0 -40px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes uwaia-slide-left {
  from { opacity: 0; translate: 40px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes uwaia-slide-right {
  from { opacity: 0; translate: -40px 0; }
  to { opacity: 1; translate: 0 0; }
}

#uwaia-chat-widget.uwaia-anim-slide-up { animation: uwaia-slide-up 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; }
#uwaia-chat-widget.uwaia-anim-slide-down { animation: uwaia-slide-down 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; }
#uwaia-chat-widget.uwaia-anim-slide-left { animation: uwaia-slide-left 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; }
#uwaia-chat-widget.uwaia-anim-slide-right { animation: uwaia-slide-right 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important; }

/* ---- Mobile ---- */
@media (max-width: 480px) {
  #uwaia-chat-widget {
    bottom: 12px !important;
    right: 12px !important;
  }
  #uwaia-toggle-btn {
    width: 54px !important;
    height: 54px !important;
  }
  #uwaia-chat-modal {
    width: calc(100vw - 24px) !important;
    height: calc(100dvh - 80px) !important;
    bottom: calc(54px + 12px) !important;
  }
}

/* =========================================================================
   In-chat lead capture card
   Rendered inside the message list, so it must read as part of the
   conversation - a card, not a popup. Every rule is scoped to the widget id
   and forced, because host themes style bare input and button elements
   aggressively (the pill borders and stray colours a theme adds are exactly
   what this block overrides).
   ========================================================================= */
#uwaia-chat-widget .uwaia-lead {
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid var(--uw-border) !important;
  border-radius: var(--uw-radius) !important;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06) !important;
  padding: 16px !important;
  margin: 2px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  font-family: inherit !important;
  animation: uwaia-msg-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Header: small badge + heading, so the card announces itself */
#uwaia-chat-widget .uwaia-lead__header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#uwaia-chat-widget .uwaia-lead__badge {
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(37, 99, 235, 0.1) !important;
  color: var(--uw-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#uwaia-chat-widget .uwaia-lead__badge svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

#uwaia-chat-widget .uwaia-lead__title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--uw-text) !important;
}

#uwaia-chat-widget .uwaia-lead__intro {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #4b5563 !important;
}

/* Fields */
#uwaia-chat-widget .uwaia-lead__fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#uwaia-chat-widget .uwaia-lead__field {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#uwaia-chat-widget .uwaia-lead__label {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #4b5563 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  letter-spacing: 0.01em !important;
}

#uwaia-chat-widget .uwaia-lead__optional {
  color: var(--uw-text-muted) !important;
  font-weight: 400 !important;
}

#uwaia-chat-widget input.uwaia-lead__input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--uw-text) !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--uw-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#uwaia-chat-widget input.uwaia-lead__input::placeholder {
  color: var(--uw-text-muted) !important;
  opacity: 1 !important;
}

#uwaia-chat-widget input.uwaia-lead__input:hover:not(:disabled) {
  border-color: #d1d5db !important;
}

#uwaia-chat-widget input.uwaia-lead__input:focus,
#uwaia-chat-widget input.uwaia-lead__input:focus-visible {
  border-color: var(--uw-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

#uwaia-chat-widget input.uwaia-lead__input:disabled {
  background: #f9fafb !important;
  color: var(--uw-text-muted) !important;
  cursor: not-allowed !important;
}

/* Invalid state: red border plus a message, never colour alone */
#uwaia-chat-widget input.uwaia-lead__input[aria-invalid="true"] {
  border-color: #dc2626 !important;
}

#uwaia-chat-widget input.uwaia-lead__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

#uwaia-chat-widget .uwaia-lead__error {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #dc2626 !important;
  display: none !important;
}

#uwaia-chat-widget .uwaia-lead__error.uwaia-is-visible {
  display: block !important;
}

/* Form-level status line */
#uwaia-chat-widget .uwaia-lead__note {
  margin: 0 !important;
  padding: 10px 12px !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: #b42318 !important;
  background: #fef3f2 !important;
  border: 1px solid #fecdca !important;
  border-radius: 8px !important;
  display: none !important;
}

#uwaia-chat-widget .uwaia-lead__note.uwaia-is-visible {
  display: block !important;
}

/* Actions */
#uwaia-chat-widget .uwaia-lead__actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
}

#uwaia-chat-widget button.uwaia-lead__send,
#uwaia-chat-widget button.uwaia-lead__skip {
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 38px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

#uwaia-chat-widget button.uwaia-lead__send {
  flex: 1 1 auto !important;
  background: var(--uw-primary) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid var(--uw-primary) !important;
}

#uwaia-chat-widget button.uwaia-lead__send:hover:not(:disabled) {
  background: var(--uw-secondary) !important;
  border-color: var(--uw-secondary) !important;
}

#uwaia-chat-widget button.uwaia-lead__send:disabled {
  opacity: 0.65 !important;
  cursor: default !important;
}

#uwaia-chat-widget button.uwaia-lead__skip {
  flex: 0 0 auto !important;
  background: transparent !important;
  background-image: none !important;
  color: #6b7280 !important;
  border: 1px solid transparent !important;
  font-weight: 500 !important;
}

#uwaia-chat-widget button.uwaia-lead__skip:hover:not(:disabled) {
  background: #f3f4f6 !important;
  color: var(--uw-text) !important;
}

#uwaia-chat-widget button.uwaia-lead__send:focus-visible,
#uwaia-chat-widget button.uwaia-lead__skip:focus-visible {
  outline: 2px solid var(--uw-primary) !important;
  outline-offset: 2px !important;
}

/* Spinner shown while the details are in flight */
#uwaia-chat-widget .uwaia-lead__spinner {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  border-top-color: #ffffff !important;
  animation: uwaia-lead-spin 0.6s linear infinite !important;
  display: block !important;
  flex: 0 0 auto !important;
}

@keyframes uwaia-lead-spin {
  to { transform: rotate(360deg); }
}

/* Consent / privacy footnote */
#uwaia-chat-widget .uwaia-lead__consent {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: var(--uw-text-muted) !important;
}

/* ---- Confirmation state ---- */
#uwaia-chat-widget .uwaia-lead--done {
  border-color: #a6f4c5 !important;
  background: #f6fef9 !important;
  gap: 10px !important;
}

#uwaia-chat-widget .uwaia-lead--done .uwaia-lead__badge {
  background: rgba(5, 150, 105, 0.12) !important;
  color: #047857 !important;
}

#uwaia-chat-widget .uwaia-lead__summary {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#uwaia-chat-widget .uwaia-lead__summary li {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--uw-text) !important;
  list-style: none !important;
}

#uwaia-chat-widget .uwaia-lead__summary-key {
  flex: 0 0 auto !important;
  min-width: 62px !important;
  color: var(--uw-text-muted) !important;
  font-size: 12px !important;
}

#uwaia-chat-widget .uwaia-lead__summary-value {
  font-weight: 500 !important;
  word-break: break-word !important;
}

@media (max-width: 480px) {
  #uwaia-chat-widget .uwaia-lead {
    padding: 14px !important;
  }
  #uwaia-chat-widget .uwaia-lead__actions {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
  }
  #uwaia-chat-widget button.uwaia-lead__send,
  #uwaia-chat-widget button.uwaia-lead__skip {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #uwaia-chat-widget .uwaia-lead {
    animation: none !important;
  }
  #uwaia-chat-widget .uwaia-lead__spinner {
    animation-duration: 1.6s !important;
  }
}

/* -----------------------------------------------------------------------
 * Product / service cards
 *
 * These live INSIDE the assistant's own bubble. They used to be appended to
 * the message list as a sibling, which put the answer's own links outside the
 * answer — and, while the lead card is up, outside anything the widget can
 * hold back. A card is part of the reply, so it is drawn as part of the reply.
 * -------------------------------------------------------------------------- */
#uwaia-chat-widget .uwaia-msg__cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 10px !important;
  white-space: normal !important; /* The bubble is pre-wrap; cards are not. */
}

/* More than one card scrolls sideways rather than stacking the bubble tall. */
#uwaia-chat-widget .uwaia-msg__cards.uwaia-carousel {
  flex-direction: row !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  padding-bottom: 4px !important;
  -webkit-overflow-scrolling: touch !important;
}

#uwaia-chat-widget .uwaia-msg__cards.uwaia-carousel .uwaia-card-block {
  flex: 0 0 190px !important;
  scroll-snap-align: start !important;
}

#uwaia-chat-widget .uwaia-card-block {
  background: var(--uw-bg, #ffffff) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

#uwaia-chat-widget .uwaia-card-block__image {
  display: block !important;
  width: 100% !important;
  height: 110px !important;
  object-fit: cover !important;
}

#uwaia-chat-widget .uwaia-card-block__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 9px 11px !important;
}

#uwaia-chat-widget .uwaia-card-block__title {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--uw-text) !important;
}

#uwaia-chat-widget .uwaia-card-block__price {
  font-size: 13px !important;
  font-weight: 600 !important;
  opacity: 0.85 !important;
}

#uwaia-chat-widget a.uwaia-card-block__link {
  align-self: flex-start !important;
  margin-top: 3px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: var(--uw-bg-user, #2563eb) !important;
}

#uwaia-chat-widget a.uwaia-card-block__link:hover,
#uwaia-chat-widget a.uwaia-card-block__link:focus-visible {
  text-decoration: underline !important;
}

/* A bubble carrying cards needs more room than a line of text does. */
#uwaia-chat-widget .uwaia-msg--bot:has(.uwaia-msg__cards) {
  max-width: 92% !important;
}

/* =======================================================================
   SIDE PANEL MODE, WELCOME STATE, RICH TEXT AND LOADING
   =======================================================================
   Everything below is additive. The rules above still describe the classic
   corner widget and the floating search bar exactly as they did; these only
   apply inside the new mode class, or to elements that did not exist before.
   ======================================================================= */

/* ---------- Shared tokens ----------
   The tints are derived from whatever primary colour the site owner picked, so a
   brand that is not the default blue does not end up with green buttons sitting
   inside blue halos. Each is declared twice on purpose: the flat rgba lands
   first as a fallback, and the color-mix line overrides it wherever the browser
   understands it. */
#uwaia-chat-widget {
  --uw-panel-w:     420px;
  /* How far the side panel is held off every edge of the window. */
  --uw-panel-inset: 24px;
  --uw-ease:        cubic-bezier(0.16, 1, 0.3, 1);

  --uw-ring:        rgba(37, 99, 235, 0.13);
  --uw-ring:        color-mix(in srgb, var(--uw-primary) 14%, transparent);

  --uw-tint:        rgba(37, 99, 235, 0.06);
  --uw-tint:        color-mix(in srgb, var(--uw-primary) 6%, #ffffff);

  --uw-edge:        rgba(37, 99, 235, 0.33);
  --uw-edge:        color-mix(in srgb, var(--uw-primary) 33%, var(--uw-border));
}

/* =======================================================================
   1. SIDE PANEL MODE
   ======================================================================= */

/* The panel leaves the widget's corner anchor and is positioned against the
   window instead, but it is inset from every edge rather than filling the
   viewport. Floor to ceiling, it read as a second browser chrome bolted to the
   side of the page; held off the edges it reads as a panel sitting above the
   site, which is what it is. */
#uwaia-chat-widget.uwaia-mode-side-panel #uwaia-chat-modal {
  position: fixed !important;
  top: var(--uw-panel-inset) !important;
  right: var(--uw-panel-inset) !important;
  bottom: var(--uw-panel-inset) !important;
  left: auto !important;
  width: var(--uw-panel-w) !important;
  max-width: calc(100vw - (var(--uw-panel-inset) * 2)) !important;
  /* Height comes from the top and bottom insets, so it adapts to the window
     without ever reaching either edge. */
  height: auto !important;
  max-height: none !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  transform-origin: right center !important;
  transition: transform 0.42s var(--uw-ease), opacity 0.28s ease !important;
}

/* Slides rather than scales: a tall panel that zooms looks like a modal that
   mis-sized itself, where a slide reads as a drawer coming in from the edge.
   The travel clears the inset as well as the panel's own width - at exactly
   100% a sliver of it would still be parked on screen. */
#uwaia-chat-widget.uwaia-mode-side-panel #uwaia-chat-modal[hidden] {
  transform: translateX(calc(100% + var(--uw-panel-inset) + 8px)) !important;
  opacity: 1 !important;
}

#uwaia-chat-widget.uwaia-mode-side-panel #uwaia-chat-modal:not([hidden]) {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

/* With the panel open the toggle would sit underneath it, so it steps aside.
   The header's own close button is the way back out - the same affordance the
   panel already had. */
#uwaia-chat-widget.uwaia-mode-side-panel.uwaia-is-open #uwaia-toggle-btn {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.8) !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/* The panel has rounded corners now, so the header has to be clipped by them.
   Left square it would poke out past the radius at the top two corners. */
#uwaia-chat-widget.uwaia-mode-side-panel .uwaia-chat__header {
  border-radius: 17px 17px 0 0 !important;
}

/* A narrow window has no room to give away, so the inset shrinks rather than
   the panel. It still never touches an edge. */
@media (max-width: 560px) {
  #uwaia-chat-widget.uwaia-mode-side-panel #uwaia-chat-modal {
    --uw-panel-inset: 12px;
    width: auto !important;
    left: var(--uw-panel-inset) !important;
  }
}

/* =======================================================================
   2. WELCOME STATE
   ======================================================================= */

#uwaia-chat-widget .uwaia-welcome {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  flex: 1 1 auto !important;
  gap: 0 !important;
  padding: 18px 4px 8px !important;
  margin: 0 !important;
  animation: uwaia-welcome-in 0.5s var(--uw-ease) both !important;
}

@keyframes uwaia-welcome-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

#uwaia-chat-widget .uwaia-welcome__title {
  font-size: 19px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: var(--uw-text) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}

#uwaia-chat-widget .uwaia-welcome__subtitle {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--uw-text-muted) !important;
  margin: 0 0 22px !important;
  padding: 0 8px !important;
  max-width: 300px !important;
}

/* The entrance the welcome screen's buttons share. The buttons themselves are
   defined in the PANEL INTERFACE section at the end of this file. */
@keyframes uwaia-prompt-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The panel is taller than the corner widget, so it can afford more breathing
   room around the same content rather than stretching it. */
#uwaia-chat-widget.uwaia-mode-side-panel .uwaia-welcome {
  padding: 32px 8px 16px !important;
}

#uwaia-chat-widget.uwaia-mode-side-panel .uwaia-welcome__title {
  font-size: 22px !important;
}

/* =======================================================================
   3. RICH TEXT INSIDE BUBBLES
   =======================================================================
   Replies arrive as markdown. Rendered as plain text they showed their own
   syntax to the visitor - literal ** around every bolded phrase and a hyphen
   in front of every list item. */

#uwaia-chat-widget .uwaia-msg--rich {
  white-space: normal !important;
}

#uwaia-chat-widget .uwaia-msg--rich p {
  margin: 0 0 8px !important;
  padding: 0 !important;
}

#uwaia-chat-widget .uwaia-msg--rich p:last-child {
  margin-bottom: 0 !important;
}

#uwaia-chat-widget .uwaia-msg--rich strong {
  font-weight: 650 !important;
  color: inherit !important;
}

#uwaia-chat-widget .uwaia-msg--rich em {
  font-style: italic !important;
}

#uwaia-chat-widget .uwaia-msg--rich ul {
  margin: 6px 0 8px !important;
  padding: 0 0 0 2px !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#uwaia-chat-widget .uwaia-msg--rich ul:last-child {
  margin-bottom: 0 !important;
}

/* A tinted dot rather than a bullet glyph: it lines up predictably whatever
   the host theme has done to list styling. */
#uwaia-chat-widget .uwaia-msg--rich li {
  position: relative !important;
  padding-left: 16px !important;
  margin: 0 !important;
  list-style: none !important;
  line-height: 1.5 !important;
}

#uwaia-chat-widget .uwaia-msg--rich li::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 8px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--uw-primary) !important;
  opacity: 0.55 !important;
}

#uwaia-chat-widget .uwaia-msg--rich a {
  color: var(--uw-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 500 !important;
  word-break: break-word !important;
}

#uwaia-chat-widget .uwaia-msg--user.uwaia-msg--rich a {
  color: #ffffff !important;
}

/* =======================================================================
   4. LOADING
   =======================================================================
   Three jumping dots read as a stalled page. This is a single calm shimmer
   travelling across a bubble-shaped placeholder - the same shape the answer
   will occupy, so nothing jumps when the text replaces it. */

#uwaia-chat-widget .uwaia-thinking {
  align-self: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  background: var(--uw-bg-bot) !important;
  padding: 13px 16px !important;
  border-radius: 14px !important;
  border-bottom-left-radius: 4px !important;
  margin: 0 !important;
  min-width: 168px !important;
  max-width: 78% !important;
  animation: uwaia-msg-in 0.25s var(--uw-ease) both !important;
}

#uwaia-chat-widget .uwaia-thinking__line {
  height: 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.07) 0%,
    rgba(15, 23, 42, 0.13) 35%,
    rgba(15, 23, 42, 0.07) 70%
  ) !important;
  background-size: 220% 100% !important;
  animation: uwaia-shimmer 1.5s ease-in-out infinite !important;
}

#uwaia-chat-widget .uwaia-thinking__line:nth-child(1) { width: 100% !important; }
#uwaia-chat-widget .uwaia-thinking__line:nth-child(2) { width: 82% !important;  animation-delay: 0.12s !important; }
#uwaia-chat-widget .uwaia-thinking__line:nth-child(3) { width: 56% !important;  animation-delay: 0.24s !important; }

@keyframes uwaia-shimmer {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* The opening state, before the panel has anything to show at all. */
#uwaia-chat-widget .uwaia-boot {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 0 !important;
}

#uwaia-chat-widget .uwaia-boot__spinner {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: 2.5px solid var(--uw-ring) !important;
  border-top-color: var(--uw-primary) !important;
  animation: uwaia-boot-spin 0.7s linear infinite !important;
}

@keyframes uwaia-boot-spin {
  to { transform: rotate(360deg); }
}

/* =======================================================================
   5. CARD POLISH
   ======================================================================= */

/* Cards sat flush against the bubble text. A hairline and a little air read as
   "here are the things I mentioned" rather than as part of the sentence. */
#uwaia-chat-widget .uwaia-msg__cards {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(15, 23, 42, 0.07) !important;
}

#uwaia-chat-widget .uwaia-card-block {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s var(--uw-ease) !important;
}

#uwaia-chat-widget .uwaia-card-block:hover {
  border-color: var(--uw-edge) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-1px) !important;
}

/* An empty price element used to collapse to a stray currency symbol. It is
   no longer emitted at all, but a card with no price must still sit correctly. */
#uwaia-chat-widget .uwaia-card-block__price:empty {
  display: none !important;
}

/* The panel is wide enough to show cards side by side instead of as a
   horizontal scroller the visitor has to discover. */
#uwaia-chat-widget.uwaia-mode-side-panel .uwaia-msg__cards.uwaia-carousel {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
  overflow: visible !important;
}

#uwaia-chat-widget.uwaia-mode-side-panel .uwaia-msg__cards.uwaia-carousel .uwaia-card-block {
  min-width: 0 !important;
  width: auto !important;
}

/* A reply carrying cards needs the full width to lay them out. */
#uwaia-chat-widget.uwaia-mode-side-panel .uwaia-msg--bot:has(.uwaia-msg__cards) {
  max-width: 100% !important;
  width: 100% !important;
}

/* =======================================================================
   6. MOTION PREFERENCES
   ======================================================================= */

@media (prefers-reduced-motion: reduce) {
  #uwaia-chat-widget .uwaia-welcome,
  #uwaia-chat-widget .uwaia-thinking {
    animation: none !important;
  }

  #uwaia-chat-widget .uwaia-thinking__line {
    animation: none !important;
    background: rgba(15, 23, 42, 0.10) !important;
  }

  #uwaia-chat-widget .uwaia-boot__spinner {
    animation-duration: 2s !important;
  }

  #uwaia-chat-widget.uwaia-mode-side-panel #uwaia-chat-modal {
    transition: opacity 0.2s ease !important;
  }

  #uwaia-chat-widget .uwaia-card-block:hover {
    transform: none !important;
  }
}

/* =======================================================================
   PANEL INTERFACE
   =======================================================================
   A light header, one headline action, and a row of alternatives under a
   labelled rule. Everything here is opaque: the panel sits over the site's
   own content, and anything you can read the page through is unreadable.
   ======================================================================= */

#uwaia-chat-widget {
  --uw-accent-soft: rgba(37, 99, 235, 0.08);
  --uw-accent-soft: color-mix(in srgb, var(--uw-primary) 8%, #ffffff);
  --uw-accent-line: rgba(37, 99, 235, 0.22);
  --uw-accent-line: color-mix(in srgb, var(--uw-primary) 22%, #ffffff);
}

/* ---------- Header ----------
   The dark bar was the heaviest thing on screen and the first thing you saw.
   A light header lets the panel read as part of the page instead of a toolbar
   bolted onto it. */

#uwaia-chat-widget .uwaia-chat__header {
  background: #ffffff !important;
  color: var(--uw-text) !important;
  height: 60px !important;
  padding: 0 12px 0 16px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

#uwaia-chat-widget .uwaia-chat__header-info {
  gap: 10px !important;
}

#uwaia-chat-widget .uwaia-chat__avatar {
  width: 30px !important;
  height: 30px !important;
  background: transparent !important;
  border: none !important;
}

#uwaia-chat-widget .uwaia-chat__name {
  color: var(--uw-text) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
}

/* The status line was a green dot reporting that a piece of software is
   running, which is not news to anybody. The header reads as a title now. */
#uwaia-chat-widget .uwaia-chat__status {
  display: none !important;
}

#uwaia-chat-widget .uwaia-chat__close-btn {
  color: var(--uw-text-muted) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
}

#uwaia-chat-widget .uwaia-chat__close-btn:hover {
  background: rgba(15, 23, 42, 0.05) !important;
  color: var(--uw-text) !important;
}

#uwaia-chat-widget .uwaia-chat__close-btn svg {
  width: 20px !important;
  height: 20px !important;
}

/* ---------- Welcome block ---------- */

#uwaia-chat-widget .uwaia-welcome {
  padding: 8px 4px !important;
  gap: 0 !important;
}

#uwaia-chat-widget .uwaia-welcome__title {
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 8px !important;
}

#uwaia-chat-widget .uwaia-welcome__subtitle {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--uw-text-muted) !important;
  margin: 0 0 20px !important;
  max-width: 290px !important;
}

/* ---------- The headline action ---------- */

#uwaia-chat-widget button.uwaia-primary-prompt {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  text-align: left !important;
  font-family: inherit !important;
  background: var(--uw-accent-soft) !important;
  border: 1px solid var(--uw-accent-line) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s var(--uw-ease) !important;
  animation: uwaia-prompt-in 0.45s var(--uw-ease) both !important;
}

#uwaia-chat-widget button.uwaia-primary-prompt:hover {
  border-color: var(--uw-primary) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.09) !important;
  transform: translateY(-1px) !important;
}

#uwaia-chat-widget button.uwaia-primary-prompt:focus-visible {
  outline: 2px solid var(--uw-primary) !important;
  outline-offset: 2px !important;
}

#uwaia-chat-widget .uwaia-primary-prompt__icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  background: var(--uw-primary) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#uwaia-chat-widget .uwaia-primary-prompt__icon svg {
  width: 21px !important;
  height: 21px !important;
}

#uwaia-chat-widget .uwaia-primary-prompt__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#uwaia-chat-widget .uwaia-primary-prompt__label {
  font-size: 14px !important;
  font-weight: 650 !important;
  color: var(--uw-text) !important;
  line-height: 1.3 !important;
}

#uwaia-chat-widget .uwaia-primary-prompt__hint {
  font-size: 12px !important;
  color: var(--uw-text-muted) !important;
  line-height: 1.35 !important;
}

#uwaia-chat-widget .uwaia-primary-prompt__arrow {
  color: var(--uw-text-muted) !important;
  display: flex !important;
  flex-shrink: 0 !important;
  transition: transform 0.18s var(--uw-ease), color 0.18s ease !important;
}

#uwaia-chat-widget .uwaia-primary-prompt__arrow svg {
  width: 18px !important;
  height: 18px !important;
}

#uwaia-chat-widget button.uwaia-primary-prompt:hover .uwaia-primary-prompt__arrow {
  color: var(--uw-primary) !important;
  transform: translateX(3px) !important;
}

/* ---------- "or explore" ---------- */

#uwaia-chat-widget .uwaia-welcome__divider {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin: 18px 0 14px !important;
  color: var(--uw-text-muted) !important;
  font-size: 12px !important;
}

#uwaia-chat-widget .uwaia-welcome__divider::before,
#uwaia-chat-widget .uwaia-welcome__divider::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: rgba(15, 23, 42, 0.09) !important;
}

#uwaia-chat-widget .uwaia-welcome__divider span {
  padding: 0 12px !important;
  white-space: nowrap !important;
}

/* ---------- The alternatives ---------- */

#uwaia-chat-widget .uwaia-welcome__tiles {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
}

#uwaia-chat-widget button.uwaia-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  font-family: inherit !important;
  background: #ffffff !important;
  border: 1px solid var(--uw-border) !important;
  border-radius: 12px !important;
  padding: 14px 6px !important;
  margin: 0 !important;
  cursor: pointer !important;
  min-width: 0 !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s var(--uw-ease) !important;
  animation: uwaia-prompt-in 0.45s var(--uw-ease) both !important;
}

#uwaia-chat-widget button.uwaia-tile:nth-child(1) { animation-delay: 0.06s !important; }
#uwaia-chat-widget button.uwaia-tile:nth-child(2) { animation-delay: 0.12s !important; }
#uwaia-chat-widget button.uwaia-tile:nth-child(3) { animation-delay: 0.18s !important; }

#uwaia-chat-widget button.uwaia-tile:hover {
  border-color: var(--uw-accent-line) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07) !important;
  transform: translateY(-1px) !important;
}

#uwaia-chat-widget button.uwaia-tile:focus-visible {
  outline: 2px solid var(--uw-primary) !important;
  outline-offset: 2px !important;
}

#uwaia-chat-widget .uwaia-tile__icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: var(--uw-accent-soft) !important;
  color: var(--uw-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#uwaia-chat-widget .uwaia-tile__icon svg {
  width: 17px !important;
  height: 17px !important;
}

/* Wraps rather than truncating: a two-word label cut in half is worse than a
   tile one line taller than its neighbours. */
#uwaia-chat-widget .uwaia-tile__label {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--uw-text) !important;
  text-align: center !important;
  word-break: break-word !important;
}

/* ---------- Composer ---------- */

#uwaia-chat-widget .uwaia-chat__input-area {
  padding: 12px 16px 14px !important;
  border-top: 1px solid rgba(15, 23, 42, 0.07) !important;
}

#uwaia-chat-widget .uwaia-chat__input-wrapper {
  border: 1px solid var(--uw-border) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  padding: 4px 4px 4px 14px !important;
  align-items: center !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

#uwaia-chat-widget .uwaia-chat__input-wrapper:focus-within {
  border-color: var(--uw-primary) !important;
  box-shadow: 0 0 0 3px var(--uw-accent-soft) !important;
}

#uwaia-chat-widget .uwaia-chat__send-btn {
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
}

#uwaia-chat-widget .uwaia-chat__footer {
  padding-top: 0 !important;
  padding-bottom: 10px !important;
}

/* ---------- Side panel gets the room it has ---------- */

#uwaia-chat-widget.uwaia-mode-side-panel .uwaia-welcome {
  padding: 24px 8px !important;
}

#uwaia-chat-widget.uwaia-mode-side-panel .uwaia-welcome__title {
  font-size: 22px !important;
}

#uwaia-chat-widget.uwaia-mode-side-panel .uwaia-tile__label {
  font-size: 12.5px !important;
}

@media (prefers-reduced-motion: reduce) {
  #uwaia-chat-widget button.uwaia-primary-prompt,
  #uwaia-chat-widget button.uwaia-tile {
    animation: none !important;
  }

  #uwaia-chat-widget button.uwaia-primary-prompt:hover,
  #uwaia-chat-widget button.uwaia-tile:hover {
    transform: none !important;
  }
}

/* =======================================================================
   FLOATING SEARCH BAR - SIZE AND SEAMS
   ======================================================================= */

/* Narrower. 900px spanned most of a laptop screen, which made a single input
   read as a toolbar bolted across the page. This is still comfortably wide
   enough to type a question into without feeling like a popup. */
#uwaia-chat-widget.uwaia-mode-search-bar {
  max-width: 640px !important;
}

/* The hairline above the composer belongs inside a panel, where it separates
   the input from the conversation above it. On the closed search bar there is
   nothing above it, so it rendered as a rule floating across the page - wider
   than the pill itself, because the form is full width and the pill is not.
   The original rule already said `border: none`; it lost to the panel rule
   further down the file, which carries an id and therefore more weight. */
#uwaia-chat-widget.uwaia-mode-search-bar:not(.uwaia-is-open) .uwaia-chat__input-area,
#uwaia-chat-widget.uwaia-mode-search-bar .uwaia-closing .uwaia-chat__input-area {
  border-top: none !important;
  border: none !important;
  background: transparent !important;
}

/* =======================================================================
   TRAVELLING GRADIENT BORDER
   =======================================================================
   A band of light that runs continuously around the edge of the widget.

   How it is built
   ---------------
   A conic gradient is painted across the whole element, then masked down to
   just a ring at the very edge - two stacked masks, one clipped to the content
   box and one to the border box, composited so only the difference survives.
   That difference is a band exactly `padding` thick that follows the rounded
   corners on its own, which a border cannot do with a gradient.

   Rotating the gradient's start angle is what makes the light travel. A custom
   property has to be registered with @property before it can be animated -
   CSS interpolates a registered <angle> and ignores an unregistered one - so
   without @property support the ring is simply a static gradient border, which
   still looks deliberate.

   It is drawn INSIDE the element's own box, at inset 0. The panel is
   `overflow: hidden`, so a ring hung outside the box would be clipped off; the
   edge is the one place a ring can live and still be seen in full.
   ======================================================================= */

@property --uw-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

#uwaia-chat-widget {
  /* Thickness of the band. */
  --uw-ring-w: 1.5px;

  /* How long one lap takes. */
  --uw-ring-speed: 6s;

  /* The light itself: a bright head trailing off into nothing, so it reads as
     one moving band rather than a spinning colour wheel. Both hues come from
     the site's primary colour, so the ring belongs to the brand. */
  --uw-ring-head: rgba(37, 99, 235, 1);
  --uw-ring-head: color-mix(in srgb, var(--uw-primary) 92%, #ffffff);

  --uw-ring-tail: rgba(139, 92, 246, 0.85);
  --uw-ring-tail: color-mix(in srgb, var(--uw-primary) 45%, rgba(168, 85, 247, 0.95));

  /* What the rest of the perimeter sits at when the light is elsewhere. Not
     fully transparent, or the border disappears for most of every lap. */
  --uw-ring-rest: rgba(15, 23, 42, 0.10);
}

@keyframes uwaia-ring-travel {
  to { --uw-angle: 360deg; }
}

/* The band. Shared by every surface that wears one. */
#uwaia-chat-widget .uwaia-ring::before,
#uwaia-chat-modal::before,
#uwaia-chat-widget.uwaia-mode-search-bar:not(.uwaia-is-open) .uwaia-chat__input-wrapper::before,
#uwaia-chat-widget.uwaia-mode-search-bar .uwaia-closing .uwaia-chat__input-wrapper::before,
#uwaia-toggle-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: var(--uw-ring-w) !important;
  /* The 0deg fallback matters: without @property support --uw-angle resolves to
     nothing, which would make the whole declaration invalid and leave no border
     at all. With it, an unsupporting browser gets a static gradient band and
     only loses the travel. */
  background: conic-gradient(
    from var(--uw-angle, 0deg),
    var(--uw-ring-rest) 0deg,
    var(--uw-ring-rest) 200deg,
    var(--uw-ring-tail) 285deg,
    var(--uw-ring-head) 330deg,
    var(--uw-ring-tail) 348deg,
    var(--uw-ring-rest) 360deg
  ) !important;
  /* Keep the fill only where the two boxes differ - the edge band. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  /* Above the panel's own background, and above the header, which reaches the
     top edge and would otherwise cover the band along it. */
  z-index: 5 !important;
  /* The band sits over the whole widget, so it must never eat a click. */
  pointer-events: none !important;
  animation: uwaia-ring-travel var(--uw-ring-speed) linear infinite !important;
}

/* The corner modal and the side panel both need a positioning context for the
   band; they are already positioned, so nothing to add. The search bar's pill
   is not, so it gets one. */
#uwaia-chat-widget.uwaia-mode-search-bar .uwaia-chat__input-wrapper {
  position: relative !important;
}

/* The launcher is a circle, so the same band reads as a ring around it. It
   already carries a ::after pulse, which is left alone. */
#uwaia-toggle-btn {
  --uw-ring-w: 2px;
  position: relative !important;
}

/* The open search-bar panel is the modal, which is covered by the rule above.
   Its pill should not also wear a band, or there are two competing lights. */
#uwaia-chat-widget.uwaia-mode-search-bar.uwaia-is-open .uwaia-chat__input-wrapper::before {
  content: none !important;
}

/* While the search bar is closed the modal is not a surface at all - it is a
   transparent 60px box wrapped around the pill. A band around it would trace a
   rectangle in mid-air next to the one the pill is already wearing. */
#uwaia-chat-widget.uwaia-mode-search-bar:not(.uwaia-is-open) #uwaia-chat-modal::before,
#uwaia-chat-widget.uwaia-mode-search-bar .uwaia-closing::before {
  content: none !important;
}

/* A light running laps in the corner of the eye is exactly what somebody who
   asked for less motion is asking to be spared. The gradient stays - it is the
   border's colour - it simply stops travelling. */
@media (prefers-reduced-motion: reduce) {
  #uwaia-chat-widget .uwaia-ring::before,
  #uwaia-chat-modal::before,
  #uwaia-chat-widget.uwaia-mode-search-bar:not(.uwaia-is-open) .uwaia-chat__input-wrapper::before,
  #uwaia-toggle-btn::before {
    animation: none !important;
  }
}

/* Browsers without mask-composite cannot cut the ring out of the fill, and
   would paint the gradient across the whole panel instead of just its edge.
   There they get no band rather than a coloured slab over the conversation. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  #uwaia-chat-modal::before,
  #uwaia-chat-widget.uwaia-mode-search-bar:not(.uwaia-is-open) .uwaia-chat__input-wrapper::before,
  #uwaia-toggle-btn::before {
    display: none !important;
  }
}

/* =========================================================================
   Reply controls, errors and keyboard focus
   ========================================================================= */

/* Start a new conversation - sits with the close button, same weight. */
#uwaia-chat-widget .uwaia-chat__new-btn {
  margin: 0 2px 0 auto !important;
  padding: 0 !important;
  width: 34px !important;
  height: 34px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--uw-text-muted) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#uwaia-chat-widget .uwaia-chat__new-btn:hover {
  background: rgba(15, 23, 42, 0.05) !important;
  color: var(--uw-text) !important;
}

#uwaia-chat-widget .uwaia-chat__new-btn svg {
  width: 18px !important;
  height: 18px !important;
}

/* Time, copy and thumbs under a finished reply. Small and quiet: the answer
   is the thing being read, these are there when wanted. */
#uwaia-chat-widget .uwaia-msg__actions {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 8px -4px -4px !important;
  min-height: 28px !important;
}

#uwaia-chat-widget .uwaia-msg__time {
  font-size: 11px !important;
  color: var(--uw-text-muted) !important;
  margin: 0 6px 0 4px !important;
}

#uwaia-chat-widget .uwaia-msg__action {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--uw-text-muted) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#uwaia-chat-widget .uwaia-msg__action:hover,
#uwaia-chat-widget .uwaia-msg__action.uwaia-is-done {
  background: rgba(15, 23, 42, 0.06) !important;
  color: var(--uw-text) !important;
}

#uwaia-chat-widget .uwaia-msg__action svg {
  width: 15px !important;
  height: 15px !important;
}

#uwaia-chat-widget .uwaia-msg__thanks {
  font-size: 11.5px !important;
  color: var(--uw-text-muted) !important;
  margin-left: 4px !important;
}

#uwaia-chat-widget .uwaia-msg__stopped {
  margin: 6px 0 0 !important;
  font-size: 11.5px !important;
  font-style: italic !important;
  color: var(--uw-text-muted) !important;
}

/* A failed answer, with a way to ask again. */
#uwaia-chat-widget .uwaia-msg--error {
  background: #fef3f2 !important;
  color: #7a271a !important;
  border: 1px solid #fecdca !important;
}

#uwaia-chat-widget .uwaia-msg--error p {
  margin: 0 !important;
}

#uwaia-chat-widget .uwaia-msg__retry {
  margin: 8px 0 0 !important;
  padding: 5px 12px !important;
  border: 1px solid #fda29b !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #b42318 !important;
  font: inherit !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

#uwaia-chat-widget .uwaia-msg__retry:hover {
  background: #fff6f5 !important;
}

/* The send button while a reply is streaming: Stop. */
#uwaia-chat-widget .uwaia-chat__send-btn.uwaia-is-stop {
  background: var(--uw-text) !important;
  color: #ffffff !important;
}

#uwaia-chat-widget .uwaia-chat__send-btn.uwaia-is-stop svg {
  width: 14px !important;
  height: 14px !important;
}

/* Keyboard users need to see where they are. Every control in the widget gets
   a visible ring on keyboard focus - and only on keyboard focus, so a click
   does not leave an outline behind. */
#uwaia-chat-widget button:focus-visible,
#uwaia-chat-widget a:focus-visible,
#uwaia-chat-widget textarea:focus-visible,
#uwaia-chat-widget input:focus-visible {
  outline: 2px solid var(--uw-primary) !important;
  outline-offset: 2px !important;
}

/* Comfortable touch targets on phones (WCAG 2.2 target size). */
@media (pointer: coarse) {
  #uwaia-chat-widget .uwaia-msg__action {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Order status card - reuses the lead card's look. */
#uwaia-chat-widget .uwaia-order .uwaia-lead__skip { margin: 0 0 10px; }
#uwaia-chat-widget .uwaia-order__result:not(:empty) { margin-top: 10px; }
#uwaia-chat-widget .uwaia-order__result .uwaia-lead__summary + .uwaia-lead__summary { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.08); }