@keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  th {background-color: #373737!important;}
  table {margin-top: 10px; }
  
  p {margin: 10px 0;}
  h3 {margin: 10px;}
  
  .examplesTextArea {
    width: -webkit-fill-available;
    height: 150px;
    background: #101010;
    color: #ccc;
    border: none;
    padding: 10px;
    margin: 10px;
    resize: none;
    outline: none;
    border-radius: 10px;
  }
  body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #121212;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: #EAEAEA;
    /*background: linear-gradient(-45deg, #131431, #171719, #2b2b2b, #141313, #302323);*/
    background: #1d1d1d;
    background-size: 400% 400%;
    animation: gradient-animation 60s ease infinite;
  }
  #navbar {background: #00000057;}
  #chat-container {
    position:relative;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /*padding: 0 10px;*/
    align-items: center;
    padding-top: 60px;
    z-index: 1;
    transition: 0.2s;
  }
  #messages {
    max-height: -webkit-fill-available;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 800px;
    padding: 0 5px;
    width: -webkit-fill-available;
    overflow-x: clip;
  }
  .message {
    width: fit-content;
    padding: 9px 12px;
    border-radius: 25px;
    font-size: 100%;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .message:hover .currentTime {
    opacity: 0.5;
    transition: 0.2s;
  }
  .copy-text {
    overflow: auto;
  }
  
  .user {
    background: rgba(255, 255, 255, 0.05);
    margin-left: 30px;
    margin-right: 5px;
    align-self: flex-end;
    
  }
  .user .currentTime {
    left: 0px;
    margin-left: -28px;
  }
  .ai {
    /*background: rgba(0, 0, 0, 0.1);*/
    margin-right: 30px;
    align-self: flex-start;
  }
  #bottom {
    position: relative;
    padding: 25px 0px 25px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    max-width: 800px;
    width: -webkit-fill-available
  }
  #user-input {
    flex-grow: 1;
    padding: 6px 18px;
    border-radius: 25px;
    /*background: rgba(255, 255, 255, 0.1);*/
    background: rgb(255 255 255 / 0%);
    border: 2px solid #ffffff2b;
    color: #f5f5f5;
    outline: none;
    font-size: 90%;
    transition: 0.2s;
  }
  #send-button {
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #f5f5f5;
    outline: none;
    font-size: 100%;
    cursor: pointer;
    transition: 0.2s;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  ::-webkit-scrollbar {width: 5px; height: 10px; border-radius: 15px; background: transparent}
  ::-webkit-scrollbar:hover {background: transparent}
  ::-webkit-scrollbar-thumb {border-radius: 15px; background:rgba(255, 255, 255, 0.05)}
  ::-webkit-scrollbar-thumb:hover { background:rgba(255, 255, 255, 0.1)}
  
  
  .send-button-img {width:20px; filter:invert(0.9);}
  #send-button-img-1 {
    transition: opacity 0.2s ease;
  }

  #send-button-img-2 {
    position:absolute;
    opacity: 0;
    filter: brightness(1) invert(10%) sepia(99%) saturate(8822%) hue-rotate(349deg) brightness(0.6) contrast(99%);
    transition: opacity 0.2s ease;
  }

  #send-button:hover #send-button-img-1 {
    opacity: 0;
  }

  #send-button:hover #send-button-img-2 {
    opacity: 1;
  }
  
  
.powerPoint {
    display: flex;
    flex-direction: column;
}
.powerPoint img {
    margin-top: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

  .welcome {
    background: rgb(0 0 0 / 60%);
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    z-index:10;
    pointer-events:none;
    opacity: 0;
  }
  .logo {
    width: 80px;
    height: 80px;
    display:flex;
    align-items: center;
    justify-content: center;
    margin-top: -125px;
  }
  .logo img {
      width:80%;
  }  
  .greating {
    font-size: 200%;
    font-weight: 600;
    color: #f5f5f5;
  }
  .comment {
    font-size: 100%;
    font-weight: 400;
    color: #a4a4a4;
  }
.copy {
    background-image: url('https://doctrina.space/assets/copy.svg');
    width: 11px;
    height: 11px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    filter: invert(1);
    top: 19px;
    left: 82px;
    transition: opacity 0.2s;  /* Перемісти перехід сюди */
    cursor: pointer;
    opacity: 0; /* Вихідна прозорість елемента */
}

.question:hover .copy  {
    opacity: 0.4; /* Прозорість при наведенні на батьківський елемент .question */
}

.copy:hover  {
    opacity: 1!important; /* Прозорість при прямому наведенні на елемент .copy */
}


.balance {
    position: absolute;
    bottom: 6px;
    font-size: 70%;
    color: #757575;
}
#balance_value {
    font-weight: 600;
}



  #removeable {opacity:0;}
  .loading-animation {
    flex-direction: row;
    gap: 5px;
    animation: loading 1.5s infinite;
    display: flex;
    align-items: center;
    margin-left: 10px;
  }
  .dot {
    display: block;
    width: 3px;
    height: 3.2px;
    background: #f5f5f5;
    border-radius: 100%;
    margin-top: 10px;
  }
  .monospace {
    font-family: monospace;
  }
 @keyframes loading {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.7;
    }
    100% {
      opacity: 0;
    }
  }
  
tr {background-color: #ffffff08 !important;}
td, th {padding: 10px;}
.ai-text {
    overflow-x: auto;
}






.wrap-container {
    height: -webkit-fill-available;
    width: -webkit-fill-available;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    left: 0;
}
#list-container {
    position:relative;
    height: -webkit-fill-available;
    background: #121212;
    width: 0px;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap:5px;
    /*padding: 60px 5px 15px;*/
    overflow: hidden;
    z-index: 2;
    transition:0.2s;
}
.top-list-container {
    width: -webkit-fill-available;
}
.bottom-list-container {
    width: -webkit-fill-available;
}
#list-container a {
    width: -webkit-fill-available;;
}
.lists {
    position: relative;
    display:flex;
    width: -webkit-fill-available;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    gap: 7px;
    border-radius: 15px;
    transition: 0.2s;
    cursor:pointer;
    color: #f5f5f5;
    margin: 3px 0px;
}
.lists:hover {
    background: #292929;
    transition: 0.2s
}
.lists-logo {
    width: 20px;
    height: 20px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
    .lists-logo-img {
        width: -webkit-fill-available;filter: invert(1);
        transition: 0.2s
    }
.lists:hover  .lists-logo-img {
    filter: brightness(1) invert(10%) sepia(99%) saturate(8822%) hue-rotate(349deg) brightness(0.6) contrast(99%);
    transition: 0.2s
}
.trash {
    position: absolute; right: 10px; opacity: 0.2; transform: scale(0.9); transition: 0.2s
}
.lists:hover .trash {
    opacity: 1;
    transform: scale(1);
    transition: 0.2s
}
.trash:hover {
    filter: brightness(1) invert(10%) sepia(99%) saturate(8822%) hue-rotate(349deg) brightness(0.6) contrast(99%);
    transition: 0.2s
}
.active-lists {
    background: #292929;
} 
.lists-text {
    font-size: 90%;
}






.file-label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    padding: 6px 2px;
    opacity: 0.7;
    transition: 0.2s;
}
.file-label:hover {
    opacity: 1;
    transition: 0.2s;
}
.file-label img {
    width: -webkit-fill-available;
    filter: invert(0.8);
}
#file-input {
    display: none;
}
.filename-div {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 5px;
    left: 40px;
    bottom: -20px;
    font-size: 70%;
    display:none;
    opacity:0.8;
}
.filename-div img {
    width: 10px;
    height: 10px;
    filter: invert(0.8);
}
.filename {
     max-width: 200px; /* Максимальна ширина для назви файлу */
            overflow: hidden; /* Приховує назву, якщо вона виходить за межі */
            text-overflow: ellipsis; /* Додає "..." якщо текст обрізаний */
            white-space: nowrap;
}








.pancakes {
    height: -webkit-fill-available;
    padding-left: 10px;
    display: flex;
    width: auto;
    justify-content: center;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    opacity: 0.5;
    transition: 0.2s;
    z-index: 2;
    cursor:pointer;
}
.pancakes:hover {
    opacity: 1;
    transition: 0.2s;
}

@media(max-width: 1000px) {
    .pancakes {display: none;}
    #chat-container {padding: 0 10px;padding-top: 60px;}
}

.pancake {
    width: 3px;
    border-radius: 10px;
    background: #f5f5f5;
    position: relative;
}
#pancake1 {height: 20px;}
#pancake2 {height: 10px; right: 0px;}




.explanation {
    position: absolute;
    z-index: 5;
    top: 100px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: -webkit-fill-available;
    height: 100%;
    top: 0;
    left: 0;
        display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: 0.5s;
    opacity:0;
    display: none;
    padding-top: 50px;
    background: #0000003d;
}
.explanation-top {
    width: 60%;
}
.bold {
    font-weight: bold;
    cursor: pointer;
}












.variants {
    width: -webkit-fill-available;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 95%;
}
.variant {
    padding: 15px 30px;
    background: #121212;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    cursor: pointer;
    color: #f5f5f5;
    transition: 0.2s
}

.variant option {
    font-size: 180%;
}
.variant:hover {
    background: #292929;
    transition: 0.2s
}





@media(max-width:1000px) {
    .wrap-container {
        flex-wrap: wrap
    }
    #chat-container {
        width: 95%;
    }
    #user-input {
        padding: 6px 14px;
        font-size: 90%;
    }
    #send-button {
        padding: 6px;
    }
    .send-button-img {
        width: 18px;
    }
    .message {
        font-size: 90%;
    }
    .examplesTextArea {
        font-size: 90%;
    }
    .greating {
        font-size: 190%;
    }
    #list-container{
        /*width: 500px;*/
    }
    .explanation-top {
        width: 95%;
    }
    .copy {
        top: 16px;
        left: 76px;
    }
}






























/*COMPENDIUM*/

        @font-face {
            font-family: 'Custom-1';
            src: url('https://doctrina.space/css/Abram.ttf');
        }
        @font-face {
            font-family: 'Custom-2';
            src: url('https://doctrina.space/css/Lorenco.ttf');
        }
        @font-face {
            font-family: 'Custom-3';
            src: url('https://doctrina.space/css/Lexa.ttf');
        }
        @font-face {
            font-family: 'Custom-4';
            src: url('https://doctrina.space/css/Eskal.ttf');
        }
        @font-face {
            font-family: 'Custom-5';
            src: url('https://doctrina.space/css/Merkucio.ttf');
        }
        @font-face {
            font-family: 'Custom-6';
            src: url('https://doctrina.space/css/Anselmo.ttf');
        }
        @font-face {
            font-family: 'Custom-7';
            src: url('https://doctrina.space/css/Pag.ttf');
        }

        .textarea {
            position: absolute;
            padding: 0 10px;
            width: 82%;
            height: -webkit-fill-available;
            max-height: 700px; 
            overflow-y: auto;
            top: -9px;
            left: 70px;
            margin: 0;
            margin-top: 36px;

            line-height: 36.78px;
            font-family: 'Custom-5';
            resize: none;
            background: transparent;
            border: none;
            font-size: 40px;
            color: black;
            outline: none;
            color: #282157;
            font-style: italic;
            font-size: 30px;
            z-index: 100;
        }
        
        .texttt {position: absolute;}
        
        
        
        
        
        .content {
            position: absolute;
            display: flex;
            height: auto;
            align-items: center;
            justify-content: center;
            overflow: hidden
        }
        .reverse {
            transform: scaleX(-1);
        }
        .cont {
            position: relative;
            width: -webkit-fill-available;
            display: flex;
            justify-content: center;
        }
        .wrap {
            margin-top: 50px;
        }
        .button {
            z-index:100;
        }
        
        
        
        
.generatedImage {
    width: 100%;
    max-width: 300px;
    border-radius: 10px;
    transition: max-width 0.4s ease;
    cursor: pointer;
}
.revisedPrompt {
    font-size: 80%;
    font-style: italic;
}
        
        
        
        
.instructions {
    position: absolute;
    font-size: 70%;
    bottom: 7px;
    color: #797979;
    cursor: pointer;
 
}
        
        
.miniIcon {
    width: 12px;
    height: 12px;
    background: url(https://doctrina.space/assets/angle-down.svg);
    background-size: contain;
    filter: invert(1);
    opacity: 0.6;
    margin-left: 5px;
}
.miniIcon:hover {
    opacity: 1;
}
.message a {
    display: inline-flex;
}
        
        
.file {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url(https://doctrina.space/assets/document.svg);
    background-size: contain;
    filter: invert(1);
}
        
        
.currentDate { 
    text-align: center;
    font-weight: 600;
    font-size: 85%;
    background: #1d1d1d;
    padding: 5px;
    padding: 8px 14px;
    border-radius: 15px;
}
.currentTime { 
    font-size: 70%;
    position: absolute;
    right: 0px;
    font-weight: 100;
    margin-right: -28px;
    margin-top: -8px;
    opacity: 0;
    transition: 0.2s;
}


.date {
    position: -webkit-sticky;
    position: sticky;
    margin: 20px;
    top: 45px;
    width: -webkit-fill-available;
    display: flex;
    z-index: 100;
    justify-content: center;
    transition: opacity 1s ease-in-out; /* додає анімацію на зміну прозорості */
    opacity: 1; /* задати початкову непрозорість елементу */
}
.user-balance {padding: 10px;}


.newItem {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 70%;
    color: #c8001e;
}


.uploadedImg {
    width: 100%;
    max-width: 300px;
    margin-top: 15px;
    border-radius: 10px;
    cursor: pointer;
    display: block;
}




.typewriter {
    overflow: hidden; /* Сховати текст, що не видно */
    white-space: nowrap; /* Зберегти текст в одному рядку */
    max-width: fit-content;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}




.rate {
    position: absolute;
    margin-top: 10px;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 10px;
}

.thumb-up, .thumb-down {
    background-size: contain;
    display: block;
    width: 15px;
    height: 15px;
    filter: invert(0.5);
    opacity: 0.3;
    cursor: pointer;
    transition: 0.4s;
}

/* Для підвищення прозорості */
.thumb-up:hover, 
.thumb-down:hover {
    opacity: 1; /* При наведенні на самі елементи */
}

.message:hover .thumb-up,
.message:hover .thumb-down {
    opacity: 0.6; /* Якщо є елемент з класом .message */
}


.thumb-up {
    background-image: url(https://doctrina.space/assets/thumb-up.svg);
}
.thumb-down {
    background-image: url(https://doctrina.space/assets/thumb-down.svg);
}









.download-link {
    display: flex !important;
    width: fit-content;
    align-items: center;
    margin-top: 15px;
    padding: 0px;
    color: #fff;
    text-decoration: none;
    gap: 8px;
    transition: 0.2s ease;
    cursor: pointer;
}

.file-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.download-link .file-icon img {
    width: 30px;
}

.download-link .file-name {
  font-weight: 600;
}

.download-link .file-size {
  font-size: 65%;
  color: #aaa;
}