/* All loading surfaces use the same neutral paint and ownership provider. */
.ui-skeleton {
    --skeleton-fill: color-mix(in srgb, var(--ink) 9%, var(--surface));
    pointer-events: none;
    user-select: none;
}
.ui-skeleton-shape { display: block; background: var(--skeleton-fill); border-radius: 5px; }
.ui-skeleton-navigation { display: flex; flex-direction: column; gap: 10px; padding: 18px 12px; }
.ui-skeleton-heading { width: 42%; height: 14px; margin: 3px 0 8px; }
.ui-skeleton-heading:not(:first-child) { margin-top: 18px; }
.ui-skeleton-nav-row { display: flex; align-items: center; gap: 10px; height: 30px; }
.ui-skeleton-symbol { flex: 0 0 18px; height: 18px; }
.ui-skeleton-nav-row .ui-skeleton-line { height: 12px; width: 78%; }
.ui-skeleton-nav-row:nth-child(3n) .ui-skeleton-line { width: 62%; }
.ui-skeleton-messages { display: flex; flex-direction: column; gap: 18px; padding: 14px 0; }
.ui-skeleton-message { display: flex; align-items: flex-start; gap: 12px; }
.ui-skeleton-avatar { flex: 0 0 40px; height: 40px; border-radius: 50%; }
.ui-skeleton-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.ui-skeleton-author { width: 100px; max-width: 35%; height: 11px; }
.ui-skeleton-copy .ui-skeleton-line { width: min(440px, 86%); height: 13px; }
.ui-skeleton-copy .ui-skeleton-short { width: min(300px, 62%); }
.ui-skeleton-message:nth-child(2n) .ui-skeleton-line { width: min(360px, 74%); }
.ui-skeleton-message:nth-child(2n) .ui-skeleton-short { width: min(190px, 45%); }
.ui-skeleton-masonry { position: relative; width: 100%; min-height: 100%; }
.ui-skeleton-tile { position: absolute; border-radius: 10px; }
.ui-skeleton-media { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; }
.ui-skeleton-image { width: 100%; height: 100%; border-radius: inherit; }
.ui-skeleton-navigation, .ui-skeleton-messages { animation: ui-loading-pulse 1.6s ease-in-out infinite alternate; }
@keyframes ui-loading-pulse { to { opacity: .62; } }
@media (prefers-reduced-motion: reduce) { .ui-skeleton { animation: none !important; } }

.conversation-loading { margin-top: auto; }
.conversation-loading:not([hidden]) + .feed-rows { margin-top: 0; }

/* Every real tile keeps its reserved loading paint while its own image arrives.
   Whole masonry surfaces never fade away as a separate loading screen. */
.ui-media-pending { --skeleton-fill: color-mix(in srgb, var(--ink) 9%, var(--surface)); background: var(--skeleton-fill); }
.ui-media-pending > .asset-image { opacity: 0; transition: opacity 120ms ease-out; }
.ui-media-pending.image-ready { background: transparent; }
.ui-media-pending.image-ready > .asset-image { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ui-media-pending > .asset-image { transition: none; } }

/* Recommendations use the detail aperture and the selected image's reserved columns. */
.discover-recommendation-skeleton { position: absolute; top: 0; left: 0; width: 100%; min-height: 0; }