/* ==========================================================================
   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; }
}

/* 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. */
.coral-dikt--skladany .coral-dikt__rada > [data-diktovani="mobil"],
.coral-dikt--skladany .coral-dikt__rada > [data-diktovani="wispr"],
.coral-dikt--skladany.je-rozbaleno .coral-dikt__rada > [data-diktovani] { display: inline-flex; }
.coral-dikt__prepinac-dalsi,
.coral-dikt__prepinac-zavri { display: inline-flex; align-items: center; justify-content: center; }
.coral-dikt__prepinac-zavri,
.coral-dikt--skladany.je-rozbaleno .coral-dikt__prepinac-dalsi { display: none; }
.coral-dikt--skladany.je-rozbaleno .coral-dikt__prepinac-zavri { display: inline-flex; }
.coral-dikt--skladany.je-rozbaleno .coral-dikt__rada { animation: coral-dikt-rozbal 180ms cubic-bezier(.22, 1, .36, 1); }
@keyframes coral-dikt-rozbal { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
/* Šipka je vedlejší: bez rámečku a podkladu, cíl má ale plnou velikost. */
.coral-dikt__prepinac { border-color: transparent; background: transparent; }
/* 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.je-rozbaleno .coral-dikt__rada > [data-diktovani="mobil"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .coral-dikt--skladany.je-rozbaleno .coral-dikt__rada { animation: 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;
  animation: coral-dikt-velke-tep 1.6s ease-out infinite;
}

@keyframes coral-dikt-velke-tep {
  0%       { box-shadow: 0 0 0 0 rgba(214, 43, 43, .45), 0 4px 10px -6px rgba(214, 43, 43, .9); }
  70%,
  100%     { box-shadow: 0 0 0 12px rgba(214, 43, 43, 0), 0 4px 10px -6px rgba(214, 43, 43, .9); }
}

/* 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 { animation: none; }
}