/*
  Wortic macOS UI Kit — Status
  wm-status — dot + label. Cobre Status Dot, Connection/Sync/
  Online/Offline Status, Activity Indicator.
  Liquid Glass: dots com luz interna e glow sutil da própria cor.
*/

@layer components {
  .wm-status {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-3);
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-secondary);
  }

  .wm-status__dot {
    --_dot-color: var(--wm-label-quaternary);
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(
      circle at 35% 28%,
      color-mix(in srgb, var(--_dot-color) 72%, #ffffff) 0%,
      var(--_dot-color) 65%
    );
    box-shadow: inset 0 0.5px 0.5px rgba(255, 255, 255, 0.35),
      0 0 5px color-mix(in srgb, var(--_dot-color) 35%, transparent);
    transition: background var(--wm-duration-normal) var(--wm-ease-standard),
      box-shadow var(--wm-duration-normal) var(--wm-ease-standard);
  }

  .wm-status--online .wm-status__dot { --_dot-color: var(--wm-success); }
  .wm-status--away .wm-status__dot { --_dot-color: var(--wm-warning); }
  .wm-status--error .wm-status__dot { --_dot-color: var(--wm-error); }
  .wm-status--offline .wm-status__dot {
    --_dot-color: var(--wm-label-quaternary);
    box-shadow: none;
  }

  .wm-status--syncing .wm-status__dot {
    --_dot-color: var(--wm-accent);
    animation: wm-status-pulse 1.4s ease-in-out infinite;
  }

  @keyframes wm-status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.78); }
  }

  .wm-status__dot--ring {
    box-shadow: 0 0 0 3px var(--wm-fill-secondary),
      0 0 5px color-mix(in srgb, var(--_dot-color) 30%, transparent);
  }

  /* Activity indicator — pontinhos de "digitando" */
  .wm-activity {
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }
  .wm-activity span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--wm-label-tertiary);
    animation: wm-activity-bounce 1.1s var(--wm-ease-emphasized) infinite;
  }
  .wm-activity span:nth-child(2) { animation-delay: 0.15s; }
  .wm-activity span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes wm-activity-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-3px); opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-status--syncing .wm-status__dot,
    .wm-activity span {
      animation: none;
    }
    .wm-status__dot {
      transition: none;
    }
  }
}