/* ==========================================================
   DHANBHUMI AI
   Motion System v1.0
   ----------------------------------------------------------
   Purpose : Premium Workspace Animation Engine
========================================================== */


/* ==========================================================
   Motion Variables
========================================================== */

:root {
    --ai-duration-fast: .25s;
    --ai-duration-normal: .45s;
    --ai-duration-slow: .65s;

    --ai-ease: cubic-bezier(.22, 1, .36, 1);
}


/* ==========================================================
   Performance
========================================================== */

#ask-ai-modal,
#ask-ai-container,
#ask-ai-backdrop,
#ask-ai-left-sidebar,
#ask-ai-center-header,
#ask-ai-center-scroll,
#ask-ai-bottom-bar,
#ai-logo,
#ai-title,
#ai-subtitle,
#ai-status,
#ai-search-box,
#ai-chips,
#ai-task-heading,
#ai-cards {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}


/* ==========================================================
   Modal
========================================================== */

#ask-ai-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;

    font-family: "Plus Jakarta Sans", sans-serif;
}

.ai-transition-locked {
    pointer-events: none !important;
}


/* ==========================================================
   Backdrop
========================================================== */

#ask-ai-backdrop {
    position: absolute;
    inset: 0;

    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, .30);
    cursor: default;

    opacity: 0;

    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}


/* ==========================================================
   Workspace Container
========================================================== */

#ask-ai-container {
    position: relative;

    width: min(1380px, 95vw);
    height: min(850px, 92vh);

    background: #F8F6F1;

    border-radius: 24px;
    overflow: hidden;

    border: 1px solid #E7DFC9;

    display: flex;
    flex-direction: column;

    box-shadow: 0 40px 80px rgba(0, 0, 0, .18);

    transform-origin: center center;
}


/* ==========================================================
   Initial Hidden State
========================================================== */

#ask-ai-container,
#ask-ai-left-sidebar,
#ask-ai-center-header,
#ask-ai-center-scroll,
#ask-ai-bottom-bar {
    opacity: 0;
}


/* ==========================================================
   Initial Transform State
========================================================== */

#ask-ai-container {
    transform: scale(.96) translateY(35px);
}

#ask-ai-left-sidebar {
    transform: translateX(-30px);
}

#ask-ai-center-header {
    transform: translateY(-25px);
}

#ask-ai-center-scroll {
    transform: translateY(25px);
}

#ask-ai-bottom-bar {
    transform: translateY(35px);
}


/* ==========================================================
   Welcome Screen Initial State
   GSAP will animate these elements
========================================================== */

#ai-logo,
#ai-title,
#ai-subtitle,
#ai-status,
#ai-search-box,
#ai-chips,
#ai-task-heading,
#ai-cards {
    opacity: 0;
}


/* ==========================================================
   AI Cards Children Initial State
========================================================== */

#ai-cards > * {
    opacity: 0;
    transform: translateY(18px) scale(.98);
}


/* ==========================================================
   Suggestion Chips Children Initial State
========================================================== */

#ai-chips > * {
    opacity: 0;
    transform: translateY(12px) scale(.96);
}


/* ==========================================================
   GPU Helpers
========================================================== */

.ai-gpu {
    transform: translateZ(0);
    backface-visibility: hidden;
}


/* ==========================================================
   Utility Classes
========================================================== */

.ai-hidden {
    opacity: 0;
}

.ai-visible {
    opacity: 1;
}

.ai-scale {
    transform: scale(1);
}

.ai-slide-up {
    transform: translateY(0);
}

.ai-slide-right {
    transform: translateX(0);
}


/* ==========================================================
   Loading / Interaction Lock
========================================================== */

.ai-loading {
    pointer-events: none;
}

.ai-no-scroll {
    overflow: hidden;
}


/* ==========================================================
   Reduced Motion
========================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    #ask-ai-container,
    #ask-ai-left-sidebar,
    #ask-ai-center-header,
    #ask-ai-center-scroll,
    #ask-ai-bottom-bar,
    #ai-logo,
    #ai-title,
    #ai-subtitle,
    #ai-status,
    #ai-search-box,
    #ai-chips,
    #ai-task-heading,
    #ai-cards,
    #ai-cards > *,
    #ai-chips > * {
        opacity: 1 !important;
        transform: none !important;
    }

    #ask-ai-backdrop {
        opacity: 1 !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}


/* ==========================================================
   Button to Modal Morph Effect
========================================================== */

.ai-launching #ask-ai-modal {
    display: flex !important;
}

#ask-ai-backdrop {
    transition: none;
}

/* Glass modal look during animation */
#ask-ai-container {
    background: rgba(248, 246, 241, 0.88);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

/* Premium glow on modal */
#ask-ai-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 45% 18%, rgba(184, 138, 45, 0.22), transparent 26%),
        radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.75), transparent 22%);
    opacity: 0;
    z-index: 1;
}

#ask-ai-container.ai-glow-on::before {
    opacity: 1;
    animation: aiGlassGlow 1.2s ease forwards;
}

@keyframes aiGlassGlow {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }

    45% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0.45;
    }
}

/* Sparkle particles */
.ai-sparkle-particle {
    position: fixed;
    width: 7px;
    height: 7px;
    pointer-events: none;
    z-index: 100001;
    color: #B88A2D;
    transform: translate(-50%, -50%);
}

.ai-sparkle-particle::before {
    content: "✦";
    font-size: 14px;
    line-height: 1;
}

/* ==========================================================
   Simple Search Bar to Modal Morph Transition
   No glass, no glow, only transition
========================================================== */

.ai-morph-layer {
    position: fixed;
    z-index: 100000;
    pointer-events: none;

    background: #F8F6F1;
    border: 1px solid #E7DFC9;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.18);

    overflow: hidden;
}

#ask-ai-container {
    background: #F8F6F1;
}