:root {
  /* Znacka Zpovednice jako darek: hluboka svestkova fialova. Odstin staci
     prepsat tady, zbytek aplikace bere barvy odsud. */
  --znacka-tmava: #4a2b63;
  --znacka: #643d87;
  --znacka-jasna: #8a63ad;
  --gradient: linear-gradient(135deg, #553074 0%, #643d87 58%, #8a63ad 100%);
  --ink: #251b2b;
  --muted: #6d6076;
  --line: #e9e0ef;
  --bg: #faf8fc;
  --akcent-soft: #f3ecf9;
  --ok: #1a7f4b; --ok-soft: #e5f5ec;
  --warn: #a2620b; --warn-soft: #fdf3e2;
  --risk: #b3372e; --risk-soft: #fbeae8;
  --stin: 0 8px 28px rgba(42, 18, 62, .10);
  --stin-mekky: 0 2px 10px rgba(42, 18, 62, .07);
  --radius: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

header.horni {
  /* jednolita znackova fialova = presne theme-color, takze na iPhonu
     navazuje lista prohlizece bez svu */
  background: var(--znacka);
  color: #fff;
  padding: .6rem 1rem .55rem;
  padding-top: calc(.6rem + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
header.horni .logo { width: 32px; height: 32px; flex-shrink: 0;
  background-image: url('/static/ikona.svg?v=1.5.1');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 8px; }
header.horni .nazvy { line-height: 1.2; }
header.horni .app-name { font-weight: 700; font-size: .98rem; letter-spacing: .01em; }
header.horni .stavova { font-size: .76rem; opacity: .85; min-height: 1em; }
header.horni .odkazy { margin-left: auto; font-size: .84rem; display: flex; gap: .35rem; align-items: baseline; white-space: nowrap; }
header.horni a { color: #fff; opacity: .92; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 1px; }
header.horni a:hover { opacity: 1; }

.karta {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--stin);
  padding: 1.2rem 1.15rem;
}

button { font-family: inherit; }
button.hlavni, button.ok, button.rec, button.tichy, button.obrys {
  border: 0;
  border-radius: 999px;
  padding: .68rem 1.3rem;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .18s ease, opacity .18s ease;
}
button.hlavni:active, button.ok:active, button.rec:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; }
button.hlavni { background: var(--gradient); color: #fff; box-shadow: 0 4px 14px rgba(100, 61, 135, .30); }
button.hlavni:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(100, 61, 135, .42); }
button.ok { background: var(--ok); color: #fff; box-shadow: 0 4px 14px rgba(26, 127, 75, .28); }
button.rec { background: var(--risk-soft); color: var(--risk); border: 1px solid var(--risk); }
button.tichy { background: transparent; color: var(--muted); font-weight: 500; font-size: .82rem; padding: .4rem .7rem; }
button.obrys { background: #fff; color: var(--znacka); border: 1px solid var(--line); box-shadow: var(--stin-mekky); }

input.pole, select.pole, textarea.pole {
  width: 100%;
  padding: .62rem .8rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid #ddd0e8;
  border-radius: 11px;
  background: #fefdff;
  transition: border-color .15s, box-shadow .15s;
}
textarea.pole { resize: vertical; min-height: 4.6rem; line-height: 1.45; }
/* iOS jinak obsah date inputu vycentruje a rozhodi zarovnani karty */
input.pole[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  min-height: 2.9rem;
}
input.pole[type="date"]::-webkit-date-and-time-value { text-align: left; }
input.pole:focus, select.pole:focus, textarea.pole:focus {
  outline: none;
  border-color: var(--znacka);
  box-shadow: 0 0 0 3px rgba(100, 61, 135, .14);
}

.stitek {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .12rem .6rem;
  vertical-align: middle;
  margin-left: .35rem;
}
.stitek.presne { background: var(--ok-soft); color: var(--ok); }
.stitek.riziko { background: var(--risk-soft); color: var(--risk); }
.stitek.varovani { background: var(--warn-soft); color: var(--warn); }
.stitek.ok { background: var(--ok-soft); color: var(--ok); }
.stitek.info { background: var(--akcent-soft); color: var(--znacka); }

.vyber-sablon { display: flex; flex-direction: column; gap: .55rem;
                margin-top: .4rem; }
.vyber-sablon button { display: flex; align-items: center; gap: .75rem;
  text-align: left; border: 1px solid var(--line); background: #fff;
  border-radius: 14px; padding: .72rem .9rem; cursor: pointer;
  box-shadow: var(--stin-mekky); font-family: inherit;
  transition: border-color .15s, box-shadow .15s; }
.vyber-sablon button:hover { border-color: var(--znacka);
  box-shadow: 0 4px 14px rgba(100, 61, 135, .18); }
.vyber-sablon .ik { font-size: 1.4rem; flex-shrink: 0; }
.vyber-sablon .naz { font-weight: 700; font-size: .95rem; display: block; }
.vyber-sablon .pop { font-size: .78rem; color: var(--muted); display: block;
                     margin-top: .1rem; }

.bublina {
  max-width: 86%;
  border-radius: 15px;
  padding: .55rem .8rem;
  margin-bottom: .55rem;
  line-height: 1.42;
  font-size: .95rem;
  word-wrap: break-word;
  white-space: pre-wrap;
  animation: bublina-nastup .22s ease-out;
}
@keyframes bublina-nastup {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.bublina .kdo {
  font-size: .64rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .14rem;
}
.bublina.agent { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: var(--stin-mekky); }
.bublina.uzivatel { background: linear-gradient(160deg, #f2eaf8, #e9ddf3); border: 1px solid #d5c2e5; margin-left: auto; border-bottom-right-radius: 5px; }
.bublina.prubezna { opacity: .6; font-style: italic; }
.bublina.chybova { background: var(--risk-soft); border: 1px solid var(--risk); }

.mic-indikator {
  display: none;
  align-items: center;
  gap: .45rem;
  justify-content: center;
  font-size: .85rem;
  color: var(--risk);
  margin-bottom: .45rem;
  font-weight: 600;
}
.mic-indikator.aktivni { display: flex; }
.tecka { width: 10px; height: 10px; border-radius: 50%; background: var(--risk); animation: pulz 1.1s infinite; }
@keyframes pulz { 50% { opacity: .2; transform: scale(.8); } }

.panel-slotu {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  padding: .25rem 0 .55rem;
  font-size: .74rem;
  color: var(--muted);
}
.panel-slotu .pruh { height: 7px; background: #e3d6ee; border-radius: 99px; overflow: hidden; margin-top: .3rem; }
.panel-slotu .pruh > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--znacka), #1a9a63); transition: width .45s ease; border-radius: 99px; }

.karta.zvyraznena { outline: 2px solid var(--znacka); }