/* --- 1. THE SIDEBAR & MAIN WEBSITE SPLIT --- */

body {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Prevents double scrollbars on the whole page */
}

#main-content {
    flex: 1;
    height: 100vh;
    overflow-y: auto; /* Independent scroll for your website */
    position: relative;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Keeps it smooth on mobile */
}

/*@media screen and (max-width: 768px) {
    #main-content {
        /* THE ARMOR */
    /*    width: 100vw !important;     
    /*    min-width: 100vw !important; 
    /*    flex-shrink: 0 !important;   /* STOP the 'Black Screen' collapse */
    /*}
}*/

@media screen and (max-width: 768px) {
    #main-content {
        /* THE ARMOR */
        width: 100vw !important;     
        min-width: 100vw !important; 
        flex-shrink: 0 !important;   /* STOP the 'Black Screen' collapse */
    }
}


/* --- 1. THE MAIN CONTAINER --- */

/* --- CURSOR PRIORITY FIX --- */
/* Ensure the custom cursor elements sit above the sidebar */
.custom-cursor,
.cursor-follower,
.cursor-tooltip {
    z-index: 100000 !important; /* One level higher than the sidebar's 999999 */
    pointer-events: none !important; /* CRITICAL: Prevents the cursor from "blocking" your ability to click buttons */
}

.sri-ai-sidebar {
    cursor: none !important; /* Hides the default system arrow */
}

/* --- 1. MAIN CONTAINER --- */
.sri-ai-sidebar {
    position: fixed;
    /*top: 0;*/
    /* right: -380px;  Hide it exactly by its width */
    /*left: auto !important; /* Force it off the left side */
    position: relative !important; /* NOT fixed */
    width: 0; /* Starts at zero so website is full-screen */
    height: 100vh !important;
    background: #070707;
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* Prevents the sidebar from squishing */
    /* THE SMOOTHNESS ENGINE */
    /* 0.6s is the duration. The numbers in brackets create a 'Quintic' deceleration. */
    transition: right 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease;
    
    /* Start slightly transparent for a 'fade-in' feel */
    opacity: 0; 
    pointer-events: none;
    overflow: hidden;
}

/* THE TRIGGER */
body.sidebar-active .sri-ai-sidebar {
    width: 380px !important; /* The 'Push' width */
    opacity: 1;
    pointer-events: auto;
    border-left: 1px solid #242424;
    right: 0 !important;
}

/* --- 2. HEADER & CLOSE BUTTON (Fixes White Box) --- */
.sidebar-header {
    background: #070707;
    padding: 24px; /* Exact Figma padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.close-sidebar {
    background: transparent !important; /* Kills white box */
    border: none !important;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
}

/* --- 3. WORK AREA & TYPOGRAPHY --- */
.sidebar-work-area {
    background: #0F0F0F;
    flex: 1;
    padding: 0 24px 40px; /* 24px side padding */
    display: flex;
    min-height: 0; /* CRITICAL: Allows the div to shrink and scroll instead of expanding */
    flex-direction: column;
    overflow-y: auto !important; /* Forces the internal scrollbar */
    -webkit-overflow-scrolling: touch; /* Makes scrolling smooth on trackpads/mobile */
}

.welcome-section h1 {
    font-family: 'Albert Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 40px 0 12px 0; /* 40px gap from top */
}

.welcome-section h1 span {
    color: #F9A8FF;
}

.welcome-section p {
    font-family: 'Albert Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #676767;
    margin-bottom: 20px; /* 40px gap to first card */
}

/* --- 4. SUGGESTION CARDS (Internal Spacing) --- */
.suggestion-grid {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 12px gap between cards */
}

.suggest-card {
    background: #070707;
    border: 1px solid #141414;
    border-radius: 12px;
    padding: 16px; /* Exact internal padding */
    text-align: left;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suggest-card:hover {
    border-color: #AE4BFF;
    background: #121212;
}

/* --- 5. CARD ICON FIX (Path Update) --- */
.card-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: filter 0.3s ease; /* Smooth transition for the color change */
}

/* --- CARD HEADER SPACING --- */
.card-header {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #F9A8FF; /* Brand Pink */
    transition: color 0.3s ease;
}

/* --- THE HOVER TRICK --- */
.suggest-card:hover {
    border-color: #1D1C1D;
    background: #0E0E0E;
}

.suggest-card:hover .card-label {
    color: #FCD2FF; /* Label turns white */
}

.card-label {
    font-family: 'Albert Sans', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    font-weight: 600;
}

.card-text {
    font-family: 'Albert Sans', sans-serif;
    font-size: 16px;
    color: #E5E2E1;
    margin: 0;
}

.suggest-card:hover .card-header {
    color: #F9A8FF;
}

/* --- SIDEBAR FOOTER: The Black Strip --- */



/* --- SIDEBAR FOOTER (NO PADDING) --- */
.sidebar-footer {
    width: 100%;
    background: #070707; /* The solid black strip */
    padding: 0 !important; /* Removes the gap at the sides */
    display: flex;
    flex-direction: column;
    border-top: 1px solid #242424;
    box-sizing: border-box;
}

/* --- INPUT FIELD MARGINS & STYLE --- */
.input-container {
    margin: 24px 24px 0 24px; /* 24px top gap, 24px sides */
    background: #121213; /* Exact hex */
    border: 1px solid #363136;
    border-radius: 12px;
    padding: 8px 8px 8px 16px; /* Internal padding only for the text/button */
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

#chatInput {
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-family: 'Albert Sans', sans-serif;
    font-size: 16px;
    width: 100%;
}

/* --- DISCLAIMER SPACING --- */
.disclaimer {
    font-family: 'Albert Sans', sans-serif;
    font-size: 10px; /* */
    color: #383838;
    text-align: center;
    margin: 16px 24px 24px 24px; /* 16px gap from input, 24px bottom */
    font-weight: 500;
    letter-spacing: 0.8px;
}

/* --- SEND BUTTON --- */
.send-btn {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #9a1fff 0%, #310393 100%);
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.send-btn img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1); /* Makes ic_arrow.svg white */
}


/* Ensure the roadmap item has a defined 'active' state */
.ai-sidebar-item.roadmap {
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  min-height: 44px; /* WCAG 2.2 Touch Target  */
}

/* Temporary 'In-Progress' state to guide the user */
.ai-sidebar-item.roadmap:active::after {
  content: "UI Loading: Exploring the future of srinivas.design...";
  font-size: 12px;
  color: #B026FF; /* Your Neon Purple */
  display: block;
  margin-top: 8px;
}


/* --- PHASE 2: ACTIVE CHAT BUBBLES --- */

/* This class will be added to the sidebar when the first message is sent */
.sri-ai-sidebar.chat-active .welcome-section,
.sri-ai-sidebar.chat-active .suggestion-grid {
    display: none; /* Hides the intro content */
}

/* Container for the scrolling conversation */
#chat-history {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 0;
}

/* 1. The Container: This ensures the 24px padding from your sidebar edges */
#chat-output {
    display: flex;
    flex-direction: column;
    gap: 16px; 
    padding: 24px 0 0 0; /* 24px top, 0 sides, 0 bottom */
}

/* 2. User Bubble: Pinned to the Right */
.user-cluster {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 60px; /* Creates the offset look on the left */
    max-width: 100%;
    justify-content: flex-end; /* Bubbles touch the right yellow line */
}

.user-bubble {
    background: #151515;
    border: 1px solid #1C1C1C;
    /* Figma: 16px radius, but 0px on bottom-right */
    border-radius: 16px 16px 0px 16px; 
    padding: 8px 16px;
    color: #E5E2E1;
    font-family: 'Albert Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    word-wrap: break-word; /* Prevents text from breaking the bubble */
}

/* 3. AI Bubble: Pinned to the Left */
.ai-cluster {
    align-self: flex-start;
    display: flex;
    gap: 12px; /* 12px distance from logo to bubble */
    margin-right: 40px; /* Creates the offset on the right */
    max-width: 100%;
    justify-content: flex-start; /* Bubbles touch the left yellow line */
}

.ai-bubble {
    background: #171417;
    border: 1px solid #301A31;
    /* Figma: 16px radius, but 0px on top-left */
    border-radius: 0px 16px 16px 16px; 
    padding: 8px 16px;
    color: #FEECFF;
    font-family: 'Albert Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    width: fit-content; /* CRITICAL: Prevents the bubble from stretching to 100% width */
    max-width: 270px;   /* Figma constraint */
}

/* 2. highlighted Bold word colors */
.ai-highlight {
    color: #A064FF; /* Your signature Neon Purple */
    font-weight: 700;
    /* Optional: subtle glow to match your 'Strategist' aesthetic */
    text-shadow: 0 0 8px rgba(176, 38, 255, 0.3); 
}

/* 4. Timestamp: Positioned relative to the cluster */
.timestamp {
    font-size: 10px;
    color: #676767;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 6px;
    font-family: 'Albert Sans', sans-serif;
}

/* --- 5. LOGO & LOADING ANIMATION --- */
.ai-logo-circle {
    width: 40px;
    height: 40px;
    background: #151415;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.ai-logo-img {
    width: 32px;
    height: 32px;
    z-index: 2;
}

/* The Internal Glow */
.loading .ai-logo-circle::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(174, 75, 255, 0.);
    animation: glow-pulse 1.5s infinite ease-in-out;
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.4; box-shadow: inset 0 0 5px rgba(174, 75, 255, 0.4); }
    50% { opacity: 1; box-shadow: inset 0 0 15px rgba(174, 75, 255, 0.8); }
}

/* Smoothly fade content in when loading finishes */
.ai-bubble {
    transition: background 0.3s ease, border 0.3s ease;
}

/* Ensure the loading star rotates slightly or pulses */
.loading .ai-logo-img {
    animation: star-pulse 2s infinite ease-in-out;
}

@keyframes star-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* --- 6. SKELETON LOADER --- */

/* Update this in sri-ai.css */
.loading .ai-logo-circle::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* Pink/Purple glow to match ic_loading-logo.svg */
    box-shadow: inset 0 0 12px rgba(110, 36, 117, 0.6); 
    animation: glow-pulse 1.5s infinite ease-in-out;
    z-index: 1;
}

.ai-logo-img {
    position: relative;
    width: 20px;
    height: 20px;
    z-index: 2; /* Ensures the SVG sits on top of the glow */
}

.skeleton-line {
    height: 10px;
    background: #242424;
    border-radius: 5px;
    margin: 8px 0;
    width: 100%;
    animation: shimmer 1.5s infinite linear;
    background: linear-gradient(90deg, #4c2b50 0%, #2d0830 52.4%, #4c2b50 80%);
    background-size: 200% 100%;
}

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

/* --- 6. SIDEBAR SCROLLBAR --- */

.sidebar-work-area {
    flex: 1;
    overflow-y: auto; /* Enables the scrollbar */
    display: flex;
    flex-direction: column;
    /* Custom scrollbar matching your premium UI */
    scrollbar-width: thin; 
    scrollbar-color: #242424 transparent;
}

/* Custom Scrollbar for Chrome/Safari */
.sidebar-work-area::-webkit-scrollbar {
    width: 4px;
}

.sidebar-work-area::-webkit-scrollbar-thumb {
    background: #242424; 
    border-radius: 10px;
}



/* Ensure responsiveness on smaller screens [cite: 20] */
@media (max-width: 768px) {
  .ai-sidebar-container {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 100;
  }
}


/* =========================================
   SIDEBAR SMOOTH OPENING AND CLOSING 
   ========================================= */

@media (max-width: 768px) {
    .sri-ai-sidebar {
        position: fixed !important; /* Switch from 'Push' to 'Overlay' on mobile */
        top: 0;
        right: -100% !important; /* Hide off-screen */
        width: 100% !important;  /* Full screen width on mobile */
        z-index: 100002;
    }

    /* The Trigger for mobile */
    body.sidebar-active .sri-ai-sidebar {
        right: 0 !important;
        opacity: 1;
    }
}