/* ============================================================================
   TEMA: zatti — Design system Gruppo Zatti (autozatti.ibi.it)
   Estratto dal CSS del sito (bundles/common.min.css):
   - Font: Open Sans (300 light / 400 regular / 700 bold)
   - Palette: rosso brand #be1110, rosso scuro #710a09, blu #1056be,
     grigi #111/#333/#666/#888/#ccc/#eee
   - Gradient firma 45° (#be1110 -> #710a09) per l'header
   - Bottoni pill (radius 2.5rem) MAIUSCOLI bold, ombre diffuse
   Selezione: frontend.theme: "zatti" in config/dealer.yml
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

:root {
    --primary-color: #be1110;
    --hover-color: #710a09;
    --bg-color: #ffffff;
    --text-color: #111111;
    --secondary-text: #666666;
    --border-color: #eeeeee;
    --chat-bg-user: #be1110;
    --chat-bg-bot: #ffffff;
    --status-online: #1056be;
    --avatar-user-bg: #1056be;
    --avatar-bot-bg: #eeeeee;
}

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #ffffff;
}

/* Header col gradient firma 45° del sito + ombra std */
.app-header {
    background: linear-gradient(45deg, #be1110 0%, #710a09 100%);
    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.35);
    padding: 0.85rem 1.5rem;
}

.header-text h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1.35rem;
}

.header-text .subtitle {
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

#session-id-display {
    color: rgba(255, 255, 255, 0.85);
}

.header-right .icon-btn {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2.5rem;
}

.header-right .icon-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.logo-icon,
.brand-logo-large {
    border-radius: 2.5rem;
    background: #ffffff; /* logo leggibile sul gradiente rosso (Marco 11/09/2026) */
}

.brand-logo-large {
    background: #ffffff;
    border: 1px solid #eeeeee;
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.25);
}

/* Card welcome: radius 1.5rem come le card del sito, ombra std */
.welcome-content {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 1.5rem;
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.25);
    padding: 3rem 2rem;
}

.welcome-screen h2 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #111111;
}

.welcome-screen p {
    font-weight: 300;
    color: #666666;
}

.disclaimer-container {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 1.5rem;
}

.disclaimer-container h3 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1rem;
    color: #111111;
}

.disclaimer-text {
    font-weight: 300;
    color: #666666;
}

/* Bolle: radius morbido, bordo grigio chiaro, ombra leggera */
.message-bubble {
    border-radius: 1.25rem;
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.15);
}

.message-container.user .message-bubble {
    background: linear-gradient(45deg, #be1110 0%, #9c0e0d 100%);
    font-weight: 400;
}

.message-container.bot .message-bubble {
    border: 1px solid #eeeeee;
    border-bottom-left-radius: 0.4rem;
}

.avatar {
    border-radius: 0.8rem;
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.25);
}

.app-footer {
    background: #ffffff;
    border-top: 1px solid #eeeeee;
    box-shadow: 0 -0.2rem 0.6rem rgba(0, 0, 0, 0.08);
}

/* Input: pill come i campi del sito, focus rosso brand */
.input-wrapper {
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 2.5rem;
}

.input-wrapper:focus-within {
    border-color: #be1110;
    box-shadow: 0 0 0.6rem rgba(190, 17, 16, 0.25);
}

.send-btn {
    background-color: #be1110;
    border-radius: 2.5rem;
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.25);
}

.send-btn:hover {
    background-color: #710a09;
}

/* Chip: pill MAIUSCOLI bold, hover rosso come i pulsanti btn_var_01 */
.chip {
    background: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 2.5rem;
    color: #333333;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}

.chip:hover {
    background: #ffffff;
    border-color: #be1110;
    color: #be1110;
}

.typing-indicator {
    border: 1px solid #eeeeee;
    border-radius: 1.25rem;
}

.typing-dot {
    background-color: #be1110;
}

.message-content img {
    border-radius: 0.8rem;
}