/* 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. */

.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. */
.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 8px 24px rgba(0,0,0,.25);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. */
.mh-chat-bubble svg{width:57px;height:57px;fill:currentColor}
.mh-chat-bubble-custom-icon{width:57px;height:57px;object-fit:contain;display:block}
/* 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. */
.mh-chat-panel{background:#fff;color:#1c1a17;box-shadow:0 18px 48px rgba(0,0,0,.25)}

/* 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}
.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}
.mh-chat-message{max-width:85%;padding:8px 12px;border-radius:12px;font-size:13.5px;line-height:1.4;word-wrap:break-word}
/* FALLBACK ONLY: the visitor's own messages need a distinct bubble
   background regardless of host theme — there's no host-page convention
   for "my own chat message," so a low-opacity dark fill (same technique
   as form.css's "selected" states) is used rather than a fixed brand
   color. */
.mh-chat-message--visitor{align-self:flex-end;background:rgba(0,0,0,.08);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 2.3: page-rule CTA buttons under the resolved greeting.
   FALLBACK ONLY: a 1px currentColor border against the panel's white
   surface, same pattern .mh-chat-send already uses — these buttons sit
   on the same opaque surface, not the host page, so theme-inherited
   colors alone wouldn't guarantee contrast. */
.mh-chat-cta-row{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.mh-chat-cta-btn{display:inline-block;border:1px solid currentColor;border-radius:14px;padding:5px 12px;font-size:var(--mh-chat-size-buttons,12.5px);font-weight:600;color:#1c1a17;text-decoration:none}
.mh-chat-cta-btn:hover{background:rgba(0,0,0,.06)}

/* Sprint 2.2-fix (Addendum 2): "Popular Questions" chips — tapping one
   sends it immediately (widget.js). FALLBACK ONLY: same border/surface
   reasoning as .mh-chat-cta-btn above. */
.mh-chat-chip-row{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.mh-chat-chip{display:inline-block;border:1px solid rgba(0,0,0,.2);border-radius:14px;padding:5px 12px;font-size:var(--mh-chat-size-chips,12.5px);background:#fff;color:#1c1a17;cursor:pointer;font-family:inherit}
.mh-chat-chip:hover{background:rgba(0,0,0,.06)}

/* 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;gap:8px;padding:12px;border-top:1px solid #eee;flex:0 0 auto}
/* 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;padding:9px 12px;border:1px solid #ddd;border-radius:calc(var(--mh-chat-radius,30px) * 0.667);font-size:13.5px;font-family:inherit;background:#fff;color:#1c1a17}
.mh-chat-input:focus{outline:2px solid currentColor;outline-offset:-1px}
/* Sprint 0.11: border/text color is now the real Widget Builder "Button
   color" setting (falls back to the previous currentColor behavior when
   unset, since var()'s fallback can itself be the keyword currentColor). */
.mh-chat-send{background:transparent;color:var(--mh-chat-button-color,currentColor);border:1px solid var(--mh-chat-button-color,currentColor);border-radius:calc(var(--mh-chat-radius,30px) * 0.667);padding:0 16px;font-size:var(--mh-chat-size-buttons,13.5px);font-weight:600;cursor:pointer;font-family:inherit}
.mh-chat-send:hover{filter:brightness(.92);background:rgba(0,0,0,.06)}
.mh-chat-send:disabled{opacity:.5;cursor:default}
/* Sprint 5 (enhancement pass): attach button matches .mh-chat-send's own
   fallback color/border logic, just icon-only and circular. */
.mh-chat-attach{flex:0 0 auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--mh-chat-button-color,currentColor);border:1px solid var(--mh-chat-button-color,currentColor);border-radius:50%;cursor:pointer}
.mh-chat-attach:hover{filter:brightness(.92);background:rgba(0,0,0,.06)}
.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}

.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{display:flex;flex-direction:column;gap:8px;padding:0 16px 12px}
.mh-chat-prechat-input{padding:9px 12px;border:1px solid #ddd;border-radius:calc(var(--mh-chat-radius,30px) * 0.667);font-size:13.5px;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}

/* 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}
}