/* Mishk HUB — public chat widget (MH-15 Chat Sprint 0.10, Style wiring
   added Sprint 0.11).
   Theme-friendly, same approach as public/form.css and public/embeds.css
   (PDR §4.2 — the opposite rule from every admin screen: zero
   .mh-btn/.mh-table/.mh-dyn-badge/admin token usage, zero brand hex).
   Structural colors inherit from the host page; the only hardcoded
   values left are FALLBACK ONLY (a visible edge on a completely
   unstyled page) or named semantic/functional exceptions, both called
   out at their point of use, same standard as form.css/embeds.css.
   The four --mh-chat-* custom properties (bubble-bg, icon-color,
   header-bg, button-color) and --mh-chat-radius are real Widget Builder
   (Sprint 0.11) settings, written onto #mh-chat-widget's own style
   attribute by the renderer — the one PDR §4.2-sanctioned inline-style
   exception. Every fallback value matches Sprint 0.10's original
   hardcoded color/radius exactly, so an un-configured site is visually
   unchanged. */

/* Enhancement pass Sprint 29 (Round 4 §2C.2/§2C.3/§2C.10/§2C.13/§2C.15):
   every real <button>/<input> this widget renders sits in un-scoped
   host-page markup (no Shadow DOM — same fact already documented above
   .mh-chat-proactive-modal-close's own !important rules, the one place
   this defense was previously applied). A host theme's own broad
   `button`/`input`/`.btn` reset (a near-universal pattern — Bootstrap-
   style frameworks and most WP themes ship one) can carry equal or
   higher CSS specificity than this file's single-class selectors and,
   depending on stylesheet load order, silently win — producing exactly
   the "oversized/bulky, full-width, excessive padding" symptom reported
   across quick-reply chips, pre-chat fields, and the composer, on both
   desktop and mobile. Extending the SAME !important defense used for
   the proactive-modal-close button to every other interactive control,
   consistently, rather than leaving it applied to only one element. */
.mh-chat-widget button,.mh-chat-widget input,.mh-chat-trigger-popup button,.mh-chat-proactive-modal button{box-sizing:border-box!important;-webkit-appearance:none!important;appearance:none!important;margin:0!important;max-width:none!important;min-width:0!important}

.mh-chat-widget{position:fixed;z-index:99997;font-family:var(--mh-chat-font-family,inherit)}
/* Sprint 2.2-fix (Addendum 2): vertical offset raises the launcher above
   its default bottom position — additive to the fixed 24px base, not a
   replacement, so a 0 offset (the default) is visually identical to
   Sprint 0.10's original fixed position. */
.mh-chat-widget.mh-chat--pos-bottom-left{left:24px;bottom:calc(24px + var(--mh-chat-offset-y,0px))}
.mh-chat-widget.mh-chat--pos-bottom-right{right:24px;bottom:calc(24px + var(--mh-chat-offset-y,0px))}
.mh-chat-widget.mh-chat--pos-bottom-center{left:50%;transform:translateX(-50%);bottom:calc(24px + var(--mh-chat-offset-y,0px))}

/* Sprint 2.2-fix (Addendum 2): launcher animation select. None (default)
   matches Sprint 0.10's original static bubble exactly. */
@keyframes mhChatBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mhChatPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.mh-chat--anim-bounce .mh-chat-bubble{animation:mhChatBounce 2s ease-in-out infinite}
.mh-chat--anim-pulse .mh-chat-bubble{animation:mhChatPulse 2s ease-in-out infinite}

/* Sprint 2.2-fix (Addendum 2): widget size preset. Standard (default,
   no extra class) matches Sprint 0.10's original 60px/340px exactly. */
.mh-chat--size-small .mh-chat-bubble{width:48px;height:48px}
.mh-chat--size-small .mh-chat-bubble svg{width:46px;height:46px}
.mh-chat--size-small .mh-chat-panel{width:300px}
.mh-chat--size-large .mh-chat-bubble{width:72px;height:72px}
.mh-chat--size-large .mh-chat-bubble svg{width:68px;height:68px}
.mh-chat--size-large .mh-chat-panel{width:380px}

/* Launcher bubble. Sprint 0.11: the bubble's fill/icon-color/roundness
   are now real per-instance custom properties written by the Widget
   Builder (Style tab) onto #mh-chat-widget's own style attribute — the
   one PDR §4.2-sanctioned use of inline styling on the public side, same
   technique as the FAB in embeds.css. Fallback values below match the
   exact hardcoded colors this sprint replaces, so a site with no saved
   style setting yet renders byte-identical to before. */
/* padding:0 is load-bearing, not decorative: the browser's default
   <button> UA padding was shrinking the icon svg's flex-item WIDTH
   (the flex main axis lets a child shrink to fit available space) while
   leaving its HEIGHT unconstrained (the cross axis doesn't shrink the
   same way) — a real distortion (60x68 instead of 68x68 at the large
   preset) only caught by checking computed style on the actual rendered
   widget, exactly the check this sprint's task called for. */
/* Live Bug-Fix Pass (design cleanup): shadow reduced from a heavy
   0/.25-opacity/24px-blur "floating glass" look to a light contact
   shadow — enough to read as clickable against a matching-color page,
   without the glossy weight that made the widget look busier than the
   flat, matte reference design it's meant to match. */
.mh-chat-bubble{position:relative;width:60px;height:60px;padding:0;border-radius:var(--mh-chat-radius,30px);border:0;background:var(--mh-chat-bubble-bg,#1c1a17);color:var(--mh-chat-icon-color,#fff);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.16);transition:transform .15s ease}
.mh-chat-bubble:hover{transform:translateY(-2px)}
/* Sprint 2.2-fix (Addendum 2): icon fill ratio — the icon previously
   sat at 28px inside a 60px bubble (~47%), floating small inside mostly
   empty space, the exact "bubble looks too small" complaint Wa Tawasul
   already fixed in its own product. Enlarged to ~95% of the bubble's
   own box (57px of 60px) — the bubble container itself is unchanged,
   only the icon inside it grows to fill it. */
/* Live Bug-Fix Pass — real, reported failure: the icon rendered at
   width:0 on a live production site (confirmed via direct browser
   inspection — height computed correctly at 57px, width computed
   literally 0px, and forcing flex-shrink:0 on the live element
   immediately restored it to 57px with no other change). Default
   flex-shrink:1 lets a flex child — here, an SVG with no width/height
   HTML attributes, only a viewBox — collapse toward its ambiguous
   "automatic minimum size" in some browsers/layouts, the same
   underlying flex-vs-SVG vulnerability the padding:0 fix above already
   fought once for a partial (60x68) version of this same symptom; this
   site hit the FULL-collapse (60x0) version padding:0 alone doesn't
   prevent. flex-shrink:0 removes the vulnerability at its actual
   source instead of only removing one trigger for it. */
.mh-chat-bubble svg{width:57px;height:57px;fill:currentColor;flex-shrink:0}
.mh-chat-bubble-custom-icon{width:57px;height:57px;object-fit:contain;display:block;flex-shrink:0}
/* Sprint 2.2-fix (Addendum 2): icon background shape — a discrete
   round/square choice, separate from the fine-grained roundness slider
   (which still applies when shape is round, via --mh-chat-radius above).
   Square always uses a small fixed radius regardless of the slider. */
.mh-chat--icon-square .mh-chat-bubble{border-radius:12px}

/* Unread badge — semantic exception: a notification count is a
   functional "something needs attention" signal, the same universal
   convention as any app/OS unread badge, not a brand or structural
   choice. Kept as a fixed, deliberately attention-grabbing red
   regardless of host theme. */
.mh-chat-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#e0392b;color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center;display:none}
.mh-chat-badge.is-visible{display:block}

/* Chat panel. Roundness is derived from the same --mh-chat-radius the
   bubble uses, scaled down — a 340px-wide panel reads oddly with the
   bubble's full 30px default, so this keeps the panel visibly less
   round than the bubble at every slider position, matching the previous
   hardcoded 14px default exactly when no style setting is saved. */
.mh-chat-panel{position:absolute;bottom:76px;width:340px;max-height:min(70vh,520px);display:flex;flex-direction:column;border-radius:calc(var(--mh-chat-radius,30px) * 0.467);overflow:hidden}
.mh-chat-widget.mh-chat--pos-bottom-right .mh-chat-panel{right:0}
.mh-chat-widget.mh-chat--pos-bottom-left .mh-chat-panel{left:0}
.mh-chat-widget.mh-chat--pos-bottom-center .mh-chat-panel{left:50%;transform:translateX(-50%)}
.mh-chat-panel[hidden]{display:none}
/* FALLBACK ONLY: opaque white surface + dark text, same justification as
   form.css's popup panel and embeds.css's embed panel — a chat window
   needs a readable surface regardless of how dark the host page is. */
/* Live Bug-Fix Pass (design cleanup): same shadow-weight reduction as
   the launcher bubble above, for the same reason — a flatter panel
   reads as one cohesive card instead of a "floating over glass" effect. */
.mh-chat-panel{background:#fff;color:#1c1a17;box-shadow:0 6px 20px rgba(0,0,0,.14)}

/* Sprint 0.11: header background is now the real Widget Builder Style
   setting, same "admin-configured, not theme-inherited" exception
   embeds.css's FAB documents for its own background. Header text stays
   a fixed white fallback rather than auto-contrast — PDR §7 only lists
   a background-color picker for this field, not a text-color one; a
   light header background is a known, documented limitation until a
   future sprint adds contrast handling. */
.mh-chat-header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--mh-chat-header-bg,#1c1a17);color:#fff;flex:0 0 auto}
/* Enhancement pass Sprint 30 (Round 4 §2C.5): the admin-configured
   header avatar/logo — shown only when that Widget Builder setting is
   actually set, next to the (also newly-wired) display name. */
.mh-chat-header-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:0 0 auto;display:block}
.mh-chat-header-title{font-weight:600;font-size:15px;flex:1 1 auto;margin:0}
.mh-chat-close{background:transparent;border:0;color:inherit;font-size:20px;line-height:1;cursor:pointer;opacity:.8;padding:0}
.mh-chat-close:hover{opacity:1}

.mh-chat-messages{flex:1 1 auto;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-height:160px}
/* Live Bug-Fix Pass (design cleanup, round 2): a small avatar next to
   every bot/agent message, matching the confirmed reference — visitor's
   own messages (no wrapping row, just the bare bubble) are unaffected. */
.mh-chat-message-row{display:flex;align-items:flex-end;gap:6px;max-width:100%}
.mh-chat-message-row .mh-chat-message{max-width:calc(85% - 30px)}
.mh-chat-message-avatar{flex:0 0 auto;width:24px;height:24px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--mh-chat-button-color,#1c1a17);color:#fff}
.mh-chat-message-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.mh-chat-message-avatar svg{width:14px;height:14px;fill:currentColor}
.mh-chat-message{max-width:85%;padding:8px 12px;border-radius:12px;font-size:13.5px;line-height:1.4;word-wrap:break-word}
/* Enhancement pass Sprint 26: real, admin-configurable color (Widget
   Builder Style tab, widget_style_visitor_message_bg) — the fallback
   value matches the prior fixed low-opacity dark fill this rule used
   before this sprint, so an un-configured site looks unchanged. */
.mh-chat-message--visitor{align-self:flex-end;background:var(--mh-chat-visitor-msg-bg,#eaeae7);color:#1c1a17}
/* FALLBACK ONLY: same reasoning as .mh-chat-message--visitor above — the
   system/answer bubble needs its own distinct, legible fill against the
   panel's opaque white surface, not a color the host theme could sensibly
   supply for "the chat bot's own message." */
.mh-chat-message--system{align-self:flex-start;background:#f3f1ee;color:#1c1a17;font-size:var(--mh-chat-size-answer,13.5px)}
/* Sprint 2.2-fix (Addendum 2): the greeting bubble gets its own
   typography size control, independent of subsequent answer messages —
   declared after .mh-chat-message--system so it wins on equal
   specificity (both classes are on the same element). */
.mh-chat-message--welcome{font-size:var(--mh-chat-size-welcome,13.5px)}

/* Sprint 23 (enhancement pass) / PDR §2A.11: a persistent, visible
   "you're chatting with a real person" signal on every message sent
   while a session is human-owned (agent_user_id set) — not just the
   proactive modal's one-time framing (Sprint 4's agent_name). Same
   bubble shape as --system, plus a left accent in the widget's own
   button color and a small uppercase label, so it reads as distinct at
   a glance, not just on close reading of the text.
   Sprint 26: background is now the real, admin-configurable
   widget_style_agent_message_bg setting (fallback matches the prior
   fixed value, unchanged look on an un-configured site). */
.mh-chat-message--agent{align-self:flex-start;background:var(--mh-chat-agent-msg-bg,#f3f1ee);color:#1c1a17;font-size:var(--mh-chat-size-answer,13.5px);border-left:3px solid var(--mh-chat-button-color,#1c1a17)}
.mh-chat-agent-badge{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.65;margin-bottom:2px}
/* Sprint 26 — per-message timestamp, rendered under every message body. */
.mh-chat-message-time{display:block;font-size:10px;opacity:.55;margin-top:3px}
/* Sprint 26 — read-receipt ticks on the visitor's own sent messages,
   mirroring the familiar sent/delivered/read convention (single tick →
   double tick → double tick colored) rather than inventing new iconography. */
.mh-chat-message-receipt{display:inline-block;margin-left:4px;font-size:11px;opacity:.6}
.mh-chat-message-receipt--read{opacity:1;color:var(--mh-chat-button-color,#1c1a17)}

/* Enhancement pass Sprint 29: the AI-consent offer ("Yes, ask AI" /
   "No thanks", shown when a question needs noAi and consent hasn't been
   given yet) had ZERO CSS anywhere in this file before this sprint —
   found while auditing every real <button> the widget renders for the
   Round 4 "bulky/unstyled buttons" reports. It rendered as two bare,
   native browser buttons with no spacing, shape, or color — same
   accept/decline visual language as .mh-chat-proactive-modal-btn,
   reused here rather than inventing a third button style. */
.mh-chat-consent-offer{margin-top:2px}
.mh-chat-consent-btns{display:flex!important;flex-wrap:wrap;gap:8px!important;margin-top:8px}
.mh-chat-consent-btn{flex:1 1 auto!important;width:auto!important;height:auto!important;border:none;border-radius:calc(var(--mh-chat-radius,30px) * 0.667);padding:7px 14px!important;font-size:var(--mh-chat-size-buttons,12.5px)!important;font-weight:600;cursor:pointer;font-family:inherit}
.mh-chat-consent-btn--accept{background:var(--mh-chat-button-color,#1c1a17);color:#fff}
.mh-chat-consent-btn--accept:hover{filter:brightness(1.12)}
.mh-chat-consent-btn--decline{background:#f1efe9;color:#1c1a17}
.mh-chat-consent-btn--decline:hover{background:#e6e3da}

/* Sprint 2.3: page-rule CTA buttons under the resolved greeting.
   Live Bug-Fix Pass (design cleanup, round 2): reference design confirmed
   as the richer layout — quick actions are a wrapping row of bordered
   icon+label CARDS, not stacked filled pills (that was round 1's target,
   a different reference the project owner has since moved off of).
   Icon is one consistent generic glyph (this data model has no per-CTA
   icon field — admin controls label/link only); a per-item custom icon
   would need a small new Page Rules field, not done here without being
   asked. */
.mh-chat-cta-row{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px}
.mh-chat-cta-card{display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;gap:6px;width:auto!important;flex:1 1 calc(33% - 8px);min-width:74px;border:1px solid rgba(0,0,0,.1);border-radius:calc(var(--mh-chat-radius,30px) * 0.3);padding:10px 6px!important;background:#fff;text-decoration:none;color:#1c1a17;text-align:center;box-sizing:border-box}
.mh-chat-cta-card:hover{background:rgba(0,0,0,.04)}
.mh-chat-cta-card-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--mh-chat-button-color,#1c1a17);color:#fff;flex:0 0 auto}
.mh-chat-cta-card-icon svg{width:16px;height:16px;fill:currentColor}
.mh-chat-cta-card-label{font-size:11.5px;font-weight:600;line-height:1.3}

/* Sprint 2.2-fix (Addendum 2): "Popular Questions" chips — tapping one
   sends it immediately (widget.js). Live Bug-Fix Pass (design cleanup):
   same outline-to-filled, wrap-to-stack change as .mh-chat-cta-btn
   above, for the same reason and using the same already-established
   pattern. */
.mh-chat-chip-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0 16px 10px}
.mh-chat-chip{display:inline-block!important;width:auto!important;height:auto!important;border:none;border-radius:calc(var(--mh-chat-radius,30px) * 0.667);padding:8px 16px!important;font-size:var(--mh-chat-size-chips,12.5px)!important;background:var(--mh-chat-button-color,#1c1a17);color:#fff;cursor:pointer;font-family:inherit}
.mh-chat-chip:hover{filter:brightness(1.12)}

/* Sprint 2.2-fix (Addendum 2): "Ask more" secondary link under the
   composer. FALLBACK ONLY: matches the composer's own divider/text
   treatment so it reads as part of the same footer region. */
.mh-chat-ask-more{padding:0 16px 12px;text-align:center;flex:0 0 auto}
.mh-chat-ask-more a{font-size:var(--mh-chat-size-buttons,12.5px);color:#1c1a17;opacity:.75;text-decoration:underline}
.mh-chat-ask-more a:hover{opacity:1}

/* FALLBACK ONLY: divider so the composer reads as a distinct footer
   region against the message list above it, same reasoning as
   form.css's .mh-form-section divider. */
.mh-chat-composer{display:flex!important;align-items:center!important;gap:8px!important;padding:12px!important;border-top:1px solid #eee;flex:0 0 auto}
/* Sprint 27: an author-stylesheet class rule (display:flex above) would
   otherwise win over the browser's own [hidden]{display:none} default at
   equal specificity — this explicit override is required for
   composer.hidden = true to actually hide it while the pre-chat form is
   active, not just disable it underneath a still-visible row. */
.mh-chat-composer[hidden]{display:none}
/* FALLBACK ONLY: border, white background, dark text — same exact
   justification as form.css's input fields: needs a readable typing
   surface even on a dark host page. */
.mh-chat-input{flex:1 1 auto!important;width:auto!important;height:auto!important;padding:9px 12px!important;border:1px solid #ddd;border-radius:calc(var(--mh-chat-radius,30px) * 0.667);font-size:13.5px!important;font-family:inherit;background:#fff;color:#1c1a17}
.mh-chat-input:focus{outline:2px solid currentColor;outline-offset:-1px}
/* Sprint 0.11: color is the real Widget Builder "Button color" setting.
   Live Bug-Fix Pass (design cleanup): was an outlined/transparent button
   — the one composer control NOT using the filled-pill pattern every
   other primary action in this file already uses (consent/handoff-offer/
   trigger-popup/proactive-modal buttons), which read as inconsistent
   next to them. Filled to match. */
.mh-chat-send{flex:0 0 auto!important;width:auto!important;height:auto!important;background:var(--mh-chat-button-color,#1c1a17);color:#fff;border:none;border-radius:calc(var(--mh-chat-radius,30px) * 0.667);padding:0 18px!important;font-size:var(--mh-chat-size-buttons,13.5px)!important;font-weight:600;cursor:pointer;font-family:inherit}
.mh-chat-send:hover{filter:brightness(1.12)}
.mh-chat-send:disabled{opacity:.5;cursor:default}
/* Live Bug-Fix Pass (design cleanup, round 2): the main composer's send
   button is icon-only + circular in the confirmed reference — but
   .mh-chat-send is also reused, unmodified, by the pre-chat form's
   text-labeled "Start chat" button (widget.js), which genuinely needs a
   readable label, not an icon. A modifier class keeps both real, distinct
   uses correct instead of one button style serving two incompatible needs. */
.mh-chat-send--icon{width:36px!important;height:36px!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;border-radius:50%}
/* Sprint 5 (enhancement pass): attach button. Live Bug-Fix Pass (design
   cleanup): same outline-to-filled change as .mh-chat-send above, for
   the same reason — icon-only and circular, unchanged shape. */
.mh-chat-attach{flex:0 0 auto!important;width:36px!important;height:36px!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;background:var(--mh-chat-button-color,#1c1a17);color:#fff;border:none;border-radius:50%;cursor:pointer}
.mh-chat-attach:hover{filter:brightness(1.12)}
.mh-chat-attachment-image{max-width:180px;max-height:180px;border-radius:8px;display:block;margin-top:4px;object-fit:cover}
.mh-chat-attachment-link{display:inline-block;margin-top:4px;text-decoration:underline;font-size:13px}

/* Sprint 6 (enhancement pass). Live Bug-Fix Pass (design cleanup, round
   2): round 1 raised this to a full-width bar to match a different
   reference the project owner has since moved off of. The confirmed
   reference treats this as a small, centered, secondary link under the
   composer, not a prominent bar — reverted accordingly. */
.mh-chat-handoff-link{flex:0 0 auto;display:block;width:100%;box-sizing:border-box;margin:0;padding:6px 16px 10px;border:none;background:transparent;color:var(--mh-chat-button-color,currentColor);font-size:12px;font-weight:600;text-decoration:underline;text-align:center;cursor:pointer;font-family:inherit}
.mh-chat-handoff-link:hover{opacity:.75}

/* Sprint 22 (enhancement pass): inline action tied to the specific
   no_match/ai_declined/handoff_offered message, so a visitor doesn't
   have to notice the separate persistent .mh-chat-handoff-link above —
   reuses the same real showHandoffChooser()/requestHandoff() flow. */
.mh-chat-handoff-offer{margin-top:2px}
.mh-chat-handoff-offer-btn{display:inline-block;margin-top:6px;border:none;border-radius:calc(var(--mh-chat-radius,30px) * 0.667);padding:7px 14px;font-size:var(--mh-chat-size-buttons,12.5px);font-weight:600;cursor:pointer;font-family:inherit;background:var(--mh-chat-button-color,#1c1a17);color:#fff}
.mh-chat-handoff-offer-btn:hover{filter:brightness(1.12)}

.mh-chat-typing{font-size:12px;opacity:.6;padding:0 16px 8px}

/* Sprint 3.3: pre-chat form (PDR §10.1, Addendum 1) — built entirely in
   widget.js, shown only when a visitor isn't already identified and
   the admin has it enabled. FALLBACK ONLY: same readable-input-surface
   justification as .mh-chat-input above — these are the same kind of
   field, just shown before the conversation starts instead of during
   it. */
.mh-chat-prechat-wrap{margin-top:8px;padding-top:8px;border-top:1px solid #eee}
.mh-chat-prechat{display:flex!important;flex-direction:column!important;gap:8px!important;padding:0 16px 12px!important}
.mh-chat-prechat-input{width:auto!important;height:auto!important;padding:9px 12px!important;border:1px solid #ddd;border-radius:calc(var(--mh-chat-radius,30px) * 0.667);font-size:13.5px!important;font-family:inherit;background:#fff;color:#1c1a17}
.mh-chat-prechat-input:focus{outline:2px solid currentColor;outline-offset:-1px}
.mh-chat-prechat .mh-chat-send{align-self:flex-start}
/* Semantic exception: a validation error is a functional "fix this
   field" signal, the same universal convention as any form's own error
   text — not a brand or structural choice, kept as a fixed legible red
   regardless of host theme, same reasoning as the unread badge above. */
.mh-chat-prechat-error{color:#c0392b;font-size:12px;margin:0}

/* MH-18 Messaging Channels Phase 1, Sprint 1.4 (PDR Appendix A, CC-FR-03) —
   per-channel consent block, same fallback-surface reasoning as the pre-chat
   inputs above (a fixed legible surface regardless of host theme, not a
   brand choice). */
.mh-chat-prechat-consent{display:flex!important;flex-direction:column!important;gap:4px!important;padding:0 16px!important;font-size:12.5px}
.mh-chat-prechat-consent-intro{margin:0 0 2px!important;color:#5c5850}
.mh-chat-prechat-consent-opt{display:flex!important;align-items:center!important;gap:6px!important}

/* Sprint 7.1: trigger popup — shown near the chat bubble when a trigger
   fires and has a custom message set, giving the visitor an engage/dismiss
   choice before the full chat panel opens.
   FALLBACK ONLY colors (same reasoning as .mh-chat-input above): the
   popup sits on the host page, so readable surface + text contrast must
   be guaranteed on a completely unstyled white page. */
.mh-chat-trigger-popup{position:fixed;z-index:99996;bottom:calc(92px + var(--mh-chat-offset-y,0px));right:24px;width:260px;background:#fff;border:1px solid #e0ddd6;border-radius:12px;padding:14px 14px 12px;box-sizing:border-box}
.mh-chat-widget.mh-chat--pos-bottom-left~.mh-chat-trigger-popup,.mh-chat-widget.mh-chat--pos-bottom-left+.mh-chat-trigger-popup{right:auto;left:24px}
.mh-chat-trigger-popup-dismiss{position:absolute;top:8px;right:10px;background:transparent;border:none;font-size:18px;line-height:1;cursor:pointer;color:#888;padding:0}
.mh-chat-trigger-popup-dismiss:hover{color:#333}
.mh-chat-trigger-popup-msg{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:#1c1a17;font-family:inherit;padding-right:16px}
.mh-chat-trigger-popup-engage{background:var(--mh-chat-button-color,#1c1a17);color:#fff;border:none;border-radius:calc(var(--mh-chat-radius,30px) * 0.667);padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;width:100%}
.mh-chat-trigger-popup-engage:hover{filter:brightness(1.12)}

/* Proactive message modal (Sprint Plan D1) — a real, hard-to-miss
   interruption for an agent-initiated proactive push, replacing the
   previous badge/title-flash-only surfacing. Centered over a blurred
   backdrop, independent of the widget's own corner position since it
   needs to draw the eye regardless of where the bubble sits.
   FALLBACK ONLY colors, same reasoning as the trigger popup above. */
.mh-chat-proactive-backdrop{position:fixed;inset:0;z-index:99998;background:rgba(28,26,23,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
.mh-chat-proactive-modal{position:relative;width:100%;max-width:360px;background:#fff;border-radius:calc(var(--mh-chat-radius,30px) * 0.4);padding:22px 20px;box-sizing:border-box;box-shadow:0 18px 48px rgba(0,0,0,.25)}
/* !important throughout: this button sits in un-scoped host-page markup
   (no Shadow DOM), so it must not be overridable by a theme's broad
   `button{...}` reset — a real, live bug found in testing where the icon
   rendered as a large filled box instead of a small dismiss control. */
.mh-chat-proactive-modal-close{position:absolute!important;top:8px!important;right:10px!important;width:28px!important;height:28px!important;min-width:0!important;max-width:28px!important;border:none!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;color:#9388a8!important;font-size:20px!important;line-height:28px!important;text-align:center!important;cursor:pointer!important;padding:0!important;margin:0!important}
.mh-chat-proactive-modal-close:hover{color:#1c1a17!important;background:rgba(28,26,23,.06)!important}
.mh-chat-proactive-modal-agent{margin:0 0 4px;font-size:13.5px;font-weight:700;color:#1c1a17;font-family:inherit}
.mh-chat-proactive-modal-msg{margin:0 0 18px;font-size:15px;line-height:1.5;color:#1c1a17;font-family:inherit}
.mh-chat-proactive-modal-actions{display:flex;flex-wrap:wrap;gap:10px}
.mh-chat-proactive-modal-btn{flex:1 1 auto;border:none;border-radius:calc(var(--mh-chat-radius,30px) * 0.667);padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit}
.mh-chat-proactive-modal-btn--engage{flex-basis:100%;background:var(--mh-chat-button-color,#1c1a17);color:#fff}
.mh-chat-proactive-modal-btn--engage:hover{filter:brightness(1.12)}
.mh-chat-proactive-modal-btn--decline,.mh-chat-proactive-modal-btn--later{background:#f1efe9;color:#1c1a17}
.mh-chat-proactive-modal-btn--decline:hover,.mh-chat-proactive-modal-btn--later:hover{background:#e6e3da}

@media (max-width:480px){
	.mh-chat-panel{width:calc(100vw - 32px);right:16px!important;left:16px!important;bottom:88px}
	.mh-chat-widget.mh-chat--pos-bottom-left,.mh-chat-widget.mh-chat--pos-bottom-right{right:16px;left:16px}
	.mh-chat-trigger-popup{width:calc(100vw - 32px);right:16px;left:16px}
}