/**
 * 全站客服中心面板（21st Floating Chat Widget 风格）
 * @author Telegram @okgeceo
 */

.ok-support-callout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: min(14rem, calc(100vw - var(--space-8)));
  pointer-events: auto;
}

.ok-support-callout[hidden] {
  display: none !important;
}

.ok-support-callout.is-visible {
  animation: ok-support-callout-in 0.55s var(--ease-spring) both;
}

.ok-support-callout__bubble {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
  border-radius: var(--radius-2xl);
  background: color-mix(in oklch, var(--background) 94%, transparent);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  box-shadow: var(--shadow-lg);
  animation: ok-support-callout-float 3s ease-in-out infinite;
  cursor: pointer;
}

.ok-support-callout__text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--foreground);
}

.ok-support-callout__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--muted) 50%, transparent);
  color: var(--muted-foreground);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.ok-support-callout__dismiss:hover {
  background: color-mix(in oklch, var(--muted) 72%, transparent);
  color: var(--foreground);
}

.ok-support-callout__tail {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: -0.375rem;
  margin-right: 1.125rem;
  background: color-mix(in oklch, var(--background) 94%, transparent);
  border-right: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
  transform: rotate(45deg);
}

.ok-support-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: none;
  border-radius: var(--radius-full);
  background: linear-gradient(
    145deg,
    color-mix(in oklch, var(--support-accent) 78%, white) 0%,
    var(--support-accent) 48%,
    color-mix(in oklch, var(--support-accent) 82%, black) 100%
  );
  color: var(--support-accent-foreground);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--support-accent) 36%, transparent),
    0 10px 28px color-mix(in srgb, var(--support-accent) 34%, transparent);
  cursor: pointer;
  overflow: visible;
  isolation: isolate;
  transition: transform 0.38s var(--ease-spring),
              box-shadow var(--duration-fast) var(--ease-out);
}

.ok-support-fab__ring,
.ok-support-fab__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.ok-support-fab__ring {
  inset: -4px;
  border: 1px solid color-mix(in oklch, var(--support-accent) 55%, transparent);
  opacity: 0;
  animation: ok-support-fab-ring 2.8s var(--ease-out) infinite;
}

.ok-support-fab__ring--2 {
  animation-delay: 1.4s;
}

.ok-support-fab__glow {
  inset: -10px;
  background: radial-gradient(circle, color-mix(in oklch, var(--support-accent) 34%, transparent) 0%, transparent 70%);
  animation: ok-support-fab-glow 2.8s var(--ease-out) infinite;
}

.ok-support-fab__icon {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.28s var(--ease-snappy),
              transform 0.38s var(--ease-spring);
}

.ok-support-fab__icon--open {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.ok-support-fab__icon--close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.55);
}

.ok-support-fab__status {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  z-index: 2;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--radius-full);
  background: var(--success);
  border: 2px solid color-mix(in oklch, var(--support-accent-foreground) 88%, var(--support-accent));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--support-accent) 28%, transparent);
  animation: ok-support-status-pulse 2.2s ease-in-out infinite;
}

.ok-support-fab:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--support-accent) 42%, transparent),
    0 14px 34px color-mix(in srgb, var(--support-accent) 40%, transparent);
}

.ok-support-fab.is-active {
  transform: rotate(0deg) scale(1);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--support-accent) 48%, transparent),
    0 12px 30px color-mix(in srgb, var(--support-accent) 36%, transparent);
}

.ok-support-fab.is-active .ok-support-fab__icon--open {
  opacity: 0;
  transform: rotate(90deg) scale(0.55);
}

.ok-support-fab.is-active .ok-support-fab__icon--close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.ok-support-fab.is-active .ok-support-fab__ring,
.ok-support-fab.is-active .ok-support-fab__glow,
.ok-support-fab.is-active .ok-support-fab__status {
  animation: none;
  opacity: 0;
}

@keyframes ok-support-callout-in {
  from {
    opacity: 0;
    transform: translateX(12px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes ok-support-callout-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes ok-support-fab-ring {
  0% {
    opacity: 0.75;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

@keyframes ok-support-fab-glow {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.06);
  }
}

@keyframes ok-support-status-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--support-accent) 28%, transparent);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--success) 24%, transparent);
  }
}

.ok-support-hub {
  position: fixed;
  z-index: 9600;
  width: min(20rem, calc(100vw - var(--space-8)));
  pointer-events: none;
}

.ok-support-hub.is-open {
  pointer-events: auto;
}

.ok-support-hub__panel {
  width: 100%;
  border: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
  border-radius: var(--radius-2xl);
  background: color-mix(in oklch, var(--background) 94%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--background) 55%, transparent),
    0 18px 48px color-mix(in oklch, var(--foreground) 14%, transparent);
  overflow: hidden;
  transform-origin: bottom right;
}

.ok-support-hub__panel.is-entering {
  animation: ok-support-panel-in 0.46s var(--ease-spring) both;
}

.ok-support-hub__panel[hidden] {
  display: none;
}

.ok-support-hub__panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid color-mix(in oklch, var(--border) 55%, transparent);
  background: color-mix(in oklch, var(--muted) 24%, var(--background));
}

.ok-support-hub__panel-intro {
  flex: 1;
  min-width: 0;
}

.ok-support-hub__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.ok-support-hub__desc {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--muted-foreground);
}

.ok-support-hub__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--muted) 45%, transparent);
  color: var(--muted-foreground);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.ok-support-hub__close:hover {
  background: color-mix(in oklch, var(--muted) 70%, transparent);
  color: var(--foreground);
}

.ok-support-hub__channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  max-height: min(24rem, calc(100vh - 12rem));
  overflow-y: auto;
}

.ok-support-hub__channel-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
  background: color-mix(in oklch, var(--muted) 55%, var(--background));
}

.ok-support-hub__channel-avatar.is-empty .ok-support-hub__channel-avatar-img {
  display: none;
}

.ok-support-hub__channel-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
  display: block;
}

.ok-support-hub__channel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-snappy);
}

.ok-support-hub.is-open .ok-support-hub__channel {
  animation: ok-support-channel-in 0.42s var(--ease-spring) both;
}

.ok-support-hub.is-open .ok-support-hub__channel:nth-child(1) { animation-delay: 0.04s; }
.ok-support-hub.is-open .ok-support-hub__channel:nth-child(2) { animation-delay: 0.08s; }
.ok-support-hub.is-open .ok-support-hub__channel:nth-child(3) { animation-delay: 0.12s; }
.ok-support-hub.is-open .ok-support-hub__channel:nth-child(4) { animation-delay: 0.16s; }
.ok-support-hub.is-open .ok-support-hub__channel:nth-child(n+5) { animation-delay: 0.2s; }

.ok-support-hub__channel:hover {
  background: color-mix(in oklch, var(--muted) 38%, transparent);
  transform: translateX(1px);
}

.ok-support-hub__channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  background: color-mix(in oklch, var(--muted) 55%, var(--background));
  color: var(--foreground);
}

.ok-support-hub__channel-icon--telegram {
  background: color-mix(in oklch, #229ED9 16%, var(--background));
  color: #229ED9;
}

.ok-support-hub__channel-icon--qq {
  background: color-mix(in oklch, #12B7F5 16%, var(--background));
  color: #12B7F5;
}

.ok-support-hub__channel-icon--mail {
  background: color-mix(in oklch, var(--foreground) 8%, var(--background));
}

.ok-support-hub__channel-icon--order,
.ok-support-hub__channel-icon--tutorial {
  background: color-mix(in oklch, var(--muted) 60%, var(--background));
}

.ok-support-hub__channel-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.ok-support-hub__channel-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--foreground);
}

.ok-support-hub__channel-desc {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ok-support-hub__channel-arrow {
  flex-shrink: 0;
  color: color-mix(in oklch, var(--muted-foreground) 70%, transparent);
}

.ok-support-hub__empty {
  margin: 0;
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted-foreground);
  text-align: center;
}

@keyframes ok-support-panel-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ok-support-channel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ok-support-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ok-support-callout.is-visible,
  .ok-support-callout__bubble,
  .ok-support-fab__ring,
  .ok-support-fab__glow,
  .ok-support-fab__status {
    animation: none;
  }

  .ok-support-fab:hover,
  .ok-support-fab.is-active {
    transform: none;
  }

  .ok-support-hub__panel.is-entering,
  .ok-support-hub.is-open .ok-support-hub__channel {
    animation: none;
  }

  .ok-support-hub__panel {
    animation: none;
  }

  .ok-support-hub__channel:hover {
    transform: none;
  }
}