@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

    *{
        font-family: 'DM Sans', sans-serif;
        font-variation-settings: 'wght' 600;
        box-sizing: border-box; 
        margin: 0px;
        color: var(--secondtext-color);
    }

    
    :root{
        --bg-color: #FCF6B1;
        --primary-color:##2D1E2F;
        --accent-color: #F7B32B;
        --accenttext-color: var(--bg-color);
        --second-color: #B8B8D1;
        --secondtext-color : #2D1E2F;
        --h1 : var(--secondtext-color);
        --chat : var(--bg-color);
        --chat-border : var(--secondtext-color);
    }

    :root.scheme-1 {
        --bg-color: #FCF6B1;
        --primary-color:#2D1E2F;
        --accent-color: #F7B32B;
        --accenttext-color: var(--bg-color);
        --second-color: #B8B8D1;
        --secondtext-color : #2D1E2F;
        --h1 : var(--secondtext-color);
        --chat : var(--bg-color);
        --chat-border : var(--secondtext-color);
    }

    :root.scheme-2 {
        --xbg-color: #23F0C7;
        --bg-color: #F6B6B8;
        --primary-color: #6457A6;
        --accent-color: #F6B6B8;
        --accenttext-color: var(--bg-color);
        --second-color: #B8B8D1;
        --secondtext-color: #6457A6;
        --h1: var(--primary-color);
        --chat: var(--bg-color);
        --chat-border : var(--secondtext-color);
    }

    :root.scheme-3 {
        --bg-color: #DA3E52;
        --primary-color: ##2D1E2F;
        --accent-color: #96E6B3;
        --accenttext-color: var(--bg-color);
        --second-color: #F2E94E;
        --secondtext-color: #483D51;
        --h1: var(--second-color);
        --chat: #A3D9FF;
        --chat-border: var(--secondtext-color);
    }

    :root.scheme-4 {
        --bg-color: 3d405b;
        --primary-color: 3d405b;
        --accent-color: #f2cc8f;
        --accenttext-color: var(--bg-color);
        --second-color: #e07a5f;
        --secondtext-color: #2D1E2F;
        --h1: #e07a5f;
        --chat: #3d405b;
        --chat-border: #e07a5f;
    }
    ::-webkit-scrollbar {
        position:absolute;
        top: 0; 
        right: 0px; 
        width: 4px
    }

    ::-webkit-scrollbar-track {
        background : var(--chat-border); 
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--accent-color); 
    }

    ::-webkit-scrollbar-thumb:hover {
        background: white; 
        width: 90px;
    }

    body{
        background-color: var(--bg-color);
        text-align: center;
        font-size: 25pt;
        color: var(--accent-color);
        display: flex;
        flex-direction: column; 
        align-items: center;
        height: 100%;
        padding: 0px 10px 0px 10px;
    }

    h1{
        font-size: 40pt;
        font-variation-settings: 'wght'900;
        margin-top: 10px;
        line-height: 0.9;
        color:var(--h1)
    }

    h2{
        font-size: 20pt;
        font-variation-settings: 'wght'300;
        margin-bottom: 10px;
        line-height: 0.9;
        color:var(--h1)
    }

    

    select{
        font-size: 15pt;
        background-color: transparent;
        border-color: transparent;
        max-width: 100%;
        overflow-y: auto;
        white-space: normal; /* Prevents text from wrapping */
        text-overflow: ellipsis; /* Adds ellipsis for overflow text */
        color: var(--accent-color);
    }

    option{
        font-size: 10pt;
        white-space: normal;
        background-color: var(--accent-color);
    }

    .headerContainer{
        border-radius: 10px 10px 0px 0px;
        background-color: var(--chat-border);
        color:var(--chat-border);
        width: 100%;
        max-width: 500px;
        margin-bottom: 0;
        font-size: 25px;
        display: flex;
        padding: 5px 10px 5px 10px;        
        justify-content: space-between;
        align-items: center;
    }

    .headerText{
        color:var(--accent-color);
    }
    .chatContainer{
        background-color: var(--chat);
        height: 100%;
        border: 4px solid var(--chat-border);
        border-bottom : none;
        border-top: none;
        border-right: none;
        min-height: 100px;
        overflow-y: scroll;
        height: 100%;
        width: 100%;
        max-width: 500px;
        margin-bottom: 0;
        margin-top: 0px;
        padding-top: 5px;
        /* position: relative; 
        display: flex;
        flex-direction: column; 
        justify-content: flex-end; */ 
    }

    .divider{
        font-size: 15px;
        background-color: var(--second-color);
        color:var(--secondtext-color)
    }

    .msg {
        margin: 5px 10px 10px 5px;
        border-radius: 5px;
        padding: 5px;
        width: fit-content;
        box-shadow: 4px 4px 0px var(--secondtext-color); /* Add drop shadow */
        max-width: 230px;
       /* word-wrap: break-word; */
       white-space: pre-wrap;
    }

    .msgUser {
        background-color: var(--accent-color);
        text-align: right;
        margin-left: auto;
        color: var(--bg-color);
    }

    .msgBot {
        background-color: var(--second-color);
        text-align: left;
        margin-right: auto;
        color: var(--accent-color);
    }

    .msg p {
        font-size: 14pt; /* Reduced font size */
        font-variation-settings: 'wght'500;
        margin : 0px;
    }

    .msgpinned{
        position: sticky;
        top: 5;
        background-color: var(--bg-color);
        /*padding: 5px 0 5px 0; */
    }

    .inputContainer{
        height: fit-content;
        padding: 5px 5px 5px 5px;
        max-height: 500px;
        border-radius: 0px 0px 10px 10px;
        display: flex;
        background-color: var(--chat-border);
        width: 100%;
        box-sizing: border-box; 
        max-width: 500px;
        margin-top: 0;
        margin-bottom: 15px;
    }

    #inputMsg{
        background-color: white;
        border: none;
        border-color: var(--accent-color);
        border-radius: 8px;
        color: var(--secondtext-color);
        padding: 5px 10px;
        display: inline-block;
        margin: 2px 2px;
        flex-grow: 1;
        font-size: 20px;
    }

    #sendMsg{
        background-color: var(--accent-color);
        border: none;
        border-radius: 10px;
        padding: 5px 10px;
        text-align: center;
        display: inline-block;
        margin: 2px 2px;
        font-size: 15pt;
        font-variation-settings: 'wght' 100;
    }

    .svgline{
        stroke: rgb(0, 0, 0);
        stroke-width: 3px;
        fill: none
    }

    .svgbg{
        fill: white;
    }

    .svgtext{
        /*text-anchor: middle;
        dominant-baseline: middle;*/
        fill: black; 
        font-size: 15px;
        }

    .toast {
        position: fixed;
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--secondtext-color);
        color: var(--accent-color);
        padding: 10px 20px;
        border-radius: 5px;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        font-size: 15px;
    }

    .toastshow {
        opacity: 1;
    }