@font-face {
    font-family: "gigant";
    src: url("../fonts/bahij-helvetica-neue-roman.ttf") format("truetype");
}

html, body {
    height: 100%;
    position: relative;
    font-family: "gigant", system-ui, -apple-system, 'Segoe UI', Roboto;
}

.fs-36{font-size:2.25rem !important}
.fs-22 {font-size: 22px;}
.fs-18{font-size:1.125rem !important}
.fs-16{font-size:1rem !important}
.fs-14{font-size:.875rem !important}
.fs-13{font-size:.813rem !important}
.fs-12{font-size:.75rem !important}
.fs-11{font-size:.688rem !important}
.fs-10{font-size:.625rem !important}
.mh-100{max-height:100% !important}
.h-100px{height:100px !important}
.h-60px{height:60px !important}
.h-50px{height:50px !important}
.mw-100{max-width:100% !important}
.w-100px{width:100px !important}
.w-50px{width:50px !important}
.ps-70{padding-inline: 70px;}
.flex-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
}
.flex-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.bg-tts-gradient{background: linear-gradient(180deg, #000 0%, #393122 100%);}
.bg-tts-primary{background: rgba(255, 210, 120, 0.20);}
.bg-tts-shadow{box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);}

.bg-stt-gradient{background: linear-gradient(180deg, #000 0%, #093326 100%);}
.bg-stt-primary{background: rgba(68, 255, 198, 0.20);}
.bg-stt-shadow{box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);}

.bg-ocr-gradient{background: linear-gradient(180deg, #000 0%, #0F2356 100%);}
.bg-ocr-primary{background: rgba(57, 111, 255, 0.20);}
.bg-ocr-shadow{box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);}

.rotate--45 {transform: rotate(-45deg);}
.gigant-color {background-color: #4ecade; }
.header-color {background-color: #000; }
.btn-action{border: 0;}
.btn-action:hover{ background-color: rgba(255, 210, 120, 0.20) !important;}
.btn-action:active{ background-color:rgba(225, 190, 90, 0.20) !important; border: 0px;}
#chat-container, #result-container { display: none;}
#chat-input{
    padding-left: 70px; 
    padding-right: 40px;
    padding-top: 18px; 
    padding-bottom: 10px;
    min-height: 60px;
    max-height: 200px;
    overflow-y: auto;
    width: 100%; 
    border:0; 
    resize: none;
    background: rgba(0, 0, 0, 0.20);
    color: #fff;
    line-height: 1rem;
    cursor: pointer; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#chat-input:focus{outline: none;}
.chat-response {
    white-space: pre-wrap;
    border-radius: 5px;
    display: inline-block;
    animation: fadeIn 0.5s ease-in-out;
    direction: rtl;
    text-align: justify;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
#form-submit.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid rgba(255, 210, 120, 0.20);
    border-top: 4px solid rgba(255, 210, 120, 0.50);
    animation: spin 1s linear infinite;
    transition: opacity 0.3s;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#stop_record.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid rgba(255, 210, 120, 0.20);
    border-top: 4px solid rgba(255, 210, 120, 0.50);
    animation: spin 1s linear infinite;
    transition: opacity 0.3s;
    color: #785515;
}
.avatar {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.20);
    border: 1px solid rgba(255, 210, 120, 0.20);
    color: #44FFC6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    user-select: none;
}
.scroll-anchor {overflow-anchor: auto !important;}
audio, .msg-vooice .text-message{height: 45px;}
.msg-text .text-message{min-height: 35px; font-family: "gigant", system-ui;}
.rotate-226{transform: rotateZ(226deg) translate(-2px, 5px) !important;}
.text-messages-item{
    padding: 10px 20px !important;
    border-radius: 26px !important;
    background: rgba(255, 210, 120, 0.20);
}