#buzzeasy-webchat {
  color: var(--blue);
  font-family: "Source Serif 4", "Georgia", serif;
  font-size: 14px;
}

/* The widget's native CSS positions NormalWidgetRoot as:
     position: fixed; right: 1rem; bottom: 1rem; z-index: 99999
   with auto dimensions (shrinks to the 64×64 button when closed).
   We only nudge the right offset — DO NOT set width, height, or overflow here
   or the button will be clipped. */
#buzzeasy-webchat [class*="NormalWidgetRoot"] {
  right: 20px !important;
}

/* Cap the chat panel (TransitionBox) to a corner popup when it expands.
   When closed the widget natively collapses TransitionBox to 0×0, so
   these constraints only matter while the panel is open. */
#buzzeasy-webchat [class*="TransitionBox"] {
  max-width: 380px !important;
  max-height: min(560px, 75vh) !important;
  width: 380px !important;
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(16, 63, 126, 0.18) !important;
}

/* Inner structural containers: match the panel width. */
#buzzeasy-webchat [class*="WidgetBox"],
#buzzeasy-webchat [class*="ChatBoxLayout__Root"] {
  width: 380px !important;
  max-width: 380px !important;
  box-sizing: border-box !important;
}

/* Height distribution inside the open panel. */
#buzzeasy-webchat [class*="WidgetBox"],
#buzzeasy-webchat [class*="ChatBoxLayout__Root"] {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* Header: fixed 60px, no padding. */
#buzzeasy-webchat [class*="ChatBoxLayout__HeaderContainer"] {
  height: 60px !important;
  max-height: 60px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Content area fills remaining vertical space. */
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
}

/* Logged users: force free-text footer/input visible. */
#buzzeasy-webchat.dimo-auth-chat-mode [class*="FooterContainer"],
#buzzeasy-webchat.dimo-auth-chat-mode [class*="Footer"] {
  display: flex !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
}

/* Anonymous users: allow only predefined buttons by hiding text input/footer. */
#buzzeasy-webchat.dimo-anon-chat-mode [class*="FooterContainer"],
#buzzeasy-webchat.dimo-anon-chat-mode [class*="Footer"] {
  display: none !important;
}

/* Header text container: leave room for the action buttons. */
#buzzeasy-webchat [class*="Header__TextContainer"] {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Header action buttons (minimize/menu): keep them at the right edge. */
#buzzeasy-webchat [class*="HeaderContainer__RootContainer"] {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

#buzzeasy-webchat * {
  font-family: "Source Serif 4", "Georgia", serif !important;
}

/* High-contrast outgoing messages — widget uses data-direction="outbound". */
#buzzeasy-webchat [data-direction="outbound"] *,
#buzzeasy-webchat [data-direction="outbound"] p,
#buzzeasy-webchat [data-direction="outbound"] span,
#buzzeasy-webchat [data-direction="outbound"] div {
  color: #ffffff !important;
}

/* Header subtitle ("Bot" label) — white so it's visible on the dark header. */
#buzzeasy-webchat [class*="Header__SubTitle"],
#buzzeasy-webchat [class*="Header__Subtitle"],
#buzzeasy-webchat [class*="HeaderSubtitle"],
#buzzeasy-webchat [class*="header-subtitle"],
#buzzeasy-webchat [class*="Header"] [class*="subtitle"],
#buzzeasy-webchat [class*="Header"] [class*="SubTitle"] {
  color: #ffffff !important;
}

/* Input field text: dark for readability, with red caret focus indicator. */
#buzzeasy-webchat [class*="InputBox"] input,
#buzzeasy-webchat [class*="MessageInput"] input,
#buzzeasy-webchat [class*="TextInput"] input,
#buzzeasy-webchat [class*="Footer"] input,
#buzzeasy-webchat [class*="InputBox"] textarea,
#buzzeasy-webchat [class*="MessageInput"] textarea,
#buzzeasy-webchat [class*="Footer"] textarea {
  color: #0f2550 !important;
  -webkit-text-fill-color: #0f2550 !important;
  caret-color: var(--red) !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

#buzzeasy-webchat [class*="InputBox"] input::placeholder,
#buzzeasy-webchat [class*="MessageInput"] input::placeholder,
#buzzeasy-webchat [class*="TextInput"] input::placeholder,
#buzzeasy-webchat [class*="Footer"] input::placeholder,
#buzzeasy-webchat [class*="InputBox"] textarea::placeholder,
#buzzeasy-webchat [class*="MessageInput"] textarea::placeholder,
#buzzeasy-webchat [class*="Footer"] textarea::placeholder {
  color: rgba(16, 63, 126, 0.55) !important;
  opacity: 1 !important;
}

#buzzeasy-webchat [class*="InputBox"] input:focus,
#buzzeasy-webchat [class*="MessageInput"] input:focus,
#buzzeasy-webchat [class*="TextInput"] input:focus,
#buzzeasy-webchat [class*="Footer"] input:focus,
#buzzeasy-webchat [class*="InputBox"] textarea:focus,
#buzzeasy-webchat [class*="MessageInput"] textarea:focus,
#buzzeasy-webchat [class*="Footer"] textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(204, 23, 57, 0.32) !important;
}

/* Suggested-action / quick-reply buttons coming from the widget. */
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="SuggestedAction"] button,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="suggested-action"] button,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="QuickReply"] button,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="quick-reply"] button,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="Actions"] button,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="actions"] button {
  appearance: none !important;
  border: 1px solid rgba(16, 63, 126, 0.22) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--blue) 0%, #1a5db0 100%) !important;
  color: #fff !important;
  font-family: "Source Serif 4", "Georgia", serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding: 10px 12px !important;
  box-shadow: 0 6px 16px rgba(16, 63, 126, 0.2) !important;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease !important;
}

#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="SuggestedAction"] button:hover,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="suggested-action"] button:hover,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="QuickReply"] button:hover,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="quick-reply"] button:hover,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="Actions"] button:hover,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="actions"] button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(16, 63, 126, 0.28) !important;
  filter: brightness(1.03) !important;
}

#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="SuggestedAction"] button:active,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="suggested-action"] button:active,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="QuickReply"] button:active,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="quick-reply"] button:active,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="Actions"] button:active,
#buzzeasy-webchat [class*="ChatBoxLayout__ContentContainer"] [class*="actions"] button:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 10px rgba(16, 63, 126, 0.2) !important;
}