/* PNP_WEBINAR_ROOM_CONTROLS_V1_CSS
   UI sterowania pokojem: przycisk zamknij czat, kamera/mikrofon on/off, SVG fix.
   Ładowany po mobile_v1.css — wygrywa kaskadą.
   Owner: www-data:www-data 644
*/

/* ── 1. Przycisk „Zamknij czat" (tylko #pnpOverlayChat) ──────── */

#pnpOverlayChat .pnp-overlay__close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  /* C10G-B wymusza ciemne tło na overlay — przycisk zawsze na ciemnym tle */
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

#pnpOverlayChat .pnp-overlay__close:hover {
  background: rgba(248, 215, 122, 0.22);
  color: #f8d77a;
  box-shadow: 0 0 0 1px rgba(248, 215, 122, 0.35);
}

#pnpOverlayChat .pnp-overlay__close:active {
  background: rgba(248, 215, 122, 0.32);
  color: #fef3c7;
}

#pnpOverlayChat .pnp-overlay__close:focus-visible {
  outline: 2px solid #f8d77a;
  outline-offset: 2px;
  box-shadow: none;
}

/* ── 2. SVG on/off — fix globalny (wszystkie modele pokoju) ──── */
/*
  Bug: reguły w master_v1.css są scoped do body[data-pnp-room-model="classic-conference"].
  Default model to "klasyczna-konferencja" — tam reguły nie działają.
  Poniższe reguły są ogólne i nadpisują brak reguł dla pozostałych modeli.
  Specyficzność: ID + atrybut > class — bezpieczne nadpisanie.
*/

#pnpBtnMic[aria-pressed="true"] .pnp-svg-off,
#pnpBtnCam[aria-pressed="true"] .pnp-svg-off {
  display: none !important;
}

#pnpBtnMic[aria-pressed="true"] .pnp-svg-on,
#pnpBtnCam[aria-pressed="true"] .pnp-svg-on {
  display: block !important;
}

#pnpBtnMic[aria-pressed="false"] .pnp-svg-on,
#pnpBtnCam[aria-pressed="false"] .pnp-svg-on {
  display: none !important;
}

#pnpBtnMic[aria-pressed="false"] .pnp-svg-off,
#pnpBtnCam[aria-pressed="false"] .pnp-svg-off {
  display: block !important;
}

/* ── 3. Klasy stanu sterowania — dodawane przez JS (Etap 2) ──── */

/* ON — aktywne, podświetlone */
.pnp-control-is-on {
  color: #f8d77a;
}

.pnp-control-is-on .pnp-btn__icon {
  background: rgba(248, 215, 122, 0.16);
  box-shadow: 0 0 0 2px rgba(248, 215, 122, 0.30);
}

.pnp-control-is-on .pnp-btn__icon svg {
  color: #fef3c7;
  stroke: currentColor;
}

/* OFF — wyłączone, wyciszone wizualnie */
.pnp-control-is-off {
  opacity: 0.55;
  color: inherit;
}

.pnp-control-is-off .pnp-btn__icon {
  background: transparent;
  box-shadow: none;
}

.pnp-control-is-off .pnp-btn__icon svg {
  color: inherit;
  stroke: currentColor;
}

/* Jasne motywy — korekta stanu ON (nie złoty, bo nieczytelny na jasnym tle) */
:is(
  body[data-pnp-room-model="klasyczna-konferencja"],
  body[data-pnp-room-model="biale-premium"],
  body[data-pnp-room-model="miekka-perla"],
  body[data-pnp-room-model="nowoczesny-blekit"],
  body[data-pnp-room-model="spokojne-biuro"],
  body[data-pnp-room-model="ciepla-kaplica"],
  body[data-pnp-room-model="kaplica"],
  body[data-pnp-room-model="jasne-zloto"],
  body[data-pnp-room-model="bialy-luksus"],
  body[data-pnp-room-model="perlowy-spokoj"],
  body[data-pnp-room-model="wysoki-kontrast-senior"]
) .pnp-control-is-on {
  color: #78350f;
}

:is(
  body[data-pnp-room-model="klasyczna-konferencja"],
  body[data-pnp-room-model="biale-premium"],
  body[data-pnp-room-model="miekka-perla"],
  body[data-pnp-room-model="nowoczesny-blekit"],
  body[data-pnp-room-model="spokojne-biuro"],
  body[data-pnp-room-model="ciepla-kaplica"],
  body[data-pnp-room-model="kaplica"],
  body[data-pnp-room-model="jasne-zloto"],
  body[data-pnp-room-model="bialy-luksus"],
  body[data-pnp-room-model="perlowy-spokoj"],
  body[data-pnp-room-model="wysoki-kontrast-senior"]
) .pnp-control-is-on .pnp-btn__icon {
  background: rgba(180, 130, 0, 0.14);
  box-shadow: 0 0 0 2px rgba(145, 98, 0, 0.35);
}

:is(
  body[data-pnp-room-model="klasyczna-konferencja"],
  body[data-pnp-room-model="biale-premium"],
  body[data-pnp-room-model="miekka-perla"],
  body[data-pnp-room-model="nowoczesny-blekit"],
  body[data-pnp-room-model="spokojne-biuro"],
  body[data-pnp-room-model="ciepla-kaplica"],
  body[data-pnp-room-model="kaplica"],
  body[data-pnp-room-model="jasne-zloto"],
  body[data-pnp-room-model="bialy-luksus"],
  body[data-pnp-room-model="perlowy-spokoj"],
  body[data-pnp-room-model="wysoki-kontrast-senior"]
) .pnp-control-is-on svg {
  color: #5f4200;
}

/* ── 4. Klasa pomocnicza do ukrywania (używana przez JS Etap 2) ─ */

.pnp-room-controls-v1-hidden {
  display: none !important;
}

/* PNP_WEBINAR_BOTTOMBAR_MOBILE_CHAT_PEOPLE_QUESTIONS_RESTORE_V1
 * Mobile restore: przywraca istniejące wejścia Czat / Osoby / Pytania-Prywatne.
 * Nie tworzy paneli od nowa. Routing JS i overlaye zostają bez zmian.
 */
@media (min-width: 769px) {
  .pnp-bottombar #pnpBtnChat,
  .pnp-bottombar #pnpBtnPeople,
  .pnp-bottombar #pnpBtnQuestions {
    display: none !important;
  }
}

/* Reakcje zostają ukryte globalnie — nie są częścią restore mobile. */
.pnp-bottombar #pnpBtnReactions {
  display: none !important;
}

@media (max-width: 768px) {
  .pnp-bottombar #pnpBtnChat,
  .pnp-bottombar #pnpBtnPeople,
  .pnp-bottombar #pnpBtnQuestions {
    display: inline-flex !important;
  }
}
/* /PNP_WEBINAR_BOTTOMBAR_MOBILE_CHAT_PEOPLE_QUESTIONS_RESTORE_V1 */

/* /PNP_WEBINAR_ROOM_CONTROLS_V1_CSS */