/* robotatut.pl - KONFERENCJA, wariant "siatka".

   Wlasciciel wybral ten uklad z trzech makiet: wszyscy rowni, dwa na
   dwa, kto mowi - ma zlota ramke. Kolory sa WPISANE WPROST, nie z motywu
   portalu: na kafelku lezy obraz z kamery, wiec kolor napisu nie moze
   zalezec od tego, czy portal stoi w jasnym czy ciemnym motywie - tylko
   od tego, na czym ten napis lezy. Ta sama zasada, co w glowce profilu.

   Podpiete na koncu listy arkuszy (kolejnosc ma znaczenie). */

body.konf-otwarta{overflow:hidden}
/* Dolny pasek portalu ma z-index 1100, "podziel sie" 1300, podglad
   zdjecia 1400 - pokoj stoi nad wszystkim, bo jest rozmowa. */
body.konf-otwarta .tabbar,
body.konf-otwarta .topbar,
body.konf-otwarta .stopka{display:none}

.konf{
  position:fixed;inset:0;z-index:1500;
  background:#0B0A09;color:#F6F3EA;
  font-family:var(--f-body,system-ui,sans-serif);
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

/* ---------------------------------------------------------- gora */

.konf-top{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;flex:0 0 auto}
.konf-chev{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  background:#1C1A16;border:1px solid #3A352A;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
}
.konf-chev i{
  display:block;width:8px;height:8px;margin-left:3px;
  border-left:2px solid #F6F3EA;border-bottom:2px solid #F6F3EA;transform:rotate(45deg);
}
.konf-ttl{flex:1 1 auto;min-width:0}
.konf-ttl b{display:block;font-size:15px;font-weight:700;letter-spacing:.2px}
.konf-ttl span{display:block;font-size:12px;color:#9C958A;margin-top:2px}
.konf-czas{
  flex:0 0 auto;font-size:12px;font-weight:700;color:#0B0A09;
  background:linear-gradient(180deg,#F2DC96,#A6790F);border-radius:999px;padding:5px 11px;
  font-variant-numeric:tabular-nums;
}

/* -------------------------------------------------------- siatka

   Dwa na dwa na telefonie. Przy dwojgu ludzi kafelki sa wysokie
   i stoja jeden nad drugim - pusta kolumna obok dwojga rozmowcow
   wygladalaby na blad. */

.konf-siatka{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px;
  align-content:stretch;
}
.konf-siatka[data-ilu="1"],
.konf-siatka[data-ilu="2"]{grid-template-columns:1fr}

.konf-kafel{
  position:relative;border-radius:18px;overflow:hidden;
  border:1px solid #2A2620;background:#141110;min-height:0;
}
.konf-kafel.mowi{border:2px solid #E3C765;box-shadow:0 0 0 3px rgba(227,199,101,.16)}
.konf-kafel.czeka{opacity:.62}

.konf-obraz{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#141110;
}
.konf-kafel.ja .konf-obraz{transform:scaleX(-1)}
.konf-obraz[hidden]{display:none}

/* Bez obrazu zostaje pierwsza litera imienia - to samo, co na krazku
   profilu, wiec czlowiek poznaje sie od razu. */
.konf-litera{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;
  background:linear-gradient(180deg,#F2DC96,#A6790F);color:#0B0A09;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display,inherit);font-size:30px;font-weight:800;
}

.konf-cien{
  position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));
}
.konf-plyt{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:6px}
.konf-plyt b{
  font-size:12px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.7);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.konf-znak{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#D4402B;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.konf-znak .mik{width:7px;height:11px;border-radius:4px;background:#F6F3EA;display:block}
.konf-znak .przek{position:absolute;width:20px;height:2px;background:#F6F3EA;transform:rotate(-45deg)}
.konf-tag{
  position:absolute;left:8px;top:8px;font-size:10px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;color:#0B0A09;
  background:linear-gradient(180deg,#F2DC96,#A6790F);border-radius:999px;padding:3px 8px;
}
.konf-kafel:not(.czeka) .konf-tag{display:none}

/* --------------------------------------------------- pozwij jeszcze */

.konf-zapr{
  flex:0 0 auto;margin:10px 12px 0;height:48px;border-radius:14px;
  background:#141210;border:1px solid #2A2620;text-decoration:none;color:#F6F3EA;
  display:flex;align-items:center;gap:10px;padding:0 12px;
}
.konf-zapr .ikn{
  width:26px;height:26px;border-radius:8px;background:rgba(227,199,101,.14);
  display:flex;align-items:center;justify-content:center;color:#E3C765;font-size:15px;line-height:0;
}
.konf-zapr b{font-size:13px;font-weight:700}
.konf-zapr .ile{margin-left:auto;font-size:12px;color:#9C958A}

/* -------------------------------------------------------- guziki */

.konf-dol{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:16px 0 22px;
}
.konf-g{
  width:54px;height:54px;border-radius:50%;background:#1C1A16;border:1px solid #3A352A;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
}
.konf-g[aria-pressed="true"]{background:#F6F3EA;border-color:#F6F3EA}
.konf-konc{width:66px;height:66px;background:#D4402B;border-color:#D4402B}
.konf-g .sluch{
  width:24px;height:24px;border-radius:7px;background:#F6F3EA;
  transform:rotate(133deg);position:relative;
}
.konf-g .sluch:after{
  content:"";position:absolute;left:5px;top:5px;width:14px;height:14px;
  border-radius:5px;background:#D4402B;
}
.konf-g .ic{width:22px;height:22px;display:block;position:relative}
.ic-mik{width:11px;height:17px;border-radius:6px;background:#F6F3EA;margin:2px auto 0;display:block}
.ic-kam{width:20px;height:14px;border-radius:5px;background:#F6F3EA;margin:4px auto 0;position:relative;display:block}
.ic-kam:after{
  content:"";position:absolute;right:-6px;top:3px;border-left:7px solid #F6F3EA;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
}
.konf-g[aria-pressed="true"] .ic-mik{background:#0B0A09}
.konf-g[aria-pressed="true"] .ic-kam{background:#0B0A09}
.konf-g[aria-pressed="true"] .ic-kam:after{border-left-color:#0B0A09}
.ic-obroc{
  width:18px;height:18px;margin:2px auto 0;display:block;border-radius:50%;
  border:2px solid #F6F3EA;border-right-color:transparent;
}

/* ------------------------------------------------ ekran przychodzacy */

.konf-dzwoni{
  position:absolute;inset:0;z-index:5;
  background:rgba(11,10,9,.94);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.konf-dzwoni[hidden]{display:none}
.konf-dzwoni-tresc{text-align:center;max-width:320px;width:100%}
.konf-dzwoni-tresc b{display:block;font-size:20px;font-weight:800}
.konf-dzwoni-tresc span{display:block;margin-top:8px;font-size:15px;color:#CFC7B8}
.konf-dzwoni-guziki{display:flex;gap:10px;margin-top:26px}
.konf-dzwoni-guziki button{
  flex:1 1 0;height:52px;border-radius:14px;font:inherit;font-size:15px;font-weight:700;
  cursor:pointer;border:1px solid #3A352A;background:#1C1A16;color:#F6F3EA;
}
.konf-tak{background:#1E9E5A !important;border-color:#1E9E5A !important}

.konf-blad{
  position:absolute;left:16px;right:16px;bottom:96px;z-index:6;margin:0;
  text-align:center;font-size:13px;color:#E0897C;
}
.konf-blad[hidden]{display:none}

/* ------------------------------------------------------ ekran wyboru */

.konfwyb{display:flex;flex-direction:column;gap:8px}
.konfwyb-wiersz{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  border:2px solid var(--line);background:var(--card);padding:10px 12px;
}
.konfwyb-wiersz input{position:absolute;opacity:0;width:0;height:0}
.konfwyb-wiersz:has(input:checked){border-color:var(--yl)}
.konfwyb-ava{
  width:40px;height:40px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  background:linear-gradient(180deg,#F2DC96,#A6790F);color:#17160F;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;
}
.konfwyb-ava img{width:100%;height:100%;object-fit:cover;display:block}
.konfwyb-imie{flex:1 1 auto;min-width:0;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.konfwyb-znak{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;border:2px solid var(--line);
}
.konfwyb-wiersz:has(input:checked) .konfwyb-znak{
  border-color:var(--yl);background:var(--yl);
}
.konfwyb-rodzaj{display:flex;gap:16px;font-size:15px}
.konfwyb-rodzaj label{display:flex;align-items:center;gap:7px;cursor:pointer}

/* ------------------------------------------------------------ napisy

   Leza NA obrazie, u dolu - tak jak w filmie, a nie pod nim: kazdy pasek
   pod kafelkami zabralby wysokosc twarzom, a twarze sa tu cala rzecza.
   Kolory wpisane wprost, bo tlo jest dowolne. */

.konf-napisy{
  position:absolute;left:12px;right:12px;bottom:108px;z-index:4;
  display:flex;flex-direction:column;gap:6px;align-items:center;
  pointer-events:none;
}
.konf-napisy[hidden]{display:none}
.konf-napis{
  max-width:100%;
  background:rgba(10,9,8,.72);border:1px solid rgba(255,255,255,.10);
  border-radius:12px;padding:7px 12px;
  font-size:15px;line-height:1.35;color:#F6F3EA;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.konf-napis b{color:#E3C765;font-weight:700;margin-right:6px}
.konf-napis.moj{background:rgba(28,26,22,.78)}

.ic-napisy{
  display:block;font-style:normal;font-weight:800;font-size:13px;
  line-height:22px;text-align:center;color:#F6F3EA;letter-spacing:.5px;
}
.konf-g[aria-pressed="true"] .ic-napisy{color:#0B0A09}