/* 张夏鸣叫层：沿用原站变量，尽量不抢画面 */
.zx {
  position: fixed;
  z-index: 6;
  left: max(var(--edge), env(safe-area-inset-left));
  bottom: max(var(--edge), env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border: 0;
  border-radius: 8px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--rim), 0 6px 20px #06120433;
  color: var(--ink);
  font: 500 11px/1 var(--ui);
  letter-spacing: .01em;
  opacity: 0;
  transition: opacity .6s;
}
.zx.ready { opacity: .82; }
.zx:hover, .zx:focus-within { opacity: 1; }
.zx.paused { opacity: .45; }

.zx button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(243, 245, 238, .12);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.zx button:hover { background: rgba(243, 245, 238, .24); }
.zx button[aria-pressed="false"] { color: #9caf96; }
.zx button svg { width: 14px; height: 14px; }
.zx .zx-text { white-space: nowrap; user-select: none; }
.zx .zx-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(195, 242, 110, .55);
}
.zx .zx-dot.ping { animation: zx-ping .7s ease-out; }
@keyframes zx-ping {
  0% { box-shadow: 0 0 0 0 rgba(195, 242, 110, .6); }
  100% { box-shadow: 0 0 0 9px rgba(195, 242, 110, 0); }
}

/* 从喙边冒出来的气泡 */
.zx-bubble {
  position: fixed;
  z-index: 6;
  left: 0;
  top: 0;
  pointer-events: none;
  padding: 7px 13px 8px;
  border-radius: 9px;
  background: rgba(243, 245, 238, .94);
  color: #1d3320;
  font: 600 15px/1.15 var(--ui);
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(6, 24, 6, .28), inset 0 1px 0 rgba(255, 255, 255, .7);
  opacity: 0;
  transform: translate(-50%, -100%) translateY(8px) scale(.72);
  transition: opacity .22s ease, transform .3s cubic-bezier(.2, 1.5, .4, 1);
}
.zx-bubble.show { opacity: 1; transform: translate(-50%, -100%) translateY(-6px) scale(1); }
.zx-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: rgba(243, 245, 238, .94);
  border-radius: 0 0 3px 0;
  transform: rotate(45deg);
}
.zx-bubble .zx-wave {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border: 1.5px solid rgba(243, 245, 238, .8);
  border-radius: 50%;
  opacity: 0;
}
.zx-bubble.show .zx-wave { animation: zx-wave .9s ease-out forwards; }
.zx-bubble.show .zx-wave.two { animation-delay: .18s; }
@keyframes zx-wave {
  0% { opacity: .75; transform: scale(.35); }
  100% { opacity: 0; transform: scale(1.9); }
}

@media (max-width: 640px) {
  .zx { bottom: max(14px, env(safe-area-inset-bottom)); left: max(14px, env(safe-area-inset-left)); }
  .zx-bubble { font-size: 13px; }
}