/*==============================================================
    ONDINO 1.0
    Onda Ceramiche
==============================================================*/


/*==============================================================
    VARIABILI
==============================================================*/

:root{

    --ondino-primary:#168BFF;

    --ondino-primary-dark:#0069d9;

    --ondino-bg:#ffffff;

    --ondino-body:#f5f7fb;

    --ondino-text:#202124;

    --ondino-muted:#6b7280;

    --ondino-border:#e8ecf3;

    --ondino-radius:26px;

    --ondino-shadow:
        0 20px 60px rgba(0,0,0,.16);

}


/*==============================================================
    RESET
==============================================================*/

#ondino,
#ondino *{

    box-sizing:border-box;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

}


/*==============================================================
    CONTENITORE
==============================================================*/

#ondino{

    position:fixed;

    right:30px;

    bottom:25px;

    z-index:999999;

}


/*==============================================================
    PULSANTE
==============================================================*/

#ondino-button{

    position:fixed;

    right:30px;

    bottom:25px;

    z-index:999999;

    cursor:pointer;

    background:transparent;

    border:none;

    padding:0;

    margin:0;

    line-height:0;

    box-shadow:none;

    transition:
        transform .35s,
        filter .35s;

}

#ondino-button:hover{

    transform:translateY(-8px);

}


/*==============================================================
    AVATAR
==============================================================*/

#ondino-avatar{
    width:142px;

    height:auto;

    display:block;

    background:transparent;

    user-select:none;

    filter:
        drop-shadow(
            0 12px 28px
            rgba(0,0,0,.18)
        );

    transition:transform .35s;
    transform-origin:50% 88%;
    animation:ondino-amico 5.8s ease-in-out infinite;

}

#ondino-avatar:hover{

    transform:scale(1.04);

}


/*==============================================================
    FINESTRA CHAT
==============================================================*/

#ondino-window{

    position:fixed;

    right:30px;

    bottom:118px;

    width:360px;

    height:430px;

    display:flex;

    flex-direction:column;

    background:var(--ondino-bg);

    border-radius:var(--ondino-radius);

    box-shadow:var(--ondino-shadow);

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:

        translateY(40px)

        scale(.96);

    transition:

        opacity .35s,

        transform .35s,

        visibility .35s;

}


/*==============================================================
    CHAT APERTA
==============================================================*/

#ondino-window.open{

    z-index:10000;

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:

        translateY(0)

        scale(1);

}

#ondino-button,
#ondino-button img,
#ondino-avatar{

    background: transparent !important;

    background-color: transparent !important;

    border: none !important;

    box-shadow: none !important;

    outline: none !important;

}

#ondino-button{

    width: auto !important;

    height: auto !important;

    overflow: visible !important;

}

#ondino-avatar{

    display: block !important;

    width: 112px;

    height: auto;

}


/*==============================================================
    BODY CHAT
==============================================================*/

.ondino-body{

    flex:0 1 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    padding:20px 24px 10px;

    overflow-y:auto;

    background:#ffffff;

    

}

.ondino-welcome{

    text-align:center;

}

/* .ondino-big-avatar{

    width: 95px;

    display:block;

    margin:0 auto 20px;

} */

.ondino-welcome h2{

    margin:0;

    font-size:28px;

    color:#1d3557;

}

.ondino-welcome p{

    margin-top:12px;

    color:#666;

    line-height:1.6;

}

/*==============================================================
    AZIONI
==============================================================*/

.ondino-actions{

    width:100%;

    margin-top:28px;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.ondino-action{

    width:100%;

   /* padding:14px 18px;*/

    border:none;

    border-radius:18px;

    background:#f5f7fb;

    color:#16324f;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    text-align:left;

    box-shadow:0 3px 12px rgba(0,0,0,.05);

}

.ondino-action:hover{

    background:#168BFF;

    color:#fff;

    transform:translateX(4px);

}

/*==============================================================
    FOOTER
==============================================================*/

.ondino-footer{

    display:flex;

    align-items:center;

    gap:10px;

    padding:16px;

    border-top:1px solid #ececec;

    background:#fff;

}

#ondino-input{

    flex:1;

    height:46px;

    padding:0 16px;

    border:1px solid #d8dde6;

    border-radius:25px;

    outline:none;

    font-size:15px;

}

#ondino-input:focus{

    border-color:#168BFF;

}

#ondino-send{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#168BFF;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    transition:.25s;

}

#ondino-send:hover{

    transform:scale(1.08);

}

/*==============================================================
    HEADER PREMIUM
==============================================================*/

.ondino-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px 18px;

    background:#0F2747;

    border-bottom:1px solid #1b4d80;

    color:#fff;

    border-radius:26px 26px 0 0;

    min-height:80px;

    background:#0f2747 !important;

    z-index: 10000;

}

.ondino-header-left{

    display:flex;

    align-items:center;

    gap:12px;

}

.ondino-header-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff;

    padding:3px;

}

.ondino-header-text{

    display:flex;

    flex-direction:column;

}

.ondino-header-text strong{

    font-size:16px;

    font-weight:700;

    line-height:1.2;

}

.ondino-header-text span{

    font-size:12px;

    opacity:.85;

}

#ondino-close{
    position:absolute;
    top:12px;
    right:12px;
    z-index:100001;

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

    background:#d4af37;

    color:#fff;

    cursor:pointer;

    font-size:27px;
    font-weight:700;
    line-height:1;

    transition:.25s;

}

#ondino-close:hover{
    background:#fff;
    color:#0f2747;

    transform:rotate(90deg);

}

/*==============================
    MESSAGGI CHAT
==============================*/

.ondino-message{

    max-width:80%;
    padding:12px 16px;
    margin:12px 0;
    border-radius:18px;
    font-size:15px;
    line-height:1.5;
    word-break:break-word;

}

#ondino-button::before{
    content:"👋 Ciao, sono Ondino!\A Progettiamo insieme casa tua";
    white-space:pre-line;
    position:absolute;
    right:8px;
    bottom:132px;
    width:190px;
    padding:12px 15px;
    border-radius:18px 18px 4px 18px;
    background:#fff;
    color:#0f2747;
    font:700 13px/1.35 Arial,sans-serif;
    text-align:center;
    box-shadow:0 8px 24px rgba(10,29,55,.22);
    border:1px solid rgba(212,175,55,.65);
    animation:ondino-nuvoletta 4s ease-in-out infinite;
}
#ondino-button::after{
    content:"";
    position:absolute;
    right:27px;
    bottom:122px;
    border:10px solid transparent;
    border-top-color:#fff;
    transform:rotate(-18deg);
}
#ondino-button.hide::before,#ondino-button.hide::after{display:none}
@keyframes ondino-nuvoletta{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-7px);opacity:.96}}
@media(max-width:600px){#ondino-button::before{width:164px;font-size:12px;bottom:116px;right:0}}

@keyframes ondino-amico{
    0%,18%,100%{transform:translateX(0) translateY(0) rotate(0deg) scale(1)}
    26%{transform:translateX(-7px) translateY(-5px) rotate(-5deg) scale(1.03)}
    34%{transform:translateX(5px) translateY(-10px) rotate(5deg) scale(1.05)}
    42%{transform:translateX(-4px) translateY(-5px) rotate(-4deg) scale(1.03)}
    50%{transform:translateX(0) translateY(0) rotate(0deg) scaleX(.94)}
    55%{transform:translateX(0) translateY(-3px) rotate(2deg) scale(1.04)}
    68%{transform:translateX(4px) translateY(0) rotate(0deg) scale(1)}
}

@media (prefers-reduced-motion:reduce){#ondino-avatar{animation:none}}

/* Nessun contenuto della conversazione deve allargare il pannello. */
#ondino-window, .ondino-body { overflow-x: hidden; }
.ondino-message, .ondino-message p, .ondino-message a { overflow-wrap: anywhere; word-break: break-word; }

/* Su smartphone Ondino resta sempre accessibile senza coprire le schede del sito. */
@media(max-width:600px){
    #ondino{right:12px;bottom:12px;}
    #ondino-button{right:12px;bottom:12px;}
    #ondino-avatar{width:86px;}
    #ondino-button::before,#ondino-button::after{display:none;}
    #ondino-window{right:10px;bottom:10px;width:calc(100vw - 20px);height:min(610px,calc(100dvh - 20px));border-radius:20px;}
}

.ondino-message.user{

    margin-left:auto;
    background:#168BFF;
    color:#fff;

}

.ondino-message.bot{

    margin-right:auto;
    background:#f3f5f8;
    color:#16324f;

}

.ondino-message.typing{

    display:flex;
    gap:6px;
    align-items:center;
    width:fit-content;

}

.ondino-message.typing span{

    width:8px;
    height:8px;
    border-radius:50%;
    background:#8aa0b8;
    animation:ondinoTyping 1s infinite;

}

.ondino-message.typing span:nth-child(2){

    animation-delay:.2s;

}

.ondino-message.typing span:nth-child(3){

    animation-delay:.4s;

}

@keyframes ondinoTyping{

    0%,80%,100%{

        transform:scale(.6);
        opacity:.4;

    }

    40%{

        transform:scale(1);
        opacity:1;

    }

}

/* ==========================================
   BUTTONS
========================================== */

.ondino-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:15px;
}

.ondino-button{
    background:#ffffff;
    border:2px solid #d8d8d8;
    border-radius:10px;
    padding:10px 18px;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    transition:all .2s;
}
.ondino-buttons a.ondino-button{display:inline-block;text-decoration:none;color:inherit;}

.ondino-button:hover{
    background:#111;
    color:#fff;
    border-color:#111;
}