/* ==========================================================
   ODW Chat Capture v3
   ========================================================== */

/* ---------- Chat Bubble ---------- */

.odw-chat-bubble {
    position: fixed;
    bottom: 16px;
    right: 16px;

    width: 56px;
    height: 56px;

    display: none;
    align-items: center;
    justify-content: center;

    position: fixed;

    background: #1976f3;
    color: #fff;

    border-radius: 50%;

    cursor: pointer;

    box-shadow: 0 8px 25px rgba(0,0,0,.20);

    font-size: 24px;

    z-index: 99999;

    animation: pulse 2.5s infinite;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.odw-chat-bubble:hover {

    transform: scale(1.06);

    box-shadow: 0 10px 28px rgba(0,0,0,.28);

}

.chat-icon{

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

}

/* ---------- Notification Badge ---------- */

.notification-badge {

    position:absolute;

    top:-5px;
    right:-5px;

    width:24px;
    height:24px;

    display:none;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#ff2d2d;

    color:#fff;

    font-size:16px;
    font-weight:700;
    font-family:Arial, Helvetica, sans-serif;

    box-shadow:0 0 12px rgba(255,0,0,.55);

    animation:badgePulse 1.4s infinite;

    z-index:100000;
        text-align: center;

    /* Center the glyph perfectly */
    line-height:1;
    padding-bottom:2px;
    padding-left:1px;
}

/* ---------- Window ---------- */

.odw-chat-window{

    position:fixed;

    right:16px;
    bottom:84px;

    width:260px;

    max-width:calc(100vw - 40px);

    max-height:62vh;

    display:none;

    flex-direction:column;

    overflow:hidden;

    background:#fff;

    border-radius:22px;

    box-shadow:0 18px 50px rgba(0,0,0,.25);

    z-index:99998;

}

.odw-chat-window.is-open{
    display:flex;
}

/* ---------- Header ---------- */

.chat-header{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 12px;

    background:#1976f3;

    color:#fff;

}

.agent-avatar{

    width:36px;
    height:36px;

    border-radius:50%;

    object-fit:cover;

}

.chat-header strong{

    font-size:13px;

}

.chat-header small{

    opacity:.95;

}

.close-chat{

    margin-left:auto;

    cursor:pointer;

    font-size:24px;

    font-weight:300;

    line-height:1;

    padding:5px 8px;

    border-radius:8px;

    transition:all .2s ease;

    user-select:none;

}

.close-chat:hover{

    background:rgba(255,255,255,.15);

    transform:scale(1.08);

}

/* ---------- Body ---------- */

.chat-body{

    background:#f7f8fb;

    padding:12px;

    overflow-y:auto;

    min-height:72px;

    max-height:none;

    flex:0 0 auto;

    -webkit-overflow-scrolling:touch;

}

/* ---------- Messages ---------- */

.chat-bubble-msg{

    display:inline-block;

    max-width:85%;

    margin-bottom:8px;

    padding:8px 12px;

    border-radius:18px;

    line-height:1.45;

    font-size:13px;

    animation:messageIn .35s ease;

}

.agent-msg{

    background:#fff;

    color:#333;

    border-bottom-left-radius:5px;

    box-shadow:0 1px 4px rgba(0,0,0,.08);

}

/* ---------- Form ---------- */

.chat-form-container{

    background:#fff;

    padding:10px;

    border-top:1px solid #ececec;

    flex:0 0 auto;

    min-height:0;

    max-height:none;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

    overscroll-behavior:contain;

}

#odw-chat-window .gform_button,
#odw-chat-window #gform_submit_button_6{
    background:#1976f3 !important;
    color:#fff !important;
    opacity:1 !important;
    width:100%;
    border:0;
    border-radius:10px;
    padding:14px 16px;
    font-weight:700;
    cursor:pointer;
}

#odw-chat-window .gform_button:disabled{
    background:#bdbdbd !important;
    cursor:wait;
}

#odw-chat-window .gfield_error input{
    border:1px solid #c0392b !important;
}

/* ---------- Gravity Forms ---------- */

#odw-chat-window .gform_wrapper h2.gform_title,
#odw-chat-window .gform_wrapper .gform_heading,
#odw-chat-window .gform_title{

    display:none !important;

}

#odw-chat-window .gform_wrapper .gform_body{

    padding-top:0 !important;

}

/* ---------- Animations ---------- */

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes badgePulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.22);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes messageIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ---------- Mobile ---------- */

@media (max-width:768px){

    .odw-chat-window{

        width:auto;
        left:12px;
        right:12px;
        bottom:88px;
        max-height:72vh;

    }

    .odw-chat-bubble{

        width:62px;

        height:62px;

        right:18px;

        bottom:18px;

        font-size:28px;

    }

}
@media (max-width: 768px) {
    .odw-chat-window {
        width: 280px;
        max-width: calc(100vw - 24px);
        max-height: 52vh;
        right: 12px;
        bottom: 76px;
        border-radius: 16px;
    }
    .chat-body { max-height: 12vh; padding: 8px; }
    .chat-form-container { padding: 8px; }
    .odw-chat-bubble { width: 52px; height: 52px; bottom: 12px; right: 12px; }
}

#odw-chat-window .gform_wrapper .gfield_label,
#odw-chat-window .gform_wrapper label {
    font-size: 12px !important;
    margin-bottom: 2px !important;
    font-weight: 600;
}
#odw-chat-window .gform_wrapper input,
#odw-chat-window .gform_wrapper textarea,
#odw-chat-window .gform_wrapper select {
    font-size: 14px !important;
    padding: 6px 8px !important;
    min-height: 0 !important;
    height: 34px !important;
    margin: 0 0 6px !important;
}
#odw-chat-window .gform_wrapper .gfield {
    margin-bottom: 6px !important;
}
#odw-chat-window .gform_button,
#odw-chat-window #gform_submit_button_6 {
    padding: 8px 14px !important;
    font-size: 13px !important;
    min-height: 0 !important;
}
@media (max-width: 768px) {
    .odw-chat-window {
        width: 240px;
        max-width: calc(100vw - 28px);
        max-height: 46vh;
        right: 10px;
        bottom: 72px;
        border-radius: 14px;
    }
    .chat-body { max-height: 10vh; padding: 8px; font-size: 13px; }
    .chat-form-container { padding: 8px; max-height: 30vh; }
    .odw-chat-bubble { width: 48px; height: 48px; bottom: 12px; right: 10px; }
}

@media (max-width: 768px) {
    .odw-chat-window {
        width: 250px;
        max-width: calc(100vw - 28px);
        max-height: 62vh;
        right: 10px;
        bottom: 72px;
    }
    .chat-body {
        max-height: none;
        min-height: 0;
        padding: 10px;
        overflow: visible;
        flex: 0 0 auto;
    }
    .chat-bubble-msg {
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
    }
    .chat-form-container {
        padding: 8px;
        max-height: none;
        flex: 0 0 auto;
    }
}