/* yt-live-preview.css — Manuelle Pixelsteuerung für Höhe & Ausrichtung (Offsets) */
:root{
  /* >>> Stelle hier deine Pixelwerte ein <<< */
  --ytlp-log-height: 400px;     /* Höhe des Log-Fensters */
  --ytlp-prev-height: 220px;    /* Höhe des Video-Fensters */
  --ytlp-log-top: 0px;          /* Vertikaler Offset Log (nach unten) */
  --ytlp-prev-top: 12px;         /* Vertikaler Offset Preview (nach unten) */

  /* Optional: fixe Breite für die Preview, sonst nimmt sie 40% */
  --ytlp-prev-width: 0px;       /* z.B. 520px; 0px = deaktiviert */
}

.ytlp-host{display:flex !important; flex-direction:column !important; gap:12px;}
.ytlp-top{display:flex; align-items:center; justify-content:center; padding:4px 0;}

/* Zeile mit Log (links) & Preview (rechts) */
.ytlp-row{
  display:flex;
  flex-direction:row;
  align-items:flex-start;       /* wichtig: Oben ausrichten; Offsets regeln die Feinausrichtung */
  gap:14px;
}

/* LOG links: feste Höhe + Scroll; vertikale Ausrichtung via margin-top */
.ytlp-row > #log-overlay,
.ytlp-row > #log{
  flex:1 1 60%;
  min-width:0;
  height:var(--ytlp-log-height);
  max-height:var(--ytlp-log-height);
  margin-top:var(--ytlp-log-top);
  overflow:hidden;
  box-sizing:border-box;
  border:1px solid #2a2f37;
  border-radius:10px;
  padding:10px;
  background:#0b0f14;
  color:#cfd8e3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space:pre-wrap;
}

/* PREVIEW rechts: feste Höhe; optional feste Breite in px */
.ytlp-row > #yt-live-panel{
  flex:0 1 41%;
  min-width:340px;
  max-width:65%;
  width:calc(var(--ytlp-prev-width) * 1); /* bleibt 0, wenn nicht gesetzt */
  margin-top:var(--ytlp-prev-top);
  display:block;
}
/* Wenn eine feste Breite gesetzt ist (>0), verhindert dies prozentuales Schrumpfen */
.ytlp-row > #yt-live-panel[style*="--ytlp-prev-width"]{ flex:0 0 auto; }

/* Karte mit exakt definierter Höhe */
.ytlp-card{
  height:var(--ytlp-prev-height);
  max-height:var(--ytlp-prev-height);
  box-sizing:border-box;
  background:#0e1116;
  border:1px solid #2a2f37;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Kein Header/URL-Bereich sichtbar */
.ytlp-header, .ytlp-meta{display:none !important}

/* Player füllt die Karte vollständig */
.ytlp-player-wrap{
  position:relative;
  width:100%;
  height:100%;
  flex:1 1 auto;
  background:#000;
}
#yt-live-player{position:absolute; inset:0; width:100%; height:100%; z-index:1}



/* Mobile: untereinander */
@media (max-width: 900px){
  .ytlp-row{flex-direction:column}
  .ytlp-row > #yt-live-panel{min-width:auto; max-width:100%; width:100%; flex:1 1 auto;}
}

/* --- Fade-Overlay für sanfte Übergänge (2s) --- */
.ytlp-fader{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition: opacity 2000ms ease;
  background:#000; /* voll schwarz */
; z-index:2; transition:opacity 2000ms ease;}
.ytlp-fader.show{ opacity:1; }


/* ==== Patch: Log ohne Scrollleiste (forciert) ==== */
.ytlp-row > #log-overlay,
.ytlp-row > #log {
  overflow: hidden !important;
  scrollbar-width: none !important;   /* Firefox */
  -ms-overflow-style: none !important;/* IE/Edge Legacy */
}
.ytlp-row > #log-overlay::-webkit-scrollbar,
.ytlp-row > #log::-webkit-scrollbar {
  display: none !important;           /* WebKit */
}
/* Falls ein PRE im Log scrollt: ebenfalls abschalten */
#log-overlay pre, #log pre {
  overflow: hidden !important;
  scrollbar-width: none !important;
}
#log-overlay pre::-webkit-scrollbar,
#log pre::-webkit-scrollbar {
  display: none !important;
}