/* ===== COLORS ===== */
:root {
    /* base */
    --fg:      hsl(68,8%,15%);
    --bg:      hsl(60,14%,96%);

    /* headings */
    --h1: hsl(338,66%,42%);  /* pink */
    --h2: hsl(80,61%,35%);   /* green */
    --h3: hsl(190,65%,40%);  /* cyan */
    --h4: hsl(261,71%,50%);  /* purple */
    --h5: hsl(32,71%,40%);   /* orange */
    --h6: hsl(54,53%,45%);   /* yellow */

    /* text/inline */
    --a:      hsl(205,79%,46%);  /* link blue */
    --code:   hsl(32,71%,40%);
    --strong: hsl(261,71%,50%);
    --em:     hsl(338,66%,42%);

    /* form elements (text) */
    --button:   hsl(338,66%,42%);

    /* table elements */
    --th:      hsl(205,79%,46%);
    --caption: hsl(32,71%,40%);

    /* misc */
    --hr: hsl(49,11%,41%);   /* divider */

    --prompt: #0176ff;

    --prompt_color: #ddd;
    --textarea_color: #fff;
    --resp_color: #fff;
    --bkd_color: #000;

}


@media (prefers-color-scheme: dark) {
    :root {
        /* base */
        --fg:      hsl(60,14%,96%);
        --bg:      #0f1115;

        /* headings */
        --h1: hsl(338,95%,56%);
        --h2: hsl(80,76%,53%);
        --h3: hsl(190,81%,67%);
        --h4: hsl(261,100%,75%);
        --h5: hsl(32,98%,56%);
        --h6: hsl(54,70%,68%);

        /* text/inline */
        --a:      hsl(190,81%,67%);
        --code:   hsl(54,70%,68%);
        --strong: hsl(261,100%,75%);
        --em:     hsl(338,95%,56%);

        /* form elements */
        --button:   hsl(338,95%,56%);

        /* table elements */
        --th:      hsl(190,81%,67%);
        --caption: hsl(32,98%,56%);

        /* misc */
        --hr: hsl(49,11%,41%);

        /* fable */
        --prompt: #9dcaff;



        /*gptizr*/

        --textarea_fg: #fff;
        --textarea_bg: #000;
        --stp_clr_1: #ff00cc;
        --stp_clr_2: #9900ff;
        --stp_clr_3: #3333ff;


        --user_input: #ccc;
        --ai_response: #fff;

        --buttons_fg: #fff;
        --buttons_bg: #222;

    }
}


    html     { background: var(--bg)}
    body     { color: var(--fg)       ; background: var(--bg)}

    h1       { color: var(--h1)       }
    h2       { color: var(--h2)       }
    h3       { color: var(--h3)       }
    h4       { color: var(--h4)       }
    h5       { color: var(--h5)       }
    h6       { color: var(--h6)       }

    a        { color: var(--a )       }
    code     { color: var(--code)     }
    p strong { color: var(--strong)   }
    em       { color: var(--em)       }

    form     { color: var(--form)     }
    input    { color: var(--input)    ;
                &[type="reset"]       { background: var(--bg) }
                &[type="submit"]      { background: var(--bg) }
    }
    select   { color: var(--inherit)  ; background:var(--bg) }

    th       { color: var(--th)       } 
    caption  { color: var(--caption)  }      

    hr       { background: var(--hr)  } 







#burger {stroke: var(--fg)}
#x {stroke: var(--h1)}

.the_title { color:inherit; h1 {color:inherit} }






/* ===== RESET ===== */
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        scroll-behavior: smooth;
    }
    body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.6;
        min-height: 100vh;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
        scrollbar-gutter: stable;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: 700;
      line-height: 1.2;
      text-wrap: balance;
    }
    img,
    picture,
    video,
    canvas,
    svg,
    iframe,
    figure {
      display: block;
      max-width: 100%;
    }
    form,
    input,
    button,
    textarea,
    select,
    label,
    option,
    optgroup {
        font: inherit;
    }
    a { text-decoration: none }

/* ===== TYPOGRAPHY ===== */
    body { font-size: 1rem; }

    p {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.6;
        margin-block: 1em;
    }

    h1 { font-size: 2.5rem;   margin-block: 1.2em 0.6em;  } /* 40px */
    h2 { font-size: 2rem;     margin-block: 1.1em 0.55em; } /* 32px */
    h3 { font-size: 1.75rem;  margin-block: 1em   0.5em;  } /* 28px */
    h4 { font-size: 1.5rem;   margin-block: 0.9em 0.45em; } /* 24px */
    h5 { font-size: 1.25rem;  margin-block: 0.8em 0.4em;  } /* 20px */
    h6 { font-size: 1.125rem; margin-block: 0.7em 0.35em; } /* 18px */

    @media (min-width: 737px) {
        body { font-size: 1.0625rem; }  /* 17px */
        p    { font-size: 1.0625rem; }

        h1 { font-size: 3rem;   } /* 48px */
        h2 { font-size: 2.5rem; } /* 40px */
        h3 { font-size: 2rem;   } /* 32px */
        h4 { font-size: 1.75rem;} /* 28px */
        h5 { font-size: 1.375rem;} /* 22px */
        h6 { font-size: 1.25rem;} /* 20px */
    }

    @media (min-width: 1025px) {
        body { font-size: 1.125rem; }  /* 18px */
        p    { font-size: 1.125rem; }

        h1 { font-size: 3.5rem; } /* 56px */
        h2 { font-size: 3rem;   } /* 48px */
        h3 { font-size: 2.25rem;} /* 36px */
        h4 { font-size: 2rem;   } /* 32px */
        h5 { font-size: 1.5rem; } /* 24px */
        h6 { font-size: 1.25rem;} /* 20px */
    }

    @media (min-width: 1801px) {
        body { font-size: 1.25rem; }  /* 20px */
        p    { font-size: 1.25rem; }

        h1 { font-size: 4rem;   } /* 64px */
        h2 { font-size: 3.25rem;} /* 52px */
        h3 { font-size: 2.5rem; } /* 40px */
        h4 { font-size: 2.125rem;}/* 34px */
        h5 { font-size: 1.75rem; } /* 28px */
        h6 { font-size: 1.5rem; }  /* 24px */
    }

/* ===== DEFAULTS ===== */
    a {text-decoration: none;
        &:hover {
            text-decoration: underline;
            text-underline-offset: .1em;
        }
    }
    p a:hover {text-decoration-style: wavy;}
    pre {overflow: auto}
    ol, ul {
        padding-left: 3em;
        margin: 12px auto;
    }

    button {
        all: unset;
        box-sizing: border-box;
        cursor: pointer;
    }

    hr {
        height: 2px;
        margin: 90px 10vw;
        border: none;
        background-size: cover;
        background-position: center center;
        background-repeat: repeat-x;
        background-color: var(--hr);
        &.hr {
            height: 200px;
            margin: 20px 10vw;
            background-image: url("hr.png");
            background-color: inherit;
        }
    }

    .container{
        max-width:1500px;
        margin:0 auto;
        padding: 10px 0;
    }

    .flx_flw {
        display: flex;
        flex-flow:row wrap;
        justify-content:center;
        align-items: center;
        &.ctr {text-align: center}
        &.gap60 {gap: 60px}
    }





/* ===== GPTiZR ===== */

#logo {
    position: fixed;
    top: 5px;
    left: 5px;
    display: flex;
    width:55px;
    height: 55px;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 1px 1px 8px -5px #000;
    outline: none;
    z-index: 9;
}

#log {
    text-align: center;
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: min(80%, 800px);
    display: flex;
    border-radius: 10px;
    z-index: 8;
    color: var(--buttons_bg);
    background-color: var(--buttons_fg);
    p {padding: 12px}
}

header {
    position: fixed;
    display: block;
    z-index: 5;
    backdrop-filter: blur(12px);
    top: 0;
    left: 0;
    width: 100vw;
    max-height: 100svh;
    overflow-y: auto;

    &.hidden_commands {
        backdrop-filter: initial;
        #topbar > *{display: none}
        #prompt_textarea_wrap,
        #commands {display: none}
    }

    &.focus_textarea {
        backdrop-filter: initial;
        #commands {display: none;}
        #prompt_textarea_wrap textarea:focus{
            background: color-mix(in oklab, var(--textarea_bg), white 5%)
        }
    }


    #topbar {
        display: grid;
        grid: 1fr / repeat(4, max-content);
        align-items: center;
        justify-content: flex-end;
        padding: 5px;
        column-gap: 5px;
        position: sticky;
        top: 0;
        z-index: 1;
        padding-left: 80px;


        #threads_select {
            border: none;
        }

        #txt_2_txt {
            border-radius: 50%;
            padding: 2px;
            &.hidden_commands{display: none}
        }

        #transcribe {
            border-radius: 50%;
            svg {padding-top: 5px}
            &.hidden_commands{display: none}
        }

        #toggle_settings {
            border-radius: 50%;
            svg {padding-top: 5px}
            &.hidden_commands{display: none}
        }


    }


    #prompt_textarea_wrap{
        flex: 1 0;
        display: flex;
        background: linear-gradient(
            45deg,
            var(--stp_clr_1),
            var(--stp_clr_2),
            var(--stp_clr_3)
        );
        background-origin: border-box;
        background-clip: padding-box, border-box;
        padding: 1px;
        border-radius: 10px;
        max-width: min(90%, 1500px);
        margin: auto;
        margin-bottom: 5px;

        textarea {
            flex: 1 0;
            border: none;
            max-height: calc(100svh - 100px);
            overflow: hidden;
            overflow-y: auto;
            resize: none;
            padding: 8px;
            border-radius: 10px;
            color: var(--textarea_fg);
            &:focus {outline: none}
            background: var(--textarea_bg);            
        }

        &.blur_prompt_area {
            background: none;
            textarea {
                background: none !important;
                backdrop-filter: blur(10px);
                &::placeholder{color: var(--textarea_fg);}
            }
        }


    }


    #commands {
        display: flex;
        flex-flow: row wrap;
        padding: 10px 20px 30px;
        backdrop-filter: blur(10px) brightness(.5);
        overflow-y: auto;
        gap: 5px;

        > * {
            color: var(--buttons_fg);
            background-color: var(--buttons_bg);
            padding: 5px 10px;
            align-self: stretch;
            border-radius: 5px;
        }

        > #thread_search {
            border: none;
        }

        > button {
            text-align: center;
            span {
                display: block;
                &.setting{font-size: 0.7em}
            }
        }
        > label {
            font: inherit;
            text-align: center;
            .setting {
                font-size: .7em;
                display: block;
            }
            select {
                font-size: .8em;
                border: none;
                background: inherit;
            }
        }
        > audio {height: auto;}
        > .setting_div {
            text-align: center;
            .setting {
                display: block;
                font-size: .7em
            }
        }

        > form {
            max-width: 100%;

            > button {
                border: 1px dashed;
                margin: 5px;
                padding: 3px 5px;
                border-radius: 5px;
                font-size: .7em;
            }
        }
    }
}




#thread {
    white-space: pre-wrap;
    padding: 10px;
    max-width: 1500px;
    margin: auto;
    padding-bottom: 33svh;

    .input_div {
        color: var(--user_input);
    }
    .ai_response {
        color: var(--ai_response);
    }
    .ai_response_2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: flex-start;
        gap: 1rem;
        > * {
            border: 1px solid color-mix(in oklab, var(--bg), white 12%);
            border-radius: 10px;
            padding: 10px;
        }
    }
}





#thread_ids {

    & .thread_id {
        padding: 3px;
        cursor: pointer;
        border-radius: 4px;

    }
    & .thread_id:hover {
        background: #eee;
        color: #0a3845;
    }
    & .thread_id:focus {
        background: dodgerblue;
        outline: none;
    }
}











@media(min-width: 1024px){
    /*#logo{width: 60px; height: 60px}*/
}
@media(hover: hover) and (pointer: fine) {
    #transcribe,
    #txt_2_txt,
    #toggle_settings,
    #logo {
        &:hover, &:focus{background: color-mix(in oklab, var(--bg), white 12%)}
        &:active {background: color-mix(in oklab, var(--fg), white 12%)}
    }
    #commands > * {
        &:hover, &:focus {background: color-mix(in oklab, var(--buttons_bg), white 12%)}
        &:active {background: color-mix(in oklab, var(--buttons_bg), white 12%)}

    }
}
@media(hover: none) and (pointer: coarse) {
    #logo:active {background: color-mix(in oklab, var(--bg), white 12%)}
}


/* LOGO */
#logo {

    &.running .l {animation-play-state: running;}
    .l{
        stroke-linecap: round;
        stroke-miterlimit: 10;
        stroke-width: 3px;
        animation-name: change_color;
        animation-iteration-count:infinite;
        animation-play-state: paused;
    }
    .l1 {stroke:#8E68AD; animation-duration: 2.2s; animation-delay: 0.02s;}
    .l2 {stroke:#8E68AD; animation-duration: 2.2s; animation-delay: 0.04s;}
    .l3 {stroke:#ED2024; animation-duration: 2.2s; animation-delay: 0.06s;}
    .l4 {stroke:#EE3724; animation-duration: 2.2s; animation-delay: 0.08s;}
    .l5 {stroke:#F15822; animation-duration: 2.2s; animation-delay: 0.10s;}
    .l6 {stroke:#F57F20; animation-duration: 2.2s; animation-delay: 0.12s;}
    .l7 {stroke:#FBA919; animation-duration: 2.2s; animation-delay: 0.14s;}
    .l8 {stroke:#FED402; animation-duration: 2.2s; animation-delay: 0.16s;}
    .l9 {stroke:#F7EC13; animation-duration: 2.2s; animation-delay: 0.18s;}
    .l10{stroke:#D2DE26; animation-duration: 2.2s; animation-delay: 0.20s;}
    .l11{stroke:#AFD136; animation-duration: 2.2s; animation-delay: 0.22s;}
    .l12{stroke:#94C83E; animation-duration: 2.2s; animation-delay: 0.24s;}
    .l13{stroke:#7DC242; animation-duration: 2.2s; animation-delay: 0.26s;}
    .l14{stroke:#70BF44; animation-duration: 2.2s; animation-delay: 0.28s;}
    .l15{stroke:#6ABD45; animation-duration: 2.2s; animation-delay: 0.30s;}
    .l16{stroke:#6BBE45; animation-duration: 2.2s; animation-delay: 0.32s;}
    .l17{stroke:#70C16A; animation-duration: 2.2s; animation-delay: 0.34s;}
    .l18{stroke:#70C493; animation-duration: 2.2s; animation-delay: 0.36s;}
    .l19{stroke:#70C8B9; animation-duration: 2.2s; animation-delay: 0.38s;}
    .l20{stroke:#6FCCDD; animation-duration: 2.2s; animation-delay: 0.40s;}
    .l21{stroke:#45C7F0; animation-duration: 2.2s; animation-delay: 0.42s;}
    .l22{stroke:#47A3DA; animation-duration: 2.2s; animation-delay: 0.44s;}
    .l23{stroke:#4378BC; animation-duration: 2.2s; animation-delay: 0.46s;}
    .l24{stroke:#3F61AD; animation-duration: 2.2s; animation-delay: 0.48s;}
    .l25{stroke:#3B56A6; animation-duration: 2.2s; animation-delay: 0.50s;}
    .l26{stroke:#4352A4; animation-duration: 2.2s; animation-delay: 0.52s;}
    .l27{stroke:#5553A3; animation-duration: 2.2s; animation-delay: 0.54s;}
    .l28{stroke:#6B52A2; animation-duration: 2.2s; animation-delay: 0.56s;}
    .l29{stroke:#8351A1; animation-duration: 2.2s; animation-delay: 0.58s;}
    .l30{stroke:#9D509F; animation-duration: 2.2s; animation-delay: 0.60s;}
    .l31{stroke:#B9529F; animation-duration: 2.2s; animation-delay: 0.62s;}
    .l32{stroke:#CE4A9B; animation-duration: 2.2s; animation-delay: 0.64s;}
    .l33{stroke:#E83895; animation-duration: 2.2s; animation-delay: 0.66s;}
    .l34{stroke:#ED1E7F; animation-duration: 2.2s; animation-delay: 0.68s;}
    .l35{stroke:#ED1B58; animation-duration: 2.2s; animation-delay: 0.70s;}
    .l36{stroke:#ED1E32; animation-duration: 2.2s; animation-delay: 0.72s;}
    .l37{stroke:#8E68AD; animation-duration: 2.2s; animation-delay: 0.74s;}
    .l38{stroke:#ED2024; animation-duration: 2.2s; animation-delay: 0.76s;}
    .l39{stroke:#EE3724; animation-duration: 2.2s; animation-delay: 0.78s;}
    .l40{stroke:#F15822; animation-duration: 2.2s; animation-delay: 0.80s;}
    .l41{stroke:#F57F20; animation-duration: 2.2s; animation-delay: 0.82s;}
    .l42{stroke:#FBA919; animation-duration: 2.2s; animation-delay: 0.84s;}
    .l43{stroke:#FED402; animation-duration: 2.2s; animation-delay: 0.86s;}
    .l44{stroke:#F7EC13; animation-duration: 2.2s; animation-delay: 0.88s;}
}
@keyframes change_color {
    00%{stroke:hsla(00,60%,60%,1)}
    01%{stroke:hsla(10,60%,60%,1)}  
    02%{stroke:hsla(20,60%,60%,1)}  
    03%{stroke:hsla(30,60%,60%,1)}  
    04%{stroke:hsla(40,60%,60%,1)}  
    05%{stroke:hsla(50,60%,60%,1)}  
    06%{stroke:hsla(60,60%,60%,1)}  
    07%{stroke:hsla(70,60%,60%,1)}  
    08%{stroke:hsla(80,60%,60%,1)}  
    09%{stroke:hsla(90,60%,60%,1)}

    10%{stroke:hsla(100,60%,60%,1)} 
    11%{stroke:hsla(110,60%,60%,1)} 
    12%{stroke:hsla(120,60%,60%,1)} 
    13%{stroke:hsla(130,60%,60%,1)} 
    14%{stroke:hsla(140,60%,60%,1)} 
    15%{stroke:hsla(150,60%,60%,1)} 
    16%{stroke:hsla(160,60%,60%,1)} 
    17%{stroke:hsla(170,60%,60%,1)} 
    18%{stroke:hsla(180,60%,60%,1)} 
    19%{stroke:hsla(190,60%,60%,1)}

    20%{stroke:hsla(200,60%,60%,1)}
    21%{stroke:hsla(210,60%,60%,1)}
    22%{stroke:hsla(220,60%,60%,1)}
    23%{stroke:hsla(230,60%,60%,1)}
    24%{stroke:hsla(240,60%,60%,1)}
    25%{stroke:hsla(250,60%,60%,1)}
    26%{stroke:hsla(260,60%,60%,1)}
    27%{stroke:hsla(270,60%,60%,1)}
    28%{stroke:hsla(280,60%,60%,1)}
    29%{stroke:hsla(290,60%,60%,1)}

    30%{stroke:hsla(300,60%,60%,1)}
    31%{stroke:hsla(310,60%,60%,1)}
    32%{stroke:hsla(320,60%,60%,1)}
    33%{stroke:hsla(330,60%,60%,1)}
    34%{stroke:hsla(340,60%,60%,1)}
    35%{stroke:hsla(350,60%,60%,1)}
    36%{stroke:hsla(360,60%,60%,1)}
    37%{stroke:hsla(370,60%,60%,1)}
    38%{stroke:hsla(380,60%,60%,1)}
    39%{stroke:hsla(390,60%,60%,1)}

    40%{stroke:hsla(400,60%,60%,1)}
    41%{stroke:hsla(410,60%,60%,1)}
    42%{stroke:hsla(420,60%,60%,1)}
    43%{stroke:hsla(430,60%,60%,1)}
    44%{stroke:hsla(440,60%,60%,1)}
    45%{stroke:hsla(450,60%,60%,1)}
    46%{stroke:hsla(460,60%,60%,1)}
    47%{stroke:hsla(470,60%,60%,1)}
    48%{stroke:hsla(480,60%,60%,1)}
    49%{stroke:hsla(490,60%,60%,1)}

    50%{stroke:hsla(500,60%,60%,1)}
    51%{stroke:hsla(510,60%,60%,1)}
    52%{stroke:hsla(520,60%,60%,1)}
    53%{stroke:hsla(530,60%,60%,1)}
    54%{stroke:hsla(540,60%,60%,1)}
    55%{stroke:hsla(550,60%,60%,1)}
    56%{stroke:hsla(560,60%,60%,1)}
    57%{stroke:hsla(570,60%,60%,1)}
    58%{stroke:hsla(580,60%,60%,1)}
    59%{stroke:hsla(590,60%,60%,1)}

    60%{stroke:hsla(600,60%,60%,1)}
    61%{stroke:hsla(610,60%,60%,1)}
    62%{stroke:hsla(620,60%,60%,1)}
    63%{stroke:hsla(630,60%,60%,1)}
    64%{stroke:hsla(640,60%,60%,1)}
    65%{stroke:hsla(650,60%,60%,1)}
    66%{stroke:hsla(660,60%,60%,1)}
    67%{stroke:hsla(670,60%,60%,1)}
    68%{stroke:hsla(680,60%,60%,1)}
    69%{stroke:hsla(690,60%,60%,1)}

    70%{stroke:hsla(700,60%,60%,1)}
    71%{stroke:hsla(710,60%,60%,1)}
    72%{stroke:hsla(720,60%,60%,1)}
    73%{stroke:hsla(730,60%,60%,1)}
    74%{stroke:hsla(740,60%,60%,1)}
    75%{stroke:hsla(750,60%,60%,1)}
    76%{stroke:hsla(760,60%,60%,1)}
    77%{stroke:hsla(770,60%,60%,1)}
    78%{stroke:hsla(780,60%,60%,1)}
    79%{stroke:hsla(790,60%,60%,1)}

    80%{stroke:hsla(800,60%,60%,1)}
    81%{stroke:hsla(810,60%,60%,1)}
    82%{stroke:hsla(820,60%,60%,1)}
    83%{stroke:hsla(830,60%,60%,1)}
    84%{stroke:hsla(840,60%,60%,1)}
    85%{stroke:hsla(850,60%,60%,1)}
    86%{stroke:hsla(860,60%,60%,1)}
    87%{stroke:hsla(870,60%,60%,1)}
    88%{stroke:hsla(880,60%,60%,1)}
    89%{stroke:hsla(890,60%,60%,1)}
    90%{stroke:hsla(900,60%,60%,1)}

    90%{stroke:hsla(900,60%,60%,1)}
    91%{stroke:hsla(910,60%,60%,1)}
    92%{stroke:hsla(920,60%,60%,1)}
    93%{stroke:hsla(930,60%,60%,1)}
    94%{stroke:hsla(940,60%,60%,1)}
    95%{stroke:hsla(950,60%,60%,1)}
    96%{stroke:hsla(960,60%,60%,1)}
    97%{stroke:hsla(970,60%,60%,1)}
    98%{stroke:hsla(980,60%,60%,1)}
    99%{stroke:hsla(990,60%,60%,1)}
    100%{stroke:hsla(1000,60%,60%,1)}}



/*============= gradients ================*/
.gwdai_logo_path {
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#gwdai_logo_path {fill: url("#gwdai_gradient")}

.gwdai_gradient_stop_1 {animation: gwdai_color_shift_1 4s infinite}
.gwdai_gradient_stop_2 {animation: gwdai_color_shift_2 4s infinite}
@keyframes gwdai_color_shift_1 {
    0%   { stop-color: hsl(333 , 77%, 55%); }
    50%  { stop-color: hsl(066 , 77%, 55%); }
    100% { stop-color: hsl(333 , 77%, 55%); }
}
@keyframes gwdai_color_shift_2 {
    0%   { stop-color: hsl(222 , 77%, 55%); }
    50%  { stop-color: hsl(666 , 77%, 55%); }
    100% { stop-color: hsl(222 , 77%, 55%); }
}





/*============= gradients ================*/
#modal_window_wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    background: hsla(0, 0%, 0%, .8);
    z-index: 7;
    display: none;
    color: ivory;
    padding: 80px 20px;
    backdrop-filter: blur(5px);

    &.visible {display: flex}

    button {
        color: red;
        font-size: 1.5rem;
        font-weight: 800;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%
    }

    #modal_window {
        width: fit-content;
        word-break: break-word;
    }

}




/* hljs */
pre code.hljs{display:block;overflow-x:auto;padding:1em;border-radius:10px}
code.hljs{padding:3px 5px;}

#thread{
    &.theme_atom_one_dark .ai_response{
        .hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
    }

    &.theme_atom_one_light .ai_response{
        .hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}
    }

    &.theme_github .ai_response{
        .hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
    }

    &.theme_github_dark .ai_response{
        .hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
    }

    &.theme_monokai_sublime .ai_response{
        .hljs{background:#23241f;color:#f8f8f2}.hljs-subst,.hljs-tag{color:#f8f8f2}.hljs-emphasis,.hljs-strong{color:#a8a8a2}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp{color:#ae81ff}.hljs-code,.hljs-section,.hljs-selector-class,.hljs-title{color:#a6e22e}.hljs-strong{font-weight:700}.hljs-emphasis{font-style:italic}.hljs-attr,.hljs-keyword,.hljs-name,.hljs-selector-tag{color:#f92672}.hljs-attribute,.hljs-symbol{color:#66d9ef}.hljs-class .hljs-title,.hljs-params,.hljs-title.class_{color:#f8f8f2}.hljs-addition,.hljs-built_in,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable{color:#e6db74}.hljs-comment,.hljs-deletion,.hljs-meta{color:#75715e}
    }

    &.theme_monokai .ai_response{
        .hljs{background:#272822;color:#ddd}.hljs-keyword,.hljs-literal,.hljs-name,.hljs-number,.hljs-selector-tag,.hljs-strong,.hljs-tag{color:#f92672}.hljs-code{color:#66d9ef}.hljs-attr,.hljs-attribute,.hljs-link,.hljs-regexp,.hljs-symbol{color:#bf79db}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-emphasis,.hljs-section,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-string,.hljs-subst,.hljs-template-tag,.hljs-template-variable,.hljs-title,.hljs-type,.hljs-variable{color:#a6e22e}.hljs-class .hljs-title,.hljs-title.class_{color:#fff}.hljs-comment,.hljs-deletion,.hljs-meta,.hljs-quote{color:#75715e}.hljs-doctag,.hljs-keyword,.hljs-literal,.hljs-section,.hljs-selector-id,.hljs-selector-tag,.hljs-title,.hljs-type{font-weight:700}
    }


    &.theme_kimbie_light .ai_response{
        .hljs{background:#fbebd4;color:#84613d}.hljs-comment,.hljs-quote{color:#a57a4c}.hljs-meta,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#dc3958}.hljs-built_in,.hljs-deletion,.hljs-link,.hljs-literal,.hljs-number,.hljs-params,.hljs-type{color:#f79a32}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#889b4a}.hljs-function,.hljs-keyword,.hljs-selector-tag{color:#98676a}.hljs-attribute,.hljs-section,.hljs-title{color:#f06431}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
    }


    &.theme_sunburst .ai_response{
        .hljs{background:#000;color:#f8f8f8}.hljs-comment,.hljs-quote{color:#aeaeae;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#e28964}.hljs-string{color:#65b042}.hljs-subst{color:#daefa3}.hljs-link,.hljs-regexp{color:#e9c062}.hljs-name,.hljs-section,.hljs-tag,.hljs-title{color:#89bdff}.hljs-class .hljs-title,.hljs-doctag,.hljs-title.class_{text-decoration:underline}.hljs-bullet,.hljs-number,.hljs-symbol{color:#3387cc}.hljs-params,.hljs-template-variable,.hljs-variable{color:#3e87e3}.hljs-attribute{color:#cda869}.hljs-meta{color:#8996a8}.hljs-formula{background-color:#0e2231;color:#f8f8f8;font-style:italic}.hljs-addition{background-color:#253b22;color:#f8f8f8}.hljs-deletion{background-color:#420e09;color:#f8f8f8}.hljs-selector-class{color:#9b703f}.hljs-selector-id{color:#8b98ab}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
    }

    &.theme_brown_paper .ai_response{
        .hljs{color:#363c69;background: #b7a68e}.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#059}.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-link,.hljs-name,.hljs-section,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable,.hljs-title,.hljs-type,.hljs-variable{color:#2c009f}.hljs-comment,.hljs-deletion,.hljs-meta,.hljs-quote{color:#802022}.hljs-doctag,.hljs-keyword,.hljs-literal,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-strong,.hljs-title,.hljs-type{font-weight:700}.hljs-emphasis{font-style:italic}
    }


    &.theme_gradient_light .ai_response{
        .hljs{background-color:#f9ccff;background-image:linear-gradient(295deg,#f9ccff 0,#e6bbf9 11%,#9ec6f9 32%,#55e6ee 60%,#91f5d1 74%,#f9ffbf 98%);color:#250482}.hljs-subtr{color:#01958b}.hljs-comment,.hljs-doctag,.hljs-meta,.hljs-quote{color:#cb7200}.hljs-attr,.hljs-regexp,.hljs-selector-id,.hljs-selector-tag,.hljs-tag,.hljs-template-tag{color:#07bd5f}.hljs-bullet,.hljs-params,.hljs-selector-class{color:#43449f}.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-symbol,.hljs-type{color:#7d2801}.hljs-addition,.hljs-link,.hljs-number{color:#7f0096}.hljs-string{color:#2681ab}.hljs-addition,.hljs-attribute{color:#296562}.hljs-template-variable,.hljs-variable{color:#025c8f}.hljs-built_in,.hljs-class,.hljs-formula,.hljs-function,.hljs-name,.hljs-title{color:#529117}.hljs-deletion,.hljs-literal,.hljs-selector-pseudo{color:#ad13ff}.hljs-emphasis,.hljs-quote{font-style:italic}.hljs-keyword,.hljs-params,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-template-tag{font-weight:700}
    }

    &.theme_gradient_dark .ai_response{
        .hljs{background-color:#652487;background-image:linear-gradient(160deg,#652487 0,#443ac3 35%,#0174b7 68%,#04988e 100%);color:#e7e4eb}.hljs-subtr{color:#e7e4eb}.hljs-comment,.hljs-doctag,.hljs-meta,.hljs-quote{color:#af8dd9}.hljs-attr,.hljs-regexp,.hljs-selector-id,.hljs-selector-tag,.hljs-tag,.hljs-template-tag{color:#aefbff}.hljs-bullet,.hljs-params,.hljs-selector-class{color:#f19fff}.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-symbol,.hljs-type{color:#17fc95}.hljs-addition,.hljs-link,.hljs-number{color:#c5fe00}.hljs-string{color:#38c0ff}.hljs-addition,.hljs-attribute{color:#e7ff9f}.hljs-template-variable,.hljs-variable{color:#e447ff}.hljs-built_in,.hljs-class,.hljs-formula,.hljs-function,.hljs-name,.hljs-title{color:#ffc800}.hljs-deletion,.hljs-literal,.hljs-selector-pseudo{color:#ff9e44}.hljs-emphasis,.hljs-quote{font-style:italic}.hljs-keyword,.hljs-params,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-template-tag{font-weight:700}
    }
}