@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');


body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background: #1e1e1e;
    overflow-x: hidden;
}

/* Grassetto per titoli */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

/* Peso medio per i paragrafi */
p, span, li, input, button {
    font-weight: 400;
}

button#start-chat-button {
    font-family: 'Roboto';
    font-size: 1.3rem;
}



#form-container, #chat-wrapper {
    width: calc(100% - 24px);
    max-width: 360px; /* Limita la larghezza del form */
    margin: 20px auto 0; /* Centra il form orizzontalmente */
    padding: 16px; /* Aggiungi spazio interno */
    background: #fcfcfc; /* Sfondo bianco */
    border-radius: 4px; /* Angoli arrotondati */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombreggiatura */
    box-sizing: border-box; /* Include padding e bordo nelle dimensioni */
}

@media (max-width: 480px) {
    #form-container, #chat-wrapper {
        width: calc(100% - 16px);
        padding: 14px;
        margin-top: 16px;
    }

    .chat-input-row {
        gap: 6px;
    }

    .chat-input-row button {
        min-width: 70px;
        padding: 0 10px;
    }

    input, textarea {
        font-size: 16px;
    }
}

#chat-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    border: 2px solid #fff !important;
    margin: 0 auto !important;
    margin-top: 20px !important;
    
}

@media (max-width: 768px) {
    #chat-wrapper {
        width: calc(100% - 16px) !important;
        max-width: 100% !important;
    }
}

#chat-container {
    height: 420px;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    margin-bottom: 10px;
}

.chat-input-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.chat-input-row input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-bottom: 0;
}

.chat-input-row button {
    width: auto;
    flex: 0 0 auto;
    min-width: 80px;
    margin-bottom: 0;
    padding: 0 16px;
}
.form-group {
    margin-bottom: 15px;
}

input, textarea {
    width: 100%; /* Occupa tutta la larghezza del contenitore */
    padding: 10px; /* Spazio interno */
    border: 1px solid #ddd; /* Bordo sottile */
    border-radius: 4px; /* Angoli arrotondati */
    font-size: 14px; /* Dimensione del testo */
    box-sizing: border-box; /* Include padding e bordo nelle dimensioni */
}









label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 1rem;
}
input, button {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 3rem;
}

.chat-input-row input {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
}

.chat-input-row button {
    width: auto !important;
    flex: 0 0 auto;
    min-width: 80px;
}


textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 6rem;
}






button {
    background-color: #4d39e9;
    color: #fff;
    border: none;
    cursor: pointer;
}
button:hover {
    background-color: #4d39e9;
}
.chat-box {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Spazio tra i messaggi */
    padding: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Messaggi dell'assistente */
.message.assistant {
    align-self: flex-start;
    background-color: #e7e7e7;
    color: #3d3d3d;
    padding: 10px;
    border-radius: 4px;
    max-width: 95%;
}

/* Messaggi dell'utente */
.message.user {
    align-self: flex-end;
    background-color: #dcedc8;
    color: #33691e;
    padding: 10px;
    border-radius: 4px;
    max-width: 70%;
}

/* Testo in grassetto (nome del mittente) */
.message strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1em;
    color: #363636;
}

.welcome-section {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    background: #f2f2f2;
    border-radius: 4px;
    padding: 10px;
}

.melania-icon {
    width: 70px;
    height: 70px;
    border-radius: 7%;
    flex-shrink: 0; /* Impedisce che l'immagine si ridimensioni */
}

.welcome-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.welcome-text h2 {
    font-size: 16px;
    margin: 0;
    color: #333;
}

.welcome-text p {
    font-size: 14px;
    margin: 5px 0 0 0;
    color: #666;
}

/* Stile del blocco superiore */
.header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: #f0f0f5;
    border-bottom: 1px solid #ccc;
    border-radius: 5px 5px 0 0;
}

/* Colonna sinistra con immagine */
.header-left img.melania-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

/* Colonna destra con nome */
.header-right .melania-name {
    font-size: 1.2em;
    color: #333;
    margin: 0;
}

#typing-indicator {
    font-style: italic;
    color: gray;
    opacity: 0.8;
    animation: typing 1s infinite;
}

@keyframes typing {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Typing indicator */
.typing-indicator {
    align-self: flex-start;
    background: #e7e7e7;
    padding: 10px 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.typing-indicator span {
    width: 7px;
    height: 7px;
    background: #999;
    border-radius: 50%;
    animation: zl-typing 1.4s infinite;
}
.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes zl-typing {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1); }
}

video.melania-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: black;
}