/* ==========================================================================
    1. CSS RESET & BASE
    ========================================================================== */
    
    * {
        box-sizing: border-box
    }


    html {
        font-size: 16px; /* Base font size */
    }

    body{
        background-color: var(--primary-50);
        font-family: var(--font-family-base);
    }

    /* CHAT.html */
    body{
        display: flex;
        overflow: hidden;
        margin: 0;
    }

    body.dragging {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    /* CHAT.html */
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-family-base);
        font-weight: var(--font-weight-300);
        line-height: var(--line-height-tight);
        margin-bottom: var(--space-4);
    }

    h1 { font-size: var(--font-size-4xl); }
    h2 { font-size: var(--font-size-3xl); }
    h3 { font-size: var(--font-size-2xl); }
    h4 { font-size: var(--font-size-xl); }
    h5 { font-size: var(--font-size-lg); }
    h6 { font-size: var(--font-size-base); }

    p {
        margin-bottom: var(--space-4);
        line-height: var(--line-height-base);
    }

    button, 
    input[type="button"], 
    input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: inherit; 
    background: none; 
    font-family: inherit;
    }



/* ==========================================================================
   2. CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */

    @font-face {
        font-family: 'Playwrite HU';
        src: url('fonts/Playwrite_HU/PlaywriteHU-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 900; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        font-family: 'Libertinus Sans';
        src: url('fonts/Libertinus_Sans/LibertinusSans-Regular.ttf') format('truetype');
        font-weight: 100 900; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        font-family: 'Cinzel';
        src: url('fonts/Cinzel/Cinzel-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 900; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        font-family: 'garet-book';
        src: url('fonts/garet/Garet-Book.ttf') format('truetype');
        font-weight: 100 900; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        font-family: 'garet-heavy';
        src: url('fonts/garet/Garet-Heavy.ttf') format('truetype');
        font-weight: 100 900; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        /* JetBrainsMono-VariableFont_wght */
        font-family: 'JetBrains Mono';
        src: url('fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 800; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        font-family: 'JetBrains Mono';
        src: url('fonts/JetBrains_Mono/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 800; /* tells browser the range it supports */
        font-style: italic;
    }

    @font-face {
        /* JetBrainsMono-VariableFont_wght */
        font-family: 'JetBrains Mono';
        src: url('fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 800; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        font-family: 'JetBrains Mono';
        src: url('fonts/JetBrains_Mono/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 800; /* tells browser the range it supports */
        font-style: italic;
    }

    :root {
        /* ===== SPACING SCALE ===== */
        /* Spacing scale in rem for consistent, responsive design */
        --space-0: 0;
        --space-4: 0.25rem;   /* 4px */
        --space-8: 0.5rem;    /* 8px */
        --space-12: 0.75rem;   /* 12px */
        --space-16: 1rem;      /* 16px */
        --space-20: 1.25rem;   /* 20px */
        --space-24: 1.5rem;    /* 24px */
        --space-32: 2rem;      /* 32px */
        --space-48: 3rem;     /* 48px */
        --space-64: 4rem;     /* 64px */
        --space-96: 6rem;     /* 96px */
        --space-128: 8rem;     /* 128px */
        --space-192: 12rem;     /* 128px */
        --space-256: 16rem;     /* 256px */
        --space-384: 24rem;     /* 384px */
        --space-512: 32rem;     /* 512px */
        --space-640: 40rem;     /* 640px */
        --space-768: 48rem;     /* 768px */

        /* ===== NEGATIVE SPACING SCALE ===== */
        /* Spacing scale in rem for consistent, responsive design */
        --space-neg-0: 0;
        --space-neg-4: -0.25rem;   /* 4px */
        --space-neg-8: -0.5rem;    /* 8px */
        --space-neg-12: -0.75rem;   /* 12px */
        --space-neg-16: -1rem;      /* 16px */
        --space-neg-20: -1.25rem;   /* 20px */
        --space-neg-24: -1.5rem;    /* 24px */
        --space-neg-32: -2rem;      /* 32px */
        --space-neg-48: -3rem;     /* 48px */
        --space-neg-64: -4rem;     /* 64px */
        --space-neg-96: -6rem;     /* 96px */
        --space-neg-128: -8rem;     /* 128px */
        --space-neg-192: -12rem;     /* 128px */
        --space-neg-256: -16rem;     /* 256px */
        --space-neg-384: -24rem;     /* 384px */
        --space-neg-512: -32rem;     /* 512px */
        --space-neg-640: -40rem;     /* 640px */
        --space-neg-768: -48rem;     /* 768px */

        /* ===== FONT SIZES ===== */
        --font-size-xs: 0.75rem;    /* 12px */
        --font-size-sm: 0.875rem;   /* 14px */
        --font-size-base: 1rem;     /* 16px */
        --font-size-lg: 1.125rem;   /* 18px */
        --font-size-xl: 1.25rem;    /* 20px */
        --font-size-2xl: 1.5rem;    /* 24px */
        --font-size-3xl: 1.875rem;  /* 30px */
        --font-size-4xl: 2.25rem;   /* 36px */
        --font-size-5xl: 3rem;      /* 48px */
        --font-size-6xl: 3.75rem;   /* 60px */
        --font-size-7xl: 4.5rem;      /* 72px */

        /* ===== FONT WEIGHTS ===== */
        --font-weight-100: 100;
        --font-weight-200: 200;
        --font-weight-300: 300;
        --font-weight-400: 400;
        --font-weight-500: 500;
        --font-weight-600: 600;
        --font-weight-700: 700;
        --font-weight-800: 800;
        --font-weight-900: 900;

        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;

        /* ===== FONT FAMILIES ===== */
        --font-family-base:  -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        --font-family-mono: 'Fira Code', 'Monaco', 'Cascadia Code', monospace;
        /* 'Inter', */

        /* ===== LETTER SPACING ===== */
        --letter-spacing-base: normal;
        --letter-spacing-xs: 0.02rem; 
        --letter-spacing-sm: 0.04rem; 
        --letter-spacing-sm2: 0.1rem; 


        /* ===== LINE HEIGHTS ===== */
        --line-height-tight: 1.25;
        --line-height-base: 1.5;
        --line-height-relaxed: 1.75;

        /* ===== GRAY SCALE ===== */
        --white: hsl(0, 0%, 100%);
        --gray-50: hsl(210, 27%, 98%);
        --gray-100: hsl(220, 14%, 96%);
        --gray-200: hsl(220, 13%, 91%);
        --gray-300: hsl(220, 9%, 83%);
        --gray-400: hsl(220, 8%, 64%);
        --gray-500: hsl(220, 7%, 46%);
        --gray-600: hsl(220, 10%, 36%);
        --gray-700: hsl(220, 14%, 28%);
        --gray-800: hsl(220, 20%, 17%);
        --gray-900: hsl(220, 25%, 12%);
        --black: hsl(0, 0%, 0%);

        /* ===== PRIMARY COLORS ===== */
        --primary-50: #F4F3EE;
        --primary-100: #C15F3C;
        --primary-200: #B1ADA1;
        --primary-300: hsl(48, 33.3%, 97.1%);
        --primary-400: hsl(53, 28.6%, 94.5%);
        --primary-500: hsl(48, 25%, 92.2%);  /* Main primary */
        --primary-600: hsl(50, 20.7%, 88.6%);
        --primary-700: #1d4ed8;
        --primary-800: #1e40af;
        --primary-900: #1e3a8a;
        --primary-950: #4ecdc4;


        --dark-50: hsl(60, 2.1%, 18.4%);
        --dark-100: hsl(60, 2.1%, 18.4%);
        --dark-200: hsl(60, 2.7%, 14.5%);
        --dark-300: hsl(30, 3.3%, 11.8%);
        --dark-400: hsl(60, 2.6%, 7.6%);
        --dark-500: hsl(48, 25%, 92.2%);  /* Main primary */
        --dark-600: hsl(48, 33.3%, 97.1%);
        --dark-700: hsl(48, 4.8%, 59.2%);


        --danger-000: hsl(0 73.1% 66.5%);
        --danger-100: hsl(0 58.6% 34.1%);
        --danger-200: hsl(0 58.6% 34.1%);
        --danger-900: hsl(0 23% 15.6%);
        --oncolor-100: hsl(0 0% 100%);
        --oncolor-200: hsl(60 6.7% 97.1%);
        --oncolor-300: hsl(60 6.7% 97.1%);


        /* ===== SEMANTIC COLORS ===== */
        --success: #10b981;
        --warning: #f59e0b;
        --error: #ef4444;
        --info: #3b82f6;

        /* ── Onboarding colours  ── */
        --ot-overlay:   rgba(28, 25, 23, 0.6);
        --ot-tip-bg:    #1c1917;
        --ot-tip-text:  #faf7f2;
        --ot-tip-muted: #a8a29e;
        --ot-btn-bg:    #c96c3a;
        --ot-btn-text:  #ffffff;
        --ot-ring:      #c96c3a;

        /* ===== BORDER RADIUS ===== */
        --radius-sm: 0.25rem;   /* 4px */
        --radius-base: 0.5rem;  /* 8px */
        --radius-lg: 0.75rem;   /* 12px */
        --radius-xl: 1rem;      /* 16px */
        --radius-2xl: 1.5rem;    /* 24px */
        --radius-3xl: 2rem;      /* 32px */
        --radius-4xl: 3rem;      /* 48px */
        --radius-full: 9999px;

        /* ===== SHADOWS ===== */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);


        --shadow-direct-light: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        --shadow-ambinent-light: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);

        /* ==== TEXT SHADOW ==== */
        --text-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
        --text-shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1),
                            0 1px 2px rgba(0, 0, 0, 0.06);
        --text-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1),
                        0 4px 6px rgba(0, 0, 0, 0.05);
        --text-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1),
                        0 10px 10px rgba(0, 0, 0, 0.04);


        /* ===== TRANSITIONS ===== */
        --transition-fast: 150ms ease;
        --transition-base: 300ms ease;
        --transition-slow: 500ms ease;
    }





   
/* ==========================================================================
   3. TYPOGRAPHY COMPONENTS
   ========================================================================== */

    .playwrite-hu {
        font-family: "Playwrite HU", cursive;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }

    .libertinus-sans {
        font-family: "Libertinus Sans", cursive;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }

    .jetBrains-mono {
        font-family: "JetBrains Mono", cursive;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;

    }

    .cinzel {
        font-family: "Cinzel", cursive;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;

    }

    .garet-book {
        font-family: "garet-book", cursive;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;

    }

    .garet-heavy {
        font-family: "garet-heavy", cursive;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;

    }

    label {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-200);
    }

    .title{
        text-align: center;
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-semibold);
        margin-top: var(--space-8);
        margin-bottom: var(--space-32);
        font-weight: var(--font-weight-300);
    }

    .title-h2{
        /* text-align: center; */
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-semibold);
        margin-top: var(--space-32);
        margin-bottom: var(--space-48);
        font-weight: var(--font-weight-300);
    }

    .subtitle{
        /* text-align: center; */
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-300);
        margin-top: var(--space-32);
        margin-bottom: var(--space-24);
        color: var(--gray-800);

    }

    .font-sample{
        display: flex;
        align-items: baseline;
        gap: var(--space-8);
        line-height: var(--line-height-relaxed);
        font-weight: var(--font-weight-300);
    }

    .font-text{
        font-family: var(--font-family-base);
        color: var(--gray-900);
        font-weight: var(--font-weight-300);
    }

    /* frontpage.html */
    .font-shadow{
        text-shadow: var(--text-shadow-base);
    }

    .front-body{
        margin: 0;
        padding: 0;
        /* width: 100vw; */
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto; 
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 120vh;
        max-height: 120dvh;
    }

    .font-5xl{
        font-size: var(--font-size-5xl)
    }

     .flex{
        display: flex;
    }
    .align-items-center{ 
        align-items: center;
    }

    .justify-content-center{
        justify-content: center;
    }
    .flex-direction{
        flex-direction: column;
    }

    .letter-spacing-xs{
        letter-spacing:  var(--letter-spacing-sm2);
    }

    .conversation-box{
        width: 300px;
        height: 150px;
        background-color: aquamarine;
        border: 1px var(--gray-500) solid;
    }

    .slogan-text{
        transform: translateY(var(--space-neg-12));
    }


    /* chat.html */
    .setting-text{
            padding: var(--space-8) var(--space-32);
        }

    .setting-label-text{
        position: absolute;
        top: var(--space-8);
        left: var(--space-16);
        font-size: var(--font-size-sm);
        font-weight: 300;
        letter-spacing: var(--letter-spacing-sm2);
    }


    .mt-1 { margin-top: var(--space-4); }
    .mt-8 { margin-top: var(--space-32); }

    .mb-1 { margin-bottom: var(--space-4); }

    .ml-6 {margin-left: var(--space-24);}
    .ml-8 {margin-left: var(--space-32);}

    .mr-6 {margin-right: var(--space-24);}
    .mr-8 {margin-right: var(--space-32);}

    .pt-1 { padding-top: var(--space-4); }
    .pb-1 { padding-bottom: var(--space-4); }


/* ==========================================================================
    4. LAYOUT COMPONENTS 
   ========================================================================== */
    
   .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--space-4);

    }

   /* .center-container{
        display: flex;
        align-items: center;
        padding: 0 var(--space-16);
        width: 100%; 
        justify-content: center;
    } */

    .swatch-container {
        display: flex;
        gap: var(--space-16);
        padding-left: var(--space-32);
        justify-content: center;
    }

    .svg-container {
        display: flex;
        margin: 0 auto;
    }

    .font-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--space-32);
    }


    .table-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;

        font-family: var(--font-family-base);
        font-weight: var(--font-weight-200);
    }

    /* CHAT.html */

    .flex {
        display: flex;
    }
    
    .justify-content-center{
        justify-content: center;
    }
    .flex.justify-content-center{
        flex: 1;
        min-width: 500px;
        overflow-y: auto;
        container-name: leftcontainer;
        container-type: inline-size;
        overflow-x: hidden;
        transition: all 0.1s ease;
        /* background-color: aquamarine; */
    }

    .top-bar-container{
        position: sticky;
        top: 0;
        max-width: 800px;
        width: 100%;
        background-color: var(--primary-50);  
        z-index: 99;
    }

    .top-bar-container-inner{
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: baseline;
        z-index: 99;
    }

    .main-diaglog{
        /* flex: 1; */
        /* display: flex; */
        /* flex-direction: column; */
        position: relative;
        max-width: 840px;
        height: 100vh;
        height: 100dvh;
        width: 100%;
    }

    .conversation-container{
        max-width: 800px;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        
        box-sizing: border-box;
        overflow-y: auto;

        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none; 

    }

    .conversation-container::-webkit-scrollbar {
        display: none;
    }


    .artifest-container{
        height: 100vh;
        height: 100dvh;
        width: 50vw;
        min-width: 300px;
        max-width: calc(100vw - 100px);

        background-color: var(--gray-100);
        overflow-y: auto;

        opacity: 1;
        transform: translateX(0);
        transition: opacity 0.3s ease, transform 0.3s ease;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23b1ada1' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .artifest-container.hidden {
        opacity: 0;
        width: 0px;
        transform: translateX(100%);
        pointer-events: none; 
        display: none;
    }

    .artifest-content{
        padding: var(--space-32);
        min-width: 500px;
        display: flex;
        flex-direction: column;
    }

    /* CHAT.html */


/* ==========================================================================
   5. COMPONENT CLASSES
   ========================================================================== */

   /* index.html */
    .swatch {
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }


    .box {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 6px;
        margin-bottom: var(--space-16);
        border: 1px solid #ccc;
    }
    /* index.html */


    .btn-send{
        align-self: center;
        background-color: var(--primary-100);
        padding: var(--space-8) var(--space-12);
        border-radius: var(--radius-full);
        
        box-shadow: var(--shadow-direct-light);
        cursor: pointer;
    }

    .btn-send{
        background-color: var(--gray-500);
        transition: transform 0.05s ease-out;
    }

    @keyframes reveal {
        0% { clip-path: inset(100% 0 0 0); }
        100% { clip-path: inset(0 0 0 0); }
    }

    .btn-send:hover .hw{
        animation: reveal 0.8s ease-out;
    }

    .btn-send:hover{
        transform: scale(1.05);
    }

    .hw{
        height: 16px;
        width: 16px;
        color: var(--white);
    }

    /* chat.html */
    .top-bar-title-text, .steps-top-text{
        /* margin: auto auto; */
        color: var(--gray-900);
        font-size: var(--font-size-xl);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* number of lines to show */
                line-clamp: 1; 
        -webkit-box-orient: vertical;
    }

    .steps-top-text{
        margin-top: var(--space-4);
    }

    .top-bar-full-title{
        position: absolute;
        bottom: var(--space-neg-32);
        left: 16px;
        text-align: center;
        background-color: hsla(240, 4%, 28%, 0.7);
        border-radius: var(--radius-sm);
        color: var(--gray-50);
        padding: var(--space-4);
    }

    .top-bar-right-container{
        color: var(--gray-900);
        font-size: var(--font-size-sm);
        display: flex;
        gap: var(--space-16);
        align-items: center;
    }

    .black-background{
        display: none;
    }

    #history-chat-display{
        display: none;
        position: relative;
    }

     #config-display{
            display: none;
            position: relative;
    }

    .input-plus-display{
        display: none;
        position: relative;
    }

    .addInputBtn{
        font-weight: var(--font-weight-600);
        background-color: var(--primary-100);
        color: var(--primary-50);
        padding: var(--space-12) var(--space-24);
        border-radius: var(--radius-lg);
        cursor: pointer;
    }

    .config-box{
        position: absolute;
        top: var(--space-48);
        right:var(--space-4);
        z-index: 111;

        transform-origin: top right;
        
        /* Initial state - hidden and scaled down */
        transform: scale(0);
        opacity: 0;
        
        /* Transition properties */
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.4s ease-out;
    }

    .config-box.show {
        transform: scale(1);
        opacity: 1;
    }

    .config-container{
        background-color: var(--primary-600);
        border-radius: var(--radius-xl);
        padding: var(--space-16) var(--space-24);
        font-weight: var(--font-weight-300);
    }

    .config-title{
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-400);
        /* transform: translateX(var(--space-neg-8)); */

    }

    .config-row{
        display: flex;
        gap: var(--space-20);
        margin: var(--space-12) 0;
    }

    .config-row.head{
        gap: var(--space-4);
        color: var(--dark-700);
    }

    .config-row.head .config-title{
        color: var(--dark-700);
    }

    .config-row:has(.addInputBtn){
        justify-content: end;
        
    }

    .config-item{
        flex: 1;
        text-align: center;
        align-self: center;
        font-size: var(--font-size-base);
        text-shadow: var(--text-shadow-sm);
    }

    /* New: Side Panel */

    .history-container {
        margin-top: var(--space-12);
        max-height: calc(2 * 3rem); 
        overflow-y: auto;
        border-radius: 8px;
        padding: 4px;
    }

    .config-chat{
        flex: 1;
        text-align: start;
        align-self: flex-start;
        color: var(--primary-100);
        font-size: var(--font-size-lg);
        font-weight: 900;
    }

    .config-history{
        flex: 1;
        padding-left: var(--space-16);
        text-align: start;
        align-self: flex-start;
    }

    /* New: End */

    .config-input, .selection-box{
        width: var(--space-192);
        background-color:var(--primary-50);
        padding: var(--space-12) var(--space-20);
        border: transparent;
        font-family:  var(--font-family-base);
        text-align: center;
        font-weight: var(--font-weight-300);
        border-radius: var(--radius-sm);
    }

     .config-input:focus{
        width: var(--space-192);
        background-color:var(--primary-50);
        padding: var(--space-12) var(--space-24);
        border: transparent;
        font-family:  var(--font-family-base);
        text-align: center;
        font-weight: var(--font-weight-300);
        border: 0px solid #555;
        outline: 1px solid var(--primary-100);
    }

    button.config-input {
        border-radius: 12px;
        background: linear-gradient(90deg, #d2b48c, #C15F3C);
        color: #ffffff;
        font-weight: 500;
        letter-spacing: 0.3px;
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .code-config{
        cursor: pointer;
    }

    .setting-svg{
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .diag-container {
        max-width: 500px;
        margin: 0 auto;
        padding: var(--space-16) var(--space-16);
        line-height: var(--line-height-base);
        font-weight: var(--font-weight-400);
        border-radius: var(--radius-lg);
        color: var(--gray-700);
        background-color: var(--primary-600);
    }

    .diag-container-v1 { 
        position: relative;

        max-width: 80%;
        width: fit-content;

        /* margin: var(--space-32)  var(--space-16) 0 auto; */
        margin: 0  var(--space-16) 0 auto;
        padding: var(--space-16) var(--space-32);

        border-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-sm);

        text-align: start;
        line-height: var(--line-height-relaxed);
        font-weight: var(--font-weight-400);
        letter-spacing: var(--letter-spacing-xs);

        color: var(--gray-700);
        background-color: var(--primary-600);
    }


    .diag-v1-copy-icon {
        position: absolute;
        bottom: var(--space-4);
        right: var(--space-4);
        width: 30px;
        height: 30px;

        padding: var(--space-4);
        
        opacity: 0;
        cursor: pointer;
        
        transition: all 0.3s ease-out;
    }

    .diag-container-v1:hover .diag-v1-copy-icon {
        opacity: 1;
    }

    .diag-v1-copy-icon:hover {
        background-color: var(--primary-50);
        border-radius: var(--space-32);
    }

    .diag-container-v2 {
        max-width: 400px;
        margin: 0 auto;
        padding: var(--space-16) var(--space-32);
        line-height: var(--line-height-relaxed);
        font-weight: var(--font-weight-400);
        border-radius: var(--radius-lg);
        color: var(--gray-700);
        background-color: var(--primary-600);
        box-shadow: var(--shadow-lg);
    }

    .diag-container-v3{
        position: relative;
        max-width: 95%;

        margin: 0 auto;
        margin-top: var(--space-32);
        padding: var(--space-16) var(--space-32);

        line-height: var(--line-height-relaxed);
        font-weight: var(--font-weight-400);
        letter-spacing: var(--letter-spacing-xs);

        color: var(--gray-800);

        margin-left: var(--space-0);
        width: 95%;

        padding-bottom: var(--space-32);
        margin-bottom: var(--space-16);
    }

    #diaglogs > .diag-container-v3:last-child {
        margin-bottom: var(--space-48);
    }

    .diag-v3-copy-icon {
        position: absolute;
        bottom: -8px;
        left: var(--space-24);
        padding: var(--space-4);
        width: 30px;
        height: 30px;
        cursor: pointer;
        opacity: 0;
        transition: all 0.3s ease-out;
    }

    .diag-container-v3:hover .diag-v3-copy-icon {
        opacity: 1;
    }

    .diag-v3-copy-icon:hover {
        background-color: var(--primary-600);
        border-radius: var(--space-32);
    }

    .diag-container-setting-md{
        /* display: flex; */
        position: relative;
        /* max-width: 95%; */

        margin: var(--space-16) auto;
        padding: var(--space-32) var(--space-8) var(--space-16) var(--space-8);

        line-height: var(--line-height-relaxed);
        font-weight: var(--font-weight-400);
        letter-spacing: var(--letter-spacing-xs);
        

        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);

        background-color: var(--gray-100);
        color: var(--gray-500);
        
    }

    .diag-container-setting-md.inside{
        margin: var(--space-16) 0;
    }

    .diag-container-setting-md.inside.small-content{
        width: fit-content;
     }


    .diag-container-setting-md.inside.small-content:hover{
        background-color: var(--gray-200);
    }

    .diag-container-setting-md.inside.sub-param-container{
        width: 75%
    }

    .diag-container-last{
        height: var(--space-12);
    }

    .diag-container-top{
        height: var(--space-32);
    }


    .center-container{
        position: sticky;
        bottom: var(--space-16);
        /* left: 0; */
        /* right: 0; */
        /* padding: 0; */
        margin: auto;
        width: 98%;

        box-sizing: border-box;
    }



    .diag-container-setting-last{
        height: 70vh;
    }

    .welcome-container{
        max-width: 840px;
        min-width: 320px;
        height: 160px;
        margin: 0 auto;
        /* margin: 0 var(--space-16); */
        background-color: var(--primary-500);
        color: var(--gray-700);
        border-radius: var(--radius-4xl);
        box-shadow: var(--shadow-base);
        flex-basis: 100%;
    }

     .text-container {
        /* width: 600px; */
        width: calc(100% - var(--space-64));
        line-height: var(--line-height-relaxed);
        background-color: var(--primary-500);
        height: 64px;
        

        overflow-y: auto;
        overflow-x: hidden;

        outline: none;
        cursor: text;
        resize: none;
        outline: none;
        border: none;

        font-family: var(--font-family-base);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-400);
        line-height: var(--line-height-relaxed);
        letter-spacing: var(--letter-spacing-sm);

        color: var(--gray-700);

    }

    .text-container::-webkit-scrollbar {
        margin-left: 2px; 
    }

    .lower-container {
        display: flex;
        height: 40px;
        justify-content: right;
    }

    .divider {
        width: 1px;
        cursor: col-resize;

        background: var(--gray-300);
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;

        opacity: 1;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .divider.hidden {
        opacity: 0;
        pointer-events: none;
        
        display: none;
    }

    .divider-icon{
        height: var(--space-32);
        width: var(--space-16);
        background-color: var(--primary-400);
        position: absolute;
        top: 50vh;
        transform: translateX(var(--space-neg-8)) translateY(-15px);
        z-index: 6000;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-500);

    }

    /* artifest */
    .artifest-top-row{
        position: sticky;
        top: 0;
        width: 100%;
        display: flex;
        justify-content:space-between;
        align-items: center;
        /* background-color: var(--primary-50); */
        z-index: 1000;
    }

    .close-button{
        padding:var(--space-4) var(--space-4);
        font-size: var(--font-size-base);
        border: none;
        background-color: var(--gray-100);
        border-radius: var(--radius-sm);
        cursor: pointer;
        margin: var(--space-8)
    }

    .close-button:hover{
        background-color: var(--gray-200);
    }

    .close-svg{
        width: 30px;
        height: 30px;
        transform: translateY(2px);
    }

    .print-svg{
        width: 20px;
        height: 20px;
        transform: translateY(2px);
    }

    .computer-svg{
        width: 20px;
        height: 20px;
        transform: translateY(2px);
    }

    .artifest-content{
            margin: 0 var(--space-32);
            padding: var(--space-16);
    }

    .rect-fig-title{
        text-align: center;
    }

    .rect-svg{
        transform: translateX(var(--space-12));
        width: 250px;
        height: auto;

    }

    .svg-container {
        flex-direction: column;
        align-items: center;
    }

   

    .rect-fig-title{
        transform: translateY(var(--space-neg-32));
    }

    /* .calc-block-table{
        width: 95%;
        min-width: 250px;
        margin: var(--space-16) auto;
    }

     .calc-block-table td:first-child{
        border-right: none;
        width: 30%;
        text-align: left;
    }

    .calc-block-table tr {
        padding-left: 50%; 
    }

    .calc-block-table td:nth-child(3) {
        text-align: center; 
    }

    .calc-block-table td:nth-child(4){
        text-align: left;
    }
    .calc-block-table td{
        margin: var(--space-4) 0;
        padding: var(--space-4);
    }

    .calc-block-table th{
            text-align: left;
            border-color: var( --danger-100);

     } 

    .calc-block-table tr:has(td:nth-of-type(3)):not(:has(td:nth-of-type(4))) td:first-child{
        text-align: center;
        width: 10%;
    }

    .calc-block-table tr:has(td:nth-of-type(3)):not(:has(td:nth-of-type(4))) td:nth-child(2){
        text-align: center;
        width: 5%;
        
    }
    .calc-block-table tr:has(td:nth-of-type(3)):not(:has(td:nth-of-type(4))) td:nth-child(3){
        text-align: left;
        width: 80%;
    } */


     

    .left-top{
        display: flex;
        align-items: center;
        gap: var(--space-4);
        /* font-family: 'Courier New', Courier, monospace; */
    }

    .switch {
        position: relative;
        display: inline-block;
        width: var(--space-64);
        height: 30px;
        margin: var(--space-8);
        margin-left: var(--space-12);
    }

    .switch input { 
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        display: flex;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 28px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: var(--primary-600);
    }

    input:focus + .slider {
        /* box-shadow: 0 0 1px var(--primary-100); */
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(28px);
        -ms-transform: translateX(28px);
        transform: translateX(28px);
    }

    .slider.round {
        border-radius: var(--radius-sm);
    }

    .slider.round:before {
        border-radius: var(--radius-sm);
    }

    .artifest-content:has(iframe){
        padding: 0;
        margin: 0;
        height: 90vh;
    }

    .artifest-content:has(canvas){
        padding: 0;
        margin: 0;
        height: 90vh;
    }

    object{
        width: 100%;
        height: 100%;

    }

    iframe{
        width: 100%;
        height: 100%;
    }

    canvas{
        width: 100%;
        height: 100%;
    }




    /* SidePanel.html */
     .side-panel{            
        position: relative;

        width: 259px;
        height: 100vh;
        height: 100dvh;

        background-color: var(--primary-600);
        transition: all 0.1s ease-out;

    }

    .side-panel.collapsed {
        width: 56px;
    }

    .side-panel .right-top{
        display: block;
    }

    .side-panel.collapsed .right-top{
        display: none;
    }

    .top-container{
        position: sticky;
        display: flex;
        justify-content: space-between;
        top: 0;

        width:  100%;
        height: 56px;
    }

    .side-panel .close-button{
        background-color: transparent;
    }

    .left-top{
        margin-left: var(--space-12);
    }

    .side-panel .logo{
        width: 30px;
        height: 30px;

    }

    .side-panel .logo-btn{
        background-color: transparent;
        border: none;
        margin: 0;
        padding:  2px;
        cursor: pointer;
    }
/* 
    .side-panel .logo-btn:hover{
        background-color: var(--primary-100);
        border-radius: var(--radius-sm);
    }
     */
    

    .bottom-user-config{
        position: absolute;
        display: flex;
        /* justify-content: space-between; */
        align-items: center;
        gap: var(--space-12);
        bottom: 0;

        width: 100%;
        height: 56px;

        background-color: rgb(200, 230, 230);

    }
    .user-profile{
        padding: var(--space-12);
        text-align: center;
    }

        .user-info{
        display: block;
    }

    .side-panel.collapsed .user-info{
        display: none;
    }

    .user-circle{
        height: 30px;
        width: 30px;
    }


    .user-info p{
        padding: 0;
        margin: 0;
        max-width: 160px;
        overflow-x: hidden;

        display: -webkit-box;
        -webkit-line-clamp: 1; 
                line-clamp: 1; 
        -webkit-box-orient: vertical;
    }

    .user-name p{
        letter-spacing: 1px;
        transform: translateY(var(--space-4));
        /* text-align: ; */
    }

    .user-tier p{
        font-size: var(--font-size-sm);
        color: var(--gray-600);
        letter-spacing: 2px;
        transform: translateY(var(--space-neg-4));
    }

    .side-column-item, .side-column-item-history{
        display: flex;
        align-items: center;
        margin: var(--space-16) var(--space-16);
        gap: var(--space-8);
        /* font-family: "Libertinus Sans", cursive; */
    }

    .side-column-icon{
        width: 25px;
        height: 25px;
        transform: translateY(2px);

        color: var(--gray-800);
    }

    .side-column-name{
        flex:1;
        /* letter-spacing: 1px; */
        display: block;
    }


    .side-panel.collapsed .side-column-name{
        display: none;
    }

    .top-left-btn{
        display: none;
        transform: translateY(var(--space-4));
        margin-left: var(--space-16);
    }

    .bar-svg{
        width: 20px;
        height: 20px;
    }



/* ==========================================================================
   5a. TABLE CLASSES
   ========================================================================== */

    /* .animated-table {
        animation: none ;
    }



    .wider-table th, .wider-table  td{
        padding: 10px;
        text-align: center;
    }



    .tight-table th, .tight-table td{
        text-align: center;
    }


    .tight-selection-table th{
        text-align: center;
    }

    .tight-selection-table td:first-child{
        text-align: center;
    }

    .tight-selection-table td:last-child{
        padding-left: var(--space-64);
    }

    .tight-selection-table  .custom-select-non-unit-td{
        text-align: center;
    }

    .tight-selection-table .symbol-tag{
        text-align: right;
        display: inline-block;
    }

    .tight-selection-table .load-table .symbol-tag{
        width: 30px;
    }

    .tight-selection-table .area-table .symbol-tag{
        width: 50px;
    }


    .wide-selection-table{
        padding: 10px;
    }

    .wide-selection-table th, .wide-selection-table td{
        padding: 10px;
    }

    .wide-selection-table th{
        text-align: center;
    }

    .wide-selection-table td:first-child{
        padding-left: var(--space-32);
    }

    .wide-selection-table td:last-child{
        padding-left: var(--space-64);
    }

    .wide-selection-table input[type="number"]{
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
        border-radius: var(--radius-sm);
        background-color: var(--primary-500);
        
    }

    .wide-selection-table .select-wrapper{
        border: 0px solid var(--gray-500);
        padding-top: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .custom-select {

        display: inline-block;
        width: fit-content;
       
    }

    .custom-select-non-unit{
        display: inline-block;
        width: 108px;
        translate: -24px var(--space-0);
    }

    .custom-select-non-unit .select-wrapper{
        background-color: var(--primary-600);

        padding-left: var(--space-8);
        margin-top: var(--space-4);
        margin-bottom: var(--space-4);
        border: 2px solid var(--primary-600);
    }

    .custom-select-non-unit .select-wrapper:hover {
        border: 2px solid var(--primary-100);
        box-shadow: 0 0 0px var(--primary-100);

    }

    .select-wrapper {
        position: relative;
        border: 0px solid var(--gray-500);
        border-radius: 4px;
        cursor: pointer;
        background-color: var(--primary-50);
    }

    .select-wrapper:hover {
        border-color: var(--primary-100);
        box-shadow: 0 0 5px var(--primary-100);

    }

    .select-display {
        padding: var(--space-0) var(--space-16) var(--space-0) var(--space-4);
        font-size: var(--font-size-sm);
        color: var(--gray-900);
    }

    .select-display::after {
        content: '▾';
        position: absolute;
        right: var(--space-4);
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-900);
        font-size: 8px;
    }

    .select-wrapper:focus-within .select-display::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .select-options {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--primary-50);
        border: 1px solid var(--gray-300);
        border-top: none;
        border-radius: 0 0 4px 4px;
        z-index: 1000;
        display: none;
        
    }

    .select-wrapper:focus-within .select-options {
        display: block;
    }

    .select-option input[type="radio"] {
        display: none;
    }

    .select-option label {
        display: block;
        padding: var(--space-4);
        cursor: pointer;
        color: #333;
        font-size: var(--font-size-xs);
        border-bottom: 1px solid #f0f0f0;
    }

    .select-option:last-child label {
        border-bottom: none;
    }

    .select-option label:hover {
        background-color: var(--primary-600);
    }

    .select-option input[type="radio"]:checked + label {
        background-color: var(--primary-600)
    } */

/* ==========================================================================
   5b. CALCULATION UTILITIES
   ========================================================================== */
    
        .calculation-container {
            background: var(--primary-500);
            padding: 30px;
            border-radius: 10px;
            margin: 0 auto;
            transition: 
                box-shadow 0.35s cubic-bezier(0.4,0,0.2,1),
                transform 0.35s cubic-bezier(0.4,0,0.2,1),
                background-color 0.35s cubic-bezier(0.4,0,0.2,1);
        }

         .calculation-container{
            background-color: transparent;
        }

        .calculation-container:hover {
            box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 1.5px 8px rgba(0,0,0,0.12);
            transform: translateY(-8px) scale(1.03);
        }
        
        .calculation-title {
            font-size: var(--font-size-lg);
            font-weight: bold;
            margin-bottom: var(--space-4);
            color: #333;
            font-weight: var(--font-weight-400);
        }
        
        .equation {
            
            /* margin: var(--space-12) 0; */
            padding: var(--space-4) 0;
            display: flex;
            align-items: center;
            font-weight: var(--font-weight-300);
        }
        
        .equation-left {
            font-size:  var(--font-size-base);
            min-width: 60px;
            font-weight: var(--font-weight-300);
        }
        
        .equation-equals {
            margin: 0 20px;
            font-size: 20px;
        }
        
        .equation-right {
            font-style: italic;
            
        }
        
        .superscript {
            font-size: 12px;
            vertical-align: super;
        }


/* ==========================================================================
   6. ANIMATION CLASSES
   ========================================================================== */


    @keyframes revealTableFromLeft {
        0% { clip-path: inset(0 100% 0 0); }
        100% { clip-path: inset(0 0 0 0); }
    }

    @keyframes revealTableFromTop {
        0% { clip-path: inset(0 0 100% 0); }
        100% { clip-path: inset(0 0 0 0); }
    }

    @keyframes revealTableDiagonal {
        0% { clip-path: polygon(0 0, 0 0, 0 100%); }
        100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    }

/* ==========================================================================
   6a. SVG UTILITIES + ANIMATION
   ========================================================================== */

    .padfooting-polygon {
        fill: var(--primary-100) !important;
        stroke: var(--gray-800) !important;
        animation: revealFromTop 2s ease-in-out forwards;
    }


    @keyframes revealFromTop {
        0% {
            clip-path: inset(100% 0 0 0);
        }
        100% {
            clip-path: inset(0 0 0 0);
        }
    }

    .padfooting-polygon-draw-animate, .area-rectangle-draw-animate, .svg-container2, .svg-container {
        stroke: rgb(0%, 0%, 0%);
        stroke-linecap: butt;
        stroke-width: 2 !important;
        fill: var(--primary-100) !important;
        fill-rule: evenodd;
        
        /* Calculate the perimeter and set up the dash pattern */
        stroke-dasharray: 800;
        stroke-dashoffset: 800;
        fill-opacity: 0;
        
        /* Animation for drawing the line */
        animation: drawLine 1.5s ease-in-out forwards, fillShape 500ms ease-in-out 1s forwards;
    }
    
    @keyframes drawLine {
        to {
            stroke-dashoffset: 0;
        }
    }
    
    @keyframes fillShape {
        to {
            fill-opacity: 1;
        }
    }

    .svg-container2 text{
        stroke-width: 0;
        fill: rgb(0%, 0%, 0%);
    }
    
    .dimension-group{
        opacity: 0;
        animation: fade-in-dimensions 0.5s ease-in-out 1.25s forwards;
    }

    .dimension-group text{
        font-size: var(--font-size-xs) !important;
    }


    @keyframes draw-rect {
        to {
            stroke-dashoffset: 0;
        }
    }

    @keyframes fade-in-dimensions {
        to {
            opacity: 1;
        }
    }

    /* .svg-container2 {
         opacity: 0;
        animation: svgFadeUp 0.5s cubic-bezier(.4, 0, .2, 1) 1.5s forwards;
        }

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



/* ==========================================================================
   7. RESPONSIVE MODIFIERS
   ========================================================================== */

    @media (max-width:  992px) {
            body{
                position: relative;
                overflow: hidden;
                margin: 0;
                padding: 0;
            }

             .logo-text{
                transform: translateY(var(--space-neg-48));
                z-index: 1;
            }

            .slogan-text{
                transform: translateY(var(--space-neg-64));
                width: 80%;
                text-align: center;
            }


             .artifest-container{
                position: fixed;
                margin: 0;
                padding: 0;
                inset: 0;  
                width: 100%;
                max-width: 100%;
                z-index: 6000;
                overflow-x: hidden; 
                
            }

            .artifest-content{
                padding: var(--space-8);
            }
           

            .divider{
                opacity: 0;
                width: 0px;
                /* display: none; */
            }

            .flex.justify-content-center{
                min-width: 0;
                /* width: 100vw; */
                width: 100%;
                overflow-x: hidden;
            }

            .conversation-container{
               padding: 0 var(--space-32);
            }

            .diag-container-v1{
                max-width: 70%;
            }

            /* .diag-container-small-artifest{
                margin-left: 30px;
            } */

            .diag-container-setting-md.inside.sub-param-container{
                width: 100%
            }

            .top-bar-title-text, .steps-top-text{
                padding-left: var(--space-16);
            }

            .top-bar-right-container{
                padding-right: var(--space-16);
            }

            .config-box{
                position: fixed;
                top: 50vh;
                left: 50vw;
                transform-origin: center;
                width: max-content; 
                transform: translate(-50%, -50%) scale(0);

                min-width: 250px;
            }

             .config-box.show {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
            
            }

            .black-background{
                position: fixed;
                display: block;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                background-color: var(--gray-900);
                opacity: 0.5;
                z-index: 99;
            }

            .side-panel{
                z-index: 999;
            }

            .top-left-btn{
                display: block;
            }

            .side-panel.collapsed{
                display: none;
            }

            .welcome-container{
                margin: auto;    
            }
        }

    @media (max-width: 480px) {
        .svg-logo {
            transform: translateY(0);
            width: 50px;
            height: 50px;
        }
       

        .logo-text {
            font-size: var(--font-size-4xl);
            transform: translateY(0);
        }

        .slogan-text{
            margin: 0 var(--space-16);
            font-size: var(--font-size-sm);
            text-align: center;
            /* transform: translateY(var(--space-neg-48)); */
            transform: translateY(0);
            width: 90%;
        }

        .conversation-container {
            padding: 0 0;
        }

        .top-bar-title-text{
                width: 70%;
        }

        .top-bar-title-text:hover::after {
                content: attr(data-full-title); /* Uses data attribute for full text */
                position: absolute;
                top: 100%;
                left: 5%;
                background-color: hsla(240, 4%, 28%, 0.9);
                color: var(--gray-50);
                padding: var(--space-4);
                border-radius: var(--radius-sm);
                white-space: nowrap;
                z-index: 1000;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                font-size: var(--font-size-base);
        }

        .welcome-container{
                margin: 0 var(--space-8);
                /* margin: auto; */
                border-radius: var(--radius-2xl);
        }

        .diag-container-v1 {
            max-width: 80% !important; 
            margin-right: var(--space-24);
            /* padding: var(--space-12) var(--space-24); */
            margin-top: var(--space-16);

        }

        .divider{
            opacity: 0;
            width: 0px;
            /* display: none; */
        }

        .diag-container-v3{
            max-width: 95%;
            margin: 0 var(--space-8);
            margin-top: var(--space-16);
            padding: var(--space-12) var(--space-24);
            padding-bottom: var(--space-32);
            margin-bottom: var(--space-16);
        }

        .artifest-container{
            position: fixed;
            margin: 0;
            padding: 0;
            inset: 0;  
            width: 100%;
            max-width: 100%;
            z-index: 6000;
            overflow-x: hidden;
        }
        

        .artifest-content{
            margin: 0 auto;
            padding: var(--space-8);
            min-width: 300px;
        }

        .artifest-content:has(iframe){
            margin: 0;
            padding: 0;
            height: 90vh;
        }

        .artifest-content:has(canvas){
            margin: 0;
            padding: 0;
            height: 90vh;
        }

        /* .param-table{
            margin: var(--space-4) auto;
        }

        .calc-block-table th{
            text-align: left;
        }

        .calc-block-table tr:has(td:nth-of-type(3)):not(:has(td:nth-of-type(4))) td:first-child{
            text-align: right;
            width: 15%;
        }

        .calc-block-table tr:has(td:nth-of-type(3)):not(:has(td:nth-of-type(4))) td:nth-child(2){
            text-align: center;
            width: 5%;
            
        }
        .calc-block-table tr:has(td:nth-of-type(3)):not(:has(td:nth-of-type(4))) td:nth-child(3){
            text-align: left;
            width: 80%;
        } */

       

    }


        @container leftcontainer (max-width:  992px) {
            .diag-container-v1{
                max-width: 70%;
            }

            .top-bar-title-text, .steps-top-text{
                padding-left: var(--space-16);
            }

            .top-bar-right-container{
                padding-right: var(--space-16);
            }

            /* .config-box{
                position: absolute;
                top: 50%;
                left: 50%;
                transform-origin: center;
                width: max-content; 

                transform: translate(-50%, 0) scale(0);
            }

             .config-box.show {

                transform: translate(-50%, 50%) scale(1);
                opacity: 1;
            }

            .black-background{
                position: fixed;
                display: block;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                z-index: 100;
                background-color: var(--gray-900);
                opacity: 0.5;
                
            } */
        }

/* ==========================================================================
   8. Modify after move to jinja, need sum up later
   ========================================================================== */

    .side-image-container{
        background-image: url('./img/login-side-img.jpg');
    }


     #diaglogs:empty::before {
            content: "";
            position: absolute;
            inset: 0;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            /* Simple SVG with adjustable color */
            background-image: url('./svg/skyscraper.svg');
            width: 200px;
            margin: auto;

        }

        .usage-limit-reminder-top {
            position: fixed;
            right: var(--space-4);
            text-align: end;
           
        }

        .reminder-container {
            z-index: 99;
            background: var(--primary-300);
            padding: var(--space-16);
            border-radius: var(--radius-lg);
            border: 1px solid var(--primary-200);
            top: var(--space-64);
            line-height: var(--space-24);
            box-shadow: var(--shadow-base);
            color: var(--dark-200);

            display: none;
            opacity: 0;
        }

        @keyframes fadeSlideIn {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeSlideOut {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(20px); }
        }

        .reminder-container.show {
            display: block;
            animation: fadeSlideIn 0.5s forwards;
        }

        .reminder-container.hide {
            animation: fadeSlideOut 0.5s forwards;
        }

        .usage-limit-reminder-bottom {
            bottom: var(--space-64);
            text-align: start;
            width: 90%;
            margin: auto;
            margin-bottom: var(--space-8);
        }

        .reminder-container a {
            text-decoration-line: underline;
            font-size: var(--font-size-sm);
            cursor: pointer;
        }

        .close-btn {
            position: absolute;
            right: var(--space-8);
            top: var(--space-8);
            background-color: transparent;
            cursor: pointer;
        }

        .usage-limit-reminder-top  .close-btn {
            right: var(--space-8);
            top: var(--space-8);
        }


        /* quota-reminder css */
        #quota-reminder{
            display: none;
        }
        .quota-reminder {
            width: min(95%, 800px);
            padding: 18px 20px 16px;
            border-radius: 20px;
            background: linear-gradient(180deg, #fffdf7 0%, hsl(48, 25%, 92.2%) 100%);
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
            position: absolute;
            top: -60px;
            height: 100px;
            z-index: -99;
            left: 50%;
            transform: translateX(-50%);
            margin: 0 auto;
        }

        .quota-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: var(--space-8);
        }
        .quota-text {
            font-size: 14px;
            line-height: 1.5;
            color: #475569;
        }

        .quota-value {
            font-weight: 600;
            color: #222;
        }
        .quota-text.cta {
            font-weight: 700;
            text-decoration: underline;
            cursor: pointer;
        }

        .quota-text.close-reminder {
            margin-left: var(--space-8);
            cursor: pointer;
        }

        .quota-bar {
            width: 100%;
            height: 5px;
            background: var(--dark-700);
            border-radius: 999px;
            overflow: hidden;
            position: relative;
        }

        .quota-bar {
            width: 100%;
            height: var(--space-4);
            background: var(--dark-700);
            border-radius: 999px;
            overflow: hidden;
        }

        .quota-fill {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient( 90deg, #EAD3A6, #FFC047 );
            transition: width 0.4s ease;
            box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
        }

        .lock-icon {
            position: absolute;
            top: var(--space-4);
            right: var(--space-8);
        }

        svg.lock-svg {
            width: 16px;
        }