/* ==========================================================================
   JN: DIKTOVACÍ ŘADA CORALU
   Tři ikony pod polem, karta s QR kódem a stavový řádek. Modul je součástí
   pluginu, takže ho má každá aplikace z Coralu bez jediného řádku kódu navíc.

   Proti řadě z Werku se liší třemi věcmi, které si Ondra vyžádal 9. 9. 2026:
     1. na řádku nejsou popisky, jen tři ikony,
     2. karta s kódem leží POD řadou v toku stránky, nikdy nepřekrývá pole,
     3. bublina s vysvětlením je naše, ne prohlížečový `title`.

   Barvy se berou z aplikace. Fallbacky drží vzhled i na holé stránce.
   Bílý text tu není nikde, bílé hrany ani bílé inset linky taky ne a fokus
   se kreslí barvou, ne prohlížečovým kroužkem.
   ========================================================================== */

.coral-dikt {
  --coral-dikt-akcent: var(--coral-akcent, var(--werk-uhlik, #E8823C));
  --coral-dikt-text: var(--coral-text, var(--werk-text, #EDE6DC));
  --coral-dikt-tichy: var(--coral-text-tichy, var(--werk-text-tichy, #A79E93));
  --coral-dikt-hrana: var(--coral-hrana, var(--werk-hrana, rgba(226, 196, 160, .14)));
  --coral-dikt-podklad: var(--coral-kamen-3, var(--werk-kamen-3, #262C34));
  --coral-dikt-hloubka: var(--coral-kamen-1, var(--werk-kamen-1, #171B21));
  --coral-dikt-radius: var(--coral-r-pole, var(--werk-r-pole, 10px));
  display: block;
  margin: 8px 0 0;
  font-size: .875rem;
  color: var(--coral-dikt-tichy);
  /* Karta se skládá podle šířky SVÉHO MÍSTA, ne podle šířky okna. Změřeno
     9. 9. 2026: v postranním sloupci asistenta je na 1280 px místa jen 330 px
     a dvousloupcová karta se tam mačkala, přestože okno bylo široké. */
  container-type: inline-size;
}

.coral-dikt *,
.coral-dikt *::before,
.coral-dikt *::after { box-sizing: border-box; }

.coral-dikt [hidden] { display: none !important; }
/* Aplikace smí kartu a stav přesunout pod pole mimo řadu; skrytí platí i tam. */
.coral-dikt__karta[hidden], .coral-dikt__stav[hidden] { display: none !important; }

/* ---- řada tlačítek ------------------------------------------------------ */

.coral-dikt__rada {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.coral-dikt__tl {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--coral-dikt-radius);
  border: 1px solid var(--coral-dikt-hrana);
  background: color-mix(in srgb, var(--coral-dikt-podklad) 72%, transparent);
  color: var(--coral-dikt-tichy);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s cubic-bezier(.22, 1, .36, 1),
              border-color .18s cubic-bezier(.22, 1, .36, 1),
              background-color .18s cubic-bezier(.22, 1, .36, 1);
}

/* Ikona nesvítí, dokud se nenahrává. Klidový stav je tichý, ne barevný.
   SV 35: najetí jen podbarví, barvu ikony nemění (DNA: najetí bez přebarvení)
   a na dotykových zařízeních po klepnutí nezůstává viset. */
@media (hover: hover) {
  .coral-dikt__tl:hover {
    border-color: color-mix(in srgb, var(--coral-dikt-akcent) 55%, transparent);
    background: color-mix(in srgb, var(--coral-dikt-akcent) 12%, transparent);
  }
}
.coral-dikt__tl:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--coral-dikt-akcent) 55%, transparent);
  background: color-mix(in srgb, var(--coral-dikt-akcent) 12%, transparent);
}

/* SV 36: kroužek jen při ovládání klávesnicí, po klepnutí myší ne. */
.coral-dikt__tl:focus { outline: none; }
.coral-dikt__tl:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral-dikt-akcent) 24%, transparent);
}

/* Obal ikony i ikona mají jednu velikost, --coral-dikt-ikona (web ji smí
   nastavit kdekoli nad polem). Obal se navíc roztáhne podle ikony, takže
   ikona zůstane přesně uprostřed, i když web zvětší jen svg (Světlina 52:
   obal 18 px a ikona 20 px posunuly ikonu o 1 px doprava dolů). */
.coral-dikt__tl .coral-dikt__ikona,
.coral-dikt__tl svg {
  width: var(--coral-dikt-ikona, 18px);
  height: var(--coral-dikt-ikona, 18px);
  flex: 0 0 auto;
  pointer-events: none;
}
.coral-dikt__tl i.coral-dikt__ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: var(--coral-dikt-ikona, 18px);
  min-height: var(--coral-dikt-ikona, 18px);
}

.coral-dikt__tl svg { stroke-width: 1.75; }

/* Nahrávající tlačítko má akcentovou výplň a tichý tep. Nic jiného v řadě
   nesvítí, takže je na první pohled poznat, co zrovna poslouchá. */
.coral-dikt__tl.je-zapnuto {
  color: var(--coral-dikt-akcent);
  border-color: color-mix(in srgb, var(--coral-dikt-akcent) 72%, transparent);
  background: color-mix(in srgb, var(--coral-dikt-akcent) 22%, transparent);
}

/* Tep je klidný dech na místě: kroužek má tvar tlačítka (i hladký roh)
   a jen zesílí a zeslábne, neroste. Světlina 159, Ondra 6. 10. 2026:
   „To pulzování toho tlačítka vypadá trochu divně.“ */
.coral-dikt__tep {
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  corner-shape: inherit;
  border: 1px solid color-mix(in srgb, var(--coral-dikt-akcent) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}

.coral-dikt__tl.je-zapnuto .coral-dikt__tep {
  animation: coral-dikt-tep 2600ms ease-in-out infinite;
}

@keyframes coral-dikt-tep {
  0%, 100% { opacity: .2; }
  50%      { opacity: .75; }
}

.coral-dikt__tl.je-pracuje { opacity: .7; cursor: progress; }

/* Wispr Flow se přihlásil sám: ikona to tiše ukáže, žádná vrstva navíc.
   Ondra 9. 9. 2026: „když reálně máš Wispr Flow, tak ti to ani nedá info,
   že hele, prostě se to zapne." */
.coral-dikt__tl.je-pozname {
  color: var(--coral-dikt-akcent);
  border-color: color-mix(in srgb, var(--coral-dikt-akcent) 46%, transparent);
}

/* ---- popisky: naše bublina, ne prohlížečový title ----------------------- */
/* SV 36: schovaná bublina je display: none, ne jen průhledná; průhledná
   pořád zabírala místo, přečnívala z okraje a prohlížeč pak při psaní
   odsunul obsah do strany. Kde běží jednotné bublinky Coralu (coral-tip,
   třída coral-tip-title na body), kreslí popisek ony a tahle se nepoužije. */
.coral-dikt__bublina {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 5;
  min-width: max-content;
  max-width: 15rem;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--coral-dikt-akcent) 34%, transparent);
  background: color-mix(in srgb, var(--coral-dikt-hloubka) 96%, transparent);
  color: var(--coral-dikt-text);
  font-size: .75rem;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

.coral-dikt__tl:hover .coral-dikt__bublina,
.coral-dikt__tl:focus-visible .coral-dikt__bublina,
.coral-dikt__tl.je-bublina .coral-dikt__bublina {
  display: block;
  opacity: 1;
  transform: translate(-50%, 0);
}
.coral-tip-title .coral-dikt__bublina { display: none !important; }

/* Na dotykovém přístroji se bublina neukazuje vůbec: nemá kde vzniknout
   a jen by zakrývala pole, přesně to, co Ondra vytkl. */
@media (pointer: coarse) {
  .coral-dikt__bublina { display: none; }
}

/* ---- hláška nad polem --------------------------------------------------- */
/* Světlina 140 (Ondra 1. 10. 2026: „by se mělo objevit NAD tím ne pod tím
   protože kvůli tomu že se to objeví pod tím tak to ovládací tlačítka
   vyskočejí nahoru což je otravný."). Hláška je plovoucí pilulka mimo tok
   stránky, takže nic neodsune. Místo nad kotvou (pole, skladač zprávy,
   předek s data-coral-dikt-nad) jí spočítá skript; když nad kotvou v okně
   není místo, sedne pod ni a dostane je-pod. */
.coral-dikt__stav {
  position: absolute;
  z-index: 40;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(26rem, calc(100vw - 8px));
  margin: 0;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--coral-dikt-akcent) 30%, transparent);
  background: color-mix(in srgb, var(--coral-dikt-hloubka) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .18);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: var(--coral-dikt-text);
  white-space: normal;
  pointer-events: none;
  transform-origin: left bottom;
  animation: coral-dikt-stav-vjezd 200ms cubic-bezier(.22, 1, .36, 1);
  transition: opacity 150ms ease, transform 150ms ease;
}

.coral-dikt__stav.je-pod {
  transform-origin: left top;
  animation-name: coral-dikt-stav-vjezd-pod;
}

.coral-dikt__stav.je-mizi { opacity: 0; transform: translateY(3px) scale(.97); }
.coral-dikt__stav.je-pod.je-mizi { transform: translateY(-3px) scale(.97); }

@keyframes coral-dikt-stav-vjezd {
  from { opacity: 0; transform: translateY(4px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes coral-dikt-stav-vjezd-pod {
  from { opacity: 0; transform: translateY(-4px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.coral-dikt__stav[data-druh="hlas"] {
  color: var(--coral-dikt-akcent);
  border-color: color-mix(in srgb, var(--coral-dikt-akcent) 46%, transparent);
}
.coral-dikt__stav[data-druh="chyba"] {
  color: var(--coral-hori, var(--werk-hori, #E2574A));
  border-color: color-mix(in srgb, var(--coral-hori, var(--werk-hori, #E2574A)) 46%, transparent);
}

.coral-dikt__stav .coral-dikt__ikona,
.coral-dikt__stav svg { width: 14px; height: 14px; flex: 0 0 auto; }

.coral-dikt__kurzor {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

.coral-dikt__stav[data-druh="hlas"] .coral-dikt__kurzor {
  animation: coral-dikt-dech 1400ms ease-in-out infinite;
}

@keyframes coral-dikt-dech {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ---- karta s QR kódem: v toku POD řadou, nikdy přes pole ---------------- */

.coral-dikt__karta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 10px 0 0;
  padding: 14px;
  border-radius: calc(var(--coral-dikt-radius) + 4px);
  border: var(--coral-hrana-hlavni, 2px) solid color-mix(in srgb, var(--coral-dikt-akcent) 26%, transparent);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--coral-dikt-akcent) 10%, transparent), transparent 62%),
    color-mix(in srgb, var(--coral-dikt-hloubka) 88%, transparent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
}

.coral-dikt__qr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
  margin: 0;
  padding: 8px;
  border-radius: var(--coral-dikt-radius);
  /* Světlý podklad je nutnost, ne volba: čtečka telefonu potřebuje tmavé
     body na světlé ploše. Není to bílá plocha rozhraní, je to sám kód. */
  background: #ffffff;
}

.coral-dikt__qr svg { display: block; width: 100%; height: 100%; }
.coral-dikt__qr.je-bez-kodu { background: color-mix(in srgb, var(--coral-dikt-podklad) 70%, transparent); }

.coral-dikt__blok { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.coral-dikt__nadpis {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--coral-dikt-text);
}

.coral-dikt__veta { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--coral-dikt-tichy); }

.coral-dikt__odkaz {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--coral-dikt-hrana);
  background: color-mix(in srgb, var(--coral-dikt-podklad) 60%, transparent);
  color: var(--coral-dikt-tichy);
  font-size: .75rem;
  line-height: 1.35;
  word-break: break-all;
}

.coral-dikt__akce { display: flex; flex-wrap: wrap; gap: 8px; }

.coral-dikt__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--coral-dikt-radius);
  border: 1px solid var(--coral-dikt-hrana);
  background: color-mix(in srgb, var(--coral-dikt-podklad) 76%, transparent);
  color: var(--coral-dikt-text);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color .18s cubic-bezier(.22, 1, .36, 1),
              background-color .18s cubic-bezier(.22, 1, .36, 1);
}

.coral-dikt__btn:hover,
.coral-dikt__btn:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--coral-dikt-akcent) 60%, transparent);
  background: color-mix(in srgb, var(--coral-dikt-akcent) 14%, transparent);
}

.coral-dikt__btn:focus { outline: none; }
.coral-dikt__btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral-dikt-akcent) 22%, transparent);
}

.coral-dikt__btn.je-hotovo { border-color: color-mix(in srgb, var(--coral-hotovo, var(--werk-hotovo, #86A97F)) 60%, transparent); }

.coral-dikt__btn .coral-dikt__ikona,
.coral-dikt__btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Mobil: kód nad textem, obojí přes celou šířku. Karta se tam čte jako
   samostatná dlaždice, ne jako zmenšenina počítačové. */
@media (max-width: 560px) {
  .coral-dikt__karta { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .coral-dikt__qr { width: min(190px, 62vw); height: min(190px, 62vw); }
  .coral-dikt__blok { width: 100%; align-items: center; }
  .coral-dikt__akce { justify-content: center; }
  .coral-dikt__odkaz { width: 100%; text-align: center; }
}

@container (max-width: 420px) {
  .coral-dikt__karta { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .coral-dikt__qr { width: min(190px, 70cqw); height: min(190px, 70cqw); }
  .coral-dikt__blok { width: 100%; align-items: center; }
  .coral-dikt__akce { justify-content: center; }
  .coral-dikt__odkaz { width: 100%; text-align: center; }
}

/* ---- výběr mikrofonu (Světlina 469) -------------------------------------- */
/* Ondra 23. 10. 2026: „A chci vybírat zdrojovej mikrofon". Karta má jeden
   sloupec a každý mikrofon je celý řádek na prst; zvolený nese akcentovou
   hranu a fajfku. Otevřené tlačítko svítí akcentem, ne červeně: červená
   v řadě znamená jen nahrávání. Pravidla stojí za kartou s QR kódem, ať
   přebijí její mobilní zarovnání na střed. */
.coral-dikt__tl.je-otevreno {
  color: var(--coral-dikt-akcent);
  border-color: color-mix(in srgb, var(--coral-dikt-akcent) 55%, transparent);
  background: color-mix(in srgb, var(--coral-dikt-akcent) 12%, transparent);
}
.coral-dikt__karta--mikrofony { grid-template-columns: minmax(0, 1fr); }
.coral-dikt__karta--mikrofony .coral-dikt__blok { width: 100%; }
.coral-dikt__volby { display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
.coral-dikt__volba {
  width: 100%;
  min-height: 40px;
  justify-content: flex-start;
  text-align: left;
  font-weight: 500;
}
.coral-dikt__volba span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coral-dikt__volba .coral-dikt__ikona,
.coral-dikt__volba svg { color: var(--coral-dikt-tichy); }
.coral-dikt__volba.je-vybrano {
  border-color: color-mix(in srgb, var(--coral-dikt-akcent) 60%, transparent);
  background: color-mix(in srgb, var(--coral-dikt-akcent) 14%, transparent);
}
.coral-dikt__volba.je-vybrano .coral-dikt__ikona,
.coral-dikt__volba.je-vybrano svg { color: var(--coral-dikt-akcent); }

/* ---- historie diktování (Světlina 579) ----------------------------------- */
/* Ondra 25. 10. 2026: „aby jsi tam měl taky tady nějakou jako s historií,
   abys to mohl okopírovat případně později". Seznam je jeden pro kartu
   u pole i pro zamčenou obrazovku; barvy bere z proměnných --cdh-*, které
   každé místo nastaví ze svých. Záznam: hlavička s časem a počtem slov,
   kopírování vpravo, text pod tím na čtyři řádky. */
.coral-dikt__karta--historie {
  --cdh-text: var(--coral-dikt-text);
  --cdh-tichy: var(--coral-dikt-tichy);
  --cdh-akcent: var(--coral-dikt-akcent);
  --cdh-hloubka: var(--coral-dikt-hloubka);
  grid-template-columns: minmax(0, 1fr);
  text-align: left;
}
.coral-dikt__karta--historie .coral-dikt__blok { width: 100%; align-items: stretch; }
.coral-dikt-historie {
  max-height: min(52vh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.coral-dikt-historie__seznam {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.coral-dikt-historie__zaznam {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "hlava kopie" "text text";
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 10px 10px 12px 12px;
  border-radius: var(--coral-dikt-radius, 10px);
  border: 1px solid color-mix(in srgb, var(--cdh-text) 12%, transparent);
  background: color-mix(in srgb, var(--cdh-hloubka) 62%, transparent);
  text-align: left;
}
.coral-dikt-historie__hlava {
  grid-area: hlava;
  min-width: 0;
  margin: 0;
  font-size: clamp(12px, calc(11.59px + .11vw), 13px);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--cdh-tichy);
}
.coral-dikt-historie__text {
  grid-area: text;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin: 0;
  font-size: clamp(14px, calc(13.59px + .11vw), 15px);
  line-height: 1.45;
  color: var(--cdh-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
}
.coral-dikt-historie__kopie { grid-area: kopie; min-height: 40px; }
.coral-dikt-historie__smazat { margin-top: 10px; min-height: 40px; color: var(--cdh-tichy); }
.coral-dikt-historie__smazat.je-potvrzeni {
  color: var(--coral-hori, var(--werk-hori, #E2574A));
  border-color: color-mix(in srgb, var(--coral-hori, var(--werk-hori, #E2574A)) 55%, transparent);
  background: color-mix(in srgb, var(--coral-hori, var(--werk-hori, #E2574A)) 12%, transparent);
}
.coral-dikt-historie__prazdna {
  margin: 0;
  padding: 16px 12px;
  font-size: clamp(14px, calc(13.59px + .11vw), 15px);
  line-height: 1.45;
  text-align: center;
  color: var(--cdh-tichy);
}

/* Pole, do kterého zrovna přitéká diktát, má jen tichou akcentovou hranu
   a tlustý kurzor; psaní rukou má kurzor obyčejný. Žádná vrstva přes něj,
   žádné bílé linky. Ondra 6. 10. 2026: „ten tlustej ukazatel tam chce
   jenom při hlasovém zadávání“. */
.coral-dikt-pole-zive {
  border-color: color-mix(in srgb, var(--coral-akcent, var(--werk-uhlik, #E8823C)) 55%, transparent) !important;
  caret-shape: block;
}

@media (prefers-reduced-motion: reduce) {
  .coral-dikt__tl,
  .coral-dikt__btn,
  .coral-dikt__bublina,
  .coral-dikt__stav { transition: none; }
  .coral-dikt__stav { animation: none; }
  .coral-dikt__tl.je-zapnuto .coral-dikt__tep,
  .coral-dikt__stav[data-druh="hlas"] .coral-dikt__kurzor { animation: none; }
  .coral-dikt__tl.je-zapnuto .coral-dikt__tep { opacity: .45; }
}

/* SV (Ondra 22. 9. 2026): „když dám ten mobil, tak to uživatelský rozhraní
   hrozně kvěrkot, ten malý, a nikdy to neukázalo červeně." Na dotykovém
   zařízení jsou tedy tlačítka větší, aby se do nich dalo trefit prstem,
   a nahrávání je ČERVENÉ, ne jen v barvě motivu; barva se pozná na první
   pohled a nezávisí na tom, jakou má která aplikace akcentovou. */
@media (pointer: coarse), (max-width: 767px) {
  .coral-dikt__tl { width: 52px; height: 52px; border-radius: 16px; }
  .coral-dikt__tl svg { width: var(--coral-dikt-ikona, 24px); height: var(--coral-dikt-ikona, 24px); }
  .coral-dikt__tl i.coral-dikt__ikona { min-width: var(--coral-dikt-ikona, 24px); min-height: var(--coral-dikt-ikona, 24px); }
  .coral-dikt__rada { gap: 10px; }
  .coral-dikt__stav { font-size: 13px; }
}
.coral-dikt__tl.je-zapnuto {
  color: #fff;
  border-color: #d62b2b;
  background: linear-gradient(180deg, #ef4444, #d62b2b);
  box-shadow: 0 0 0 3px rgba(214, 43, 43, 0.22);
}
.coral-dikt__tl.je-zapnuto .coral-dikt__tep { border-color: rgba(214, 43, 43, 0.75); }
/* Cervena tecka vedle popisku, at je stav videt i bez barvy tlacitka.
   SV 35: pri nahravani je tecka jen jedna, dychajici kurzor se schova. */
.coral-dikt__stav.je-nahrava .coral-dikt__kurzor { display: none; }
.coral-dikt__stav.je-nahrava::before {
  content: '';
  display: inline-block;
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin-right: 0;
  border-radius: 50%;
  background: #d62b2b;
  animation: coral-dikt-blik 2600ms ease-in-out infinite;
  vertical-align: middle;
}
/* Tečka dýchá ve stejném tempu a fázi jako tep tlačítka (Světlina 159). */
@keyframes coral-dikt-blik { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* SLOŽENÁ ŘADA (Světlina 18, Ondra 23. 9. 2026: „Když kliknu na hlasový
   zadávání v tom chatu, tak měl bejt vylepšenej design. Jako nebyl a je to
   dost rozbitý." a 21. 9.: „nemusí to někam odskakovat"). Mikrofon diktuje
   rovnou (Světlina 100: podržet, nebo klepnout) a vedle něj je tichá šipka,
   která rozbalí telefon a Wispr Flow v témže řádku; nic nevyskakuje nad
   pole a žádná bílá krabice. */
/* Světlina 169: šipka otevírá kategorie jednu po druhé (data-kategorie na
   řadě i na tlačítkách: 1 telefon a Wispr Flow, 2 dlouhé diktování).
   Ondra 7. 10. 2026: „podruhý klikneš, tak tam bude něco. Prostě takový
   kategorie." Sbalená řada je jen mikrofon a šipka. */
.coral-dikt--skladany .coral-dikt__rada > [data-kategorie] { display: none; }
.coral-dikt--skladany[data-kategorie="1"] .coral-dikt__rada > [data-kategorie="1"],
.coral-dikt--skladany[data-kategorie="2"] .coral-dikt__rada > [data-kategorie="2"] {
  display: inline-flex;
  animation: coral-dikt-rozbal 200ms cubic-bezier(.22, 1, .36, 1);
}
@keyframes coral-dikt-rozbal { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* Šipka a křížek leží na sobě a přecházejí plynule oběma směry: na
   poslední kategorii se šipka otočí na křížek, zavření ho vrátí na šipku.
   Ondra 7. 10. 2026: „Ta decentní animace toho křížku se mi líbí, ale pak
   tam není zpáteční zase na šipku." */
.coral-dikt__prepinac { display: inline-grid; place-items: center; border-color: transparent; background: transparent; }
.coral-dikt__prepinac-dalsi,
.coral-dikt__prepinac-zavri {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 200ms ease, transform 300ms cubic-bezier(.22, 1, .36, 1);
}
.coral-dikt__prepinac-zavri { opacity: 0; transform: rotate(-90deg) scale(.6); }
.coral-dikt--skladany.je-posledni .coral-dikt__prepinac-dalsi { opacity: 0; transform: rotate(90deg) scale(.6); }
.coral-dikt--skladany.je-posledni .coral-dikt__prepinac-zavri { opacity: 1; transform: none; }
/* Mezi kategoriemi šipka kývne dopředu, ať je vidět, že se něco přepnulo. */
.coral-dikt--skladany[data-kategorie="1"]:not(.je-posledni) .coral-dikt__prepinac-dalsi { animation: coral-dikt-kyv 300ms cubic-bezier(.22, 1, .36, 1); }
@keyframes coral-dikt-kyv { 40% { transform: translateX(3px); } }

/* Světlina 476: rozbalená řada se pozná na šipce samotné, jemně podbarvené
   akcentem; tečky pod ní nejsou. Ondra 23. 10. 2026: „Ani ty dvě tečičky
   v tom prostě v chatu, kdekoliv. Ta šipka, je to fajn, ale není to
   ideální". Aplikace si podbarvení přebije, když má vlastní zásuvku. */
.coral-dikt--skladany .coral-dikt__prepinac {
  transition: background-color 300ms cubic-bezier(.22, 1, .36, 1),
              border-color 300ms cubic-bezier(.22, 1, .36, 1),
              color 300ms cubic-bezier(.22, 1, .36, 1);
}
.coral-dikt--skladany.je-rozbaleno .coral-dikt__prepinac {
  background: color-mix(in srgb, var(--coral-dikt-akcent) 12%, transparent);
  color: var(--coral-dikt-akcent);
}

/* Tlačítko dlouhého diktování nese ikonu i název, ať je jasné, co dělá. */
.coral-dikt__tl--dlouhe {
  width: auto;
  padding: 0 14px 0 11px;
  gap: 7px;
  white-space: nowrap;
}
.coral-dikt__napis { font-size: .8125rem; font-weight: 700; line-height: 1; }
.coral-dikt.je-dlouhe .coral-dikt__tl--mikrofon { border-color: #d62b2b; }

/* Světlina 161: na telefonu chybí jen Diktovat z mobilu (telefon je tady
   mikrofon sám), šipka s Wispr Flow zůstává. Řídí se šířkou, ne dotykem,
   tablet od 768 px má všechno jako počítač. */
@media (max-width: 767px) {
  .coral-dikt--skladany .coral-dikt__rada > [data-diktovani="mobil"],
  .coral-dikt--skladany[data-kategorie="1"] .coral-dikt__rada > [data-diktovani="mobil"] { display: none; }
  /* Světlina 169: na telefonu stačí u zámku slovo Dlouhé, Odeslat zůstane v řadě. */
  .coral-dikt__napis-dal { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .coral-dikt--skladany .coral-dikt__rada > [data-kategorie],
  .coral-dikt__prepinac-dalsi,
  .coral-dikt__prepinac-zavri { animation: none !important; transition: none; }
}

/* ---- velké tlačítko diktování na palec ---------------------------------- */
/* Světlina 139 (Ondra 1. 10. 2026: „to hlasové zadávání pak udělali globálně
   kvalitní, co pro celej náš jako WordPress plugin"). Tlačítko vrací
   rozhrani.velke(): mikrofon, nadpis a řádek, který říká, jak diktování
   skončí (pusť, nebo klepni znovu); při nahrávání je červené a tepe.
   Základní vzhled má nulovou váhu, aplikace ho přebije svou třídou
   tlačítka; přepínání popisků a červená platí všude stejně. Barvy jdou
   nastavit proměnnými --coral-dikt-* kdekoli nad tlačítkem. */
:where(.coral-dikt-velke) {
  --cdv-akcent: var(--coral-dikt-akcent, var(--coral-akcent, var(--werk-uhlik, #E8823C)));
  --cdv-podklad: var(--coral-dikt-podklad, var(--coral-kamen-3, var(--werk-kamen-3, #262C34)));
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex: 1 1 200px;
  min-width: 0;
  max-width: 320px;
  min-height: 56px;
  margin: 0;
  padding: 6px 24px 6px 18px;
  border-radius: 999px;
  border: var(--coral-hrana-hlavni, 2px) solid color-mix(in srgb, var(--cdv-akcent) 55%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cdv-akcent) 30%, var(--cdv-podklad)),
    color-mix(in srgb, var(--cdv-akcent) 16%, var(--cdv-podklad)));
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .7);
  color: var(--cdv-akcent);
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s cubic-bezier(.22, 1, .36, 1),
              background-color .18s cubic-bezier(.22, 1, .36, 1),
              transform .12s ease;
}
:where(.coral-dikt-velke):focus { outline: none; }
:where(.coral-dikt-velke):focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdv-akcent) 28%, transparent), 0 12px 26px -14px rgba(0, 0, 0, .7);
}
:where(.coral-dikt-velke):active { transform: translateY(1px); }

:where(.coral-dikt-velke) > svg,
:where(.coral-dikt-velke) > .coral-dikt__ikona {
  width: var(--coral-dikt-velke-ikona, 26px);
  height: var(--coral-dikt-velke-ikona, 26px);
  flex: 0 0 auto;
  pointer-events: none;
}

.coral-dikt-velke__popis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  line-height: 1.15;
  text-align: left;
  pointer-events: none;
}
:where(.coral-dikt-velke__popis) b { font-size: clamp(16px, calc(15.17px + .221vw), 18px); font-weight: 800; }
:where(.coral-dikt-velke__popis) small { font-size: clamp(12px, calc(11.59px + .11vw), 13px); font-weight: 700; opacity: .8; }

.coral-dikt-velke__bezi,
.coral-dikt-velke__drz,
.coral-dikt-velke__klik { display: none; }
.coral-dikt-velke.je-zapnuto .coral-dikt-velke__nazev,
.coral-dikt-velke.je-zapnuto .coral-dikt-velke__napoveda { display: none; }
.coral-dikt-velke.je-zapnuto .coral-dikt-velke__bezi,
.coral-dikt-velke.je-zapnuto[data-rezim="stisk"] .coral-dikt-velke__drz,
.coral-dikt-velke.je-zapnuto[data-rezim="drzeni"] .coral-dikt-velke__drz,
.coral-dikt-velke.je-zapnuto[data-rezim="klik"] .coral-dikt-velke__klik { display: block; }

/* Nahrávání je červené v každé aplikaci, ať se pozná na první pohled. */
.coral-dikt-velke.coral-dikt-velke.je-zapnuto {
  border-color: #d62b2b;
  background: linear-gradient(180deg, #ef4444, #d62b2b);
  color: #fff;
  text-shadow: none;
  box-shadow: 0 4px 10px -6px rgba(214, 43, 43, .9);
}

/* Tep nahrávání je kroužek v ::after, který roste a mizí jen přes transform
   a opacity: běží na kompozitoru, ne na procesoru (zkouška animace_procesor).
   Rozměr --cdt-x a --cdt-y míří na kroužek zhruba 12 px kolem tvaru. */
.coral-dikt-velke.coral-dikt-velke.je-zapnuto::after,
.coral-dikt-zamek__stop::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--coral-hrana-hlavni, 2px));
  border-radius: inherit;
  box-shadow: 0 0 0 4px rgba(214, 43, 43, .45);
  pointer-events: none;
  animation: coral-dikt-velke-tep 1.6s ease-out infinite;
}
.coral-dikt-velke.coral-dikt-velke.je-zapnuto::after { --cdt-x: 1.08; --cdt-y: 1.4; }

@keyframes coral-dikt-velke-tep {
  0%       { transform: scale(1); opacity: 1; }
  70%,
  100%     { transform: scale(var(--cdt-x, 1.8), var(--cdt-y, 1.8)); opacity: 0; }
}

/* Telefon: tlačítko přes většinu řádku, popisky se zalomí, neuříznou. */
@media (max-width: 767px) {
  :where(.coral-dikt-velke) { flex: 1 1 0; min-width: 60%; max-width: none; padding: 6px 14px 6px 12px; gap: 10px; }
  :where(.coral-dikt-velke__popis) small { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .coral-dikt-velke.coral-dikt-velke.je-zapnuto::after { animation: none; opacity: 0; }
}

/* ---- dlouhé diktování se zamčenou obrazovkou ---------------------------- */
/* Světlina 169 (Ondra 7. 10. 2026: „pro dlouhé diktování že prostě ani
   nebudeš moct kliknout na nic jiného na obrazovce" a „Nebo to musíš
   podržet, abys to jako vypnul"). Překryv leží přímo v body; barvy si
   při otevření vezme z řady diktování (--coral-dikt-*), aplikace je
   doladí proměnnými --coral-dikt-zamek-*. Ukončovací tlačítko je dole
   pod palcem, kroužek kolem něj se při držení dokreslí. */
.coral-dikt-zamek {
  --cdz-akcent: var(--coral-dikt-zamek-akcent, var(--coral-dikt-akcent, var(--coral-akcent, #E8823C)));
  --cdz-text: var(--coral-dikt-zamek-text, var(--coral-dikt-text, var(--coral-text, #EDE6DC)));
  --cdz-tichy: var(--coral-dikt-tichy, var(--coral-text-tichy, #A79E93));
  --cdz-hrana: var(--coral-dikt-zamek-hrana, var(--coral-dikt-hrana, rgba(226, 196, 160, .14)));
  --cdz-hloubka: var(--coral-dikt-hloubka, var(--coral-kamen-1, #171B21));
  --cdz-podklad: var(--coral-dikt-podklad, var(--coral-kamen-3, #262C34));
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, calc(10.21px + 1.545vw), 30px);
  padding: max(env(safe-area-inset-top), clamp(20px, calc(12.56px + 1.987vw), 38px)) clamp(16px, calc(9.38px + 1.766vw), 32px) max(env(safe-area-inset-bottom), clamp(22px, calc(15.38px + 1.766vw), 38px));
  background: var(--coral-dikt-zamek-pozadi, color-mix(in srgb, var(--cdz-hloubka) 90%, transparent));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--cdz-text);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 240ms cubic-bezier(.22, 1, .36, 1);
}
/* Světlina 579: pod tónem aplikace leží vždycky clona skoro bez průhlednosti,
   aplikace pod ní tuší jen jako rozmazaný tvar. Ondra 25. 10. 2026: „ten
   design vylepšit, aby to možná nebylo jako úplně průhledný". Aplikace si
   clonu přebarví proměnnou --coral-dikt-zamek-zaves. */
.coral-dikt-zamek::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--coral-dikt-zamek-zaves, color-mix(in srgb, var(--cdz-hloubka) 88%, transparent));
  pointer-events: none;
}
.coral-dikt-zamek.je-otevreno { opacity: 1; }
.coral-dikt-zamek [hidden] { display: none !important; }
.coral-dikt-zamek *,
.coral-dikt-zamek *::before,
.coral-dikt-zamek *::after { box-sizing: border-box; }
html.coral-dikt-zamceno,
html.coral-dikt-zamceno body { overflow: hidden; }

.coral-dikt-zamek__karta {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, calc(7.52px + .662vw), 16px);
  width: min(100%, 560px);
  min-height: 0;
  flex: 0 1 auto;
  /* Jeden krok od kraje: obsah karty začíná stejně daleko od její hrany
     jako karta od kraje obrazovky (včetně rámu). */
  padding: calc(clamp(16px, calc(9.38px + 1.766vw), 32px) - var(--coral-hrana-hlavni, 2px));
  border-radius: calc(var(--coral-dikt-radius, 10px) * 2);
  border: var(--coral-hrana-hlavni, 2px) solid var(--cdz-hrana);
  background: var(--coral-dikt-zamek-karta,
    linear-gradient(180deg, color-mix(in srgb, var(--cdz-akcent) 5%, transparent), transparent 120px),
    color-mix(in srgb, var(--cdz-podklad) 95%, transparent));
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .75);
  transform: translateY(10px);
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}
.coral-dikt-zamek.je-otevreno .coral-dikt-zamek__karta { transform: none; }

.coral-dikt-zamek__hlava { display: flex; align-items: center; gap: 10px; }
.coral-dikt-zamek__tecka {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d62b2b;
  animation: coral-dikt-blik 2600ms ease-in-out infinite;
}
.coral-dikt-zamek__nadpis {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(17px, calc(15.76px + .331vw), 20px);
  font-weight: 800;
  color: var(--cdz-text);
}
.coral-dikt-zamek__cas {
  flex: 0 0 auto;
  font-size: clamp(15px, calc(14.17px + .221vw), 17px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Světlina 579: čistý akcent má na světlém skle aplikací málo kontrastu,
     čas se proto míchá s barvou textu, odstín zůstane a čte se. */
  color: color-mix(in srgb, var(--cdz-akcent) 55%, var(--cdz-text));
}
.coral-dikt-zamek__veta {
  margin: 0;
  font-size: clamp(14px, calc(13.59px + .11vw), 15px);
  line-height: 1.45;
  color: var(--cdz-tichy);
}

/* Konec textu: nejnovější slova dole, starší se nahoře ztrácejí. */
.coral-dikt-zamek__text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 96px;
  max-height: clamp(132px, calc(90px + 11vw), 210px);
  overflow: hidden;
  padding: 12px 14px;
  border-radius: var(--coral-dikt-radius, 10px);
  background: color-mix(in srgb, var(--cdz-hloubka) 72%, transparent);
}
.coral-dikt-zamek__text.je-preteka {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 46px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 46px);
}
.coral-dikt-zamek__vnitrek {
  margin: 0;
  font-size: clamp(16px, calc(15.17px + .221vw), 18px);
  line-height: 1.5;
  color: var(--cdz-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.coral-dikt-zamek__text.je-prazdne { -webkit-mask-image: none; mask-image: none; justify-content: center; }
.coral-dikt-zamek__text.je-prazdne::after {
  content: attr(data-prazdne);
  font-size: clamp(14px, calc(13.59px + .11vw), 15px);
  line-height: 1.45;
  text-align: center;
  color: var(--cdz-tichy);
}
.coral-dikt-zamek__slova {
  margin: 0;
  font-size: clamp(13px, calc(12.59px + .11vw), 14px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cdz-tichy);
}

.coral-dikt-zamek__dole {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.coral-dikt-zamek__konec {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(84px, calc(78px + 1.6vw), 96px);
  height: clamp(84px, calc(78px + 1.6vw), 96px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%,
    color-mix(in srgb, var(--cdz-podklad) 80%, #000 0%),
    color-mix(in srgb, var(--cdz-hloubka) 90%, transparent));
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .8);
  cursor: pointer;
  outline: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease;
}
.coral-dikt-zamek__konec:focus { outline: none; }
.coral-dikt-zamek__konec:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cdz-akcent) 30%, transparent), 0 18px 36px -16px rgba(0, 0, 0, .8); }
.coral-dikt-zamek__konec.je-drzeno { transform: scale(.94); }
.coral-dikt-zamek__kruh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.coral-dikt-zamek__kruh circle { fill: none; stroke-width: 5; }
.coral-dikt-zamek__drazka { stroke: var(--cdz-hrana); }
.coral-dikt-zamek__prubeh {
  stroke: var(--cdz-akcent);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.coral-dikt-zamek__stop {
  width: 28%;
  height: 28%;
  border-radius: 22%;
  position: relative;
  background: linear-gradient(180deg, #ef4444, #d62b2b);
  pointer-events: none;
}
.coral-dikt-zamek__stop::after { inset: 0; }
.coral-dikt-zamek__napoveda {
  margin: 0;
  min-height: 1.4em;
  font-size: clamp(14px, calc(13.59px + .11vw), 15px);
  font-weight: 700;
  color: var(--cdz-tichy);
  text-align: center;
  transition: color 200ms ease;
}
/* Upozornění nese barvu akcentu stmavenou k textu, ať se na světlé kartě
   čte stejně jako čas nahoře (čistý akcent měl kontrast jen 2,2 : 1). */
.coral-dikt-zamek__napoveda.je-upozorneni { color: color-mix(in srgb, var(--cdz-akcent) 55%, var(--cdz-text)); }

/* ---- přepis hlasu a historie v zámku (Světlina 579) ---------------------- */
/* Řada pod textem: tři přepisy hlasu vedle sebe a historie. Hrany se berou
   z barvy textu, takže sedí na tmavém jádře i na světlém skle aplikace.
   Zvolený přepis nese akcentovou hranu, podbarvení a tečku; text zůstává
   v barvě textu, ať je čitelný na každém podkladu. */
.coral-dikt-zamek {
  --cdz-linka: color-mix(in srgb, var(--cdz-text) 16%, transparent);
  --cdz-plocha: color-mix(in srgb, var(--cdz-hloubka) 64%, transparent);
}
.coral-dikt-zamek__ovladani {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  padding-top: clamp(10px, calc(8.34px + .442vw), 14px);
  border-top: 1px solid var(--cdz-linka);
}
.coral-dikt-zamek__hlasy {
  display: grid;
  /* Sloupce podle délky slova a zbytek místa rovným dílem; písmo i tečka
     výběru šířku nemění, takže přepnutí nic neposune. Useknutí s výpustkou
     zůstává jen pojistkou pro úzká okna pod 340 px. */
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 6px;
  /* Volby mají vlastní řádek: tlačítko historie mění popisek a nesmí
     při otevření posunout volby vedle sebe. */
  flex: 1 1 100%;
  min-width: 0;
}
.coral-dikt-zamek__popisek {
  grid-column: 1 / -1;
  font-size: clamp(12px, calc(11.59px + .11vw), 13px);
  font-weight: 700;
  color: var(--cdz-tichy);
}
.coral-dikt-zamek__volba,
.coral-dikt-zamek__historie-tl {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 clamp(8px, calc(6.34px + .442vw), 12px);
  border-radius: var(--coral-dikt-radius, 10px);
  border: 1px solid var(--cdz-linka);
  background: var(--cdz-plocha);
  color: var(--cdz-text);
  font: inherit;
  font-size: clamp(13px, calc(12.59px + .11vw), 14px);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 200ms cubic-bezier(.22, 1, .36, 1),
              background-color 200ms cubic-bezier(.22, 1, .36, 1),
              transform 120ms ease;
}
.coral-dikt-zamek__volba { overflow: hidden; }
.coral-dikt-zamek__volba-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coral-dikt-zamek__volba:focus,
.coral-dikt-zamek__historie-tl:focus { outline: none; }
.coral-dikt-zamek__volba:focus-visible,
.coral-dikt-zamek__historie-tl:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdz-akcent) 32%, transparent);
}
@media (hover: hover) {
  .coral-dikt-zamek__volba:not(.je-vybrano):hover,
  .coral-dikt-zamek__historie-tl:hover {
    border-color: color-mix(in srgb, var(--cdz-akcent) 45%, transparent);
    background: color-mix(in srgb, var(--cdz-akcent) 8%, var(--cdz-plocha));
  }
}
.coral-dikt-zamek__volba:active,
.coral-dikt-zamek__historie-tl:active { transform: translateY(1px); }
.coral-dikt-zamek__volba.je-vybrano {
  border-color: color-mix(in srgb, var(--cdz-akcent) 70%, transparent);
  background: color-mix(in srgb, var(--cdz-akcent) 18%, var(--cdz-plocha));
}
/* Tečka výběru stojí v rohu mimo text: šířka tlačítka se výběrem nemění. */
.coral-dikt-zamek__volba.je-vybrano::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cdz-akcent);
}
.coral-dikt-zamek__historie-tl { flex: 0 0 auto; padding: 0 clamp(12px, calc(10.34px + .442vw), 16px); }
.coral-dikt-zamek__historie-tl svg,
.coral-dikt-zamek__historie-tl .coral-dikt__ikona { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cdz-akcent); }
.coral-dikt-zamek__historie-tl[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--cdz-akcent) 70%, transparent);
  background: color-mix(in srgb, var(--cdz-akcent) 18%, var(--cdz-plocha));
}

/* Otevřená historie nahradí živý text, dole běží diktování dál. */
.coral-dikt-zamek__karta.je-historie .coral-dikt-zamek__text,
.coral-dikt-zamek__karta.je-historie .coral-dikt-zamek__slova { display: none; }
.coral-dikt-zamek__historie {
  --cdh-text: var(--cdz-text);
  --cdh-tichy: var(--cdz-tichy);
  --cdh-akcent: var(--cdz-akcent);
  --cdh-hloubka: var(--cdz-hloubka);
  max-height: clamp(200px, calc(110px + 24vh), 380px);
  margin: 0 -4px;
  padding: 0 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.coral-dikt-zamek .coral-dikt__btn {
  border-color: var(--cdz-linka);
  background: var(--cdz-plocha);
  color: var(--cdz-text);
}
@media (hover: hover) {
  .coral-dikt-zamek .coral-dikt__btn:hover {
    border-color: color-mix(in srgb, var(--cdz-akcent) 45%, transparent);
    background: color-mix(in srgb, var(--cdz-akcent) 8%, var(--cdz-plocha));
  }
}
.coral-dikt-zamek .coral-dikt__btn:focus-visible {
  border-color: color-mix(in srgb, var(--cdz-akcent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdz-akcent) 30%, transparent);
}
.coral-dikt-zamek .coral-dikt__btn svg,
.coral-dikt-zamek .coral-dikt__btn .coral-dikt__ikona { color: var(--cdz-akcent); }
.coral-dikt-zamek .coral-dikt-historie__smazat { color: var(--cdz-tichy); }
.coral-dikt-zamek .coral-dikt-historie__smazat.je-potvrzeni { color: var(--coral-hori, var(--werk-hori, #E2574A)); }

/* Telefon: přepisy přes celou šířku, historie pod nimi na celý řádek. */
@media (max-width: 767px) {
  .coral-dikt-zamek__historie-tl { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .coral-dikt-zamek,
  .coral-dikt-zamek__karta { transition: none; }
  .coral-dikt-zamek__tecka { animation: none; }
  .coral-dikt-zamek__stop::after { animation: none; opacity: 0; }
}