/*
  assets/speler.css - de pagina van de pop-up speler (speler.php)

  De speler zelf (.ps-speler, .ps-lijst) staat in style.css, want hij zit ook
  in het schuifpaneel op de telefoon. Hier alleen de indeling van het venster:
  - zonder chat: een smalle kolom (het venster is 400 breed)
  - met chat, breed: twee kolommen, links de speler met net gedraaid eronder,
    rechts de chat
  - met chat, smal (telefoon): smalle spelerbalk, chat, net gedraaid
*/

body.speler-pagina {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 0;
  background: #0b0d10;
}
body.speler-pagina :focus-visible { outline: 2px solid var(--merk); outline-offset: 3px; }

.ps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kop" "speler" "lijst" "voet";
  gap: 16px;
  max-width: 440px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(14px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-bottom, 0px));
}

/* ---------- kop ---------- */

.ps-kop { grid-area: kop; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.ps-merk { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; text-decoration: none; }
.ps-merk img { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.ps-merk-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ps-merk-tekst b { font-size: 1rem; font-weight: 800; }
.ps-merk-tekst small { font-size: .8125rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ps-kolom-speler { grid-area: speler; min-width: 0; }
.ps-kolom-lijst { grid-area: lijst; min-width: 0; }

/* ---------- chat ---------- */

.ps-chat {
  grid-area: chat;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--lijn);
  border-radius: 20px;
  background: var(--kaart);
}
.ps-chat-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 18px;
  border-bottom: 1px solid var(--lijn);
}
.ps-chat-titel { font-size: .9375rem; font-weight: 800; }
.ps-chat-balk .chat-acties { width: auto; flex: none; }
.ps-chat .chat-raam { flex: 1; height: auto; min-height: 0; }

.ps-voet { grid-area: voet; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: .875rem; color: var(--ink-2); }
.ps-voet a { color: var(--ink-2); text-decoration: none; }
.ps-voet a:hover { color: #fff; text-decoration: underline; }

/* ---------- met chat (breed venster): twee kolommen ----------
   Links de speler met "Net gedraaid" eronder, rechts de chat over de hele
   hoogte. Alles past in het venster; is "Net gedraaid" te lang, dan scrollt
   alleen die lijst. */

@media (min-width: 760px) {
  body.met-chat .ps {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    min-height: 600px;
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-areas: "kop kop" "speler chat" "lijst chat";
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  body.met-chat .ps-voet { display: none; }
  body.met-chat .ps-chat { min-height: 0; }
  body.met-chat .ps-kolom-lijst { display: flex; min-height: 0; }
  body.met-chat .ps-lijst { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
  body.met-chat .ps-lijst .net-gedraaid li:nth-child(n+6) { display: grid; }

  /* De speler compacter: het logo klein links naast de show */
  body.met-chat .ps-speler {
    grid-template-columns: 88px minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
    gap: 14px 16px;
    padding: 18px;
    text-align: left;
  }
  body.met-chat .ps-hoes { width: 88px; border-radius: 16px; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
  body.met-chat .ps-hoes .ps-status { display: none; }
  body.met-chat .ps-hoes-letters { font-size: 1.75rem; }
  body.met-chat .ps-status-info { display: inline-flex; justify-self: start; }
  body.met-chat .ps-info { justify-items: start; gap: 6px; min-width: 0; }
  body.met-chat .ps-show { font-size: 1.25rem; }
  body.met-chat .ps-nummer,
  body.met-chat .ps-bediening,
  body.met-chat .ps-volume,
  body.met-chat .ps-luisteraars,
  body.met-chat .ps-speler .speler-fout { grid-column: 1 / -1; }
  body.met-chat .ps-bediening,
  body.met-chat .ps-volume,
  body.met-chat .ps-luisteraars { justify-self: center; }
  body.met-chat .ps-bediening { gap: 24px; }
  body.met-chat .ps-play { width: 72px; height: 72px; }
}

@media (min-width: 1400px) {
  body.met-chat .ps { grid-template-columns: 400px minmax(0, 1fr); }
}

/* ---------- met chat, smal: spelerbalk, chat, lijst ---------- */

@media (max-width: 759px) {
  body.met-chat .ps {
    max-width: 560px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kop" "speler" "chat" "lijst" "voet";
    grid-template-rows: none;
  }
  body.met-chat .ps { gap: 12px; }
  body.met-chat .ps-chat { position: static; height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 360px; }
  .ps-chat-balk { padding-left: 14px; }
}

/* Op volledig scherm geen randen om het venster heen */
:fullscreen body.met-chat .ps { padding-block: 16px; }