:root {
    --shc-primary: #1f6feb;
    --shc-bg: #ffffff;
    --shc-text: #111827;
    --shc-border: rgba(0,0,0,0.08);
}

/* ===========================
   FLOAT BUTTON (FIXED SIZE)
=========================== */
#shc-btn {
    position: fixed;
    bottom: 22px;
    right: 22px;
    background: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 99999;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12),
                0 0 12px rgba(31,111,235,0.25);
    transition: 0.2s ease;
    animation: shcGlow 2.5s ease-in-out infinite;

}
@keyframes shcGlow {
    0% {
        box-shadow: 0 8px 20px rgba(0,0,0,0.12),
                    0 0 10px rgba(31,111,235,0.25);
    }
    50% {
        box-shadow: 0 8px 25px rgba(0,0,0,0.15),
                    0 0 18px rgba(31,111,235,0.45);
    }
    100% {
        box-shadow: 0 8px 20px rgba(0,0,0,0.12),
                    0 0 10px rgba(31,111,235,0.25);
    }
}

/* logo */
#shc-btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* text */
.shc-btn-text {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
}

/* hover effect */
#shc-btn:hover {
    transform: scale(1.05);
}

/* ===========================
   CHAT BOX (APPLE STYLE)
=========================== */
#shc-box {
    position: fixed;
    bottom: 90px;
    right: 22px;
    width: 340px;
    height: 460px;
    background: var(--shc-bg);
    border: 1px solid var(--shc-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    z-index: 999999 !important;
    box-shadow:
    0 10px 20px rgba(0,0,0,0.25),
    0 20px 40px rgba(0,0,0,0.35),
    0 30px 70px rgba(0,0,0,0.45);
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px) scale(0.92);
    pointer-events: none;
    transition:
        opacity 0.35s cubic-bezier(0.16,1,0.3,1),
        transform 0.45s cubic-bezier(0.16,1,0.3,1);
       
}

#shc-box.shc-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}


/* ===========================
   HEADER (MODERN)
=========================== */
#shc-header {
    padding: 12px 14px;
    background: rgba(249,249,250,0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--shc-border);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shc-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shc-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
}

/* CLOSE BUTTON */
#shc-close {
    font-size: 20px;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #6b7280;
    transition: all 0.2s ease;
}

/* ===========================
   MESSAGES (WHATSAPP STYLE)
=========================== */
#shc-msgs {
    flex: 1;
    padding: 14px;
    overflow-y: auto;
    background: #eef2f7;
}

/* message animation */
.shc-msg {
    max-width: 80%;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 14px;
    font-size: 14px;
    display: inline-block;
    clear: both;
    opacity: 0;
    transform: translateY(10px);
    animation: msgIn 0.25s ease forwards;
}

@keyframes msgIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* user */
.shc-user {
    float: right;
    background: #dcf8c6;
    border-bottom-right-radius: 4px;
}

/* bot */
.shc-bot {
    float: left;
    background: #fff;
    border-bottom-left-radius: 4px;
}


/* ===========================
   INPUT AREA
=========================== */
#shc-input-area {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--shc-border);
    background: #fff;
}

#shc-input {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--shc-border);
    outline: none;
    transition: 0.2s ease;
}

#shc-input:focus {
    border-color: var(--shc-primary);
    box-shadow: 0 0 0 3px rgba(31,111,235,0.15);
}
@media (max-width: 1024px),
       (max-width: 768px),
       (max-width: 480px),
       (max-width: 320px) {

    #shc-box {
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(30px) scale(0.92);
    }

    #shc-box.shc-open {
        transform: translateX(-50%) translateY(0) scale(1);
    }
}