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

/*
 * Einheitliche Symbolknoepfe auf den Kacheln der Verlaeufe
 * (Nutzerwunsch 25.09.2026, CFAI-MOB-20260925-116: "die Icons sehen ueberall
 * anders aus - gleiche Groesse, gleiches Aussehen, gleiche Erscheinung").
 *
 * Vorher hatte jede Galerie ihre eigene Fassung: Shorts 31 px mit 9 px Ecke,
 * Videos/Uebersetzungen/Sprachausgabe 34 px mit 9 px, Social-Posts 36 px mit
 * 10 px, Thumbnails 40 px mit 11 px, der Short-Download rund. Dazu drei
 * Hintergruende, zwei Randfarben, Zeichen zwischen 16 und 20 px und
 * Deckkraft 0,82 bei einem Teil der Kacheln.
 *
 * Jetzt gilt fuer alle: 36 x 36 px, 10 px Ecke, dunkles Glas mit 1 px hellem
 * Rand, weisses Zeichen in 18 px, 10 px Abstand zum Kachelrand. Beim Zeigen
 * wird Loeschen dunkelrot, alles andere rot gefuellt.
 *
 * Die Regeln stehen hier gebuendelt und mit !important, weil die bisherigen
 * Fassungen ueber sechs Dateien mit ID-Selektoren verteilt sind. Nicht
 * angefasst: min-width/min-height - die 40-px-Tippflaechen fuer
 * Touch-Geraete (contentfactory-mobil-freigaben.css, 064/065/071) gelten
 * weiter. Ob ein Knopf erst beim Zeigen erscheint, bleibt wie es war.
 */
.thumbnail-history-action,
.video-history-gallery-delete,
.video-history-gallery-download,
.shorts-history-delete,
.shorts-history-download,
.shorts-history-open,
.shorts-download-icon {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 10px !important;
  background: rgba(8, 10, 15, .8) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3) !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  backdrop-filter: blur(10px) !important;
  transition: opacity .18s ease, background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}
.thumbnail-history-action i,
.video-history-gallery-delete i,
.video-history-gallery-download i,
.shorts-history-delete i,
.shorts-history-download i,
.shorts-history-open i,
.shorts-download-icon i {
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Sichtbare Knoepfe in voller Deckkraft - vorher 0,82 bzw. 0,72. */
.video-history-gallery-delete,
.video-history-gallery-download,
.shorts-history-delete,
.shorts-history-download,
.shorts-download-icon {
  opacity: 1 !important;
}

/* Gleicher Abstand zum Rand: Loeschen oben links, alles andere oben rechts. */
.thumbnail-history-actions { inset: 10px !important; }
.video-history-gallery-delete,
.shorts-history-delete { top: 10px !important; left: 10px !important; right: auto !important; }
.video-history-gallery-download,
.shorts-history-download,
.shorts-history-open { top: 10px !important; right: 10px !important; }

/* Zeigen und Tastatur: Loeschen warnt, alles andere wird rot gefuellt. */
.thumbnail-history-action:hover,
.thumbnail-history-action:focus-visible,
.video-history-gallery-delete:hover,
.video-history-gallery-delete:focus-visible,
.video-history-gallery-download:hover,
.video-history-gallery-download:focus-visible,
.shorts-history-delete:hover,
.shorts-history-delete:focus-visible,
.shorts-history-download:hover,
.shorts-history-download:focus-visible,
.shorts-download-icon:hover,
.shorts-download-icon:focus-visible {
  border-color: rgba(255, 48, 79, .75) !important;
  background: #ff304f !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}
.thumbnail-history-action.is-delete:hover,
.thumbnail-history-action.is-delete:focus-visible,
.video-history-gallery-delete:hover,
.video-history-gallery-delete:focus-visible,
.shorts-history-delete:hover,
.shorts-history-delete:focus-visible {
  background: rgba(92, 13, 30, .92) !important;
  color: #ff647c !important;
}

/*
 * Wann die Knoepfe zu sehen sind (Nutzerwunsch 25.09.2026, Nachtrag zu 116):
 * Am PC nur, solange die Maus auf dem Bild bzw. Video steht - oder die
 * Tastatur darin ist. Auf Handy und Tablet immer, denn dort gibt es kein
 * Zeigen. Vorher war es umgekehrt uneinheitlich: Thumbnails und Social-Posts
 * versteckten die Knoepfe auch auf dem Handy, Videos und Shorts zeigten sie
 * auch am PC dauerhaft.
 * Waehrend eines Downloads ([data-loading]) oder Loeschens (.is-busy) bleibt
 * der Knopf sichtbar. Die Knoepfe auf dem Bildergebnis liegen auf dem Handy
 * hinter dem Drei-Punkte-Menue (mobil-freigaben) und werden hier nur fuer
 * den PC gesteuert.
 */
@media (hover: hover) and (pointer: fine) {
  .thumbnail-history-actions,
  .video-history-gallery-delete,
  .video-history-gallery-download,
  .shorts-history-delete,
  .shorts-history-download,
  .shorts-download-icon,
  .factory-image-download-overlay {
    opacity: 0 !important;
  }
  .thumbnail-history-card:hover .thumbnail-history-actions,
  .thumbnail-history-card:focus-within .thumbnail-history-actions,
  .social-poster-history-card:hover .thumbnail-history-actions,
  .social-poster-history-card:focus-within .thumbnail-history-actions,
  .video-history-gallery-card:hover :is(.video-history-gallery-delete, .video-history-gallery-download),
  .video-history-gallery-card:focus-within :is(.video-history-gallery-delete, .video-history-gallery-download),
  .shorts-history-card:hover :is(.shorts-history-delete, .shorts-history-download),
  .shorts-history-card:focus-within :is(.shorts-history-delete, .shorts-history-download),
  .shorts-video-shell:hover .shorts-download-icon,
  .shorts-video-shell:focus-within .shorts-download-icon,
  .factory-image-stage:hover .factory-image-download-overlay,
  .factory-image-stage:focus-within .factory-image-download-overlay,
  .factory-image-result:hover .factory-image-download-overlay,
  .factory-image-result:focus-within .factory-image-download-overlay,
  :is(.video-history-gallery-download, .shorts-history-download, .factory-image-download-overlay)[data-loading],
  .factory-image-download-overlay:disabled,
  :is(.video-history-gallery-delete, .shorts-history-delete, .thumbnail-history-action).is-busy {
    opacity: 1 !important;
  }
}
@media (hover: none), (pointer: coarse) {
  .thumbnail-history-actions {
    opacity: 1 !important;
    transform: none !important;
  }
}