/* ══════════════════════════════════════════════════════════════════════════
   /sluzby/viditelnost-v-chatgpt — styly JEN pro tuhle stránku.

   Načítá se přes $extra_css v hlavičce `site/sluzby/viditelnost-v-chatgpt.php`,
   takže žádnou jinou stránku to nestojí ani jeden požadavek navíc.

   ⚠️ DO base.css TOHLE NEPATŘÍ: jsou to prvky, které nikde jinde na webu
   nejsou (ukázka rozhovoru s asistentem, schéma cesty k modelu, přepínač
   „co vidí člověk / co vidí model"). Do sdíleného stylopisu patří až věc,
   kterou použije druhá stránka.
   ⚠️ Barvy VÝHRADNĚ z proměnných base.css (--navy, --navy-900, --navy-tint,
   --orange, --orange-600, --orange-tint, --muted, --border, --surface, --bg,
   --star). Žádný nový odstín. Průhlednost bílé/černé je v pořádku — není to
   nová barva, jen krytí.
   ⚠️ ŽÁDNÁ CIZÍ LOGA ani barvy cizích služeb (OpenAI, Google, Microsoft).
   Ukázka rozhovoru je ZJEVNÁ ILUSTRACE v naší paletě, ne napodobenina
   cizího rozhraní — kdyby vypadala jako snímek obrazovky, byl by to problém
   podle §6 (klamavá reklama) i podle zdravého rozumu.
   ══════════════════════════════════════════════════════════════════════════ */

/* Skryté, ale ovladatelné klávesnicí — přepínač pohledů níž.
   Nepoužívat display:none, tím by prvek vypadl z pořadí tabulátoru. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ══════════════════════════════════════════════════════════════════════════
   1. HLAVIČKA STRÁNKY — text vlevo, ukázka rozhovoru vpravo.
   Na mobilu jde ukázka pod text. Dvousloupec až od 960 px: pod tím by se
   bublina s odpovědí zúžila na sloupec o pěti slovech na řádek.
   ══════════════════════════════════════════════════════════════════════════ */
.aihero-grid{display:grid;gap:32px}
.aihero-copy .hero-checks{margin-top:22px}
.aihero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
@media(min-width:960px){
  .aihero-grid{grid-template-columns:1.04fr .96fr;gap:50px;align-items:center}
}

/* ── Ukázka rozhovoru s asistentem ────────────────────────────────────────
   Vědomě NEnapodobuje žádné konkrétní rozhraní: naše modrá lišta, náš
   oranžový odznak, popisek „ilustrace" přímo v liště. Postavené z HTML a CSS,
   ne z jednoho velkého SVG — text se musí zalomit podle šířky telefonu, což
   text uvnitř SVG neumí (a rozpadl by se právě na 390 px). Ikony uvnitř
   inline SVG jsou. */
.aichat{margin:0;max-width:520px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.aichat-bar{display:flex;align-items:center;gap:9px;padding:11px 15px;background:var(--navy)}
.aichat-dots{display:flex;gap:6px}
.aichat-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28);display:block}
.aichat-tag{margin-left:auto;font-family:var(--font-head);font-weight:600;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.aichat-body{padding:20px 16px 22px;display:grid;gap:18px}

/* Dotaz zákazníka — bublina zprava, jako v každém chatu. */
.aichat-q{justify-self:end;max-width:88%;margin:0;padding:11px 15px;
  background:var(--navy-tint);color:var(--navy);font-weight:500;font-size:.97rem;
  border-radius:16px 16px 4px 16px}
.aichat-q span{display:block;font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}

/* Odpověď modelu — avatar vlevo, bublina vpravo. */
.aichat-a{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start}
.aichat-av{width:36px;height:36px;border-radius:50%;background:var(--orange);
  display:grid;place-items:center;flex:none}
.aichat-av svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.aichat-txt{margin:0;padding:13px 15px;background:var(--bg);border:1px solid var(--border);
  border-radius:16px 16px 16px 4px;font-size:.96rem;line-height:1.55;color:var(--ink)}
.aichat-txt strong{color:var(--navy);font-weight:600}
/* Kurzor na konci odpovědi — jediná animace v bublině. Dává najevo, že je to
   živá odpověď, ne obrázek. Kdo má vypnuté animace, vidí jen stojící čárku. */
.aichat-caret{display:inline-block;width:2px;height:1em;vertical-align:-.13em;margin-left:2px;
  background:var(--orange);animation:aicaret 1.05s steps(1) infinite}
@keyframes aicaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* Odkaz na zdroj pod odpovědí — takhle modely citují, odtud jde návštěva. */
.aichat-cite{display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  background:var(--orange-tint);color:var(--navy);border-radius:999px;padding:5px 12px;
  font-size:.82rem;font-weight:600}
.aichat-cite svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--orange-600);
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.aichat-note{margin:12px 0 0;font-size:.86rem;color:var(--muted);line-height:1.5}

/* Podtržení názvu firmy v odpovědi. Vychází z `.uline` v base.css, ale tah
   spouští ODHALENÍ SEKCE (třídu `in` přidá main.js), ne nova.js — ten se na
   téhle stránce nenačítá a bez tohohle pravidla by čára zůstala neviditelná. */
.aichat.reveal.in .uline path{stroke-dashoffset:0;transition-delay:.45s}

/* ══════════════════════════════════════════════════════════════════════════
   2. SCHÉMA CESTY K MODELU — inline SVG, dvě verze jednoho obsahu.
   Vodorovná pro desktop, svislá pro telefon. Text v SVG se nezalomí, takže
   „zmenšit vodorovnou na mobilu" by znamenalo písmo o velikosti 6 px, a
   vodorovné posouvání uvnitř rámečku je u schématu o čtyřech krocích horší
   než dvě varianty. Obě jsou aria-hidden a celou cestu popisuje slovy
   popisek pod obrázkem — čtečka ani jazykový model tak o nic nepřijde.
   ══════════════════════════════════════════════════════════════════════════ */
.flow{margin:0}
/* ⚠️ `display` se tu NESMÍ nastavovat přes `.flow svg` — takový selektor má
   vyšší specificitu než `.flow-wide` / `.flow-tall` a přebil by jejich skrývání,
   takže se schéma vykreslilo DVAKRÁT pod sebou (naměřeno 11. 8. 2026: na
   počítači svítil proužek i vysoká varianta zároveň). Proto tady jen rozměry
   a `display` řeší obě varianty zvlášť, na stejné úrovni specificity. */
.flow svg{width:100%;height:auto;overflow:visible}
.flow-tall{display:block}
.flow-wide{display:none}
@media(min-width:820px){
  .flow-tall{display:none}
  .flow-wide{display:block}
}
.flow-node{fill:var(--bg);stroke:var(--border);stroke-width:1.5}
.flow-node--end{fill:var(--orange-tint);stroke:var(--orange)}
.flow-badge{fill:var(--navy)}
.flow-badge--end{fill:var(--orange)}
.flow-num{fill:#fff;font-family:var(--font-head);font-weight:700;font-size:13px}
.flow-t{fill:var(--navy);font-family:var(--font-head);font-weight:600;font-size:16px}
.flow-s{fill:var(--muted);font-family:var(--font-body);font-size:12.5px}
/* Šipka je JEDNA cesta (čára + hrot), takže se čárkovaný tah odkryje plynule
   od začátku čáry po špičku hrotu. `pathLength="100"` normalizuje délku, aby
   se dasharray nemusel počítat pro každou šipku zvlášť. */
.flow-arrow{fill:none;stroke:var(--orange);stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .55s ease}
.flow.in .flow-arrow{stroke-dashoffset:0}
.flow.in .flow-arrow--2{transition-delay:.2s}
.flow.in .flow-arrow--3{transition-delay:.4s}
.flow-cap{margin:18px auto 0;max-width:70ch;text-align:center;color:var(--muted);font-size:.95rem}
.flow-cap strong{color:var(--navy);font-weight:600}
@media(prefers-reduced-motion:reduce){
  .flow-arrow{stroke-dashoffset:0;transition:none}
  .aichat-caret{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   3. PŘEPÍNAČ „co vidí člověk / co vidí model" — čistě CSS přes :checked.
   Dva rádiové přepínače stojí PŘED lištou i panely, aby na ně šlo dosáhnout
   sourozeneckým selektorem `~`. Žádný JavaScript: funguje i tomu, komu se
   skript nenačte, a vyhledávač vidí oba panely v HTML.
   ══════════════════════════════════════════════════════════════════════════ */
.pohled{max-width:820px;margin:0 auto}
.pohled-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;max-width:440px;margin:0 auto 22px;
  padding:5px;background:var(--bg);border:1px solid var(--border);border-radius:999px}
.bg-surface .pohled-tabs{background:var(--bg)}
.pohled-tabs label{display:block;padding:.6em .5em;text-align:center;border-radius:999px;
  font-family:var(--font-head);font-weight:600;font-size:.92rem;color:var(--muted);
  cursor:pointer;transition:background .18s ease,color .18s ease}
.pohled-tabs label:hover{color:var(--navy)}
#pohled-c:checked ~ .pohled-tabs label[for=pohled-c],
#pohled-m:checked ~ .pohled-tabs label[for=pohled-m]{background:var(--navy);color:#fff}
/* Obrys jen pro klávesnici — myší se přepíná kliknutím na popisek. */
#pohled-c:focus-visible ~ .pohled-tabs label[for=pohled-c],
#pohled-m:focus-visible ~ .pohled-tabs label[for=pohled-m]{outline:2px solid var(--orange);outline-offset:2px}

/* Panely: v HTML jsou oba, vidět je vždy jen zvolený. Minimální výška drží
   místo, aby stránka při přepnutí neposkočila. */
.pohled-panel{display:none}
#pohled-c:checked ~ .pohled-panels .pohled-panel--c,
#pohled-m:checked ~ .pohled-panels .pohled-panel--m{display:block;animation:pohledIn .28s ease}
.pohled-panels{min-height:330px}
@keyframes pohledIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  #pohled-c:checked ~ .pohled-panels .pohled-panel--c,
  #pohled-m:checked ~ .pohled-panels .pohled-panel--m{animation:none}
}

/* ── Panel „co vidí člověk": zmenšená stránka v rámu okna prohlížeče.
   Rám (.site-window-bar) je stejný jako u ukázek práce, aby bylo hned jasné,
   že se díváme na web. Uvnitř je náš vlastní obsah, ne vymyšlená cizí firma. */
.mini{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow)}
.mini-body{padding:22px 20px 24px}
.mini-h{font-family:var(--font-head);font-weight:700;color:var(--navy);
  font-size:clamp(1.05rem,3.6vw,1.35rem);line-height:1.2;margin:0 0 .45em}
.mini-p{font-size:.92rem;color:var(--muted);margin:0 0 16px;max-width:46ch}
.mini-btn{display:inline-block;background:var(--orange);color:#fff;border-radius:999px;
  padding:.62em 1.3em;font-family:var(--font-head);font-weight:600;font-size:.88rem}
.mini-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:16px 0 0;font-size:.82rem;color:var(--muted)}

/* ── Panel „co vidí model": dva výpisy na tmavém pozadí.
   Tmavá je tu proto, že se výpis nesmí plést se skutečným obsahem stránky.
   Vodorovný posuv má výpis SÁM (overflow-x), aby se kvůli dlouhému řádku
   nedala posouvat celá stránka. */
.codeblock + .codeblock{margin-top:16px}
.code-lab{display:block;margin:0 0 8px;font-family:var(--font-head);font-weight:600;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.code{margin:0;padding:16px 15px;background:var(--navy-900);color:#dfe4f0;
  border-radius:var(--radius-sm);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;line-height:1.6;white-space:pre;overflow-x:auto}
.code b{color:#fff;font-weight:600}          /* klíč */
.code i{font-style:normal;color:var(--star)} /* hodnota */
.code u{text-decoration:none;color:rgba(255,255,255,.5)}  /* závorky, komentář */
.pohled-cap{margin:18px auto 0;max-width:68ch;text-align:center;color:var(--muted);font-size:.93rem}
.pohled-cap strong{color:var(--navy);font-weight:600}

/* ══════════════════════════════════════════════════════════════════════════
   4. DROBNOSTI — pás čísel a ukázka webu přebírají třídy z base.css
   (.statband, .casewin, .site-window), tady se doladí jen odsazení.
   ══════════════════════════════════════════════════════════════════════════ */
.ai-proof-note{margin:26px auto 0;max-width:66ch;text-align:center;color:var(--muted);font-size:.97rem}
.ai-band{margin-top:6px}
.ai-band .cta-points{max-width:56ch;margin:22px auto 0;text-align:left}
.ai-band .cta-points li{color:#dfe4f0}
.ai-band .cta-points .ic{color:var(--orange)}
/* Poslední výzva: tlačítka na střed a pod sebou na mobilu. */
.ai-cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.ai-cta-note{text-align:center;color:var(--muted);font-size:.92rem;margin:18px 0 0}