/*======================================================== Chatbot "Charlie" ========================================================
  Personalizzazione grafica del widget https://chatbot.deltacommerce.com/include/chat.js
  (il DOM e' generato da chat.js, qui ridefiniamo solo l'aspetto; gli elementi extra li aggiunge /js/chatbot-charlie.js) */
:root {
    --primary-color: 198, 59, 56;
    --secondary-color: 168, 45, 43;
    --tertiary-color: 253, 239, 235;
    --tertiary-text-color: 74, 58, 56;
    --charlie-pink: #edab9e;
    --charlie-soft: #fdf6f4;
    --charlie-online: #3fb950;
}

/*------------------ bottone di apertura (avatar) ------------------*/
.chat-button.charlie-launcher {
    width: 68px;
    height: 68px;
    margin: 20px;
    padding: 0;
    border-radius: 50%;
    background: #fff !important;
    border: 3px solid #fff;
    box-shadow: 0 6px 20px rgba(198, 59, 56, .35);
    overflow: visible;
    animation: charlie-bob 3.2s ease-in-out infinite;
}
.chat-button.charlie-launcher:hover {
    background: #fff !important;
    box-shadow: 0 8px 26px rgba(198, 59, 56, .45);
    animation-play-state: paused;
}
.chat-button.charlie-launcher:focus-visible { outline: 3px solid rgba(198, 59, 56, .5); outline-offset: 3px; }
.chat-button.charlie-launcher .charlie-launcher__avatar { width: 100%; height: 100%; border-radius: 50%; display: block; }
/* anello che "respira" per attirare l'attenzione */
.chat-button.charlie-launcher::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(198, 59, 56, .55);
    animation: charlie-pulse 2.6s ease-out infinite;
    pointer-events: none;
}
.chat-button.charlie-launcher .charlie-launcher__dot,
#delta-chat-container .charlie-header__avatar::after {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--charlie-online);
    border: 2px solid #fff;
}
.chat-button.charlie-launcher .charlie-launcher__dot { right: 0; bottom: 2px; }

@keyframes charlie-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes charlie-pulse { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(1.45); opacity: 0; } }

/*------------------ fumetto di invito ------------------*/
.charlie-teaser {
    position: fixed;
    right: 100px;
    bottom: 30px;
    z-index: 9997;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 290px;
    max-width: calc(100vw - 120px);
    padding: 14px 32px 14px 14px;
    background: #fff;
    color: #4a3a38;
    border: 1px solid #f3dcd6;
    border-radius: 18px 18px 4px 18px;
    box-shadow: 0 10px 32px rgba(198, 59, 56, .22);
    font: 400 14px/1.45 "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    text-align: left;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateX(14px) scale(.9);
    transform-origin: bottom right;
    transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1), visibility 0s .45s;
}
.charlie-teaser.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* codina del fumetto verso l'avatar */
.charlie-teaser::after {
    content: "";
    position: absolute;
    right: -7px;
    bottom: 10px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-right: 1px solid #f3dcd6;
    border-bottom: 1px solid #f3dcd6;
    transform: rotate(-45deg);
}
.charlie-teaser:hover { box-shadow: 0 12px 36px rgba(198, 59, 56, .3); }
.charlie-teaser__avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); animation: charlie-wave 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.charlie-teaser__body { flex: 1 1 auto; min-width: 0; }
.charlie-teaser strong { display: block; color: #c63b38; font-weight: 700; margin-bottom: 2px; }
.charlie-teaser__text { display: block; }
.charlie-teaser__cta {
    display: inline-block;
    margin-top: 10px;
    padding: 7px 16px;
    border: 0;
    border-radius: 20px;
    background: #c63b38;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease;
}
.charlie-teaser__cta::after { content: " →"; }
.charlie-teaser__cta:hover,
.charlie-teaser__cta:focus-visible { background: #a82d2b; outline: none; }
/* prima del testo Charlie "sta scrivendo" */
.charlie-teaser__typing { display: none; width: 8px; height: 8px; margin: 10px 0 8px 14px; border-radius: 50%; animation: charlie-dots 1.2s infinite linear; }
.charlie-teaser.is-typing .charlie-teaser__typing { display: block; }
.charlie-teaser.is-typing .charlie-teaser__text,
.charlie-teaser.is-typing .charlie-teaser__cta { display: none; }
.charlie-teaser__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9a8a88;
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
}
.charlie-teaser__close:hover { background: #f4ecea; color: #4a3a38; }

/* badge di notifica sull'avatar */
.chat-button.charlie-launcher .charlie-launcher__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 2px solid #fff;
    background: #c63b38;
    color: #fff;
    font: 700 11px/16px "Open Sans", Arial, sans-serif;
    text-align: center;
    animation: charlie-badge .5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes charlie-badge { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes charlie-wave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-6deg); } }

/*------------------ finestra chat ------------------*/
#delta-chat-container.chat-container {
    width: 380px;
    height: 600px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    animation: charlie-open .28s ease-out;
}
@keyframes charlie-open { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

#delta-chat-container .chat-header {
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 52px 14px 16px;
    text-align: left;
    font-weight: 400;
    background: linear-gradient(135deg, #c63b38 0%, #d9625a 100%) !important;
}
#delta-chat-container .charlie-header__avatar {
    position: relative;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    background: #fff url(/immagini/chatbot/charlie.svg?v=2) center / cover no-repeat;
}
#delta-chat-container .charlie-header__avatar::after { content: ""; width: 11px; height: 11px; right: -1px; bottom: -1px; border-color: #d24c48; }
#delta-chat-container .charlie-header__name { display: block; font-size: 17px; font-weight: 700; line-height: 1.2; }
#delta-chat-container .charlie-header__status { display: block; font-size: 12.5px; line-height: 1.3; opacity: .9; }
#delta-chat-container .chat-close-button { right: 12px; width: 36px; height: 36px; }
#delta-chat-container .chat-close-button:hover { background: rgba(255, 255, 255, .18); }

/*------------------ benvenuto e risposte rapide ------------------*/
#delta-chat-container .charlie-welcome {
    flex: 0 0 auto;
    padding: 22px 20px 6px;
    text-align: center;
    background: var(--charlie-soft);
    color: #4a3a38;
}
#delta-chat-container .charlie-welcome[hidden] { display: none; }
#delta-chat-container .charlie-welcome__avatar { width: 84px; height: 84px; margin: 0 auto 10px; display: block; border-radius: 50%; box-shadow: 0 4px 14px rgba(198, 59, 56, .2); }
#delta-chat-container .charlie-welcome__title { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #c63b38; }
#delta-chat-container .charlie-welcome__text { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
#delta-chat-container .charlie-chips { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
#delta-chat-container .charlie-chip {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #f0c6bd;
    border-radius: 14px;
    background: #fff;
    color: #4a3a38;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
#delta-chat-container .charlie-chip::before { content: attr(data-icon); margin-right: 8px; }
#delta-chat-container .charlie-chip:hover,
#delta-chat-container .charlie-chip:focus-visible { border-color: #c63b38; background: #fff7f5; transform: translateX(2px); outline: none; }
#delta-chat-container .charlie-chip:disabled { opacity: .55; cursor: progress; }

/*------------------ messaggi ------------------*/
#delta-chat-container .chat-messages { background: var(--charlie-soft); padding: 16px 14px; }
#delta-chat-container .message { max-width: 82%; font-size: 14.5px; line-height: 1.5; padding: 10px 14px; margin: 6px 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
#delta-chat-container .message.sent { border-radius: 18px 18px 4px 18px; }
#delta-chat-container .message.received {
    position: relative;
    max-width: calc(82% - 34px);
    margin-left: 34px;
    border-radius: 18px 18px 18px 4px;
    background: #fff;
    border: 1px solid #f3dcd6;
}
/* piccolo avatar accanto alle risposte */
#delta-chat-container .message.received::before {
    content: "";
    position: absolute;
    left: -35px;
    bottom: -1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff url(/immagini/chatbot/charlie.svg?v=2) center / cover no-repeat;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
#delta-chat-container .message.system { max-width: 90%; border-radius: 12px; font-size: 13px; background: #fff; color: #7a6a68; border: 1px dashed #f0c6bd; box-shadow: none; }
#delta-chat-container .message a { color: #c63b38; text-decoration: underline; }

/* "sta scrivendo": tre puntini animati al posto del testo */
#delta-chat-container .message.typing {
    font-size: 0;
    line-height: 0;
    padding: 14px 16px;
    background: #fff;
    animation: none;
}
#delta-chat-container .message.typing::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 16px;
    border-radius: 50%;
    background: #d9a49a;
    animation: charlie-dots 1.2s infinite linear;
}
@keyframes charlie-dots {
    0%, 100% { box-shadow: -14px 0 0 0 #c63b38, 14px 0 0 0 #d9a49a; background: #d9a49a; }
    33% { box-shadow: -14px 0 0 0 #d9a49a, 14px 0 0 0 #d9a49a; background: #c63b38; }
    66% { box-shadow: -14px 0 0 0 #d9a49a, 14px 0 0 0 #c63b38; background: #d9a49a; }
}

/*------------------ campo di scrittura ------------------*/
#delta-chat-container .chat-input { padding: 10px 14px 6px; border-top: 1px solid #f3e4e0; }
#delta-chat-container .chat-input input { padding: 14px 58px 14px 18px; font-size: 15px; background: #faf7f6; border-color: #eadcd8; transition: border-color .2s ease, background-color .2s ease; }
#delta-chat-container .chat-input input:focus,
#delta-chat-container .chat-input input:focus-visible { background: #fff; border-color: #c63b38; }
#delta-chat-container .chat-input button { top: calc(50% - 18px); right: 20px; width: 40px; height: 40px; }
#delta-chat-container .charlie-disclaimer { margin: 0; padding: 2px 16px 10px; background: #fff; color: #9a8a88; font-size: 11px; line-height: 1.4; text-align: center; }

/*------------------ mobile ------------------*/
@media (max-width: 575px) {
    #delta-chat-container.chat-container {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
    }
    .chat-button.charlie-launcher { width: 60px; height: 60px; margin: 16px; }
    .charlie-teaser { right: 86px; bottom: 22px; max-width: calc(100vw - 102px); font-size: 13px; }
    #delta-chat-container .charlie-welcome { padding-top: 16px; }
    #delta-chat-container .charlie-welcome__avatar { width: 68px; height: 68px; }
    /* evita lo zoom automatico di iOS sul campo di testo */
    #delta-chat-container .chat-input input { font-size: 16px; }
}
@media (max-height: 640px) and (min-width: 576px) {
    #delta-chat-container.chat-container { height: calc(100% - 30px); }
}

@media (prefers-reduced-motion: reduce) {
    .chat-button.charlie-launcher,
    .chat-button.charlie-launcher::before,
    #delta-chat-container.chat-container { animation: none; }
    .charlie-teaser { transition: none; }
    .charlie-teaser__avatar,
    .charlie-teaser__typing,
    .chat-button.charlie-launcher .charlie-launcher__badge { animation: none; }
}