/* robotatut.pl - okno rozmowy na caly ekran
 *
 * PO CO. Wczesniej rozmowa byla zwyklym kawalkiem strony: przewijalo sie
 * razem z nia wszystko, co lezy nizej - stopka z linkami "Kandydat /
 * Pracodawca / Dokumenty". W komunikatorze to nie ma sensu. Teraz strona
 * rozmowy zachowuje sie jak okno aplikacji: na gorze zostaje topka i pasek
 * "z kim rozmawiam", na dole pole do pisania, a przewija sie TYLKO lista
 * wiadomosci.
 *
 * 100dvh, nie 100vh: dvh kurczy sie razem z ekranem, gdy wyjezdza
 * klawiatura, i wtedy pole samo podnosi sie nad nia. Na 100vh pole
 * zostaloby pod klawiatura - dokladnie ten blad widac w polowie stron.
 *
 * Arkusz jest podpiety NA KONCU, bo w tym projekcie wygrywa nizszy - tak
 * te reguly biora gore nad ogolnymi z chat.css i listy.css.
 */

body.tryb-rozmowy{
  height:100vh;   /* zapas dla starszych przegladarek, ktore nie znaja dvh */
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Pasek "wersja testowa" mowi o ogloszeniach - w rozmowie nie ma ogloszen,
   a na telefonie zabieral dwie linijki z i tak krotkiego ekranu. */
body.tryb-rozmowy .demobar,
body.tryb-rozmowy footer{display:none}

body.tryb-rozmowy .topbar{flex:0 0 auto}

.rozmowa{
  display:flex;flex-direction:column;flex:1;min-height:0;
  width:100%;max-width:820px;margin:0 auto;padding:0 14px;
}

/* ---------------------------------------------- z kim rozmawiam --- */
.rozmowa-gora{
  display:flex;align-items:center;gap:11px;flex:0 0 auto;
  padding:9px 0 11px;border-bottom:1px solid var(--line);
}

.rozmowa-gora .wroc{
  flex:0 0 34px;width:34px;height:34px;margin-left:-6px;
  display:grid;place-items:center;border-radius:50%;
  color:var(--ink2);
}
.rozmowa-gora .wroc:hover{color:var(--ink);background:rgba(128,128,128,.12)}
.rozmowa-gora .wroc svg{width:22px;height:22px;display:block}

.rozmowa-gora .kto{
  display:flex;align-items:center;gap:11px;min-width:0;flex:1;
  color:inherit;text-decoration:none;
}
.rozmowa-gora .th-av{flex:0 0 40px;width:40px;height:40px;font-size:16px}
.rozmowa-gora .napisy{min-width:0;display:flex;flex-direction:column}
.rozmowa-gora .imie{
  font-family:var(--f-display);font-weight:700;font-size:16.5px;line-height:1.2;
  letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rozmowa-gora .pod{
  font-size:12.5px;color:var(--ink2);line-height:1.35;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rozmowa-gora .kto[href]:hover .imie{color:var(--yl)}

/* ---------------------------------------- lista wiadomosci --- */
/* Jedyne miejsce na tej stronie, ktore sie przewija. Ramka i tlo znikaja:
   dymki same nosza kolor, a pudelko w pudelku na telefonie tylko zabiera
   szerokosc. overscroll-behavior pilnuje, zeby przewijanie na koncu listy
   nie przeskakiwalo na cala strone. */
body.tryb-rozmowy .chat{
  flex:1;min-height:0;max-height:none;
  overflow-y:auto;overscroll-behavior:contain;
  background:transparent;border:0;padding:14px 0 6px;gap:9px;
  -webkit-overflow-scrolling:touch;
}

body.tryb-rozmowy .bub{max-width:82%;border-radius:16px}
body.tryb-rozmowy .bub.me{border-bottom-right-radius:5px}
body.tryb-rozmowy .bub.you{border-bottom-left-radius:5px}

.chat-pusto{
  margin:auto 0;text-align:center;color:var(--ink2);font-size:14.5px;
  display:flex;flex-direction:column;gap:10px;padding:20px 6px;
}
.chat-pusto p{margin:0}
.chat-pusto .zasada{
  font-size:13px;opacity:.8;max-width:44ch;margin:0 auto;
  padding-top:10px;border-top:1px solid var(--line);
}

/* ---------------------------------------------- pole do pisania --- */
body.tryb-rozmowy .sendbox{
  flex:0 0 auto;max-width:none;padding:8px 0 10px;
  border-top:1px solid var(--line);
}
body.tryb-rozmowy .sendbox textarea{min-height:50px;font-size:16px}

@media (max-width:760px){
  /* Miejsce na dolne menu, przyklejone do dolu ekranu.
     Wysokosc bierzemy Z POMIARU (--dol ustawia js/rozmowa.js), bo wpisana
     na sztywno byla o kilkanascie pikseli za mala i pole do pisania
     schowalo sie za menu. Menu ma romb wystajacy w gore i bezpieczny
     obszar telefonu - takiej wysokosci nie da sie zgadnac z CSS.
     Liczba nizej to tylko zapas, gdyby skrypt nie wstal. */
  body.tryb-rozmowy{padding-bottom:var(--dol,calc(78px + env(safe-area-inset-bottom,0px)))}

  /* Przy otwartej klawiaturze dolne menu tylko zabiera miejsce - schodzi.
     Klase dodaje public/js/rozmowa.js, gdy pole dostaje ognisko. */
  body.tryb-rozmowy.klawiatura{padding-bottom:0}
  body.tryb-rozmowy.klawiatura .tabbar{display:none}

  .rozmowa{padding:0 12px}
  body.tryb-rozmowy .bub{max-width:86%}
}

/* ------------------------------------------------ kanal portalu --- */
/* Kanal to nie rozmowa: pisze tylko portal, a ogloszenie jest szerokie
   i ma naglowek. Dlatego nie dymki, a karty na cala szerokosc. */

.znak-kanalu{background:none;border:1px solid rgba(227,199,101,.55);color:var(--yl)}
.znak-kanalu svg{width:20px;height:20px;display:block}

.th-kanal{border-color:rgba(227,199,101,.45)}

.kanal-przypiete{
  display:flex;flex-direction:column;gap:9px;
  padding:0 0 12px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.kanal-przypiete .lab{
  font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.12em;
  font-weight:600;font-size:11px;color:var(--yl);
}

.ogl{
  background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--yl);border-radius:14px;
  padding:13px 15px;
}
.ogl-t{
  font-family:var(--f-display);font-weight:700;font-size:16.5px;
  letter-spacing:-.02em;margin:0 0 6px;
}
.ogl-b{font-size:15px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.ogl .t{display:block;font-size:11px;opacity:.6;margin-top:8px}

.kanal-stopka{
  flex:0 0 auto;margin:0;padding:11px 2px 12px;
  border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.45;color:var(--ink2);text-align:center;
}

/* W kanale nie ma pola do pisania, wiec przestrzen na dolne menu liczy
   sam CSS - skryptu rozmowy tu nie ma. */
@media (max-width:760px){
  body.tryb-kanalu{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}