/* AbjadHost conversational contact widget.
 * Vanilla CSS, scoped entirely under #abjad-contact-launcher /
 * #abjad-contact-panel -- no global selectors, no framework.
 * Brand palette: indigo/violet, matching the site's existing checkout
 * accent color (rgb(102, 94, 250), confirmed live on the WHMCS cart CTA).
 */
#abjad-contact-launcher {
    position: fixed;
    right: 24px;
    /* Stacked above the theme's own #wdes-back-to-top button (fixed,
       bottom:45px, right:45px, 45x45px, z-index 99999) with clearance so
       neither ever overlaps the other -- verified live via Playwright
       (2026-09-12) at 390x844. */
    bottom: 106px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #665EFA, #5147E5);
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(81, 71, 229, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100000;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
}
#abjad-contact-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(81, 71, 229, 0.45);
}
#abjad-contact-launcher:focus-visible {
    outline: 3px solid #B4AEFF;
    outline-offset: 2px;
}
body.abjad-cw-open #abjad-contact-launcher {
    display: none;
}
/* The theme's own floating "back to top" button (#wdes-back-to-top, an
   arrow-up circle, phox theme, WordPress-side only) sits at bottom:45px;
   right:45px -- confirmed live (2026-09-12) that with the chat panel open
   it renders as an orphaned circular arrow directly below the panel on
   desktop, and behind/overlapping its lower-right corner on mobile. Scoped
   to exactly this moment (chat open) via the same body class the launcher
   itself already uses -- the button is untouched and fully functional on
   every other page state. */
body.abjad-cw-open #wdes-back-to-top {
    display: none !important;
}

#abjad-contact-panel {
    position: fixed;
    right: 24px;
    bottom: 106px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 600px;
    max-height: 78vh;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(30, 20, 90, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 100001;
    font-family: inherit;
    color: #1f2333;
}

.abjad-cw-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    background: linear-gradient(135deg, #5147E5, #6E63FF);
    color: #fff;
}
/* Favicon badge: real AbjadHost favicon (not the full wordmark), centered
   in a crisp white circle so it reads clearly against the indigo header. */
.abjad-cw-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.abjad-cw-avatar-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.abjad-cw-header-text {
    flex: 1 1 auto;
    min-width: 0;
}
.abjad-cw-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
.abjad-cw-status {
    font-size: 12px;
    opacity: 0.85;
    line-height: 1.3;
}
.abjad-cw-close {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.abjad-cw-close:hover {
    background: rgba(255, 255, 255, 0.28);
}
.abjad-cw-close:focus-visible,
.abjad-cw-chip:focus-visible,
.abjad-cw-send:focus-visible,
.abjad-cw-back:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.abjad-cw-body {
    flex: 1 1 auto;
    /* Without this a flex item's default min-height:auto can refuse to
       shrink below its own content's intrinsic height, which defeats
       "scroll inside the body" and lets the whole panel grow past its
       max-height instead. */
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    background: #F7F7FC;
}
.abjad-cw-body:focus {
    outline: none;
}

.abjad-cw-bubble {
    max-width: 90%;
    padding: 10px 14px;
    border-radius: 14px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.45;
}
.abjad-cw-bubble-bot {
    background: #fff;
    border: 1px solid #E7E6F7;
    border-top-left-radius: 4px;
    color: #262a3d;
}

.abjad-cw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.abjad-cw-chip {
    background: #fff;
    border: 1px solid #D9D6FA;
    color: #5147E5;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.abjad-cw-chip:hover {
    background: #EFEDFF;
    border-color: #B4AEFF;
}

.abjad-cw-back {
    background: none;
    border: none;
    color: #6a6f87;
    font-size: 13px;
    padding: 4px 0 12px;
    cursor: pointer;
}
.abjad-cw-back:hover {
    color: #5147E5;
}

.abjad-cw-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.abjad-cw-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #4a4f66;
    margin-bottom: 5px;
}
/* Prefixed with #abjad-contact-panel (not just .abjad-cw-field) --
   discovered live (2026-09-12) that the host theme's own global reset
   (input[type="text"], textarea, select { border: 2px solid #F4F6FA; ... })
   is the SAME specificity as a bare class+type selector, and was silently
   winning the cascade on normal/disabled states (only :hover/:focus's extra
   pseudo-class specificity happened to beat it). The #id prefix guarantees
   our fields render exactly what's defined here, in any enqueue order. */
#abjad-contact-panel .abjad-cw-field input,
#abjad-contact-panel .abjad-cw-field textarea {
    width: 100%;
    box-sizing: border-box;
    /* Was #DEDCF2 -- too close to the white/#F7F7FC panel background to
       read as a field boundary. Cool medium-gray gives clear definition
       without going dark/harsh. */
    border: 1px solid #C4C8DC;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: #1f2333;
    resize: vertical;
}
#abjad-contact-panel .abjad-cw-field input:hover,
#abjad-contact-panel .abjad-cw-field textarea:hover {
    border-color: #A6ABC8;
}
#abjad-contact-panel .abjad-cw-field input:focus,
#abjad-contact-panel .abjad-cw-field textarea:focus {
    outline: none;
    border-width: 1.5px;
    border-color: #6E63FF;
    box-shadow: 0 0 0 3px rgba(110, 99, 255, 0.15);
}
#abjad-contact-panel .abjad-cw-field input:disabled,
#abjad-contact-panel .abjad-cw-field textarea:disabled {
    border-color: #D8DAE6;
    background: #F4F4F8;
    color: #9096AC;
}

.abjad-cw-hp {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.abjad-cw-form-error {
    background: #FEF0EF;
    color: #B3261E;
    border: 1px solid #F6D3D0;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
}

.abjad-cw-send {
    background: linear-gradient(135deg, #5147E5, #6E63FF);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}
.abjad-cw-send:hover {
    filter: brightness(1.05);
}
.abjad-cw-send:disabled {
    opacity: 0.7;
    cursor: default;
}

.abjad-cw-footer {
    flex: 0 0 auto;
    padding: 4px 16px;
    text-align: center;
    background: #fff;
    border-top: 1px solid #EFEFF7;
}
.abjad-cw-footer a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    font-size: 12.5px;
    color: #7b7fa0;
    text-decoration: underline;
}
.abjad-cw-footer a:hover {
    color: #5147E5;
}

/* Mobile: compact floating panel (not a near-full-screen sheet), safe-area
   aware on every edge. Height is capped with dvh (falling back to vh on
   browsers that don't support it -- the vh rule is declared first and the
   dvh rule after, so it only ever overrides where supported) rather than a
   single fixed px value, so the panel tracks the REAL visible viewport as
   the browser chrome/address bar expands or collapses. --abjad-cw-kb-inset
   and --abjad-cw-vvh are set by attachViewportTracking() in the JS ONLY
   while the panel is open and only meaningfully change once a form field
   inside it is focused and the on-screen keyboard shrinks the visual
   viewport -- their defaults (0px / a large fallback) below make both
   rules no-ops otherwise, so nothing changes for a plain open panel. */
@media (max-width: 640px) {
    /* iOS Safari auto-zooms the whole page on focus of any text input/
       textarea whose computed font-size is below 16px -- the panel's
       normal 14px (desktop-tuned, see the un-scoped rule above) crosses
       that threshold. That zoom is almost certainly the dominant cause of
       the real-device "panel too large / content compressed" report: it
       shrinks the effective visible area far more than the keyboard alone
       does, on top of everything else. 16px is the minimum that keeps iOS
       from zooming; desktop keeps its tighter 14px untouched. */
    #abjad-contact-panel .abjad-cw-field input,
    #abjad-contact-panel .abjad-cw-field textarea {
        font-size: 16px;
    }
    #abjad-contact-launcher {
        right: max(16px, env(safe-area-inset-right, 0px));
        /* Extra headroom vs desktop's 106px->45px gap: at 375-390px widths
           the theme's back-to-top button sits only ~6px below a 96px
           offset (measured live) -- widen the gap for real-device margin. */
        bottom: calc(108px + env(safe-area-inset-bottom, 0px));
        width: 56px;
        height: 56px;
    }
    #abjad-contact-panel {
        left: max(8px, env(safe-area-inset-left, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--abjad-cw-kb-inset, 0px));
        width: auto;
        max-width: none;
        height: auto;
        max-height: 82vh;
        max-height: min(82dvh, calc(var(--abjad-cw-vvh, 2000px) - 16px));
        border-radius: 18px;
    }
}

/* Very short viewports (320x568 / 360x640 / 375x667, and a landscape phone
   such as 844x390) -- the defining constraint here is available HEIGHT, not
   width, so this is a height-based query rather than another width tier.
   Compacts chrome (header padding, avatar, body padding/spacing) without
   shrinking any text below its normal, readable size. */
@media (max-height: 700px) {
    #abjad-contact-panel {
        max-height: 74vh;
        max-height: min(74dvh, calc(var(--abjad-cw-vvh, 2000px) - 16px));
    }
    .abjad-cw-header {
        padding: 11px 12px 10px;
        gap: 10px;
    }
    .abjad-cw-avatar {
        width: 32px;
        height: 32px;
    }
    .abjad-cw-avatar-img {
        width: 20px;
        height: 20px;
    }
    .abjad-cw-body {
        padding: 12px;
    }
    .abjad-cw-bubble {
        padding: 8px 12px;
        margin-bottom: 8px;
    }
    .abjad-cw-chips {
        gap: 6px;
    }
    .abjad-cw-form {
        gap: 9px;
    }
    .abjad-cw-footer {
        padding: 0 16px;
    }
}

/* Wide-but-short viewports (landscape phones, e.g. 844x390): width is above
   the 640px mobile breakpoint above, so the panel would otherwise keep the
   desktop bottom:106px position -- combined with the max-height clamp from
   the query just above, that pushed the panel's top off the top of the
   screen (verified live). Switches to mobile-style, safe-area-aware,
   viewport-edge positioning instead, same as the narrow-mobile tier. */
@media (min-width: 641px) and (max-height: 700px) {
    #abjad-contact-panel {
        right: max(16px, env(safe-area-inset-right, 0px));
        bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--abjad-cw-kb-inset, 0px));
    }
}

/* ---------------------------------------------------------------------
   Keyboard-open compact mode (real iPhone 13/14-class device evidence,
   2026-09-13). The static @media(max-height) query above is keyed to the
   DEVICE's viewport height at load and never re-fires when the iOS
   keyboard opens, because opening it does NOT change window.innerHeight
   on iOS Safari (only visualViewport.height shrinks) -- so on a tall phone
   (844/852/932px, all above the 700px threshold) the compact styling
   never engaged for the keyboard case at all, even though the panel's own
   max-height WAS correctly shrinking via --abjad-cw-vvh. Result: a
   much-shorter panel with full-size chrome inside it, squeezing the
   actual form/field area to almost nothing and pushing the footer right
   against the keyboard -- exactly the reported symptom.
   This class is toggled by JS (attachViewportTracking in the widget JS)
   from the real measured keyboard inset, independent of any static media
   query, and removed the instant the keyboard closes -- restoring the
   footer/spacing immediately, per spec. Only the Docs link (non-essential)
   is hidden; the send button, all fields, and the header stay.
   --------------------------------------------------------------------- */
#abjad-contact-panel.abjad-cw-kb-open .abjad-cw-header {
    padding: 8px 12px;
    gap: 8px;
}
#abjad-contact-panel.abjad-cw-kb-open .abjad-cw-avatar {
    width: 28px;
    height: 28px;
}
#abjad-contact-panel.abjad-cw-kb-open .abjad-cw-avatar-img {
    width: 16px;
    height: 16px;
}
/* Decorative subtitle only ("Typically replies within a few hours") --
   dropped first, before anything the visitor actually needs. */
#abjad-contact-panel.abjad-cw-kb-open .abjad-cw-status {
    display: none;
}
#abjad-contact-panel.abjad-cw-kb-open .abjad-cw-body {
    padding: 8px 12px;
}
#abjad-contact-panel.abjad-cw-kb-open .abjad-cw-bubble {
    padding: 7px 10px;
    margin-bottom: 6px;
}
#abjad-contact-panel.abjad-cw-kb-open .abjad-cw-back {
    padding: 2px 0 6px;
}
#abjad-contact-panel.abjad-cw-kb-open .abjad-cw-form {
    gap: 7px;
}
#abjad-contact-panel.abjad-cw-kb-open .abjad-cw-field label {
    margin-bottom: 3px;
}
/* Docs link: non-essential, collapsed only while the keyboard is open so
   it never competes with it for space -- restored immediately (the class
   is removed the instant kbInset drops back down) when the keyboard
   closes. Core form actions (Send) are never hidden. */
#abjad-contact-panel.abjad-cw-kb-open .abjad-cw-footer {
    display: none;
}

/* ---------------------------------------------------------------------
   Proactive welcome greeting bubble (2026-09-13). A small, one-time-
   per-session speech bubble above the launcher - NOT the panel itself
   (separate element, separate lifecycle, never overlaps the panel since
   it is always dismissed the moment the panel opens - see
   openWidget()/dismissGreeting() in abjad-contact-widget.js). Its own
   `bottom` is normally set by the CSS below, but is overridden inline
   by JS when Complianz's cookie banner is on screen and taller than the
   default gap, so the two never overlap without touching Complianz.
   --------------------------------------------------------------------- */
.abjad-cw-greeting {
    position: fixed;
    right: 24px;
    bottom: 178px;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: max-content;
    max-width: 280px;
    background: #fff;
    color: #1f2333;
    border: 1px solid rgba(30, 20, 90, 0.08);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(30, 20, 90, 0.18);
    padding: 12px 12px 12px 10px;
    font-family: inherit;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms ease, transform 300ms ease;
    pointer-events: none;
}
.abjad-cw-greeting--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Speech-tail pointing down toward the launcher. */
.abjad-cw-greeting::after {
    content: "";
    position: absolute;
    right: 26px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid rgba(30, 20, 90, 0.08);
    border-bottom: 1px solid rgba(30, 20, 90, 0.08);
    transform: rotate(45deg);
    border-radius: 0 0 2px 0;
}
.abjad-cw-greeting-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(30, 20, 90, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 1px;
}
.abjad-cw-greeting-avatar img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.abjad-cw-greeting-text {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.4;
    padding-top: 3px;
}
.abjad-cw-greeting-close {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #8a8fb0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin-top: 1px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.abjad-cw-greeting-close:hover {
    background: rgba(30, 20, 90, 0.07);
    color: #5147E5;
}
.abjad-cw-greeting-close:focus-visible {
    outline: 2px solid #5147E5;
    outline-offset: 2px;
}
body.abjad-cw-open .abjad-cw-greeting {
    display: none !important;
}
@media (max-width: 640px) {
    .abjad-cw-greeting {
        right: 16px;
        bottom: calc(176px + env(safe-area-inset-bottom, 0px));
        max-width: calc(100vw - 32px);
    }
    .abjad-cw-greeting-avatar {
        width: 30px;
        height: 30px;
    }
    .abjad-cw-greeting-avatar img {
        width: 18px;
        height: 18px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .abjad-cw-greeting {
        transition: opacity 150ms ease;
        transform: none;
    }
}