/* ********** General ********** */
.cursor_pointer{
    cursor: pointer;
}

[x-cloak] { display: none !important; }

/* Custom button light 1 */
.custom_button_light_1{
    padding: 8px;
    border: 1px solid rgb(50, 5, 128);
    border-radius: 5px;
    cursor: pointer;
    width: auto;
    display: inline-flex;
    transition: box-shadow ease 0.5s;
}

.custom_button_filled_1{
    color:white;
    background-color: rgb(50, 5, 128);
    padding: 8px;
    border: 1px solid rgb(50, 5, 128);
    border-radius: 5px;
    cursor: pointer;
    width: auto;
    display: inline-flex;
    transition: box-shadow ease 0.5s;
}

.custom_button_light_1:hover{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

/* ********** / general ********** */

/* ***** Modal ***** */
.modal_wrapper_custom{
    position: fixed;
    width: 100vw;
    height: 100dvh;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 150;
}

.modal_new{
    width: 400px;
    /* height: 100px; */
    background-color: white;
    border: 1px solid rgb(50, 5, 128);
    margin-top: -200px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.modal_header{
    display: flex;
    padding: 10px;
}

.modal_closing_x{
    margin-left: auto;
    cursor: pointer;
}

.modal_body{
    padding: 10px;
}

.modal_footer{
    display: flex;
    padding: 10px 20px;
}

.modal_footer > div{ cursor: pointer; }

.modal_footer > div:last-child{
    margin-left: auto;
}




/* ***** / modal ***** */

/* ***** Form Styles ***** */
.form_new_custom input, .form_new_custom select{
    width: 100%;
    border: 1px solid #D0D0D0;
    border-radius: 5px;
    padding: 5px;
}

.form_new_custom > div{
    margin-bottom: 10px;
}
/* ***** /form styles ***** */

/* ***** Table (custom) ***** */
.table_custom_new{ width: 100%;}
/* ***** / table (custom) ***** */

/* ***** Patient picker chat modal ***** */
.chat_modal_patient_picker > div {
    display: flex;
    margin-bottom: 8px;
}

.chat_modal_patient_picker > div > div:last-child {
    margin-left: auto;
}


/* ***** / patient picker chat modal ***** */

/* ***** Nav sidebar ***** */
.lqd-navbar-link{
    font-size: 16px;
}

.lqd-navbar-link svg{
    width: 24px;
    height: 24px;
}

.lqd-navbar-logo img{
    max-width: 85%;
}

/* ========== CHAT NEW ========== */
/* Wrapper */
.chat_new_general_wrapper{
    display: flex;
    border: 1px solid #E8E8E8;
    height: 100%;
    height: calc(100dvh - 77px); /* 77px is the header height */
}

.chat_new_general_wrapper .chat_new_sidebar_wrapper{
    position: relative;
    flex-basis: 20%;
    /* border: 1px solid green; */
    border-right: 1px solid #E8E8E8;
    min-width: 315px;
    
    height: calc(100dvh - 64px);
    top: -1px;
}

/* chat sidebar livewire component */
.chat_new_general_wrapper .chat_new_sidebar_wrapper > div:last-child{
    position: relative;
    height: 95%;
    z-index: 100;
}

.chat_new_general_wrapper .main_chat_wrapper{
    flex-basis: 80%;
    /* border: 1px solid orange; */
}

/* One chat instance container */

.main_chat_new_livewire_div{
    height: 100%;
}

.chat_instance_container{
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    
}

/* Chat messages */
.chat_messages_general_container{
    overflow-y: auto;
    height: 100%;
    padding: 10px 20px;
    /* max-height: 85vh; */
}

/* Chat inputs */
.chat_inputs_general_container{
    margin-top: auto;
    width: 100%;
    border-top: 1px solid #E8E8E8;
    padding: 5px;
    gap: 8px;
    display: flex;
}

.chat_inputs_general_input_wrapper{
    flex-grow: 1;

}

.chat_inputs_general_input_wrapper input{
    width: 100%;
    padding: 5px;
    border-radius: 5px;
}

/* Chat single message */
.chat_messages_general_container .chat_single_message_wrapper {
    display: flex;
    margin-bottom: 10px;
}

.chat_messages_general_container .chat_message_new-ai, .chat_message_new-user{
    padding: 10px;
    border-radius: 10px;
    max-width: 95%;
}

.chat_messages_general_container .chat_message_new-ai{
    background-color: rgb(241, 241, 243);
}

.chat_messages_general_container .chat_message_new-user{
    background-color: rgb(243, 226, 253);
    margin-left: auto;

}

/* *** Chat controls *** */
.chat_inputs_controls_wrapper{
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* Chat send button */
.chat_inputs_controls-send_buton{
    margin-left: auto;
    background-color: rgb(50, 5, 128);
    color: white;
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
    /* width: 32px; */
    height: 32px;
    display: flex;
    gap: 5px;
    align-items:center;

}

.chat_inputs_controls-send_buton img{
    width: 18px;
    height: 18px;
}

.chat_inputs_controls-clear_chat img{
    width: 24px;
    height: 24px;
}

.chat_inputs_controls-clear_chat{
    margin-left: auto;
    background-color: #97233F;
    color: white;
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
    /* width: 32px; */
    height: 32px;
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Loading animation in chat */
.chat_loading_animation {
    align-items: center;
    display: flex;
    justify-content: center;
  }
  
  .loading__dot {
    animation: dot ease-in-out 1s infinite;
    background-color: grey;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 3px;
    border-radius: 50%;
  }
  
  .loading__dot:nth-of-type(2) {
    animation-delay: 0.2s;
  }
  
  .loading__dot:nth-of-type(3) {
    animation-delay: 0.3s;
  }
  
  @keyframes dot {
    0% { background-color: grey; transform: scale(1); }
    50% { background-color: #bada55; transform: scale(1.3); }
    100% { background-color: grey; transform: scale(1); }
  }

/* / loading animation in chat */ 

/* *** Sidebar styling *** */

.chat_sidebar_section_title{
    border-bottom: 1px solid #E8E8E8;
    font-size: 22px;
    font-weight: bold;
    height: 64px;
    display: flex;
    padding: 0px 10px;
    align-items: center;
}

.chat_sidebar_section_title > div:first-child{
    margin: 0;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    position: relative;

}

/* Chat sidebar container */
.chat_new_sidebar_wrapper .chat_sidebar_chat_list{
    position: relative;
    max-height: calc(100% - 64px);
    overflow: auto;
}

/* Scroll for chat sidebar */
*{
    scrollbar-color: auto;
}

.custom_scroll::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: white !important;
  }

.custom_scroll::-webkit-scrollbar{
    width: 8px;
    /* background-color: red !important; */
  }

.custom_scroll::-webkit-scrollbar-thumb{
    background-color: rgb(50, 5, 128);
    border: 1px solid rgb(50, 5, 128);
  }
/* / scroll for chat sidebar */

.chat_sidebar_chat_list_entry{
    height: 72px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E8E8E8;
    padding: 0px 10px;
    font-size: 16px;
    gap: 10px;
}

.chat_sidebar_chat_list_entry .chat_title_and_patient_info_block{
    flex-grow: 0;
    overflow: hidden;
}

.chat_sidebar_chat_list_entry .chat_title_block a{
    font-size: 18px;
    white-space: nowrap;
}

.chat_sidebar_chat_list_entry .patient_info_block{
    color: lightgray;
}

.chat_sidebar_chat_list_entry-active{    
    border-left: 4px solid rgb(50, 5, 128);
}

.chat_sidebar_chat_list_entry-active .chat_title_block{
    font-weight: bold;
}

.chat_inputs_toggle_sidebar_mobile_img{
    width: 32px;
}



/* Chat Sidebar Edit Button */
.chat_sidebar-edit_chat_icon{
    margin-left: auto;
    cursor: pointer;
}

/* Chat Sidebar Delete Button */
.chat_sidebar-delete_chat_icon{
    cursor: pointer;
}

.chat_sidebar-edit_chat_icon, .chat_sidebar-delete_chat_icon{ display: none; }
.chat_sidebar_chat_list_entry:hover .chat_sidebar-edit_chat_icon, .chat_sidebar_chat_list_entry:hover .chat_sidebar-delete_chat_icon{ display: block; }

/* New Chat Button */
.chat_sidebar_new_button{
    position: absolute;
    bottom: 50px;
    width: 160px;
    left: calc(50% - 80px); /* change 'left' after width change */
    display: flex;
    justify-content: center;
    padding: 5px 0px; /* padding tom & bottom */
    background-color: rgb(50, 5, 128);
    color: white;
    border-radius: 5px;
    cursor: pointer;

}
/* / new chat button */

/* *** / sidebar styling *** */

/* ===== Responsive Design : 800px breakpoint ===== */
#toggle_sidebar_test{ display: none; }
.mobile_sidebar_darkened_background{ display: none; }
.header_ai_care_planner_label{ margin-left: 0; display: flex; align-items: center; }
.toggle_sidebar_no_chat_selected_ui{ display: none; }
.chat_sidebar_closing_x_mobile{ display: none; }

@media screen and (max-width: 800px){
    
    .chat_new_general_wrapper {
        position: absolute;
        left: -315px;
    }


    .chat_new_sidebar_wrapper{
        position: absolute;
        width: 315px;
        /* left: 315px; */
        z-index: 100;
        background-color: white;
        left: 0px;
        transition: left 1s;
        
        
    }

    .chat_new_sidebar_wrapper-toggled_mobile{
        left: 315px;
    }

    .chat_inputs_general_container{
        flex-direction: column;
    }

    .chat_inputs_controls_wrapper{ margin-left: 0; }

    #toggle_sidebar_test{ display: block; }

    /* Darkened background */
    .mobile_sidebar_darkened_background{
        position: fixed;
        top: 64px;
        left: 0;
        width: 100vw;
        height: calc(100dvh - 64px);
        background-color: rgba(0,0,0,0.5);
        z-index: 20;
    }
    
    /* Darkened background on mobile toggle */
    .mobile_sidebar_darkened_background-active{ display: block; }

    /* Fix for chat container width (on mobile) */
    .chat_instance_container{ width: calc(100vw - 3px); }

    /* Fix for header icons */
    .header_ai_care_planner_label{ margin-left: auto; }

    /* Show chat management buttons in sidebar (always) */
    .chat_sidebar_chat_list_entry-active .chat_sidebar-edit_chat_icon, .chat_sidebar_chat_list_entry-active .chat_sidebar-delete_chat_icon{ display: block; }

    /* Toggle sidebar button on new chat selected UI */
    .toggle_sidebar_no_chat_selected_ui{
        display: inline-flex;

        justify-content: center;
        align-items: center;
        padding: 5px 10px;
        border: 1px solid rgb(50, 5, 128);
        
        border-radius: 5px;
        cursor: pointer;
        margin: 0 auto;
    }

    /* Closing 'X' on mobile */
    .chat_sidebar_closing_x_mobile{
        display: inline-block;
        position: absolute;
        right: 10px;
        top: 3px;
    }


}
/* ===== / responsive design ===== */

/* ===== MISC ===== */
.custom_padding_left_25px { padding-left: 25px !important; }

/* Validation error (for forms) */
.validation_error_1 {
    color: red;
}

html{ height: 100%; }

/* ===== Transcription ===== */
.transcription_container{
    max-height: 50dvh;
    overflow: auto;
    border: 1px solid #E8E8E8;
    padding: 5px;
    margin: 10px 0px;
    border-radius: 10px;
}
/* ===== / transcription ===== */