/* Rozhraní s agentem — F1 (docs/ui-agent-plan.md).
 *
 * Převlek stávajících stránek do jazyka prototypu `zivy.html`, BEZ změny
 * chování: stejné šablony, stejné formuláře, stejné adresy. Všechno je pod
 * `html.ui-agent`, takže bez přepínače DP_UI_AGENT_ORG_IDS se nic nemění.
 *
 * Barva nese stav agenta: jantar = potřebuju vás, azur = pracuji,
 * zelená = hotovo, červená = problém. Význam vždy nese i text.
 */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokeny: stávající proměnné šablon přemapované na nový jazyk ---------- */
html.ui-agent {
  /* Palette of the owner-approved prototype v3 (6 Oct 2026, docs/ui-zasady.md): a cool
     ground, glass cards over the living orb, one hairline, three inks; the state colours
     ride on the orb and the small dots. --ink-3 is the prototype's grey darkened just
     enough to clear 4.5:1 (tests/test_ui_kontrast.py; the prototype's #7f848e is 3.35:1).
     In dark it clears 4.5:1 on the glass cards too, not only on the page ground: the old #737986 measured 4.31:1 on
     a tile label (UX audit 7 Oct 2026, UX-10-07-03). */
  --bg: #f3f2ef; --ink: #121317; --ink-2: #555a63; --ink-3: #686d77;
  --glass: rgb(255 255 255 / .66); --edge: rgb(18 19 23 / .10); --edge-2: rgb(18 19 23 / .22);
  --amber: #d98a0b; --cyan: #1696c4; --green: #179a66; --red: #d24e33; --grey: #9a9ea6;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono-f: "Geist Mono", ui-monospace, Consolas, monospace;
  /* Proměnné, které čtou dnešní šablony. */
  --paper: var(--bg); --wash: var(--glass); --rule: var(--edge);
}
@media (prefers-color-scheme: dark) {
  html.ui-agent:not([data-theme="light"]) {
    --bg: #07080b; --ink: #eef0f3; --ink-2: #a3a9b4; --ink-3: #7d838e;
    --glass: rgb(22 24 30 / .58); --edge: rgb(255 255 255 / .09); --edge-2: rgb(255 255 255 / .22);
    --amber: #ffb547; --cyan: #58d0ff; --green: #4be0a0; --red: #ff7a5c; --grey: #6d7380;
    color-scheme: dark;
  }
}
html.ui-agent[data-theme="dark"] {
  --bg: #07080b; --ink: #eef0f3; --ink-2: #a3a9b4; --ink-3: #7d838e;
  --glass: rgb(22 24 30 / .58); --edge: rgb(255 255 255 / .09); --edge-2: rgb(255 255 255 / .22);
  --amber: #ffb547; --cyan: #58d0ff; --green: #4be0a0; --red: #ff7a5c; --grey: #6d7380;
  color-scheme: dark;
}

/* Arrival of a page: one short movement of the scene, nothing else (UX audit
   1 Oct 2026). No cross-document view transition: while it ran, the new page
   ignored clicks (measured: clicks 100–260 ms after load were lost). No
   opacity and no blur either — everything is visible and clickable from the
   first frame; the whole reveal ends within 300 ms. */
@keyframes ui-prijezd { from { transform: translateY(6px); } }
.ui-agent .scena-agent > *, .ui-agent .oblast-hlava { animation: ui-prijezd .2s cubic-bezier(.2, .8, .2, 1) both; }
.ui-agent .scena-agent > :nth-child(2) { animation-delay: 30ms; } .ui-agent .scena-agent > :nth-child(3) { animation-delay: 60ms; }
.ui-agent .scena-agent > :nth-child(n+4) { animation-delay: 90ms; }

/* ---------- základ ---------- */
.ui-agent body { background: var(--bg); font: 15.5px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
.ui-agent main { position: relative; z-index: 2; padding-top: 96px; gap: 26px; }
.ui-agent h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 350; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; }
.ui-agent h2 { font-size: 12px; letter-spacing: .08em; color: var(--ink-3); font-weight: 550; }
.ui-agent .mono, .ui-agent .feed-name, .ui-agent .feed-url, .ui-agent .feed-meta, .ui-agent .chip { font-family: var(--mono-f); }
.ui-agent .feed-name { font-family: var(--sans); font-weight: 550; font-size: 15px; }
.ui-agent .section-head { border-bottom: 1px solid var(--edge); }
.ui-agent :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 8px; }
.ui-agent a:not(.button):hover { color: var(--ink); }

/* ---------- ovládací prvky ---------- */
.ui-agent input[type=text], .ui-agent input[type=url], .ui-agent input[type=email], .ui-agent input[type=password],
.ui-agent input[type=number], .ui-agent input[type=search], .ui-agent select, .ui-agent textarea {
  border: 1px solid var(--edge); border-radius: 14px; background: var(--glass);
  font-family: var(--sans); padding: 12px 16px; transition: border-color .2s, box-shadow .2s;
}
/* a missing required field: marked by shape (dashed, heavier), not colour */
.ui-agent input[aria-invalid="true"] { border: 2px dashed var(--ink); }
.ui-agent input:focus, .ui-agent select:focus, .ui-agent textarea:focus {
  outline: none; border-color: color-mix(in srgb, var(--amber) 60%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber) 14%, transparent);
}
.ui-agent button, .ui-agent a.button {
  font-family: var(--sans); font-weight: 550; border-radius: 999px; border: 1px solid var(--ink); padding: 11px 22px;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), opacity .15s, background .2s, border-color .2s, box-shadow .25s;
}
.ui-agent button:not(:disabled):hover, .ui-agent a.button:not(.disabled):hover { transform: translateY(-1px); opacity: 1; box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--amber) 70%, transparent); }
.ui-agent button:not(:disabled):active { transform: scale(.98); }
.ui-agent button.ghost, .ui-agent a.button.ghost { background: var(--glass); border-color: var(--edge); color: var(--ink-2); }
.ui-agent button.ghost:not(:disabled):hover, .ui-agent a.button.ghost:not(.disabled):hover { background: var(--glass); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 25%, transparent); box-shadow: none; }
.ui-agent button:disabled, .ui-agent a.button.disabled { border-radius: 999px; }
.ui-agent label { letter-spacing: .06em; font-weight: 550; }

/* ---------- plochy ---------- */
.ui-agent .feed, .ui-agent .notice, .ui-agent .error, .ui-agent .kroky, .ui-agent .kategorie {
  border: 1px solid var(--edge); border-radius: 18px; background: var(--glass);
}
.ui-agent .feed { padding: 14px 16px; }
.ui-agent .feed.off { border-style: dashed; }
.ui-agent .feed-url { background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 8px; }
.ui-agent .notice { padding: 18px; }
.ui-agent .error { border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 8%, var(--glass)); }
.ui-agent .kategorie { border-left: 1px solid var(--edge); padding: 14px 16px; }
.ui-agent .kroky { gap: 0; overflow: hidden; background: var(--glass); }
.ui-agent .krok { background: transparent; border-top: 1px solid var(--edge); }
.ui-agent .krok:first-child { border-top: 0; }
.ui-agent .krok::before { border-radius: 50%; }
.ui-agent .krok--hotovo::before { background: var(--green); border-color: var(--green); }
.ui-agent .krok--dalsi { box-shadow: inset 3px 0 0 var(--amber); }
.ui-agent .krok--bezi::before { border-color: var(--cyan); border-top-color: transparent; background: none; animation: ui-toc .8s linear infinite; }
@keyframes ui-toc { to { transform: rotate(360deg); } }
.ui-agent .chip { border-radius: 999px; border-color: var(--edge); background: var(--glass); padding: 3px 10px; }
.ui-agent .chip::before { border-radius: 50%; border: 0; background: var(--ink-3); }
.ui-agent .chip.available::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
.ui-agent .chip.protected::before { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.ui-agent .chip.invalid::before, .ui-agent .chip.unreachable::before { background: var(--red); }
.ui-agent .chip.protected { background: var(--glass); }
.ui-agent .chip.invalid, .ui-agent .chip.unreachable { border-style: solid; border-width: 1px; }
.ui-agent .progress { border: 0; border-radius: 9px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.ui-agent .progress i { background: linear-gradient(90deg, var(--cyan), var(--amber)); border-radius: 9px; }
.ui-agent table { border-collapse: collapse; }
.ui-agent th { color: var(--ink-3); font-weight: 550; }
.ui-agent footer { position: relative; z-index: 1; border-top-color: var(--edge); }

/* ---------- kostra: rohy, tvar, Kde co je ---------- */
.ui-tvar { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.ui-kde { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 72px 16px 32px; background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .2s; overflow-y: auto; }
.ui-kde.otevreno { opacity: 1; pointer-events: auto; }
.ui-kde-mapa { position: relative; width: min(900px, 100%); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ui-kde h2 { grid-column: 1 / -1; text-align: center; font-size: clamp(26px, 3.6vw, 36px); font-weight: 350; letter-spacing: -.03em; text-transform: none; color: var(--ink); margin-bottom: 8px; }
.ui-oblast { border: 1px solid var(--edge); background: var(--glass); border-radius: 22px; padding: 16px 18px; display: grid; gap: 6px; align-content: start;
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s cubic-bezier(.2, .9, .25, 1), border-color .2s; transition-delay: calc(var(--d, 0ms) / 2); }
.ui-kde.otevreno .ui-oblast { opacity: 1; transform: none; }
.ui-oblast:hover { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.ui-oblast header { display: flex; justify-content: space-between; align-items: center; font-weight: 550; font-size: 16px; }
.ui-oblast header i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.ui-oblast a { text-decoration: none; color: var(--ink-2); font-size: 14px; padding: 6px 10px; margin: 0 -10px; border-radius: 10px; display: flex; justify-content: space-between; }
.ui-oblast a:hover, .ui-oblast a:focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.ui-oblast a[aria-current="page"] { color: var(--ink); font-weight: 550; }
.ui-oblast a[aria-current="page"]::after { content: "●"; font-size: 8px; color: var(--amber); align-self: center; }
.ui-kde-pata { grid-column: 1 / -1; text-align: center; max-width: none; font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }

@media (max-width: 640px) {
  .ui-agent main { padding-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-oblast, .ui-kde { transition: none; }
  .ui-agent .krok--bezi::before { animation: none; }
}

/* ---------- F2: domov agenta ---------- */
.ui-agent .scena-agent { margin: max(30vh, 220px) auto 0; width: min(640px, 100%); display: grid; gap: 20px; justify-items: center; text-align: center; }
.ui-agent .scena-agent .pozdrav { color: var(--ink-3); font-size: 14px; margin: 0; }
.ui-agent .scena-agent .veta { font-size: clamp(26px, 4.2vw, 42px); font-weight: 350; letter-spacing: -.03em; line-height: 1.12; margin: -8px 0 0; max-width: 22ch; }
.ui-agent .scena-agent .pod { color: var(--ink-2); font-size: 16px; margin: -6px 0 0; max-width: 48ch; text-wrap: balance; }
.ui-agent .scena-agent .akce { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ui-agent .scena-agent .akce form { margin: 0; }
.ui-agent .scena-agent .akce > :first-child .button, .ui-agent .scena-agent .akce > a:first-child,
.ui-agent .scena-agent .akce > form:first-child button { padding: 14px 26px; font-size: 15.5px; }
.ui-agent .scena-agent .proc { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.ui-agent .dalsi-veci { width: 100%; margin-top: 18px; border-top: 1px solid var(--edge); padding-top: 12px; text-align: left; }
.ui-agent .dalsi-veci summary { cursor: pointer; color: var(--ink-2); font-size: 14px; list-style: none; text-align: center; }
.ui-agent .dalsi-veci summary::-webkit-details-marker { display: none; }
.ui-agent .dalsi-veci summary::after { content: " · Ukázat"; text-decoration: underline; text-underline-offset: 3px; }
.ui-agent .dalsi-veci[open] summary::after { content: " · Skrýt"; }
.ui-agent .dalsi-veci ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ui-agent .dalsi-veci li { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 16px; background: var(--glass); font-size: 14.5px; }
/* A row without the leading dot spans the whole card (the never / decided lists of the health scene). */
.ui-agent .dalsi-veci li > span:only-child { grid-column: 1 / -1; }
.ui-agent .tecka { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--amber)); box-shadow: 0 0 10px var(--c, var(--amber)); }
.ui-agent .tecka--amber { --c: var(--amber); } .ui-agent .tecka--red { --c: var(--red); } .ui-agent .tecka--cyan { --c: var(--cyan); } .ui-agent .tecka--green { --c: var(--green); }
.ui-agent .oznameni-agent { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 25; display: flex; gap: 12px; align-items: center;
  padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; box-shadow: 0 20px 40px -20px rgb(0 0 0 / .6); max-width: calc(100vw - 32px); }
.ui-agent .oznameni-agent form { margin: 0; }
.ui-agent .oznameni-agent button { background: color-mix(in srgb, var(--bg) 18%, transparent) !important; color: var(--bg) !important; border: 0 !important; padding: 7px 14px !important; }
@media (max-width: 640px) { .ui-agent .scena-agent { margin-top: max(26vh, 180px); } }

/* ---------- F3: pole pro dotazy a konverzace ---------- */
.ui-sr { position: absolute; left: -9999px; }
.ui-agent main:has(.ui-pole) { padding-bottom: 180px; }
.ui-pole { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 15; width: min(580px, calc(100vw - 32px)); }
.ui-pole-form { display: flex; flex-direction: column-reverse; gap: 10px; margin: 0; }
.ui-pole-radek { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 999px; border: 1px solid var(--edge); background: var(--glass); backdrop-filter: blur(22px);
  transition: border-color .25s, box-shadow .25s; }
.ui-pole-radek:focus-within { border-color: color-mix(in srgb, var(--amber) 60%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 14%, transparent); }
.ui-agent .ui-pole-radek input { flex: 1; min-width: 0; border: 0; background: transparent; backdrop-filter: none; padding: 10px 0; font-size: 15.5px; box-shadow: none; }
.ui-agent .ui-pole-radek input:focus { box-shadow: none; }
.ui-agent .ui-pole-radek button { width: 42px; height: 42px; padding: 0; border-radius: 50%; }
.ui-navrhy { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; transition: opacity .25s, transform .25s; }
.ui-agent .ui-navrhy button { border: 1px solid var(--edge); background: var(--glass); color: var(--ink-2); padding: 7px 13px; font-size: 13px; font-weight: 500; }
.ui-agent .ui-navrhy button:hover { color: var(--ink); box-shadow: none; }
/* Se skriptem se návrhy ukážou až po kliknutí do pole; bez něj jsou vidět vždy. */
html.ui-js .ui-pole:not(:focus-within) .ui-navrhy { opacity: 0; transform: translateY(6px); pointer-events: none; }
.ui-cekajici { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--edge); background: var(--glass); border-radius: 999px; padding: 6px 13px 6px 11px; font-size: 13px; color: var(--ink-2); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.ui-cekajici i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex: none; }
.ui-cekajici:hover { color: var(--ink); }
.ui-pole:focus-within .ui-cekajici { opacity: 0; pointer-events: none; }
.ui-agent .konverzace-agent { margin-top: max(24vh, 180px); }
.ui-agent .stopa { display: grid; gap: 4px; justify-items: center; margin-bottom: -4px; }
.ui-agent .stopa a { color: var(--ink-3); font-size: 13px; text-decoration: none; }
.ui-agent .stopa a:hover { color: var(--ink); }
.ui-agent .stopa a:nth-last-child(n+3) { opacity: .55; }
.ui-agent .otazka { color: var(--ink-3); font-size: 15px; margin: 0 0 -8px; }
.ui-agent .veta.mensi { font-size: clamp(22px, 3.2vw, 32px); }
.ui-agent .radky-agent { width: min(520px, 100%); margin: 0; display: grid; gap: 0; border: 1px solid var(--edge); border-radius: 18px; background: var(--glass); text-align: left; overflow: hidden; }
.ui-agent .radky-agent div { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 11px 16px; border-top: 1px solid var(--edge); font-size: 14.5px; }
.ui-agent .radky-agent div:first-child { border-top: 0; }
.ui-agent .radky-agent dt { color: var(--ink-2); }
.ui-agent .radky-agent dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ui-agent .radky-agent dd a.mono { font-size: 12px; }
@media (max-width: 640px) { .ui-agent .radky-agent div { grid-template-columns: 1fr; gap: 2px; } .ui-agent .radky-agent dd { text-align: left; } }
.ui-agent main:has(.ui-pole) .oznameni-agent { bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
.ui-agent main:has(.ui-pole) .scena-agent:not(.konverzace-agent) { margin-top: max(20vh, 150px); }
.ui-agent main:has(.ui-pole) .konverzace-agent { margin-top: max(18vh, 140px); }
.ui-agent main:has(.ui-pole) + footer > div { padding-bottom: 120px; }
.ui-agent .scena-agent .ui-cekajici { position: static; transform: none; margin-top: 4px; }
.ui-agent .scena-agent .ui-cekajici { max-width: none; white-space: normal; }

/* ---------- oblasti: jednotná hlavička stránek mimo domov (audit UI 30. 9.) ---------- */
.ui-agent .oblast-hlava { display: grid; gap: 12px; margin: 4vh 0 6px; }
.ui-agent .oblast-cesta { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-3); }
.ui-agent .oblast-cesta a { color: var(--ink-2); text-decoration: none; display: inline-flex; gap: 7px; align-items: center; }
.ui-agent .oblast-cesta a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.ui-agent .oblast-cesta a:hover { color: var(--ink); }
.ui-agent .oblast-veta { font-size: clamp(28px, 4vw, 40px); font-weight: 350; letter-spacing: -.03em; line-height: 1.12; margin: 0; max-width: 24ch; }
.ui-agent .oblast-pod { color: var(--ink-2); font-size: 16px; max-width: 56ch; margin: 0; }
.ui-agent .oblast-akce { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.ui-agent .oblast-akce form { margin: 0; }
.ui-agent .oblast-hlava[data-stav="red"] .oblast-cesta a::before { background: var(--red); box-shadow: 0 0 10px var(--red); }
.ui-agent .oblast-hlava[data-stav="green"] .oblast-cesta a::before { background: var(--green); box-shadow: 0 0 10px var(--green); }
.ui-agent .oblast-hlava[data-stav="cyan"] .oblast-cesta a::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: ui-pulz 1.4s ease-in-out infinite; }
@keyframes ui-pulz { 50% { opacity: .35; } }

/* Doplňující údaje nejsou kód: bezpatkově a menší. Adresy a kódy zůstávají strojově. */
.ui-agent .feed-meta { font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); }
/* Navigaci dole nahrazuje cesta v hlavičce a „Kde co je". */
.ui-agent main > .odkazy { display: none; }

/* Sbalené technické podrobnosti. */
.ui-agent details.podrobnosti { border-top: 1px solid var(--edge); padding-top: 10px; }
.ui-agent details.podrobnosti > summary { cursor: pointer; color: var(--ink-3); font-size: 13.5px; list-style: none; }
.ui-agent details.podrobnosti > summary::-webkit-details-marker { display: none; }
.ui-agent details.podrobnosti > summary::before { content: "+ "; }
.ui-agent details.podrobnosti[open] > summary::before { content: "− "; }
.ui-agent details.podrobnosti > :not(summary) { margin-top: 12px; }

/* Adresa ke zkopírování. */
.ui-agent .kopirovat { display: flex; gap: 8px; align-items: center; }
.ui-agent .kopirovat .feed-url { flex: 1; min-width: 0; }

/* Karta e-shopu v „Moje e-shopy". */
.ui-agent .eshopy { display: grid; gap: 10px; }
.ui-agent .eshop-karta { display: grid; grid-template-columns: 12px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--edge);
  border-radius: 18px; background: var(--glass); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; }
.ui-agent a.eshop-karta:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); transform: translateY(-1px); }
.ui-agent .eshop-karta strong { font-weight: 550; }
.ui-agent .eshop-karta small { display: block; color: var(--ink-2); font-size: 13.5px; }
.ui-agent .eshop-jmeno { display: flex; gap: 12px; align-items: center; min-width: 0; }

/* The shop's icon from its website, or its initial in a circle (_znak_obchodu.html). */
.znak-obchodu { display: inline-grid; place-items: center; flex: none; width: var(--z, 20px); height: var(--z, 20px); border-radius: 50%;
  border: 1px solid var(--rule, currentColor); font-size: calc(var(--z, 20px) * .5); font-weight: 600; line-height: 1; overflow: hidden; vertical-align: middle; }
.znak-obchodu:has(img) { border-radius: 4px; border: 0; }
.znak-obchodu img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Klidné stránky (přihlášení, chyby) — úzký sloupec uprostřed. */
.ui-agent .klidna { width: min(440px, 100%); margin: 8vh auto 0; display: grid; gap: 18px; }
.ui-agent .klidna h1 { font-size: clamp(26px, 3.4vw, 34px); }

/* Chyba jako scéna: věta + další krok. */
.ui-agent .scena-agent.chyba .veta { max-width: 26ch; }

@media (prefers-reduced-motion: reduce) { .ui-agent .oblast-hlava[data-stav="cyan"] .oblast-cesta a::before { animation: none; } }

/* Přihlášení, registrace, obnova hesla: úzký klidný sloupec. */
.ui-agent body.klidna-stranka main { max-width: 460px; padding-top: max(14vh, 110px); }
.ui-agent body.klidna-stranka .section-head { border: 0; }
.ui-agent body.klidna-stranka .notice { gap: 12px; }
/* Odhlášení v „Kde co je" vypadá jako ostatní odkazy oblasti. */
.ui-odhlasit { margin: 0; }
.ui-odhlasit button { all: unset; cursor: pointer; color: var(--ink-2); font-size: 14px; padding: 6px 10px; margin: 0 -10px; border-radius: 10px; display: block; }
.ui-odhlasit button:hover, .ui-odhlasit button:focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }

/* Test UI 30. 9.: adresa feedu bez posuvníku — celá jde zkopírovat tlačítkem. */
.ui-agent .kopirovat .feed-url { overflow: hidden; text-overflow: ellipsis; }
/* Domov a konverzace: patička pod okrajem obrazovky, ne uprostřed nad polem. */
.ui-agent main:has(.ui-pole) { min-height: calc(100vh - 40px); }

/* ---------- krok 1: domov a konverzace podle prototypu (zivy.html) ----------
   Jeviště na celou výšku: scéna dole nad polem, tvar nad ní, bez patičky. */
.ui-agent main:has(.ui-pole) { min-height: 100vh; min-height: 100dvh; justify-content: flex-end; padding-top: 0;
  padding-bottom: calc(15vh + 64px + env(safe-area-inset-bottom, 0px)); }
.ui-agent main:has(.ui-pole) .scena-agent, .ui-agent main:has(.ui-pole) .scena-agent:not(.konverzace-agent),
.ui-agent main:has(.ui-pole) .konverzace-agent { margin-top: 0; }
.ui-agent main:has(.ui-pole) + footer { display: none; }
.ui-agent .scena-agent { gap: 22px; }
.ui-agent .scena-agent .veta { margin: 0; max-width: 24ch; }
.ui-agent .scena-agent .veta b { font-weight: 550; }
.ui-agent .scena-agent .veta .pozdrav { color: inherit; font-size: inherit; }
.ui-agent .scena-agent .pod { margin: -8px 0 0; }
/* Stav scény jako proměnná — září z ní hlavní tlačítko i pole. */
.ui-agent [data-agent-stav="amber"] { --stav: var(--amber); } .ui-agent [data-agent-stav="cyan"] { --stav: var(--cyan); }
.ui-agent [data-agent-stav="green"] { --stav: var(--green); } .ui-agent [data-agent-stav="red"] { --stav: var(--red); }
.ui-agent .scena-agent .akce > :first-child button:not(.ghost), .ui-agent .scena-agent .akce > a.button:first-child:not(.ghost) {
  border: 0; box-shadow: 0 10px 40px -12px color-mix(in srgb, var(--stav, var(--amber)) 70%, transparent); }
.ui-agent .scena-agent .akce > :first-child button:not(.ghost):hover, .ui-agent .scena-agent .akce > a.button:first-child:not(.ghost):hover { transform: translateY(-2px) scale(1.02); }
.ui-agent .scena-agent .akce .ghost { padding: 12px 20px; font-size: 14.5px; }
/* Rozdělaná konverzace mezi návrhy u pole. */
.ui-agent .ui-navrhy .ui-cekajici { position: static; transform: none; }
.ui-agent .ui-pole-radek:focus-within { border-color: color-mix(in srgb, var(--stav, var(--amber)) 60%, transparent); }
/* Víc místa pro tvar: scéna níž, „Ještě N věcí" jako drobný řádek (prototyp ho nemá). */
.ui-agent main:has(.ui-pole) .dalsi-veci { margin-top: -6px; border-top: 0; padding-top: 0; }
.ui-agent main:has(.ui-pole) .dalsi-veci summary { font-size: 13px; color: var(--ink-3); }
/* Při psaní patří místo nad polem návrhům otázek. */
.ui-agent main:has(.ui-pole:focus-within) .dalsi-veci { opacity: 0; pointer-events: none; transition: opacity .2s; }

/* ---------- krok 2: rozhovor (formulář jako rozhovor) ---------- */
.ui-agent .kroky-rozhovoru { display: flex; gap: 8px; justify-content: center; }
.ui-agent .kroky-rozhovoru i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background .3s, transform .3s; }
.ui-agent .kroky-rozhovoru i.hotovo { background: var(--green); }
.ui-agent .kroky-rozhovoru i.ted { background: var(--stav, var(--amber)); box-shadow: 0 0 10px var(--stav, var(--amber)); transform: scale(1.25); }
/* Nabídnuté odpovědi jsou vidět vždy — jsou to odpovědi, ne nápověda. */
html.ui-js .ui-pole .ui-navrhy--vzdy, .ui-agent .ui-navrhy--vzdy { opacity: 1; transform: none; pointer-events: auto; }
html.ui-js .ui-pole:not(:focus-within) .ui-navrhy.ui-navrhy--vzdy { opacity: 1; transform: none; pointer-events: auto; }
/* Jeviště pro každou scénu agenta, i bez pole (konec rozhovoru, chyba, hledání feedů). */
.ui-agent main:has(.scena-agent) { min-height: 100vh; min-height: 100dvh; justify-content: flex-end; padding-top: 0;
  padding-bottom: calc(9vh + 72px + env(safe-area-inset-bottom, 0px)); }
.ui-agent main:has(.scena-agent) .scena-agent { margin-top: 0; }
.ui-agent main:has(.scena-agent) + footer { display: none; }

/* ---------- krok 2b: kategorie po jedné ---------- */
.ui-agent .mrak { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; max-width: 360px; }
.ui-agent .mrak i { width: 11px; height: 11px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px color-mix(in srgb, var(--green) 50%, transparent);
  animation: ui-tecka .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.ui-agent .mrak i.nejiste { background: var(--amber); box-shadow: 0 0 12px color-mix(in srgb, var(--amber) 60%, transparent); }
.ui-agent .mrak i:nth-child(n) { animation-delay: calc(var(--i, 0) * 1ms); }
@keyframes ui-tecka { from { opacity: 0; transform: scale(.3); } }
.ui-agent .kat-karta { width: min(460px, 100%); display: grid; gap: 8px; text-align: left; padding: 18px 20px; border: 1px solid var(--edge);
  border-radius: 20px; background: var(--glass); }
.ui-agent .kat-karta small { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ui-agent .kat-z { font-size: 20px; font-weight: 500; }
.ui-agent .kat-na { font-size: 16px; color: var(--ink-2); }
.ui-agent .kat-na b { color: var(--ink); font-weight: 550; }
/* Health stage 4, "Write my own text": a long shop text is context, not the headline; the fields take the width. */
.ui-agent .vlastni-text .kat-na { display: grid; gap: 6px; }
.ui-agent .vlastni-text .kat-na input, .ui-agent .vlastni-text .kat-na textarea { width: 100%; box-sizing: border-box; }
.ui-agent .vlastni-text .kat-ted { font-size: 14px; color: var(--ink-2); }
.ui-agent .kat-proc { font-size: 13px; color: var(--ink-3); margin: 0; }
.ui-agent .kat-jine { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ui-agent .kat-jine form { margin: 0; }
@media (prefers-reduced-motion: reduce) { .ui-agent .mrak i { animation: none; } }

/* ---------- krok 2c: produkty jako tečky (podle prototypu) ---------- */
/* The tooltip hangs off the dot grid, not off the dot (UX 4 Oct 2026): a tip
   centred on a dot at the edge of the grid stuck out of the page by up to half
   its width, and because hidden tips still take room, /agent/reklama scrolled
   sideways at 375 px (431 px wide). Now the dot is not a containing block
   (position static, no transform - its hover state grows the ring instead of
   scaling), so the tip's containing block is the grid: left/right 0 with
   auto margins centre it in the grid and max-width 100% keeps it inside, while
   top: auto leaves it at the dot's own row, 12 px under the dot. Shown on
   hover, on keyboard focus and on a tap (:focus), as before. */
.ui-agent .tecky-produktu { position: relative; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 420px; }
.ui-agent .tecka-produkt { position: static; width: 20px; height: 20px; border-radius: 50%; background: var(--red); cursor: default;
  --ring: 5px; box-shadow: 0 0 0 var(--ring) color-mix(in srgb, var(--red) 16%, transparent), 0 0 22px color-mix(in srgb, var(--red) 50%, transparent);
  animation: ui-tecka-objevit .2s ease-out both; animation-delay: min(calc(var(--i, 0) * 6ms), 90ms); transition: box-shadow .2s; }
.ui-agent .tecka-produkt.ok { background: var(--green); box-shadow: 0 0 0 var(--ring) color-mix(in srgb, var(--green) 16%, transparent), 0 0 22px color-mix(in srgb, var(--green) 55%, transparent); }
.ui-agent .tecka-produkt:hover, .ui-agent .tecka-produkt:focus { --ring: 8px; outline: none; }
.ui-agent .tecka-produkt:focus-visible { outline: 2px solid var(--ink); outline-offset: 10px; }
@keyframes ui-tecka-objevit { from { opacity: 0; } }
.ui-agent .tecka-produkt .tip { position: absolute; top: auto; left: 0; right: 0; margin: 32px auto 0; transform: translateY(4px); opacity: 0; pointer-events: none;
  width: max-content; max-width: min(260px, 100%); box-sizing: border-box; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.35;
  padding: 7px 10px; border-radius: 10px; background: var(--ink); color: var(--bg); transition: opacity .15s, transform .15s; z-index: 5; text-align: left; }
.ui-agent .tecka-produkt .tip small { display: block; opacity: .75; margin-top: 2px; }
.ui-agent .tecka-produkt:hover .tip, .ui-agent .tecka-produkt:focus .tip { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ui-agent .tecka-produkt { animation: none; } }

/* ---------- krok 2d: ověření jako scéna — tři cesty jako volby ---------- */
.ui-agent .volby { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--edge); background: var(--glass); flex-wrap: wrap; justify-content: center; }
.ui-agent .volba-cesta { padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.ui-agent .volba-cesta:hover { color: var(--ink); }
.ui-agent .volba-cesta.vybrana { background: var(--ink); color: var(--bg); }
.ui-agent .scena-agent .proc:not(.ui-sr) { font-size: 13px; color: var(--ink-3); margin: 0; }

/* ---------- UX audit 1 Oct 2026 ---------- */
/* The bottom question bar never covers content: its empty area lets clicks
   through, hidden suggestions float above it instead of taking room, and every
   page with the bar reserves its real height (--ui-pole-h, measured in tvar.js)
   plus the safe area. */
.ui-pole { pointer-events: none; }
.ui-pole-radek, .ui-navrhy { pointer-events: auto; }
html.ui-js .ui-pole-form { position: relative; }
html.ui-js .ui-navrhy:not(.ui-navrhy--vzdy) { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); }
.ui-agent main:has(.ui-pole) { padding-bottom: calc(4vh + 48px + var(--ui-pole-h, 56px) + env(safe-area-inset-bottom, 0px)); }
.ui-agent main:has(.ui-pole) .oznameni-agent { bottom: calc(36px + var(--ui-pole-h, 56px) + env(safe-area-inset-bottom, 0px)); }
/* The Undo notice sits above the bar — reserve room for it too. */
.ui-agent main:has(.ui-pole):has(.oznameni-agent) { padding-bottom: calc(4vh + 112px + var(--ui-pole-h, 56px) + env(safe-area-inset-bottom, 0px)); }
/* Background dots stay decoration: in the content column only a faint trace,
   so headings and text keep AA contrast. */
.ui-tvar.pozadi { -webkit-mask-image: linear-gradient(90deg, #000, #000 calc(50% - 460px), rgb(0 0 0 / .3) calc(50% - 380px), rgb(0 0 0 / .3) calc(50% + 380px), #000 calc(50% + 460px));
  mask-image: linear-gradient(90deg, #000, #000 calc(50% - 460px), rgb(0 0 0 / .3) calc(50% - 380px), rgb(0 0 0 / .3) calc(50% + 380px), #000 calc(50% + 460px)); }
@media (prefers-reduced-motion: reduce) {
  .ui-agent .scena-agent > *, .ui-agent .oblast-hlava, .ui-agent .oznameni-agent { animation: none; }
  .ui-agent .mrak i, .ui-agent .tecka-produkt { animation: none; }
  .ui-agent button, .ui-agent a.button, .ui-navrhy { transition: none; }
}

/* ---------- New home (approved "Pickfirst – new home" v2, 1 Oct 2026) ----------
   One column in the normal flow: orb → the next best action → outcome metric →
   four steps → the selected step's panel → the question field at the end.
   Nothing is fixed over the content (UX audit: the bar never covers anything),
   motion is one slide under 300 ms plus one slow turn of the decorative orb;
   prefers-reduced-motion switches both off. State = colour + always text. */
.ui-agent main:has(.domov) { justify-content: flex-start; min-height: auto; padding-top: calc(76px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); max-width: 820px; }
.ui-agent main:has(.domov) + footer { display: block; }
.ui-agent main:has(.domov) .ui-pole { position: static; transform: none; width: min(620px, 100%); margin: 6px auto 0; pointer-events: auto; }
.ui-agent main:has(.domov) .ui-navrhy, html.ui-agent.ui-js main:has(.domov) .ui-pole .ui-navrhy { position: static; opacity: 1; transform: none; pointer-events: auto; }
.ui-agent main:has(.domov) .oznameni-agent { position: static; transform: none; margin: 0 auto; width: fit-content; animation: none; }
.ui-agent .domov { width: 100%; display: grid; gap: 22px; }
.ui-agent .domov > *, .ui-agent .domov-hlava > * { animation: ui-prijezd .2s cubic-bezier(.2, .8, .2, 1) both; }
.ui-agent .domov-hlava { display: grid; gap: 14px; justify-items: center; text-align: center; }
.ui-agent .domov-popisek { display: inline-flex; gap: 8px; align-items: center; margin: 0; font-size: 12.5px; letter-spacing: .04em; color: var(--ink-2); }
.ui-agent .domov-popisek .tecka { width: 8px; height: 8px; flex: none; }
.ui-agent .domov-veta { font-size: clamp(26px, 4vw, 38px); font-weight: 350; letter-spacing: -.03em; line-height: 1.15; margin: 0; max-width: 26ch; text-wrap: balance; }
.ui-agent .domov-veta b { font-weight: 550; }
.ui-agent .domov-pod { color: var(--ink-2); font-size: 16px; margin: 0; max-width: 56ch; text-wrap: balance; }
.ui-agent .domov-mezitim { color: var(--ink-2); font-size: 14px; margin: 0; max-width: 56ch; }
.ui-agent .domov-akce { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.ui-agent .domov-akce form { margin: 0; }
.ui-agent .domov-akce > :first-child button:not(.ghost), .ui-agent .domov-akce > a.button:first-child:not(.ghost) {
  border: 0; padding: 13px 26px; box-shadow: 0 10px 40px -14px color-mix(in srgb, var(--stav, var(--amber)) 70%, transparent); }
.ui-agent .domov button, .ui-agent .domov a.button, .ui-agent .domov summary.button { min-height: 44px; }
/* "Why this first?" — a toggle that opens the reason inline. */
.ui-agent .proc-toggle { display: inline-block; }
.ui-agent .proc-toggle[open] { flex-basis: 100%; display: grid; justify-items: center; gap: 8px; }
.ui-agent .proc-toggle > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.ui-agent .proc-toggle > summary::-webkit-details-marker { display: none; }
.ui-agent .proc-toggle[open] > summary { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.ui-agent .proc-toggle > p { flex-basis: 100%; margin: 4px auto 0; max-width: 56ch; color: var(--ink-2); font-size: 14.5px; padding: 12px 16px;
  border: 1px solid var(--edge); border-radius: 16px; background: var(--glass); text-align: left; }
/* The orb: an empty slot of the layout — the living canvas sphere (tvar.js)
   is drawn into it, centred and sized by this box, so it never covers text. */
.ui-agent .orb { width: 112px; height: 112px; flex: none; }
/* The outcome metric — the same block on every status page. */
.ui-agent .pripravenost { display: grid; gap: 10px; padding: 14px 18px; border: 1px solid var(--edge); border-radius: 18px; background: var(--glass); }
.ui-agent .pripravenost-veta { margin: 0; font-size: 15.5px; max-width: none; }
.ui-agent .pripravenost-veta b { font-weight: 600; }
.ui-agent .pripravenost-veta small { color: var(--ink-2); font-size: 12.5px; }
.ui-agent .pripravenost-nalez { margin: 0; font-size: 14px; color: var(--ink-2); max-width: none; }
.ui-agent .pripravenost-nalez b { font-weight: 600; color: var(--ink); }
.ui-agent .pripravenost-pruh { height: 6px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.ui-agent .pripravenost-pruh i { display: block; height: 100%; border-radius: 9px; background: var(--green); }
.ui-agent .pripravenost-dal { font-size: 14px; color: var(--ink); text-underline-offset: 3px; width: fit-content; }
/* Four steps. */
.ui-agent .kroky-v2 ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ui-agent .krok-v2 { display: flex; gap: 10px; align-items: center; min-height: 56px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 16px;
  background: var(--glass); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.ui-agent .krok-v2:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.ui-agent .krok-v2[aria-expanded="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ui-agent .krok-v2-cislo { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 12.5px var(--mono-f);
  border: 1.5px solid var(--ink-3); color: var(--ink-2); }
.ui-agent .krok-v2-text { display: grid; line-height: 1.25; min-width: 0; }
.ui-agent .krok-v2-text b { font-weight: 550; font-size: 14px; }
.ui-agent .krok-v2-text small { font-size: 12px; color: var(--ink-2); }
.ui-agent .krok-v2--done .krok-v2-cislo { background: var(--green); border-color: var(--green); color: var(--bg); }
/* Done, an improvement still open: green ring, not filled. */
.ui-agent .krok-v2--improve .krok-v2-cislo { border-color: var(--green); color: var(--ink); background: color-mix(in srgb, var(--green) 16%, transparent); }
.ui-agent .krok-v2--now .krok-v2-cislo { border-color: var(--amber); color: var(--ink); box-shadow: 0 0 12px color-mix(in srgb, var(--amber) 55%, transparent); }
.ui-agent .krok-v2--problem .krok-v2-cislo { background: var(--red); border-color: var(--red); color: var(--bg); }
.ui-agent .krok-v2--later { color: var(--ink-2); }
/* A step's panel: task rows. */
.ui-agent .panel-v2 ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--edge); border-radius: 18px; background: var(--glass); overflow: hidden; }
.ui-agent .ukol { display: grid; grid-template-columns: 12px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--edge); }
.ui-agent .ukol:first-child { border-top: 0; }
.ui-agent .ukol-text p { margin: 0; font-size: 15px; max-width: none; }
.ui-agent .ukol-text b { font-weight: 600; }
.ui-agent .ukol-text small { display: block; color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.ui-agent .ukol-akce { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.ui-agent .ukol-akce form { margin: 0; }
.ui-agent .ukol-akce .mono { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.ui-agent .ukol-akce button, .ui-agent .ukol-akce a.button { padding: 9px 16px; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.ui-agent .ukol-ne { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.ui-agent .ukol--done .ukol-text p, .ui-agent .ukol--waiting .ukol-text p { color: var(--ink-2); }
.ui-agent .tecka--ink { --c: var(--ink-3); box-shadow: none; }
.ui-agent .domov-info { margin: 0; max-width: none; font-size: 14px; color: var(--ink-2); padding: 0 4px; }
/* Problem: how to fix. */
.ui-agent .domov-oprava { width: min(560px, 100%); text-align: left; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--red) 40%, var(--edge)); border-radius: 18px;
  background: color-mix(in srgb, var(--red) 6%, var(--glass)); }
.ui-agent .domov-oprava h2 { margin: 0 0 6px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); }
.ui-agent .domov-oprava ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14.5px; }
/* Results: tiles, the recommended change, lists. */
.ui-agent .dlazdice { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ui-agent .dlazdice li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 16px; background: var(--glass); text-align: left; }
.ui-agent .dlazdice-popis { font-size: 12.5px; color: var(--ink-2); }
.ui-agent .dlazdice strong { font-size: 22px; font-weight: 450; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ui-agent .dlazdice small { font: 12px var(--mono-f); color: var(--ink-2); }
.ui-agent .doporuceni { width: 100%; display: grid; gap: 10px; justify-items: center; padding: 18px; border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--edge));
  border-radius: 20px; background: var(--glass); }
.ui-agent .doporuceni-veta { margin: 0; font-size: 19px; max-width: 40ch; }
.ui-agent .doporuceni-veta b { font-weight: 600; }
.ui-agent .doporuceni-dopad, .ui-agent .doporuceni-pozn { margin: 0; color: var(--ink-2); font-size: 14.5px; max-width: 56ch; }
.ui-agent .domov-seznam { width: 100%; text-align: left; }
.ui-agent .domov-seznam h2 { margin: 0 0 8px; }
.ui-agent .domov-seznam ol, .ui-agent .domov-seznam ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--edge); border-radius: 16px; background: var(--glass); overflow: hidden; }
.ui-agent .domov-seznam li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-top: 1px solid var(--edge); font-size: 14.5px; }
.ui-agent .domov-seznam li:first-child { border-top: 0; }
.ui-agent .domov-seznam li > :last-child { color: var(--ink-2); text-align: right; }
/* First visit. */
.ui-agent .domov--prvni { margin-top: 10vh; }
.ui-agent .prvni-form { display: flex; gap: 8px; width: min(520px, 100%); padding: 6px; border: 1px solid var(--edge); border-radius: 999px; background: var(--glass); }
.ui-agent .prvni-form:focus-within { border-color: color-mix(in srgb, var(--amber) 60%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--amber) 14%, transparent); }
.ui-agent .prvni-form input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 10px 14px; font-size: 16px; }
.ui-agent .prvni-form input:focus { box-shadow: none; }
.ui-agent .prvni-form button { border: 0; min-height: 44px; }
.ui-agent .domov-mezitim a { color: var(--ink); text-underline-offset: 3px; }
/* Mobile (390 px): same order, steps as a vertical list, full-width buttons, 44 px targets. */
@media (max-width: 640px) {
  .ui-agent main:has(.domov) { padding-left: 16px; padding-right: 16px; }
  .ui-agent .kroky-v2 ol { grid-template-columns: 1fr; }
  .ui-agent .dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-agent .domov-akce { flex-direction: column; align-items: stretch; width: 100%; }
  .ui-agent .domov-akce > *, .ui-agent .domov-akce form button, .ui-agent .domov-akce a.button, .ui-agent .proc-toggle > summary { width: 100%; justify-content: center; }
  .ui-agent .ukol { grid-template-columns: 12px 1fr; }
  .ui-agent .ukol-akce { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .ui-agent .ukol-akce form, .ui-agent .ukol-akce form button, .ui-agent .ukol-akce a.button { width: 100%; justify-content: center; }
  .ui-agent .orb { width: 96px; height: 96px; }
  .ui-agent .domov-seznam li { flex-direction: column; gap: 2px; }
  .ui-agent .domov-seznam li > :last-child { text-align: left; }
  .ui-agent .prvni-form { flex-direction: column; border-radius: 22px; }
  .ui-agent .prvni-form button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-agent .domov > *, .ui-agent .domov-hlava > * { animation: none; }
  .ui-agent .krok-v2 { transition: none; }
}
/* The "Why" toggles look like the ghost pills next to them. */
.ui-agent summary.button { border: 1px solid var(--edge); background: var(--glass); color: var(--ink-2); border-radius: 999px;
  padding: 11px 20px; font: 550 14.5px var(--sans); text-decoration: none; }
.ui-agent summary.button:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.ui-agent .proc-toggle > p { box-sizing: border-box; max-width: min(56ch, 100%); }
@media (max-width: 640px) {
  /* A wrapping column would put the opened reason into a second column, off screen. */
  .ui-agent .domov-akce { flex-wrap: nowrap; }
  .ui-agent .proc-toggle[open] { display: block; flex-basis: auto; }
  .ui-agent .proc-toggle > p { margin-top: 8px; }
}
/* Target cost of sale: one quiet line, "change" opens a small form (home results, GPT Ads). */
.cilove-pno { font-size: 14px; color: var(--ink-2); }
.cilove-pno > summary { cursor: pointer; list-style: none; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.cilove-pno > summary::-webkit-details-marker { display: none; }
.cilove-pno-zmenit { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cilove-pno-form { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: center; margin: 4px 0 0; }
.cilove-pno-form label { flex-basis: 100%; font-size: 13.5px; text-transform: none; letter-spacing: 0; font-weight: 450; color: var(--ink-2); }
.cilove-pno-pole { display: inline-flex; gap: 6px; align-items: center; }
.cilove-pno-pole input { width: 6em; min-height: 44px; text-align: right; }
.cilove-pno-form button { min-height: 44px; }
.cilove-pno-chyba { flex-basis: 100%; margin: 0; color: var(--red); font-size: 13.5px; }
.cilove-pno-pozn { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--ink-2); }
/* Conversation: the orb in its slot above the question, like on the home. */
.ui-agent .konverzace-agent .orb { margin: 0 auto 4px; width: 88px; height: 88px; }
/* "Show which": the products a data-gap task counts. */
.ui-agent .seznam-chybi { list-style: none; margin: 4px auto 0; padding: 0; width: 100%; max-width: 640px; display: grid; gap: 6px; text-align: left; }
.ui-agent .seznam-chybi li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--edge); border-radius: 14px; background: var(--glass); }
.ui-agent .seznam-chybi small { color: var(--ink-2); white-space: nowrap; }
/* Verification on Shoptet: the how-to steps inside the card (no overflow past its edge). */
.ui-agent .kat-karta > * { min-width: 0; }
.ui-agent .kat-karta:has(.navod-kroky) { width: min(560px, 100%); }
.ui-agent .navod-kroky { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14.5px; }
.ui-agent .navod-pozn { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); max-width: none; }

/* ---------- Back to the prototype (slice 1, 5 Oct 2026, docs/ui-zasady.md) ----------
   The scene grammar: meta line (mono 13 px) → one sentence (36 px / 400, the key
   fact in 600) → one supporting sentence (16 px) → one primary + one secondary,
   in a centred column of at most 760 px; then calm panels of rows. */
.ui-agent main:has(.domov) { max-width: calc(760px + 32px); }
.ui-agent .domov-popisek { font: 400 13px/1.4 var(--mono-f); letter-spacing: 0; color: var(--ink-3); }
.ui-agent .domov-veta, .ui-agent .scena-agent .veta { font-size: clamp(28px, 4vw, 36px); font-weight: 400; letter-spacing: -.025em; line-height: 1.18; max-width: 24ch; }
.ui-agent .domov-veta b, .ui-agent .scena-agent .veta b { font-weight: 600; }
.ui-agent .domov-pod, .ui-agent .scena-agent .pod { font-size: 16px; color: var(--ink-2); max-width: 52ch; }
/* The orb: 80 px, its space reserved before the canvas draws (no layout shift). */
.ui-agent .orb { width: 80px; height: 80px; flex: none; }
.ui-agent .konverzace-agent .orb { width: 80px; height: 80px; }
/* Cards: paper on the warm ground, one hairline, 16 px radius, no shadow. */
.ui-agent .pripravenost, .ui-agent .panel-v2 ul, .ui-agent .domov-seznam ol, .ui-agent .domov-seznam ul, .ui-agent .dlazdice li,
.ui-agent .krok-v2, .ui-agent .doporuceni { background: var(--glass); border-color: var(--edge); }
.ui-agent .panel-v2 ul, .ui-agent .pripravenost, .ui-agent .doporuceni { border-radius: 16px; }
/* The one recommendation is the only card with an ink border. */
.ui-agent .doporuceni { border: 1px solid var(--ink); }
/* Primary = filled ink pill; the glow is the state colour of the orb, nothing else. */
.ui-agent .domov-akce > :first-child button:not(.ghost), .ui-agent .domov-akce > a.button:first-child:not(.ghost),
.ui-agent summary.button.primarni { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.ui-agent summary.button.primarni:hover { color: var(--bg); border-color: var(--ink); }
.ui-agent .oprava-toggle[open] > summary.primarni { color: var(--bg); }
/* Fix steps / recommendation steps: a plain numbered list in the flow — no coloured box. */
.ui-agent .kroky-opravy { margin: 4px auto 0; padding-left: 22px; max-width: 56ch; display: grid; gap: 6px; text-align: left; font-size: 15px; color: var(--ink-2); }
.ui-agent .doporuceni .kroky-opravy { margin: 0; }
/* A calm panel with a small heading (the rows of a blocked campaign, the next step). */
.ui-agent .panel-klidny { display: grid; gap: 8px; width: 100%; text-align: left; }
.ui-agent .panel-nadpis { margin: 0 4px; font: 400 13px/1.4 var(--mono-f); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.ui-agent .panel-klidny .ukol-akce .button, .ui-agent .panel-klidny .ukol-akce button { white-space: nowrap; }
/* Row actions stay small; the scene above holds the one primary. */
.ui-agent .panel-v2 .ukol-akce button:not(.ghost), .ui-agent .panel-v2 .ukol-akce a.button:not(.ghost) { padding: 9px 16px; }
/* The inline confirmation under the sentence (replaces toasts over the scene). */
.ui-agent .potvrzeni { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; margin: 0; max-width: 56ch;
  font-size: 14px; color: var(--ink-2); }
/* The dot is drawn, not a span: the status text is the first thing in the element. */
.ui-agent .potvrzeni::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green); }
.ui-agent .potvrzeni form { margin: 0; display: inline; }
.ui-agent button.odkaz { all: unset; cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; min-height: 44px;
  display: inline-flex; align-items: center; padding: 0 4px; }
.ui-agent button.odkaz:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* Step 3/4 done in itself while an earlier step is open: "waits for step N". */
.ui-agent .krok-v2--held .krok-v2-cislo { border: 1.5px dashed var(--green); color: var(--ink-2); background: transparent; }
.ui-agent .krok-v2--held { color: var(--ink-2); }
/* The info line: an icon that exists (the ⓘ glyph rendered as a box). */
.ui-agent .domov-info { display: flex; gap: 8px; align-items: flex-start; }
.ui-agent .domov-info .ui-ikona { margin-top: 3px; }
/* Header: the wordmark alone on wide screens; where the mark replaces it, the
   mark is the real one (rounded square + amber dot), not an empty square. */
/* Connections overview: the services as rows of one panel, the scene stays centred. */
.ui-agent .napojeni-scena .panel-klidny { max-width: 640px; }
@media (max-width: 640px) {
  .ui-agent .panel-klidny .ukol-akce .button, .ui-agent .panel-klidny .ukol-akce button { white-space: normal; }
  .ui-agent .orb { width: 72px; height: 72px; }
}

/* A scene taller than the screen starts under the header, not under it (the stage
   used to push every scene to the bottom; with a panel below it slid under the bar). */
.ui-agent main:has(.scena-agent) { padding-top: calc(84px + env(safe-area-inset-top, 0px)); }
/* The next-step row: the two actions go under the text, so the sentence keeps its width. */
.ui-agent .panel-klidny[data-dalsi] .ukol { grid-template-columns: 12px 1fr; align-items: start; }
.ui-agent .panel-klidny[data-dalsi] .ukol > .tecka { margin-top: 7px; }
.ui-agent .panel-klidny[data-dalsi] .ukol-akce { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }

/* ---------- Navigation without a SPA (5 Oct 2026) ----------
   Fast = the next page is already there: Speculation Rules prefetch it on hover
   (base.html). NO cross-document view transition — measured twice: on 1 Oct the
   new page ignored clicks while it ran; on 5 Oct (Playwright, 3 navigations ×
   5 runs) it also delayed the first paint of the new page by 250–400 ms even
   at 140 ms and without the canvas snapshot, and clicks 60 ms after the page
   appeared were still lost. Prefetch alone halved click → first paint
   (396 → 164 ms, 346 → 176 ms). Numbers in docs/ui-zasady.md, "Navigation". */

/* ---------- Back to the prototype, slice 2 (6 Oct 2026, docs/ui-zasady.md) ----------
   ONE panel under the scene, as in the prototype: a card with a small header (title +
   mono tag) and plain rows; more is one click away ("Show all N", quiet details). */
.ui-agent .panel-v2:has(> .panel-hlava) { border: 1px solid var(--edge); border-radius: 16px; background: var(--glass); text-align: left; overflow: hidden; }
.ui-agent .panel-v2:has(> .panel-hlava) > ul, .ui-agent .panel-v2 .vice ul { border: 0; border-radius: 0; background: transparent; }
.ui-agent .panel-v2:has(> .panel-hlava) .ukol:first-child { border-top: 1px solid var(--edge); }
.ui-agent .panel-hlava { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px 10px; }
.ui-agent .panel-hlava h2 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
.ui-agent .panel-hlava .mono { font: 400 12px/1.4 var(--mono-f); color: var(--ink-3); text-align: right; }
/* A row's full how-to, inline, when the row has no page of its own. */
.ui-agent .ukol-jak { font-size: 13.5px; color: var(--ink-2); }
.ui-agent .ukol-jak > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; }
.ui-agent .ukol-jak > summary::-webkit-details-marker { display: none; }
.ui-agent .ukol-jak > p { margin: 0 0 4px; max-width: 60ch; }
/* "Show all N" at the foot of a panel. */
.ui-agent .vice > summary { cursor: pointer; list-style: none; display: flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-top: 1px solid var(--edge); font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ui-agent .vice > summary::-webkit-details-marker { display: none; }
.ui-agent .vice[open] > summary { display: none; }
/* Quiet disclosure under the panel: plain lists, no cards. */
.ui-agent .podrobnosti-tiche { text-align: left; font-size: 14px; color: var(--ink-2); }
.ui-agent .podrobnosti-tiche > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: var(--ink-2); }
.ui-agent .podrobnosti-tiche > summary::-webkit-details-marker { display: none; }
.ui-agent .podrobnosti-tiche > summary::before { content: "+"; font-family: var(--mono-f); color: var(--ink-3); }
.ui-agent .podrobnosti-tiche[open] > summary::before { content: "−"; }
.ui-agent .podrobnosti-tiche h2 { margin: 14px 4px 6px; font: 400 13px/1.4 var(--mono-f); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.ui-agent .podrobnosti-tiche > p { margin: 4px 4px 8px; max-width: none; }
.ui-agent .seznam-tichy { list-style: none; margin: 0; padding: 0; }
.ui-agent .seznam-tichy li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 4px; border-top: 1px solid var(--edge); }
.ui-agent .seznam-tichy li > :first-child { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.ui-agent .seznam-tichy li > :last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.ui-agent .seznam-tichy .mono { font-size: 12.5px; }
/* The seller details as one calm panel; its submit is the page's one primary. */
.ui-agent .panel-formular { display: grid; gap: 0; }
.ui-agent .pole-mrizka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding: 4px 16px 16px; }
.ui-agent .pole { display: grid; gap: 4px; min-width: 0; }
.ui-agent .pole:first-child { grid-column: 1 / -1; }
.ui-agent .panel-formular label { font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 500; }
.ui-agent .pole input { width: 100%; box-sizing: border-box; min-height: 44px; }
.ui-agent .pole small, .ui-agent .volba small { font-size: 12.5px; color: var(--ink-2); }
.ui-agent .prepinace { display: grid; gap: 4px; padding: 12px 16px; text-align: left; border-top: 1px solid var(--edge); }
.ui-agent .panel-formular .volba { align-items: flex-start; min-height: 44px; font-weight: 400; }
.ui-agent .panel-formular .volba input { margin-top: 3px; flex: none; }
.ui-agent .panel-formular .volba span { display: grid; gap: 1px; }
.ui-agent .panel-duvody { padding: 12px 16px; border-top: 1px solid var(--edge); font-size: 14px; color: var(--ink-2); }
.ui-agent .panel-duvody p { margin: 0 0 4px; color: var(--ink); max-width: none; }
.ui-agent .panel-duvody ul { margin: 0; padding-left: 20px; border: 0; background: transparent; }
.ui-agent .panel-duvody .vice > summary { padding: 0; border: 0; }
.ui-agent .panel-odeslat { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border-top: 1px solid var(--edge); font-size: 13.5px; color: var(--ink-2); }
.ui-agent .panel-odeslat button:not(:disabled) { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); padding: 12px 24px; min-height: 44px; }
/* Switching the channel off: a quiet line, its confirmation inline (no card, no coloured box). */
.ui-agent .vypnout-odkaz { margin: 0; font-size: 13.5px; color: var(--ink-2); text-align: left; padding: 0 4px; max-width: none; }
.ui-agent .vypnout-odkaz a { color: var(--ink); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.ui-agent .vypnout-potvrzeni { text-align: left; display: grid; gap: 8px; padding: 0 4px; font-size: 14px; color: var(--ink-2); }
.ui-agent .vypnout-potvrzeni p { margin: 0; max-width: 64ch; }
.ui-agent .vypnout-potvrzeni strong { color: var(--ink); font-weight: 600; }
.ui-agent .vypnout-akce { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.ui-agent .gptads-pno { display: flex; justify-content: center; }
@media (max-width: 640px) {
  .ui-agent .pole-mrizka { grid-template-columns: 1fr; }
  .ui-agent .panel-hlava { flex-wrap: wrap; }
  .ui-agent .panel-odeslat button { width: 100%; }
  .ui-agent .seznam-tichy li { flex-direction: column; gap: 2px; }
  .ui-agent .seznam-tichy li > :last-child { text-align: left; }
  .ui-agent .vypnout-akce > * { flex: 1 1 100%; justify-content: center; }
}

/* ================= Prototype v3, slice 1: header, channel dock, channel scenes =================
   Owner-approved prototype v3 (6 Oct 2026, docs/ui-zasady.md). Last in the file, so it is the
   header's only definition. */

/* Header: ONE fixed bar, a grid of three — brand + shop switcher | channel dock | "Where is
   what" + light/dark. The side columns are minmax(0, 1fr): the dock stays centred and a long
   shop name truncates instead of pushing. Nothing in the bar wraps at 320–1920 px: below
   1240 px the dock's status words go, below 1060 px "Where is what" becomes its icon, below
   760 px the dock moves under the bar as one row of equal tiles (no scrolling) and the shop
   switcher moves into "Where is what" (My shops). A dock of 4+ channels moves down earlier
   (.dock-siroky). Checked in a browser at every width (mereni/ui/kanaly-shots.js) and by
   tests/test_ui_kanaly.py. The bar lets clicks through; only its controls take them. */
.ui-hlava { position: fixed; z-index: 20; top: calc(14px + env(safe-area-inset-top, 0px));
  left: calc(20px + env(safe-area-inset-left, 0px)); right: calc(20px + env(safe-area-inset-right, 0px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; pointer-events: none; }
.ui-roh { display: flex; gap: 8px; align-items: center; min-width: 0; white-space: nowrap; }
.ui-roh > *, .ui-dock { pointer-events: auto; }
.ui-roh.l { grid-column: 1; grid-row: 1; overflow: hidden; padding: 3px; margin: -3px; }
.ui-roh.p { grid-column: 3; grid-row: 1; justify-content: flex-end; }
.ui-znak { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--ink); display: inline-block; flex: none; position: relative; opacity: 1; }
.ui-znak b { position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
/* Every control in the bar is at least 44 × 44 px (touch target). */
.ui-roh a.ui-domu { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; min-width: 44px; padding: 0 4px; border-radius: 12px;
  text-decoration: none; color: var(--ink); flex: none; }
.ui-roh .ui-wordmark { font: 600 17px var(--sans); letter-spacing: -.02em; color: var(--ink); }
.ui-roh a.ui-obchod { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 10px 6px; border-radius: 999px;
  text-decoration: none; font-size: 13.5px; color: var(--ink-2); max-width: 140px; min-width: 0; flex: 0 1 auto; }
.ui-roh a.ui-obchod .ui-obchod-jmeno { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ui-roh a.ui-obchod i { font-style: normal; font-size: 10px; opacity: .7; flex: none; }
.ui-roh a.ui-obchod:hover, .ui-roh a.ui-obchod:focus-visible { color: var(--ink); }
.ui-kulate { border: 1px solid var(--edge) !important; background: var(--glass) !important; border-radius: 999px !important;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 0 14px !important; font: 400 13.5px var(--sans) !important; color: var(--ink-2) !important; display: inline-flex; gap: 8px; align-items: center;
  justify-content: center; min-height: 44px; min-width: 44px; white-space: nowrap; text-decoration: none; transition: color .2s, border-color .2s; }
.ui-kulate:hover, .ui-kulate[aria-expanded="true"] { color: var(--ink) !important; border-color: color-mix(in srgb, var(--ink) 25%, transparent) !important;
  transform: none !important; box-shadow: none !important; opacity: 1 !important; }
.ui-kulate kbd { font: 11px var(--mono-f); opacity: .7; }
.ui-tema, .ui-oznameni { width: 44px; padding: 0 !important; position: relative; }
.ui-oznameni b { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  font: 600 11px/18px var(--sans); background: var(--amber); color: var(--bg); text-align: center; }
.ui-ikona { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The channel dock: the platform's channels by destination. A dot from the real state; a
   status word only when the channel needs attention — green speaks by its dot alone. */
.ui-dock { grid-column: 2; grid-row: 1; display: flex; gap: 6px; padding: 4px; border-radius: 999px; border: 1px solid var(--edge); background: var(--glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); white-space: nowrap; min-width: 0; }
.ui-kanal { border-radius: 999px; padding: 0 14px; min-height: 40px; font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-2); text-decoration: none; transition: background .25s, color .2s; min-width: 0; }
.ui-agent .ui-kanal:hover, .ui-kanal:focus-visible { color: var(--ink); }
.ui-kanal[aria-current="page"], .ui-agent .ui-kanal[aria-current="page"]:hover { background: var(--ink); color: var(--bg); }
.ui-kanal i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; }
.ui-kanal span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ui-kanal small { font-size: 12.5px; opacity: .75; }
.ui-hlava.dock-siroky .ui-kanal small { display: none; }
@media (max-width: 1240px) { .ui-kanal small { display: none; } }
@media (max-width: 1060px) {
  .ui-kde-text, .ui-kulate kbd { display: none; }
  .ui-kulate.ui-kde-b { width: 44px; padding: 0 !important; }
  .ui-roh a.ui-obchod { max-width: 90px; }
}
/* The dock under the bar: one row of equal tiles, dot over the name, never a scroll. */
@media (max-width: 759.98px) {
  .ui-hlava { left: calc(16px + env(safe-area-inset-left, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); gap: 8px; }
  .ui-roh a.ui-obchod { display: none; }
  .ui-hlava { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-roh.p { grid-column: 2; }
  .ui-dock { grid-column: 1 / -1; grid-row: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-radius: 18px; margin-top: 2px; }
  .ui-kanal { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; min-height: 52px; border-radius: 14px; font-size: 12.5px; }
  .ui-kanal span { max-width: 100%; }
  .ui-agent:has(.s-dockem) main, .ui-agent:has(.s-dockem) main:has(.domov), .ui-agent:has(.s-dockem) main:has(.scena-agent) { padding-top: calc(138px + env(safe-area-inset-top, 0px)); }
  .ui-agent:has(.s-dockem) main:has(.ui-pole) { padding-top: calc(138px + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 760px) and (max-width: 979.98px) {
  .ui-hlava.dock-siroky { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-hlava.dock-siroky .ui-roh.p { grid-column: 2; }
  .ui-hlava.dock-siroky .ui-dock { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 2px; }
  .ui-agent:has(.dock-siroky) main, .ui-agent:has(.dock-siroky) main:has(.domov) { padding-top: calc(132px + env(safe-area-inset-top, 0px)); }
}

/* ---------- channel scenes: the prototype's grammar ---------- */
.ui-agent .kanal-scena .domov-hlava { gap: 20px; width: min(660px, 100%); margin: 0 auto; }
.ui-agent .kanal-scena .domov-veta { font-size: clamp(26px, 4.1vw, 42px); font-weight: 350; line-height: 1.12; letter-spacing: -.03em; max-width: none; }
.ui-agent .kanal-scena .domov-veta b { font-weight: 560; }
.ui-agent .kanal-scena .domov-pod { margin-top: -8px; max-width: 50ch; }
@media (max-width: 759.98px) { .ui-agent .kanal-scena .domov-veta { font-size: 27px; } }
/* The glass list: [dot | text + one-line sub | right meta]. */
.ui-agent .kanal-seznam { list-style: none; margin: 0; width: min(520px, 100%); border-radius: 20px; padding: 6px 16px; text-align: left;
  border: 1px solid var(--edge); background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ui-agent .kanal-polozka { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 50px; padding: 8px 0; }
.ui-agent .kanal-polozka + .kanal-polozka { border-top: 1px solid var(--edge); }
.ui-agent .kanal-polozka > i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.ui-agent .kanal-polozka > span { font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.ui-agent .kanal-polozka > span a { color: var(--ink); text-underline-offset: 3px; }
.ui-agent .kanal-polozka small { display: block; color: var(--ink-3); font-size: 12.5px; }
/* The right meta is short on a channel scene ("12 produktů") but an answer row puts examples there
   ("3 · např. Kernel …, HillVital …"); unbounded nowrap took the whole row and broke the name one
   letter per line, and pushed a 375 px page to 510 px (UX audit 7 Oct 2026, UX-10-07-01). */
.ui-agent .kanal-polozka em { font: 12px var(--mono-f); font-style: normal; color: var(--ink-3); max-width: 24ch; text-align: right; overflow-wrap: anywhere; }
/* Product dots: green may go into ads, grey may not; the name and why on hover or focus.
   The tip is positioned over the whole row (the dots are static, no transform), capped to
   the row's width and not rendered until shown — a hidden nowrap tip made a phone page
   607 px wide (measured 6 Oct 2026, as on 4 Oct for the ads scene). */
.ui-agent .kanal-tecky { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; max-width: 360px; width: 100%; margin: 0; padding: 0; list-style: none; }
.ui-agent .kanal-tecka { width: 20px; height: 20px; border-radius: 50%; background: var(--grey); outline-offset: 3px; cursor: default;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--grey) 14%, transparent); transition: box-shadow .2s; }
.ui-agent .kanal-tecka.ok { background: var(--green); box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 16%, transparent), 0 0 22px color-mix(in srgb, var(--green) 50%, transparent); }
.ui-agent .kanal-tecka:hover, .ui-agent .kanal-tecka:focus-visible { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ink) 14%, transparent); }
.ui-agent .kanal-tecka.ok:hover, .ui-agent .kanal-tecka.ok:focus-visible { box-shadow: 0 0 0 8px color-mix(in srgb, var(--green) 30%, transparent), 0 0 22px color-mix(in srgb, var(--green) 50%, transparent); }
.ui-agent .kanal-tecka .tip { display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 100%;
  font-size: 12.5px; line-height: 1.35; padding: 6px 10px; border-radius: 10px; background: var(--ink); color: var(--bg); text-align: center; pointer-events: none; z-index: 3; }
.ui-agent .kanal-tecka:hover .tip, .ui-agent .kanal-tecka:focus .tip { display: block; }
.ui-agent .kanal-tecky-radek { margin: -8px 0 0; font: 12px var(--mono-f); color: var(--ink-3); }
/* An action that opens a new tab: the ↗ icon always visible, emphasised on hover. */
.ui-agent .ven svg { width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; opacity: .55; transition: opacity .2s, transform .2s; fill: none; stroke: currentColor; stroke-width: 2; }
.ui-agent .ven:hover svg, .ui-agent .ven:focus-visible svg { opacity: 1; transform: translate(1px, -1px); }
.ui-agent .kanal-scena .domov-akce .button.ghost, .ui-agent .kanal-scena .domov-akce button.ghost { border-radius: 999px; background: var(--glass); border: 1px solid var(--edge);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 0 20px; min-height: 48px; display: inline-flex; align-items: center; color: var(--ink-2); }
.ui-agent .kanal-scena .domov-akce .button.ghost:hover, .ui-agent .kanal-scena .domov-akce button.ghost:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.ui-agent .kanal-scena .domov-akce .button.hlavni { display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; font-weight: 560;
  box-shadow: 0 10px 40px -12px color-mix(in srgb, var(--stav, var(--amber)) 70%, transparent); }
@media (max-width: 640px) {
  /* The prototype stacks the scene's actions centred at their own width, primary on top. */
  .ui-agent .kanal-scena .domov-akce { align-items: center; }
  .ui-agent .kanal-scena .domov-akce > *, .ui-agent .kanal-scena .domov-akce form button, .ui-agent .kanal-scena .domov-akce a.button { width: auto; }
}
@media (prefers-reduced-motion: reduce) { .ui-agent .kanal-tecka, .ui-agent .ven svg, .ui-kanal { transition: none; } }

/* ================= Prototype v3, slice 2: the state-driven orb and in-page scene swaps =================
   docs/ui-zasady.md sections 7 and 11. The orb (tvar.js) is drawn into the scene's .orb slot; the
   slot's size is set HERE, before the canvas or the fonts arrive, so nothing moves when it draws
   (CLS 0). The scene declares the size (app/orb.py): full on the home, small on channel scenes,
   answers and the "working" scene. Pages without a declared size keep the 80 px slot above. */
.ui-agent [data-orb-size="full"] .orb { width: 100%; height: clamp(160px, 28vh, 280px); }
.ui-agent [data-orb-size="small"] .orb { width: 100%; height: clamp(116px, 19vh, 190px); }
@media (max-width: 759.98px) {
  .ui-agent [data-orb-size="full"] .orb { height: 150px; }
  .ui-agent [data-orb-size="small"] .orb { height: 96px; }
}
/* The orb's glow (tvar.js): its own element, moved and scaled by the compositor — drawn into the
   canvas it was most of the frame time on a throttled phone. Invisible until the first frame. */
.ui-tvar-zare { position: fixed; left: 0; top: 0; width: 200px; height: 200px; z-index: 0; pointer-events: none; opacity: 0;
  border-radius: 50%; will-change: transform, opacity; }
/* The swap (prechod.js): the old scene leaves (160 ms), the new one arrives (340 ms) — opacity,
   a 10 px slide and a blur, as the prototype's .vystup.pryc. Only <main> moves; the header and
   the orb stay. Nothing here touches pointer-events: the new scene takes clicks at once. */
.ui-agent main.ui-odchod { opacity: 0; transform: translateY(10px); filter: blur(6px);
  transition: opacity .16s ease-in, transform .16s ease-in, filter .16s ease-in; }
@keyframes ui-scena-prichod { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }
.ui-agent main.ui-prichod { animation: ui-scena-prichod .34s cubic-bezier(.2, .8, .2, 1) both; }
/* One movement, not two: the per-element arrival of a full page load is off during a swap. */
.ui-agent main.ui-prichod .domov > *, .ui-agent main.ui-prichod .domov-hlava > * { animation: none; }
/* The heading takes the focus after a swap (for screen readers and the keyboard); it is not a control. */
.ui-agent main h1[tabindex="-1"]:focus { outline: none; }
/* "Working on it…" with the typed status lines (the prototype's prace()). */
.ui-agent .domov-veta.mensi { font-size: clamp(22px, 3.1vw, 31px); opacity: .9; }
.ui-agent .ui-radek { margin: 0; min-height: 1.4em; font: 13px/1.4 var(--mono-f); color: color-mix(in srgb, var(--cyan) 55%, var(--ink)); }
@media (prefers-reduced-motion: reduce) {
  .ui-agent main.ui-odchod, .ui-agent main.ui-prichod { opacity: 1; transform: none; filter: none; transition: none; animation: none; }
}

/* ================= Prototype v3, slice 3: the question field on every scene, answers, offers =================
   docs/ui-zasady.md section 12. The field waits at the bottom of every agent scene of a shop
   (base.html renders it OUTSIDE <main> and marks the body .s-polem), so an in-page swap keeps it.
   The page reserves its height — measured by tvar.js (--ui-pole-h); without the script the
   suggestions are always visible above it, so the reserve is larger — and no footer: the
   prototype has none (terms, privacy and contact are in "Where is what"). */
.ui-agent body.s-polem footer { display: none; }
.ui-agent body.s-polem main, .ui-agent body.s-polem main:has(.domov), .ui-agent body.s-polem main:has(.scena-agent) {
  padding-bottom: calc(5vh + 48px + 120px + env(safe-area-inset-bottom, 0px)); }
html.ui-js.ui-agent body.s-polem main, html.ui-js.ui-agent body.s-polem main:has(.domov), html.ui-js.ui-agent body.s-polem main:has(.scena-agent) {
  padding-bottom: calc(5vh + 48px + var(--ui-pole-h, 56px) + env(safe-area-inset-bottom, 0px)); }
/* The prototype's field: a stronger hairline and a soft shadow; the state colour rings it on focus. */
body.s-polem > .ui-pole .ui-pole-radek { border-color: var(--edge-2); box-shadow: 0 8px 30px -18px rgb(0 0 0 / .35); }
body.s-polem > .ui-pole .ui-pole-radek:focus-within { border-color: color-mix(in srgb, var(--stav, var(--amber)) 60%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--stav, var(--amber)) 14%, transparent); }
.ui-agent body.s-polem > .ui-pole .ui-pole-radek button { background: var(--ink); color: var(--bg); border: 0; display: grid; place-items: center; flex: none; }
.ui-agent body.s-polem > .ui-pole .ui-pole-radek button .ui-ikona { width: 16px; height: 16px; stroke-width: 2.4; }
.ui-agent body.s-polem > .ui-pole .ui-navrhy button { border-radius: 999px; padding: 0 14px; min-height: 40px; font: 400 13px var(--sans);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ui-agent body.s-polem > .ui-pole .ui-navrhy:empty { display: none; }
/* The scene's colour lives on the scene; the field (outside <main>) takes it from the scene that is shown. */
body.s-polem:has(main [data-agent-stav="amber"]) { --stav: var(--amber); } body.s-polem:has(main [data-agent-stav="red"]) { --stav: var(--red); }
body.s-polem:has(main [data-agent-stav="green"]) { --stav: var(--green); } body.s-polem:has(main [data-agent-stav="cyan"]) { --stav: var(--cyan); }

/* The answer scene: the trail of earlier questions, the question in quotes, the sentence, the list. */
.ui-agent .odpoved-scena .domov-veta.mensi { opacity: 1; }
.ui-agent .kanal-scena .stopa { display: grid; gap: 4px; justify-items: center; margin: 0 0 -8px; }
.ui-agent .kanal-scena .stopa button, .ui-agent .kanal-scena .stopa span { border: 0; background: none; color: var(--ink-3); font: 400 13px/1.3 var(--sans);
  padding: 4px 10px; min-height: 32px; border-radius: 999px; display: inline-flex; align-items: center; max-width: 100%; text-align: center; }
.ui-agent .kanal-scena .stopa button:hover, .ui-agent .kanal-scena .stopa button:focus-visible { color: var(--ink); background: none; opacity: 1; }
.ui-agent .kanal-scena .stopa > :not(:nth-last-child(-n+2)) { opacity: .6; }
.ui-agent .kanal-scena .otazka { color: var(--ink-3); font-size: 16px; margin: 0 0 -10px; max-width: 56ch; overflow-wrap: anywhere; }
.ui-agent .kanal-polozka.bez-tecky > b { width: 9px; }
.ui-agent .kanal-scena .proc { font-size: 13px; color: var(--ink-3); margin: 0; max-width: 56ch; }
/* "Working on it…" / "thinking…": lighter than a statement, like the prototype's .veta.mensi. */
.ui-agent .ui-prace-scena .domov-veta.mensi { font-weight: 300; opacity: .82; }
.ui-agent .ui-radek.ui-mysleni { color: var(--cyan); }

/* An agent offer: one glass row — the question, "Yes, …" (the row's own small filled pill) and "No". */
.ui-agent .nabidka { width: min(520px, 100%); box-sizing: border-box; border-radius: 18px; padding: 12px 12px 12px 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; text-align: left; flex-wrap: wrap; background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--stav, var(--amber)) 40%, var(--edge)); animation: ui-nabidka-vjezd .5s .25s cubic-bezier(.2, .8, .2, 1) both;
  transition: opacity .2s, transform .2s; }
@keyframes ui-nabidka-vjezd { from { opacity: 0; transform: translateY(6px); } }
.ui-agent .nabidka > span { font-size: 14.5px; min-width: 0; flex: 1 1 220px; }
.ui-agent .nabidka-akce { display: flex; gap: 6px; }
.ui-agent .nabidka form { margin: 0; }
.ui-agent .nabidka button.mala { border: 0; border-radius: 999px; padding: 0 16px; min-height: 40px; font: 560 13.5px var(--sans); background: var(--ink); color: var(--bg); }
.ui-agent .nabidka button.mala.ghost { background: none; color: var(--ink-2); font-weight: 400; }
.ui-agent .nabidka button.mala.ghost:hover { color: var(--ink); }
.ui-agent .nabidka button.mala:disabled { opacity: .5; border-style: none; }
.ui-agent .nabidka.hotova { justify-content: flex-start; border-color: color-mix(in srgb, var(--green) 40%, var(--edge)); min-height: 66px; }
.ui-agent .nabidka.hotova > i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex: none; }
.ui-agent .nabidka.hotova > span { flex: 1 1 auto; }
.ui-agent .nabidka.hotova > a { font-size: 13.5px; color: var(--ink); text-underline-offset: 3px; min-height: 40px; display: inline-flex; align-items: center; padding: 0 6px; }
.ui-agent .nabidka.nova { animation: ui-nabidka-vjezd .35s cubic-bezier(.2, .8, .2, 1) both; }
.ui-agent .nabidka.odchazi { opacity: 0; transform: translateY(4px); }
@media (max-width: 640px) { .ui-agent .nabidka-akce { width: 100%; justify-content: flex-end; } }

@media (prefers-reduced-motion: reduce) { .ui-agent .nabidka, .ui-agent .nabidka.nova { animation: none; transition: none; } }

/* The other part of a channel (ChatGPT: Ads / Feed) — ONE quiet full-width glass row under the
   actions, never a segmented control (owner 6 Oct 2026): dot, its state, one fact, "›". */
.ui-agent .kanal-dalsi { width: min(520px, 100%); box-sizing: border-box; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; min-height: 56px; padding: 8px 16px; border-radius: 18px; border: 1px solid var(--edge); background: var(--glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--ink-2); text-decoration: none; text-align: left;
  transition: border-color .2s, color .2s; }
.ui-agent .kanal-dalsi:hover, .ui-agent .kanal-dalsi:focus-visible { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.ui-agent .kanal-dalsi > i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.ui-agent .kanal-dalsi > span { font-size: 14.5px; min-width: 0; }
.ui-agent .kanal-dalsi small { display: block; color: var(--ink-3); font-size: 12.5px; }
.ui-agent .kanal-dalsi > b { font-weight: 400; font-size: 20px; color: var(--ink-3); transition: transform .2s; }
.ui-agent .kanal-dalsi:hover > b { transform: translateX(2px); }


/* ---------- Readability rules (owner 6 Oct 2026, prototype re-verified at 375 / 1280 px) ----------
   1. One scroll under a fixed header: a scene page starts at the header's REAL height (tvar.js
      measures it into --ui-hlava-h, again on resize) and ends above the field area; a short
      scene sits in the middle of what is left, a tall one scrolls. Nothing is anchored to the
      bottom of a fixed stage (tall scenes ran under the header and the field). */
html.ui-js.ui-agent body.s-polem main, html.ui-js.ui-agent body.s-polem main:has(.domov), html.ui-js.ui-agent body.s-polem main:has(.scena-agent) {
  padding-top: calc(var(--ui-hlava-h, 64px) + 12px); min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
.ui-agent body.s-polem main > section[data-orb-tone] { margin-block: auto; }
/* 2. The orb has its own slot at the top of each scene, sized here before anything draws; the
      canvas draws into it at radius = height / 2.9, glued to it, and never under the header. */
.ui-agent [data-orb-size="full"] .orb { height: clamp(190px, 32vh, 320px); }
.ui-agent [data-orb-size="small"] .orb { height: 150px; }
@media (max-width: 759.98px) {
  .ui-agent [data-orb-size="full"] .orb { height: clamp(150px, 24vh, 210px); }
  .ui-agent [data-orb-size="small"] .orb { height: 112px; }
}
/* 3. The header frosts what scrolls under it: a backdrop blur only (no filled ground, no border)
      whose bottom edge fades out (mask); its strength follows how far the content is under it
      (--ui-skrol 0..1 over the first 30 px, tvar.js). On a phone the channel row travels into the
      bar with the scroll (variant A, last section of this file). */
.ui-hlava::before { content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: var(--ui-skrol, 0);
  top: calc(-14px - env(safe-area-inset-top, 0px)); bottom: -22px; left: calc(-20px - env(safe-area-inset-left, 0px)); right: calc(-20px - env(safe-area-inset-right, 0px));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
@media (max-width: 759.98px) { .ui-hlava::before { left: calc(-16px - env(safe-area-inset-left, 0px)); right: calc(-16px - env(safe-area-inset-right, 0px)); } }
/* 4. A frosted band always sits behind the field, so text scrolling under it is never read
      through; while the field has focus it grows (suggestions never sit on readable content)
      and a tap on it leaves the field. It shrinks on blur — sending a question or opening a
      channel blurs the field. */
.ui-pole-pas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 14; height: calc(118px + env(safe-area-inset-bottom, 0px)); pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 55%, transparent));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to top, #000 calc(100% - 28px), transparent);
  transition: height .3s cubic-bezier(.2, .8, .2, 1); }
body.s-polem:has(#ui-q:focus) .ui-pole-pas { height: 62vh; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .ui-pole-pas { transition: none; } }

/* ================= Prototype v3: the phone header collapse — variant A (owner 6 Oct 2026) =================
   docs/ui-zasady.md section 13. Below 760 px the channel row lives under the bar and travels INTO it
   with the scroll: --ui-p goes 0 → 1 over the first 90 px (tvar.js, one rAF per frame; reduced motion
   snaps at 40 px). The row rises by --ui-dy (≈ −60 px, measured so the dots end on the bar's centre
   line), the outer tiles slide towards the middle by their own --dx (measured from the real tile
   spacing, so 2–4 channels work), the names fade out (1 − 3p), the row's glass fades and narrows
   (1 − 1.6p, scaleX 1 − .55p), the active tile's dark ground goes fast (100 % − 280 %·p) and its dot
   gets a 5 px ring. Each tile's clip box shrinks with p to 40 × 44 px around its dot, so its touch
   target is ≥ 40 px in both states and the tiles never cover each other or the bar's controls; the
   brand and the icons stay on top. Without the script --ui-p is 0: the row simply stays under the bar. */
@media (max-width: 759.98px) {
  .ui-hlava.s-dockem .ui-dock { position: absolute; left: 0; right: 0; top: calc(44px + 10px); grid-row: auto; grid-column: auto; margin: 0;
    isolation: isolate; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    transform: translateY(calc(var(--ui-p, 0) * var(--ui-dy, -60px))); }
  .ui-hlava.s-dockem .ui-dock::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 18px;
    border: 1px solid var(--edge); background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    opacity: calc(1 - var(--ui-p, 0) * 1.6); transform: scaleX(calc(1 - var(--ui-p, 0) * .55)); }
  .ui-hlava.s-dockem .ui-roh { position: relative; z-index: 2; }
  .ui-hlava.s-dockem .ui-kanal { position: relative; transition: color .2s;
    transform: translateX(calc(var(--ui-p, 0) * var(--dx, 0px)));
    clip-path: inset(0 calc(var(--ui-p, 0) * var(--cx, 0px)) calc(var(--ui-p, 0) * var(--cb, 0px)) calc(var(--ui-p, 0) * var(--cx, 0px)) round 14px); }
  .ui-hlava.s-dockem .ui-kanal span { opacity: calc(1 - var(--ui-p, 0) * 3); }
  .ui-hlava.s-dockem .ui-kanal i { transform: translateY(calc(var(--ui-p, 0) * var(--iy, 7px))) scale(calc(1 + var(--ui-p, 0) * .25)); }
  .ui-hlava.s-dockem .ui-kanal[aria-current="page"], .ui-agent .ui-hlava.s-dockem .ui-kanal[aria-current="page"]:hover {
    background: color-mix(in srgb, var(--ink) max(0%, calc(100% - var(--ui-p, 0) * 280%)), transparent);
    color: color-mix(in srgb, var(--bg) max(0%, calc(100% - var(--ui-p, 0) * 280%)), var(--ink-2)); }
  .ui-hlava.s-dockem .ui-kanal[aria-current="page"] i { box-shadow: 0 0 0 calc(var(--ui-p, 0) * 5px) color-mix(in srgb, var(--ink) 18%, transparent), 0 0 10px var(--c); }
  /* Too narrow for the dots between the full brand and the icons (320 px): the wordmark fades and
     the brand's touch target shrinks to its mark (44 px), so the dots never sit under it. */
  .ui-hlava.sbal-znak .ui-wordmark { opacity: calc(1 - var(--ui-p, 0) * 3); }
  .ui-hlava.sbal-znak a.ui-domu { clip-path: inset(-3px calc(var(--ui-p, 0) * var(--wm, 0px)) -3px -3px); }
}

/* ================= Prototype v3, slice 4: the morning story and the adaptive tiles =================
   docs/ui-zasady.md section 14. A text that changed: what stays, the old part struck (red line), the
   new part in green — tvar.js types it in. The tiles: the three scenes this person opens most (two on
   a phone, the caption only on a wider screen — the prototype's .oblibene / .ucim). */
.ui-agent .kanal-prepis { margin: 0; max-width: 100%; box-sizing: border-box; padding: 12px 18px; border-radius: 16px; font-size: 16px; line-height: 1.45;
  border: 1px solid var(--edge); background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow-wrap: anywhere; }
.ui-agent .kanal-prepis del { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--red); }
.ui-agent .kanal-prepis ins { color: var(--green); font-weight: 500; text-decoration: none; transition: opacity .2s; }
.ui-agent .oblibene { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ui-agent .oblibene-dlazdice { display: grid; gap: 0; min-height: 44px; padding: 8px 14px; border-radius: 14px; text-align: left; text-decoration: none; color: var(--ink);
  border: 1px solid var(--edge); background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: border-color .2s, transform .2s; }
.ui-agent .oblibene-dlazdice:hover, .ui-agent .oblibene-dlazdice:focus-visible { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.ui-agent .oblibene-dlazdice small { font: 11.5px/1.35 var(--mono-f); color: var(--ink-3); }
.ui-agent .oblibene-dlazdice b { font-weight: 500; font-size: 14px; }
.ui-agent .oblibene-popisek { margin: -10px 0 0; font: 11.5px var(--mono-f); color: var(--ink-3); }
@media (max-width: 759.98px) {
  .ui-agent .oblibene-dlazdice:nth-child(n+3), .ui-agent .oblibene-popisek { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ui-agent .oblibene-dlazdice, .ui-agent .kanal-prepis ins { transition: none; } }

/* ================= Prototype v3, slice 5: the first visit =================
   docs/ui-zasady.md section 15. No shop yet: no channel row, no question field, no footer (its
   links are in "Kde co je"). One scroll under the fixed header, the scene centred in what is left
   (as a shop's scenes, rule 1 above). The address field is the prototype's glass pill with "Začít"
   in one row at every width; the working scene keeps the full slot (the ring), the result and the
   failures the small one. The product dots: green may go into ads, amber may once the agent
   rewrites a health claim in its text, grey may not — they appear one by one and then take their
   colour (prvni.js, the prototype's rozsvit()). */
html.ui-js.ui-agent main:has(.prvni-scena) { padding-top: calc(var(--ui-hlava-h, 64px) + 12px); padding-bottom: 48px;
  min-height: 100vh; min-height: 100dvh; box-sizing: border-box; }
.ui-agent main:has(.prvni-scena) > .prvni-scena, .ui-agent main:has(.prvni-scena) > #run-body { margin-block: auto; }
.ui-agent main:has(.prvni-scena) + footer { display: none; }
.ui-agent .prvni-scena .domov-hlava { gap: 20px; }
.ui-agent .prvni-scena .domov-veta { max-width: 22ch; }
.ui-agent .prvni-scena .domov-veta.mensi { font-size: clamp(22px, 3.1vw, 31px); }
.ui-agent .prvni-scena .domov-mezitim { font-size: 13.5px; margin-top: -6px; }
.ui-agent .prvni-scena .prvni-form, .ui-agent .prvni-scena .prvni-form:focus-within { flex-direction: row; border-radius: 999px; padding: 6px; width: min(520px, 100%);
  border-color: var(--edge-2, var(--edge)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ui-agent .prvni-scena .prvni-form input { padding: 0 14px; min-height: 48px; font: 16px var(--sans, inherit); color: var(--ink); }
.ui-agent .prvni-scena .prvni-form button.hlavni { width: auto; flex: none; min-height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 560; font-size: 15.5px;
  background: var(--ink); color: var(--bg); box-shadow: 0 10px 40px -12px color-mix(in srgb, var(--stav, var(--amber)) 70%, transparent); }
.ui-agent .prvni-scena .prvni-form button:disabled { opacity: .6; border-style: solid; }
.ui-agent .prvni-chyba { margin: -8px 0 0; color: var(--red); font-size: 14.5px; max-width: 50ch; }
.ui-agent .prvni-scena .domov-akce { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ui-agent .prvni-scena .domov-akce .button.hlavni { display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; font-weight: 560; border-radius: 999px;
  box-shadow: 0 10px 40px -12px color-mix(in srgb, var(--stav, var(--amber)) 70%, transparent); }
.ui-agent .prvni-scena .domov-akce .button.ghost { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; color: var(--ink-2);
  background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ui-agent .kanal-tecka.fix { background: var(--amber); box-shadow: 0 0 0 5px color-mix(in srgb, var(--amber) 16%, transparent), 0 0 22px color-mix(in srgb, var(--amber) 45%, transparent); }
.ui-js .prvni-tecky .kanal-tecka { transition: background .6s, box-shadow .6s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.ui-js .prvni-tecky .kanal-tecka.zhasnuta { background: var(--grey); transform: scale(0); }
.ui-js .prvni-tecky .kanal-tecka.zhasnuta.videt { transform: scale(1); }
@media (max-width: 640px) {
  .ui-agent .prvni-scena .domov-akce { flex-direction: column; align-items: center; }
  .ui-agent .prvni-scena .domov-akce > * { width: auto; }
}
@media (prefers-reduced-motion: reduce) { .ui-js .prvni-tecky .kanal-tecka { transition: none; } }
/* Texts for shopping with AI (DP_OBOHACENI, docs/obohaceni/02-plan.md section 9; owner 7 Oct 2026).
   Preview: three products side by side, wider than the 760 px text column (it is a comparison);
   each a glass card with plain lists inside (no nested cards, no coloured boxes). */
.ui-agent .oboh-ukazka { list-style: none; padding: 0; margin: 0 0 0 calc(50% - min(570px, 50vw - 24px)); box-sizing: border-box;
  width: min(1140px, calc(100vw - 48px)); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.ui-agent .oboh-karta { display: grid; align-content: start; gap: 8px; padding: 18px 18px 14px; border: 1px solid var(--edge); border-radius: 20px; background: var(--glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); text-align: left; min-width: 0; }
.ui-agent .oboh-karta h2 { margin: 0; font-size: 17px; font-weight: 560; line-height: 1.3; overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; color: var(--ink); }
.ui-agent .oboh-ted, .ui-agent .oboh-nadpis { margin: 0; font: 12.5px/1.4 var(--mono-f); color: var(--ink-3); }
.ui-agent .oboh-nadpis { margin-top: 6px; }
.ui-agent .oboh-seznam, .ui-agent .oboh-polozky { list-style: none; margin: 0; padding: 0; display: grid; }
.ui-agent .oboh-seznam > li { padding: 8px 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ui-agent .oboh-seznam > li + li, .ui-agent .oboh-polozky > li + li { border-top: 1px solid var(--edge); }
.ui-agent .oboh-seznam .oboh-vic { color: var(--ink-3); font-size: 13px; }
.ui-agent .oboh-text b { font-weight: 560; }
.ui-agent .oboh-zdroje { margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.ui-agent .oboh-zdroje > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.ui-agent .oboh-zdroje > summary::-webkit-details-marker { display: none; }
.ui-agent .oboh-zdroje[open] > summary { color: var(--ink-2); }
.ui-agent .oboh-zdroj, .ui-agent .oboh-preklad { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.ui-agent .oboh-zdroj small, .ui-agent .oboh-preklad small { display: block; color: var(--ink-3); font-size: 12px; }
.ui-agent .oboh-zdroj a { color: var(--ink-2); text-underline-offset: 3px; }
.ui-agent .oboh-slib { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.ui-agent .oboh-slib del { text-decoration-color: var(--red); }
.ui-agent .oboh-slib span { display: block; }
/* One product per scene: the panel of items with a checkbox each. */
.ui-agent .oboh-panel { width: 100%; }
.ui-agent .oboh-panel .panel-hlava + .oboh-polozky { border-top: 1px solid var(--edge); }
.ui-agent .oboh-polozky > li { padding: 12px 16px; display: grid; gap: 2px; }
.ui-agent .oboh-volba { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; cursor: pointer;
  overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); }
.ui-agent .oboh-volba input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }
.ui-agent .oboh-polozky .oboh-slib, .ui-agent .oboh-radek-akce { margin-left: 32px; }
.ui-agent .oboh-radek-akce { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.ui-agent .oboh-upravit { font-size: 13px; color: var(--ink-3); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 32px; margin-top: 4px; }
.ui-agent .oboh-uprava { display: grid; gap: 8px; }
.ui-agent .oboh-uprava label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-3); text-transform: none; letter-spacing: 0; font-weight: 450; }
.ui-agent .oboh-uprava textarea { width: 100%; box-sizing: border-box; font: 15px/1.45 inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--edge-2, var(--edge));
  border-radius: 12px; padding: 10px 12px; resize: vertical; }
.ui-agent .oboh-uprava-akce { display: flex; gap: 14px; align-items: center; }
.ui-agent .oboh-panel > .domov-akce { padding: 14px 16px 4px; border-top: 1px solid var(--edge); }
.ui-agent .oboh-panel > .oboh-tiche { justify-content: center; padding: 0 16px 10px; font-size: 13.5px; }
.ui-agent .oboh-panel > .oboh-tiche a { color: var(--ink-2); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.ui-agent .oboh .kanal-polozka em form { margin: 0; }
@media (max-width: 640px) {
  .ui-agent .oboh-polozky > li { padding: 12px; }
  .ui-agent .oboh-polozky .oboh-slib, .ui-agent .oboh-radek-akce { margin-left: 0; }
}