/* ==========================================================
   Clinic Digital Marketing AI Chatbot V2
========================================================== */

/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Reset */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#0F4C81;
    --primary-dark:#0A3A62;

    --secondary:#00B4D8;

    --success:#22C55E;

    --bg:#F6F9FC;

    --white:#FFFFFF;

    --text:#1F2937;

    --text-light:#6B7280;

    --border:#E5E7EB;

    --shadow:
        0 15px 45px rgba(15,76,129,.15);

    --radius:20px;

}

body{

    font-family:'Inter',sans-serif;

}

/* ================= CHATBOT ================= */

#cdm-chatbot{

    position:fixed;

    right:22px;

    bottom:100px;

    z-index:999999;

}

/* ================= Launcher ================= */

#cdm-launcher{

    width:68px;

    height:68px;

    border:none;

    cursor:pointer;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    box-shadow:
        0 12px 35px rgba(0,0,0,.25);

    transition:.3s;

    position:relative;

}

#cdm-launcher:hover{

    transform:translateY(-4px);

}

.launcher-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    width:100%;

    height:100%;

}

.notification-dot{

    width:14px;

    height:14px;

    background:#22C55E;

    border:3px solid #fff;

    border-radius:50%;

    position:absolute;

    right:6px;

    top:6px;

}



/* ================= WINDOW ================= */

#cdm-window{

    position:fixed;

    right:30px;

    bottom:30px;

    width:420px;

    height:min(780px, calc(100vh - 60px));

    display:none;

    flex-direction:column;

    overflow:hidden;

    border-radius:24px;

}

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

.cdm-header{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    padding:18px 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.cdm-header-left{

    display:flex;

    align-items:center;

    gap:14px;

}

.bot-avatar{

    width:52px;

    height:52px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    font-size:22px;

}

.status-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#22C55E;

    border:2px solid #fff;

    position:absolute;

    right:2px;

    bottom:2px;

}

.bot-details h3{

    font-size:17px;

    font-weight:700;

}

.online-status{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:13px;

    opacity:.95;

    margin-top:5px;

}

.online-circle{

    width:8px;

    height:8px;

    background:#22C55E;

    border-radius:50%;

}

.cdm-header-right{

    display:flex;

    gap:10px;

}

.header-btn{

    width:38px;

    height:38px;

    border:none;

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

    color:#fff;

    border-radius:10px;

    cursor:pointer;

    transition:.25s;

}

.header-btn:hover{

    background:#fff;

    color:var(--primary);

}

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

.cdm-body{

    flex:1;

    overflow-y:auto;

    background:var(--bg);

    padding:20px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* Scrollbar */

.cdm-body::-webkit-scrollbar{

    width:6px;

}

.cdm-body::-webkit-scrollbar-thumb{

    background:#d8dee8;

    border-radius:20px;

}

/* ==========================================================
   WELCOME CARD
========================================================== */

.welcome-card{

    background:#fff;

    border-radius:20px;

    padding:22px;

    text-align:center;

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

    border:1px solid var(--border);

    animation:fadeUp .45s ease;

}

.welcome-icon{

    width:64px;

    height:64px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    margin-bottom:18px;

}

.welcome-card h2{

    font-size:22px;

    color:var(--text);

    margin-bottom:12px;

    font-weight:700;

}

.welcome-card p{

    color:var(--text-light);

    font-size:14px;

    line-height:1.7;

}

/* ==========================================================
   SERVICE GRID
========================================================== */

.service-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}

/* ==========================================================
   SERVICE CARD
========================================================== */

.service-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:18px;

    cursor:pointer;

    transition:.3s;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    gap:12px;

    min-height:120px;

    box-shadow:0 4px 15px rgba(0,0,0,.04);

}

.service-card:hover{

    transform:translateY(-5px);

    border-color:var(--secondary);

    box-shadow:0 15px 30px rgba(15,76,129,.12);

}

/* ==========================================================
   SERVICE ICON
========================================================== */

.service-icon{

    width:54px;

    height:54px;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    transition:.3s;

}

.service-card:hover .service-icon{

    transform:scale(1.08);

}

/* ==========================================================
   SERVICE TITLE
========================================================== */

.service-card span{

    font-size:14px;

    color:var(--text);

    font-weight:600;

    line-height:1.5;

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   CHAT AREA
========================================================== */

#chat-messages{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:18px;

    overflow-y:auto;

    padding-bottom:10px;

}

#chat-messages::-webkit-scrollbar{

    width:6px;

}

#chat-messages::-webkit-scrollbar-thumb{

    background:#d8dee8;

    border-radius:20px;

}

/* ==========================================================
   BOT MESSAGE
========================================================== */

.bot-message{

    display:flex;

    align-items:flex-start;

    gap:12px;

    animation:fadeUp .35s ease;

}

/* ==========================================================
   USER MESSAGE
========================================================== */

.user-message{

    display:flex;

    justify-content:flex-end;

    animation:fadeUp .35s ease;

}

.user-message .bubble{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    border-radius:18px 18px 4px 18px;

}

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

.avatar{

    width:42px;

    height:42px;

    min-width:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:18px;

}

/* ==========================================================
   MESSAGE WRAPPER
========================================================== */

.message-wrapper{

    max-width:80%;

    display:flex;

    flex-direction:column;

    gap:6px;

}

/* ==========================================================
   MESSAGE BUBBLE
========================================================== */

.bubble{

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px 18px 18px 4px;

    padding:14px 18px;

    color:var(--text);

    font-size:14px;

    line-height:1.7;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}

/* ==========================================================
   TIME
========================================================== */

.message-time{

    font-size:12px;

    color:#9CA3AF;

    margin-left:6px;

}

/* ==========================================================
   TYPING
========================================================== */

#typing-box{

    display:none;

    align-items:flex-start;

    gap:12px;

    margin-top:6px;

    animation:fadeUp .3s ease;

}

.typing-wrapper{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.typing-text{

    font-size:12px;

    color:var(--text-light);

}

.typing{

    display:flex;

    align-items:center;

    gap:5px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:12px 16px;

    width:70px;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}

.typing span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

    animation:typingBounce 1.4s infinite;

}

.typing span:nth-child(2){

    animation-delay:.2s;

}

.typing span:nth-child(3){

    animation-delay:.4s;

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes typingBounce{

    0%,60%,100%{

        transform:translateY(0);

        opacity:.35;

    }

    30%{

        transform:translateY(-6px);

        opacity:1;

    }

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

.cdm-footer{

    display:flex;
    align-items:center;
    gap:12px;

    padding:16px 18px;

    background:#fff;

    border-top:1px solid var(--border);

}

.footer-icon{

    width:46px;
    height:46px;

    border:none;

    border-radius:14px;

    background:#F3F7FA;

    color:var(--primary);

    cursor:pointer;

    transition:.3s;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

.footer-icon:hover{

    background:var(--primary);

    color:#fff;

}

.input-wrapper{

    flex:1;

    position:relative;

}

#chat-input{

    width:100%;

    height:48px;

    border-radius:16px;

    border:1px solid var(--border);

    background:#F8FAFC;

    padding:0 18px;

    outline:none;

    font-size:14px;

    color:var(--text);

    transition:.3s;

}

#chat-input:focus{

    border-color:var(--secondary);

    background:#fff;

    box-shadow:0 0 0 4px rgba(0,180,216,.10);

}

#send-btn{

    width:50px;

    height:50px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:18px;

    transition:.3s;

    display:flex;

    align-items:center;

    justify-content:center;

}

#file-input{
    display:none;
}

#send-btn:hover{

    transform:translateY(-2px) scale(1.05);

    box-shadow:0 10px 25px rgba(15,76,129,.25);

}

.chat-footer-text{

    background:#fff;

    text-align:center;

    padding:10px 15px 16px;

    font-size:12px;

    color:var(--text-light);

    border-top:1px solid #f3f4f6;

}

.chat-footer-text i{

    color:var(--success);

    margin-right:6px;

}

/* ==========================================================
   WINDOW ANIMATION
========================================================== */

#cdm-window{

    animation:chatOpen .35s ease;

}

@keyframes chatOpen{

    from{

        opacity:0;

        transform:translateY(20px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    #cdm-chatbot{

        right:22px;

        bottom:100px;

    }

    #cdm-window{

        width:calc(100vw - 30px);

        height:calc(100vh - 100px);

        right:0;

        bottom:80px;

        border-radius:22px;

    }

    .service-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width: 480px){

    #cdm-window{

        position: fixed;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 100vh;

        margin: 0;

        border-radius: 0;

        box-sizing: border-box;

    }

}

/* ===========================
   Mobile (420px - 381px)
=========================== */

@media (max-width:420px){

    #cdm-window{

        position:fixed;

        top:0;
        left:0;

        width:100vw;
        height:100vh;

        border-radius:0;

        margin:0;

        box-sizing:border-box;

    }

}

/* ===========================
   Small Mobile (380px and below)
=========================== */

@media (max-width:380px){

    #cdm-window{

        position:fixed;

        top:0;
        left:0;

        width:100vw;
        height:100vh;

        border-radius:0;

        margin:0;

        box-sizing:border-box;

    }

    .cdm-header{

        padding:12px 14px;

    }

    .bot-details h3{

        font-size:16px;

    }

    .cdm-footer{

        padding:10px;

    }

    #chat-input{

        font-size:15px;

    }

}