/* The file card while its file is being made, and when making it failed (COMMAND-602, public/media). Loaded by
   index.html after app.css, so it uses the app's colours; the card's ready look (.file-media-*) stays in app.css.
   No library: a border spinner and a soft pulse, both still for a phone that asks for less motion. */

/* Being made: a grey skeleton the size of the kind it will be, a spinner in it, "Generating…" beside or under it. */
.file-card-generating { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.file-card-generating.file-media-photo,
.file-card-generating.file-media-video { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; border: 0; background: none; }
.file-card-skeleton { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: var(--line); animation: file-card-pulse 1.6s ease-in-out infinite; }
/* A sound: the size of its play button. A file: the size of its file icon. */
.file-card-skeleton-audio { width: 36px; height: 36px; border-radius: 999px; }
.file-card-skeleton-file { width: 36px; height: 36px; }
/* A photo or a video: a tile the size of a message's small picture, or the width of the text (a Docs page). */
.file-card-skeleton-photo.file-card-skeleton-thumb,
.file-card-skeleton-video.file-card-skeleton-thumb { width: 220px; max-width: 100%; height: 160px; }
.file-card-skeleton-photo.file-card-skeleton-full,
.file-card-skeleton-video.file-card-skeleton-full { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.file-card-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); border-right-color: transparent; animation: file-card-spin 0.9s linear infinite; }
.file-card-skeleton-photo .file-card-spinner,
.file-card-skeleton-video .file-card-spinner { width: 28px; height: 28px; border-width: 3px; }
.file-card-state { display: block; }
@keyframes file-card-spin { to { transform: rotate(360deg); } }
@keyframes file-card-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) {
  .file-card-skeleton { animation: none; }
  .file-card-spinner { animation-duration: 2.4s; }
}

/* Making it failed: a warning-style row, "Failed: <reason>" in one line. */
.file-card-failed { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--warn); border-radius: 10px; background: var(--warn-soft); color: var(--warn); }
.file-card-failed-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--warn); color: var(--surface); font-weight: 700; line-height: 1; }
.file-card-failed .md-media-text strong { color: var(--text); }