/* ========== ZingServer Chat – styles (panel mode) ========== */

/* Toggle pill: Liên hệ / Đóng */
.zh-toggle{
  position:fixed; left:18px; bottom:24px; z-index:1000000;
  display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:999px; padding:8px 14px 8px 10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  border:2px solid rgba(15,139,141,.35);
  font:700 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.zh-toggle .tg-ico{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:#2f2f2f;
}
.zh-toggle .tg-ico svg{width:20px;height:20px;fill:#fff}
.zh-toggle .tg-text{white-space:nowrap}
.zh-toggle .tg-badge{
  position:absolute; right:-4px; top:-4px; width:14px; height:14px;
  background:#ff2e2e; border-radius:50%; box-shadow:0 0 0 3px #fff;
}

/* Panel khối nền chứa danh sách button */
.zh-panel{
  position:fixed; left:18px; bottom:86px; z-index:999999;
  background:#f7fbff;               /* nền nhạt */
  border:1px solid #d6e6f3;         /* viền nhạt */
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  padding:10px;
  transform-origin:left bottom;
  animation: zhSlideUp .18s ease;
}
@keyframes zhSlideUp{from{transform:translateY(8px);opacity:.75}to{transform:translateY(0);opacity:1}}

.zh-stack{
  display:flex; flex-direction:column; gap:12px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Mỗi item (icon + label) */
.zh-item{ width:max-content; }
.zh-btn{ display:flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer; }

/* Icon tròn */
.zh-ico{
  background:#f7fbff !important;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 12px rgba(0,0,0,.12); /* nhẹ hơn một chút cho nổi */
}
.zh-ico img{width:39px;height:39px;object-fit:contain;display:block}

/* Label tự co theo chữ */
.zh-label{
  display:inline-block; padding:10px 14px; border-radius:8px;
  color:#fff; font-weight:700; font-size:14px; white-space:nowrap;
  box-shadow:0 3px 8px rgba(0,0,0,.15);
  transform: translateZ(0);
  transition: box-shadow .15s ease, filter .15s ease, transform .15s ease;
}

/* Hover/focus: icon phóng nhẹ + label nổi */
.zh-btn:focus .zh-ico,
.zh-btn:hover .zh-ico{ transform: scale(1.06); box-shadow:0 6px 14px rgba(0,0,0,.22); filter:brightness(1.02); }
.zh-btn:focus .zh-label,
.zh-btn:hover .zh-label{ box-shadow:0 6px 14px rgba(0,0,0,.22); filter:brightness(1.02); transform: translateX(1px); }

/* Ẩn/hiện theo state */
#zh-chat-launcher[data-open="0"] .zh-panel{ display:none; }

/* safe-area + bố cục mobile */
@media (max-width:1024px){
  .zh-toggle{ left:max(12px, env(safe-area-inset-left)); bottom:max(16px, env(safe-area-inset-bottom)); }
  .zh-panel{ left:max(12px, env(safe-area-inset-left)); bottom:calc(max(16px, env(safe-area-inset-bottom)) + 62px); }
}

@media (max-width:480px){
  .zh-panel{ padding:8px; }
}