/* Importa il font da google fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* Impostazioni per tutta la pagina */
html, body {
    font-family: "Montserrat", sans-serif !important; /* Font Montserrat */
    font-size: 0.9em !important; /* Dimensione font globale */
}

/* Nasconde header contenenti bottoni nuova chat e istruzioni */
#header {
    display: none !important;
}

/* Bottone di modifica testo */
div [class="flex flex-row items-center gap-1 w-full group"] button {
    display: flex !important;
}

/* Box messaggio di input dell'utente */
#message-composer {
    border-radius: 10px !important;
    margin-bottom: 0px !important;
}

/* Pulsante stop e allegato del box messaggio di input */ 
#stop-button {
    display: none !important;
}

/* Rimozione tasto allega file */
#upload-button {
    display: none !important;
}

/* Stili custom per le box della conversazione */
div[class="leading-7 [&:not(:first-child)]:mt-4 whitespace-pre-wrap break-words"] {
    padding: 10px !important;
    border: 1px solid lightgray !important;
    border-radius: 10px !important;
    line-height: 1 !important;
}
div[class="px-5 py-2.5 relative bg-accent rounded-3xl max-w-[70%] flex-grow-0"] div[class="leading-7 [&:not(:first-child)]:mt-4 whitespace-pre-wrap break-words"] {
    border-radius: 10px !important;
    border: 1px solid lightgray !important;
}
/* Rimuove padding e colore di background dalla box del messaggio dell'utente */
div[class="px-5 py-2.5 relative bg-accent rounded-3xl max-w-[70%] flex-grow-0"] {
    padding: 0px !important; /* Rimozione del padding */
    background-color: transparent !important; /* Rimozione del colore di background*/
}

/* Rimuove pulsante di invio e spazio inferiore alla box di composizione messaggio */
div[class="flex items-center justify-between"] {
    display: none !important;
}

/* Rimuove il messaggio infondo "Gli LLM possono commettere errori */
.watermark {
    display: none !important;
}

/* Media query per widget */
@media only screen and (max-height: 400px) {

  div[class="leading-7 [&:not(:first-child)]:mt-4 whitespace-pre-wrap break-words"] {
    padding: 5px !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border-radius: 0px 10px 10px 10px !important;
    -webkit-border-radius: 0px 10px 10px 10px !important;
    -moz-border-radius: 0px 10px 10px 10px !important;
    }
    div[class="px-5 py-2.5 relative bg-accent rounded-3xl max-w-[70%] flex-grow-0"] div[class="leading-7 [&:not(:first-child)]:mt-4 whitespace-pre-wrap break-words"] {
        border-radius: 10px 10px 0px 10px !important;
    -webkit-border-radius: 10px 10px 0px 10px !important;
    -moz-border-radius: 10px 10px 0px 10px !important;
    }
    /*  */
    div[class="px-5 py-2.5 relative bg-accent rounded-3xl max-w-[70%] flex-grow-0"] {
        padding: 0px !important; /* Rimozione del padding */
        background-color: transparent !important; /* Rimozione del colore di background*/
    }

    #message-composer {
        height: 100px !important;
        /* color: black !important; */
    }
}

/* Stile per immagine al centro */
img[src="http://localhost:8000/logo?theme=light&"],
img[src="http://localhost:8000/logo?theme=dark&"] {
    display: none !important;
    /* border: 1px solid #6c30a1 !important;
    width: 300px !important;
    border-radius: 10px !important;
    padding: 10px !important; */
}
/* Solo al logo dark da un colore di background bianco */
img[src="http://localhost:8000/logo?theme=dark&"]{
    background-color: #e9ecef;
}



div[class="flex items-center -ml-1.5"]{
    color: transparent !important;
    background-color: transparent !important;
    pointer-events: none !important; /* blocca clic e interazioni */
    cursor: default;
}

/* Bottoni spawnati dal messaggio */
button[class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 text-muted-foreground"] {
    border: 1px solid darkgray !important;
    border-radius: 5px !important;
    margin: 5px !important;    
}

button[class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 text-muted-foreground"]:hover {
    border: 1px solid #6c30a1 !important;
    background-color: white !important;
}
/* Div dei bottoni spawnati dal messaggio */
div[class="-ml-1.5 flex items-center flex-wrap"] {
    justify-content: space-between !important;
    text-align: left;
}

/*  Rimuove colore di background aggiuntivo
    e padding aggiuntivo sul messaggio
    dell'utente, causato dal cambio 
    della proprietà edit_message su false dal file config.toml
*/
div[class="px-5 py-2.5 relative bg-accent rounded-3xl max-w-[70%] flex-grow-0 ml-auto"] {
    background-color: transparent !important;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

/* Carosello */

div[class="w-full max-w-xs"], .p-1 {
    width: 50% !important;
}

.carousel {
    border: 1px solid darkgray !important;
    border-radius: 5px !important;
    line-height: 1 !important;
    font-size: 12px !important;
    width: 300px !important;
}

/* Bottoni di scorrimento */
.carouselSlideBtn {
    border: 1px solid darkgray !important;
}

/* Bottone seleziona contratto */
.contractBtn {
    width: 100px !important;
    border: 1px solid darkgray !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    padding: -5px !important;
}

.contractImageBtn {
    border: 1px solid darkgray !important;
    border-radius: 5px !important;
    width: 70%;
    height: 70%;
}