#chatbot-container {
    position: fixed !important;
    top: 61%;
    left: 50%;
    width: 720px !important;
    max-width: 98vw !important;
    min-height: 60% !important;
    max-height: 60%;
    transform: translate(-50%, -50%);
    border-radius: 28px !important;
    border: 2.5px solid rgba(255,255,255,0.21);
    background: rgba(0,0,0, 0.8) !important;
    box-shadow: 0 8px 40px 0 rgba(30,60,90,0.13), 0 1.5px 9px 0 rgba(0,0,0,0.12) inset !important;
    backdrop-filter: blur(16px) saturate(150%);
    display: flex;
    flex-direction: column;
    z-index: 1000 !important;
    overflow: hidden;
}

/* Sfumatura ai bordi */
#chatbot-container::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: radial-gradient(ellipse at 90% 90%, rgba(9,132,227,0.22) 0%, transparent 70%),
                radial-gradient(ellipse at 0% 0%, rgba(0,184,148,0.20) 0%, transparent 65%);
    z-index: 1;
}

#chatbot-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative;
    z-index: 2;
    color: #fff !important;
    padding: 21px 26px 15px 26px !important;
    border-radius: 28px 28px 0 0 !important;
    font-size: 1.33em !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 16px #0008;
    background: transparent !important;
}

#chatbot-header > span{
    color: #fff !important;
}

#chatbot-fullscreen-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.6em;
    cursor: pointer;
    margin-left: 10px;
    padding: 0 6px;
    transition: color 0.2s;
}
#chatbot-fullscreen-btn:hover,
#chatbot-fullscreen-btn:focus {
    color: #ffd600;
    outline: none;
}
#chatbot-fullscreen-icon {
    vertical-align: middle;
}

#chatbot-messages {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 280px;
    overflow-y: auto !important;
    padding: 14px 8px 18px 8px !important;
    background: transparent !important;
    font-size: 1.07em;
    display: flex;
    flex-direction: column;
}

/* Bolle */
#chatbot-messages .msg {
    margin-bottom: 13px;
    display: flex;
    align-items: flex-end;
}
#chatbot-messages .msg.user {
    justify-content: flex-end;
}
#chatbot-messages .msg.ai {
    justify-content: flex-start;
}
#chatbot-messages .bubble {
    max-width: 78%;
    padding: 12px 18px;
    border-radius: 16px 18px 16px 10px;
    font-size: 1.04em;
    line-height: 1.52;
    box-shadow: 0 2px 18px rgba(9,132,227,0.09);
    word-break: break-word;
    background: rgba(255,255,255,0.08);
    border: 1.7px solid rgba(255,255,255,0.15);
    color: #fff;
    backdrop-filter: blur(2px);
    opacity: 0.94;
}

#chatbot-messages li > ul, li > ol, li > p{
    color: #fff !important;
}

#chatbot-messages .bubble > p{
    color: #fff !important;
}

#chatbot-messages a {
    color: deepskyblue;
}

#chatbot-messages .msg.user .bubble {
    background: linear-gradient(90deg, rgba(9,132,227,0.23) 50%, rgba(0,184,148,0.18) 100%);
    border-bottom-right-radius: 7px;
    color: #fff;
    border: 1.7px solid rgba(9,132,227,0.22);
    margin-left: 18px;
}

#chatbot-messages .msg.ai .bubble {
    background: rgba(255,255,255,0.13);
    border-bottom-left-radius: 7px;
    color: #fff;
    border: 1.7px solid rgba(255,255,255,0.17);
    margin-right: 18px;
}

#chatbot-form {
    display: flex !important;
    border-top: 1.5px solid rgba(255,255,255,0.19);
    background: transparent !important;
    border-radius: 0 0 28px 28px !important;
    padding: 0 !important;
    height: 56px;
    align-items: stretch;
    gap: 0px !important;
}

/* Input */
#chatbot-input {
    flex: 1 !important;
    border: none !important;
    padding: 0 18px !important;
    font-size: 1.07em !important;
    background: transparent;
    color: #fff;
    outline: none;
    height: 100%;
    border-radius: 0 0 0 28px !important;
    min-width: 0;
}

#chatbot-input::placeholder {
    color: #e4eaff;
    opacity: 0.85;
}

/* Bottoni */
#chatbot-form button {
    width: 56px;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
    border: none !important;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #00b894 30%, #0984e3 100%) !important;
    color: #fff !important;
    font-size: 1.21em;
    cursor: pointer !important;
    transition: background 0.21s, color 0.21s, box-shadow 0.16s;
    padding: 0;
    border-radius: 0 !important;
    box-shadow: none;
    outline: none;
}

#chatbot-form button#chatbot-reset-btn {
    background: rgba(255,255,255,0.12) !important;
    color: #e17055 !important;
    border-radius: 0 !important;
}

#chatbot-form button#chatbot-reset-btn:hover,
#chatbot-form button#chatbot-reset-btn:focus {
    background: #e17055 !important;
    color: #fff !important;
}

#chatbot-form button#chatbot-send-btn {
    border-radius: 0 0 28px 0 !important;
}

#chatbot-form button#chatbot-send-btn:hover,
#chatbot-form button#chatbot-send-btn:focus {
    background: linear-gradient(90deg, #0984e3 80%, #00b894 100%) !important;
    color: #fff !important;
}

#chatbot-form svg {
    display: block;
    stroke: currentColor;
    width: 26px;
    height: 26px;
}


.bubble.typing {
    border-right: 2px solid #e1eaff;
    animation: blink-cursor .75s step-end infinite;
    white-space: pre-line;
}
@keyframes blink-cursor {
    0%, 100% { border-right-color: #e1eaff; }
    50%      { border-right-color: transparent; }
}

#chatbot-toggle-btn {
    position: fixed !important;
    bottom: 45px !important;
    right: 38px !important;
    width: 66px;
    height: 66px;
    background: linear-gradient(135deg, #00b894 40%, #0984e3 100%) !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: 0 3px 22px rgba(9,132,227,0.19) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1010 !important;
    transition: box-shadow 0.2s, background 0.2s;
}
#chatbot-toggle-btn:hover, #chatbot-toggle-btn:focus {
    box-shadow: 0 6px 32px rgba(9,132,227,0.25);
    background: linear-gradient(135deg, #0984e3 70%, #00b894 100%);
}
#chatbot-toggle-btn img {
    pointer-events: none;
    max-width: 60px !important;
}

#chatbot-container.fullscreen {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
    max-height: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 1000px) {
    #chatbot-container {
        width: 100vw !important;
        min-height: 100vh !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
    }

    #chatbot-toggle-btn {
        position: fixed;
        bottom: 70px;
    }
}

