/**
 * Chat Welcome – Product Visuals modal
 * Fully scoped so it doesn't affect other pages/components.
 */

/* Scope root */
#product-visuals-modal-overlay.bdl-pv-modal-overlay {
    --bdl-pv-primary-navy: #0F1C36;
    --bdl-pv-core-blue: #1a73e8;
    --bdl-pv-core-blue-hover: #1557b0;
    --bdl-pv-accent-orange: #FF5722;
    --bdl-pv-text-dark: #333333;
    --bdl-pv-text-muted: #5f6368;
    --bdl-pv-bg-light: #f8f9fa;
    --bdl-pv-card-shadow: 0 4px 15px rgba(0,0,0,0.05);
    --bdl-pv-card-hover-shadow: 0 12px 30px rgba(26, 115, 232, 0.15);
}

/* Product Visuals button in welcome area (match Dataset + size) */
.bdl-product-visuals-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: #6b7280;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    line-height: 1.2;
}
.bdl-product-visuals-btn:hover {
    transform: translateY(-1px);
    color: #4b5563;
    background: #f8fafc;
    border-color: #d1d5db;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
}
.bdl-product-visuals-btn:active {
    transform: translateY(0);
}

/* =========================================================
   THE MODAL / POPUP GALLERY (SCOPED)
   ========================================================= */

#product-visuals-modal-overlay.bdl-pv-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 28, 54, 0.75);
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    /*
     * Must be higher than:
     * - floating sidebar on mobile (z-index ~2100)
     * - fixed module header on Home/Chat (z-index 1300)
     */
    z-index: 30000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: auto;
}

/* Show class attached via JS */
#product-visuals-modal-overlay.bdl-pv-modal-overlay.bdl-pv-show {
    opacity: 1;
    visibility: visible;
}

#product-visuals-modal.bdl-pv-modal-content {
    background: var(--bdl-pv-bg-light);
    width: 95%;
    max-width: 860px;
    max-height: 78vh;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    position: relative;
    z-index: 30001;
}

#product-visuals-modal-overlay.bdl-pv-modal-overlay.bdl-pv-show #product-visuals-modal.bdl-pv-modal-content {
    transform: translateY(0) scale(1);
}

/* Mobile: ensure modal is not covered by fixed header/sidebar */
@media (max-width: 768px) {
    #product-visuals-modal-overlay.bdl-pv-modal-overlay {
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: calc(var(--fixed-module-header-height, 78px) + 10px);
        padding-left: 44px; /* collapsed sidebar rail */
        padding-right: 14px;
    }

    #product-visuals-modal.bdl-pv-modal-content {
        width: 100%;
        max-height: calc(100vh - var(--fixed-module-header-height, 78px) - 24px);
        border-radius: 14px;
    }
}

@media (max-width: 480px) {
    #product-visuals-modal-overlay.bdl-pv-modal-overlay {
        padding-left: 48px; /* narrow phones rail */
        padding-right: 10px;
        padding-top: calc(var(--fixed-module-header-height, 78px) + 8px);
    }
}

.bdl-pv-modal-header {
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 20;
}
.bdl-pv-modal-header h3 {
    color: var(--bdl-pv-primary-navy);
    font-size: 1.4rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.bdl-pv-close-btn {
    background: #f1f3f4;
    border: none;
    font-size: 1.5rem;
    color: var(--bdl-pv-text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
    line-height: 1;
}
.bdl-pv-close-btn:hover {
    background: #fee2e2;
    color: #d32f2f;
    transform: rotate(90deg);
}

.bdl-pv-modal-body {
    padding: 18px;
    overflow-y: auto;
}

/* Custom Scrollbar for Modal Body */
.bdl-pv-modal-body::-webkit-scrollbar { width: 8px; }
.bdl-pv-modal-body::-webkit-scrollbar-track { background: transparent; }
.bdl-pv-modal-body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.bdl-pv-modal-body::-webkit-scrollbar-thumb:hover { background: #999; }

/* --- GRID LAYOUT --- */
.bdl-pv-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

/* --- INDIVIDUAL ANIMATION CARDS --- */
.bdl-pv-anim-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--bdl-pv-card-shadow);
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

.bdl-pv-anim-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--bdl-pv-card-hover-shadow);
    border-color: var(--bdl-pv-core-blue);
}

/* Decorative banner for each card */
.bdl-pv-card-banner { height: 56px; display: flex; justify-content: center; align-items: center; }
.bdl-pv-banner-jobs { background: linear-gradient(135deg, #e3f2fd, #90caf9); }
.bdl-pv-banner-tele { background: linear-gradient(135deg, #fce4ec, #f48fb1); }
.bdl-pv-banner-train { background: linear-gradient(135deg, #f3e5f5, #ce93d8); }
.bdl-pv-banner-vendor { background: linear-gradient(135deg, #e8f5e9, #a5d6a7); }
.bdl-pv-banner-gigs { background: linear-gradient(135deg, #fff3e0, #ffcc80); }
.bdl-pv-banner-data { background: linear-gradient(135deg, #e8eaf6, #9fa8da); }
.bdl-pv-banner-neural { background: linear-gradient(135deg, #e0f2fe, #67e8f9); }

.bdl-pv-card-icon {
    font-size: 1.55rem;
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    position: absolute;
    top: 26px;
    left: 14px;
    z-index: 2;
}

.bdl-pv-card-content { padding: 28px 14px 14px 14px; }

.bdl-pv-card-title {
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--bdl-pv-primary-navy);
    margin-bottom: 5px;
}
.bdl-pv-card-desc {
    font-size: 1.2rem;
    color: var(--bdl-pv-text-muted);
    line-height: 1.5;
    margin-bottom: 15px;
}

.bdl-pv-card-action {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bdl-pv-core-blue);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Hover Play Overlay Effect */
.bdl-pv-play-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}
.bdl-pv-anim-card:hover .bdl-pv-play-overlay { opacity: 1; }

.bdl-pv-play-btn-circle {
    width: 50px;
    height: 50px;
    background: var(--bdl-pv-core-blue);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(26,115,232,0.4);
    margin-bottom: 10px;
}
.bdl-pv-play-text {
    font-weight: 700;
    color: var(--bdl-pv-core-blue);
    font-size: 0.95rem;
}

/* ----- Tele Code / Jobs Grid / Training Hub / Vendor Matrix / Gigs / Data Port animation modals (850×450) ----- */
.bdl-telecode-anim-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    background: rgba(15, 28, 54, 0.75);
    backdrop-filter: blur(6px);
    z-index: 10001;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.bdl-telecode-anim-modal-overlay.bdl-telecode-show {
    display: flex !important;
    opacity: 1;
    visibility: visible;
}
/* Ensure Data Port (and all) overlay is on top and covers viewport when shown */
#data-port-anim-modal-overlay.bdl-telecode-show,
#get-code-anim-modal-overlay.bdl-telecode-show,
#neural-search-anim-modal-overlay.bdl-telecode-show,
#telecode-anim-modal-overlay.bdl-telecode-show,
#jobs-grid-anim-modal-overlay.bdl-telecode-show,
#training-hub-anim-modal-overlay.bdl-telecode-show,
#vendor-matrix-anim-modal-overlay.bdl-telecode-show,
#gigs-projects-anim-modal-overlay.bdl-telecode-show {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 10001 !important;
}
.bdl-telecode-anim-modal.bdl-telecode-anim-modal-content {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    max-height: none;
    overflow: visible;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.bdl-telecode-anim-modal-overlay.bdl-telecode-show .bdl-telecode-anim-modal.bdl-telecode-anim-modal-content {
    transform: translateY(0) scale(1);
}
.bdl-telecode-anim-modal-header {
    display: none;
}
.bdl-telecode-anim-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #0F1C36;
}
.bdl-telecode-anim-modal-body {
    padding: 0;
    overflow: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Training Hub animation modal: fixed 850x450 view, no internal scroll */
#training-hub-anim-modal .bdl-telecode-anim-modal-body {
    overflow: hidden;
}

/* Vendor Matrix animation modal: fixed 850x450 view, no internal scroll */
#vendor-matrix-anim-modal .bdl-telecode-anim-modal-body {
    overflow: hidden;
}

/* Gigs & Projects animation modal: fixed 850x450 view, no internal scroll */
#gigs-projects-anim-modal .bdl-telecode-anim-modal-body {
    overflow: hidden;
}

/* Data Port animation modal: fixed 850x450 view, no internal scroll */
#data-port-anim-modal .bdl-telecode-anim-modal-body {
    overflow: hidden;
}

/* Get Code animation modal: larger box for Agentic Workflows (step tracker + IDE + next steps) */
#get-code-anim-modal .bdl-telecode-anim-modal-body {
    overflow: hidden;
}
#get-code-anim-modal .bdl-telecode-anim-box-wrap {
    width: 780px;
    height: 500px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
}

/* Neural Search animation modal: fixed 850x450 view, no internal scroll */
#neural-search-anim-modal .bdl-telecode-anim-modal-body {
    overflow: hidden;
}

.bdl-telecode-anim-box-wrap {
    width: 850px;
    height: 450px;
    max-width: 100%;
    position: relative;
}

/* Neural Search modal: slightly taller to show Next Steps fully */
#neural-search-anim-modal .bdl-telecode-anim-box-wrap {
    width: 850px;
    height: 540px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Neural Search: close icon in top-right corner */
#neural-search-anim-modal .bdl-telecode-anim-close {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    /* border-radius: 12px; */
    background:white;
    /* box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18); */
    color: #64748b;
    font-size: 18px;
    font-weight: 700;
    z-index: 300;
}
#neural-search-anim-modal .bdl-telecode-anim-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* Neural Search: ensure inner frame fills available content area */
#neural-search-anim-modal .bdl-ns-anim-container,
#neural-search-anim-modal #bdl-ns-frame-modal {
    width: 100%;
    height: 100%;
}
.bdl-telecode-anim-close {
    position: absolute;
    top: 6px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15,23,42,0.18);
    color: #64748b;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    z-index: 150;
}
.bdl-telecode-anim-close:hover {
    background: #fee2e2;
    color: #b91c1c;
    transform: translateY(-1px);
}

.bdl-telecode-anim-modal .bdl-telecode-anim-box-wrap .bdl-telecode-anim-container {
    display: flex !important;
    visibility: visible !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
}
.bdl-telecode-anim-modal .bdl-telecode-anim-box-wrap .animation-nav-btn {
    display: none;
}
.bdl-telecode-anim-modal .bdl-telecode-anim-box-wrap .animation-box {
    flex: 1;
    height: 100%;
    max-width: 850px;
}
/* Data Port modal: ensure wrapper and animation box fill 850×450 and are visible */
#data-port-anim-modal .bdl-telecode-anim-box-wrap {
    width: 850px;
    height: 450px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
}
#data-port-anim-modal .bdl-telecode-anim-box-wrap .bdl-dataport-anim-container,
#data-port-anim-modal .bdl-telecode-anim-box-wrap #animation-box-data-port-modal {
    width: 100%;
    height: 100%;
    min-height: 0;
}
.bdl-telecode-anim-modal .bdl-telecode-anim-box-wrap #animation-box-tele-code-modal .container-card-2 {
    width: 100%;
    height: 100%;
    max-width: 850px;
    max-height: 450px;
}