@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-block,
.skeleton-pill,
.skeleton-circle {
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--c-border) 70%, transparent) 8%,
    color-mix(in srgb, var(--c-surface) 80%, white) 26%,
    color-mix(in srgb, var(--c-border) 70%, transparent) 44%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s linear infinite;
}

.skeleton-block {
  display: block;
  border-radius: 8px;
  min-height: .75rem;
}

.skeleton-pill {
  display: inline-block;
  height: 2rem;
  border-radius: 999px;
}

.skeleton-circle {
  border-radius: 999px;
}

.analytics-skeleton-tabs {
  display: inline-flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.analytics-skeleton-stat {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.analytics-skeleton-pie {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 1.15rem;
  align-items: center;
}

.analytics-skeleton-pie-legend {
  display: grid;
  gap: .45rem;
}

.analytics-skeleton-pie-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 92px;
  gap: .45rem;
  align-items: center;
}

.analytics-skeleton-retention {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: .85rem;
  align-items: end;
}

.analytics-skeleton-retention-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
}

.analytics-skeleton-table {
  display: grid;
  gap: .7rem;
}

.analytics-skeleton-table-row {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr .8fr .7fr .9fr;
  gap: .65rem;
}

.dashboard-skeleton-stack {
  display: grid;
  gap: .75rem;
}

.dashboard-skeleton-fields {
  display: grid;
  gap: .75rem;
}

.dashboard-skeleton-field {
  display: grid;
  gap: .35rem;
}

.dashboard-skeleton-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.dashboard-skeleton-summary-main {
  min-width: 220px;
  display: grid;
  gap: .4rem;
}

.dashboard-skeleton-summary-side {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.dashboard-skeleton-statbox {
  display: grid;
  gap: .35rem;
  min-width: 92px;
}

.dashboard-skeleton-message-list {
  display: grid;
}

.dashboard-skeleton-message-item {
  padding: 1rem;
  border-bottom: 1px solid var(--c-border);
}

.dashboard-skeleton-message-head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.dashboard-skeleton-message-meta {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: .35rem;
}

.dashboard-skeleton-message-top {
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  align-items: center;
}

.dashboard-skeleton-detail {
  display: grid;
  gap: 1rem;
}

.dashboard-skeleton-bubbles {
  display: grid;
  gap: .75rem;
}

.dashboard-skeleton-inline {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}

.dashboard-skeleton-input {
  color: transparent !important;
  caret-color: transparent;
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--c-border) 70%, transparent) 8%,
    color-mix(in srgb, var(--c-surface) 80%, white) 26%,
    color-mix(in srgb, var(--c-border) 70%, transparent) 44%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s linear infinite;
}

.dashboard-skeleton-input::placeholder {
  color: transparent;
}

.dashboard-skeleton-button {
  border-color: transparent;
  color: transparent !important;
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--c-border) 70%, transparent) 8%,
    color-mix(in srgb, var(--c-surface) 80%, white) 26%,
    color-mix(in srgb, var(--c-border) 70%, transparent) 44%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s linear infinite;
}

.dashboard-skeleton-text {
  color: transparent !important;
}

.dashboard-skeleton-media {
  min-height: 168px;
  border-radius: var(--radius);
}

.dashboard-skeleton-swatch {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.dashboard-skeleton-card {
  display: grid;
  gap: 1rem;
}

.dashboard-skeleton-section {
  display: grid;
  gap: 1rem;
}

.dashboard-skeleton-form {
  display: grid;
  gap: 1rem;
}

.integrations-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.integrations-skeleton-card {
  display: grid;
  gap: .9rem;
}

.integrations-skeleton-actions {
  display: grid;
  gap: .6rem;
  max-width: 220px;
}

@media (max-width: 640px) {
  .analytics-skeleton-pie {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .analytics-skeleton-pie-legend {
    width: 100%;
  }

  .analytics-skeleton-table-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-skeleton-summary-side {
    margin-left: 0;
  }
}