/* ============================================================
   HV Chatbot Widget Styles (Light Theme)
   ============================================================ */
:root {
    --hv-yellow:   #FFD200;
    --hv-dark:     #1a1a1a;
    --hv-darker:   #111111;
    --hv-gray:     #e8e8e8;
    --hv-light:    #333333;
    --hv-white:    #ffffff;
    --hv-muted:    #999999;
    --hv-bg:       #ffffff;
    --hv-bg-alt:   #f5f5f5;
    --hv-border:   #c9c9c9;
    --hv-window-border: #666666;
    --hv-radius:   12px;
    --hv-shadow:   0 8px 32px rgba(0,0,0,.18);
    --hv-font:     'Segoe UI', system-ui, -apple-system, sans-serif;

    /*
       Position hooks:
       - trigger = the small floating round chat button when the chat is closed.
       - mobile trigger = the same closed button, but on screens up to 480px.
       - window = the opened chat panel. On mobile it becomes full-screen below.
       Override these from the host page when a site has sticky buttons nearby.
    */
    --hv-chat-trigger-bottom: 28px;
    --hv-chat-trigger-right: 110px;
    --hv-chat-trigger-left: auto;

    --hv-chat-mobile-trigger-bottom: 16px;
    --hv-chat-mobile-trigger-right: auto;
    --hv-chat-mobile-trigger-left: 16px;

    --hv-chat-window-bottom: 24px;
    --hv-chat-window-right: 24px;
    --hv-chat-window-left: auto;
}

#hv-chat-trigger,
#hv-chat-trigger *,
#hv-chat-window,
#hv-chat-window * {
    box-sizing: border-box !important;
}

/* Scoped reset against WordPress/theme styles. Keep it inside this widget only. */
#hv-chat-window,
#hv-chat-window div,
#hv-chat-window span,
#hv-chat-window h3,
#hv-chat-window a,
#hv-chat-window input,
#hv-chat-window textarea,
#hv-chat-window button,
#hv-chat-trigger,
#hv-chat-trigger span,
#hv-chat-trigger button {
    font-family: var(--hv-font) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-shadow: none !important;
}
#hv-chat-window input,
#hv-chat-window textarea,
#hv-chat-window button,
#hv-chat-trigger {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    box-shadow: none;
}
#hv-chat-window input,
#hv-chat-window textarea {
    float: none !important;
    vertical-align: baseline !important;
}
#hv-chat-window button,
#hv-chat-trigger {
    background-image: none !important;
}

/* --- Floating trigger button ------------------------------------------------ */
#hv-chat-trigger {
    position: fixed !important;
    bottom: var(--hv-chat-trigger-bottom) !important;
    right: var(--hv-chat-trigger-right) !important;
    left: var(--hv-chat-trigger-left) !important;
    z-index: 99998 !important;
    min-width: 86px !important;
    height: 56px !important;
    border-radius: 999px !important;
    border: none !important;
    background: var(--hv-yellow) !important;
    color: var(--hv-dark) !important;
    cursor: pointer !important;
    box-shadow: var(--hv-shadow) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 56px !important;
    white-space: nowrap !important;
    transition: padding .2s, box-shadow .2s !important;
}
#hv-chat-trigger:hover {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.45) !important;
}
#hv-chat-trigger svg {
    width: 27px;
    height: 27px;
    fill: var(--hv-dark);
    flex-shrink: 0;
}
#hv-chat-trigger span {
    transform: translateY(-3px);
}
#hv-chat-trigger.hv-hidden { display: none; }

/* --- Chat window ------------------------------------------------------------ */
#hv-chat-window {
    position: fixed !important;
    bottom: var(--hv-chat-window-bottom);
    right: var(--hv-chat-window-right);
    left: var(--hv-chat-window-left);
    z-index: 99999;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 48px);
    border-radius: var(--hv-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--hv-shadow);
    border: 1px solid var(--hv-window-border);
    font-family: var(--hv-font);
    background: var(--hv-bg);
    opacity: 0;
    transform: translateY(20px) scale(.96);
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}
#hv-chat-window.hv-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* --- Header ----------------------------------------------------------------- */
#hv-chat-header {
    background: var(--hv-dark);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
#hv-chat-header .hv-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--hv-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#hv-chat-header .hv-avatar svg {
    width: 24px;
    height: 24px;
    fill: var(--hv-dark);
}
#hv-chat-header .hv-header-text {
    flex: 1;
    min-width: 0;
}
#hv-chat-header .hv-header-text h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--hv-white);
    line-height: 1.2;
    text-align: left;
}
#hv-chat-header .hv-header-text span {
    font-size: 12px;
    color: var(--hv-yellow);
    display: flex;
    align-items: center;
    gap: 4px;
}
#hv-chat-header .hv-header-text span::before {
    content: '';
    width: 7px;
    height: 7px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
}
#hv-chat-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    color: var(--hv-white);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    flex-shrink: 0;
    line-height: 1;
}
#hv-chat-close:hover { background: rgba(255,255,255,.25); }

/* --- Messages area ---------------------------------------------------------- */
#hv-chat-messages {
    /* New replies must not move the reader or start a smooth scroll. */
    overflow-anchor: none;
    scroll-behavior: auto;
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 14px;
    background: var(--hv-bg);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#hv-chat-messages::-webkit-scrollbar { width: 5px; }
#hv-chat-messages::-webkit-scrollbar-track { background: transparent; }
#hv-chat-messages::-webkit-scrollbar-thumb { background: var(--hv-border); border-radius: 4px; }

/* --- Message bubbles -------------------------------------------------------- */
.hv-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    text-align: left;
    animation: hv-fadein .25s ease;
}
@keyframes hv-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hv-msg-bot {
    align-self: flex-start;
    background: var(--hv-bg-alt);
    color: var(--hv-light);
    border: 1px solid var(--hv-border);
    border-bottom-left-radius: 4px;
}
.hv-msg-user {
    align-self: flex-end;
    background: var(--hv-dark);
    color: var(--hv-white);
    border-bottom-right-radius: 4px;
    font-weight: 500;
}

/* Formatting inside bot messages */
.hv-msg-bot strong { color: var(--hv-dark); font-weight: 700; }
.hv-msg a { color: #2563eb; text-decoration: underline; word-break: break-all; }
.hv-msg-user a { color: #93c5fd; }

/* --- Typing indicator ------------------------------------------------------- */
.hv-typing {
    display: flex;
    gap: 5px;
    padding: 12px 16px;
    align-self: flex-start;
}
.hv-typing span {
    width: 8px;
    height: 8px;
    background: var(--hv-border);
    border-radius: 50%;
    animation: hv-bounce .6s infinite alternate;
}
.hv-typing span:nth-child(2) { animation-delay: .15s; }
.hv-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes hv-bounce {
    from { opacity: .3; transform: translateY(0); }
    to   { opacity: 1;  transform: translateY(-5px); }
}

/* --- Input bar -------------------------------------------------------------- */
#hv-chat-input-bar {
    display: flex !important;
    align-items: center;
    padding: 10px 12px 11px;
    background: var(--hv-bg);
    border-top: 1px solid var(--hv-border);
    gap: 8px;
    flex-shrink: 0;
}
#hv-chat-input {
    flex: 1;
    border: 1px solid var(--hv-border);
    border-radius: 18px;
    padding: 9px 14px;
    font-size: 14px;
    font-family: var(--hv-font);
    background: var(--hv-bg-alt);
    color: var(--hv-light);
    outline: none;
    transition: border-color .2s;
    resize: none;
    min-height: 38px;
    max-height: 80px;
    line-height: 1.4;
}
#hv-chat-input::placeholder { color: var(--hv-muted); }
#hv-chat-input:focus { border-color: var(--hv-yellow); }
#hv-chat-send {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: var(--hv-dark);
    color: var(--hv-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s, background .2s;
    flex-shrink: 0;
}
#hv-chat-send:disabled { opacity: .32; cursor: default; }
#hv-chat-send:not(:disabled):hover { background: #000; }
#hv-chat-send svg { width: 18px; height: 18px; fill: var(--hv-white); }

/* --- Powered-by footer ------------------------------------------------------ */
#hv-chat-footer {
    text-align: center;
    font-size: 10px;
    color: var(--hv-muted);
    padding: 4px 0 6px;
    background: var(--hv-bg-alt);
    border-top: 1px solid var(--hv-border);
}

/* --- Mobile adjustments ----------------------------------------------------- */
@media (max-width: 480px) {
    #hv-chat-window {
        width: 100vw !important;
        max-width: 100vw !important;
        /* 100vh on mobile includes the area behind the browser UI, so the panel
           overflows and the header is pushed off-screen. dvh = the *visible*
           viewport (Chrome/Safari mobile). vh stays as fallback for old browsers. */
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        border: none !important;
        border-radius: 0 !important;
    }
    #hv-chat-trigger {
        bottom: var(--hv-chat-mobile-trigger-bottom) !important;
        right: var(--hv-chat-mobile-trigger-right) !important;
        left: var(--hv-chat-mobile-trigger-left) !important;
    }
}

/* --- Inline lead capture form ----------------------------------------------- */
.hv-lead-form {
    align-self: flex-start;
    background: var(--hv-bg-alt);
    border: 1px solid var(--hv-border);
    border-radius: 12px;
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 90%;
    animation: hv-fadein .25s ease;
}
.hv-lead-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--hv-dark);
    margin-bottom: 2px;
}
.hv-lead-input {
    border: 1px solid var(--hv-border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-family: var(--hv-font) !important;
    background: var(--hv-bg) !important;
    color: var(--hv-light);
    outline: none;
    transition: border-color .2s;
    width: 100%;
    box-sizing: border-box;
}
.hv-lead-input:focus {
    border-color: var(--hv-yellow);
}
.hv-lead-input::placeholder {
    color: var(--hv-muted);
}
select.hv-lead-input {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
select.hv-lead-input option {
    background: var(--hv-bg);
    color: var(--hv-light);
}
.hv-lead-phone-row {
    display: flex;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}
.hv-lead-phone-cc {
    flex: 0 0 92px;
    width: 92px;
    min-width: 0;
}
.hv-lead-phone-num {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.hv-lead-submit {
    border: none;
    border-radius: 8px;
    padding: 10px 16px 11px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--hv-font);
    background: var(--hv-yellow);
    color: var(--hv-dark);
    cursor: pointer;
    transition: background .2s, box-shadow .2s, opacity .2s;
}
.hv-lead-submit:hover:not(:disabled) {
    background: #f0c300;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.hv-lead-submit:disabled {
    opacity: .5;
    cursor: default;
}
.hv-lead-note {
    font-size: 10px;
    color: var(--hv-muted);
    text-align: center;
}
.hv-lead-success {
    font-size: 13px;
    color: #22c55e;
    font-weight: 600;
    text-align: center;
    padding: 8px 0;
}

/* Final scoped hardening against host CMS/theme form and button styles. */
#hv-chat-window .hv-msg,
#hv-chat-window .hv-lead-form,
#hv-chat-window .hv-lead-title,
#hv-chat-window .hv-lead-note,
#hv-chat-window .hv-lead-success,
#hv-chat-window #hv-chat-footer {
    font-family: var(--hv-font) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
#hv-chat-window .hv-lead-form {
    display: flex !important;
    flex-direction: column !important;
    align-self: flex-start !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 90% !important;
    margin: 0 !important;
    padding: 13px 15px !important;
    border: 1px solid var(--hv-border) !important;
    border-radius: 12px !important;
    background: var(--hv-bg-alt) !important;
    color: var(--hv-light) !important;
    box-shadow: none !important;
}
#hv-chat-window .hv-lead-title {
    margin: 0 0 2px !important;
    padding: 0 !important;
    color: var(--hv-dark) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
}
#hv-chat-window .hv-msg {
    margin: 0 !important;
    padding: 10px 14px !important;
    max-width: 85% !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    box-shadow: none !important;
}
#hv-chat-window .hv-msg-bot {
    background: var(--hv-bg-alt) !important;
    color: var(--hv-light) !important;
    border: 1px solid var(--hv-border) !important;
    border-bottom-left-radius: 4px !important;
}
#hv-chat-window .hv-msg-user {
    background: var(--hv-dark) !important;
    color: var(--hv-white) !important;
    border: none !important;
    border-bottom-right-radius: 4px !important;
}
#hv-chat-window #hv-chat-input,
#hv-chat-window .hv-lead-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--hv-border) !important;
    border-radius: 8px !important;
    background: var(--hv-bg) !important;
    color: var(--hv-light) !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: var(--hv-font) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    text-align: left !important;
    text-decoration: none !important;
}
#hv-chat-window .hv-lead-input {
    height: 36px !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
}
#hv-chat-window .hv-lead-phone-row {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#hv-chat-window .hv-lead-phone-cc {
    width: 92px !important;
    flex: 0 0 92px !important;
    min-width: 0 !important;
    padding-right: 26px !important;
    text-overflow: ellipsis !important;
}
#hv-chat-window .hv-lead-phone-num {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
#hv-chat-window #hv-chat-input {
    height: auto !important;
    min-height: 38px !important;
    max-height: 80px !important;
    border-radius: 18px !important;
    padding: 9px 14px !important;
    background: var(--hv-bg-alt) !important;
    resize: none !important;
}
#hv-chat-window #hv-chat-input:focus,
#hv-chat-window .hv-lead-input:focus {
    border-color: var(--hv-yellow) !important;
    box-shadow: none !important;
}
#hv-chat-window #hv-chat-input::placeholder,
#hv-chat-window .hv-lead-input::placeholder {
    color: var(--hv-muted) !important;
    opacity: 1 !important;
}
#hv-chat-window select.hv-lead-input {
    cursor: pointer !important;
    padding-right: 32px !important;
    background-color: var(--hv-bg) !important;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--hv-muted) 50%),
        linear-gradient(135deg, var(--hv-muted) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 17px) 50%,
        calc(100% - 12px) 50% !important;
    background-size:
        5px 5px,
        5px 5px !important;
    background-repeat: no-repeat !important;
}
#hv-chat-window #hv-chat-send,
#hv-chat-window .hv-lead-submit,
#hv-chat-window #hv-chat-close {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: var(--hv-font) !important;
}
#hv-chat-window .hv-lead-submit {
    display: block !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 10px 16px 11px !important;
    border-radius: 8px !important;
    background: var(--hv-yellow) !important;
    color: var(--hv-dark) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background .2s, box-shadow .2s, opacity .2s !important;
    transform: none !important;
}
#hv-chat-window .hv-lead-submit:hover:not(:disabled) {
    background: #f0c300 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.12) !important;
    transform: none !important;
}
#hv-chat-window #hv-chat-send {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--hv-dark) !important;
    color: var(--hv-white) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
}


/* ---------------------------------------------------------------------------
   HOST-PAGE HARDENING FOR <select>
   The widget is embedded in a WordPress theme we do not control. Both selects
   (country code, preferred contact method) rendered blank on the live club
   sites while every <input> was fine: the theme styles bare `select`, and our
   rules did not cover the properties it uses to hide text.
   Verified: the form renders correctly with widget.css alone, so this only
   defends against the host cascade. Everything below restates a value we
   already intend, so it changes nothing in isolation.
   --------------------------------------------------------------------------- */
#hv-chat-window select.hv-lead-input {
    /* the classic invisible-text pair: `color` alone does not beat this */
    -webkit-text-fill-color: var(--hv-light) !important;
    color: var(--hv-light) !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* themes that collapse or shove the text out of the box */
    font-size: 13px !important;
    line-height: 18px !important;
    letter-spacing: normal !important;
    text-indent: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
    /* custom-dropdown scripts that move or clip the real control */
    position: static !important;
    transform: none !important;
    clip-path: none !important;
    max-width: none !important;
    max-height: none !important;
    pointer-events: auto !important;
}
#hv-chat-window select.hv-lead-input option {
    color: var(--hv-light) !important;
    -webkit-text-fill-color: var(--hv-light) !important;
    background: var(--hv-bg) !important;
    font-size: 13px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
}

/*
 * Some host themes wrap selects in `.select_container` and add their own
 * arrow with ::before/::after. Reset that generated wrapper inside the lead
 * form so it participates in our layout exactly like the original select.
 */
#hv-chat-window .hv-lead-form .select_container {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100% !important;
    height: 36px !important;
    min-width: 0 !important;
    min-height: 36px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
}
#hv-chat-window .hv-lead-form .select_container::before,
#hv-chat-window .hv-lead-form .select_container::after {
    content: none !important;
    display: none !important;
}
#hv-chat-window .hv-lead-form .hv-lead-phone-row > .select_container {
    flex: 0 0 92px !important;
    width: 92px !important;
}
#hv-chat-window .hv-lead-form .select_container > select.hv-lead-input {
    display: block !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}