/**
 * SolutionsPlus AI Advisor — Exact XD Design
 * State 1: Floating chat card (no services)
 * State 2: Full-screen split panel (when services returned)
 */

:root {
    --sp-panel-bg: #FFFFFF;
    --sp-panel-left-bg: #F0F0F5;
    --sp-panel-right-bg: #F0F0F5;
    --sp-accent: #7337FF;
    --sp-accent-hover: #6029E0;
    --sp-accent-light: rgba(115, 55, 255, 0.06);
    --sp-gray-50: #FAFAFB;
    --sp-gray-100: #F0F0F5;
    --sp-gray-200: #E4E4EC;
    --sp-gray-300: #D1D1DB;
    --sp-gray-500: #6E6E80;
    --sp-gray-700: #3A3A4A;
    --sp-gray-900: #01001E; /* matches reference's exact --ink value — was #1A1A2E */
    --sp-radius-lg: 24px;
    --sp-radius-md: 14px;
    --sp-radius-sm: 10px;
    --sp-bar-bg: #2D2D3D;
}

/* ============================================================
   INLINE "ASK ME ANYTHING" BAR
   Dark charcoal pill with animated gradient border
   ============================================================ */

/* v1.4.10 (3-layer): OUTER GLASS LAYER (Layer 1)
   Translucent glass container that wraps the entire inline bar. Gives the
   "glassy outer border" the client asked for. Padding creates the visible
   gap between the outer glass and the middle bar (Layer 2). */
.sp-inline-bar {
    position: fixed !important;
    bottom: 28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 99990 !important;
    width: calc(100% - 40px); /* viewport margin (prevents edge-to-edge on narrow screens) */
    max-width: 620px; /* matches reference's actual max-width exactly (was 540px — under-sized) */
    margin: 0 !important;
    /* Layer 1 — outer glass surface. The box itself stays transparent
       (just blurred/saturated backdrop) — the near-opaque white fill
       lives on the ::before below, inset 2px. That's what creates a
       genuinely thin GLASS RIM at the very edge (blurred, see-through)
       distinct from the more solid white interior, matching reference's
       .advisor__inner exactly — previously this box had one uniform
       opaque fill throughout, which read as flat rather than glassy. */
    position: relative;
    background: transparent;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(1, 0, 30, 0.09);
    border-radius: clamp(14px, 1.2vw, 18px); /* real clamp(), matches reference at any viewport — was a fixed 18px */
    padding: clamp(6px, 0.5vw, 9px) clamp(11px, 0.9vw, 15px); /* real clamp(), matches reference's actual two-value formula (wider horizontal than vertical) — was uniform clamp(6px,.5vw,9px) on all sides */
    box-shadow:
        0 1px 3px rgba(1, 0, 30, 0.08),
        0 10px 24px -8px rgba(1, 0, 30, 0.16),
        0 30px 60px -22px rgba(1, 0, 30, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    cursor: pointer;
    pointer-events: auto;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* matches reference's exact --font — was 'Inter' */
}

.sp-inline-bar::before {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: 1;
    border-radius: inherit;
    background: rgba(252, 251, 255, 0.88);
    pointer-events: none;
}

/* Hidden while at the very top (hero) or near the bottom of the page,
   per scroll position — see spUpdateBarScrollVisibility() in
   sp-chatbot.js. Uses opacity/transform (not display) so it fades/
   slides rather than snapping, and so it layers safely on top of the
   existing show()/hide() calls used for the chat modal elsewhere in
   the JS: this only ever ADDS an extra visual gate, it never fights
   those calls. */
.sp-inline-bar.sp-inline-bar--scroll-hidden {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(24px) !important;
    pointer-events: none !important;
}

/* v1.4.10 (3-layer): MIDDLE BAR LAYER (Layer 2)
   Dark-gray filled container holding the "Do you have a question?" label +
   the inner chat box. This is the #7a7a7a background layer the client
   pointed at. No border — the border lives on the outer glass above. */
.sp-inline-bar__inner {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.4vw, 22px); /* real clamp(), matches reference at any viewport — was a fixed 22px */
    /* Reskinned: reference has no separate dark middle layer — the label
       sits directly on the light outer glass (Layer 1). */
    background: transparent;
    border-radius: 14px;
    /* Removed the double-inset: reference applies padding ONCE, on the
       outer bar itself (.sp-inline-bar, already matched exactly) — the
       label/field sit directly inside with no additional padding layer.
       This extra 7px/20px inset was squeezing the field narrower than
       source. */
    padding: 0;
    position: relative;
    z-index: 2; /* sits above .sp-inline-bar::before's white inset (z-index: 1) */
    overflow: visible;
    transition: transform 0.25s ease;
    border: none;
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
}
/* v1.4.9: REVERT v1.4.7 outer glow — reference shows glow only on inner pill,
   not on the outer container. Outer relies on the glass border + shadow alone. */
.sp-inline-bar__inner::before {
    display: none !important;
}

@keyframes spBorderFlow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.sp-inline-bar:hover .sp-inline-bar__inner {
    transform: translateY(-2px);
}

/* v1.4.10: reverted to OLD compact label (12px italic) per client "old size" ask */
.sp-inline-bar__label {
    font-size: clamp(13px, 0.9vw, 16px); /* real clamp(), matches reference at any viewport — was a fixed 16px */
    font-weight: 700;
    color: var(--sp-gray-900);
opacity: 0.8;
    white-space: nowrap;
    flex-shrink: 0;
    font-style: italic;
    padding-right: 0;
    margin-left: clamp(4px, 0.5vw, 10px); /* matches reference's own additional label inset — was missing entirely */
}

/* v1.4.10 (3-layer): INNER CHAT BOX LAYER (Layer 3)
   Dark #2b2b2b pill with the SAME animated gradient border as the
   GENERATE PROPOSAL button — uses background-clip: padding-box, border-box
   technique with stacked images: solid fill clipped to padding-box, gradient
   clipped to border-box. Animation reuses the existing spBorderFlow keyframes. */
/* Default state — static border, no animation */
.sp-inline-bar__input-wrap {
    display: flex;
    align-items: center;
    gap: 9px; /* matches reference's fixed 9px gap — was 8px */
    flex: 1;
    min-width: 0;
    border: 1.8px solid transparent;
    border-radius: clamp(11px, 0.95vw, 14px); /* real clamp(), matches reference at any viewport — was a fixed 14px */
    padding: calc(2px + clamp(4px, 0.32vw, 6px)); /* real clamp() (reference's exact formula) — was a fixed 8px */
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    /* Reskinned: white interior (was #2b2b2b) — matches the reference's
       field, which is mostly white with just a thin dark/gradient ring.
       The animated gradient border technique itself is unchanged. */
    background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(90deg, #F4A471, #AB88FB, #AB88FB, #F4A471);
    background-size: 100% 100%, 300% 100%;
    /* Glow always present, static after animation stops */
    box-shadow: 0 0 4px 2px rgba(171, 136, 251, 0.4), 0 0 8px 2px rgba(244, 164, 113, 0.2);
}

/* Border flow + pulsing glow only during animation */
.sp-inline-bar__input-wrap.sp-animate-border {
    animation: spBorderFlow 4s linear infinite, spGlowPulse 4s linear infinite;
}

/* Static glow after animation ends */
.sp-inline-bar__input-wrap:not(.sp-animate-border) {
    box-shadow: 0 0 4px 2px rgba(171, 136, 251, 0.4), 0 0 16px 4px rgba(244, 164, 113, 0.2);
}
/* v1.4.10: old masked ::before border no longer needed — the element itself
   carries the animated border via background-clip. Disable to avoid overlap. */
.sp-inline-bar__input-wrap::before {
    display: none !important;
}

/* v1.4.10: sparkle reverted to 16×16 (old compact size) */
.sp-inline-bar__sparkle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    width: 21px;
    height: 21px;
    margin-left: clamp(4px, 0.35vw, 7px); /* real clamp(), matches reference at any viewport — was a fixed 7px */
    z-index: 1;
}
.sp-inline-bar__sparkle svg {
    width: 19px;
    height: 19px;
    display: block;
}

.sp-inline-bar__placeholder {
    font-size: clamp(13px, 0.89vw, 16px); /* real clamp(), matches reference at any viewport — was a fixed 16px */
    font-weight: 400;
   color: var(--sp-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}

/* Blinking typewriter cursor — its own element, so it blinks
   continuously and independently of the text being typed/deleted */
.sp-inline-bar__placeholder .sp-typing-cursor {
    display: inline-block;
    margin-left: 2px;
    color: rgba(26, 26, 46, 0.75);
    animation: spCursorBlink 0.8s steps(1) infinite;
}

@keyframes spCursorBlink {
    0%, 50%      { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* Snake-style glow: faithful port of the reference site's advisor__trace —
   5 layered rects tracing the SAME path via pathLength="100" normalization.
   The thick strokes (up to 34px) are wide enough to genuinely OVERLAP each
   other, which is what lets adjacent blur layers merge smoothly instead of
   leaving visible gaps/rings between them (the earlier thin-stroke version
   didn't overlap enough, which is what caused the banding). */
.sp-inline-bar__snake {
    position: absolute;
    top: -70px;
    left: -70px;
    z-index: -1;
    pointer-events: none;
}

.sp-inline-bar__snake-rect {
    stroke-linecap: round;
    animation: spSnakeTravel 2.5s linear infinite;
}

@keyframes spSnakeTravel {
    to { stroke-dashoffset: -100; }
}

/* v1.4.10: send button reverted to OLD 30×30 — but keeps DARK bg + white chevron
   styling from v1.4.9 (not the old white-bg look). Compact but correctly themed. */
.sp-inline-bar__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 1.9vw, 34px); /* real clamp(), matches reference at any viewport — was a fixed 34px */
    height: clamp(28px, 1.9vw, 34px);
    border-radius: clamp(8px, 0.66vw, 10px); /* real clamp() — was a fixed 10px */
    background: none;
    flex-shrink: 0;
    border: 1.5px solid var(--sp-gray-900);
    transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease;
    z-index: 1;
}
.sp-inline-bar__send .sp-send-chevron {
    display: block;
    width: clamp(13px, 0.9vw, 16px); /* real clamp(), matches reference at any viewport — was a fixed 16px */
    height: clamp(13px, 0.9vw, 16px);
    fill: var(--sp-gray-900);
    stroke: none;
}
.sp-inline-bar:hover .sp-inline-bar__send {
    background: var(--sp-gray-900);
    transform: scale(1.05);
}
.sp-inline-bar:hover .sp-inline-bar__send .sp-send-chevron {
    fill: #ffffff;
}
/* legacy CSS triangle hidden — replaced by inline SVG chevron */
.sp-inline-bar__send .sp-send-arrow {
    display: none !important;
}

/* v1.4.10 (3-layer): drag handle pill sits BELOW the outer glass container.
   Uses absolute positioning so it visually appears outside the glass box
   (per reference HTML which puts the handle as a sibling of the container). */
.sp-inline-bar__handle-row {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    pointer-events: none;
}
.sp-inline-bar__handle {
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0.5;
}

@media (max-width: 768px) {
    .sp-inline-bar { bottom: 16px !important; max-width: 100%; padding: 0 12px !important; }
    .sp-inline-bar__label { display: none; }
    .sp-inline-bar__inner { padding: 6px 6px 6px 16px; }
}
@media (max-width: 480px) {
    .sp-inline-bar__send { width: 28px; height: 28px; }
    .sp-inline-bar__send .sp-send-chevron { width: 14px; height: 14px; }
    .sp-inline-bar__placeholder { font-size: 12px; }
    .sp-inline-bar__handle { width: 36px; height: 3px; }
}

/* ============================================================
   OVERLAY
   ============================================================ */

.sp-chatbot-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 99998;
    pointer-events: none;
}

/* ============================================================
   MAIN WRAPPER
   State 1 (default): floating chat card, centered bottom
   State 2 (.has-services): full-screen split panel
   ============================================================ */

.sp-chatbot-wrapper {
    position: fixed;
    z-index: 99999;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* matches reference's exact --font — was 'Inter' */
    /* Exactly matches .sp-inline-bar's box model (bottom/left/transform/
       width/max-width) so the popup opens from the identical position
       and width as the widget, instead of just a similar-looking one. */
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 620px; /* matches widget + reference's actual max-width — was 540px */
    /* No fixed height: sizes naturally to its content (header + the
       dynamically-computed .sp-chat-log-wrap below + composer +
       disclaimer), same as reference — .advisor/.advisor.is-open have
       no height property at all; only the LOG's height is computed,
       via spUpdatePopupHeight() in sp-chatbot.js (replicates reference's
       own panelHeight() formula exactly). max-height stays as a safety
       cap for very short viewports. */
    max-height: calc(100vh - 48px);
    padding: clamp(6px, 0.5vw, 9px); /* real clamp(), matches reference's .advisor.is-open at any viewport — was a fixed 9px */
    box-sizing: border-box;
    /* Reskinned to a clean white/light glass card (matching the reference
       site's .advisor.is-open panel), replacing the earlier purple-tinted
       glass. Repositioned to bottom-center — the same spot as the inline
       bar — so the panel visually opens FROM the floating widget instead
       of appearing in a separate bottom-left corner. */
    background: rgba(255, 255, 255, 0.98) !important; /* was 0.86 — near-fully opaque now, so nothing on the page behind the popup can bleed through via backdrop-filter and create a visual (not layout) illusion of things looking different between opens */
    border-radius: clamp(20px, 1.7vw, 26px); /* real clamp(), matches reference's actual .advisor.is-open radius at any viewport (genuinely larger than the widget's own radius in the source, not a mismatch) — was a fixed 26px */
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        0 16px 56px rgba(26, 26, 46, 0.24),
        0 2px 12px rgba(26, 26, 46, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Matches the reference's own panel-open timeline exactly: unfurls
       over .56s with a power3.out-equivalent curve, while the
       staggered content fade-ups above run concurrently. Animates
       transform (scaleY from the bottom edge), NOT height — animating
       height directly here was fighting with spUpdatePopupHeight()'s
       JS-computed height in sp-chatbot.js: CSS animations sit higher
       in the cascade than plain inline styles (even ones set via JS),
       so the animation's final frozen keyframe value was silently
       overriding whatever height JS had actually computed, every time. */
    animation: spPanelIn 0.56s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    transform-origin: bottom center;
    pointer-events: auto;
}

/* Fold-up reveal: scales up from the bottom edge (the wrapper is
   bottom-anchored, so this naturally unfurls upward) instead of
   fading/rising in — matching the reference site's panel-reveal feel.
   overflow:hidden on the wrapper (already set) clips content during
   the grow. Uses transform, not height, so JS retains full control
   over the actual height value at all times. */
@keyframes spPanelIn {
    from { opacity: 0; transform: translateX(-50%) scaleY(0); }
    to   { opacity: 1; transform: translateX(-50%) scaleY(1); }
}

/* Content stagger — the reference doesn't just grow the panel; each
   section fades up in sequence shortly after the height starts
   growing (header first, then welcome title/subtitle/chips, then the
   input area and disclaimer). Scoped to :not(.has-services) so it
   only plays for the compact welcome-screen entrance, never touching
   the split "has-services" panel, which keeps its own animation. */
@keyframes spFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sp-chatbot-wrapper:not(.has-services) .sp-chat-header,
.sp-chatbot-wrapper:not(.has-services) .sp-chat-welcome-title,
.sp-chatbot-wrapper:not(.has-services) .sp-chat-welcome-subtitle,
.sp-chatbot-wrapper:not(.has-services) .sp-chat-input-area,
.sp-chatbot-wrapper:not(.has-services) .sp-chat-disclaimer {
    animation: spFadeUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.sp-chatbot-wrapper:not(.has-services) .sp-chat-header          { animation-delay: 0.14s; }
.sp-chatbot-wrapper:not(.has-services) .sp-chat-input-area      { animation-delay: 0.14s; }
.sp-chatbot-wrapper:not(.has-services) .sp-chat-welcome-title    { animation-delay: 0.195s; }
.sp-chatbot-wrapper:not(.has-services) .sp-chat-welcome-subtitle { animation-delay: 0.25s; }
.sp-chatbot-wrapper:not(.has-services) .sp-chat-disclaimer       { animation-delay: 0.3s; }

/* Each chip gets its OWN staggered entrance (matching the reference,
   which sequences every individual chip — not the row as one block). */
.sp-chatbot-wrapper:not(.has-services) .sp-chat-chips li {
    animation: spFadeUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.sp-chatbot-wrapper:not(.has-services) .sp-chat-chips li:nth-child(1) { animation-delay: 0.305s; }
.sp-chatbot-wrapper:not(.has-services) .sp-chat-chips li:nth-child(2) { animation-delay: 0.36s; }
.sp-chatbot-wrapper:not(.has-services) .sp-chat-chips li:nth-child(3) { animation-delay: 0.415s; }
.sp-chatbot-wrapper:not(.has-services) .sp-chat-chips li:nth-child(4) { animation-delay: 0.47s; }
.sp-chatbot-wrapper:not(.has-services) .sp-chat-chips li:nth-child(5) { animation-delay: 0.525s; }
.sp-chatbot-wrapper:not(.has-services) .sp-chat-chips li:nth-child(6) { animation-delay: 0.58s; }
.sp-chatbot-wrapper:not(.has-services) .sp-chat-chips li:nth-child(n+7) { animation-delay: 0.635s; }

/* Entrance animations (the panel scaleY + all the staggered fade-ups
   above) should only ever play once, on the popup's genuine first
   open — not every time .has-services toggles off while the popup
   stays visible (e.g. returning from the large popup via Clear Chat).
   Without this, they were replaying on that return, which included
   the input area starting from opacity:0 + translateY(14px) for a
   moment — easy to mistake for a layout/clipping bug when it's really
   just an animation restart. .sp-already-opened is added once in JS,
   shortly after the very first open, and never removed again. */
.sp-chatbot-wrapper.sp-already-opened.sp-already-opened:not(.has-services) {
    animation: none !important;
}
.sp-chatbot-wrapper.sp-already-opened:not(.has-services) .sp-chat-header,
.sp-chatbot-wrapper.sp-already-opened:not(.has-services) .sp-chat-welcome-title,
.sp-chatbot-wrapper.sp-already-opened:not(.has-services) .sp-chat-welcome-subtitle,
.sp-chatbot-wrapper.sp-already-opened:not(.has-services) .sp-chat-input-area,
.sp-chatbot-wrapper.sp-already-opened:not(.has-services) .sp-chat-disclaimer,
.sp-chatbot-wrapper.sp-already-opened:not(.has-services) .sp-chat-chips li {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* State 2: expand from bottom-left — keep position, grow width */
.sp-chatbot-wrapper.has-services {
    bottom: 24px;
    left: 24px;
    right: 24px;
    width: auto;
    max-width: none;
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    transform: none;
    flex-direction: row;
    /* Explicitly pinned back to their pre-existing values (this state
       was previously inheriting them from the base .sp-chatbot-wrapper
       rule, which has since changed for the compact/widget-matching
       state) — the split view must stay visually untouched. */
    border-radius: 18px;
    padding: 0;
    box-sizing: content-box;
    /* v1.4.10: same #e1e1e3 base as card state for consistent tone across states. */
    background: linear-gradient(
        180deg,
        rgba(225, 225, 227, 0.82) 0%,
        rgba(225, 225, 227, 0.78) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow:
        /* Outer glass ring (same style as inline bar Layer 1): thin translucent
           white ring stacked around the wrapper, matching the 3-layer pattern. */
        0 0 0 6px rgba(255, 255, 255, 0.05),
        0 0 0 7px rgba(255, 255, 255, 0.14),
        /* Drop shadow for depth */
        0 20px 72px rgba(26, 26, 46, 0.26),
        0 2px 12px rgba(26, 26, 46, 0.10),
        /* Inner top sheen */
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    animation: spSplitIn 0.35s ease forwards;
}

@keyframes spSplitIn {
    from { opacity: 0.9; right: 60%; }
    to   { opacity: 1;   right: 24px; }
}

/* ============================================================
   CLOSE BUTTON
   ============================================================ */

/* Close button — in header row for State 1, absolute top-right for State 2 */
/* × close button — transparent by default, bg on hover only (per XD QC) */
.sp-chatbot-close-overlay {
    position: static;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--sp-gray-500);
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.sp-chatbot-close-overlay:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--sp-gray-900);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* In split mode, close goes to absolute top-right of the whole panel */
.sp-chatbot-wrapper.has-services .sp-chatbot-close-overlay {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 10;
}

/* ============================================================
   LEFT PANEL — Chat
   ============================================================ */

.sp-chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    overflow: hidden;
    min-height: 0; /* Critical for nested flex scroll */
}

/* XD spec: inner white glass card sits inside the outer purple shell with 10px gap.
   Only applies to the floating chat card state — split-panel state overrides below. */
.sp-chatbot-wrapper:not(.has-services) .sp-chat-panel {
    background: transparent;
    border-radius: 28px;
    margin: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.sp-chatbot-wrapper.has-services .sp-chat-panel {
    width: 430px;
    min-width: 390px;
    flex: none;
    /* v1.4.8: subtler border so the glass wrapper reads through */
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    /* v1.4.8: mostly transparent — let the wrapper's gray+purple glassmorphism
       show through, matching the XD reference. Subtle tint for extra readability. */
    background: rgb(255 255 255 / 45%) 0% 0% no-repeat padding-box;
  
}

/* Header */
.sp-chat-header {
    padding: 20px 20px clamp(14px, 1.1vw, 20px); /* bottom padding added — matches reference's own .advisor__head padding-bottom exactly, which is what creates the header-to-welcome gap in source (was 0, no gap at all) */
    display: flex;
    align-items: center;
    gap: 11px; /* matches reference's fixed 11px — was 10px */
}

/* XD spec: 30×30 rounded square, 8px radius,
   linear-gradient(326deg, #FEA85E 0%, #AB88FB 100%), white star centered. */
.sp-chat-header-icon {
    width: 32px; /* matches reference — was 30px */
    height: 32px;
    border-radius: 9px; /* matches reference — was 8px */
    background: linear-gradient(135deg, #AB88FB, #D498AC 55%, #FEA85E); /* matches reference's exact gradient (angle, direction, and middle color stop) — was linear-gradient(326deg, #FEA85E 0%, #AB88FB 100%) */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-chat-header-icon svg {
    width: 16px; /* matches reference's icon-to-box ratio (inset:8px on a 32px box = 16px icon) — was 18px */
    height: 16px;
}

.sp-chat-header-info { flex: 1; }

.sp-chat-title {
    font-size: 15px; /* matches reference — was 16px */
    font-weight: 600; /* matches reference — was 700 */
    color: var(--sp-gray-900);
    line-height: 1.25; /* matches reference — was 1.2 */
}

.sp-chat-subtitle {
    font-size: 11.5px; /* matches reference — was 11px */
    color: rgba(1, 0, 30, 0.62); /* matches reference's exact --ink-meta value — was var(--sp-gray-500), a different gray */
    margin-top: 1px;
}

/* "Clear chat" text pill — matches reference's .advisor__clear. Hidden
   until the first message is sent (toggled in JS), then fades in. */
.sp-chat-clear-btn {
    flex: none;
    padding: 5px 11px !important;
    margin: 0 !important;
    border: 1px solid rgba(1, 0, 30, 0.12) !important;
    border-radius: 999px !important;
    background: none !important;
    color: var(--sp-gray-500) !important;
    cursor: pointer;
    font-family: inherit !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.sp-chat-clear-btn:hover {
    color: var(--sp-gray-900) !important;
    border-color: rgba(1, 0, 30, 0.28) !important;
    background: rgba(255, 255, 255, 0.66) !important;
}

/* "Clear this conversation?" confirm panel — matches reference's
   advisor__confirm. Swaps in where the composer sits (mutually
   exclusive with .sp-chat-input-area — toggled in JS). */
.sp-chat-confirm {
    margin: 4px 16px 0;
    padding: 12px 15px;
    border: 1px solid rgba(1, 0, 30, 0.10);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
}
.sp-chat-confirm-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--sp-gray-900);
    margin: 0;
}
.sp-chat-confirm-body {
    margin: 5px 0 0;
    max-width: 44ch;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--sp-gray-500);
}
.sp-chat-confirm-acts {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.sp-chat-cbtn {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    padding: 7px 14px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    cursor: pointer;
    border: 1px solid rgba(1, 0, 30, 0.14) !important;
    background: none !important;
    color: var(--sp-gray-900) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sp-chat-cbtn:hover {
    border-color: rgba(1, 0, 30, 0.30) !important;
    background: rgba(1, 0, 30, 0.04) !important;
}
.sp-chat-cbtn--go {
    background: var(--sp-gray-900) !important;
    border-color: var(--sp-gray-900) !important;
    color: #ffffff !important;
}
.sp-chat-cbtn--go:hover {
    background: #191636 !important;
    border-color: #191636 !important;
}

/* ============================================================
   TABS
   ============================================================ */

/* Tabs — hidden in card state (State 1), shown in split (State 2) */
.sp-chat-tabs {
    display: none;
    padding: 0;
    background:#E9E9EB;
border: 1px solid #E5E5E5;
border-radius: 10px;

    margin: 4px 20px;
}

/* Only show tabs when in split/services mode */
.sp-chatbot-wrapper.has-services .sp-chat-tabs {
    display: flex;
}

.sp-chat-tab {
    flex: 1;
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 500;
    color: #000000;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.sp-chat-tab:hover { color: var(--sp-gray-700); }

.sp-chat-tab.active {
    color: var(--sp-accent);
    background: transparent linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%) 0% 0% no-repeat padding-box;
box-shadow: 0px 4px 6px #00000017;
border: 1px solid #E5E5E5;
border-radius: 10px;
}

/* ============================================================
   TAB CONTENT
   ============================================================ */

.sp-tab-content {
    position: relative; /* clipping/positioning context for .sp-chat-bloom below */
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* Critical for nested flex scroll */
    padding-bottom: 4px; /* room for the input's outward focus glow (box-shadow, 3px spread) so this element's own overflow:hidden doesn't clip it */
}

.sp-tab-content:not(.active) {
    display: none !important;
}

/* ============================================================
   MESSAGES AREA
   ============================================================ */

/* Rounded, clipped "card" for just the chat log — the gradient bloom
   lives inside here and is clipped/rounded to this box specifically,
   so it never bleeds into the input/footer area below (which stays on
   a plain background). overflow:hidden (not auto) so bloom's oversized
   offsets never trigger a scrollbar — the actual message scrolling
   still happens on #sp-chat-messages inside this wrapper. */
.sp-chat-log-wrap {
    position: relative;
    /* Height is set explicitly by spUpdatePopupHeight() in sp-chatbot.js
       (JS-computed, replicating reference's panelHeight() formula) —
       not flex-grown to fill an arbitrary wrapper height, since the
       wrapper itself now has no fixed height of its own. A sensible
       default is kept here for the brief instant before JS first runs. */
    height: 320px;
    flex: none;
    min-height: 0;
    overflow: hidden;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    margin: 0 clamp(8px, 0.7vw, 12px) 10px; /* matches the composer's horizontal margin below, so both edges stay aligned */
}

/* Split view ("big popup") DOES have a fixed viewport-height wrapper,
   so its log area should flex-grow to fill it as before — the new
   JS-driven fixed height above is only for the compact popup. */
.sp-chatbot-wrapper.has-services .sp-chat-log-wrap {
    flex: 1 !important;
    height: auto !important;
}

.sp-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Soft blurred gradient behind the log, matching the reference site's
   .advisor__bloom. Fades in once the panel opens, gently "breathes"
   while idle, and switches to a much more active morphing animation
   while the AI is generating a reply (.is-thinking below). Sized
   relative to .sp-chat-log-wrap specifically (the chat area only). */
.sp-chat-bloom {
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -22%;
    height: 86%;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(40% 46% at 30% 70%, rgba(171, 136, 251, 0.44), transparent 72%),
        radial-gradient(38% 42% at 72% 80%, rgba(254, 168, 94, 0.30), transparent 74%),
        radial-gradient(56% 46% at 50% 100%, rgba(212, 152, 172, 0.30), transparent 78%);
    filter: blur(30px);
    opacity: 0;
    animation: spBloomFadeIn 1.1s ease-out 0.1s forwards, spBloomIdle 9s ease-in-out infinite;
}

@keyframes spBloomFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes spBloomIdle {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.09) translateY(-3%); }
}

.sp-tab-content.is-thinking .sp-chat-bloom {
    opacity: 1;
    animation: spBloomWork 4.4s ease-in-out infinite;
}

@keyframes spBloomWork {
    0%   { background-size: 100% 100%; background-position: 0% 0%;    transform: scale(1);                    filter: blur(30px) saturate(100%); }
    20%  { background-size: 148% 148%; background-position: 26% 26%;  transform: scale(1.06);                 filter: blur(28px) saturate(126%); }
    50%  { background-size: 200% 200%; background-position: 100% 62%; transform: scale(1.17) translateY(-4%); filter: blur(24px) saturate(172%); }
    80%  { background-size: 148% 148%; background-position: 26% 26%;  transform: scale(1.06);                 filter: blur(28px) saturate(126%); }
    100% { background-size: 100% 100%; background-position: 0% 0%;    transform: scale(1);                    filter: blur(30px) saturate(100%); }
}

.sp-chat-messages::-webkit-scrollbar { width: 4px; }
.sp-chat-messages::-webkit-scrollbar-thumb { background: var(--sp-gray-300); border-radius: 4px; }

/* User message — matches reference's .msg--me exactly: purple fill,
   white text, sharp bottom-right corner. Previously this was a white
   bubble with black text — the opposite of source. */
.sp-chat-msg-user {
    display: flex;
    justify-content: flex-end;
}

.sp-chat-msg-user .sp-chat-bubble {
    width: fit-content;
    max-width: 82% !important;
    background: #7338FF !important;
    color: #ffffff !important;
    border-radius: 16px 16px 5px 16px !important;
    padding: 10px 14px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    overflow-wrap: anywhere;
}

/* Bot message — matches reference's .msg--ai exactly: this previously
   had NO visible bubble/card at all (transparent, just padding:4px 0)
   — reference wraps AI replies in an actual translucent-white bordered
   card, same as the user bubble gets a fill. */
.sp-chat-msg-bot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: 82%; /* matches reference's shared .msg max-width */
}

.sp-chat-msg-bot .sp-chat-bubble {
    width: fit-content;
    max-width: 100% !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(1, 0, 30, 0.08) !important;
    color: rgba(1, 0, 30, 0.78) !important;
    border-radius: 16px 16px 16px 5px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    padding: 10px 14px !important;
    overflow-wrap: anywhere;
}

.sp-chat-msg-bot .sp-chat-bubble strong { color: var(--sp-gray-900) !important; font-weight: 600 !important; }

.sp-chat-msg-bot .sp-chatbot-rich {
    width: fit-content;
    max-width: 100% !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(1, 0, 30, 0.08) !important;
    color: rgba(1, 0, 30, 0.78) !important;
    border-radius: 16px 16px 16px 5px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.5 !important;
    padding: 10px 14px !important;
    overflow-wrap: anywhere;
}

.sp-chat-msg-bot .sp-chatbot-rich p { margin: 0 0 6px; }
.sp-chat-msg-bot .sp-chatbot-rich p:last-child { margin-bottom: 0; }
.sp-chat-msg-bot .sp-chatbot-rich ul,
.sp-chat-msg-bot .sp-chatbot-rich ol { margin: 4px 0 4px 18px; padding: 0; }
.sp-chat-msg-bot .sp-chatbot-rich a { color: var(--sp-accent); text-decoration: none; }
.sp-chat-msg-bot .sp-chatbot-rich a:hover { text-decoration: underline; }

/* Action buttons: like, dislike, copy, speaker */
.sp-chat-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 2px;
}

.sp-chat-action-btn {
    flex: none;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center;
    background: none !important;
    border: 0 !important;
    border-radius: 9px !important;
    cursor: pointer;
    color: var(--sp-gray-500) !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.12s ease, background 0.12s ease;
}

.sp-chat-action-btn svg {
    display: block;
    width: 15px;
    height: 15px;
}

.sp-chat-action-btn[aria-pressed="true"] {
    color: var(--sp-accent) !important;
    background: rgba(115, 56, 255, 0.11) !important;
}

.sp-chat-action-btn:hover {
    color: var(--sp-gray-700) !important;
    background: var(--sp-gray-200) !important;
}

/* Welcome — bigger bold title + smaller subtitle per XD. */
.sp-chat-welcome {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-chat-welcome-title {
    font-size: clamp(24px, 1.9vw, 32px); /* matches reference's max clamp — was a fixed 20px */
    font-weight: 600; /* matches reference — was 700 */
    letter-spacing: -0.02em; /* matches reference — was missing */
    color: var(--sp-gray-900); /* matches reference's --ink exactly — was #000000 */
    line-height: 1.2;
    margin-bottom: 6px; /* matches reference — was missing */
    display: block;
}

.sp-chat-welcome-subtitle {
    font-size: clamp(13px, 0.9vw, 15px); /* matches reference's max clamp — was a fixed 14px */
    font-weight: 400;
    color: rgba(1, 0, 30, 0.6); /* matches reference's muted subtitle tone exactly — was solid #000000 */
    display: block;
}

/* Quick-reply chips — matches the reference site's .advisor__chip pills. */
.sp-chat-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 16px 0 0;
    padding: 0;
}

.sp-chat-chips li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* !important throughout: WordPress themes/page builders commonly apply
   their own default <button> styling (accent-colored border/text, box
   shadows, sharp corners) at higher specificity, which is what was
   overriding this into a bright pink rectangular look instead of the
   reference's subtle white pill. */
.sp-chat-chip {
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: rgba(1, 0, 30, 0.72) !important;
    padding: 7px 13px !important;
    margin: 0 !important;
    border-radius: 40px !important;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(1, 0, 30, 0.1) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none !important;
    display: inline-block;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .28s cubic-bezier(.22,1,.36,1),
                color .28s cubic-bezier(.22,1,.36,1),
                background .28s cubic-bezier(.22,1,.36,1);
}

.sp-chat-chip:hover,
.sp-chat-chip:focus {
    background: #ffffff !important;
    border-color: rgba(115, 56, 255, 0.4) !important;
    color: var(--sp-gray-900) !important;
    box-shadow: none !important;
}

/* ============================================================
   INPUT AREA — white card
   ============================================================ */

/* Chat input — XD spec: #FFFFFFA3 bg, 1px #CECECE border, 10px radius. */
.sp-chat-input-area {
    position: relative;
    padding: calc(2px + clamp(4px, 0.32vw, 6px)); /* matches reference's .advisor__composer padding exactly — was 4px 6px */
    display: flex;
    align-items: center;
    gap: 9px; /* matches reference's fixed 9px gap — was 6px */
    /* Outer tinted ring (thin, ~2px visible) — the white overlay below
       covers the interior, matching reference's actual "white pill with
       a thin dark ring" look, not a fully dark-tinted pill throughout. */
    background: rgba(1, 0, 30, 0.16);
    border-radius: clamp(11px, 0.95vw, 14px); /* real clamp(), matches reference at any viewport — was a fixed 10px */
    margin: 0 clamp(8px, 0.7vw, 12px) 0; /* margin-top removed per request — horizontal margin only now */
    box-shadow: none;
    border: none;
    z-index: 1;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.sp-chat-input-area::before {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: 0;
    border-radius: inherit;
    background: #ffffff;
    pointer-events: none;
}

.sp-chat-input-area > * {
    position: relative;
    z-index: 1;
}

.sp-chat-input-area:focus-within {
    background: rgba(115, 56, 255, 0.32);
    box-shadow: 0 0 0 3px rgba(115, 56, 255, 0.22); /* matches reference's exact --focus-ring value */
}

/* In split mode: gradient border with shadow, transparent bg (no inner box) */
.sp-chatbot-wrapper.has-services .sp-chat-input-area {
    border: none;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 16px rgba(115, 55, 255, 0.12);
    margin: 4px 16px 2px;
}

/* Gradient border element — hidden by default */
.sp-chatbot-wrapper.has-services .sp-chat-input-area::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(
        90deg,
        #a855f7 0%,
        #ec4899 30%,
        #f97316 60%,
        #a855f7 100%
    );
    background-size: 300% 100%;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: none;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.3s ease;
}

/* Only animate when AI is thinking */
.sp-chatbot-wrapper.has-services .sp-chat-input-area.sp-thinking {
    animation: spGlowPulse 4s linear infinite;
}

.sp-chatbot-wrapper.has-services .sp-chat-input-area.sp-thinking::before {
    animation: spBorderFlow 4s linear infinite;
    opacity: 1;
}

/* Stop animation when not thinking */
.sp-chatbot-wrapper.has-services .sp-chat-input-area:not(.sp-thinking)::before {
    animation: none;
    opacity: 0;
}

.sp-chatbot-wrapper.has-services .sp-chat-input-area:not(.sp-thinking) {
    animation: none;
    box-shadow: 0 2px 16px rgba(115, 55, 255, 0.12);
}

.sp-chat-input {
    flex: 1;
    border: none !important;
    border-radius: 0;
    padding: 8px 4px;
    font-size: 14px;
    color: var(--sp-gray-900);
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.sp-chat-input::placeholder { color: var(--sp-gray-500); }
.sp-chat-input:focus { background: transparent; }
.sp-chat-input:disabled { background: transparent; opacity: 0.5; }

/* Attachment button — shown in XD as chain/link icon */
.sp-chat-attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: 0;
    color: var(--sp-gray-500);
    cursor: pointer;
    border-radius: 8px;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.sp-chat-attach-btn:hover { color: var(--sp-gray-700); }
.sp-chat-attach-btn svg { width: 18px; height: 18px; }

/* Send button — white rounded square with dark border and dark arrow (per XD) */
.sp-chat-send-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1.5px solid var(--sp-gray-900);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--sp-gray-900);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.sp-chat-send-btn:hover { background: var(--sp-gray-50); border-color: var(--sp-gray-900); transform: scale(1.05); }
.sp-chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.sp-chat-send-btn svg {
    width: 16px;
    height: 16px;
    fill: var(--sp-gray-900);
    stroke: none;
    display: block;
}

.sp-send-arrow {
    display: block;
    width: 0;
    height: 0;
    border-left: 7px solid var(--sp-gray-900);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-left: 1px;
}

/* ============================================================
   DISCLAIMER
   ============================================================ */

.sp-chat-disclaimer {
    padding: 10px 16px 5px;
    text-align: center;
    font-size: 11px; /* matches reference — was 10.5px */
    font-style: normal;
    color: rgba(1, 0, 30, 0.62); /* matches reference's exact --ink-meta value — was var(--sp-gray-500), a different gray */
    line-height: 1.45; /* matches reference — was 1.4 */
}

.sp-chat-disclaimer a { color: #7338FF; text-decoration: none; white-space: nowrap; } /* matches reference's exact --purple value — was var(--sp-accent), off by one hex digit */

/* ============================================================
   TYPING INDICATOR — rotating words + spark (matches reference's
   think__spark / think__words), replacing the old static
   "Thinking..." label + bouncing dots.
   ============================================================ */

.sp-chat-typing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sp-gray-500);
    font-size: 12.5px;
    padding: 4px 0;
}

/* Rotating sparkle icon (matches reference's .think__spark exactly —
   same 4-pointed sparkle shape as the header avatar, masked so it can
   be colored via background-color, spinning continuously while
   thinking, instead of a plain pulsing dot). */
.sp-chat-typing-spark {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background-color: var(--sp-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M15.826 18.0422C14.6025 18.0422 13.6105 17.0502 13.6105 15.8262C13.6105 14.6023 14.6028 13.6108 15.826 13.6108C17.0493 13.6108 18.0415 14.6032 18.0415 15.8262C18.0415 17.0493 17.0493 18.0422 15.826 18.0422ZM22.7893 14.5607C19.6429 14.5607 17.0919 12.0098 17.0919 8.8631V0H14.5598V8.8631C14.5598 12.0098 12.0094 14.5607 8.86292 14.5607H0V17.0927H8.86292C12.0093 17.0927 14.5598 19.6436 14.5598 22.7903V31.6523H17.0919V22.7903C17.0919 19.6436 19.6429 17.0927 22.7893 17.0927H31.6523V14.5607L22.7893 14.5607Z%22 fill=%22%23000%22/%3E %3C/svg%3E") no-repeat center/contain;
    mask: url("data:image/svg+xml,%3Csvg width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M15.826 18.0422C14.6025 18.0422 13.6105 17.0502 13.6105 15.8262C13.6105 14.6023 14.6028 13.6108 15.826 13.6108C17.0493 13.6108 18.0415 14.6032 18.0415 15.8262C18.0415 17.0493 17.0493 18.0422 15.826 18.0422ZM22.7893 14.5607C19.6429 14.5607 17.0919 12.0098 17.0919 8.8631V0H14.5598V8.8631C14.5598 12.0098 12.0094 14.5607 8.86292 14.5607H0V17.0927H8.86292C12.0093 17.0927 14.5598 19.6436 14.5598 22.7903V31.6523H17.0919V22.7903C17.0919 19.6436 19.6429 17.0927 22.7893 17.0927H31.6523V14.5607L22.7893 14.5607Z%22 fill=%22%23000%22/%3E %3C/svg%3E") no-repeat center/contain;
    animation: spThinkSpin 3.4s linear infinite;
}

@keyframes spThinkSpin {
    to { transform: rotate(360deg); }
}

/* Words crossfade in place — each new word overlaps its predecessor
   briefly (via position:relative/height, both occupying the row while
   one fades out and the other fades in) rather than a hard swap. */
.sp-chat-typing-words {
    position: relative;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    height: 1.4em;
    line-height: 1.4em;
    vertical-align: bottom;
}

.sp-chat-typing-word {
    display: block;
    opacity: 0;
    transform: translateY(9px);
    transition: opacity 0.34s ease, transform 0.34s ease;
}

.sp-chat-typing-word.is-in {
    opacity: 1;
    transform: translateY(0);
}

.sp-chat-typing-word.is-out {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(-9px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

/* ============================================================
   RIGHT PANEL — Services (light gray bg per XD)
   ============================================================ */

.sp-services-panel {
    display: none;
}

.sp-chatbot-wrapper.has-services .sp-services-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #F5F5FA !important;
    background-image: url(https://dev-web.solutionsplus.ae/wp-content/uploads/2026/04/dotted-background@2x-scaled.png);
    background-size: cover;
    overflow-y: auto;
    background-repeat: no-repeat;
    padding: 40px 40px 30px;
    position: relative;
}

.sp-services-panel::-webkit-scrollbar { width: 6px; }
.sp-services-panel::-webkit-scrollbar-thumb { background: var(--sp-gray-300); border-radius: 6px; }

.sp-services-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sp-gray-500);
    font-size: 14px;
    text-align: center;
}

/* Headings */
.sp-services-heading {
    font-size: 26px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 6px;
    line-height: 1.3;
}

.sp-services-subheading {
    font-size: 14px;
    color: #000000;
    margin: 0 0 32px;
}

/* Service cards grid */
.sp-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}

/* Service card — white on light gray */
.sp-service-card {
    background: var(--sp-panel-bg);
    border: 1px solid #D9D9D9;
    border-radius: 40px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-service-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* Selected card: purple border glow */
.sp-service-card.selected {
    border-color: var(--sp-accent);
    box-shadow: 0 0 0 3px rgba(115, 55, 255, 0.15), 0 4px 16px rgba(115, 55, 255, 0.10);
}

.sp-service-card-dept {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--sp-accent);
}

.sp-service-card-name {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    line-height: 1.3;
}

.sp-service-card-desc {
    font-size: 13px;
    color: #000000;
    line-height: 1.55;
    flex: 1;
}

.sp-service-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

/* Select button — rounded square +/− (per XD, NOT circle) */
.sp-service-select-btn {
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--sp-gray-300) !important;
    border-radius: 10px !important;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sp-gray-500);
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sp-service-select-btn:hover {
    border-color: var(--sp-accent);
    color: var(--sp-accent);
}

/* Selected: purple bg, white minus icon */
.sp-service-select-btn.selected {
    background: var(--sp-accent);
    border-color: var(--sp-accent);
    color: #FFFFFF;
    border-radius: 10px;
    font-size: 22px;
}

/* "LEARN MORE" — dark filled button, white text, matching + button height (per XD QC).
   !important needed on color for all link states because theme/Elementor link
   rules (a:link, a:visited) have higher specificity than this plain class. */
.sp-service-learn-btn,
.sp-service-learn-btn:link,
.sp-service-learn-btn:visited,
.sp-service-learn-btn:hover,
.sp-service-learn-btn:focus,
.sp-service-learn-btn:active {
    color: #FFFFFF !important;
    text-decoration: none;
}
.sp-service-learn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    border: 1.5px solid var(--sp-gray-900);
    border-radius: 8px;
    background: var(--sp-gray-900);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    height: 36px;
}

.sp-service-learn-btn:hover {
    background: #2c2c42;
    border-color: #2c2c42;
}

/* ============================================================
   GENERATE PROPOSAL BAR
   ============================================================ */

.sp-proposal-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px 0 0;
    position: relative;
}

/* Folder popover — shows selected services on folder click */
.sp-folder-popover {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--sp-gray-200);
    border-radius: 12px;
    padding: 12px;
    min-width: 240px;
    max-width: 320px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 100;
    margin-bottom: 8px;
}
.sp-folder-popover-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--sp-gray-700);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sp-gray-200);
}
.sp-folder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: var(--sp-gray-700);
}
.sp-folder-remove {
    background: none;
    border: 0;
    color: var(--sp-gray-500);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
}
.sp-folder-remove:hover { background: var(--sp-gray-100); color: #e53e3e; }

/* Make folder icon clickable */
.sp-proposal-icon { cursor: pointer; }

/* Folder icon with badge */
.sp-proposal-icon {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--sp-gray-300);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sp-gray-500);
    flex-shrink: 0;
    position: relative;
}

.sp-proposal-icon.has-selection {
    background: #FFFFFF;
    border-color: var(--sp-gray-700);
    color: var(--sp-gray-900);
}

.sp-proposal-icon svg {
    width: 22px;
    height: 22px;
}

/* Badge on folder icon */
.sp-proposal-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 50%;
    background: var(--sp-accent);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
}

/* Generate Proposal button — visible border, bold text, gradient when active */
.sp-proposal-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border: 2px solid var(--sp-gray-900);
    border-radius: var(--sp-radius-sm);
    background: none;
    color: var(--sp-gray-900);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.sp-proposal-btn:hover {
    border-color: var(--sp-gray-900);
    color: var(--sp-gray-900);
    background: rgba(0,0,0,0.02);
}

/* When enabled (services selected): gradient animated border */
.sp-proposal-btn:not(:disabled) {
    border-color: transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(90deg, #f97316, #ec4899, #a855f7, #f97316);
    background-size: 100% 100%, 300% 100%;
    animation: spBorderFlow 4s linear infinite;
    color: var(--sp-gray-900);
}

.sp-proposal-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    animation: none;
    background-image: none;
    background: #FFFFFF;
    border: 2px solid var(--sp-gray-300);
    color: var(--sp-gray-500);
}

.sp-proposal-btn svg { width: 18px; height: 18px; }

/* ============================================================
   PROPOSAL FORM (in-panel, after Generate Proposal click)
   ============================================================ */

.sp-proposal-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    padding: 40px;
    overflow-y: auto;
    text-align: center;
}

.sp-proposal-panel.active {
    display: flex;
}

/* ---- XD Crafting State: 3 Detailed Document Pages ---- */
.sp-proposal-docs {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 32px;
}
.sp-proposal-doc {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: spDocIn 0.5s ease forwards;
}
.sp-proposal-doc--1 { width: 200px; height: 280px; animation-delay: 0.1s; }
.sp-proposal-doc--2 { width: 240px; height: 320px; animation-delay: 0.3s; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.sp-proposal-doc--3 { width: 220px; height: 300px; animation-delay: 0.5s; }

/*@keyframes spDocIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}*/

/* SVG proposal visual animation */
.sp-proposal-docs svg {
    animation: spDocIn 0.5s ease forwards, spSvgFloat 2s ease-in-out infinite 0.3s;
    opacity: 0;
    transform-origin: center center;
}

@keyframes spDocIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes spSvgFloat {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-8px); }
}

.sp-doc-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 14px;
    box-sizing: border-box;
}

/* Doc 1: Mostly blank with small gray bar near bottom */
.sp-proposal-doc--1 .sp-doc-content { justify-content: flex-end; padding-bottom: 24px; }
.sp-doc-line { height: 2px; background: #d8d8e0; border-radius: 1px; margin-bottom: 6px; width: 100%; }
.sp-doc-line--short { width: 35%; }
.sp-doc-line--bullet { width: 90%; }
.sp-doc-line--break { height: 0; margin-bottom: 10px; }
.sp-doc-line--highlight {
    height: 6px;
    background: linear-gradient(90deg, rgba(160,140,220,0.3) 0%, rgba(160,140,220,0.5) 50%, rgba(160,140,220,0.3) 100%);
    border-radius: 2px;
    margin-top: 4px;
}

/* Doc 2: Image block + text lines + purple highlight */
.sp-proposal-doc--2 { animation: spDocIn 0.5s ease forwards, spDocFloat 4s ease-in-out infinite 1s; }
.sp-doc-img { width: 100%; height: 28%; background: #d4d4dc; border-radius: 3px; margin-bottom: 12px; flex-shrink: 0; }
.sp-doc-text { display: flex; flex-direction: column; gap: 5px; flex: 1; }

/* Doc 3: Title + 3-column header + numbered sections */
.sp-doc-title { height: 3px; background: #c8c8d0; border-radius: 1px; width: 55%; margin: 0 auto 10px; }
.sp-doc-cols {
    display: flex; gap: 8px; margin-bottom: 10px;
}
.sp-doc-cols::before, .sp-doc-cols::after {
    content: ''; flex: 1; height: 2px; background: #d8d8e0; border-radius: 1px; margin-top: 4px;
}
.sp-doc-paragraph {
    height: 20px;
    background: repeating-linear-gradient(to bottom, #d8d8e0 0px, #d8d8e0 1.5px, transparent 1.5px, transparent 6px);
    margin-bottom: 10px;
}
.sp-doc-numbered { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sp-doc-num-item { display: flex; gap: 6px; align-items: flex-start; }
.sp-doc-num {
    width: 16px; height: 16px; border-radius: 50%; background: var(--sp-gray-200);
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; color: var(--sp-gray-500); flex-shrink: 0; font-weight: 600;
}
.sp-doc-num-lines {
    flex: 1;
    height: 24px;
    background: repeating-linear-gradient(to bottom, #d8d8e0 0px, #d8d8e0 1.5px, transparent 1.5px, transparent 6px);
}

@keyframes spDocFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Crafting sparkle icon — XD spec: gradient rounded square matching avatar,
   44×44 at 10px radius with linear-gradient(326deg, #FEA85E → #AB88FB). */
.sp-proposal-crafting-icon {

    
    background: transparent;
   /* box-shadow: 0 2px 12px rgba(115, 55, 255, 0.18);
    display: inline-flex;
    align-items: center;

    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;*/
}
.sp-proposal-crafting-icon svg {
    width: 44px;
    height: 44px;
}

/* Hide docs and icon when form is shown */
.sp-proposal-panel .sp-proposal-docs.sp-hidden,
.sp-proposal-panel .sp-proposal-crafting-icon.sp-hidden {
    display: none;
}

/* Checkmark circle */
.sp-proposal-check {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(115, 55, 255, 0.3) 0%, rgba(115, 55, 255, 0.15) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    position: relative;
}

.sp-proposal-check::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(115, 55, 255, 0.1) 0%, rgba(115, 55, 255, 0.03) 100%);
}

.sp-proposal-check svg {
    width: 32px;
    height: 32px;
    color: var(--sp-accent);
    position: relative;
    z-index: 1;
}

/* Spinning state for "crafting proposal" */
.sp-proposal-check.sp-spinning {
    animation: spSpin 2s linear infinite;
}
.sp-proposal-check.sp-spinning svg {
    display: none;
}
.sp-proposal-check.sp-spinning::after {
    content: '';
    width: 28px;
    height: 28px;
    border: 3px solid rgba(115, 55, 255, 0.2);
    border-top-color: var(--sp-accent);
    border-radius: 50%;
    animation: spSpin 1s linear infinite;
    position: relative;
    z-index: 1;
}
@keyframes spSpin {
    to { transform: rotate(360deg); }
}

.sp-proposal-panel-title {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--sp-gray-500) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    letter-spacing: 0;
}

/* Crafting row: icon + text side by side (per XD) */
.sp-proposal-crafting-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding: 16px 24px;
    background: transparent;
    border-radius: 16px;
    max-width: 600px;
}

/* Form card */

/* Hidden by default */
.sp-proposal-confirm-header {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px 50px;
    gap: 16px;
    order: -1;
}

/* Show only when form card is shown via JS inline style */
.sp-proposal-form-card[style*="display: block"] + .sp-proposal-confirm-header,
.sp-proposal-form-card[style*="display:block"] + .sp-proposal-confirm-header {
    display: flex;
}

.sp-proposal-confirm-icon {
    width: 72px;
    height: 72px;
    background: rgba(115, 55, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px 8px rgba(115, 55, 255, 0.25);
}

.sp-proposal-confirm-icon img {
    width: 110px !important;
    height: 110px !important;
    object-fit: contain;
}

.sp-proposal-confirm-title {
    font-size: 20px !important;
    font-weight: 600;
    color: #000000;
    margin: 0;
    max-width: 400px;
    line-height: 1.4;
}

.sp-proposal-form-card {
    background: var(--sp-panel-bg);
    border-radius: 20px;
    padding: 32px;
    width: 100%;
    max-width: 480px;
    min-height: 50px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    text-align: left;
    box-sizing: border-box;
}

/* Ensure form elements are always visible when card is shown */
.sp-proposal-form-card form {
    display: block !important;
}
.sp-proposal-form-card .sp-form-group {
    display: block !important;
}
.sp-proposal-form-card .sp-form-input {
    display: block !important;
    height: auto !important;
    min-height: 48px;
}
.sp-proposal-form-card .sp-proposal-submit-btn {
    display: block !important;
}
.sp-proposal-form-card .sp-proposal-form-desc {
    display: block !important;
}
.sp-proposal-form-card .sp-proposal-form-hint {
    display: flex !important;
}

.sp-proposal-form-desc {
    font-size: 14px;
    color: var(--sp-gray-700);
    margin: 0 0 24px;
    line-height: 1.5;
}

.sp-proposal-form-card .sp-form-group {
    margin-bottom: 14px;
}

.sp-proposal-form-card .sp-form-input,
#sp-proposal-form .sp-form-input,
.sp-chatbot-wrapper .sp-form-input {
    width: 100% !important;
    border: 1px solid var(--sp-gray-200) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    color: var(--sp-gray-900) !important;
    background: var(--sp-gray-50) !important;
    outline: none !important;
    transition: border-color 0.15s ease;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 48px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.sp-proposal-form-card .sp-form-input::placeholder {
    color: var(--sp-gray-500);
}

.sp-proposal-form-card .sp-form-input:focus {
    border-color: var(--sp-accent);
}

.sp-proposal-form-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--sp-gray-500);
    margin-top: 8px;
    line-height: 1.4;
}

.sp-proposal-form-hint svg {
    width: 14px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.sp-proposal-submit-btn,
#sp-proposal-form .sp-proposal-submit-btn {
    width: 100% !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--sp-accent) !important;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.15s ease;
}

.sp-proposal-submit-btn:hover {
    background: var(--sp-accent-hover);
}

.sp-proposal-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Success state — shown inside the form card after submit */
.sp-proposal-success {
    display: none;
    text-align: center;
    padding: 20px 0;
}

.sp-proposal-success.active {
    display: block;
}

.sp-proposal-success-msg {
    font-size: 16px;
    color: var(--sp-gray-700);
    margin: 0 0 24px;
    line-height: 1.5;
}

/* Download button — large purple pill matching XD */
.sp-proposal-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    padding: 16px 32px;
    border: 0;
    border-radius: 12px;
    background: var(--sp-accent);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.15s ease;
}

.sp-proposal-download-btn:hover {
    background: var(--sp-accent-hover);
}

/* ============================================================
   EXPLORE SERVICES TAB
   ============================================================ */

.sp-explore-search {
    padding: 12px 20px;
}

.sp-explore-search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border-radius: 10px;
    padding: 2px 14px;
    border: 1px solid #CECECE;
    cursor: text;
}

.sp-explore-search-icon {
    flex-shrink: 0;
    color: var(--sp-gray-900);
    pointer-events: none;
}

.sp-explore-search-label {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--sp-gray-500);
    pointer-events: none;
    user-select: none;
}

.sp-explore-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 13px;
    color: var(--sp-gray-900);
    padding: 0;
    margin: 0;
    min-width: 0;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}

.sp-explore-input::placeholder {
    color: transparent;
}

.sp-explore-search-inner:focus-within {
    border-color: var(--sp-accent);
    background: white;
}

.sp-explore-search-inner:focus-within .sp-explore-search-label {
    color: var(--sp-gray-300);
}

.sp-explore-tree { flex: 1; overflow-y: auto; padding: 8px 16px; }
.sp-explore-dept { margin-bottom: 2px; }

.sp-explore-dept-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: #000000;
    text-align: left;
    transition: background 0.12s ease;
}

a.sp-explore-dept-link-btn,
a.sp-explore-dept-link-btn:link,
a.sp-explore-dept-link-btn:visited,
a.sp-explore-dept-link-btn:active {
    text-decoration: none !important;
    color: var(--sp-gray-900) !important;
}
a.sp-explore-dept-link-btn:hover { color: var(--sp-gray-900) !important; }
.sp-explore-dept.active > a.sp-explore-dept-link-btn { color: var(--sp-accent) !important; }
.sp-explore-dept-btn:hover { color: #7337ff !important; }
.sp-explore-dept-btn:focus { color: #7337ff !important; }
.sp-explore-dept.active > .sp-explore-dept-btn { color: var(--sp-accent); }

.sp-explore-dept-icon { display: inline-flex; color: #000000; flex-shrink: 0; width: 20px; height: 20px; }

.sp-explore-dept-icon svg { width: 20px; height: 20px; }
.sp-explore-dept.active .sp-explore-dept-icon { color: var(--sp-accent); }

.sp-explore-dept-link { display: inline-flex; color: var(--sp-gray-500); flex-shrink: 0; padding: 4px; border-radius: 4px; transition: color 0.15s ease; }
.sp-explore-dept-link:hover { color: var(--sp-accent); }
.sp-explore-dept-link-row { padding: 4px 8px 8px 38px; }
.sp-explore-dept-page-link { font-size: 12px; color: var(--sp-accent); text-decoration: none; font-weight: 500; }
.sp-explore-dept-page-link:hover { text-decoration: underline; }

.sp-explore-dept-name { flex: 1; }
.sp-explore-dept-arrow {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--sp-gray-300);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--sp-gray-700);
    transition: transform 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}
.sp-explore-dept.active .sp-explore-dept-arrow {
    transform: rotate(180deg);
    border-color: var(--sp-accent);
    color: var(--sp-accent);
}

.sp-explore-sub-list { 
    margin: 0 0 6px 17px; 
    padding: 0 0 0 16px; 
    list-style: none; 
    border-left: 2px solid var(--sp-gray-200);
}

.sp-explore-dept.active .sp-explore-sub-list {
    border-left: 1px solid #00000039;
}

.sp-explore-sub-item {
    padding: 6px 8px;
    font-size: 12.5px;
    color: #000000;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp-explore-sub-item:hover { background: var(--sp-accent-light); color: var(--sp-accent); }

/* Sub-service text link — gray by default, purple ONLY on hover */
.sp-explore-svc-text-link,
.sp-explore-svc-text-link:link,
.sp-explore-svc-text-link:visited,
.sp-explore-svc-text-link:active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    color: var(--sp-gray-700) !important;
    text-decoration: none !important;
    width: 100%;
    transition: color 0.15s ease;
}
.sp-explore-svc-text-link:hover { color: var(--sp-accent) !important; }
.sp-explore-svc-link-icon { flex-shrink: 0; opacity: 0; transition: opacity 0.15s ease; }
.sp-explore-sub-item:hover .sp-explore-svc-link-icon { opacity: 1; }

/* Legacy icon-only link (backward compat) */
.sp-explore-svc-link { display: inline-flex; color: var(--sp-gray-500); flex-shrink: 0; margin-left: 6px; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease; }
.sp-explore-sub-item:hover .sp-explore-svc-link { opacity: 1; }
.sp-explore-svc-link:hover { color: var(--sp-accent); }
.sp-explore-dept.hidden { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/*@media (max-width: 768px) {
    .sp-chatbot-wrapper {
        bottom: 0; left: 0; right: 0; transform: none;
        width: 100%; max-width: 100%;
        height: 100vh; max-height: 100vh;
        border-radius: 0;
    }

    @keyframes spPanelIn {
        from { opacity: 0; transform: translateY(30px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .sp-chatbot-wrapper.has-services {
        inset: 0; border-radius: 0; flex-direction: column;
    }

    .sp-chatbot-wrapper.has-services .sp-chat-panel {
        width: 100%; min-width: 0;
        border-right: 0; border-bottom: 1px solid var(--sp-gray-200);
        max-height: 50vh;
    }

    .sp-chatbot-wrapper.has-services .sp-services-panel { padding: 20px; }
    .sp-services-grid { grid-template-columns: 1fr; }
    .sp-proposal-panel { padding: 20px; }
}

@media (max-width: 480px) {
    .sp-services-heading { font-size: 20px; }
    .sp-chatbot-wrapper.has-services .sp-services-panel { padding: 16px; }
    .sp-proposal-form-card { padding: 20px; }
}*/

/* ── Mobile Services Panel ── */
.sp-mobile-services-header {
    display: none;
}

@media (max-width: 768px) {

    /* Fix overlapping + and x buttons on mobile */
    .sp-chatbot-wrapper.has-services .sp-chatbot-close-overlay {
        position: static !important;
        top: auto !important;
        right: auto !important;
    }

    .sp-chat-header {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide inline bar when chatbot is open */
    body.sp-chatbot-open .sp-inline-bar {
        display: none !important;
    }

    /* Overlay covers everything */
    .sp-chatbot-overlay {
        z-index: 999997 !important;
        pointer-events: all !important;
        background: rgba(0,0,0,0.3) !important;
    }

    /* Wrapper full screen */
    .sp-chatbot-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        z-index: 999999 !important;
        transform: none !important;
    }

    /* Chat panel full height flex */
    .sp-chat-panel {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* Messages area fills remaining space */
    .sp-chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Input pinned to bottom */
    .sp-chat-input-area {
        flex-shrink: 0 !important;
        margin: 4px 12px 8px !important;
    }

    /* has-services: panels stacked, services slides over */
    .sp-chatbot-wrapper.has-services {
        flex-direction: column !important;
        inset: 0 !important;
        border-radius: 0 !important;
    }

    .sp-chatbot-wrapper.has-services .sp-chat-panel {
        width: 100% !important;
        max-height: 100% !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    /* Services panel slides in from right */
    .sp-chatbot-wrapper.has-services .sp-services-panel {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1000000 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .sp-chatbot-wrapper.has-services .sp-services-panel.sp-mobile-panel-open {
        transform: translateX(0) !important;
    }

    /* Mobile services header */
    .sp-mobile-services-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 16px 12px !important;
        border-bottom: none !important;
        background: transparent !important;
        flex-shrink: 0 !important;
    }

    .sp-mobile-back-btn {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--sp-gray-900) !important;
        cursor: pointer !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
    }

    /* Services content scrollable */
    .sp-services-panel .sp-services-empty,
    .sp-services-panel #sp-services-content,
    .sp-services-panel #sp-proposal-panel {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
    }

    /* Proposal bar sticky */
    .sp-proposal-bar {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 12px 16px;
        border-top: 1px solid var(--sp-gray-200);
        flex-shrink: 0;
    }

    /* Fix header buttons */
    .sp-chat-clear-btn {
        padding: 4px 9px;
        font-size: 11px;
    }

    .sp-chatbot-close-overlay {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }

    .sp-services-grid { grid-template-columns: 1fr; }
    .sp-proposal-panel { padding: 16px; }
    .sp-services-heading { font-size: 20px; }
    .sp-proposal-form-card { padding: 20px; margin: 0; }
}

@media (max-width: 480px) {
    .sp-chat-welcome-title { font-size: 22px; }
    .sp-inline-bar__label { display: none; }
}

@media (max-width: 768px) {

    /* Header — transparent */
    .sp-mobile-services-header {
        background: transparent !important;
        border-bottom: none !important;
        padding: 20px 20px 12px !important;
    }

    

    .sp-mobile-back-btn svg {
        width: 30px !important;
        height: 30px !important;
        stroke: var(--sp-gray-900) !important;
    }

    /* Close button on services panel */
    .sp-mobile-services-header .sp-chatbot-close-overlay {
        background: transparent !important;
        border: none !important;
        font-size: 22px;
        color: var(--sp-gray-900);
        cursor: pointer;
        padding: 4px 8px;
    }

    /* Services panel background — dotted pattern */
    .sp-chatbot-wrapper.has-services .sp-services-panel {
        background: #f0f0f5 !important;
        background-image: radial-gradient(circle, #c8c8d4 1px, transparent 1px) !important;
        background-size: 20px 20px !important;
    }

    /* Services content area */
    .sp-services-panel #sp-services-content {
        background: transparent !important;
        padding: 12px 16px 100px !important;
    }

    /* Proposal bar — fade effect from transparent to white */
    .sp-proposal-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 40px 16px 24px !important;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(240, 240, 245, 0.8) 30%,
            rgba(240, 240, 245, 1) 60%
        ) !important;
        border-top: none !important;
        z-index: 10;
    }

    /* Generate proposal button full width */
    .sp-proposal-btn {
        width: 100%;
        justify-content: center;
        border-radius: 14px !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    /* Service cards styling */
    .sp-service-card {
        background: white !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
    }

    /* Services heading */
    .sp-services-heading {
        font-size: 22px !important;
        margin-bottom: 4px !important;
    }

    .sp-services-subheading {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }
}