/* CHAT ČLENŮ NA PORTÁLU — sekce na úvodce (app/views/home.php, .hpc) a modul na /administrace (app/views/administrace.php,
   .admch-*). Majitel 29. 10. 2026, plátno „Titulka a /administrace: chat a dokupy“. Telefon .chu je ilustrace aplikace
   (kabát podle app.css a club.css sekce CHAT) v plné velikosti 390 × 844, zmenšená transformací; nic se v ní neklikne. */

/* ---------- úvodka: sekce Chat členů ---------- */
.hpc { overflow: hidden; background: var(--kava); color: #fff; scroll-margin-top: 70px; }
.hpc-in { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 640px); justify-content: space-between; align-items: center; gap: 40px; padding-top: 96px; padding-bottom: 96px; }
.hpc h2 { margin-top: 16px; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.04; color: #fff; }
.hpc .perex { margin-top: 22px; }
.hpc .odrazky .ik { color: var(--zluta); }
.hpc-tarif { margin-top: 28px; padding: 14px 18px; border: 1px solid var(--kava-linka); border-radius: 16px; background: var(--kava-2); font-size: 15px; color: var(--svetly-text); }
.hpc-tarif b { color: var(--zluta); }
.hpc-tl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.hpc-tl .odkaz-sipka { color: #fff; font-size: 17px; font-weight: 600; }
.hpc-tl .odkaz-sipka .ik { color: var(--zluta); }
.hpc-tl .odkaz-sipka:hover { color: var(--zluta); }
.hpc-obraz { position: relative; height: 684px; }
.hpc-tel { position: absolute; left: 50%; top: 0; width: 316px; padding: 9px; border: 1px solid var(--kava-carka); border-radius: 46px; background: #0E0B09; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45); transform: translateX(-50%); }
.hpc-tel-in { width: 298px; height: 645px; overflow: hidden; border-radius: 38px; }
.hpc-tel-in > .chu { transform: scale(0.764); transform-origin: 0 0; }
.hpc-popis { position: absolute; display: flex; align-items: center; gap: 10px; max-width: 220px; padding: 10px 14px; border-radius: 14px; background: #fff; color: var(--kava); font-size: 13.5px; font-weight: 700; line-height: 1.3; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); }
.hpc-popis i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--zluta); box-shadow: 0 0 0 3px #FFF3B0; }
.hpc-popis.p1 { left: 0; top: 270px; }
.hpc-popis.p2 { right: 0; top: 392px; }
.hpc-popis.p3 { left: 18px; top: 520px; }
@media (max-width: 1099px) {
  .hpc-in { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 72px; padding-bottom: 64px; }
  .hpc-obraz { width: 640px; max-width: 100%; margin: 0 auto; }
}
@media (max-width: 759px) {
  .hpc-in { padding-top: 56px; padding-bottom: 48px; }
  .hpc-obraz { height: 604px; }
  .hpc-tel { transform: translateX(-50%) scale(0.88); transform-origin: top center; }
  .hpc-popis { display: none; }
  .hpc-tl .tl { width: 100%; }
}

/* ---------- telefon s chatem (ilustrace aplikace) ---------- */
.chu { --chu-tmava: #191411; --chu-krem: #FFF8ED; --chu-text: #191411; --chu-sedy: #5C5046; --chu-linka: #EADCC6; --chu-cervena: #C0301A;
  --chu-zluta: #FFD600; --chu-pod: #F1E4CF; --chu-ok: #1C7A34; --chu-ne: #B3261E;
  position: relative; display: flex; flex-direction: column; width: 390px; height: 844px; overflow: hidden; background: var(--chu-krem); color: var(--chu-text);
  font: 15px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-align: left; -webkit-font-smoothing: antialiased; }
.chu svg { display: block; flex: 0 0 auto; }
.chu-top { display: flex; align-items: center; gap: 8px; min-height: 62px; padding: 8px 8px 8px 4px; border-bottom: 1px solid var(--chu-linka); background: #fff; }
.chu-ik { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--chu-text); }
.chu-top-t { flex: 1; min-width: 0; }
.chu-top-t b { display: block; font-size: 16px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chu-top-t small { display: block; font-size: 12.5px; color: var(--chu-sedy); }
.chu-zpravy { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 12px 12px 10px; overflow: hidden; }
.chu-den { align-self: center; padding: 3px 10px; border-radius: 999px; background: var(--chu-pod); font-size: 11.5px; font-weight: 800; color: var(--chu-sedy); }
.chu-system { align-self: center; max-width: 90%; padding: 4px 12px; border: 1px dashed #D9CFC2; border-radius: 999px; font-size: 12px; color: var(--chu-sedy); text-align: center; }
.chu-zp { display: flex; align-items: flex-end; gap: 8px; max-width: 90%; }
.chu-zp.ja { align-self: flex-end; flex-direction: row-reverse; }
.chu-av { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--chu-pod); font-size: 11px; font-weight: 800; }
.chu-obsah { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ja .chu-obsah { align-items: flex-end; }
.chu-bub { padding: 7px 12px 6px; border: 1px solid var(--chu-linka); border-radius: 18px 18px 18px 6px; background: #fff; font-size: 14.5px; line-height: 1.42; }
.ja .chu-bub { border-color: var(--chu-tmava); border-radius: 18px 18px 6px 18px; background: var(--chu-tmava); color: var(--chu-krem); }
.chu-kdo { display: block; margin-bottom: 1px; font-size: 12px; font-weight: 800; color: var(--chu-cervena); }
.chu-meta { display: block; margin-top: 2px; font-size: 11px; color: var(--chu-sedy); text-align: right; }
.ja .chu-meta { color: #D9CFC3; }
/* karty v chatu: akce s Přijdu / Nepřijdu, fotogalerie */
.chu-karta { display: block; width: 252px; margin-top: 4px; overflow: hidden; border: 1px solid var(--chu-linka); border-radius: 16px; background: #fff; }
.chu-karta-hl { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.chu-typ { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chu-cervena); }
.chu-karta-hl b { display: block; font-size: 14.5px; line-height: 1.25; }
.chu-karta-hl small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--chu-sedy); }
.chu-dl { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; width: 46px; height: 52px; border-radius: 12px; background: var(--chu-tmava); color: #fff; line-height: 1.05; }
.chu-dl small { font-size: 10px; font-weight: 800; color: var(--chu-zluta); }
.chu-dl b { font-size: 19px; font-weight: 800; }
.chu-karta-tl { display: flex; align-items: center; gap: 6px; padding: 0 12px 12px; }
.chu-karta-tl small { margin-left: auto; font-size: 12px; color: var(--chu-sedy); }
.chu-tl { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.chu-tl.ano { background: var(--chu-ok); color: #fff; box-shadow: 0 0 0 3px #CDE9D3; }
.chu-tl.ne { border: 1.5px solid #E3B3AE; background: #fff; color: var(--chu-ne); }
.chu-foto3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.chu-foto3 span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #E9DCCB; color: #8A7766; }
.chu-foto3 span:nth-child(2) { background: #DDCDB8; }
.chu-foto3 span:nth-child(3) { background: #D2C0A8; }
.chu-karta-pata { display: block; padding: 8px 12px 10px; font-size: 13px; line-height: 1.35; }
.chu-karta-pata b { display: block; font-size: 14px; }
.chu-karta-pata small { color: var(--chu-sedy); }
/* chat u akce: akce nahoře s počty a odpovědí */
.chu-akce { display: flex; align-items: center; gap: 12px; margin: 10px 12px 0; padding: 12px; border: 1px solid var(--chu-linka); border-radius: 16px; background: #fff; }
.chu-akce .chu-dl { width: 52px; height: 58px; }
.chu-akce-t { flex: 1; min-width: 0; }
.chu-akce-t b { display: block; font-size: 15.5px; }
.chu-akce-t small { display: block; font-size: 12.5px; color: var(--chu-sedy); }
.chu-pocty { display: flex; gap: 6px; margin-top: 6px; }
.chu-pocty span { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.chu-pocty .ano { background: #E2F1E5; color: #145A26; }
.chu-pocty .ne { background: #FBE4DF; color: var(--chu-ne); }
.chu-odpoved { display: flex; align-items: center; gap: 6px; padding: 10px 12px 0; }
.chu-odpoved small { margin-left: 4px; font-size: 12px; color: var(--chu-sedy); }
/* psaní a lišta aplikace */
.chu-psani { display: flex; align-items: center; gap: 8px; padding: 8px 10px 12px; border-top: 1px solid var(--chu-linka); background: #fff; }
.chu-plus, .chu-poslat { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; }
.chu-plus { background: var(--chu-pod); color: var(--chu-text); }
.chu-poslat { background: var(--chu-zluta); color: var(--chu-text); }
.chu-pole { flex: 1; min-width: 0; padding: 10px 15px; border: 1.5px solid var(--chu-linka); border-radius: 22px; background: var(--chu-krem); font-size: 15px; color: #8A7766; }
.chu-lista { display: flex; padding: 6px 4px 12px; border-top: 1px solid var(--chu-linka); background: #fff; box-shadow: 0 -6px 20px rgba(25, 20, 17, 0.06); }
.chu-lista > span { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 0; font-size: 11px; font-weight: 600; color: var(--chu-sedy); }
.chu-lista i { display: flex; padding: 4px 16px; border-radius: 999px; }
.chu-lista svg { width: 22px; height: 22px; }
.chu-lista .on { color: var(--chu-text); font-weight: 800; }
.chu-lista .on i { background: var(--chu-zluta); }
.chu-odznak { position: absolute; top: -2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: #F4432B; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 14px; text-align: center; }

/* ---------- /administrace: modul Chat (okno prohlížeče s místnostmi a konverzací, telefon s chatem u akce) ---------- */
.admst-nove { display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 99px; background: var(--zluta); color: var(--kava); font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: none; vertical-align: middle; }
.admst-chat-tarif { margin-top: 18px; font-size: 14.5px; color: var(--text-3); }
.admch-okno-in { display: grid; grid-template-columns: 210px minmax(0, 1fr); width: 603px; height: 377px; background: #FFFDF8; color: var(--kava); font: 12px/1.35 Inter, system-ui, sans-serif; text-align: left; }
.admch-bok { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-right: 1px solid var(--linka); background: #fff; }
.admch-bok h5 { margin: 0 0 6px; font-size: 13px; font-weight: 800; }
.admch-sk { margin: 8px 4px 2px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.admch-m { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; }
.admch-m.on { background: var(--krem-2); }
.admch-av { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--krem-2); font-size: 10.5px; font-weight: 800; }
.admch-av.tym { background: var(--kava); color: var(--zluta); }
.admch-av.m { background: #DCE7F7; color: #14509C; }
.admch-av.z { background: #F8E1DC; color: #A3271A; }
.admch-av.akce { border-radius: 8px; }
.admch-m b { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admch-m small { display: block; font-size: 10px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admch-n { min-width: 16px; padding: 1px 5px; border-radius: 99px; background: var(--cervena); color: #fff; font-size: 9.5px; font-weight: 800; text-align: center; }
.admch-hlavni { display: flex; flex-direction: column; min-width: 0; }
.admch-hl { padding: 10px 14px; border-bottom: 1px solid var(--linka); background: #fff; }
.admch-hl b { font-size: 13px; }
.admch-hl small { margin-left: 6px; font-size: 10.5px; color: var(--text-3); }
.admch-zpr { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 10px 14px; overflow: hidden; }
.admch-b { align-self: flex-start; max-width: 70%; padding: 7px 10px; border: 1px solid var(--linka); border-radius: 12px 12px 12px 4px; background: #fff; font-size: 11px; line-height: 1.4; }
.admch-b i { display: block; font-size: 9.5px; font-style: normal; font-weight: 800; color: var(--cervena-text); }
.admch-b.ja { align-self: flex-end; border-color: var(--kava); border-radius: 12px 12px 4px 12px; background: var(--kava); color: #fff; }
.admch-sys { align-self: center; padding: 3px 10px; border-radius: 99px; background: var(--krem-2); font-size: 9.5px; color: var(--text-2); }
.admch-karta { align-self: flex-start; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; max-width: 74%; padding: 8px; border: 1px solid var(--linka); border-radius: 12px; background: #fff; }
.admch-dl { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 38px; border-radius: 8px; background: var(--kava); color: #fff; line-height: 1; }
.admch-dl small { font-size: 8px; font-weight: 800; color: var(--zluta); }
.admch-dl b { font-size: 15px; }
.admch-karta em { display: block; font-size: 8.5px; font-style: normal; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cervena-text); }
.admch-karta strong { display: block; font-size: 11.5px; }
.admch-karta span { font-size: 10px; color: var(--text-3); }
.admch-tl { display: flex; gap: 5px; margin-top: 5px; }
.admch-tl u { padding: 3px 9px; border: 1px solid var(--linka-2); border-radius: 99px; font-size: 9.5px; font-weight: 800; text-decoration: none; color: var(--kava); }
.admch-tl u.on { border-color: #1C7A34; background: #1C7A34; color: #fff; }
.admch-psani { display: flex; align-items: center; gap: 8px; margin: 0 14px 12px; padding: 6px 6px 6px 8px; border: 1px solid var(--linka-2); border-radius: 99px; background: #fff; font-size: 11px; color: var(--text-3); }
.admch-psani .plus { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--krem-2); color: var(--kava); font-weight: 800; }
.admch-psani .posl { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: auto; border-radius: 50%; background: var(--zluta); color: var(--kava); }
.admch-tel-in { width: 204px; height: 441px; overflow: hidden; border-radius: 26px; }
.admch-tel-in > .chu { transform: scale(0.523); transform-origin: 0 0; }