/**
 * 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: #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: 540px; /* slightly wider than the 520px middle bar to fit the 6px padding ring */
    margin: 0 !important;
    /* Layer 1 — outer glass surface */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    padding: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    pointer-events: auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    box-sizing: border-box;
}

/* 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: 10px;
    background: rgba(122, 122, 122, 0.45); /* #7a7a7a with slight transparency */
    border-radius: 14px; /* smaller than outer 20px for visible ring */
    padding: 7px 7px 7px 20px;
    position: relative;
    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: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    flex-shrink: 0;
    font-style: italic;
    padding-right: 0;
}

/* 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. */
.sp-inline-bar__input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 4px 10px;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    /* Animated gradient border via double background-clip (same technique as .sp-proposal-btn) */
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
        linear-gradient(#2b2b2b, #2b2b2b),
        linear-gradient(90deg, #f97316, #ec4899, #a855f7, #f97316);
    background-size: 100% 100%, 300% 100%;
    animation: spBorderFlow 4s linear infinite;
}
/* 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: 16px;
    height: 16px;
    z-index: 1;
}
.sp-inline-bar__sparkle svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* v1.4.10: placeholder reverted to 13px (old compact size) */
.sp-inline-bar__placeholder {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    z-index: 1;
}

/* 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: 30px;
    height: 30px;
    border-radius: 8px;
    background: #3f3f3f;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    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: 16px;
    height: 16px;
    stroke: #ffffff;
}
.sp-inline-bar:hover .sp-inline-bar__send {
    filter: brightness(1.2);
    transform: scale(1.05);
}
/* 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: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    bottom: 24px;
    left: 24px;
    transform: none;
    width: 460px;
    max-width: calc(100vw - 48px);
    height: 680px;
    max-height: calc(100vh - 48px);
    /* v1.4.10: chat window color changed to #e1e1e3 per client QC.
       Light neutral gray with glass transparency so the hero wave bleeds
       through subtly. Replaces v1.4.8 gray+purple gradient. */
    background: linear-gradient(
        180deg,
        rgba(225, 225, 227, 0.82) 0%,
        rgba(225, 225, 227, 0.78) 100%
    ) !important;
    border-radius: 20px;
    /* Glass outer line — thin, semi-transparent white */
    border: 1px solid rgba(255, 255, 255, 0.28);
    /* v1.4.7/1.4.8: drop shadow for depth + inset top highlight for glass sheen */
    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.35);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: spPanelIn 0.3s ease forwards;
    pointer-events: auto;
}

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

/* 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;
    /* 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:
        0 20px 72px rgba(26, 26, 46, 0.26),
        0 2px 12px rgba(26, 26, 46, 0.10),
        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 */
}

.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: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.06) 60%,
        rgba(255, 255, 255, 0.04) 100%
    );
}

/* Header */
.sp-chat-header {
    padding: 20px 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-chat-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f97316 0%, #ec4899 40%, #a855f7 80%, #7337FF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-chat-header-icon svg {
    width: 20px;
    height: 20px;
}

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

.sp-chat-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-gray-900);
    line-height: 1.2;
}

.sp-chat-subtitle {
    font-size: 11px;
    color: var(--sp-gray-500);
    margin-top: 1px;
}

/* + button — transparent by default, bg on hover only (per XD QC) */
.sp-chat-new-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--sp-gray-500);
    cursor: pointer;
    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;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    padding: 0;
}
.sp-chat-new-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--sp-gray-900);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.sp-new-icon { display: none !important; }

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

/* Tabs — hidden in card state (State 1), shown in split (State 2) */
.sp-chat-tabs {
    display: none;
    padding: 3px;
    gap: 0;
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    margin: 4px 8px 0;
}

/* 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: var(--sp-gray-500);
    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: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

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

.sp-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* Critical for nested flex scroll */
}

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

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

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

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

/* User message — white bubble, RIGHT aligned (per XD) */
.sp-chat-msg-user {
    display: flex;
    justify-content: flex-end;
}

.sp-chat-msg-user .sp-chat-bubble {
    max-width: 85%;
    background: #fff;
    color: var(--sp-gray-900);
    border-radius: 18px 18px 4px 18px;
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Bot message */
.sp-chat-msg-bot {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-chat-msg-bot .sp-chat-bubble {
    color: var(--sp-gray-700);
    font-size: 13.5px;
    line-height: 1.6;
    padding: 4px 0;
}

.sp-chat-msg-bot .sp-chat-bubble strong { color: var(--sp-gray-900); }

.sp-chat-msg-bot .sp-chatbot-rich {
    color: var(--sp-gray-700);
    font-size: 13.5px;
    line-height: 1.6;
    padding: 4px 0;
}

.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;
    gap: 2px;
    padding: 2px 0;
}

.sp-chat-action-btn {
    background: none;
    border: 0;
    padding: 5px;
    cursor: pointer;
    color: var(--sp-gray-500);
    border-radius: 6px;
    transition: color 0.12s ease, background 0.12s ease;
    display: inline-flex;
    align-items: center;
}

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

.sp-chat-action-btn svg { width: 16px; height: 16px; }

/* Welcome */
.sp-chat-welcome {
    color: var(--sp-gray-500);
    font-size: 13px;
    padding: 8px 0;
}

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

/* Chat input — no inner border, compact height (per XD QC) */
.sp-chat-input-area {
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--sp-panel-bg);
    border-radius: 14px;
    margin: 4px 16px;
    box-shadow: none;
    border: none;
    position: relative;
    z-index: 1;
}

/* 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;
}
.sp-chatbot-wrapper.has-services .sp-chat-input-area::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    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: spBorderFlow 4s linear infinite;
    pointer-events: none;
    z-index: -1;
}

.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;
    border: 1.5px solid var(--sp-gray-700);
    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;
}

.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 14px;
    text-align: center;
    font-size: 10.5px;
    color: var(--sp-gray-500);
    line-height: 1.4;
}

.sp-chat-disclaimer a { color: var(--sp-accent); text-decoration: none; }

/* ============================================================
   TYPING INDICATOR
   ============================================================ */

.sp-chat-typing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sp-gray-500);
    font-size: 12px;
    padding: 4px 0;
}
.sp-chat-typing-dots { display: inline-flex; gap: 3px; }
.sp-chat-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--sp-gray-500);
    animation: spDot 1.2s infinite ease-in-out;
}
.sp-chat-dot:nth-child(2) { animation-delay: 0.15s; }
.sp-chat-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes spDot {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   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: radial-gradient(circle, #c8c8d6 1px, transparent 1px) !important;
    background-size: 18px 18px !important;
    overflow-y: auto;
    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: var(--sp-gray-900);
    margin: 0 0 6px;
    line-height: 1.3;
}

.sp-services-subheading {
    font-size: 14px;
    color: var(--sp-gray-500);
    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: 2px solid transparent;
    border-radius: 16px;
    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: var(--sp-gray-900);
    line-height: 1.3;
}

.sp-service-card-desc {
    font-size: 13px;
    color: var(--sp-gray-500);
    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) */
.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);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    height: 36px;
}

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

/* ============================================================
   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;
    background: #ECEDF2;
    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); }
}

.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 — gradient circle with star (inline with text per XD) */
.sp-proposal-crafting-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

/* 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: rgba(255,255,255,0.6);
    border-radius: 16px;
    max-width: 600px;
}

/* Form card */
.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: 15px;
    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: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--sp-gray-500);
    margin-top: 8px;
    line-height: 1.4;
}

.sp-proposal-form-hint svg {
    width: 16px;
    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 16px;
    position: relative;
    border-bottom: 1px solid var(--sp-gray-200);
}

.sp-explore-search-icon {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sp-gray-500);
    pointer-events: none;
}

.sp-explore-input {
    width: 100%;
    border: 1px solid var(--sp-gray-200);
    border-radius: var(--sp-radius-sm);
    padding: 9px 12px 9px 36px;
    font-size: 13px;
    color: var(--sp-gray-900);
    background: var(--sp-gray-50);
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.sp-explore-input:focus { border-color: var(--sp-accent); }

.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: var(--sp-gray-900);
    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 { background: var(--sp-gray-200); }
.sp-explore-dept.active > .sp-explore-dept-btn { color: var(--sp-accent); }

.sp-explore-dept-icon { display: inline-flex; color: var(--sp-gray-500); flex-shrink: 0; }
.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 42px; padding: 0; list-style: none; }

.sp-explore-sub-item {
    padding: 6px 8px;
    font-size: 12.5px;
    color: var(--sp-gray-700);
    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; }
}