#runChatWrap{
    position:fixed;
    right:25px;
    bottom:20px;
    z-index:2147483647;
}

/*******************
 버튼
********************/

/* ============================= */
/* 상담 버튼 테마 */
/* class만 변경하면 전체 색상 변경 */
/* ============================= */

#runChatButton.blue{
    --chat-bg:#2F80ED;
    --chat-bg-hover:#1F6FD6;
    --chat-text:#FFFFFF;
    --chat-icon:#264363;
    --chat-icon-bg:#ffffff;
}

#runChatButton.green{
    --chat-bg:#27AE60;
    --chat-bg-hover:#219653;
    --chat-text:#FFFFFF;
    --chat-icon:#145A32;
    --chat-icon-bg:#ffffff;
}

#runChatButton.red{
    --chat-bg:#E74C3C;
    --chat-bg-hover:#C0392B;
    --chat-text:#FFFFFF;
    --chat-icon:#7B241C;
    --chat-icon-bg:#ffffff;
}

#runChatButton.orange{
    --chat-bg:#F2994A;
    --chat-bg-hover:#E67E22;
    --chat-text:#FFFFFF;
    --chat-icon:#8A4B08;
    --chat-icon-bg:#ffffff;
}


/* ============================= */
/* 원형 버튼 */
/* ============================= */

#runChatButton.circle{
    width:80px;
    height:80px;
    border-radius:50%;
    background:var(--chat-bg);
    color:var(--chat-text);

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

    cursor:pointer;
    font-size:14px;
    font-weight:bold;

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

    position:absolute;
    right:0;
    bottom:0;
}


/* ============================= */
/* 하단 버튼 */
/* ============================= */

#runChatButton.bottom{
    position:fixed;
    gap:5px;
    right:20px;
    bottom:0;
    width:200px;
    height:45px;
    border-radius:12px 12px 0 0;
    background:var(--chat-bg);
    color:var(--chat-text);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:15px;
    font-weight:bold;
    box-shadow:0 -2px 12px rgba(0,0,0,.25);
    z-index:999999;
}

#runChatButton.bottom:hover{
    background:var(--chat-bg-hover);
    transform:translateY(-2px);
}


/* ============================= */
/* 아이콘 & 글자 */
/* ============================= */

#runChatButton span{
    color:var(--chat-text);
}

#runChatButton svg{
    width:25px;
    height:25px;
    fill:var(--chat-icon-bg);
    color:var(--chat-icon);
    stroke-width:2px;
}

/*******************
 채팅창(div)
********************/

#runChatContainer{
    position:absolute;
    right:0;
    bottom:0px;   /* 버튼 위에 붙도록 */

    width:360px;
    height:600px;

    border-radius:12px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.3);

    visibility:hidden;
    opacity:0;
    transform:translateY(20px) scale(.95);
    pointer-events:none;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility 0s linear .25s;
}

#runChatContainer.open{
    visibility:visible;
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

/*******************
 iframe
********************/

#runChatFrame{
    width:100%;
    height:100%;
    border:0;
    display:block;
}