/* Smart Support Button Pro v2.0.0 — Frontend */
:root{
    --ssb-primary:#7c3aed;--ssb-text:#fff;--ssb-pulse:#7c3aed;
    --ssb-right:24px;--ssb-left:auto;--ssb-bottom:24px;
    --ssb-size:56px;--ssb-fab-br:100px;
    --ssb-panel-r:18px;--ssb-panel-w:300px;--ssb-zi:99999;
    --ssb-anim:cubic-bezier(.34,1.56,.64,1);
    --ssb-shadow:0 8px 32px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);
}
*,*::before,*::after{box-sizing:border-box;}

#ssb-wrapper{
    position:fixed;right:var(--ssb-right);left:var(--ssb-left);bottom:var(--ssb-bottom);
    z-index:var(--ssb-zi);display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    direction:rtl;
    width: fit-content;
    max-width: calc(100vw - 32px);
    pointer-events: none; 
}
#ssb-wrapper[data-pos="bottom-left"]{align-items:flex-start;}

/* ── FAB ── */
#ssb-fab{
    position:relative;display:flex;align-items:center;gap:10px;
    height:var(--ssb-size);min-width:var(--ssb-size);
    border:none;border-radius:var(--ssb-fab-br);
    background:var(--ssb-primary);color:var(--ssb-text);
    cursor:pointer;outline:none;box-shadow:var(--ssb-shadow);
    transition:transform .25s var(--ssb-anim),box-shadow .25s;overflow:visible;
    pointer-events: auto;
}
#ssb-fab[data-hover="lift"]:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.22);}
#ssb-fab[data-hover="scale"]:hover{transform:scale(1.1);}
#ssb-fab[data-hover="glow"]:hover{box-shadow:0 0 0 6px rgba(124,58,237,.25),var(--ssb-shadow);}
#ssb-fab:active{transform:scale(.96)!important;}
#ssb-fab[style*="--ssb-fab-br:50%"]{padding:0;justify-content:center;}

.ssb-fab-content{display:flex;align-items:center;gap:10px;}
.ssb-fab-icon-svg,.ssb-close-svg{width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
.ssb-fab-icon-svg svg,.ssb-close-svg svg{width:100%;height:100%;}
.ssb-fab-emoji{font-size:22px;line-height:1;}
.ssb-fab-img{width:28px;height:28px;object-fit:contain;border-radius:4px;}
.ssb-fab-label{font-size:14px;font-weight:600;white-space:nowrap;}

/* Pulse */
#ssb-fab.ssb-pulse::before{
    content:'';position:absolute;inset:-5px;border-radius:calc(var(--ssb-fab-br) + 5px);
    border:2px solid var(--ssb-pulse);opacity:0;
    animation:ssb-pulse 2.4s ease-out infinite;pointer-events:none;
}
@keyframes ssb-pulse{
    0%{opacity:.65;transform:scale(1);}70%{opacity:0;transform:scale(1.25);}100%{opacity:0;transform:scale(1.25);}
}

/* Tooltip */
#ssb-fab[data-tooltip]::after{
    content:attr(data-tooltip);position:absolute;bottom:calc(100% + 10px);right:0;
    background:#1a1a2e;color:#fff;font-size:12px;padding:6px 12px;border-radius:8px;
    white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px);
    transition:opacity .2s,transform .2s;
}
#ssb-fab[data-tooltip]:hover::after{opacity:1;transform:translateY(0);}
#ssb-wrapper[data-pos="bottom-left"] #ssb-fab[data-tooltip]::after{right:auto;left:0;}

/* ── Welcome bubble ── */
#ssb-welcome{
    background:#fff;border-radius:12px;box-shadow:var(--ssb-shadow);
    padding:0;overflow:hidden;max-width:240px;
    animation:ssb-welcome-in .4s var(--ssb-anim) both;
}
@keyframes ssb-welcome-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.ssb-welcome-inner{display:flex;align-items:flex-start;gap:8px;padding:12px 14px;}
.ssb-welcome-inner span{font-size:13px;color:#333;line-height:1.5;flex:1;}
.ssb-welcome-close{
    background:none;border:none;color:#aaa;cursor:pointer;font-size:14px;
    padding:0;line-height:1;flex-shrink:0;margin-top:1px;
}
.ssb-welcome-close:hover{color:#666;}

/* ── Panel ── */
#ssb-panel{
    background:#fff;border-radius:var(--ssb-panel-r);box-shadow:var(--ssb-shadow);
    width:var(--ssb-panel-w);max-width:calc(100vw - 32px);overflow:hidden;
    pointer-events:none;transform-origin:bottom right;
    opacity:0;transform:scale(.85) translateY(16px);
    transition:opacity .3s,transform .35s;
}
#ssb-wrapper[data-pos="bottom-left"] #ssb-panel{transform-origin:bottom left;}
#ssb-wrapper[data-anim="bounce"] #ssb-panel{transition:opacity .3s,transform .4s var(--ssb-anim);}
#ssb-wrapper[data-anim="fade"]   #ssb-panel{transition:opacity .35s ease,transform .35s ease;}
#ssb-wrapper[data-anim="slide"]  #ssb-panel{transform-origin:bottom center;transition:opacity .3s,transform .35s ease;}
#ssb-panel.ssb-open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;}

/* Panel Header */
.ssb-panel-header{
    background:var(--ssb-primary);color:#fff;
    padding:16px 16px 18px;display:flex;align-items:center;justify-content:space-between;
}
.ssb-panel-header.ssb-gradient-header{
    background:linear-gradient(135deg,var(--ssb-primary) 0%,color-mix(in srgb,var(--ssb-primary) 70%,#000) 100%);
}
.ssb-header-info{display:flex;align-items:center;gap:12px;}
.ssb-avatar-wrap{position:relative;flex-shrink:0;}
.ssb-avatar-img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.3);}
.ssb-avatar-emoji{
    width:44px;height:44px;background:rgba(255,255,255,.18);border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:22px;
}
.ssb-dot{
    position:absolute;bottom:1px;left:1px;width:11px;height:11px;
    background:#4ade80;border-radius:50%;border:2px solid var(--ssb-primary);
}
.ssb-dot-offline{background:#f87171;}
.ssb-panel-title{font-size:15px;font-weight:700;}
.ssb-panel-subtitle{font-size:12px;opacity:.82;margin-top:3px;line-height:1.4;}
.ssb-close-btn{
    background:rgba(255,255,255,.15);border:none;color:#fff;
    width:30px;height:30px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0;line-height: 0;
    padding: 0;
}
.ssb-close-btn svg{width:14px;height:14px;}
.ssb-close-btn:hover{background:rgba(255,255,255,.28);}

/* Panel Body */
.ssb-panel-body{padding:12px 10px;display:flex;flex-direction:column;gap:7px;}

/* Channel Buttons */
.ssb-channel-btn{
    display:flex;align-items:center;gap:12px;padding:12px 14px;
    border-radius:12px;text-decoration:none;color:#222;
    background:#f8f8fb;border:1.5px solid #ebebf2;
    transition:background .2s,transform .25s var(--ssb-anim),border-color .2s,color .2s;
    position:relative;overflow:hidden;
}
.ssb-channel-btn::before{
    content:'';position:absolute;inset:0;background:var(--ch-color);
    opacity:0;transition:opacity .2s;
}
.ssb-channel-btn:hover{border-color:var(--ch-color);transform:translateX(-3px);}
.ssb-channel-btn:hover::before{opacity:1;}
.ssb-channel-btn:hover .ssb-ch-label,
.ssb-channel-btn:hover .ssb-ch-arrow{color:#fff;position:relative;z-index:1;}
.ssb-ch-icon{
    width:36px;height:36px;border-radius:10px;background:var(--ch-color);
    display:flex;align-items:center;justify-content:center;color:#fff;
    flex-shrink:0;transition:transform .25s var(--ssb-anim);position:relative;z-index:1;
}
.ssb-ch-icon svg{width:18px;height:18px;}
.ssb-channel-btn:hover .ssb-ch-icon{transform:scale(1.1);}
.ssb-ch-label{flex:1;font-size:14px;font-weight:600;transition:color .2s;}
.ssb-ch-arrow{display:flex;align-items:center;color:#ccc;transition:color .2s,transform .2s;}
.ssb-channel-btn:hover .ssb-ch-arrow{transform:translateX(-3px);}

/* Stagger */
#ssb-panel.ssb-open .ssb-channel-btn{animation:ssb-item-in .35s var(--ssb-anim) both;}
#ssb-panel.ssb-open .ssb-channel-btn:nth-child(1){animation-delay:.04s;}
#ssb-panel.ssb-open .ssb-channel-btn:nth-child(2){animation-delay:.09s;}
#ssb-panel.ssb-open .ssb-channel-btn:nth-child(3){animation-delay:.14s;}
#ssb-panel.ssb-open .ssb-channel-btn:nth-child(4){animation-delay:.19s;}
@keyframes ssb-item-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* Offline */
.ssb-offline-body{padding:28px 20px;text-align:center;color:#555;}
.ssb-offline-icon{font-size:36px;margin-bottom:12px;}
.ssb-offline-body p{font-size:14px;line-height:1.6;margin:0;}

/* Responsive */
@media(max-width:480px){
    #ssb-panel{width:calc(100vw - 32px);}
    .ssb-fab-label{display:none;}
    #ssb-fab{padding:0;justify-content:center;}
}