/* style.css */
body { 
    padding: 40px; 
    font-family: sans-serif; 
}
        
#chat-container { max-width: 800px; margin: auto;box-shadow: 0px 10px 30px rgba(56, 112, 209, 0.1);
                border: 1px solid #4a8cdd; padding: 60px; border-radius: 50px; }
#response-area { background: #f7f4f4; padding: 15px; border-radius:10px ; 
                min-height: 40px; margin-top: 10px; }
.input-group { display: flex; gap: 10px;}
input { flex-grow: 1; padding: 10px; border-radius: 50px; border:1px solid #4a8cdd;}
button {
        padding: 10px 25px;      /* Spazio interno: sopra/sotto e destra/sinistra */
        background-color: hsl(195, 64%, 67%); /* Colore blu coordinato al bordo del container */
        color: white;            /* Testo bianco */
        border: none;            /* Rimuove il bordo brutto di default */
        cursor: pointer;         /* Fa apparire la manina quando ci passi sopra */
        
        /* IL COMANDO PER SMUSSARLO */
        border-radius: 30px;     /* Più alzi questo valore, più diventa a "pillola" */
        
        transition: background 0.3s; /* Rende il cambio colore fluido */
}
/* Effetto quando passi il mouse sopra */
button:hover {
    background-color: #5694d6; /* Un blu più scuro */
}

/* Rimuove o cambia il bordo nero quando clicchi (focus) */
input:focus {
    outline: none;             /* Rimuove il bordo nero predefinito */
    border: 1px solid #4a8cdd; /* Mantiene il bordo blu (o il tuo celestino) */
    box-shadow: none;/*0 0 8px rgba(0, 123, 255, 0.523);  Aggiunge un leggero bagliore azzurro */
    background-color: #ffffff; /* Assicura che lo sfondo resti bianco o del colore scelto */
}

/* Contenitore invisibile per allineare i due testi */
.header-line {
    max-width: 800px;   /* Stessa larghezza del chat-container */
    margin: 40px auto 0 auto; /* Centrato, con spazio sopra */
    display: flex;      /* Attiva l'allineamento flessibile */
    justify-content: space-between; /* Spinge uno a sx e uno a dx */
    align-items: baseline; /* Li tiene allineati sulla stessa riga di base del testo */
}

/* Rimuoviamo i margini che potrebbero sballare l'allineamento */
.titolo-fuori {
    margin: 0; 
    font-size: 24px;
}

.etichetta-utente {
    font-size: 17px;
    font-weight: bold;
    color: #000000;
    
}