:root{
	/* --color-light-gray: #454545;
	--color-gray: #2C2C2C;
	--color-dark-gray: #202020;
	--color-darked-gray: #111111;
    --light-color: #E2E2E2; */
    --color-light-gray: #BABABA;
	--color-gray: #D3D3D3;
	--color-dark-gray: #DFDFDF;
	--color-darked-gray: #EEEEEE;
    --light-color: #1D1D1D;
    --black-color: #333333;
    --text-color: #EBEBEB;
    --text-dark-color: #0C0C0C;
    --color-orange-red: #FF5733;
    --color-turquis: #1c9795  ;
    --color-dark-blue: #041c27;
    --color-coral: #FF6F59;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Stylizacja paska przewijania */
::-webkit-scrollbar {
    width: 10px; /* Szerokość paska przewijania */
    height: 10px; /* Wysokość paska przewijania dla poziomego scrolla */
}

/* Tło paska przewijania */
::-webkit-scrollbar-track {
    background: var(--color-dark-gray); /* Kolor tła paska przewijania */
}

/* Uchwyt (suwak) paska przewijania */
::-webkit-scrollbar-thumb {
    background: var(--color-turquis); /* Kolor uchwytu paska przewijania */
    border-radius: 0px; /* Zaokrąglenie krawędzi uchwytu */
}

/* Uchwyt paska przewijania podczas najechania */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-gray); /* Kolor uchwytu paska przewijania podczas najechania */
}

/* Przyciski (górny i dolny) paska przewijania - ukrycie */
::-webkit-scrollbar-button {
    display: none; /* Ukrycie przycisków na górze i dole paska przewijania */
}


.overflow-y-auto{
    overflow-y: auto;
}

.max-height-card{
    max-height: calc(100vh - 270px);
}

body{
    background-color: var(--color-dark-gray);
    color: var(--text-dark-color);
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#dashboard{
    height:100vh;
    overflow: hidden;
}

#assistantList{
    overflow-y: auto;
    overflow-x: hidden;
    height: 80%;
    padding-bottom: 20px;
}

/* Stylowanie sidebaru */
.sidebar {
    height: 100vh;
    background-color: #f8f9fa;
}

/* Stylowanie przycisków */
.btn-edit, .btn-delete {
    margin-left: 5px;
}

/* Stylowanie ikon */
.fas {
    margin-right: 5px;
}
.form-control{
    color: var(--text-dark-color);
    background-color: var(--color-light-gray);
    border: 1px solid var(--light-color);
}
.form-control:focus{
    background-color: var(--color-gray);
    color: var(--text-dark-color);
}
.bg-dark-grey{
    background-color: var(--color-darked-gray);
}

.bg-black-custom{
    background-color: var(--black-color);
}

.text-black-custom{
    color: var(--black-color);
}

.bg-dark-blue{
    background-color: var(--color-dark-blue);
}

.btn-turquise,.btn-turquis{
    color: var(--text-color);
    background-color: var(--color-turquis);
    border-color: var(--color-turquis);
}

.btn-dark-blue{
    color:var(--text-color);
    background-color: var(--color-dark-blue);
    border-color: var(--color-dark-blue);
}
.btn-orange-red{
    color: var(--text-color);
    background-color: var(--color-orange-red);
    border-color: var(--color-orange-red); 
}
.form-check-input:checked {
    background-color: var(--color-turquis);
    border-color: var(--color-turquis);
}
/* Stylowanie formularza */
#createAssistant {
    background-color: var(--color-gray);
    border-radius: 5px;
}
/* Stylowanie dropzone */
#fileDropzone {
    border: 2px dashed var(--color-darked-gray);
    border-radius: 5px;
    text-align: center;
    padding: 20px;
    transition: border .3s ease-in-out, background-color .3s ease-in-out;
    cursor: pointer;
}

#fileDropzone.drag-over {
    border-color: var(--color-darked-gray);
    background-color: var(--color-light-gray);
}

#fileDropzone p {
    margin: 0;
    font-weight: bold;
    color: var(--color-turquis);
}

/* Animacja dla załączonego pliku */
@keyframes fileAddedAnimation {
    0% { background-color: #e2e6ea; }
    50% { background-color: #c8e6c9; }
    100% { background-color: #e2e6ea; }
}

.file-added {
    animation: fileAddedAnimation 1s ease-in-out;
}

#fileDropzone.file-error {
    border: 2px dashed var(--color-orange-red);
    background-color: var(--color-light-gray);
}

#fileDropzone.file-error p {
    color: var(--color-orange-red);
}

.file-preview {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.file-icon {
    margin-right: 10px;
    font-size: 24px;
}

.drag-drop-zone.disabled {
    background-color: #f0f0f0;
    color: #ccc;
    pointer-events: none;
    cursor: not-allowed;
}

#fileDropzone {
    border: 2px dashed var(--color-darked-gray);
    border-radius: 5px;
    text-align: center;
    padding: 20px;
    cursor: pointer;
    transition: background-color .3s, border-color .3s;
    background-color: var(--color-light-gray);
    max-height: 300px;
    overflow-y: auto;
}

#fileDropzone.files-added {
    border: 2px solid var(--color-turquis); 
}

#fileDropzone.drag-over {
    border-color: var(--color-turquis);
    background-color: var(--color-light-gray);
}

#fileDropzone p {
    margin: 0;
    font-weight: bold;
    color: var(--color-turquis);
}

.file-error {
    color: var(--color-orange-red);
    border-color: var(--color-orange-red);
}

.file-preview {
    border: 1px solid var(--color-gray);
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.file-icon {
    font-size: 24px;
    margin-right: 10px;
}

.file-name {
    flex-grow: 1;
    margin-right: 10px; /* Dostosuj margines, jeśli to konieczne */
}

.progress-bar-container {
    background-color: var(--light-color);
    border-radius: 5px;
    overflow: hidden;
    height: 10px;
    padding:0;
}

.progress-bar {
    height: 100%;
    background-color: var(--color-turquis);
    width: 0%;
    transition: width 0.5s ease;
}

.delete-button,.remove-button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-orange-red); 
    font-size: 1.2rem;
}

.delete-button:hover,.remove-button:hover {
    color: var(--color-orange-red); 
}

#showFormButton{
    border-radius: 0;
}

.chat-container {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    margin:0;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    border-radius: 8px;
    overflow: hidden;
    /* background-color: var(--color-gray); */
    max-height: calc(100vh - 185px);
    background-image: url('/img/taxologo.png'); 
    background-repeat: no-repeat; 
    background-size: contain;
    background-position: center center;
}

.chat-box {
    height: calc(100% - 495px);
    overflow-y: auto;
    padding: 20px;
    /* background-color: #fff; */
    border-bottom: 1px solid #e9e9e9;
}

.chat-box.box-mess{
    height: calc(100% - 30px);
}

.chat-form{
    height:50px;
}

.message {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 20px;
    color: white;
    max-width: 70%;
    word-wrap: break-word; 
}

.user {
    background-color: #007bff;
    margin-left: auto;
    margin-right: 10px;
    text-align: right;
}

.ai {
    background-color: #333;
    margin-left: 10px;
    text-align: left;
}

.chat-containter{
    position: absolute;
    max-width: 830px;
    width: 90vw;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 60px;
    /* overflow: hidden; */
}

.chat-form {
    display: flex;
    border-top: 1px solid #e9e9e9;
    background-color: #f9f9f9;
    border-radius: 50px;
    overflow: hidden;
}

.chat-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    /* margin-right: 10px;
    border-radius: 30px 0 0 30px; */
}

.chat-submit {
    padding: 10px 20px;
    border: none;
    background-color: var(--color-turquis);
    color: var(--text-color);
    cursor: pointer;
}

.chat-submit:hover {
    background-color: var(--color-turquis);
}

.stop-run-button{
    padding: 10px 20px;
    border: none;
    background-color: var(--color-orange-red);
    color: var(--text-color);
    cursor: pointer;
}
 
.mhh-100{
    max-height: calc(100vh - 3rem);
}

.message-user {
    background-color: var(--light-color);
    color: var(--color-dark-gray);
    padding: 12px 24px;
    margin: 5px;
    border-radius: 8px;
    text-align: left;
    max-width: max-content;
    margin-left:auto;
    background-color: rgba(29,29,29,0.85);
    backdrop-filter: blur(10px);
}

.message-user p,
.message-assistant p{
    margin-bottom: 0;
}

.message-assistant {
    background-color: var(--color-turquis);
    color: var(--text-color);
    padding: 12px 24px;
    margin: 5px;
    border-radius: 8px;
    text-align: left;
    max-width: max-content;
    margin-right:auto;
    background-color: rgba(28, 151, 149, 0.85);
    backdrop-filter: blur(10px);
}

.message-assistantol{
    padding-left:0;
}

.list-group-item{
    padding:2px 8px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 10px !important;
    font-size: 12px;
    background-color: var(--color-gray);
}

.list-group-item span{
    color:var(--color-orange-red);
}

.list-group-item span a{
    color: var(--text-dark-color);
    font-weight:600;
    text-decoration: none;
}

.options-container {
    display: inline-block;
}

.options-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 18px;
}

.dot {
    height: 4px;
    width: 4px;
    background-color: var(--color-turquis);
    border-radius: 50%;
    display: inline-block;
}

.options-menu {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--color-gray);
    min-width: 70px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
}

.options-item {
    color: black;
    padding: 2px 5px;
    text-decoration: none;
    display: block;
}

.options-item:hover {
    background-color: var(--color-dark-gray);
}

.show {
    display: block;
}

#test-thread h2{
    font-size: 24px;
}

.avatar-box{
    width:100%;
    height:345px;
}

.select-custom {
    display: block;
    width: 100%; 
    padding: 10px;
    font-size: 16px; 
    border: 1px solid var(--color-light-gray); 
    background-color: var(--color-dark-gray);
    color: var(--text-dark-color);
    appearance: none; 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%230E0E0E" d="M12 14l-4-4h8z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px top 50%; 
}

.select-custom:focus {
    outline: none;
    border-color: var(--color-turquis); 
}

#videoElement{
    max-width:100%;
}
.avatar{
    max-height:345px;
    overflow: hidden;
}

#dashboard .card{
    background-color: var(--color-light-gray);
}

a.turquis{
    color: var(--color-turquis);
}
a.dark-blue{
    color:var(--color-dark-blue);
}
a{
    text-decoration: none !important;
}
nav{
    height:50px;
}
.header {
    color: var(--color-gray);
    /* background-color: var(--color-turquis); */
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    height:70px;
}
.header .logout-btn {
    color: var(--color-orange-red);
    text-decoration: none;
    font-size: 1rem;
    font-weight:700;
}
.header .logout-btn:hover {
    text-decoration: underline;
}
.height-calc{
    height: calc(100% - 70px);
}
#sidebar {
    background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.5) 0%,  /* Jaśniejszy na górze */
    rgba(0, 0, 0, 0.75) 250px,    /* Coraz ciemniejszy od 100px */
    rgba(0, 0, 0, 0.9) 100%),    /* Ciemne tło poniżej 100px */
    url('/img/robot.png') no-repeat center center;
    background-size: cover;
    padding-right: 0 !important;
}
.menu ul li{
    /* background-color: var(--black-color); */
    transition:all .25s ease-in-out;
    backdrop-filter: blur(5px);
}
.menu ul li.active{
    background-color: var(--color-turquis);
}
.menu ul li:hover{
    /* background-color: var(--light-color); */
    background-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(25px);
}

.menu a span{
    font-size:14px;
}
.menu a i{
    font-size: 22px;
}
.border-orange{
    border: 1px solid var(--color-orange-red);
}

.logout a.logout-btn{
    color: var(--color-orange-red);
    background-color: var(--black-color);
    transition: all .4s ease-in-out;
}

.logout:hover a.logout-btn{
    background-color: var(--color-orange-red);
    color:var(--text-color);
}
.border-top-orange{
    border-top: 1px solid var(--color-orange-red);
}
ul.list-unstyled li{
    border-bottom: 0.5px solid var(--color-light-gray);
}
.container{
    background-color: var(--color-gray);
    border-radius: 5px;
}


/* Stylizacja listy wątków */
.enhanced-thread-item {
    transition: background-color 0.3s;
    border-radius: 8px;
    padding: 5px 15px;
}

.enhanced-thread-item:hover {
    background-color: var(--black-color);
}

/* Stylizacja linku w wątku */
.thread-link:hover {
    text-decoration: underline;
}

/* Stylizacja przycisków */
.btn-outline-turquise {
    color: var(--color-turquis);
    border-color: var(--color-turquis);
}

.btn-outline-turquise:hover {
    background-color: var(--color-turquis);
    color: var(--text-color);
}

.btn-outline-orange-red {
    color: var(--color-orange-red);
    border-color: var(--color-orange-red);
}

.btn-outline-orange-red:hover {
    background-color: var(--color-orange-red);
    color: var(--text-color);
}

.threads-list li a.thread-link{
    font-size:14px;
    font-weight:600;
    color:var(--color-turquis);
}

#showFormButton{
    padding: 7.25px 10px;
}

.text-turquise{
    color: var(--color-turquis);
}
div.user-box p{
    font-size:1.1rem;
    font-weight: 600;
}
.page-item.active .page-link{
    background-color: var(--color-turquis);
    border-color: var(--color-turquis);
}
.pagination li{
    border: 1px  solid var(--black-color);
}
i{
    margin: 0 !important;
}

#content-panel{
    max-height: calc(100% - 50px);
    /* max-width: 950px; */
    overflow-y: auto;
}

.file-preview {
    padding: 0px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    /* margin-bottom: 15px; */
    display: flex;
    align-items: center;
}

.file-preview i.file-icon {
    font-size: 24px;
    margin-right: 10px;
}

.file-preview p.file-name {
    flex-grow: 1;
    margin: 0;
    font-weight: 500;
    font-size: 13.5px;
    text-wrap:nowrap;
}

.file-preview button.btn-danger {
    background-color: #dc3545;
    color: #fff;
    border: none;
    padding: 3px 6px;
    margin-left: 10px;
}

.file-preview button.btn-danger:hover {
    background-color: #c82333;
}

.file-preview .custom-file{
    padding: 5px 10px;
    background-color: var(--color-light-gray);
    border-radius: 5px;
}

#content-panel > div:first-of-type{
    max-width: 950px;
    width: 100%; 
    margin: 0 auto;
}

#content-panel .container.users{
    max-width: 1200px;
    height:100%;
}

ul.circle-list {
    list-style-type: disc; /* Domyślne kółko */
    padding-left: 20px; /* Odsunięcie od lewej */
    margin-bottom: 10px;
}

ul.square-list {
    list-style-type: square; /* Kwadraty */
    padding-left: 20px; /* Odsunięcie od lewej */
}

ul.square-list li {
    list-style-image: none; /* Użyj wartości kwadratu zamiast obrazka */
    font-size: 14px; /* Zmniejsz tekst, co zmniejszy kwadrat */
}

.attach-label{
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
}

.edit-message-button{
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
}

/* Podgląd załączników wyświetlany nad polem tekstowym */
.attachment-preview {
    position: absolute;
    top: -55px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.9); 
    border-radius: 10px;
    border: 1px solid #ddd;
    max-height: 55px; 
    overflow-y: auto;

}

.attachment-item {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 5px;
    width: 100px;
    height: auto;
    background-color: #f9f9f9;
}

.attachment-item img.image-preview {
    max-width: 100%; /* Dopasuj obrazki do kontenera */
    height: auto;
    border-radius: 5px;
}

.attachment-item p {
    word-wrap: break-word;
    text-align: center;
    font-size: 12px;
    margin: 0px !important;
}

.chat-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
}

.text-danger {
    color: red;
    font-weight: 600;
}

.text-warning {
    color: yellow;
    font-weight: 600;
}

.text-success {
    color: green;
    font-weight: 600;
}


.all-menu{
    max-height: calc(100% - 110px);
    overflow-y: auto;
}

.grecaptcha-badge{
    display: none;
}