:root {
  --zelena: #1f7a4d;
  --zelena-svetla: #e8f4ee;
  --pozadi: #fbfaf8;
  --panel: #ffffff;
  --text: #1a1a1a;
  --tlumene: #6b6b6b;
  --linka: #e3e0da;
  --chyba: #b3261e;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zelena: #4ea87a;
    --zelena-svetla: #1c2e25;
    --pozadi: #141513;
    --panel: #1e201d;
    --text: #f0efec;
    --tlumene: #9a9a95;
    --linka: #2f322e;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--pozadi);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  overscroll-behavior-y: none;
}

.screen { height: 100dvh; display: flex; flex-direction: column; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── přihlášení ─────────────────────────────────────────── */

#login { align-items: center; justify-content: center; padding: 24px; }

.card {
  width: 100%; max-width: 340px;
  background: var(--panel);
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
}

.card h1 { margin: 0; font-size: 1.5rem; }
.card .muted { margin: -10px 0 6px; color: var(--tlumene); font-size: .9rem; }

label { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; color: var(--tlumene); }

input, textarea {
  font: inherit;
  color: var(--text);
  background: var(--pozadi);
  border: 1px solid var(--linka);
  border-radius: 10px;
  padding: 11px 12px;
  width: 100%;
}

input:focus, textarea:focus { outline: 2px solid var(--zelena); outline-offset: -1px; }

button {
  font: inherit; cursor: pointer;
  background: var(--zelena); color: #fff;
  border: 0; border-radius: 10px; padding: 12px;
}

button:disabled { opacity: .5; cursor: default; }
button.link { background: none; color: var(--tlumene); padding: 4px 8px; font-size: .85rem; }

.error { color: var(--chyba); font-size: .85rem; margin: 0; }

/* ── aplikace ───────────────────────────────────────────── */

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid var(--linka);
  background: var(--panel);
  font-size: .9rem;
  flex: 0 0 auto;
}

#chat {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 12px;
}

.zprava {
  max-width: min(88%, 640px);
  padding: 10px 13px;
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.zprava.user {
  align-self: flex-end;
  background: var(--zelena);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.zprava.assistant {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--linka);
  border-bottom-left-radius: 4px;
}

.zprava.chyba { border-color: var(--chyba); color: var(--chyba); }

/* Tabulky od Claude jsou široké — ať scrollují uvnitř bubliny, ne stránkou. */
.zprava table { border-collapse: collapse; font-size: .85rem; margin: 6px 0; }
.zprava th, .zprava td { border: 1px solid var(--linka); padding: 4px 8px; text-align: left; }
.zprava .tabulka-obal { overflow-x: auto; max-width: 100%; }
.zprava code { background: var(--zelena-svetla); padding: 1px 5px; border-radius: 5px; font-size: .85em; }

.ceka { display: flex; gap: 5px; align-items: center; color: var(--tlumene); }
.ceka i {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; animation: pulz 1.3s infinite;
}
.ceka i:nth-child(2) { animation-delay: .18s; }
.ceka i:nth-child(3) { animation-delay: .36s; }

@keyframes pulz {
  0%, 60%, 100% { opacity: .25; }
  30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ceka i { animation: none; opacity: .6; }
}

/* ── psací pole ─────────────────────────────────────────── */

#composer {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linka);
  background: var(--panel);
}

#composer textarea {
  flex: 1; resize: none; max-height: 140px; border-radius: 20px;
}

#foto-btn {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--linka); border-radius: 50%;
  color: var(--tlumene); cursor: pointer;
}

#send {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
}