/* Skeleton styles for the generic (shell) loading.tsx. Kept here
   instead of inside a tab module so /functions / /skills / etc. can
   reuse it without depending on settings styles. */

.wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-secondary);
}

.header {
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--border);
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-bright);
  margin: 0;
  line-height: 1.3;
}

.body {
  padding: 24px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1000px;
  width: 100%;
}

.skel,
.skelShort {
  border-radius: 10px;
  background: var(--bg-tertiary);
  animation: shellSkelPulse 1.2s ease-in-out infinite;
}
.skel       { width: 100%; max-width: 720px; height: 92px; }
.skelShort  { width: 60%;  max-width: 480px; height: 92px; }

@keyframes shellSkelPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
