/* ============ YeShe Online Live Chat Widget ============ */
#ysLiveChatRoot,
#ysLiveChatRoot * { box-sizing: border-box; }

#ysLiveChatRoot { font-family: inherit; }
#ysLiveChatRoot .ysl-reset { margin:0; padding:0; border:0; }

/* ------- Launcher (right / center) ------- */
.ysl-launcher {
    position: fixed;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    z-index: 9990;
    width: 62px;
    height: 62px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.ysl-launcher--left { right: auto; left: 22px; }

/* halo ring behind the icon */
.ysl-launcher__halo {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--ysl-primary, #2b2f36);
    opacity: .35;
    animation: yslHalo 3s ease-in-out infinite;
}
.ysl-launcher__bubble {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: radial-gradient(120% 120% at 30% 25%, #6a6f78 0%, var(--ysl-primary, #2b2f36) 46%, #17181c 100%);
    box-shadow: 0 0 20px rgba(43,47,54,.55), 0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .22s ease, box-shadow .22s ease;
}
.ysl-launcher__bubble::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.28);
}
.ysl-launcher:hover .ysl-launcher__bubble { transform: translateY(-3px) scale(1.06); box-shadow: 0 0 30px rgba(43,47,54,.75), 0 14px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.4); }
.ysl-launcher:active .ysl-launcher__bubble { transform: scale(.96); }
.ysl-launcher__bubble svg { width: 30px; height: 30px; position: relative; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.ysl-launcher__bubble img { width: 32px; height: 32px; position: relative; z-index: 1; border-radius: 8px; object-fit: contain; }

.ysl-launcher__notify {
    position: absolute;
    top: -4px; right: -2px;
    z-index: 2;
    min-width: 20px; height: 20px;
    padding: 0 5px;
    border-radius: 20px;
    background: #e0243e;
    color: #fff;
    font-size: 11px; font-weight: 700;
    display: none;
    align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(224,36,62,.4);
}
.ysl-launcher__notify.show { display: inline-flex; }

@keyframes yslHalo {
    0%,100% { transform: scale(.96); opacity: .35; }
    50% { transform: scale(1.08); opacity: .55; }
}

/* ------- Panel ------- */
.ysl-panel {
    position: fixed;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    z-index: 9991;
    width: 370px;
    max-width: calc(100vw - 28px);
    height: 600px;
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(20,30,60,.06);
    box-shadow: 0 18px 50px rgba(20,30,60,.16), 0 6px 18px rgba(20,30,60,.10), 0 0 0 1px rgba(255,255,255,.4) inset;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: yslSlideIn .28s cubic-bezier(.2,.8,.3,1);
}
.ysl-panel--left { right: auto; left: 22px; }
@keyframes yslSlideIn { from { opacity:0; transform: translateY(-46%) scale(.96); } to { opacity:1; transform: translateY(-50%) scale(1); } }

/* header */
.ysl-head {
    padding: 15px 16px 11px;
    color: #fff;
    background: var(--ysl-header, #1e1f2e);
}
.ysl-head__top { display:flex; align-items:center; gap:10px; }
.ysl-head__title { flex:1; font-size:15px; font-weight:700; letter-spacing:.2px; }
.ysl-head__title svg { width:16px; height:16px; vertical-align:-3px; margin-right:6px; }
.ysl-head__close {
    width:28px; height:28px;
    border:none; background:transparent; color:inherit;
    border-radius:50%;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s;
}
.ysl-head__close:hover { background: rgba(255,255,255,.15); }
.ysl-head__close svg { width:18px; height:18px; }
.ysl-head__status {
    margin-top:9px;
    font-size:11.5px;
    line-height:1.55;
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.10);
    border-radius: 9px;
    padding: 7px 9px;
    word-break: break-word;
}
.ysl-head__status b { font-weight:600; }

/* body */
.ysl-body { flex:1; overflow-y:auto; background:var(--ysl-body, #f5f6f8); padding:14px 14px 8px; display:flex; flex-direction:column; gap:10px; }
.ysl-msg { display:flex; gap:8px; max-width:82%; animation: yslMsgIn .24s ease; }
@keyframes yslMsgIn { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.ysl-msg--agent { align-self:flex-start; }
.ysl-msg--visitor { align-self:flex-end; flex-direction:row-reverse; }
.ysl-msg__avatar {
    flex:0 0 32px; width:32px; height:32px; border-radius:50%;
    background:#e6ecf4; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.ysl-msg__avatar img { width:100%; height:100%; object-fit:cover; }
.ysl-msg__avatar svg { width:18px; height:18px; color:#97a3b4; }
.ysl-msg__bubble {
    padding:10px 13px;
    border-radius:14px;
    font-size:13.5px; line-height:1.55;
    word-break:break-word;
}
.ysl-msg--agent .ysl-msg__bubble { background:#fff; color:#2a3140; border-top-left-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.ysl-msg--visitor .ysl-msg__bubble { background:var(--ysl-primary, #2b2f36); color:#fff; border-top-right-radius:4px; }
.ysl-msg__time { font-size:10px; color:#b3bac6; margin-top:4px; padding:0 2px; }
.ysl-msg--visitor .ysl-msg__time { text-align:right; }

/* typing indicator */
.ysl-typing { align-self:flex-start; display:flex; gap:5px; padding:12px 15px; background:#fff; border-radius:16px; border-top-left-radius:4px; }
.ysl-typing span { width:7px; height:7px; border-radius:50%; background:#c3cbd9; animation: yslTyp 1.2s infinite; }
.ysl-typing span:nth-child(2){ animation-delay:.18s; }
.ysl-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes yslTyp { 0%,100%{opacity:.3; transform:translateY(0);} 50%{opacity:1; transform:translateY(-3px);} }

/* identity chip */
.ysl-identity {
    display:flex; align-items:center; gap:9px;
    padding:9px 16px;
    font-size:12.5px; color:#6a7282;
    border-top:1px solid #eef1f6;
    background:#fff;
}
.ysl-identity__avatar {
    flex:0 0 28px; width:28px; height:28px; border-radius:50%; overflow:hidden;
    background:linear-gradient(135deg,#eef1f6,#dfe5ee);
    display:flex; align-items:center; justify-content:center;
}
.ysl-identity__avatar img{ width:100%; height:100%; object-fit:cover; }
.ysl-identity__avatar svg{ width:16px; height:16px; color:#98a3b5; }
.ysl-identity__name { font-weight:600; color:#2a3140; }
.ysl-identity__txt { color:#98a3b5; }

/* composer */
.ysl-composer {
    display:flex; gap:9px; align-items:flex-end;
    padding:10px 12px;
    background:#fff;
    border-top:1px solid #eef1f6;
}
.ysl-composer textarea {
    flex:1; resize:none;
    border:1px solid #e3e8ef; border-radius:12px;
    padding:10px 12px;
    font-size:13.5px; line-height:1.45; color:#2a3140;
    background:#fafbfd;
    outline:none;
    font-family:inherit;
    max-height:96px;
    transition:border-color .2s, box-shadow .2s;
}
.ysl-composer textarea:focus { border-color:var(--ysl-primary, #2b2f36); box-shadow:0 0 0 3px rgba(43,47,54,.12); background:#fff; }
.ysl-composer button.ysl-send {
    flex:0 0 auto; width:44px; height:44px;
    border:none; border-radius:13px;
    background:var(--ysl-primary, #2b2f36); color:#fff;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:transform .15s ease, filter .15s ease;
}
.ysl-composer button.ysl-send:hover { transform:translateY(-2px); filter:brightness(1.06); }
.ysl-composer button.ysl-send svg { width:20px; height:20px; }

/* mobile */
@media (max-width: 520px) {
    .ysl-launcher { right:12px; }
    .ysl-launcher--left { right:auto; left:12px; }
    .ysl-panel {
        right:10px;
        width:calc(100vw - 20px);
        height:min(560px, calc(100vh - 30px));
    }
    .ysl-panel--left { right:auto; left:10px; }
}