/* ============================================================
   Hi-Life Builder Bot – Chatbot Styles v1.2.0
   Font: Manrope (loaded by the plugin, can be switched off in Settings)
   Colors come from Appearance via CSS variables (wp_head overrides).
   Every declaration is !important so theme styles cannot leak in.
   Author: TBM – Two Brothers Media (https://twobrothersmedia.in/)
============================================================ */

/* ── Tokens (defaults — overridden by the inline style in wp_head) ── */
#hlb-launcher, #hlb-chatbox, #hlb-teaser {
    --hlb-primary: #00AEFF;
    --hlb-primary-rgb: 0, 174, 255;
    --hlb-dark: #004666;
    --hlb-dark-rgb: 0, 70, 102;
    --hlb-bg1: #F2F2F2;
    --hlb-bg2: #F5F5F5;
    --hlb-ink: #14202a;
    --hlb-muted: #5d6974;
    --hlb-line: rgba(var(--hlb-dark-rgb), 0.11);
    --hlb-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hlb-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Scoped reset ── */
#hlb-launcher, #hlb-launcher *, #hlb-launcher *::before, #hlb-launcher *::after,
#hlb-chatbox, #hlb-chatbox *, #hlb-chatbox *::before, #hlb-chatbox *::after,
#hlb-teaser, #hlb-teaser *, #hlb-teaser *::before, #hlb-teaser *::after {
    box-sizing: border-box !important;
    font-family: var(--hlb-font) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ============================================================
   LAUNCHER — white button; black / white close state
============================================================ */
#hlb-launcher {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    left: auto !important;
    top: auto !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #111 !important;
    display: block !important;
    cursor: pointer !important;
    z-index: 999998 !important;
    outline: none !important;
    line-height: 0 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.3s var(--hlb-ease), box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease !important;
    user-select: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
#hlb-launcher:hover, #hlb-launcher:focus, #hlb-launcher:active {
    background: #fff !important;
    color: #111 !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}
#hlb-launcher:focus-visible {
    outline: 3px solid rgba(17, 17, 17, 0.35) !important;
    outline-offset: 3px !important;
}
/* Attention ring — plays three times after load, then stops */
#hlb-launcher::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 50% !important;
    border: 2px solid rgba(17, 17, 17, 0.22) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: hlb-ring 2.4s var(--hlb-ease) 1.5s 3 !important;
}
#hlb-launcher.hlb-open::before { animation: none !important; }

#hlb-launcher #hlb-launcher-icon,
#hlb-launcher #hlb-launcher-close {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    pointer-events: none !important;
    transition: transform 0.3s var(--hlb-ease), opacity 0.2s ease !important;
}
#hlb-launcher #hlb-launcher-icon {
    width: 30px !important;
    height: 30px !important;
    transform: translate(-50%, -50%) !important;
}
#hlb-launcher #hlb-launcher-close {
    width: 18px !important;
    height: 18px !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.6) !important;
}
#hlb-launcher.hlb-open #hlb-launcher-icon {
    opacity: 0 !important;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.6) !important;
}
#hlb-launcher.hlb-open #hlb-launcher-close {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
}
/* Logo fills the white button — no ring, no inner circle */
#hlb-launcher.hlb-has-logo #hlb-launcher-icon {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    background-size: 62% !important;
}
/* Open + hover (mouse only): invert to black with a white × */
@media (hover: hover) {
    #hlb-launcher.hlb-open:hover {
        background: #111 !important;
        color: #fff !important;
    }
}
#hlb-launcher.hlb-open:focus-visible {
    background: #111 !important;
    color: #fff !important;
}
#hlb-launcher.hlb-kb-open {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   TEASER (shown beside the launcher when auto-open doesn't fire)
============================================================ */
#hlb-teaser {
    position: fixed !important;
    right: 24px !important;
    bottom: 98px !important;
    left: auto !important;
    top: auto !important;
    z-index: 999998 !important;
    width: max-content !important;
    max-width: 264px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 16px 16px 6px 16px !important;
    box-shadow: 0 14px 36px rgba(var(--hlb-dark-rgb), 0.2), 0 0 0 1px var(--hlb-line) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) !important;
    transition: opacity 0.25s ease, transform 0.35s var(--hlb-ease), visibility 0s linear 0.35s !important;
}
#hlb-teaser.hlb-teaser-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: opacity 0.25s ease, transform 0.35s var(--hlb-ease), visibility 0s !important;
}
#hlb-teaser #hlb-teaser-open {
    flex: 1 1 auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 13px 4px 13px 16px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--hlb-ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;
    cursor: pointer !important;
}
#hlb-teaser #hlb-teaser-open:hover, #hlb-teaser #hlb-teaser-open:focus {
    background: transparent !important;
    color: var(--hlb-dark) !important;
}
#hlb-teaser #hlb-teaser-close {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 7px 7px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--hlb-muted) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    text-align: center !important;
    cursor: pointer !important;
}
#hlb-teaser #hlb-teaser-close:hover, #hlb-teaser #hlb-teaser-close:focus {
    background: rgba(var(--hlb-dark-rgb), 0.07) !important;
    color: var(--hlb-ink) !important;
}
#hlb-teaser button:focus-visible {
    outline: 2px solid var(--hlb-primary) !important;
    outline-offset: -2px !important;
}

/* ============================================================
   CHATBOX
============================================================ */
#hlb-chatbox {
    position: fixed !important;
    right: 24px !important;
    bottom: 100px !important;
    left: auto !important;
    top: auto !important;
    width: 392px !important;
    max-width: calc(100vw - 32px) !important;
    height: 620px !important;
    min-height: 0 !important;
    max-height: calc(100vh - 124px) !important;
    max-height: calc(100dvh - 124px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: var(--hlb-bg2) !important;
    color: var(--hlb-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 999997 !important;
    outline: none !important;
    box-shadow: 0 24px 64px rgba(var(--hlb-dark-rgb), 0.22), 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(16px) scale(0.97) !important;
    transform-origin: bottom right !important;
    transition: opacity 0.22s ease, transform 0.34s var(--hlb-ease), visibility 0s linear 0.34s !important;
}
#hlb-chatbox.hlb-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: opacity 0.22s ease, transform 0.34s var(--hlb-ease), visibility 0s !important;
}
#hlb-chatbox:focus { outline: none !important; }
#hlb-chatbox button:focus-visible,
#hlb-chatbox a:focus-visible,
#hlb-chatbox select:focus-visible {
    outline: 2px solid var(--hlb-primary) !important;
    outline-offset: 2px !important;
}

/* ── Header ── */
#hlb-chatbox #hlb-header {
    position: relative !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 16px 14px 26px 16px !important;
    border: 0 !important;
    background: var(--hlb-dark) !important;
    color: #fff !important;
    overflow: hidden !important;
}
/* Skyline silhouette — the one decorative element */
#hlb-chatbox #hlb-header::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 3px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 22V14H14V9H24V6H30V12H46V4H58V10H66V15H84V7H94V2H108V11H116V8H132V13H142V5H154V10H162V14H182V6H192V1H204V9H212V12H228V7H240V22Z'/%3E%3C/svg%3E") !important;
    background-repeat: repeat-x !important;
    background-position: left bottom !important;
    background-size: 218px 20px !important;
    opacity: 0.16 !important;
    pointer-events: none !important;
}
#hlb-chatbox #hlb-header::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 3px !important;
    background: var(--hlb-primary) !important;
}

#hlb-chatbox #hlb-avatar {
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
#hlb-chatbox #hlb-avatar-img {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
#hlb-chatbox.hlb-has-logo #hlb-avatar {
    background: #fff !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28) !important;
}
#hlb-chatbox.hlb-has-logo #hlb-avatar-img {
    width: 100% !important;
    height: 100% !important;
    background-size: 70% !important;
}

#hlb-chatbox #hlb-header-info {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}
#hlb-chatbox #hlb-bot-name {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
}
#hlb-chatbox #hlb-subtitle {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.74) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#hlb-chatbox #hlb-status {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}
#hlb-chatbox .hlb-dot {
    display: inline-block !important;
    flex: 0 0 7px !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #34d399 !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22) !important;
}

#hlb-chatbox #hlb-header-actions {
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}
#hlb-chatbox .hlb-head-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}
#hlb-chatbox .hlb-head-btn:hover, #hlb-chatbox .hlb-head-btn:focus {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}
#hlb-chatbox .hlb-head-btn:disabled {
    opacity: 0.4 !important;
    cursor: default !important;
}
#hlb-chatbox .hlb-head-btn svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
#hlb-chatbox .hlb-head-btn svg * {
    fill: none !important;
    stroke: currentColor !important;
}

/* ── Messages ── */
#hlb-chatbox #hlb-messages {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px 14px 16px !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: var(--hlb-bg2) !important;
    scroll-behavior: smooth !important;
    list-style: none !important;
}
#hlb-chatbox #hlb-messages > * { flex-shrink: 0 !important; }
#hlb-chatbox #hlb-messages::-webkit-scrollbar { width: 5px !important; }
#hlb-chatbox #hlb-messages::-webkit-scrollbar-thumb {
    background: rgba(var(--hlb-dark-rgb), 0.18) !important;
    border-radius: 10px !important;
}

/* Bot rows */
#hlb-chatbox .hlb-msg-bot, #hlb-chatbox .hlb-typing {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: hlb-in 0.28s var(--hlb-ease) both !important;
}
#hlb-chatbox .hlb-mini-av {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--hlb-dark) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
#hlb-chatbox .hlb-mini-av-icon {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
#hlb-chatbox.hlb-has-logo .hlb-mini-av {
    background: #fff !important;
    box-shadow: inset 0 0 0 1px var(--hlb-line) !important;
}
#hlb-chatbox.hlb-has-logo .hlb-mini-av-icon {
    width: 100% !important;
    height: 100% !important;
    background-size: 68% !important;
}
/* Avatar only on the last bubble of a run */
#hlb-chatbox .hlb-grouped .hlb-mini-av { visibility: hidden !important; }

#hlb-chatbox .hlb-bubble {
    display: block !important;
    max-width: 84% !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 1px solid var(--hlb-line) !important;
    border-radius: 18px 18px 18px 6px !important;
    background: #fff !important;
    color: var(--hlb-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    text-align: left !important;
    box-shadow: 0 1px 2px rgba(var(--hlb-dark-rgb), 0.05) !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}
#hlb-chatbox .hlb-bubble strong, #hlb-chatbox .hlb-bubble b {
    font-weight: 800 !important;
    color: var(--hlb-dark) !important;
}
#hlb-chatbox .hlb-bubble em { font-style: italic !important; }
#hlb-chatbox .hlb-bubble small {
    display: inline-block !important;
    margin-top: 3px !important;
    color: var(--hlb-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
}
#hlb-chatbox .hlb-bubble p { margin: 0 0 8px !important; padding: 0 !important; }
#hlb-chatbox .hlb-bubble p:last-child { margin-bottom: 0 !important; }
#hlb-chatbox .hlb-bubble ul, #hlb-chatbox .hlb-bubble ol { margin: 4px 0 4px 18px !important; padding: 0 !important; }
#hlb-chatbox .hlb-bubble li { margin: 0 0 2px !important; padding: 0 !important; }
/* The chat lives on <html>, outside <body>, so theme link colours never reach it */
#hlb-chatbox .hlb-bubble a {
    color: var(--hlb-dark) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-color: var(--hlb-primary) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    overflow-wrap: anywhere !important;
}
#hlb-chatbox .hlb-bubble a:hover, #hlb-chatbox .hlb-bubble a:focus {
    color: var(--hlb-dark) !important;
    text-decoration-color: var(--hlb-dark) !important;
}

/* User rows */
#hlb-chatbox .hlb-msg-user {
    display: flex !important;
    justify-content: flex-end !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    animation: hlb-in 0.24s var(--hlb-ease) both !important;
}
#hlb-chatbox .hlb-msg-user .hlb-bubble {
    background: var(--hlb-dark) !important;
    color: #fff !important;
    border-color: transparent !important;
    border-radius: 18px 18px 6px 18px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(var(--hlb-dark-rgb), 0.18) !important;
}
#hlb-chatbox .hlb-msg-user .hlb-bubble strong,
#hlb-chatbox .hlb-msg-user .hlb-bubble a { color: #fff !important; }

/* ── Option list (menu, projects) ── */
#hlb-chatbox .hlb-options {
    display: flex !important;
    flex-direction: column !important;
    margin: 2px 0 0 36px !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid var(--hlb-line) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(var(--hlb-dark-rgb), 0.05) !important;
    animation: hlb-in 0.3s var(--hlb-ease) both !important;
}
#hlb-chatbox .hlb-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-top: 1px solid var(--hlb-line) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--hlb-ink) !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
#hlb-chatbox .hlb-option:first-child { border-top: 0 !important; }
#hlb-chatbox .hlb-option:hover, #hlb-chatbox .hlb-option:focus {
    background: rgba(var(--hlb-primary-rgb), 0.09) !important;
    color: var(--hlb-ink) !important;
}
#hlb-chatbox .hlb-option:focus-visible { outline-offset: -2px !important; }
#hlb-chatbox .hlb-option-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
}
#hlb-chatbox .hlb-option-label { display: block !important; margin: 0 !important; padding: 0 !important; }
#hlb-chatbox .hlb-option-meta {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--hlb-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
#hlb-chatbox .hlb-option-chev {
    flex: 0 0 8px !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    margin: 0 4px 0 0 !important;
    border: 0 !important;
    border-top: 2px solid var(--hlb-primary) !important;
    border-right: 2px solid var(--hlb-primary) !important;
    transform: rotate(45deg) !important;
    transition: transform 0.15s ease !important;
}
#hlb-chatbox .hlb-option:hover .hlb-option-chev { transform: translateX(2px) rotate(45deg) !important; }

/* Answered / stale lists */
#hlb-chatbox .hlb-answered .hlb-option,
#hlb-chatbox .hlb-answered .hlb-option:hover,
#hlb-chatbox .hlb-answered .hlb-option:focus {
    background: #fff !important;
    color: var(--hlb-muted) !important;
    cursor: default !important;
}
#hlb-chatbox .hlb-answered .hlb-option-chev { visibility: hidden !important; }
#hlb-chatbox .hlb-answered .hlb-option.hlb-selected,
#hlb-chatbox .hlb-answered .hlb-option.hlb-selected:hover {
    background: rgba(var(--hlb-primary-rgb), 0.1) !important;
    color: var(--hlb-dark) !important;
}
#hlb-chatbox .hlb-answered .hlb-option.hlb-selected .hlb-option-chev {
    visibility: visible !important;
    width: 6px !important;
    height: 11px !important;
    margin: -3px 5px 0 0 !important;
    border-top: 0 !important;
    border-right: 2px solid var(--hlb-dark) !important;
    border-bottom: 2px solid var(--hlb-dark) !important;
    transform: rotate(45deg) !important;
}

/* ── WhatsApp / Call ── */
#hlb-chatbox .hlb-cta-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 0 0 36px !important;
    padding: 0 !important;
    animation: hlb-in 0.3s var(--hlb-ease) both !important;
}
#hlb-chatbox .hlb-cta-row a:only-child { grid-column: 1 / -1 !important; }
#hlb-chatbox .hlb-btn-whatsapp, #hlb-chatbox .hlb-btn-call {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    outline: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}
#hlb-chatbox .hlb-btn-whatsapp {
    background: #1FAF5A !important;
    color: #fff !important;
    border: 1.5px solid #1FAF5A !important;
}
#hlb-chatbox .hlb-btn-whatsapp:hover, #hlb-chatbox .hlb-btn-whatsapp:focus, #hlb-chatbox .hlb-btn-whatsapp:visited {
    background: #189A4E !important;
    border-color: #189A4E !important;
    color: #fff !important;
}
#hlb-chatbox .hlb-btn-call {
    background: #fff !important;
    color: var(--hlb-dark) !important;
    border: 1.5px solid var(--hlb-dark) !important;
}
#hlb-chatbox .hlb-btn-call:hover, #hlb-chatbox .hlb-btn-call:focus {
    background: var(--hlb-dark) !important;
    color: #fff !important;
}
#hlb-chatbox .hlb-btn-call:visited { color: var(--hlb-dark) !important; }
#hlb-chatbox .hlb-btn-call:visited:hover { color: #fff !important; }
#hlb-chatbox .hlb-btn-whatsapp:active, #hlb-chatbox .hlb-btn-call:active { transform: scale(0.98) !important; }

/* ── Back to menu ── */
#hlb-chatbox .hlb-back-wrap {
    margin: 0 0 0 36px !important;
    padding: 0 !important;
    animation: hlb-in 0.3s var(--hlb-ease) both !important;
}
#hlb-chatbox .hlb-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 14px 8px 13px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(var(--hlb-dark-rgb), 0.07) !important;
    color: var(--hlb-dark) !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}
#hlb-chatbox .hlb-back-btn::before {
    content: '' !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    border-left: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
}
#hlb-chatbox .hlb-back-btn:hover, #hlb-chatbox .hlb-back-btn:focus {
    background: rgba(var(--hlb-dark-rgb), 0.13) !important;
    color: var(--hlb-dark) !important;
}

/* ── Typing indicator ── */
#hlb-chatbox .hlb-typing-dots {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    background: #fff !important;
    border: 1px solid var(--hlb-line) !important;
    border-radius: 18px 18px 18px 6px !important;
}
#hlb-chatbox .hlb-typing-dots span {
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--hlb-primary) !important;
    animation: hlb-dot 1.2s ease-in-out infinite !important;
}
#hlb-chatbox .hlb-typing-dots span:nth-child(2) { animation-delay: 0.15s !important; }
#hlb-chatbox .hlb-typing-dots span:nth-child(3) { animation-delay: 0.3s !important; }

/* ── Brochure card ── */
#hlb-chatbox .hlb-brochure-wrap {
    margin: 0 0 0 36px !important;
    padding: 0 !important;
    animation: hlb-in 0.3s var(--hlb-ease) both !important;
}
#hlb-chatbox .hlb-brochure-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px !important;
    background: #fff !important;
    border: 1px solid var(--hlb-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(var(--hlb-dark-rgb), 0.05) !important;
}
#hlb-chatbox .hlb-brochure-icon {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: rgba(var(--hlb-primary-rgb), 0.14) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#hlb-chatbox .hlb-brochure-icon svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: var(--hlb-dark) !important;
}
#hlb-chatbox .hlb-brochure-icon svg * { fill: var(--hlb-dark) !important; stroke: none !important; }
#hlb-chatbox .hlb-brochure-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
#hlb-chatbox .hlb-brochure-title {
    display: block !important;
    margin: 0 0 1px !important;
    color: var(--hlb-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#hlb-chatbox .hlb-brochure-sub {
    display: block !important;
    margin: 0 !important;
    color: var(--hlb-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}
#hlb-chatbox .hlb-brochure-btn {
    flex: 0 0 auto !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--hlb-dark) !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
#hlb-chatbox .hlb-brochure-btn:hover, #hlb-chatbox .hlb-brochure-btn:focus, #hlb-chatbox .hlb-brochure-btn:visited {
    background: var(--hlb-dark) !important;
    color: #fff !important;
}
#hlb-chatbox .hlb-brochure-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(var(--hlb-dark-rgb), 0.25) !important;
}

/* ============================================================
   INPUT AREA
   Hidden by default; JS toggles .hlb-input-visible (never inline styles)
============================================================ */
#hlb-chatbox #hlb-input-area {
    display: none !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px 12px !important;
    background: #fff !important;
    border-top: 1px solid var(--hlb-line) !important;
    overflow: hidden !important;
}
#hlb-chatbox #hlb-input-area.hlb-input-visible { display: flex !important; }

#hlb-chatbox #hlb-progress {
    display: none !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    color: var(--hlb-muted) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}
#hlb-chatbox #hlb-input-area.hlb-has-progress #hlb-progress { display: flex !important; }
#hlb-chatbox #hlb-progress-label { flex: 0 0 auto !important; display: block !important; }
#hlb-chatbox #hlb-progress-track {
    flex: 1 1 auto !important;
    display: block !important;
    height: 4px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(var(--hlb-dark-rgb), 0.08) !important;
    overflow: hidden !important;
}
#hlb-chatbox #hlb-progress-fill {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--hlb-primary) !important;
    border-radius: 999px !important;
    transform-origin: left center !important;
    transform: scaleX(var(--hlb-progress, 0)) !important;
    transition: transform 0.4s var(--hlb-ease) !important;
}

#hlb-chatbox #hlb-input-error {
    display: none !important;
    margin: 0 !important;
    padding: 0 4px !important;
    color: #C62828 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}
#hlb-chatbox #hlb-input-area.hlb-has-error #hlb-input-error { display: block !important; }

#hlb-chatbox #hlb-input-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}
#hlb-chatbox #hlb-field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--hlb-bg1) !important;
    border: 1.5px solid transparent !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}
#hlb-chatbox #hlb-field:focus-within {
    background: #fff !important;
    border-color: var(--hlb-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--hlb-primary-rgb), 0.16) !important;
}
#hlb-chatbox #hlb-input-area.hlb-has-error #hlb-field {
    border-color: #E53935 !important;
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.12) !important;
}

#hlb-chatbox #hlb-country-code {
    display: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 96px !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 22px 0 14px !important;
    border: 0 !important;
    border-right: 1px solid var(--hlb-line) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235d6974' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 10px 6px !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--hlb-ink) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 42px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
#hlb-chatbox #hlb-country-code.hlb-country-visible { display: block !important; }
#hlb-chatbox #hlb-country-code:focus { border-right-color: var(--hlb-line) !important; box-shadow: none !important; }

#hlb-chatbox #hlb-user-input {
    flex: 1 1 auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--hlb-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 42px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
#hlb-chatbox #hlb-user-input:focus { border: 0 !important; box-shadow: none !important; background: transparent !important; }
#hlb-chatbox #hlb-user-input::placeholder { color: #8a949c !important; opacity: 1 !important; }

#hlb-chatbox #hlb-skip-btn {
    display: none !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1.5px solid var(--hlb-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--hlb-dark) !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}
#hlb-chatbox #hlb-input-area.hlb-optional #hlb-skip-btn { display: inline-flex !important; }
#hlb-chatbox #hlb-skip-btn:hover, #hlb-chatbox #hlb-skip-btn:focus {
    background: rgba(var(--hlb-dark-rgb), 0.06) !important;
    color: var(--hlb-dark) !important;
    border-color: rgba(var(--hlb-dark-rgb), 0.2) !important;
}

#hlb-chatbox #hlb-send-btn {
    flex: 0 0 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--hlb-dark) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(var(--hlb-dark-rgb), 0.28) !important;
    outline: none !important;
    line-height: 0 !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
}
#hlb-chatbox #hlb-send-btn:hover, #hlb-chatbox #hlb-send-btn:focus {
    background: var(--hlb-dark) !important;
    color: #fff !important;
    transform: scale(1.06) !important;
}
#hlb-chatbox #hlb-send-btn svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 0 0 2px !important;
    fill: #fff !important;
}
#hlb-chatbox #hlb-send-btn svg * { fill: #fff !important; stroke: none !important; }
#hlb-chatbox #hlb-input-area.hlb-waiting #hlb-send-btn,
#hlb-chatbox #hlb-input-area.hlb-waiting #hlb-skip-btn {
    opacity: 0.45 !important;
    transform: none !important;
    cursor: default !important;
}

/* ── Footer ── */
#hlb-chatbox #hlb-footer {
    flex: 0 0 auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 8px 12px 10px !important;
    background: #fff !important;
    border-top: 1px solid var(--hlb-line) !important;
    color: rgba(var(--hlb-dark-rgb), 0.72) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* ============================================================
   MOBILE — contained floating widget, never a full-screen takeover
============================================================ */
@media (max-width: 480px) {
    #hlb-launcher {
        right: 16px !important;
        bottom: 16px !important;
        width: 56px !important;
        height: 56px !important;
    }
    #hlb-teaser {
        right: 16px !important;
        bottom: 84px !important;
        max-width: min(280px, calc(100vw - 32px)) !important;
    }
    #hlb-chatbox {
        left: 12px !important;
        right: 12px !important;
        bottom: 84px !important;
        width: auto !important;
        max-width: none !important;
        height: 72vh !important;
        max-height: 600px !important;
        max-height: min(600px, calc(100svh - 104px)) !important;
        border-radius: 20px !important;
    }
    /* On-screen keyboard open: sit just above it (values set by JS) */
    #hlb-chatbox.hlb-kb-open {
        bottom: calc(var(--hlb-kb, 0px) + 8px) !important;
        height: calc(var(--hlb-vvh, 72vh) - 16px) !important;
        max-height: none !important;
        transition: none !important;
    }
    #hlb-chatbox #hlb-header { padding: 14px 12px 24px 14px !important; }
    /* 16px stops iOS Safari from zooming the page on focus */
    #hlb-chatbox #hlb-user-input, #hlb-chatbox #hlb-country-code { font-size: 16px !important; }
    #hlb-chatbox .hlb-cta-row a { padding: 10px 8px !important; font-size: 12.5px !important; }
    #hlb-chatbox .hlb-brochure-card { flex-wrap: wrap !important; }
    #hlb-chatbox .hlb-brochure-btn { margin-left: 52px !important; }
}

/* ============================================================
   REDUCED MOTION (doubled IDs out-rank every rule above)
============================================================ */
@media (prefers-reduced-motion: reduce) {
    #hlb-chatbox#hlb-chatbox, #hlb-chatbox#hlb-chatbox *, #hlb-chatbox#hlb-chatbox *::before,
    #hlb-launcher#hlb-launcher, #hlb-launcher#hlb-launcher *, #hlb-launcher#hlb-launcher::before,
    #hlb-teaser#hlb-teaser, #hlb-teaser#hlb-teaser * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ── Keyframes ── */
@keyframes hlb-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes hlb-dot {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
    40%           { transform: translateY(-4px); opacity: 1; }
}
@keyframes hlb-ring {
    0%   { transform: scale(1); opacity: 0.55; }
    100% { transform: scale(1.6); opacity: 0; }
}