/* QQ markup exists only in the zh build, so these bytes should not ride in the
   shared stylesheet for en, ja, and es. */

.ui-icon[data-icon="qq"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath id='qq-penguin' fill-rule='evenodd' d='M12 2.2c-3.2 0-5.4 2.8-5.4 6.7 0 .9.1 1.8.4 2.6-1.6 1.5-2.6 3.8-2.6 6 0 1.2.8 1.9 1.9 1.5l2.1-.8c1 .8 2.2 1.3 3.6 1.3s2.6-.5 3.6-1.3l2.1.8c1.1.4 1.9-.3 1.9-1.5 0-2.2-1-4.5-2.6-6 .3-.8.4-1.7.4-2.6 0-3.9-2.2-6.7-5.4-6.7ZM9.7 7.8a.8.8 0 1 0 0-1.6.8.8 0 0 0 0 1.6Zm4.6 0a.8.8 0 1 0 0-1.6.8.8 0 0 0 0 1.6ZM12 10.7c-2.2 0-3.8 2-3.8 4.4 0 2.1 1.6 3.3 3.8 3.3s3.8-1.2 3.8-3.3c0-2.4-1.6-4.4-3.8-4.4Z'/%3E%3Cpath d='M8.5 18.6c-1.1.4-2 1.3-2.4 2.3-.2.5.2 1 .7 1h3.8l.4-2.7-2.5-.6Zm7 0c1.1.4 2 1.3 2.4 2.3.2.5-.2 1-.7 1h-3.8l-.4-2.7 2.5-.6Z'/%3E%3C/svg%3E");
}

.alerts-channel[href*="qm.qq.com"],
.dock-qq {
  color: #12b7f5;
}

.dock-qq:hover {
  background: rgba(18, 183, 245, 0.1);
  text-shadow: 0 0 14px rgba(18, 183, 245, 0.45);
}

/* The card sits outside the clipped dock capsule and appears only for pointer
   users who can scan it from another device. */
.dock-qq-card {
  position: fixed;
  right: 68px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.dock-qq-card svg {
  display: block;
  border-radius: 4px;
}

.dock-qq-scan,
.dock-qq-code {
  margin: 0;
  color: #111;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}

.dock-qq-code {
  color: #555;
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
  .dock-shell:has(.dock-qq:hover) .dock-qq-card {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

.dock-shell:has(.dock-qq:focus-visible) .dock-qq-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .dock-qq-card {
    transition: none;
  }
}