/* Tema SmorfIA - Elegante Smorfia Napoletana */
body {
    font-family: 'Georgia', 'Times New Roman', serif;
    background: linear-gradient(135deg, #2c1810 0%, #A31A16 50%, #2c1810 100%);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* Evita che il body scrolli mostrando lo sfondo su mobile */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

.container {
    max-width: 720px;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    background: #ffffff; /* box centrale bianco pieno */
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

header {
    background: #ffffff; /* header tutto bianco */
    padding: 16px 40px; /* più spazio a destra per evitare tagli */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    box-sizing: border-box;
}

.header-logo-wrap {
    padding: 0 8px 0 0; /* piccolo respiro a destra */
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.header-logo {
    height: 84px; /* logo più grande */
    width: auto;
    max-width: 100%;
    display: block;
}



h1 {
    margin: 0 0 5px 0;
    font-size: 2.5em;
    font-weight: normal;
    letter-spacing: 2px;
}

h2 {
    margin: 0 0 10px 0;
    font-size: 1.4em;
    font-weight: normal;
    opacity: 0.9;
    letter-spacing: 1px;
}

p {
    margin: 0;
    font-size: 1.1em;
    opacity: 0.8;
    font-style: italic;
}

.chat-container {
    position: relative;
    flex: 1;
    overflow-y: auto; /* unica area scrollabile */
    padding: 20px;
    background: #ffffff; /* box centrale tutto bianco */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* evita bounce e chaining */
}

/* Footer */
.site-footer {
    padding: 10px 16px 16px;
    text-align: center;
    color: #6b6b6b;
    font-size: 0.9em;
    background: #ffffff;
}
.site-footer a { color: #A31A16; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Landing / Consenso */
.consent-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background: #ffffff;
    overflow-y: auto;               /* rende scorrevoli privacy/cookie */
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 24px);
}

.consent-card {
    width: 100%;
    max-width: 680px;
    background: #fff;
    border: 2px solid #A31A16;
    border-radius: 16px;
    padding: 24px 20px;
}

.consent-title {
    margin: 0 0 10px 0;
    color: #A31A16;
    font-weight: 600;
    font-size: 1.25rem;
}

.consent-text {
    margin: 0 0 16px 0;
}
.consent-text a { color: #A31A16; }

.consent-control {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.consent-checkbox { width: 22px; height: 22px; accent-color: #A31A16; }
.consent-label { cursor: pointer; }

.cta-button {
    background: linear-gradient(45deg, #7a110e, #A31A16);
    color: #ffffff;
    border: 2px solid #A31A16;
    padding: 10px 18px;
    border-radius: 24px;
    cursor: pointer;
    font-size: 1em;
    font-family: inherit;
    font-weight: bold;
}

/* Mostra il pulsante quando la checkbox è selezionata */
.consent-checkbox:checked ~ #enter-chat { display: inline-flex !important; }

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message {
    display: flex;
    align-items: center;
    animation: fadeIn 0.5s ease-in;
}

.message-avatar {
    width: 56px; /* avatar più grandi */
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.message-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #A31A16; /* bordo più deciso */
    background: #A31A16;
}

.user-message {
    flex-direction: row-reverse;
}

.user-message .message-avatar {
    margin-left: 10px;
    margin-right: 0;
}

.message-content {
    background: #ffffff;
    padding: 12px 18px;
    border-radius: 28px; /* base, poi personalizzata per ruolo */
    max-width: 70%;
    word-wrap: break-word;
    box-shadow: none;
    line-height: 1.4;
    border: 2px solid transparent;
}

.message-content strong {
    color: #F5A43B; /* evidenziazione agent in arancio */
    font-weight: bold;
}

.message-content em {
    font-style: italic;
    color: #666;
}

.message-content ul {
    margin: 8px 0;
    padding-left: 20px;
}

.message-content li {
    margin: 4px 0;
    padding: 2px 0;
}

.message-content li::marker {
    color: #F5A43B; /* marker elenchi in arancio */
}

.message-content br {
    display: block;
    margin: 4px 0;
    content: "";
}

.bot-message .message-content {
    /* avatar a sinistra: angolo basso-sinistra netto (90°), alto-sinistra molto bombato */
    border-radius: 28px 28px 28px 0; /* TL TR BR BL */
    background: #A31A16;
    color: #ffffff;
    border-color: #A31A16;
}

.user-message .message-content {
    /* avatar a destra: angolo basso-destra netto (90°), alto-destra molto bombato */
    border-radius: 28px 28px 0 28px; /* TL TR BR BL */
    background: #ffffff;
    color: #111111;
    border: 3px solid #A31A16;
}

.typing-indicator {
    display: flex;
    align-items: center;
    animation: fadeIn 0.5s ease-in;
    margin-top: 12px; /* spazio dal bubble sopra */
}

.typing-indicator .message-content {
    background: #A31A16;
    color: #ffffff;
    border-color: #A31A16;
    font-style: italic;
}

.dots::after {
    content: '';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.input-container {
    display: flex;
    padding: 16px 20px;
    background: white;
    border-top: 1px solid #f0f0f0;
    gap: 10px; /* spaziatura fluida tra input e bottone */
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
}

#message-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #A31A16;
    border-radius: 25px;
    font-size: 1em;
    outline: none;
    transition: border-color 0.3s;
    font-family: inherit;
    min-width: 0; /* consente di restringersi su schermi piccoli */
}

#message-input:focus {
    border-color: #7a110e;
}

#send-button {
    background: linear-gradient(45deg, #7a110e, #A31A16);
    color: #ffffff;
    border: 2px solid #A31A16;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.3s;
    font-family: inherit;
    font-weight: bold;
    flex: 0 0 auto; /* evita che il bottone venga tagliato */
    white-space: nowrap;
}

/* link nei messaggi in arancio */
.message-content a { color: #F5A43B; }

#send-button:hover {
    background: linear-gradient(45deg, #A31A16, #c41f19);
    transform: scale(1.05);
}

#send-button:hover {
    transform: scale(1.05);
}

#send-button:active {
    transform: scale(0.95);
}

/* Responsive */
@media (max-width: 600px) {
    html, body { background: #ffffff; }
    .container {
        position: fixed; /* occupa tutto lo schermo come app */
        inset: 0;
        max-width: 100%;
        height: auto;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
    }
    .header-logo {
        height: 72px; /* scala su mobile */
        max-width: 100%;
    }
    header { padding: 14px 24px; }
    .chat-container { height: auto; }
    .message-avatar { width: 48px; height: 48px; }
    .message-content {
        max-width: 85%;
    }
    /* input e bottone più compatti */
    #send-button { padding: 12px 16px; }
}

/* molto piccoli: impila input e bottone */
@media (max-width: 420px) {
    .input-container { flex-direction: column; align-items: stretch; }
    #send-button { width: 100%; }
}