/* Support Widget v2 — Professional */
:root{--sw-color:#6366f1;--sw-pos-right:20px;--sw-pos-bottom:20px}
.sw-hidden{display:none!important}
#supportWidget{position:fixed;z-index:99999;font-family:system-ui,-apple-system,sans-serif;transition:all .3s}
#supportWidget.sw-left{left:var(--sw-pos-right);right:auto}
#supportWidget.sw-right{right:var(--sw-pos-right);left:auto}
#supportWidget{bottom:var(--sw-pos-bottom)}

/* Bubble */
.sw-bubble{border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;position:relative;z-index:2;box-shadow:0 4px 20px rgba(0,0,0,.3);overflow:hidden}
.sw-bubble:hover{transform:scale(1.08)}
.sw-bubble.circle{width:56px;height:56px;border-radius:50%}
.sw-bubble.rounded{width:56px;height:56px;border-radius:14px}
.sw-bubble.teardrop{width:64px;height:58px;border-radius:32px 8px 8px 32px}
.sw-left .sw-bubble.teardrop{border-radius:8px 32px 32px 8px}
/* Edge-attached teardrop — minimized, expands on hover */
#supportWidget.sw-right.sw-teardrop-mode{right:0!important;--sw-pos-right:0px}
#supportWidget.sw-left.sw-teardrop-mode{left:0!important}
.sw-teardrop-mode .sw-bubble.teardrop{border-radius:32px 0 0 32px;width:24px;height:48px;box-shadow:-2px 0 12px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);border-right:none;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;padding-right:2px}
.sw-left.sw-teardrop-mode .sw-bubble.teardrop{border-radius:0 32px 32px 0;border-right:1px solid rgba(255,255,255,.1);border-left:none;box-shadow:2px 0 12px rgba(0,0,0,.25);padding-left:2px;padding-right:0}
.sw-teardrop-mode .sw-bubble.teardrop:hover{width:44px;border-radius:24px 0 0 24px}
.sw-left.sw-teardrop-mode .sw-bubble.teardrop:hover{border-radius:0 24px 24px 0}
.sw-teardrop-mode .sw-bubble.teardrop svg{width:16px;height:16px;opacity:.7;transition:all .25s}
.sw-teardrop-mode .sw-bubble.teardrop:hover svg{width:20px;height:20px;opacity:1}
.sw-teardrop-mode .sw-bubble.teardrop .sw-bubble-close-icon{display:none!important}
.sw-teardrop-mode.sw-open .sw-bubble.teardrop{width:44px}
.sw-teardrop-mode.sw-open .sw-bubble.teardrop .sw-bubble-open-icon{display:none}
.sw-teardrop-mode.sw-open .sw-bubble.teardrop .sw-bubble-close-icon{display:block!important}
.sw-teardrop-mode .sw-panel{bottom:60px}
.sw-right.sw-teardrop-mode .sw-panel{right:4px;border-radius:16px 4px 16px 16px}
.sw-left.sw-teardrop-mode .sw-panel{left:4px;border-radius:4px 16px 16px 16px}
.sw-bubble img{width:30px;height:30px;object-fit:contain}
.sw-bubble svg{width:24px;height:24px}
.sw-bubble .sw-bubble-close-icon{display:none}
.sw-open .sw-bubble .sw-bubble-open-icon{display:none}
.sw-open .sw-bubble .sw-bubble-close-icon{display:block}
.sw-badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;background:#ef4444;border:2px solid #fff;border-radius:50%}
.sw-left .sw-badge{right:auto;left:-2px}

/* Panel */
.sw-panel{position:absolute;bottom:72px;width:380px;max-height:540px;background:#111827;border:1px solid #1e293b;border-radius:16px;box-shadow:0 12px 60px rgba(0,0,0,.6);display:none;flex-direction:column;overflow:hidden;animation:swSlideUp .2s ease}
.sw-left .sw-panel{left:0;right:auto;transform-origin:bottom left}
.sw-right .sw-panel{right:0;left:auto;transform-origin:bottom right}
.sw-open .sw-panel{display:flex}
@keyframes swSlideUp{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.sw-header{background:var(--sw-color);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
.sw-header-logo{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.sw-header-logo img{width:100%;height:100%;object-fit:cover}
.sw-header-info{flex:1;min-width:0}
.sw-header-title{font-weight:700;font-size:13px}
.sw-header-status{font-size:10px;opacity:.85}
.sw-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:#0f172a}
.sw-body::-webkit-scrollbar{width:4px}
.sw-body::-webkit-scrollbar-thumb{background:#334155;border-radius:2px}

/* Messages */
.sw-msg-group{display:flex;flex-direction:column;gap:2px}
.sw-msg{max-width:80%;padding:8px 12px;font-size:13px;line-height:1.5;word-break:break-word;position:relative}
.sw-msg-user{align-self:flex-end;background:var(--sw-color);color:#fff;border-radius:14px 14px 4px 14px}
.sw-msg-staff{align-self:flex-start;background:#1e293b;color:#e2e8f0;border-radius:14px 14px 14px 4px}
.sw-msg-system{align-self:center;background:rgba(99,102,241,.12);color:#a5b4fc;border-radius:10px;font-size:11px;text-align:center;max-width:90%;padding:6px 12px}
.sw-msg-time{font-size:9px;opacity:.5;margin-top:4px;text-align:right}
.sw-msg-staff .sw-msg-time{text-align:left}
.sw-msg-name{font-size:10px;font-weight:600;margin-bottom:2px;opacity:.8}

/* Input */
.sw-input-area{padding:10px 14px;border-top:1px solid #1e293b;display:flex;gap:8px;background:#111827}
.sw-input{flex:1;background:#0f172a;border:1px solid #334155;border-radius:20px;padding:10px 16px;color:#e2e8f0;font-size:13px;outline:none;font-family:inherit;resize:none;min-height:40px;max-height:80px;transition:border-color .15s}
.sw-input:focus{border-color:var(--sw-color)}
.sw-send{background:var(--sw-color);color:#fff;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.sw-send:hover{filter:brightness(1.1)}
.sw-send:disabled{opacity:.4;cursor:not-allowed}
.sw-send svg{width:18px;height:18px}

/* Home */
.sw-home-btn{display:block;width:100%;background:#1e293b;border:none;color:#e2e8f0;padding:10px 14px;border-radius:10px;text-align:left;cursor:pointer;font-size:13px;font-family:inherit;margin-bottom:4px;transition:background .15s}
.sw-home-btn:hover{background:#263348}
.sw-channels{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.sw-channel-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;font-size:12px;font-weight:600;text-decoration:none;transition:all .15s}
.sw-channel-wsp{background:#075e54;color:#d1fae5}
.sw-channel-tg{background:#1e3a5f;color:#bfdbfe}

/* Back button */
.sw-back{background:none;border:none;color:#64748b;cursor:pointer;font-size:12px;padding:0;margin-bottom:2px;text-align:left}
.sw-back:hover{color:#94a3b8}

/* Form */
.sw-form{display:flex;flex-direction:column;gap:8px}
.sw-form input,.sw-form select,.sw-form textarea{background:#0f172a;border:1px solid #334155;border-radius:10px;padding:10px 14px;color:#e2e8f0;font-size:13px;outline:none;font-family:inherit}
.sw-form input:focus,.sw-form textarea:focus{border-color:var(--sw-color)}
.sw-form label{font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:.05em}

/* Tickets list */
.sw-ticket-item{background:#1e293b;border-radius:10px;padding:12px;cursor:pointer;border:1px solid transparent;transition:all .15s;margin-bottom:4px}
.sw-ticket-item:hover{border-color:#334155}
.sw-ticket-subject{font-size:13px;font-weight:600;color:#e2e8f0}
.sw-ticket-meta{font-size:11px;color:#64748b;margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sw-badge-sm{display:inline-block;padding:2px 8px;border-radius:10px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.sw-badge-open{background:rgba(239,68,68,.15);color:#f87171}
.sw-badge-progress{background:rgba(59,130,246,.15);color:#60a5fa}
.sw-badge-closed{background:rgba(71,85,105,.3);color:#9ca3af}

@media(max-width:420px){
.sw-panel{width:calc(100vw - 16px);max-height:65vh}
#supportWidget.sw-right{right:4px}#supportWidget.sw-left{left:4px}
}