/* MessageHub Chat widget — the "Ocean" look. One custom property carries the brand color; the
   lighter gradient stop is DERIVED from it (color-mix), so a site that picks its own primary color
   keeps a coherent gradient without a second setting. */

#messagehub-chat-root {
  --mh-primary: #0a5c8a;
  /* Two declarations on purpose: the literal is the fallback for engines without color-mix. */
  --mh-primary-2: #38a3d8;
  --mh-primary-2: color-mix(in oklab, var(--mh-primary), #7cd4f7 45%);
  --mh-tint: #e3f1fa;
  --mh-tint: color-mix(in srgb, var(--mh-primary) 11%, #ffffff);
  /* Shadow/glow tones derive from the brand color too, so a site with its own primary does not
     keep the default's blue halo. Same two-declaration fallback pattern as above. */
  --mh-glow-55: rgba(10, 92, 138, 0.55);
  --mh-glow-55: color-mix(in srgb, var(--mh-primary) 55%, transparent);
  --mh-glow-35: rgba(10, 92, 138, 0.35);
  --mh-glow-35: color-mix(in srgb, var(--mh-primary) 35%, transparent);
  --mh-glow-25: rgba(10, 92, 138, 0.25);
  --mh-glow-25: color-mix(in srgb, var(--mh-primary) 25%, transparent);
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

/* Normalize the box model inside the widget regardless of what the theme set globally. */
#messagehub-chat-root,
#messagehub-chat-root * {
  box-sizing: border-box;
}

.mh-hidden {
  display: none !important;
}

/* The widget lives inside an arbitrary theme's CSS. The svg width/height ATTRIBUTES are only
   presentation hints and lose to any theme rule (one real theme zeroed them out, leaving a blank
   bubble and a blank send button) — so every icon size is pinned here, where the theme cannot win. */
#messagehub-chat-root svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
  flex: none;
}
#messagehub-chat-root .mh-bubble > svg {
  width: 27px !important;
  height: 27px !important;
}
#messagehub-chat-root .mh-msg-avatar svg {
  width: 14px !important;
  height: 14px !important;
}
#messagehub-chat-root .mh-close svg {
  width: 15px !important;
  height: 15px !important;
}
#messagehub-chat-root .mh-send svg {
  width: 17px !important;
  height: 17px !important;
}

/* Themes style `button` globally (borders, margins, uppercase, min-widths); every button the widget
   owns gets those pinned back. Background/size stay in each class's own rule. */
#messagehub-chat-root button {
  margin: 0 !important;
  border: none !important;
  min-width: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
}

/* ---- launcher bubble ---- */

#messagehub-chat-root .mh-bubble {
  position: relative;
  width: 62px !important;
  height: 62px !important;
  padding: 0 !important;
  border-radius: 50% 50% 12px 50% !important;
  background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2)) !important;
  color: #fff !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px var(--mh-glow-55) !important;
  transition: transform 0.15s ease;
}
.mh-bubble:hover {
  transform: scale(1.06);
}

/* The pill launcher ("Chat with us"): same button, other clothes. Two classes outrank the base
   pins above, so these !importants override cleanly and still beat the theme. */
#messagehub-chat-root .mh-bubble.mh-pill {
  width: auto !important;
  height: 52px !important;
  padding: 0 20px 0 16px !important;
  border-radius: 14px !important;
  gap: 9px;
}
#messagehub-chat-root .mh-bubble.mh-pill > svg {
  width: 22px !important;
  height: 22px !important;
}
.mh-bubble-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.mh-unread {
  position: absolute;
  right: -3px;
  top: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e5484d;
  border: 2.5px solid #fff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ---- panel ---- */

.mh-panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  width: 372px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100dvh - 120px);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(2, 12, 27, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mh-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(120deg, var(--mh-primary), var(--mh-primary-2));
  color: #fff;
}
.mh-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.mh-presence {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #35d88f;
  border: 2px solid var(--mh-primary);
}
.mh-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mh-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.1px;
}
.mh-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}
#messagehub-chat-root .mh-close {
  width: 32px !important;
  height: 32px !important;
  flex: none;
  background: rgba(255, 255, 255, 0.14) !important;
  border-radius: 50% !important;
  color: #fff !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  box-shadow: none !important;
}
#messagehub-chat-root .mh-close:hover {
  background: rgba(255, 255, 255, 0.26) !important;
}

/* ---- transcript ---- */

.mh-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f4f9fc;
}

.mh-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 88%;
}
.mh-row.mh-me {
  align-self: flex-end;
  flex-direction: row-reverse;
  max-width: 82%;
}
.mh-row.mh-them {
  align-self: flex-start;
}

.mh-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mh-me .mh-stack {
  align-items: flex-end;
}

.mh-msg-avatar {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Bottom-aligned with the BUBBLE, not with the time line under it — but only when that line exists
   (messages stored before timestamps carry none, and a blanket offset floated their avatars). */
.mh-row.mh-has-time > .mh-msg-avatar {
  margin-bottom: 20px;
}
.mh-msg-avatar-human {
  background: #114b6e;
}
.mh-typing .mh-msg-avatar {
  margin-bottom: 0;
}

.mh-msg {
  padding: 11px 15px;
  border-radius: 18px 18px 18px 6px;
  background: #fff;
  color: #223546;
  box-shadow: 0 1px 3px rgba(10, 60, 100, 0.08);
  white-space: pre-wrap;
  word-break: break-word;
}
.mh-me .mh-msg {
  background: linear-gradient(120deg, var(--mh-primary), var(--mh-primary-2));
  color: #fff;
  border-radius: 18px 18px 6px 18px;
  box-shadow: 0 3px 10px var(--mh-glow-25);
}
.mh-msg.mh-error {
  background: #fdecec;
  color: #8a1f1f;
}

.mh-agent {
  font-size: 11px;
  font-weight: 600;
  color: var(--mh-primary);
}

.mh-time {
  font-size: 10.5px;
  color: #8aa3b5;
  padding: 0 4px;
}

/* ---- suggestions ---- */

.mh-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 34px;
}
#messagehub-chat-root .mh-chip {
  background: var(--mh-tint) !important;
  color: var(--mh-primary) !important;
  font-weight: 500;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  cursor: pointer;
  font-size: 13px !important;
  text-align: left;
  box-shadow: none !important;
}
#messagehub-chat-root .mh-chip:hover {
  background: var(--mh-primary) !important;
  color: #fff !important;
}

/* ---- typing indicator (a bot row that stays last in the log) ---- */

.mh-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 13px 15px;
}
.mh-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mh-primary-2);
  animation: mh-blink 1.2s infinite both;
}
.mh-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.mh-dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes mh-blink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* ---- composer ---- */

.mh-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid #e7f0f6;
  background: #fff;
}
/* Theme form styling is the enemy here: real themes pin textarea heights, borders, backgrounds and
   margins (one turned this composer into a huge white box), so every property that defines the pill
   is pinned back. The HEIGHT itself is set by the widget's JS as an inline !important declaration —
   the only thing that outranks a theme's own !important — and auto-grows up to the max. */
#messagehub-chat-root .mh-input {
  flex: 1 1 auto;
  width: auto !important;
  min-height: 46px !important;
  max-height: 96px !important;
  resize: none !important;
  border: none !important;
  outline: none;
  border-radius: 22px !important;
  padding: 12px 18px !important;
  margin: 0 !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #223546 !important;
  background: #eef5fa !important;
  box-shadow: none !important;
  overflow-y: auto;
}
#messagehub-chat-root .mh-input::placeholder {
  color: #8aa3b5;
  opacity: 1;
}
#messagehub-chat-root .mh-input:focus {
  outline: 2px solid var(--mh-primary-2) !important;
  outline-offset: -1px;
}
#messagehub-chat-root .mh-send {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  flex: none;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(120deg, var(--mh-primary), var(--mh-primary-2)) !important;
  color: #fff !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: 0 4px 14px var(--mh-glow-35) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.mh-send-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

/* ---- small screens: the panel takes the viewport ---- */

@media (max-width: 480px) {
  .mh-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    bottom: 0;
  }
}