/*  a[href="https://komunalka.ua/"]:hover > span,
  a[href="https://komunalka.ua/"]:focus-visible > span {
    font: 500 1/1.2 "Segoe UI", sans-serif;
    color: orangered;
  } */
  #theme-toggle {
    background-color: transparent !important;
}
#theme-toggle :focus-visible{
    box-shadow: none !important;
}
#register-comunalka-button{    
    margin-right: 5px;
    background-color: #F1F6F8;
    height: 34px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #17191C;

}
#register-comunalka-button:hover{
    background-color: #ececec;
}

/* .flex.items-center.gap-1 > button[data-state="closed"]:has(> a[href*="komunalka.ua"]) {

    background-color: #F1F6F8;
    border-radius: 10px !important;
    height: 34px !important;    
}

.flex.items-center.gap-1 > button[data-state="closed"]:has(> a[href*="komunalka.ua"]):focus-visible {
    background-color: #f1f6f8b9;
 border-radius: 10px !important; 
    -tw-ring-offset-width: 0px !important;
}

.flex.items-center.gap-1 > button[data-state="closed"]:has(> a[href*="komunalka.ua"]) >a {
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0% !important; 
    color: #17191C;
    margin-top: 2px !important;
}
.flex.items-center.gap-1 > button[data-state="closed"]:has(> a[href*="komunalka.ua"])>a:focus-visible  {

    margin-top: 2px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0% !important; 
    color: #17191C;
} */
@media (prefers-color-scheme: dark) {


    /* a[href="https://komunalka.ua/"] > span
    {
        font: 500 1rem/1.2 "Segoe UI", sans-serif;
        color: black;
    }
    a[href="https://komunalka.ua/"]:hover > span,
    a[href="https://komunalka.ua/"]:focus-visible > span 
    {
    font: 500 1/1.2 "Segoe UI", sans-serif;
    color: orangered;
    } */
}

@media (prefers-color-scheme: light) {
    /* a[href="https://komunalka.ua/"] > span
    {
        font: 500 1rem/1.2 "Segoe UI", sans-serif;
        background-color: #F1F6F8; 
    }
    a[href="https://komunalka.ua/"]:hover > span,
    a[href="https://komunalka.ua/"]:focus-visible > span 
    {
        font: 500 1/1.2 "Segoe UI", sans-serif;
        color: orangered;
    } */
}
  #theme-toggle svg {
    width: 36px !important;
    height: 36px !important;
  }
/* #theme-toggle svg

{
    color: black !important;
    stroke: black;
} */

#new-chat-button
{
    visibility: hidden;
    color: black !important;
}

/* ------------ SPLASH CONTAINER ------------ */
#chainlit-splash
{
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

    /* ------------ CURTAIN PANELS -------------- */
    #chainlit-splash .panel
    {
        position: absolute;
        top: 0;
        height: 100%;
        width: 50%;
        background: #000;
/*        background: hsl(var(--background)) !important;
*/        will-change: transform;
    }

    #chainlit-splash .left
    {
        left: 0
    }

    #chainlit-splash .right
    {
        right: 0
    }
    /* ---------- CENTRED SVG LOGO + TAGLINE ---------- */
    #chainlit-splash .logo
    {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        flex-direction: column; /* stacks logo + text */
        align-items: center; /* horizontal centre */
        pointer-events: none;
        z-index: 3; /* above curtains */
    }

        /* tagline itself */
        #chainlit-splash .logo .tagline
        {
            margin-top: 0.75rem; /* gap under logo */
            font: 500 2rem/1.2 "Segoe UI", sans-serif;
            /* color: #ffffffc0; 75 % white */
            letter-spacing: 0.02em;
            /* color: hsl(var(--card-foreground)); */
        }

    #chainlit-splash .panel
    {
        z-index: 2
    }
    /* panels now slide *over* logo */

    #chainlit-splash .logo svg
    {
        width: 150px; /* size to taste */
        height: auto;
        fill: #ffffff; /* white on black */
        transition: opacity .0s ease .0s; /* fade just after panels start */
    }
/* ------------ EXIT ANIMATIONS ------------- */
@keyframes slide-left
{
    to
    {
        transform: translateX(-100%)
    }
}

@keyframes slide-right
{
    to
    {
        transform: translateX(100%)
    }
}

@keyframes splash-fade
{
    to
    {
        opacity: 0
    }
}

body.cl-splash-loaded #chainlit-splash .left
{
    animation: slide-left .7s cubic-bezier(.77,0,.175,1) .7s forwards;
}

body.cl-splash-loaded #chainlit-splash .right
{
    animation: slide-right .7s cubic-bezier(.77,0,.175,1) .7s forwards;
}
/* fade logo & container */
/*body.cl-splash-loaded #chainlit-splash .logo svg
{
    opacity: 0
}*/

body.cl-splash-loaded #chainlit-splash
{
    animation: splash-fade .2s ease 1.4s forwards;
}



/* fade both logo SVG *and* tagline on dismiss */
body.cl-splash-loaded #chainlit-splash .logo,
body.cl-splash-loaded #chainlit-splash .logo span
{
    opacity: 0;
    transition: opacity .35s ease .35s; /* same timing as before */
}

#readme-button {
    display: none !important;
  }

  a.watermark[href="https://chainlit.io"] {
    display: none !important;   /* !important beats the inline style */
  }

/* Уменьшаем логотип в два раза */
.logo {
    width: 100px !important;
    /* Уменьшаем ширину логотипа в два раза */
    margin-bottom: 1rem;
    /* Снижаем отступ снизу */
  }
  
  /* footer внизу экрана */
  body {
    position: relative;
    padding-bottom: 3rem;
    /* пространство под футер */
  }
  
  /* Стили для заголовка #FDC503*/
  #header {
    background-color: #FDC500;
    padding-left: 1rem;
    display: flex;
    align-items: center;
    justify-content:space-between;
  }
/*   
  
  body::after {
    content: "Чат-бот створений на основі ChatGPT";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem 1rem;
    background: #000000;
    color: #F2F7F9;
    text-align: center;
    font-size: 0.875rem;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  
  /* Индикатор ожидания с анимацией */
  .loading-indicator {
    width: 150px;
    height: 150px;
    border: 5px solid #741f1f;
    /* Светлый цвет */
    border-top: 5px solid #3498db;
    /* Темный цвет */
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }