#zl-widget-root, #zl-widget-root * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

#zl-launcher {
  position: fixed; bottom: 24px; width: 58px; height: 58px; border-radius: 50%;
  border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(20,22,35,.28);
  display:flex; align-items:center; justify-content:center; z-index: 999999; transition: transform .2s ease;
}
#zl-launcher.zl-pos-right { right: 24px; }
#zl-launcher.zl-pos-left { left: 24px; }
#zl-launcher:hover { transform: scale(1.06); }
#zl-launcher svg { width: 24px; height: 24px; position:absolute; transition: opacity .15s ease, transform .15s ease; }
#zl-icon-close { opacity: 0; transform: rotate(-45deg); }
#zl-widget-root.zl-open #zl-icon-chat { opacity: 0; transform: rotate(45deg); }
#zl-widget-root.zl-open #zl-icon-close { opacity: 1; transform: rotate(0deg); }
#zl-badge {
  position:absolute; top:-3px; right:-3px; background:#FF4D5E; color:#fff; font-size:11px; font-weight:700;
  width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
#zl-widget-root.zl-open #zl-badge, #zl-badge.zl-hidden { display:none; }

#zl-panel {
  position: fixed; bottom: 96px; width: 360px; height: 520px; background:#fff;
  border-radius: 16px; box-shadow: 0 20px 60px rgba(20,22,35,.22); display:flex; flex-direction:column;
  overflow:hidden; z-index: 999998; opacity:0; transform: translateY(16px) scale(.98); pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
#zl-panel.zl-pos-right { right: 24px; }
#zl-panel.zl-pos-left { left: 24px; }
#zl-widget-root.zl-open #zl-panel { opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }

#zl-header { padding:16px 18px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
#zl-header-info { display:flex; align-items:center; gap:10px; }
#zl-avatar { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.22); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
#zl-agent-name { color:#fff; font-weight:600; font-size:13.5px; }
#zl-agent-status { color:rgba(255,255,255,.85); font-size:11px; display:flex; align-items:center; gap:5px; margin-top:2px; }
.zl-dot { width:6px; height:6px; border-radius:50%; background:#17C3A6; display:inline-block; }
#zl-minimize { background:rgba(255,255,255,.15); border:none; color:#fff; width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:16px; line-height:1; }

#zl-thread { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:#F9FAFC; }
.zl-msg { max-width:78%; padding:9px 12px; border-radius:14px; font-size:13px; line-height:1.45; }
.zl-msg.agent { background:#fff; border:1px solid #E7E9EF; border-radius:14px 14px 14px 3px; align-self:flex-start; color:#1A1D27; }
.zl-msg.visitor { color:#fff; border-radius:14px 14px 3px 14px; align-self:flex-end; }
.zl-msg .zl-time { font-size:9.5px; opacity:.6; margin-top:3px; }

.zl-typing { display:flex; gap:3px; align-self:flex-start; background:#fff; border:1px solid #E7E9EF; padding:10px 13px; border-radius:14px 14px 14px 3px; }
.zl-typing span { width:5px; height:5px; border-radius:50%; background:#9CA0B0; animation: zlBounce 1s infinite; }
.zl-typing span:nth-child(2){ animation-delay:.15s; } .zl-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes zlBounce { 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-4px); opacity:1;} }

#zl-inputbar { display:flex; align-items:flex-end; gap:8px; padding:10px 12px; border-top:1px solid #E7E9EF; flex-shrink:0; background:#fff; }
#zl-input { flex:1; border:none; outline:none; resize:none; font-size:13px; max-height:70px; padding:6px 0; }
#zl-send { border:none; width:32px; height:32px; border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#zl-send svg { width:14px; height:14px; }
#zl-footer { text-align:center; font-size:10px; color:#9CA0B0; padding:6px 0 10px; flex-shrink:0; background:#fff; }

@media (max-width: 420px) {
  #zl-panel { width: calc(100vw - 24px); right: 12px !important; left: 12px !important; bottom: 84px; height: 70vh; }
}