/* ==================================================================
   Kilo Webhook — Skeleton Loading States
   ================================================================== */

.skel-panel { padding: 12px; }

.skel-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; margin-bottom: 2px;
}

.skel-avatar {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--surface3); flex-shrink: 0;
}

.skel-lines {
  flex: 1; display: flex; flex-direction: column; gap: 5px;
}

.skel-line {
  height: 10px; border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--surface3) 25%,
    var(--surface4) 50%,
    var(--surface3) 75%
  );
  background-size: 200% 100%;
  animation: skeletonWave 1.5s ease-in-out infinite;
}

.skel-line.short { width: 50%; }
.skel-line.medium { width: 75%; }
.skel-line.wide { width: 90%; }

/* Explorer tree skeleton */
.skel-tree-row {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 8px; height: 22px;
}
.skel-tree-icon {
  width: 16px; height: 16px; border-radius: 3px;
  background: var(--surface3); flex-shrink: 0;
}
.skel-tree-line {
  height: 8px; border-radius: 3px; flex: 1; max-width: 140px;
  background: linear-gradient(
    90deg,
    var(--surface3) 25%,
    var(--surface4) 50%,
    var(--surface3) 75%
  );
  background-size: 200% 100%;
  animation: skeletonWave 1.5s ease-in-out infinite;
}

/* LLM table skeleton */
.skel-table-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.skel-table-row .skel-line {
  height: 8px; border-radius: 3px;
}
.skel-table-row .skel-line:nth-child(1) { width: 22px; }
.skel-table-row .skel-line:nth-child(2) { width: 120px; }
.skel-table-row .skel-line:nth-child(3) { width: 90px; }
.skel-table-row .skel-line:nth-child(4) { width: 60px; }
.skel-table-row .skel-line:nth-child(5) { width: 80px; }

/* Scheduler table skeleton */
.skel-sch-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}

/* API tester skeleton */
.skel-api-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px; margin-bottom: 2px;
}