/* Shared collection states, loading placeholders and action feedback. */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-12) var(--space-6); text-align: center; min-width: 0; }
.empty-state .empty-icon { display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; margin: 0; border-radius: 50%; color: var(--color-primary-600); background: var(--color-mint-100); }
.empty-state .empty-icon .ui-icon { width: 24px; height: 24px; }
.empty-state h2 { margin: 0; font-size: var(--text-lg); line-height: 1.4; overflow-wrap: anywhere; }
.empty-state p { width: 100%; max-width: 420px; margin: 0; font-size: var(--text-base); line-height: 1.6; color: var(--color-text-muted); }
.empty-state .btn { max-width: 100%; white-space: normal; }
.conference-stage .empty-state { margin: auto; background: transparent; border: 0; color: var(--color-on-dark); }
.conference-stage .empty-state p { color: var(--color-on-dark); }
.skeleton-list { display: grid; gap: var(--space-4); }
.skeleton-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.skeleton-row .skeleton-icon { flex-shrink: 0; }
.skeleton-copy { flex: 1; min-width: 0; width: 100%; display: grid; gap: var(--space-3); }
.skeleton-row .skeleton-title { max-width: 240px; }
.fault-state { min-height: 65vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-12) var(--space-4); text-align: center; }
.fault-illustration { width: min(100%, 320px); height: auto; }
.fault-state .eyebrow, .fault-state h1, .fault-state p { margin: 0; }
.fault-state h1 { max-width: 700px; font-size: var(--text-2xl); line-height: 1.2; }
.fault-state > p:not(.eyebrow) { max-width: 420px; color: var(--color-text-muted); font-size: var(--text-base); }
.toast-region { position: fixed; z-index: 1200; right: var(--space-6); bottom: max(var(--space-6), env(safe-area-inset-bottom)); display: grid; gap: var(--space-3); width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 96px); overflow-y: auto; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary-600); border-radius: var(--radius-md); box-shadow: var(--shadow-md); animation: toast-enter 200ms ease-out; }
.toast > .ui-icon { flex-shrink: 0; color: var(--color-primary-600); margin-top: var(--space-1); }
.toast > div { min-width: 0; flex: 1; }
.toast strong { font-size: var(--text-base); }
.toast p { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.toast-error { border-left-color: var(--color-danger); }
.toast-error > .ui-icon { color: var(--color-danger); }
.toast .toast-dismiss { padding: 0; flex: 0 0 44px; min-width: 44px; min-height: 44px; }
@keyframes toast-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px) { .toast-region { right: var(--space-4); bottom: max(var(--space-4), env(safe-area-inset-bottom)); } .empty-state { padding: var(--space-8) var(--space-4); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .skeleton::after { animation: none; } }