/* Letzte Cleaning Prüfung: 27.09.2026
   Letztes Cleaning: 27.09.2026

   Mitteilungen unten rechts (AL-20260927-39), z. B. "Dein Video ist fertig".
   Über dem runden Hilfe-Knopf unten rechts; auf dem Handy volle Breite. */
.cf-mitteilungen {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 13000;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 48px));
  pointer-events: none;
}
.cf-mitteilung {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #343a49;
  border-radius: 14px;
  background: #11141c;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
  pointer-events: auto;
  animation: cf-mitteilung-rein .22s ease-out;
}
.cf-mitteilung.ist-fertig { border-color: rgba(255, 48, 79, .55); }
.cf-mitteilung-oeffnen {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 14px 8px 14px 16px;
  border: 0;
  background: none;
  color: #e6e9f1;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cf-mitteilung-oeffnen:hover, .cf-mitteilung-oeffnen:focus-visible { background: #171b25; }
.cf-mitteilung-oeffnen > i { flex: 0 0 auto; margin-top: 1px; color: #ff526b; font-size: 22px; }
.cf-mitteilung.ist-fehler .cf-mitteilung-oeffnen > i { color: #ffb020; }
.cf-mitteilung-oeffnen > span { display: grid; gap: 3px; min-width: 0; }
.cf-mitteilung-oeffnen strong { color: #f5f7fb; font-size: 14px; }
.cf-mitteilung-oeffnen small { overflow: hidden; color: #aab2c2; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cf-mitteilung-oeffnen em { color: #8c94a6; font-size: 12px; font-style: normal; }
.cf-mitteilung-zu {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  border: 0;
  border-left: 1px solid #232835;
  background: none;
  color: #8c94a6;
  font-size: 18px;
  cursor: pointer;
}
.cf-mitteilung-zu:hover, .cf-mitteilung-zu:focus-visible { color: #fff; background: #1a1d27; }
@keyframes cf-mitteilung-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cf-mitteilung { animation: none; } }
@media (max-width: 700px) {
  .cf-mitteilungen { left: 12px; right: 12px; bottom: 84px; width: auto; }
}

/* Shorts: "Du bist dran" statt Fortschritt, wenn die Auswahl wartet
   (AL-20260927-41). Deutlich hervorgehoben, ohne Balken und Restzeit. */
.shorts-history-card.is-awaiting-selection {
  display: grid;
  place-items: center;
  border: 2px solid #ff304f;
  background: radial-gradient(circle at 50% 42%, rgba(255, 48, 79, .26), #101117 72%);
  animation: cf-du-bist-dran 2.4s ease-in-out infinite;
  cursor: pointer;
}
.shorts-history-card.is-awaiting-selection .shorts-history-generation-visual > i { background: #ff304f; color: #fff; }
.shorts-history-card.is-awaiting-selection .shorts-history-generation-visual > strong { font-size: 15px; }
.shorts-history-card.is-awaiting-selection .shorts-history-generation-visual > small { color: #c9ceda; font-size: 11px; }
.shorts-history-card.is-awaiting-selection .shorts-history-card-overlay small { color: #ff8a9b; }
.shorts-auswahl-knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #ff304f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
@keyframes cf-du-bist-dran {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 48, 79, .16), 0 0 24px rgba(255, 48, 79, .25); }
  50% { box-shadow: 0 0 0 6px rgba(255, 48, 79, .3), 0 0 42px rgba(255, 48, 79, .48); }
}
@media (prefers-reduced-motion: reduce) { .shorts-history-card.is-awaiting-selection { animation: none; box-shadow: 0 0 0 4px rgba(255, 48, 79, .25); } }
/* Mitteilung, die eine Aktion verlangt (Shorts-Auswahl): kräftiger als "fertig". */
.cf-mitteilung.ist-aktion { border: 2px solid #ff304f; box-shadow: 0 0 0 4px rgba(255, 48, 79, .18), 0 18px 44px rgba(0, 0, 0, .6); }
.cf-mitteilung.ist-aktion .cf-mitteilung-oeffnen > i { color: #fff; background: #ff304f; border-radius: 10px; padding: 4px; font-size: 20px; }