/* APPICS Pro — Media-Slots Upload-UI (13.09.2026, KIMI-PRO-MEDIA-UPLOAD-UI-20260913).
   Styles fuer js/pro-media-slots.js: runder Change-Knopf, Popover-Menue,
   Fortschrittsbalken und das Video-Overlay fuer Bild-Demo-Slots mit
   Video-Upload. Tokens aus css/pro.css, eigener Praefix pms-.
   Stempel 0913mediaslots. */

.pms-btn { position: absolute; top: 10px; right: 10px; z-index: 40; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgb(13 19 31 / 62%); color: var(--pro-mint, #78ddd9); cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgb(120 221 217 / 35%); transition: background .15s ease, transform .15s ease; }
.pms-btn svg { width: 18px; height: 18px; }
.pms-btn:hover, .pms-btn:focus-visible { background: rgb(13 19 31 / 85%); transform: scale(1.06); outline: none; }
.pms-btn:focus-visible { box-shadow: 0 0 0 2px var(--pro-mint, #78ddd9); }
.pms-btn--abs { right: auto; } /* Leaf-Medien: links/oben per Inline-Messung gesetzt */

.pms-progress { position: absolute; top: 0; left: 0; right: 0; z-index: 41; height: 22px;
  display: flex; align-items: center; background: rgb(13 19 31 / 55%); pointer-events: none; }
.pms-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgb(120 221 217 / 35%);
  transition: width .2s ease; }
.pms-progress-pct { position: relative; margin-left: 8px; font: 600 11px/1 'Outfit', sans-serif;
  color: var(--pro-mint, #78ddd9); }

.pms-menu { position: fixed; z-index: 9990; min-width: 220px; max-width: min(320px, calc(100vw - 16px));
  background: var(--pro-panel, #141a27); border: 1px solid var(--pro-line, #2b3242); border-radius: 14px;
  padding: 8px; box-shadow: 0 18px 44px rgb(0 0 0 / 45%); }
.pms-menu-items { display: flex; flex-direction: column; gap: 2px; }
.pms-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0;
  border-radius: 10px; background: transparent; color: var(--pro-ink, #fafbfb);
  font: 500 13px/1.3 'Outfit', sans-serif; text-align: left; cursor: pointer; }
.pms-item svg { width: 16px; height: 16px; color: var(--pro-mint, #78ddd9); flex-shrink: 0; }
.pms-item:hover, .pms-item:focus-visible { background: rgb(120 221 217 / 10%); outline: none; }
.pms-item-danger svg { color: #e88; }
.pms-q { margin: 6px 8px 10px; color: var(--pro-ink, #fafbfb); font: 500 13px/1.45 'Outfit', sans-serif;
  word-break: break-word; }
.pms-actions { display: flex; gap: 8px; }
.pms-go { flex: 1; padding: 9px 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--pro-mint, #78ddd9); color: var(--pro-action-ink, #0d131f);
  font: 600 13px/1 'Outfit', sans-serif; }
.pms-go-danger { background: #d96a6a; color: #14090b; }
.pms-cancel { padding: 9px 12px; border-radius: 10px; cursor: pointer; background: transparent;
  border: 1px solid var(--pro-line, #2b3242); color: var(--pro-muted, #b9bdc5); font: 500 13px/1 'Outfit', sans-serif; }
.pms-note { margin: 8px 8px 4px; color: var(--pro-muted, #b9bdc5); font: 500 12px/1.45 'Outfit', sans-serif; }
.pms-note-busy { color: var(--pro-mint, #78ddd9); }

/* Shell-Hero (.pro-hero--media auf today/fans/inflow/earnings): die schwebende
   Topbar-Avatar-Verknuepfung ragt oben rechts ~17 px in den Hero — der
   Change-Knopf braucht dort mehr Luft (390er-Layout ohne Topbar unveraendert
   ok, der groessere Inset schadet dort nicht). */
.pro-hero > .pms-btn { top: 26px; right: 14px; }

/* Track-Zeilen im Earnings-Share-Hub: der Share-Knopf sitzt rechts in der
   Zeile — der Change-Knopf gehoert hier UEBER das kleine Cover links. */
.pe-track > .pms-btn { top: 4px; right: auto; left: 4px; }

/* 22.09. (0922trackmini, Winchester-Order): kleine Flaechen (Cover <= 64 px,
   Slot traegt data-pms-mini) bekommen KEINEN Dauer-Knopf mehr — auf 44 px
   verdeckte der 36-px-Knopf ~2/3 des Covers. Jetzt: die ganze Kachel oeffnet
   das Upload-Menue (JS), der Knopf ist nur noch ein 20-px-Zeichen an der
   unteren Cover-Ecke, das am Desktop erst bei Hover/Fokus erscheint.
   Geraete ohne Hover (Handy): das Zeichen bleibt immer sichtbar — sonst
   waere der Upload dort unerreichbar. Tokens: pro-bg 13/19/31, pro-mint. */
.pms-btn--mini { width: 20px; height: 20px; right: auto; border-radius: 6px; opacity: 0;
  transform: scale(.85); transition: background .15s ease, transform .15s ease, opacity .15s ease; }
.pms-btn--mini svg { width: 11px; height: 11px; }
[data-pms-mini]:hover .pms-btn--mini, [data-pms-mini]:focus-within .pms-btn--mini,
.pms-btn--mini:hover, .pms-btn--mini:focus-visible { opacity: 1; transform: none; }
@media (hover: none) {
  .pms-btn--mini { opacity: 1; transform: none; }
}
/* Fallback-Position, falls die JS-Messung noch nicht lief (Layout noch ohne
   Masse): untere Ecke des 44-px-Covers, 2 px Inset. JS-Inline-Messung
   ueberschreibt dies. */
.pe-track > .pms-btn--mini { left: 22px; top: 22px; }
/* 22.09. (0922bannerimg): derselbe Mini-Modus am 44-px-Banner-Avatar — Mass
   unveraendert von der Song-Kachel uebernommen. Der Traeger ist RUND
   (border-radius 50 %, overflow: hidden): das Zeichen sitzt unten MITTIG
   ((44-20)/2 = 12), sonst klippt der Kreis seine Ecke weg. positionMini
   rechnet fuer runde Traeger dasselbe. */
.pn1-banner-ava > .pms-btn--mini { left: 12px; top: 22px; }

/* Custom-Video auf einem Bild-Demo-Slot (Overlay ueber dem Poster-<img>). */
.pms-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Custom-Bild auf einem Slot, der im Original gar kein <img> traegt. */
.pms-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Reduced-Motion (Haus-Muster wie data-luna-video): Videos bleiben Poster. */
@media (prefers-reduced-motion: reduce) {
  [data-pms-video] { display: none; }
}