/* skeleton.js: grey bones in the shape of what is coming, in the reading
 * column's measure. They fade in only after a short wait (a fast answer
 * never flashes them), then breathe on the stepped pulse (motion.css). */

.sv-skel { display: grid; gap: var(--sv-space-3); width: 100%; }
.sv-bone {
  display: block;
  height: 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sv-ink) 7%, transparent);
  animation: sv-fade-in var(--sv-dur-enter) var(--sv-ease-out) 100ms backwards, sv-breathe var(--pulse) var(--sv-ease-inout) 300ms infinite;
}
/* chat: a prompt on the right, an answer's lines on the left. */
.sv-skel-chat { gap: var(--sv-space-5); }
.sv-skel-ask { display: flex; justify-content: flex-end; }
.sv-skel-ask .sv-bone { height: 2.25rem; border-radius: calc(var(--sv-radius) * 2); }
.sv-skel-answer { display: grid; gap: var(--sv-space-2); }
/* rows: a list's rows, a dot, a title and a time. */
.sv-skel-rows { gap: 0; }
.sv-skel-row { display: flex; align-items: center; gap: var(--sv-space-3); min-height: 44px; padding: 0 var(--sv-space-2); }
.sv-skel-row .sv-bone:nth-child(2) { flex: none; }
.sv-skel-row .sv-bone:last-child { margin-left: auto; }
.sv-bone-dot { width: 8px; height: 8px; flex: none; }
/* lines: a few lines of a card or a sheet. */
.sv-skel-lines { gap: var(--sv-space-2); padding: var(--sv-space-2) 0; }