@font-face {
        font-family: 'Chewy';
        src:url('fonts/Chewy-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Roboto Mono';
        src:url('fonts/RobotoMono-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .fragment-toolbar.light .toolbar-center,
    .fragment-toolbar.light .toolbar-font-icon .fa{
        color: rgba(255, 255, 255, 0.7);
    }

    #settings.show{z-index:11}
    #settings-activity-view{
        max-width: 420px;
    }
    

    :root{
        --bg-white: #fff;
        --bg-grey-white: #fefefe;
    }

    .font-icon.medium{
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 50%;
    }

    .font-icon.medium .fa{
        font-size: 18px;
    }

    h2 {
        font-size: 220%;
        margin: 16px 0 8px;
    }

    a{
        text-decoration: none;
    }

    .font-icon.tiny{
        margin: 0;
        width: 24px;
        height: 24px;
        border: none;
    }

    .font-icon.tiny .fa{
        font-size: 12px;
    }

    .app-tile{
        background: #fff;
        border-radius: 10px;
        box-shadow: var(--elevation);
    }

    .button{
        margin:0 auto 16px;
    }

    .primary-colour{
        color: var(--primary-color);
    }
    .link{
        color: var(--primary-color);
        font-family: var(--body-bold-font);
    }

    .font-body-small{
        font-size: 13px;
    }

    .ellipsis{white-space: nowrap;overflow: hidden;text-overflow: ellipsis; display:inline-block; padding:0; width:100%}

   
    /*:root{
        --safe-area-inset-top: 44px;
        --safe-area-inset-bottom: 22px;
    }*/
    .md-content{
        border-radius: 10px;
    }

    .activity-view-controller .appear-from-right{
        max-width: none;
    }


    .show-on-mobile{
        display:none;
    }

    .border-none{
        border: none!important;
    }

    .toolbar-drag-handle{
        cursor: pointer;
        height: 6px;
        background:rgba(0,0,0,0.5);
        border-radius: 3px;
        width: 25vw;
        max-width: 200px;
    }

    .text-content ul{
        padding:var(--padding-small) var(--padding-small) calc(var(--padding-small) - 4px)
    }

    .text-content ul li{
        margin-bottom: 4px;
    }



    .width-constraint-medium{
        max-width: 720px;
    }

    .bg-white-grey{
        background:var(--bg-grey-white)
    }

    #background-stage.hidden{
        z-index: -1!important;
    }

    
    


    .clickable,
    .round-button,
    .arrow-field,
    .toolbar-font-icon,
    .chat-menu-item{
        cursor: pointer;
    }

    
    /*===================================================
    // INPUTS
    /==================================================*/

    .contenteditable:empty::before{
        content:attr(placeholder);
        opacity: 0.5;
    }


    /*===================================================
    // CHAT
    /==================================================*/

    #chat-input{
        word-break: break-word;
    }

    /*=== Mic states ===*/
    #chat-input-container.mic-active .bg-grey{
        background:var(--primary-color-1A);
    }

    #chat-input-container.mic-active .fa{
        color:var(--primary-color);
    }

    #microphone-btn{
        position: relative
    }

    #microphone-btn:after,
    #microphone-btn:before{
        content:' ';
        position: absolute;
        width: 100%;
        height: 100%;
        border:2px solid var(--primary-color-4D);
        border-radius: 50%;
        opacity: 0;
        transform: scale(0);
    }

    #chat-input-container.mic-active #microphone-btn:after,
    #chat-input-container.mic-active #microphone-btn:before{
        animation: expand-and-fade 1s infinite linear;
    }

    #chat-input-container.mic-active #microphone-btn:before{
        animation-delay: 0.3s;
    }

    @keyframes expand-and-fade{
        0%{
            transform: scale(0);
            opacity: 0;
        }
        50%{
            transform: scale(1);
            opacity: 1;
        }
        100%{
            transform: scale(2);
            opacity: 0;
        }
    }


    /*=== Messages and chats ===*/

    #message-send-btn.active{
        color:var(--primary-color);
    }
    

    #chat-menu-activity-view{
        width:90%;
        max-width: 360px;
        border-radius: 0 var(--radius) var(--radius) 0;
    }

    #chat-menu-activity-view .fragment-toolbar{
        border-radius: 0 var(--radius) 0 0;
    }

    #chat-view{
        padding-top:calc(48px + var(--safe-area-inset-top));
        padding-bottom: calc(120px + var(--safe-area-inset-bottom));
        max-width:640px;
        margin:0 auto;
    }

    

    .chat-message-item .chat-message-bubble{
        padding:var(--padding-small) var(--padding-small) 0;
        border:1px solid transparent;
        max-width: 520px;
        border-radius: var(--radius);
    }

    


    .chat-message-item.role-user{
        text-align: right;
    }

    .chat-message-meta{
        font-size: 10px;
        padding:0px 22px;
    }

    .chat-assistant-options{
        padding:0 var(--padding-small);
        display:none;
    }

    .role-assistant .chat-assistant-options{
        display: block;
    }

    .role-assistant.role-assistant.placeholder .chat-assistant-options{
        display: none;
    }

    @media screen and (pointer: fine) {

        .chat-message-item.role-assistant.completed .chat-message-bubble{
            transition: all 0.2s ease-in-out;
        }

       .chat-message-item.role-assistant.completed .chat-message-bubble:hover{
            border:1px solid rgba(0, 0, 0, 0.075);
            box-shadow: var(--elevation-low);
            cursor: pointer;
            transform: translateY(-2px);
        }

    }

    .chat-assistant-options .fa{
        font-size:17px;
        opacity: 0.5;
        margin-top: -8px;
    }

    .chat-assistant-options .fa:hover{
        opacity: 1;
        color:var(--primary-color);
        cursor: pointer;
    }

    .chat-message-text ul, .chat-message-text ol{

        padding:0 var(--padding-small) var(--padding-small);

    }

    .chat-message-text li{
        margin-bottom: 4px;;
    }

    .chat-message-text ol > li::marker {
        font-family: var(--body-bold-font);
    }

    .chat-message-item.role-user .chat-message-bubble{
        padding:var(--padding-small) var(--padding-small) 0;
        border-radius: var(--radius);
        background: linear-gradient(0deg,  var(--primary-color-66), var(--primary-color-4D));
        width:auto;
        margin: var(--margin-small) var(--margin-small) 0 auto;
        display: inline-block;
        text-align: left;
        max-width: 75%;
    }

    .chat-message-username{
        font-family: var(--body-bold-font);
    }

    .chat-message-time{
        opacity: 0.6;
    }


    .chat-message-item hr{
        border: none;
        border-top: 1px solid rgba(0, 0, 0, 0.075);
        margin: 0 0 12px;
    }
    

    .chat-message-item.role-assistant .chat-message-meta,
    .chat-message-item.placeholder .chat-message-meta{
        opacity: 0;
    }


    .role-assistant.placeholder strong{
        display: block;
        position: relative;
        background: linear-gradient(
            to right,
            var(--secondary-color) 30%,
            var(--primary-color) 60%,
            var(--primary-light-color) 90%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        background-size: 33% auto;
        animation: textShine 3s ease-in-out infinite ;
        font-family: var(--body-bold-font);
        
    }

    
    
    @keyframes textShine {
        0% {
            background-position: 0% 50%;
        }
        100% {
            background-position: 100% 50%;
        }
    }



    /*=== Chat Menu ===*/

    .chat-menu-item{
        padding:8px 12px;
        margin:4px 0;
        border-radius: var(--radius-medium);
        
        opacity: 0.8;
    }

    .chat-menu-item:hover{
        opacity: 1;
        background:rgba(0,0,0,0.03);
    }

    .chat-menu-item.active{
        opacity: 1;
        background:rgba(0,0,0,0.05);
    }


    #chat-aside-menu{
        display:none;
    }


    /*===================================================
    // BUTTONS / ICONS
    /==================================================*/


    .user-icon{
        display: block;
        border-radius: 50%;
        width:100%;
        height: 100%;
    }

    .icon-loading,.button.loading:after{
        box-sizing: border-box;
        width: 32px;
        height: 32px;
        border-radius: 100%;
        border: 2px solid rgba(255, 255, 255, 0);
        border-top-color: var(--primary-color);
        -webkit-animation: turn 1s infinite linear;
        animation: turn 1s infinite linear;
        display:block;
        content:"";
        text-indent: -9999px;
        background: none;
    }	 

    .button.loading:after{position: absolute; top: 7px; right: 11.5px; width: 28px; height: 28px; border-top-color: #fff}

    .theme-color-btn{
        width:36px;
        height: 36px;
    }


    .round-button{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin: 0 auto;
        
    }

    .round-button .fa{
        font-size:19px;
    }

    .label-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .label-icon .fa{font-size:17px; opacity: 0.8;}


    /*=== LANGUAGE BADGES ===*/

    /* Default, Light */
    .language-badge{
        width: 32px;
        height: 18px;
        border: 1.5px solid #2d2d2d;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: monospace;
        line-height: normal;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.25px;
    }

    /* Thin */
    .fa-style-thin .language-badge{
        width: 33px;
        height: 19px;
        border: 1px solid #2d2d2d;
        font-weight: 100;
    }


    /* Sharp */
    .fa-style-sharp-solid .language-badge,
    .fa-style-sharp-regular .language-badge,
    .fa-style-sharp-light .language-badge{
        border-radius: 0!important;
    }


    /* Regular */
    .fa-style-sharp-regular .language-badge,
    .fa-style-regular .language-badge{
        width: 31px;
        height: 17px;
        border: 2px solid #2d2d2d;
        font-weight: 700;
    }
    

    /* Solid */
    .fa-style-duotone .language-badge,
    .fa-style-sharp-solid .language-badge,
    .fa-style-solid .language-badge{
        width: 29px;
        height: 15px;
        border: 3px solid #2d2d2d;
        font-weight: 900;
    }


    /* Tiny, Default */
    .language-badge.tiny{
        border-width: 1px;
        width: 21.5px;
        height: 13.5px;
        font-size: 10px;
        border-radius: 3px;
        justify-self: center;
        color: #2d2d2d;
    }


    /* Tiny, Regular & Solid */
    .fa-style-duotone .language-badge.tiny,
    .fa-style-sharp-solid .language-badge.tiny,
    .fa-style-sharp-regular .language-badge.tiny,
    .fa-style-solid .language-badge.tiny,
    .fa-style-regular .language-badge.tiny{
        border-width: 2px;
        width: 19.5px;
        height: 11.5px;
    }


    @media screen and (max-width:391px) {
        
        .chat-message-text, .chat-message-text p{
            /*font-size: 14px;*/
        }

    }

    @media screen and (max-width: 768px){

        .width-constraint-medium{
            width: 100%;
            max-width: 100%;
        }
        
    }

    @media screen and (min-width: 900px){

        ::-webkit-scrollbar
        {
            width: 8px;
            margin-right:5px;
        }

        /* TRACK */
        ::-webkit-scrollbar-track {
                background: rgba(0,0,0,0.05);
            -webkit-border-radius: 0;
            border-radius: 0;
            
        }
        

        
        /* THUMB */
        ::-webkit-scrollbar-thumb
        {
            /* This is the EXACT color of Mac OS scrollbars. 
                Yes, I pulled out digital color meter */
            background: rgba(0,0,0,0.1);;
            -webkit-border-radius: 100px;
            
        }
        ::-webkit-scrollbar-thumb:vertical:active
        
        {
            background: rgba(0,0,0,0.61); /* Some darker color when you click it */
            -webkit-border-radius: 100px;
        }

        .center-on-phablet{
            display: flex;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            max-height: -webkit-fill-available;
            justify-content: center;
        }

        #chat-input-container{
            box-shadow: var(--elevation);
            max-width: 640px !important;
            border-radius: var(--radius);
            border: 1px solid rgba(0, 0, 0, 0.075);
            padding: 0px;
            width: 80%;;
            margin-bottom: 28px !important;
        }

        #chat-activity-container{
            display: grid;
            grid-template-columns: 320px 1fr;
        }

        #chat-aside-menu{
            display:block;
        }

        #chat-view-container{
            border-radius: var(--radius);
            position: relative;
            
            height:calc(100vh - 32px);
            margin:16px 16px 16px 0;
            border:1px solid rgba(0, 0, 0, 0.075)
        }

        #chat-view-container .overflow{
            margin:8px;
        }

        #chat-view-container .fragment-toolbar{
            border-radius: var(--radius) var(--radius) 0 0;
        }


        #chat-view{
            max-width: 800px;
            width: 90%;
        }

        .chat-message-item .chat-message-bubble{
            width: 75%;
            max-width: 640px;
        }

        #chat-input-container .radius-large{
            border-radius: 6px;
            padding:8px 16px!important;
            background:none!important;
        }
       

        #chat-view-container .toolbar-left{
            display: none!important;
        }

    }



    @media screen and (max-width: 743px) and (orientation: portrait), screen and (max-height: 500px) and (orientation: landscape) {
        .show-on-mobile{
            display:block;
        }

        .show-on-tablet{
            display:none;
        }

        
    }

    @media screen and (min-width: 743px) and (orientation: portrait), screen and (max-height: 500px) and (orientation: landscape) {
        .center-on-phablet{
            display: flex;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            max-height: -webkit-fill-available;
        }
    }