#chatbot {
    background: #ffffff !important;
    padding-top: 6rem;
    padding-bottom: 6rem;
    font-family: lora-regular, serif;
}

#chatbot .section-intro {
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.chatbot-content {
    position: relative;
    border-radius: 25px; /* bordi più arrotondati */
    overflow: hidden;
    background: linear-gradient(145deg, #1e1e1e, #2a2a2a); /* gradiente elegante */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* ombra più morbida e profonda */
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease; /* animazioni morbide */
}


.chatbot-area-messaggi {
    display: flex;
    flex-direction: column;
    font-family: 'Inter', 'Roboto', sans-serif;
    height: 400px;
    overflow-y: auto;
    background: #2d2d2d;
    padding: 15px;
    gap: 10px;
}

.bot-msg {
    background: #3e3e3d;
    color: #fff;
    align-self: flex-start;
    border-radius: 18px 18px 18px 0;
    padding: 10px 15px;
    max-width: 80%;
}

.user-msg {
    background: #1e90ff;
    color: #fff;
    align-self: flex-end;
    border-radius: 18px 18px 0 18px;
    padding: 10px 15px;
    max-width: 80%;
}

.chatbot-input-area {
    display: flex;
    gap: 10px;
    padding: 10px;
    font-size: 14px;
    background: #2d2d2d;
    border-top: 1px solid #3a3a3a;
}

.chatbot-input-box {
    flex: 1;
    padding: 15px 20px !important;
    border-radius: 25px !important;
    border: 1px solid #444 !important;
    margin-bottom: 0 !important;
    color: #ffffff !important;
    outline: none !important;
    transition: all 0.3s ease !important; /* transizione fluida per focus/hover */
    padding-left: 25px !important;
}

/* Stato focus */
.chatbot-input-box:focus {
    border-color: #ffb800 !important; /* bordo leggermente più chiaro */
    box-shadow: 0 0 4px rgba(255, 200, 0, 0.5) !important; /* effetto glow */
    color: #ffffff !important;
}

.chatbot-send-btn {
    padding: 12px 20px;
    border: none;
    background: rgb(255, 200, 0);
    color: #fff;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatbot-send-btn:hover {
    background: rgb(200, 120, 0);
}