/* =============================================================================
   PIXOUS AI CHATBOT — Self-Contained Component
   All rules scoped under #chatbot-widget to prevent global CSS bleed.
   Panel palette: a clean, light surface — soft blue-white gradients, a faint
   infrastructure skyline watermark low in the panel, vivid blue for accents
   and the user's own messages. Airy and premium rather than heavy.
   ============================================================================= */

#chatbot-widget {
    position: fixed;
    z-index: 999999;
    font-family: var(--cb-font-base);
    font-size: 15px;
    box-sizing: border-box;
    /* Same type system as the rest of the site (public/assets/css/style.css):
       Inter for body copy, Space Grotesk for titles/headings. */
    --cb-font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cb-font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cb-primary-start: #0F5169;
    --cb-primary-end: #012245;
    --cb-accent: #3B82F6;
    --cb-accent-dark: #2563EB;
    --cb-indigo: #1E3A8A;
    --cb-cyan: #38BDF8;
    --cb-idle-width: min(280px, calc(100vw - 40px));
    --cb-active-width: min(400px, calc(100vw - 32px));
    --cb-launcher-bottom: 28px;
    --cb-launcher-height: 54px;
    --cb-launcher-gap: 14px;
}

/* Phones / small touch screens: tuck closer to the edge, respect notches */
@media (max-width: 480px) {
    #chatbot-widget {
        --cb-launcher-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    }
}

/* Short viewports (landscape phones, small browser windows): reclaim
   vertical space so the panel's header never gets pushed off-screen. */
@media (max-height: 420px) {
    #chatbot-widget {
        --cb-launcher-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
        --cb-launcher-height: 42px;
        --cb-launcher-gap: 8px;
    }
}

/* ---------------------------------------------------------------------------
   1. LAUNCHER GROUP — the persistent input pill plus its suggestion bubbles.
      Positioned once as a single fixed region so the whole area can be
      hovered as a unit. Suggestion bubbles stay invisible and non-interactive
      until this region is actually hovered or focused — they never sit on
      top of page content uninvited, and never linger once you click away.
   --------------------------------------------------------------------------- */

#chatbot-widget .cb-launcher-group {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: var(--cb-launcher-bottom);
    transform: translateX(-50%);
    z-index: 1000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 100vw;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Fades the idle launcher pill out while the footer (and its big
   "PIXOUS" wordmark) is in view — see chatbot.js — so it stops sitting
   on top of footer content. Skipped while the chat panel is open.
   visibility:hidden (not just opacity/pointer-events on the group) is
   needed here because #chatbot-launcher sets its own pointer-events:auto
   further down, which would otherwise win back clickability despite the
   group being faded out. */
#chatbot-widget.is-near-footer .cb-launcher-group {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   1a. LAUNCHER PROMPTS — floating suggestion bubbles above the pill.
       Hidden by default; only reveal on hover/focus of the input group.
   --------------------------------------------------------------------------- */

#chatbot-widget .cb-launcher-prompts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: var(--cb-active-width);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#chatbot-widget .cb-launcher-prompts[hidden] { display: none; }

#chatbot-widget .cb-launcher-group:hover .cb-launcher-prompts,
#chatbot-widget .cb-launcher-group:focus-within .cb-launcher-prompts {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Suggestions never re-appear once the conversation panel is open */
#chatbot-widget.is-open .cb-launcher-prompts {
    display: none;
}

#chatbot-widget .cb-launcher-chip {
    all: unset;
    box-sizing: border-box;
    max-width: 92%;
    padding: 11px 18px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(15, 81, 105, 0.08);
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0F5169;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(1, 34, 69, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

#chatbot-widget .cb-launcher-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 10px 26px rgba(59, 130, 246, 0.22);
    background: #ffffff;
}

/* ---------------------------------------------------------------------------
   2. LAUNCHER / PERSISTENT INPUT BAR
      Fixed at the same spot at all times — small pill at rest, widens on
      focus and stays that width once the panel is open. The panel floats
      in ABOVE this bar; it never moves and never gets swapped out.
   --------------------------------------------------------------------------- */

#chatbot-widget #chatbot-launcher {
    all: unset;
    box-sizing: border-box;
    position: relative;
    pointer-events: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    width: var(--cb-idle-width);
    height: var(--cb-launcher-height);
    padding: 0 8px 0 14px;

    background: #ffffff;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 30px rgba(1, 34, 69, 0.16);

    cursor: text;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, transform 0.25s ease;
}

/* Vivid indigo-to-cyan gradient ring, glowing softly behind the pill */
#chatbot-widget #chatbot-launcher::before {
    content: '';
    position: absolute;
    inset: -3px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(90deg, #0B1B4D, #1E3A8A, #2563EB, #38BDF8, #22D3EE, #1E3A8A, #0B1B4D);
    background-size: 240% 100%;
    filter: blur(9px);
    opacity: 0.85;
    animation: cb-launcher-gradient-sweep 5s ease-in-out infinite;
    pointer-events: none;
}

/* Pixous brand mark — a small "status" icon that always sits beside the input */
#chatbot-widget .cb-launcher__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

#chatbot-widget .cb-launcher__mark img {
    width: 100%;
    height: 100%;
    display: block;
}

#chatbot-widget #chatbot-launcher:focus-within,
#chatbot-widget.is-open #chatbot-launcher {
    width: var(--cb-active-width);
    box-shadow: 0 10px 36px rgba(1, 34, 69, 0.2);
}

#chatbot-widget #chatbot-launcher:focus-within::before,
#chatbot-widget.is-open #chatbot-launcher::before {
    inset: -4px;
    opacity: 1;
    filter: blur(11px);
    animation-duration: 3s;
}

/* Actual text input inside the launcher */
#chatbot-widget #chatbot-launcher-input {
    all: unset;
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    font-family: var(--cb-font-base);
    font-size: 14px;
    color: #131313;
    background: transparent;
    caret-color: var(--cb-accent-dark);
}

#chatbot-widget #chatbot-launcher-input::placeholder {
    color: #6B7684;
}

/* Send arrow button inside launcher — always visible, sits at the end */
#chatbot-widget .cb-launcher__btn {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--cb-accent), var(--cb-indigo));
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

#chatbot-widget .cb-launcher__btn:hover {
    transform: scale(1.06);
    filter: brightness(1.06);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

#chatbot-widget .cb-launcher__btn svg {
    width: 16px;
    height: 16px;
}

#chatbot-widget .cb-launcher__btn.is-sending {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Prevent iOS Safari's auto-zoom-on-focus by keeping form text at 16px+ on touch-sized screens */
@media (max-width: 480px) {
    #chatbot-widget #chatbot-launcher-input {
        font-size: 16px;
    }
}

/* ---------------------------------------------------------------------------
   3. CHAT PANEL — bottom-right, appears when open
      CSS Grid ensures exact row heights — no global padding can break this.
   --------------------------------------------------------------------------- */

#chatbot-widget #chatbot-panel {
    all: initial;
    box-sizing: border-box;
    font-family: var(--cb-font-base);
    font-size: 15px;
    color: #131313;

    position: fixed;
    left: 50%;
    bottom: calc(var(--cb-launcher-bottom) + var(--cb-launcher-height) + var(--cb-launcher-gap));
    transform: translateX(-50%) translateY(18px) scale(0.96);

    width: min(400px, calc(100vw - 24px));
    height: min(620px, calc(100vh - var(--cb-launcher-bottom) - var(--cb-launcher-height) - var(--cb-launcher-gap) - 20px));
    min-height: 180px;

    display: grid;
    grid-template-rows: 66px minmax(0, 1fr);

    /* Light, near-white base — the skyline photo lives on ::before, masked
       so its edges dissolve into this instead of cutting off sharply */
    background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 55%, #EFF5FD 100%);
    border-radius: 26px;
    border: 1px solid rgba(15, 81, 105, 0.08);
    box-shadow: 0 24px 60px rgba(15, 40, 70, 0.18), 0 0 0 1px rgba(59, 130, 246, 0.04);
    overflow: hidden;

    opacity: 0;
    pointer-events: none;
    transform-origin: bottom center;
    transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Skyline watermark — vignette-masked so it fades into the panel's white
   base on every side instead of showing a hard rectangular photo edge */
#chatbot-widget #chatbot-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url('../images/pixous-infra-scene-photo.webp') no-repeat bottom center;
    background-size: 160% auto;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 100%, #000 50%, transparent 92%);
    mask-image: radial-gradient(120% 90% at 50% 100%, #000 50%, transparent 92%);
}

/* Show panel */
#chatbot-widget.is-open #chatbot-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Short / landscape viewports: compact the chrome so content still fits */
@media (max-height: 560px) {
    #chatbot-widget #chatbot-panel {
        grid-template-rows: 52px minmax(0, 1fr);
    }

    #chatbot-widget .cb-header { height: 52px; }
    #chatbot-widget .cb-messages { padding: 12px 16px; gap: 8px; }
    #chatbot-widget .cb-prompts-wrap {
        bottom: -12px;
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: -12px;
        margin-top: auto;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------------------------------------------------------------------------
   4. HEADER — grid row 1, glass frosted
   --------------------------------------------------------------------------- */

#chatbot-widget .cb-header {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 66px;
    padding: 0 20px;
    margin: 0;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, #FFFFFF 0%, #EAF3FF 100%);
    box-shadow: 0 1px 0 rgba(15, 81, 105, 0.06);
    color: #0F2A44;
}

/* Thin accent seam where the header meets the panel body */
#chatbot-widget .cb-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.28), transparent);
}

#chatbot-widget .cb-header__left {
    display: flex;
    align-items: center;
    gap: 11px;
}

#chatbot-widget .cb-header__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(150deg, #FFFFFF 0%, #DCEBFF 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 14px rgba(15, 81, 105, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

#chatbot-widget .cb-header__icon-img {
    width: 84%;
    height: 84%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(15, 81, 105, 0.18));
}

/* Small "live" status dot anchored to the icon badge */
#chatbot-widget .cb-header__status-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22C55E;
    border: 2px solid #FFFFFF;
}

#chatbot-widget .cb-header__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#chatbot-widget .cb-header__title {
    font-family: var(--cb-font-heading);
    font-size: 15px;
    font-weight: 600;
    color: #0F2A44;
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chatbot-widget .cb-header__status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    color: #5B7086;
}

#chatbot-widget .cb-header__status-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    animation: cb-status-pulse 2.2s ease-in-out infinite;
}

#chatbot-widget .cb-header__close {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #5B7086;
    font-size: 14px;
    opacity: 0.85;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s, transform 0.2s;
}

#chatbot-widget .cb-header__close:hover {
    opacity: 1;
    color: #0F2A44;
    background: rgba(15, 81, 105, 0.08);
    transform: scale(1.05);
}

/* ---------------------------------------------------------------------------
   5. MESSAGES — grid row 2, scrolls internally
   --------------------------------------------------------------------------- */

#chatbot-widget .cb-messages {
    all: unset;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 20px;
    margin: 0;
    scrollbar-width: none;
}

#chatbot-widget .cb-messages::-webkit-scrollbar {
    display: none;
}

/* Bot message */
#chatbot-widget .chatbot-message--bot {
    all: unset;
    box-sizing: border-box;
    display: block;
    align-self: flex-start;
    max-width: 90%;
    font-size: 14px;
    line-height: 1.55;
    color: #1F2D3D;
    animation: cb-fadein 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#chatbot-widget .chatbot-message--bot p {
    all: unset;
    display: block;
    color: #1F2D3D;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 6px;
}

#chatbot-widget .chatbot-message--bot p:last-child {
    margin-bottom: 0;
}

#chatbot-widget .chatbot-message--bot a {
    color: var(--cb-accent-dark);
    text-decoration: underline;
    font-weight: 600;
}

#chatbot-widget .chatbot-message__badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.28);
    color: var(--cb-accent-dark);
    padding: 3px 9px;
    border-radius: 10px;
    margin-bottom: 7px;
}

/* User message */
#chatbot-widget .chatbot-message--user {
    all: unset;
    box-sizing: border-box;
    display: block;
    align-self: flex-end;
    max-width: 75%;
    padding: 11px 16px;
    background: linear-gradient(135deg, var(--cb-accent), var(--cb-indigo));
    border-radius: 18px 18px 4px 18px;
    font-size: 14px;
    line-height: 1.45;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
    animation: cb-fadein 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Typing indicator */
#chatbot-widget .chatbot-message--typing {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 13px 16px;
    background: rgba(15, 81, 105, 0.05);
    border: 1px solid rgba(15, 81, 105, 0.08);
    border-radius: 18px;
    animation: cb-fadein 0.25s ease;
}

#chatbot-widget .chatbot-message--typing span {
    display: block;
    width: 6px;
    height: 6px;
    background: var(--cb-accent);
    border-radius: 50%;
    animation: cb-dot 1.3s ease-in-out infinite both;
}

#chatbot-widget .chatbot-message--typing span:nth-child(1) { animation-delay: -0.32s; }
#chatbot-widget .chatbot-message--typing span:nth-child(2) { animation-delay: -0.16s; }
#chatbot-widget .chatbot-message--typing span:nth-child(3) { animation-delay:   0.0s; }

/* Response cards */
#chatbot-widget .chatbot-card {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: flex-start;
    width: 100%;
    max-width: 90%;
    padding: 14px 16px 14px 18px;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid rgba(15, 81, 105, 0.08);
    border-left: 3px solid var(--cb-accent);
    border-radius: 4px 14px 14px 4px;
    color: #131313;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(15, 40, 70, 0.1);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    animation: cb-fadein 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#chatbot-widget .chatbot-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(59, 130, 246, 0.2);
}

#chatbot-widget .chatbot-card__title { font-family: var(--cb-font-heading); font-size: 14px; font-weight: 700; color: #0F5169; }
#chatbot-widget .chatbot-card__desc  { font-size: 13px; color: #5B6B76; line-height: 1.4; }
#chatbot-widget .chatbot-card__cta   { font-size: 12px; font-weight: 700; color: var(--cb-accent-dark); margin-top: 8px; }

/* ---------------------------------------------------------------------------
   6. QUICK PROMPTS — lives inside the messages scroll area (always its last
      child) so it scrolls with the transcript instead of claiming its own
      fixed slice of the panel. That's what keeps the panel from overflowing
      when a long chip list is expanded on a short viewport.
   --------------------------------------------------------------------------- */

#chatbot-widget .cb-prompts-wrap {
    all: unset;
    box-sizing: border-box;
    position: sticky;
    bottom: -18px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -18px;
    margin-top: auto;
    padding: 16px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.75) 40%, rgba(255, 255, 255, 0.96) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-shrink: 0;
}

#chatbot-widget .cb-prompts-wrap[hidden] {
    display: none;
}

/* Toggle — deliberate control instead of prompts popping open on their own */
#chatbot-widget .cb-prompts-toggle {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: #F1F6FC;
    border: 1px solid rgba(15, 81, 105, 0.1);
    border-radius: 20px;
    font-family: var(--cb-font-base);
    font-size: 12.5px;
    font-weight: 600;
    color: #0F2A44;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

#chatbot-widget .cb-prompts-toggle:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
}

#chatbot-widget .cb-prompts-toggle i:first-child {
    font-size: 12px;
    color: var(--cb-accent);
}

#chatbot-widget .cb-prompts-toggle__chevron {
    font-size: 9px;
    opacity: 0.55;
    transition: transform 0.25s ease;
}

#chatbot-widget .cb-prompts-wrap.is-expanded .cb-prompts-toggle__chevron {
    transform: rotate(180deg);
}

/* Collapsible chip list */
#chatbot-widget .cb-prompts {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

#chatbot-widget .cb-prompts-wrap.is-expanded .cb-prompts {
    max-height: 320px;
    opacity: 1;
    pointer-events: auto;
}

#chatbot-widget .chatbot-chip {
    all: unset;
    box-sizing: border-box;
    display: inline-block;
    max-width: 88%;
    padding: 10px 16px;
    min-height: 40px;
    background: #F1F6FC;
    border: 1px solid rgba(15, 81, 105, 0.1);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #0F2A44;
    font-family: var(--cb-font-base);
    cursor: pointer;
    text-align: right;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
    animation: cb-fadein 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#chatbot-widget .chatbot-chip:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   7. SHARED UTILITIES
   --------------------------------------------------------------------------- */

#chatbot-widget .cb-form__sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* ---------------------------------------------------------------------------
   8. ANIMATIONS
   --------------------------------------------------------------------------- */

@keyframes cb-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cb-chip-in {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cb-dot {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}

@keyframes cb-status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50%      { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

@keyframes cb-launcher-gradient-sweep {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    #chatbot-widget #chatbot-launcher,
    #chatbot-widget #chatbot-launcher::before,
    #chatbot-widget #chatbot-panel,
    #chatbot-widget .cb-launcher-chip,
    #chatbot-widget .chatbot-message--bot,
    #chatbot-widget .chatbot-message--user,
    #chatbot-widget .chatbot-card,
    #chatbot-widget .chatbot-chip,
    #chatbot-widget .cb-header__status-pulse {
        animation: none !important;
    }
}

/* ---------------------------------------------------------------------------
   9. NARROW PHONES — tighten side padding so text gets more room to breathe
   --------------------------------------------------------------------------- */
@media (max-width: 360px) {
    #chatbot-widget .cb-header { padding: 0 14px; }
    #chatbot-widget .cb-messages { padding: 16px 14px; }
    #chatbot-widget .chatbot-message--bot,
    #chatbot-widget .chatbot-message--user,
    #chatbot-widget .chatbot-card { max-width: 94%; }
    #chatbot-widget .cb-prompts-wrap {
        bottom: -16px;
        width: calc(100% + 28px);
        margin-left: -14px;
        margin-right: -14px;
        margin-bottom: -16px;
        margin-top: auto;
        padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* Never let the widget intercept clicks or print onto a physical page */
@media print {
    #chatbot-widget { display: none !important; }
}