/*
 * Okno chatu s AI asistentem Marty (`components/layout/Chat.jsx`,
 * chování v `public/assets/chat.js`).
 *
 * Značkové hodnoty webu: modrá #073a8d (hover #0852ce), černá, šedý text
 * #707070, plocha #f2f2f2, písmo Barlow; `html` má 62,5 %, 1rem = 10 px.
 * Vše pod `.chat`, aby se to nepotkalo s `app.css`.
 *
 * Vrstvení: zavřený chat (jen tlačítko) má 2000 — nad hlavičkou stránky
 * (`.main-header` 100, přes kterou by jinak tlačítko nešlo stisknout), pod
 * sticky hlavičkou webu (3000). Otevřené okno má 3500, tedy nad hlavičkou
 * webu: na nižším displeji by ji jinak okno podjelo a dialog by byl
 * useknutý (připomínka Vojty 1. 10. 2026). Pod modály (10000), galerií
 * (10050) a cookie lištou (9999999998) zůstává vždy.
 */

.chat {
  --chat-modra: #073a8d;
  --chat-modra-svetla: #0852ce;
  --chat-plocha: #f2f2f2;
  --chat-linka: #e2e2e2;
  --chat-tlumeny: #5c5c5c;
  --chat-chyba: #b3261e;

  bottom: 20px;
  font-family: Barlow, sans-serif;
  font-size: 1.5rem;
  line-height: 1.45;
  position: fixed;
  right: 20px;
  z-index: 2000;
}

.chat--otevreny {
  z-index: 3500;
}

/* ---------- spouštěč ---------- */

.chat__spoustec {
  align-items: center;
  background: var(--chat-modra);
  border: 0;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  color: #fff;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px 0 16px;
  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.chat__spoustec:hover,
.chat__spoustec:focus-visible {
  background: var(--chat-modra-svetla);
  transform: translateY(-1px);
}

.chat__spoustec:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.chat__ikona {
  flex: none;
  height: 22px;
  width: 22px;
}

.chat--otevreny .chat__spoustec {
  display: none;
}

/* ---------- okno ---------- */

.chat__okno {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  /* nikdy vyšší než displej: hlavička webu má 130 px, pod ní zůstává mezera */
  height: min(620px, calc(100vh - 150px));
  min-height: 360px;
  overflow: hidden;
  width: min(380px, calc(100vw - 40px));
}

.chat__okno[hidden] {
  display: none;
}

.chat__hlava {
  align-items: center;
  background: #000;
  color: #fff;
  display: flex;
  flex: none;
  justify-content: space-between;
  padding: 14px 16px 14px 20px;
}

.chat__jmeno {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.chat__role {
  color: #bfbfbf;
  font-size: 1.3rem;
}

.chat__zavrit {
  background: none;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 2.6rem;
  height: 40px;
  line-height: 1;
  width: 40px;
}

.chat__zavrit:hover,
.chat__zavrit:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

.chat__upozorneni {
  background: #fff8e1;
  border-bottom: 1px solid #f0e0a0;
  color: #000;
  flex: none;
  font-size: 1.3rem;
  margin: 0;
  padding: 8px 20px;
}

/* ---------- zprávy ---------- */

.chat__zpravy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 16px 16px 8px;
  scroll-behavior: smooth;
}

.chat__zprava {
  border-radius: 14px;
  font-size: 1.5rem;
  max-width: 85%;
  padding: 10px 14px;
  white-space: pre-line;
  word-wrap: break-word;
}

.chat__zprava--marty {
  align-self: flex-start;
  background: var(--chat-plocha);
  border-bottom-left-radius: 4px;
  color: #000;
}

.chat__zprava--vy {
  align-self: flex-end;
  background: var(--chat-modra);
  border-bottom-right-radius: 4px;
  color: #fff;
}

.chat__zprava--chyba {
  align-self: stretch;
  background: #fdecea;
  border-left: 3px solid var(--chat-chyba);
  border-radius: 4px;
  color: #000;
  max-width: none;
}

.chat__zprava a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.chat__pise {
  align-self: flex-start;
  color: var(--chat-tlumeny);
  font-size: 1.3rem;
  padding: 4px 14px;
}

.chat__pise::after {
  animation: chat-tecky 1.2s steps(4, end) infinite;
  content: '';
  display: inline-block;
  width: 1.2em;
}

@keyframes chat-tecky {
  to {
    content: '…';
  }
}

.chat__nabidka {
  align-self: flex-start;
  background: #fff;
  border: 2px solid var(--chat-modra);
  border-radius: 50px;
  color: var(--chat-modra);
  cursor: pointer;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 7px 16px;
}

.chat__nabidka:hover,
.chat__nabidka:focus-visible {
  background: var(--chat-modra);
  color: #fff;
}

/* ---------- formuláře ---------- */

.chat__brana,
.chat__psani,
.chat__kontakt {
  border-top: 1px solid var(--chat-linka);
  flex: none;
  padding: 12px 16px 14px;
}

.chat__brana[hidden],
.chat__psani[hidden],
.chat__kontakt[hidden] {
  display: none;
}

.chat__popisek {
  color: #000;
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.chat__napoveda {
  color: var(--chat-tlumeny);
  font-size: 1.3rem;
  margin: 0 0 10px;
}

.chat__radek {
  align-items: flex-end;
  display: flex;
  gap: 8px;
}

.chat__radek--akce {
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.chat__vstup {
  background: #fff;
  border: 1px solid #8a8a8a;
  border-radius: 8px;
  color: #000;
  flex: 1 1 auto;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 0 0 8px;
  min-height: 42px;
  min-width: 0;
  padding: 9px 12px;
  width: 100%;
}

.chat__radek .chat__vstup {
  margin: 0;
}

.chat__vstup:focus-visible {
  border-color: var(--chat-modra);
  box-shadow: 0 0 0 2px rgba(7, 58, 141, 0.25);
  outline: none;
}

.chat__textarea {
  max-height: 120px;
  resize: none;
}

.chat__tlacitko {
  background: var(--chat-modra);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  flex: none;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  min-height: 42px;
  padding: 0 16px;
}

.chat__tlacitko:hover,
.chat__tlacitko:focus-visible {
  background: var(--chat-modra-svetla);
}

.chat__tlacitko:disabled {
  cursor: progress;
  opacity: 0.6;
}

.chat__odkaz {
  background: none;
  border: 0;
  color: var(--chat-modra);
  cursor: pointer;
  font: inherit;
  font-size: 1.4rem;
  text-decoration: underline;
}

.chat__chyba {
  color: var(--chat-chyba);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 6px 0 0;
}

.chat__chyba[hidden] {
  display: none;
}

/* ---------- mobil: okno přes celý displej ---------- */

@media (max-width: 600px) {
  /* otevřené okno jde přes celý displej */
  .chat--otevreny {
    bottom: 0;
    right: 0;
  }

  .chat__okno {
    border-radius: 0;
    height: 100dvh;
    max-height: none;
    width: 100vw;
  }
}

@media (max-width: 420px) {
  .chat__spoustec-text {
    display: none;
  }

  .chat__spoustec {
    border-radius: 50%;
    height: 56px;
    justify-content: center;
    padding: 0;
    width: 56px;
  }
}

@media print {
  .chat {
    display: none;
  }
}