/* Farben kommen aus den Variablen der Galerie (--psg-primaer, --psg-dunkel). Der zweite Wert
   ist der Rueckfall: ohne das Galerie-Plugin faerbt sich das Panel trotzdem richtig. */

/* Das Panel ist das letzte Kind der Lightbox, die als Spalte layoutet. Es nimmt seine
   natuerliche Hoehe (flex:0 0 auto) und begrenzt sie nach oben -- das Bild darueber schrumpft
   entsprechend. Wuerde das Panel mitschrumpfen, waeren wieder Kommentare abgeschnitten. */
.psb-panel{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:480px;
  margin:0 auto;
  /* Obergrenze, damit bei kleinen Fenstern nicht das ganze Bild verschwindet. */
  max-height:min(52vh, 460px);
  color:#fff;
  font-family:'Jost','Poppins',sans-serif;
  font-weight:300;
  font-size:14px;
  box-sizing:border-box;
  padding:0 10px;
  overflow:hidden;
}
.psb-panel *{ box-sizing:border-box; }

/* Nur Likes: eine einzige Zeile, keine Obergrenze noetig. */
.psg-lightbox.psb-nur-likes .psb-panel{
  max-height:none;
  max-width:none;
  width:auto;
}
.psg-lightbox.psb-nur-likes .psb-like-row{ margin-bottom:0; justify-content:center; }

/* Nur Kommentare: der Platz der Like-Zeile steht dem Kommentarbereich zur Verfuegung. */
.psg-lightbox.psb-nur-kommentare .psb-kommentare{ --psb-zeilen:6; }

.psb-like-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.psb-like-btn{
  background:none;
  border:1px solid #fff;
  color:#fff;
  border-radius:20px;
  padding:6px 16px;
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:6px;
  transition:background .2s ease, border-color .2s ease;
}
/* Das Herz deutlich groesser als die Beschriftung. line-height:1 haelt den Knopf dabei flach:
   ohne das wuerde die groessere Zeilenhoehe ihn mit aufblasen. Das Skelett benutzt dieselben
   Klassen und waechst mit -- sonst spraenge das Layout beim Nachladen wieder. */
.psb-like-icon{
  font-size:22px;
  line-height:1;
}
.psb-like-btn:hover{ border-color:var(--psg-primaer, #f5cf12); color:var(--psg-primaer, #f5cf12); }
.psb-like-btn.is-liked{
  background:var(--psg-primaer, #f5cf12);
  border-color:var(--psg-primaer, #f5cf12);
  color:var(--psg-dunkel, #2e2a25);
}
/* Der Like ist zuruecknehmbar, der Knopf bleibt also anklickbar -- "cursor:default" hat
   vorher das Gegenteil signalisiert. */
.psb-like-btn[disabled]{ opacity:.6; cursor:wait; }

/* Hinweise: Ladezustand, Moderationsbestaetigung, Fehlermeldungen. */
.psb-meldung{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.4;
  opacity:.85;
}

/* Genau fuenf Kommentarzeilen sind sichtbar, alles Weitere scrollt INNERHALB des Panels.
   Ohne diese Grenze wuchs die Liste unbegrenzt und schob Bild oder Formular aus dem Fenster. */
/* Die Kommentarliste hat eine FESTE Hoehe. Sonst springt das Layout in dem Moment, in dem die
   Antwort eintrifft: erst Geruest, dann plötzlich mehr oder weniger Zeilen. Fest heisst auch:
   bei einem einzigen Kommentar bleibt Platz frei -- das ist der Preis fuer ein ruhiges Bild,
   und er ist bewusst bezahlt. */
.psb-kommentare{
  --psb-zeilen:5;
  /* Hoehe EINER Kommentarzeile, nicht einer Textzeile: 1.45em Text plus 2x8px Innenabstand
     macht bei 14px Schrift rund 2.6em. Mit 1.45em gerechnet waeren nur drei Kommentare
     sichtbar gewesen. */
  --psb-zeilenhoehe:2.6em;
  flex:0 1 auto;
  min-height:0;
  height:calc(var(--psb-zeilen) * var(--psb-zeilenhoehe));
  overflow-y:auto;
  overscroll-behavior:contain;
  margin-bottom:12px;

  /* Schlanker Balken in der Akzentfarbe, Laufschiene ohne Flaeche -- damit die Liste nicht
     von einem grauen Kasten am Rand gerahmt wird. Erste Farbe in scrollbar-color ist der
     bewegliche Balken, zweite die Schiene. */
  scrollbar-width:thin;
  scrollbar-color:var(--psg-primaer, #f5cf12) transparent;
}
.psb-kommentare::-webkit-scrollbar{
  width:6px;
}
.psb-kommentare::-webkit-scrollbar-track{
  background:transparent;
}
.psb-kommentare::-webkit-scrollbar-thumb{
  background:var(--psg-primaer, #f5cf12);
  border-radius:3px;
}
.psb-kommentare::-webkit-scrollbar-thumb:hover{
  background:var(--psg-primaer, #f5cf12);
  opacity:.85;
}
/* Bewusst NICHT ausblenden, wenn leer: die reservierte Hoehe muss stehen bleiben, sonst
   springt das Layout genau dann, wenn ein Medium noch keine Kommentare hat. */
.psb-kommentare:empty{ display:block; }

/* ==== Ladegeruest ====
   Platzhalter in der Groesse des Endzustands, leicht pulsierend. */
.psb-skelett,
.psb-skelett-zeile{
  background:rgba(255,255,255,0.14);
  border-color:transparent !important;
  color:transparent !important;
  border-radius:3px;
  animation:psb-pulsieren 1.4s ease-in-out infinite;
}
.psb-skelett{
  /* Groesse kommt vom echten Knopf (.psb-like-btn) -- hier nur die Farbe. */
  border-radius:20px;
}
.psb-skelett-zeile{
  height:calc(var(--psb-zeilenhoehe, 2.6em) - 8px);
  margin:8px 0;
  border-top:none;
}
.psb-skelett-form{ pointer-events:none; }
.psb-skelett-form input,
.psb-skelett-form textarea,
.psb-skelett-form button{ opacity:.35; }

@keyframes psb-pulsieren{
  0%, 100% { opacity:.55; }
  50%      { opacity:.9; }
}
/* Wer Bewegung reduziert haben moechte, bekommt einen ruhigen Platzhalter. */
@media (prefers-reduced-motion: reduce){
  .psb-skelett,
  .psb-skelett-zeile{ animation:none; }
}

/* Formular und Like-Zeile behalten immer ihre Groesse -- sie sind die Bedienelemente. */
.psb-like-row,
.psb-form{ flex:0 0 auto; }
.psb-kommentar{
  border-top:1px solid rgba(255,255,255,0.2);
  padding:8px 0;
  line-height:1.45em;
}
.psb-kommentar:first-child{ border-top:none; }
.psb-kommentar-name{ font-weight:600; margin-right:6px; }

/* Hinweis in der reservierten Flaeche, wenn es noch keine Kommentare gibt. */
.psb-leer{
  margin:0;
  padding:10px 0;
  font-size:13px;
  opacity:.6;
}

.psb-mehr-btn{
  background:none;
  border:none;
  color:var(--psg-primaer, #f5cf12);
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  padding:0;
  text-decoration:underline;
}

.psb-form{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}
.psb-form input[type="text"],
.psb-form textarea{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.3);
  color:#fff;
  font-family:inherit;
  font-size:14px;
  padding:8px 10px;
  border-radius:0;
}
.psb-form textarea{ min-height:60px; resize:vertical; }
.psb-form button{
  align-self:flex-start;
  background:var(--psg-primaer, #f5cf12);
  border:none;
  color:var(--psg-dunkel, #2e2a25);
  padding:8px 20px;
  cursor:pointer;
  font-family:inherit;
  font-weight:400;
}
.psb-website{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Nebeneinander (ab 900px Breite) darf das Panel die volle Hoehe nutzen -- es steht dann
   nicht mehr dem Bild im Weg, sondern neben ihm. */
@media (min-width:900px){
  .psg-lightbox.psb-hat-panel .psb-panel{ max-height:100%; max-width:none; }
  .psg-lightbox.psb-hat-panel .psb-kommentare{ --psb-zeilen:7; }
}

@media (max-width:700px){
  .psb-panel{
    /* Keine eigene Breite mehr: der Rand kommt von der Lightbox, damit Panel und Bild auf
       derselben Kante stehen. Die 10px Innenabstand des Panels wuerden sonst zusaetzlich
       einruecken -- deshalb hier auf 0. */
    max-width:100%;
    padding-left:0;
    padding-right:0;
    /* Auf dem Handy ist die Hoehe knapper: weniger Zeilen, damit vom Bild etwas bleibt. */
    max-height:min(46vh, 340px);
  }
  .psb-kommentare{ --psb-zeilen:3; }
  .psb-form textarea{ min-height:48px; }
}