/* Bunny Stream (SPEC 19): the status pill + owner's Retry in Admin > Videos and Studio > Content, Admin's
   alerts, and the watch page's own player messages. Pill colours come from the shared .status-pill / .pill-*
   tokens in dash.css (light and dark). */
.a-storage, .content-table .pill-storage { margin-top: 6px; }
.a-storage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pill-storage { white-space: nowrap; }
.storage-error { display: block; flex-basis: 100%; max-width: 280px; white-space: normal; overflow-wrap: anywhere; }
.storage-retry { display: inline-flex; margin: 0; }
.storage-progress { margin-top: 4px; }
td > .storage-error, td > .storage-retry { margin-top: 6px; }
.storage-retry-all { margin-top: 8px; }

/* Admin > Videos: what needs the owner's attention (videos that can't play, a paused uploader). */
.storage-alert {
  margin: 8px 0 0; padding: 10px 12px; max-width: 72ch;
  border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere;
}
.storage-alert-bad { border-left-color: var(--accent); }
.storage-alert-detail { color: var(--text-2); }

/* Watch page: the player's own messages ("can't play" with Try again, "temporarily unavailable").
   The player box is black in both themes, so these are light text on a dark scrim; the button keeps
   the site's style and focus ring. */
.player-error, .player-note {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.82);
}
.player-error-text, .player-note-title { margin: 0; max-width: 36ch; font-size: 16px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.player-note-text { margin: 0; max-width: 40ch; font-size: 14px; color: rgba(255, 255, 255, 0.78); overflow-wrap: anywhere; }
.player-error .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 400px) {
  .player-error, .player-note { gap: 8px; padding: 10px; }
  .player-error-text, .player-note-title { font-size: 14px; }
  .player-note-text { font-size: 13px; }
}