/* "Meine Dateien"-Picker (js/catbox_picker.js) - genutzt von Commands
   (module/commands/index.php) & Alerts (module/alert/index.php), um dort
   direkt eigene, per Catbox hochgeladene Sound-/Video-Dateien (siehe
   module/media) auszuwaehlen, statt die URL manuell einzufuegen. */

.cbxPickBtn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; padding:6px 10px; margin-top:6px;
  background:var(--bg-raised); border:1px solid var(--border); border-radius:3px;
  color:var(--text-secondary); cursor:pointer; transition:border-color .15s ease, color .15s ease;
}
.cbxPickBtn:hover{ border-color:var(--accent); color:var(--accent-fg,var(--accent)); }

.cbxPickBox{ text-align:left; }

.cbxPickFolderRow{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.cbxPickFolderRow label{ font-size:12px; font-weight:700; color:var(--text-faint); }
.cbxPickFolderRow select{
  flex:1; background:var(--bg-raised); border:1px solid var(--border); border-radius:3px;
  color:var(--text-primary); font-size:13px; padding:6px 8px;
}

.cbxPickTableWrap{
  max-height:340px; overflow-y:auto; border:1px solid var(--border); border-radius:3px;
  background:var(--bg-card);
}
.cbxPickTable{ display:flex; flex-direction:column; }

.cbxPickRow{
  display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:8px;
  padding:9px 12px; border-bottom:1px solid var(--border); cursor:pointer;
}
.cbxPickRow:last-child{ border-bottom:none; }
.cbxPickRow:nth-child(even){ background:rgba(255,255,255,.015); }
.cbxPickRow:hover{ background:var(--bg-raised); }

.cbxPickIcon{ font-size:16px; text-align:center; }
.cbxPickName{ font-size:13px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cbxPickSize{ font-size:11.5px; color:var(--text-faint); white-space:nowrap; }

.cbxPickEmpty, .cbxPickLoading{
  padding:24px 16px; text-align:center; font-size:13px; color:var(--text-faint);
}

/* ==========================================================================
   Medien-Quellen-Auswahl (Sound-URL / Gif-Clip-Feld in Commands & Alerts) -
   Redesign auf Basis des Mocks: grosse quadratische Quellen-Buttons statt
   schmaler Text-Links, + eigenstaendige Vorschau-Boxen mit Header/Badge
   statt der vorherigen ueberlagerten Mini-Vorschau. Ersetzt/erweitert die
   bisherigen .cbxPickBtn/klipyBrowseBtn-Links NUR innerhalb der beiden
   Module (module/commands/index.php, module/alert/index.php) - alert.css/
   alerts.css (auch von der Landing-Page genutzt) bleiben unangetastet.
   ========================================================================== */

.cbxSrcRow{ display:flex; gap:8px; margin:10px 0 14px; }

.cbxSrcBtn{
  flex:1 1 0; max-width:84px; aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:var(--bg-raised); border:1px solid var(--border); border-radius:8px;
  color:var(--text-secondary); font-size:10.5px; font-weight:700; text-align:center; line-height:1.2;
  cursor:pointer; padding:6px 4px; transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.cbxSrcBtn .cbxSrcIcon{ font-size:22px; line-height:1; }
.cbxSrcBtn:hover{ border-color:var(--accent); background:rgba(var(--accent-rgb),.12); color:var(--text-primary); transform:translateY(-1px); }

/* Vorschau-Boxen: gemeinsamer Rahmen mit Kopfzeile (+ Format-Badge bei
   Video/GIF) statt der bisherigen frei schwebenden Mini-Vorschau.
   FESTE Gesamthoehe (statt aspect-ratio) - dadurch sind Sound- und
   Video/GIF-Vorschau IMMER exakt gleich hoch, unabhaengig davon, ob die
   Video-Box gerade den zusaetzlichen "In Schleife abspielen"-Fusszeilen-
   Streifen zeigt oder nicht (der ging vorher zulasten der Gesamthoehe und
   sorgte fuer den Hoehenunterschied, siehe Screenshot-Feedback). Kopf/Fuss
   behalten ihre natuerliche Hoehe (flex:0 0 auto), der Koerper
   (.cbxPreviewBody/.cbxAudioBody) fuellt den Rest (flex:1 1 auto). */
.cbxPreviewBox{
  display:flex; flex-direction:column; height:260px;
  border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--bg-raised);
  margin-top:auto;
}
.cbxPreviewHead{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 12px; font-size:11px; font-weight:700; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02);
}

.cbxPreviewBody{ flex:1 1 auto; min-height:0; position:relative; background:#000; display:flex; align-items:center; justify-content:center; }
.cbxPreviewBody video, .cbxPreviewBody img{ width:100%; height:100%; object-fit:contain; display:block; }

.cbxPreviewEmpty{ color:var(--text-faint); font-size:12.5px; text-align:center; padding:18px 12px; }

.cbxPreviewFoot{ flex:0 0 auto; display:flex; align-items:center; padding:7px 12px; border-top:1px solid var(--border); }
.cbxPreviewFoot .switch-item{ font-size:12px; }

/* Sound-Vorschau: Icon + Dateiname statt nacktem <audio>-Player. */