/*
 * Komponenty administrácie, prihlásenia a inštalácie.
 *
 * Každá hodnota pochádza z tokens.css. Hodnota, ktorá v tokenoch nie je,
 * sem nepatrí — buď je zlá, alebo treba doplniť token.
 */

/* ---------- základ ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: var(--leading-tight); font-weight: var(--weight-semibold); }
h1 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }
p { margin: 0; }

a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

code { font-family: var(--font-mono); font-size: 0.9em; padding: 0 var(--space-1); border-radius: var(--radius-md); background: var(--surface-hover); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

[hidden] { display: none !important; }

/* Kreslenie ikony patrí sem, nie do atribútov každého SVG. Ikony skladané skriptom (palce pri
   odpovedi) atribúty nemajú a bez tohto sa vykreslia ako čierna výplň — na tmavom pozadí neviditeľná. */
.icon {
    width: 1.25rem; height: 1.25rem; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); font-size: var(--text-sm); }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: var(--space-4); top: calc(-1 * var(--space-16)); z-index: 100;
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg);
    background: var(--accent); color: var(--on-accent); font-weight: var(--weight-semibold);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- rozloženie administrácie ---------- */

.app-shell { min-height: 100vh; }

/* Zelená žiara v pravom dolnom rohu: súčasť pozadia stránky, nie vrstva nad obsahom.
   z-index -1 ju v koreni stránky dá nad pozadie, ale pod karty, tabuľky a menu. Pevná k oknu,
   pri posúvaní ostáva v rohu. */
.app-shell::before {
    content: ""; position: fixed; z-index: -1; right: -22rem; bottom: -22rem;
    width: 60rem; height: 60rem; border-radius: var(--radius-full); pointer-events: none;
    background: radial-gradient(closest-side, var(--page-glow), transparent);
}

.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: var(--sidebar-width);
    display: flex; flex-direction: column;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
    transform: translateX(-100%);
    transition: transform var(--duration-panel) var(--ease-out);
}

.sidebar-open .sidebar { transform: translateX(0); }

.sidebar-backdrop {
    position: fixed; inset: 0; z-index: 30;
    background: rgb(0 0 0 / 0.5);
}

.brand {
    position: relative;
    display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0;
    height: var(--topbar-height); padding: 0 var(--space-5);
    border-bottom: 1px solid var(--accent);
    color: var(--sidebar-text-strong); text-decoration: none;
    font-weight: var(--weight-semibold);
}

/* Prechod pod logom — opak prechodu nad pätou: od zelenej čiary slabne smerom dole, nižší.
   Je to len pozadie: menu (z-index 1) sa posúva ponad neho a oreže sa až na zelenej čiare. */
.brand::after {
    content: ""; position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    height: var(--space-8); pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in oklch, var(--accent) 30%, transparent), transparent);
}

.brand-mark {
    display: grid; place-items: center;
    width: var(--space-8); height: var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--accent); color: var(--on-accent);
    font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.02em;
}
/* Nahratá ikona namiesto „AI“: rovnaké miesto a rovnaký rádius, ale bez zeleného podkladu —
   ten by pri ikone s vlastnou farbou presvital za okrajmi. Neštvorcový obrázok sa zmestí celý. */
.brand-mark-icon { background: none; object-fit: contain; }
/* Prvé slovo názvu pri značke farbou značky (partials/brand-name). Značka stojí všade na tmavom podklade
   (hlavička, bočné panely, pás pri prihlásení — tmavé aj vo svetlom režime), preto plná farba značky;
   tmavší textový odtieň by tam mal kontrast okolo 2,5 : 1. */
.brand-accent { color: var(--accent); }

/* Menu vypĺňa celý priestor medzi zelenými čiarami loga a päty a je nad prechodmi (z-index).
   Odsadenie o výšku prechodov: bez posúvania sú položky na rovnakom mieste ako pod prechodmi. */
.nav {
    position: relative; z-index: 1;
    flex: 1; min-height: 0; overflow-y: auto;
    padding: calc(var(--space-4) + var(--space-8)) var(--space-3) calc(var(--space-4) + var(--space-12));
}

/* Posuvníky v celej administrácii: podklad s jemnou sivou čiarou a zaoblený tmavý posuvník s jemnou
   zelenou žiarou. Farby sú tokeny (svetlý/tmavý režim), tmavé bočné panely majú vždy tmavú verziu.
   Chrome, Edge a Safari: ::-webkit-scrollbar (vie aj žiaru). Firefox: scrollbar-color, len farby. */
.sidebar, .tc-sidebar {
    --scrollbar-track: var(--sidebar-bg);
    --scrollbar-line: var(--sidebar-border);
    --scrollbar-thumb: var(--zinc-800);
    --scrollbar-thumb-hover: var(--zinc-700);
    --scrollbar-glow: color-mix(in srgb, var(--lime-400) 30%, transparent);
}

@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--scrollbar-track); border-left: 1px solid var(--scrollbar-line); }
    ::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid var(--scrollbar-line); }
    ::-webkit-scrollbar-thumb {
        border: 2px solid transparent; border-radius: var(--radius-full);
        background: var(--scrollbar-thumb) padding-box;
        box-shadow: inset 0 0 0 1px var(--scrollbar-glow), 0 0 6px var(--scrollbar-glow);
    }
    ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); box-shadow: inset 0 0 0 1px var(--scrollbar-glow), 0 0 10px var(--scrollbar-glow); }
    ::-webkit-scrollbar-corner { background: var(--scrollbar-track); }
}

@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
}

/* Skupiny oddeľuje zelená čiara cez celú šírku panelu (záporný okraj ruší odsadenie menu). */
.nav-group + .nav-group {
    margin: var(--space-3) calc(-1 * var(--space-3)) 0;
    padding: var(--space-3) var(--space-3) 0;
    border-top: 1px solid var(--accent);
}

/* Názov skupiny je tlačidlo: zbalí alebo rozbalí skupinu, stav si pamätá prehliadač. */
.nav-title {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; min-height: 2rem; margin: 0 0 var(--space-1); padding: 0 var(--space-3);
    border: 0; border-radius: var(--radius-lg); background: none; cursor: pointer; text-align: left;
    font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold);
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--zinc-500);
    transition: color var(--duration) var(--ease-out);
}
.nav-title:hover { color: var(--sidebar-text-strong); }
.nav-title:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nav-title-label { flex: 1; }
.nav-toggle-icon { display: grid; place-items: center; }
.nav-toggle-icon .icon { width: 0.875rem; height: 0.875rem; }
.nav-toggle-plus, .nav-count-collapsed { display: none; }

/*
 * Zbalená skupina: skryté položky okrem aktuálnej stránky; pri Systéme počet otvorených chýb pri názve.
 *
 * Zoznam zbalených skupín je v atribúte na <html> (nastaví ho theme.js v hlavičke, aby menu pri načítaní
 * neposkočilo), skupina pozná svoj vlastný kľúč — a CSS ich vie porovnať len menovite. **Každá skupina
 * menu preto potrebuje svoj riadok tu.** Kľúč je názov skupiny bez diakritiky (helper slug()):
 * Prehľad → prehlad, Asistent → asistent, Predplatné → predplatne, Kontá → konta (skupina, ktorá
 * nahradí Predplatné, keď sa prístup nepredáva), Systém → system.
 */
:root[data-nav-collapsed~="prehlad"] [data-nav-group="prehlad"] li:not(:has(> [aria-current])),
:root[data-nav-collapsed~="asistent"] [data-nav-group="asistent"] li:not(:has(> [aria-current])),
:root[data-nav-collapsed~="predplatne"] [data-nav-group="predplatne"] li:not(:has(> [aria-current])),
:root[data-nav-collapsed~="system"] [data-nav-group="system"] li:not(:has(> [aria-current])),
:root[data-nav-collapsed~="prehlad"] [data-nav-group="prehlad"] .nav-toggle-minus,
:root[data-nav-collapsed~="asistent"] [data-nav-group="asistent"] .nav-toggle-minus,
:root[data-nav-collapsed~="predplatne"] [data-nav-group="predplatne"] .nav-toggle-minus,
:root[data-nav-collapsed~="system"] [data-nav-group="system"] .nav-toggle-minus { display: none; }

:root[data-nav-collapsed~="prehlad"] [data-nav-group="prehlad"] :is(.nav-toggle-plus, .nav-count-collapsed),
:root[data-nav-collapsed~="asistent"] [data-nav-group="asistent"] :is(.nav-toggle-plus, .nav-count-collapsed),
:root[data-nav-collapsed~="predplatne"] [data-nav-group="predplatne"] :is(.nav-toggle-plus, .nav-count-collapsed),
:root[data-nav-collapsed~="system"] [data-nav-group="system"] :is(.nav-toggle-plus, .nav-count-collapsed) { display: grid; }
.nav-count-collapsed { margin-left: 0; }

.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }

.nav-link {
    position: relative;
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 2.75rem; padding: 0 var(--space-3);
    border-radius: var(--radius-lg);
    color: var(--sidebar-text); text-decoration: none;
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

a.nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }

.nav-link[aria-current="page"] { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }

.nav-link[aria-current="page"]::before {
    content: ""; position: absolute; left: 0; top: var(--space-2); bottom: var(--space-2);
    width: 3px; border-radius: var(--radius-full); background: var(--accent);
}

.nav-link[aria-current="page"] .icon { color: var(--accent-on-dark); }

/* Počet otvorených chýb v menu. Červená na tmavom paneli, text nesie číslo aj pre čítačku. */
.nav-count {
    margin-left: auto; min-width: 1.5rem; padding: 0 var(--space-2);
    border-radius: var(--radius-full); background: var(--red-700); color: #fff;
    font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.25rem; text-align: center;
}

/* Názov položky sa nelame — pri úzkom paneli by sa inak rozpadol na dva riadky vedľa odznaku. */
.nav-link { white-space: nowrap; }

.sidebar-foot { position: relative; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--accent); font-size: var(--text-xs); color: var(--zinc-500); }

/* Prechod nad pätou: z pozadia panelu do hlavnej farby až po zelenú čiaru. Len pozadie —
   posledné položky menu cezeň prechádzajú a orežú sa na čiare. */
.sidebar-foot::before {
    content: ""; position: absolute; bottom: calc(100% + 1px); left: 0; right: 0;
    height: var(--space-12); pointer-events: none;
    background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--accent) 30%, transparent));
}
.sidebar-foot p + p { margin-top: var(--space-1); color: var(--zinc-600); }

/* Prechod rovnako vysoký ako pod logom (.brand::after): posledných 32 px do hlavnej farby a zelená čiara.
   Zelená sa mieša s priehľadnou a kladie sa na pevné pozadie. Priame miešanie s pozadím v oklch
   by išlo cez odtiene a v tmavom režime by vyšlo do modra. Pozadie musí byť nepriehľadné —
   lišta je prilepená a obsah pod ňou pri posúvaní prechádza. */
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: var(--space-3);
    height: var(--topbar-height); padding: 0 var(--space-4);
    background: linear-gradient(to bottom, transparent calc(100% - var(--space-8)), color-mix(in oklch, var(--accent) 30%, transparent)), var(--surface);
    border-bottom: 1px solid var(--accent);
}

.topbar-title { font-size: var(--text-base); font-weight: var(--weight-semibold); }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

/* Obsah na celú šírku — na veľkom monitore by pevná max. šírka nechala po bokoch prázdne pásy.
   Dlhé texty obmedzuje max-width: 65ch priamo pri odsekoch. */
.content { width: 100%; padding: var(--space-6) var(--space-4) var(--space-16); }

@media (min-width: 64rem) {
    .sidebar { transform: none; }
    /* Vyššia špecifickosť než .btn, ktoré je v súbore nižšie a nastavuje display. */
    .sidebar-backdrop, .topbar .menu-button { display: none; }
    .app-main { margin-left: var(--sidebar-width); }
    .topbar { padding: 0 var(--space-8); }
    .content { padding: var(--space-8) var(--space-8) var(--space-16); }
}

/* ---------- hlavička stránky ---------- */

.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-header p { margin-top: var(--space-1); color: var(--text-muted); max-width: 65ch; }
.page-header .actions { margin-left: auto; display: flex; gap: var(--space-2); }

/* minmax(0, 1fr): bez neho stĺpec mriežky nezmenší pod šírku najdlhšieho obsahu
   (dlhá adresa servera, pole formulára) a stránka na mobile preteká do strany. */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.stack > * { min-width: 0; }
.stack-gap { margin-top: var(--space-6); }
.stack-gap-bottom { margin-bottom: var(--space-6); }

/* Tri polia vedľa seba (limity tokenov); pod tabletom pod sebou, aby sa čísla nestláčali. */
.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Tarify vedľa seba: toľko kariet, koľko sa zmestí, najmenej 18rem na kartu. */
/* auto-fill, nie auto-fit: karta má stálu šírku aj pri jednej tarife a ďalšie idú vedľa nej, nie pod seba
   cez celú obrazovku. min(100 %, …) — na úzkom displeji sa karta zmestí bez vodorovného rolovania. */
.plan-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); align-items: start; }
.plan-card-recommended { border-color: var(--accent); }
.plan-card-trial { border-color: var(--accent-soft); }
.plan-card .card-header { gap: var(--space-2); }
.plan-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
/* Limity ako dlaždice: popis nad číslom, všetko pokope — nie riadok cez celú kartu s číslom na konci. */
.plan-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.card-body > * + .plan-limits, .card-body > * + .plan-meta { margin-top: var(--space-4); }
.plan-limits div { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-muted); }
.plan-limits .is-total dd { color: var(--accent-text); }
.plan-limits dt { font-size: var(--text-xs); color: var(--text-muted); }
.plan-limits dd { margin: 0; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.plan-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.plan-meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
.plan-meta .icon { width: 0.875rem; height: 0.875rem; }
/* Chyby: karta Len v logu nad záložkami prípadov. */
.errors-log-only { margin-bottom: var(--space-6); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
/* Stĺpec so širokou tabuľkou (napr. .stack v mriežke) by sa inak roztiahol na jej šírku a stránka by pretekala. */
.grid-2 > * { min-width: 0; }
@media (min-width: 64rem) {
    .grid-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
    /* Zoznam s tabuľkou potrebuje viac miesta než formulár vedľa neho. */
    .grid-2.is-list { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); }
    /* Dve rovnako široké karty — pri tabuľkách, aby sa jedna nemusela rolovať vodorovne. */
    .grid-2.is-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- tlačidlá ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 2.75rem; padding: 0 var(--space-4);
    border: 1px solid transparent; border-radius: var(--radius-lg);
    font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.btn .icon { width: 1.125rem; height: 1.125rem; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover { background: var(--surface-hover); }

.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn-danger { background: var(--surface); border-color: var(--danger-border); color: var(--danger-text); }
.btn-danger:hover { background: var(--danger-soft); }

.btn-block { width: 100%; }

/* Menšie tlačidlo do riadku tabuľky. Klikacia plocha ostáva aspoň 36 px na výšku
   a riadok tabuľky ju dopĺňa na pohodlný cieľ. */
.btn-sm { min-height: 2.25rem; padding: 0 var(--space-3); }

.btn-icon { width: 2.75rem; padding: 0; }

.btn:active { transform: translateY(1px); }

.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after {
    content: ""; width: 1rem; height: 1rem; border-radius: var(--radius-full);
    border: 2px solid currentColor; border-right-color: transparent;
    animation: spin 700ms linear infinite;
}

.link-button { padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-button:disabled { color: var(--text-subtle); text-decoration: none; cursor: default; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- prepínač režimu ---------- */

/* Jedno tlačidlo: vo svetlom režime mesiac (prepne na tmavý), v tmavom slnko.
   Bez JavaScriptu atribút data-theme chýba a ikonu určí systémový režim. */
.theme-toggle .icon-sun { display: none; }

:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
    :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}

/* ---------- menu používateľa ---------- */

.user-menu { position: relative; }

.user-menu > summary {
    display: flex; align-items: center; gap: var(--space-2);
    min-height: 2.75rem; padding: 0 var(--space-2);
    border-radius: var(--radius-lg); cursor: pointer; list-style: none;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: var(--surface-hover); }

.avatar {
    display: grid; place-items: center;
    width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full);
    /* Tlmená akcentová farba — tmavý kruh by v tmavom režime na tmavej lište nebolo vidieť. */
    background: var(--accent-soft); color: var(--accent-text);
    font-size: var(--text-xs); font-weight: var(--weight-bold);
}

.user-name { font-size: var(--text-sm); font-weight: var(--weight-medium); }

.user-dropdown {
    position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 50;
    min-width: 15rem; padding: var(--space-2);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.user-dropdown .who { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); }
.user-dropdown .who p:last-child { color: var(--text-muted); font-size: var(--text-sm); }
.user-dropdown button { width: 100%; justify-content: flex-start; }

@media (max-width: 39.99rem) {
    .user-name { display: none; }
}

/* ---------- karty ---------- */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); }

.card-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.card-header p { width: 100%; color: var(--text-muted); font-size: var(--text-sm); }
.card-header .actions { margin-left: auto; }

.card-body { padding: var(--space-5); }
.card-body > * + * { margin-top: var(--space-4); }

.card-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); background: var(--surface-muted); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

/* ---------- štatistiky ---------- */

.stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-bottom: var(--space-6); }

.stat { padding: var(--space-5); }
.stat-label { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.stat-label .icon { width: 1rem; height: 1rem; }
.stat-value { margin-top: var(--space-2); font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-value.is-text { font-size: var(--text-xl); }
.stat-meta { margin-top: var(--space-1); color: var(--text-subtle); font-size: var(--text-sm); }

/* Tmavá karta aj v tmavom režime: sivý rámček, inak by na tmavom pozadí splynula. */
.stat-accent { background: var(--zinc-950); border-color: var(--zinc-700); color: var(--zinc-50); }
/* Pozadie v farbe karty (nie priehľadné): posunuté tlačidlo zasahuje do riadku popisu,
   takže dlhší text sa musí skryť za ním, nie cezeň presvitať. */
.stat-accent .stat-link { color: var(--accent-on-dark); border-color: var(--zinc-700); background: var(--zinc-950); }
.stat-accent .stat-link:hover { background: var(--zinc-900); color: var(--accent-hover); }
/* Odkaz na podrobnosti stojí vedľa čísla, na jeho riadku. Dole by kartu predĺžil a v mriežke
   rovnako vysokých kariet by sa natiahli aj ostatné; hore by odsunul nadpis karty nižšie. */
.stat-row { display: flex; align-items: center; gap: var(--space-4); }
/* V riadku je len suma, popis pod ním má celú šírku karty — inak by sa zalomil vedľa tlačidla. */
.stat-row .stat-value { min-width: 0; overflow-wrap: anywhere; }
/* Tlačidlo je o kúsok nižšie než suma — opticky patrí k celej dvojici suma + popis pod ňou.
   Posun je cez position, nie cez margin: margin by zväčšil riadok a suma by sa v ňom znova vycentrovala. */
.stat-link { flex: none; position: relative; top: var(--space-5); margin-left: auto; }
/* Popis pod sumou nesmie zájsť pod posunuté tlačidlo — dlhší text sa radšej zalomí.
   Vyhradené miesto je šírka tlačidla aj s odstupom, poskladaná z hodnôt škály. */
.stat:has(.stat-link) .stat-meta { padding-right: calc(var(--space-16) + var(--space-12)); }
.stat-accent .stat-label, .stat-accent .stat-meta { color: var(--zinc-400); }
.stat-accent .stat-value { color: var(--accent-on-dark); }

.meter { width: 100%; height: var(--space-2); margin-top: var(--space-3); border-radius: var(--radius-full); background: var(--surface-hover); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.meter.is-warning span { background: var(--amber-300); }
.meter.is-compact { display: block; max-width: 12rem; height: var(--space-1); margin-top: var(--space-1); }

/* Náklady: výber mesiaca, prepínač údaja a stĺpcový graf (SVG zo servera, farby len z tried kvôli CSP). */
.month-nav { display: flex; align-items: center; gap: var(--space-2); }
.month-nav-label { min-width: 9rem; font-weight: var(--weight-semibold); text-align: center; font-variant-numeric: tabular-nums; }
.page-header .cost-rate { margin-top: var(--space-2); color: var(--text-subtle); font-size: var(--text-sm); }
/* Karta s porovnaním: údaje vľavo, krúžok tento / predchádzajúci mesiac vpravo hore. */
.stat-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; }
.stat-value-sub { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0; white-space: nowrap; }
.stat-previous { display: flex; align-items: baseline; gap: var(--space-2); }
.stat-previous::before { content: ""; flex: none; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--compare-previous); transform: translateY(-1px); }
.compare-ring { display: block; width: var(--space-12); height: var(--space-12); transform: rotate(-90deg); }
.compare-ring circle { fill: none; stroke-width: 6; }
.compare-ring .ring-track { stroke: var(--surface-hover); }
.compare-ring .ring-current { stroke: var(--compare-current); }
.compare-ring .ring-previous { stroke: var(--compare-previous); }
/* Údaje v grafe: zaškrtávacie voľby, štvorček má farbu stĺpcov údaja. */
.series-naklady { --series-color: var(--chart-cost); }
.series-tokeny { --series-color: var(--chart-tokens); }
.series-otazky { --series-color: var(--chart-questions); }
.metric-toggles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.metric-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; transition: border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out); }
a.metric-toggle:hover { border-color: var(--border-strong); color: var(--text); }
.metric-toggle[aria-current="true"] { border-color: var(--border-strong); background: var(--surface-muted); color: var(--text); }
.metric-box { display: grid; place-items: center; width: 1rem; height: 1rem; border: 2px solid var(--series-color); border-radius: var(--radius-md); color: var(--zinc-950); }
.metric-box .icon { width: 0.75rem; height: 0.75rem; stroke-width: 3; opacity: 0; }
.metric-toggle[aria-current="true"] .metric-box { background: var(--series-color); }
.metric-toggle[aria-current="true"] .metric-box .icon { opacity: 1; }
.chart-wrap { position: relative; overflow-x: auto; }
/* Bublina s hodnotami stĺpca. Nad kurzorom, aby ho neprekrývala; pri okraji sa posunie dovnútra. */
.chart-tip {
    position: absolute; z-index: 2; transform: translate(-50%, -100%); margin-top: -12px;
    padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); color: var(--text); font-size: var(--text-xs); line-height: 1.5;
    white-space: nowrap; box-shadow: var(--shadow-lg); pointer-events: none;
}
.chart-column:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.chart { display: block; width: 100%; min-width: 32rem; height: auto; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis, .chart-label { fill: var(--text-subtle); font-size: 12px; }
.chart-value { fill: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-hit { fill: transparent; }
.chart-bar { fill: var(--series-color, var(--chart-cost)); transition: opacity var(--duration) var(--ease-out); }
.chart-column:hover .chart-bar { opacity: 0.8; }
.chart-note { margin-top: var(--space-2); color: var(--text-subtle); font-size: var(--text-xs); }
.chart-empty { padding: var(--space-10) 0; color: var(--text-muted); font-size: var(--text-sm); text-align: center; }
.chart-table { margin-top: var(--space-4); }
.chart-table summary { color: var(--text-muted); font-size: var(--text-sm); cursor: pointer; }
.chart-table .table-wrap { margin-top: var(--space-3); }

/* Šírka pruhu bez inline štýlu: trieda po 5 %. */
.w-0 { width: 0; } .w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; }
.w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; }
.w-50 { width: 50%; } .w-55 { width: 55%; } .w-60 { width: 60%; } .w-65 { width: 65%; } .w-70 { width: 70%; }
.w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; }

/* ---------- zoznam úloh ---------- */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li + li { border-top: 1px solid var(--border); }

.checklist a, .checklist .item {
    display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5);
    color: inherit; text-decoration: none;
}
.checklist a:hover { background: var(--surface-muted); }
.checklist .title { font-weight: var(--weight-medium); }
.checklist .text { color: var(--text-muted); font-size: var(--text-sm); }
.checklist .arrow { margin-left: auto; align-self: center; color: var(--text-subtle); }

/* Krížik na zavretie hotového kroku. Je mimo odkazu (tlačidlo v odkaze sa nesmie vnoriť),
   preto leží nad riadkom a odkaz mu vedľa seba nechá miesto. */
.checklist li { position: relative; }
.checklist li:has(.checklist-dismiss) a { padding-right: var(--space-12); }
.checklist-dismiss { position: absolute; top: 50%; right: var(--space-3); transform: translateY(-50%); }

.check-dot {
    display: grid; place-items: center; flex: none;
    width: 1.5rem; height: 1.5rem; margin-top: 1px;
    border: 2px solid var(--border-strong); border-radius: var(--radius-full);
    color: var(--on-accent);
}
.check-dot .icon { width: 0.875rem; height: 0.875rem; }
.is-done .check-dot { background: var(--accent); border-color: var(--accent); }
.is-done .title { color: var(--text-muted); text-decoration: line-through; }

/* ---------- popisný zoznam ---------- */

.details { display: grid; gap: var(--space-3); margin: 0; }
.details div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); }
.details dt { color: var(--text-muted); }
.details dd { margin: 0; font-weight: var(--weight-medium); text-align: right; overflow-wrap: anywhere; }
.details dd.muted { font-weight: 400; max-width: 60ch; }
/* Rytmus karty (.card-body > * + *) platí aj pre zoznam údajov — margin: 0 vyššie by ho inak zrušil. */
.card-body > * + .details { margin-top: var(--space-4); }

/* ---------- tabuľky ---------- */

/* position: relative — skrytý text pre čítačky (.sr-only, absolútne umiestnený) by inak unikol
   z posúvanej tabuľky a rozšíril celú stránku na mobile. */
.table-wrap { position: relative; overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
    padding: var(--space-3) var(--space-4); text-align: left; white-space: nowrap;
    color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold);
    text-transform: uppercase; letter-spacing: 0.05em;
    background: var(--surface-muted); border-bottom: 1px solid var(--border);
}
.table th:first-child, .table td:first-child { padding-left: var(--space-5); }
.table th:last-child, .table td:last-child { padding-right: var(--space-5); }
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Tabuľka s viacerými číselnými stĺpcami v polovičnej karte — menšie odsadenie, aby sa nemusela rolovať. */
.table.is-compact th, .table.is-compact td { padding-left: var(--space-3); padding-right: var(--space-3); }
.table tr.is-selected td { background: var(--accent-soft); }
.table .cell-main { font-weight: var(--weight-medium); }
.table .cell-sub { color: var(--text-muted); }

/* Model, ktorý nie je v cenníku OpenAI: tlmený, nedá sa vybrať. */
.table tr.is-unpriced td { color: var(--text-subtle); }
.table .cell-main .badge { margin-left: var(--space-2); }

/* ---------- odznaky ---------- */

.badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.25rem; white-space: nowrap;
    color: var(--text-muted); background: var(--surface-muted);
}
.badge-success { color: var(--success-text); background: var(--success-soft); border-color: var(--success-border); }
.badge-danger { color: var(--danger-text); background: var(--danger-soft); border-color: var(--danger-border); }
.badge-warning { color: var(--warning-text); background: var(--warning-soft); border-color: var(--warning-border); }
.badge-accent { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

/* ---------- správy ---------- */

.alert {
    display: flex; gap: var(--space-3); align-items: flex-start;
    margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); font-size: var(--text-sm);
}
.alert .icon { margin-top: 1px; }
/* Upozornenie s vlastnou akciou (napr. zrušiť naplánovanú zmenu tarify). */
.alert > div { display: grid; gap: var(--space-3); justify-items: start; }
.alert p { margin: 0; }
.alert-success { color: var(--success-text); background: var(--success-soft); border-color: var(--success-border); }
.alert-error { color: var(--danger-text); background: var(--danger-soft); border-color: var(--danger-border); }
.alert-info { color: var(--text); background: var(--surface-muted); }
.alert-warning { color: var(--warning-text); background: var(--warning-soft); border-color: var(--warning-border); }
/* Zoznam nových modelov v ozname na stránke OpenAI. */
.new-models { display: grid; gap: var(--space-1); margin: 0; padding-left: var(--space-5); }

/* ---------- formuláre ---------- */

.form { display: grid; gap: var(--space-5); }

.field { display: grid; gap: var(--space-2); }

.label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.label .optional { color: var(--text-subtle); font-weight: 400; }

.input, .select {
    width: 100%; min-height: 2.75rem; padding: 0 var(--space-3);
    border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
    background: var(--surface); color: var(--text);
    font: inherit; font-size: var(--text-base);
    transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
/* Vlastná šípka v hlavnej farbe. Natívna šípka prehliadača sa lepí na okraj poľa a v každom
   prehliadači vyzerá inak; appearance: none ju odstráni a nakreslíme si ju sami.
   Je to obrázok na pozadí, nie prvok navyše — <select> deti ani ::after nedovolí. Farba je v obrázku,
   preto je celý v premennej --select-arrow (tokens.css) — farba značky z Nastavení ju prepíše. */
.select {
    appearance: none;
    padding-right: var(--space-10);
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1.125rem 1.125rem;
}

/* .input má `font: inherit`, ktoré by .mono prebilo — písmo pre zoznamy a kódy sa preto nastavuje až tu. */
.input.mono, .textarea.mono { font-family: var(--font-mono); }
/* Pole na súbor: natívne tlačidlo prehliadača zladené s ostatnými poliami. */
.input[type="file"] { padding: var(--space-2) var(--space-3); line-height: 1.5; cursor: pointer; }
.input[type="file"]::file-selector-button {
    margin-right: var(--space-3); padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    background: var(--surface-muted); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }
.label-note { color: var(--text-subtle); font-weight: 400; }
.input::placeholder { color: var(--text-subtle); }
.input:hover, .select:hover { border-color: var(--zinc-400); }
.input:focus, .select:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--lime-500) 30%, transparent); }
.input[aria-invalid="true"] { border-color: var(--danger-text); }
.input:disabled, .select:disabled { opacity: 0.6; cursor: not-allowed; }
.input[readonly] { background: var(--surface-muted); }

.hint { color: var(--text-subtle); font-size: var(--text-sm); }
.field-error { display: flex; gap: var(--space-2); color: var(--danger-text); font-size: var(--text-sm); }
.field-error .icon { width: 1rem; height: 1rem; margin-top: 2px; }
/* Upozornenie pri poli, ktoré uloženie nebráni (napr. farba značky so slabým kontrastom). */
.hint-warning { display: flex; gap: var(--space-2); color: var(--warning-text); }
.hint-warning .icon { width: 1rem; height: 1rem; margin-top: 2px; flex: none; }

/* Skupina polí (napr. prepínače) má rozloženie poľa, nie rámik prehliadača. */
fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field > legend { padding: 0; }
.checkbox { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); cursor: pointer; }
.checkbox input { width: 1.125rem; height: 1.125rem; margin: 2px 0 0; accent-color: var(--lime-500); flex: none; }
.checkbox small { display: block; color: var(--text-subtle); font-size: var(--text-sm); }

/* Výber z dvoch možností ako karty. Rámik prehliadača okolo fieldsetu do dizajnu nepatrí. */
.choice-group { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; }
@media (min-width: 40rem) {
    .choice-group .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.choice-group legend { padding: 0; }
.choice-group .choices { display: grid; gap: var(--space-3); }
.choice {
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); font-size: var(--text-sm); cursor: pointer;
    transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}
.choice:hover { border-color: var(--border-strong); }
.choice input { width: 1.125rem; height: 1.125rem; margin: 1px 0 0; accent-color: var(--lime-500); flex: none; }
.choice strong { display: block; font-weight: var(--weight-semibold); }
.choice small { display: block; margin-top: var(--space-1); color: var(--text-subtle); }
.choice:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Podľa vybranej podoby sa ukáže pole, ktoré k nej patrí — chat má doménu, agent čas. Bez skriptu.
   Formulár pri úprave vykreslí rovno len tú časť, ktorá platí, takže pravidlo nemá čo skrývať. */
/* Doménu potrebuje chat aj widget (oba bežia na webe klienta), čas len agent na odkaz. */
.form:has(#form-agent:checked) .only-chat,
.form:has(#form-chat:checked) .only-agent,
.form:has(#form-widget:checked) .only-agent { display: none; }
.only-chat, .only-agent { display: grid; gap: var(--space-5); }
/* Agent bez časového obmedzenia: pole s dĺžkou nemá čo nastavovať, preto zmizne. */
.only-agent:has(input[name="demo_unlimited"]:checked) .only-limited { display: none; }

/* Polia v rade začínajú hore: chyba alebo nápoveda pod jedným poľom nesmie posunúť susedné pole nižšie. */
.form-row { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 40rem) {
    .form-row { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
}

.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- prázdny stav ---------- */

.empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-6); text-align: center; }
.empty .icon { width: 2.5rem; height: 2.5rem; padding: var(--space-2); border-radius: var(--radius-xl); background: var(--accent-soft); color: var(--accent-text); }
.empty p { max-width: 45ch; color: var(--text-muted); font-size: var(--text-sm); }

/* ---------- účet a 2FA ---------- */

.user-dropdown .btn { width: 100%; justify-content: flex-start; }
.user-dropdown .btn .badge { margin-left: auto; }

.setup-steps { margin: 0 0 var(--space-4); padding-left: var(--space-5); display: grid; gap: var(--space-6); }
.setup-steps .title { margin-bottom: var(--space-3); font-weight: var(--weight-medium); }

/* QR kód má vždy biele pozadie — v tmavom režime by ho čítačka inak nenašla. */
.qr { display: inline-block; padding: var(--space-2); border-radius: var(--radius-lg); background: #fff; line-height: 0; }
.qr svg { width: 12rem; height: 12rem; }

.secret { margin-top: var(--space-2); font-size: var(--text-sm); letter-spacing: 0.08em; overflow-wrap: anywhere; }

.recovery-codes {
    list-style: none; margin: 0 0 var(--space-4); padding: var(--space-4);
    display: grid; gap: var(--space-2) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-muted);
    font-size: var(--text-lg); letter-spacing: 0.05em;
}

.inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.code-single { max-width: 10rem; letter-spacing: 0.15em; }

.subsection { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.subsection h3 { margin-bottom: var(--space-1); }
.subsection .hint { margin-bottom: var(--space-3); }

/* Riadok, ktorý v zapnutom režime nič nerobí (úloha CRON) — ostáva viditeľný, ale tlmený. */
tr.is-muted .cell-main { color: var(--text-muted); }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
/* Farba značky v Nastaveniach: výber farby, jej kód a ukážka tlačidla v uloženej farbe. */
.brand-color-field { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.color-input { width: var(--space-12); height: var(--space-10); padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.color-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.brand-color-sample { pointer-events: none; }
/* Riadok tlačidiel (aj každé vo vlastnom formulári) — zalomí sa, keď sa nezmestia. */
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
/* Ikona mazania v riadku: červená sa objaví až pri ukázaní, aby tabuľka nebola posiata výstrahami. */
.btn-ghost.is-danger:hover, .btn-ghost.is-danger:focus-visible { background: var(--danger-soft); color: var(--danger-text); }

.callout { border-color: var(--warning-border); }
.schema-card, .callout { margin-bottom: var(--space-6); }
.schema-missing { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.schema-missing li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

/* Prečo je úryvok vo výbere (len testovací chat): drobný riadok pod úryvkom, nesmie prekryť text predpisu. */

/* Nález kontroly citácií v prepise konverzácie — upozornenie pre správcu, nie pre návštevníka. */
.transcript-warning { display: flex; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--warning-border); border-radius: var(--radius-md); background: var(--warning-soft); color: var(--warning-text); font-size: var(--text-sm); }
.transcript-warning .icon { flex: none; width: var(--space-4); height: var(--space-4); }

/* Hodnotenie odpovede: nenápadné, kým sa naň nepozrie — nesmie prekričať samotnú odpoveď. */
.tc-rate { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-subtle); }
.tc-rate-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-subtle); cursor: pointer; transition: color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out); }
.tc-rate-btn:hover { color: var(--accent); border-color: var(--border-strong); }
.tc-rate-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tc-rate-btn .icon { width: var(--space-4); height: var(--space-4); }
.tc-rate-done { color: var(--text-muted); }
/* Na dotyk musí byť cieľ aspoň 44 px; pri myši by taký veľký palec pod odpoveďou zbytočne kričal. */
@media (pointer: coarse) { .tc-rate-btn { width: var(--space-12); height: var(--space-12); } }

/* ---------- chaty ---------- */

.breadcrumb { margin-bottom: var(--space-1); font-size: var(--text-sm); }
.breadcrumb a { color: var(--text-muted); }

.textarea { min-height: 5rem; padding: var(--space-2) var(--space-3); resize: vertical; line-height: var(--leading-normal); }
/* Dlhý text (verejné dokumenty) — pri piatich riadkoch sa taký dokument neupravuje. */
.textarea-tall { min-height: 28rem; }
.input-narrow { max-width: 10rem; }

.color-field { display: flex; align-items: center; gap: var(--space-3); }
.color-input { width: 3.5rem; height: 2.75rem; padding: var(--space-1); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; }

/* Náhľad chatu je rám stránky webu: panel v ňom stojí pri okraji na celú výšku, ako na skutočnom webe.
   Za ním je naznačený obsah stránky, aby bolo vidieť, čo panel prekryje. */
.preview-stage {
    position: relative; height: 32rem; overflow: hidden;
    padding: var(--space-6);
    background-color: var(--surface-muted);
    background-image: radial-gradient(var(--border-strong) 1px, transparent 1px);
    background-size: 16px 16px;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Zatvorený widget zaberá len roh stránky — celý rám by bol z väčšiny prázdny. */
.preview-stage-short { height: 18rem; }

.host-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.host-list li { padding: var(--space-1) var(--space-3); border: 1px solid var(--success-border); border-radius: var(--radius-full); background: var(--success-soft); color: var(--success-text); font-size: var(--text-sm); }

.identifier { font-size: var(--text-lg); letter-spacing: 0.04em; overflow-wrap: anywhere; }

.danger-zone { border-color: var(--danger-border); }
.danger-zone .card-header h2 { color: var(--danger-text); }

.code-large { font-size: var(--text-sm); }

.card-footer.form-actions, .card-footer:has(.subtle) { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.test-page { max-width: 48rem; margin: 0 auto; padding: var(--space-10) var(--space-6) var(--space-16); }
.test-page h1 { margin-bottom: var(--space-3); }
.test-page .muted { margin-bottom: var(--space-6); }
.test-filler { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.test-filler span { display: block; height: var(--space-4); border-radius: var(--radius-full); background: var(--surface-hover); }
.test-filler span:nth-child(3n) { width: 60%; }
.test-filler span:nth-child(3n+2) { width: 85%; }

/* ---------- chyby ---------- */

.table tr.is-resolved td, .table tr.is-resolved a { color: var(--text-subtle); }
.table tr.is-resolved .cell-main { text-decoration: line-through; text-decoration-color: var(--border-strong); }
.error-title { overflow-wrap: anywhere; }
.trace { max-height: 28rem; overflow: auto; white-space: pre; }
.note-box { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-muted); border: 1px solid var(--border); font-size: var(--text-sm); }
.note-box .label { margin-bottom: var(--space-1); }

.error-code { display: inline-block; margin-top: var(--space-4); padding: var(--space-2) var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); font-family: var(--font-mono); font-size: var(--text-xl); letter-spacing: 0.08em; user-select: all; }

/* ---------- modálne okno ---------- */

.modal {
    width: min(36rem, calc(100vw - var(--space-8)));
    max-height: calc(100vh - var(--space-8));
    padding: 0;
    border: 1px solid var(--border); border-radius: var(--radius-xl);
    background: var(--surface); color: var(--text);
    box-shadow: var(--shadow-xl);
}
.modal[open] { display: flex; flex-direction: column; animation: tour-in var(--duration-panel) var(--ease-out); }
.modal::backdrop { background: rgb(0 0 0 / 0.6); }

.modal-form { display: flex; flex-direction: column; min-height: 0; }
.modal-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); }
.modal-header .btn { margin-left: auto; }
.modal-body { padding: var(--space-5); overflow-y: auto; }
.modal-body .alert, .card-body > .alert:last-child { margin-bottom: 0; }
/* Širšie okno pre dva stĺpce vedľa seba (Nová databáza: terajšia vľavo, nová vpravo). */
.modal-wide { width: min(60rem, calc(100vw - var(--space-8))); }
.modal-lead { margin: 0; color: var(--text-muted); max-width: 70ch; }
.new-db-body { display: grid; gap: var(--space-5); }
.db-compare { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .db-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.db-side { display: grid; gap: var(--space-4); align-content: start; min-width: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-muted); }
.db-side h3 { margin: 0; font-size: var(--text-base); }
.modal-footer {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border); background: var(--surface-muted);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

@media (min-width: 40rem) {
    .form-row.form-row-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobil: okno na celú obrazovku, tlačidlá stále viditeľné dole. */
@media (max-width: 39.99rem) {
    .modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
    .modal-form { height: 100%; }
    .modal-body { flex: 1; }
    .modal-footer { border-radius: 0; }
}

/* ---------- interaktívna prehliadka ---------- */

/* Polohy (--tour-*) nastavuje tour.js. Vrstva je nad všetkým vrátane bočného menu. */
.tour { position: fixed; inset: 0; z-index: 1000; }

/* Priehľadná vrstva zachytí kliknutia, aby sa počas prehliadky omylom neodišlo zo stránky. */
.tour-shade { position: fixed; inset: 0; }

.tour-spotlight {
    position: fixed; top: 0; left: 0;
    width: var(--tour-spot-width, 0); height: var(--tour-spot-height, 0);
    transform: translate(var(--tour-spot-left, 0), var(--tour-spot-top, 0));
    border-radius: var(--radius-xl);
    outline: 2px solid var(--accent);
    outline-offset: 0;
    /* Stmavenie okolia: obrovský tieň okolo výrezu. */
    box-shadow: 0 0 0 200vmax rgb(0 0 0 / 0.6);
    pointer-events: none;
    transition: transform var(--duration-panel) var(--ease-out);
}

.tour-card {
    position: fixed; top: var(--tour-card-top, 50%); left: var(--tour-card-left, 50%);
    width: min(24rem, calc(100vw - var(--space-8)));
    padding: var(--space-5);
    display: grid; gap: var(--space-3);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    animation: tour-in var(--duration-panel) var(--ease-out);
}
.tour-card:focus { outline: none; }

/* Krok bez zvýrazneného prvku: stmavená celá plocha, karta v strede. */
.tour.is-centered .tour-spotlight { opacity: 0; }
.tour.is-centered .tour-shade { background: rgb(0 0 0 / 0.6); }
.tour.is-centered .tour-card { top: 50%; left: 50%; transform: translate(-50%, -50%); animation: none; }

.tour-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0; }
.tour-counter { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.tour-close { font-size: var(--text-xl); line-height: 1; }

.tour-progress { height: var(--space-1); border-radius: var(--radius-full); background: var(--surface-hover); overflow: hidden; }
.tour-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--duration-panel) var(--ease-out); }

.tour-title { font-size: var(--text-lg); }
.tour-text { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.tour-next-page { color: var(--text-subtle); font-size: var(--text-xs); }

.tour-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.tour-foot .btn-ghost { margin-right: auto; padding-left: 0; }

@keyframes tour-in { from { opacity: 0; } to { opacity: 1; } }

/* Mobil: karta pri spodnom okraji, zvýraznený prvok nad ňou. */
@media (max-width: 39.99rem) {
    .tour-card { top: auto; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); width: auto; }
    .tour.is-centered .tour-card { top: auto; left: var(--space-4); bottom: var(--space-4); transform: none; }
}

/* Ponuka prehliadky na prehľade a spustenie v návode. */
.tour-offer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); padding: var(--space-5); border-color: var(--accent); }
.tour-offer .icon { width: 2.5rem; height: 2.5rem; padding: var(--space-2); border-radius: var(--radius-xl); background: var(--accent); color: var(--on-accent); }
.tour-offer .body { flex: 1; min-width: 14rem; }
.tour-offer .body p { color: var(--text-muted); font-size: var(--text-sm); }
.tour-offer .buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- záložky ---------- */

/* Záložky sa zalamujú do ďalšieho riadku. Vodorovné rolovanie schová záložku za okraj a na počítači
   k nej pridá posuvník cez celý riadok — hľadať skrytú záložku je horšie než dva riadky. */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }

.tab {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 2.75rem; padding: 0 var(--space-3); margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--text-muted); text-decoration: none; white-space: nowrap;
    font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.tab:hover { color: var(--text); }
.tab[aria-current="page"], .tab[aria-current="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tab .count { padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--surface-hover); color: var(--text-muted); font-size: var(--text-xs); line-height: 1.25rem; }
.tab .count.is-alert { background: var(--danger-soft); color: var(--danger-text); }

/* ---------- panel s filtrami ---------- */

.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.toolbar .input, .toolbar .select { width: auto; min-width: 11rem; }

/* ---------- logy ---------- */

.table td.top { vertical-align: top; }
.log-message { min-width: 18rem; max-width: 70ch; overflow-wrap: anywhere; }
.log-context { margin-top: var(--space-1); }
.log-context summary { color: var(--text-subtle); font-size: var(--text-xs); cursor: pointer; }
.log-context pre, .code-block {
    margin: var(--space-2) 0 0; padding: var(--space-3);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface-muted); color: var(--text);
    font-family: var(--font-mono); font-size: var(--text-xs);
    white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------- návod ---------- */

.guide-steps { list-style: none; margin: 0; padding: 0; }
.guide-step { display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.guide-step + .guide-step { border-top: 1px solid var(--border); }
.guide-step .title { font-weight: var(--weight-medium); }
.guide-step .text { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-sm); max-width: 65ch; }
.guide-step .side { margin-left: auto; align-self: center; }

.step-number {
    display: grid; place-items: center; flex: none;
    width: 2rem; height: 2rem; border-radius: var(--radius-full);
    background: var(--surface-hover); color: var(--text-muted);
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.guide-step.is-done .step-number { background: var(--accent); color: var(--on-accent); }
.guide-step.is-done .title { color: var(--text-muted); }

.prose { max-width: 70ch; }
.prose > * + * { margin-top: var(--space-3); }
.prose p, .prose li { color: var(--text-muted); font-size: var(--text-sm); }
.prose ol, .prose ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.prose strong { color: var(--text); }

/* --- Ukážka chatu na odkaz: lišta s odpočtom a úvodná stránka --- */
.demo-body { min-height: 100vh; background: var(--bg); color: var(--text); }
.demo-bar {
    position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
    padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); background: var(--surface);
}
.demo-title { font-weight: var(--weight-semibold); }
.demo-timer { display: flex; align-items: baseline; gap: var(--space-2); margin-left: auto; color: var(--text-muted); font-size: var(--text-sm); }
.demo-clock { color: var(--text); font-size: var(--text-lg); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.demo-timer.is-ending .demo-clock { color: var(--danger-text); }
.demo-page { max-width: 46rem; margin: 0 auto; padding: var(--space-10) var(--space-5); }

/* Vysunutý panel chatu prekrýva pravý okraj stránky aj s odpočtom. Na širokej obrazovke preto
   obsah ukážky odsunieme o šírku panelu — presne ako sa odsunie web, keď sa panel vysunie.
   Značku aj šírku nastavuje widget.js; na webe klienta pravidlo nie je, takže mu nič nemení. */
@media (min-width: 64rem) {
    .demo-body { transition: padding var(--duration-panel) var(--ease-out); }
    :root[data-aia-open="right"] .demo-body { padding-right: var(--aia-panel-width, 400px); }
    :root[data-aia-open="left"] .demo-body { padding-left: var(--aia-panel-width, 400px); }
}
.demo-page h1 { font-size: var(--text-2xl); }
.demo-lead { margin-top: var(--space-3); color: var(--text); }
.demo-page .muted { margin-top: var(--space-3); font-size: var(--text-sm); }
.demo-closed { margin-top: var(--space-6); }

/* --- Databáza: koláčový graf veľkosti tabuliek a presun do novej databázy --- */
.donut-wrap { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 40rem) {
    .donut-wrap { grid-template-columns: 10rem minmax(0, 1fr); }
}
.donut-figure { position: relative; width: 10rem; aspect-ratio: 1; margin: 0 auto; }
/* Úseky začínajú hore a idú v smere hodinových ručičiek. */
.donut { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-track, .donut-seg { fill: none; stroke-width: 5; }
.donut-track { stroke: var(--surface-hover); }
.donut-seg { stroke: var(--segment); transition: opacity var(--duration) var(--ease-out); }
.donut:hover .donut-seg { opacity: 0.45; }
.donut .donut-seg:hover { opacity: 1; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-1); text-align: center; }
.donut-center strong { font-size: var(--text-lg); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.donut-center span { color: var(--text-muted); font-size: var(--text-xs); }
.donut-legend { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.donut-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 3rem; gap: var(--space-3); align-items: center; }
.donut-swatch { width: var(--space-3); height: var(--space-3); border-radius: var(--radius-full); background: var(--segment); }
.donut-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend .num { font-variant-numeric: tabular-nums; }
.donut-pct { color: var(--text-subtle); text-align: right; font-variant-numeric: tabular-nums; }
.donut-seg-1 { --segment: var(--chart-cost); }
.donut-seg-2 { --segment: var(--chart-tokens); }
.donut-seg-3 { --segment: var(--chart-questions); }
.donut-seg-4 { --segment: var(--chart-4); }
.donut-seg-5 { --segment: var(--chart-5); }
.donut-seg-other { --segment: var(--chart-other); }
@media (prefers-reduced-motion: reduce) {
    .donut-seg { transition: none; }
}

.move-body { display: grid; gap: var(--space-4); }
.move-progress { display: grid; gap: var(--space-3); }
.move-progress.is-error .import-progress::-webkit-progress-value { background: var(--danger-text); }
.move-progress.is-error .import-progress::-moz-progress-bar { background: var(--danger-text); }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 64rem) {
    .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    /* Dvojica kariet, ktoré majú byť rovnako vysoké (Databáza: Pripojenie a Veľkosť tabuliek). */
    .two-col.is-stretch { align-items: stretch; }
}

/* ---------- prihlásenie ---------- */

.auth {
    display: grid; place-items: center;
    min-height: 100vh; padding: var(--space-6) var(--space-4);
    background:
        radial-gradient(60rem 30rem at 50% -10%, color-mix(in oklch, var(--lime-400) 18%, transparent), transparent 70%),
        var(--zinc-950);
}

.auth-main { width: 100%; max-width: 26rem; }

.auth-brand { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-8); color: var(--zinc-50); font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.auth-brand .brand-mark { width: var(--space-10); height: var(--space-10); font-size: var(--text-sm); }

/* Karta je biela v oboch režimoch — na tmavom pozadí drží kontrast sama. */
.auth-card {
    --surface: #fff; --text: var(--zinc-900); --text-muted: var(--zinc-600); --text-subtle: var(--zinc-500);
    --border: var(--zinc-200); --border-strong: var(--zinc-300); --surface-hover: var(--zinc-100); --surface-muted: var(--zinc-50);
    --accent-text: var(--lime-800);
    --danger-text: var(--red-700); --danger-soft: var(--red-50); --danger-border: var(--red-200);
    --success-text: var(--emerald-800); --success-soft: var(--emerald-50); --success-border: var(--emerald-200);
    color-scheme: light;
    padding: var(--space-8) var(--space-6);
    background: var(--surface); color: var(--text);
    border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl);
}

.auth-card h1 { font-size: var(--text-xl); }
.auth-card .lead { margin: var(--space-2) 0 var(--space-6); color: var(--text-muted); font-size: var(--text-sm); }

.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-6); font-size: var(--text-sm); }
.auth-foot form { display: inline; }

.auth-note { margin-top: var(--space-4); color: var(--text-subtle); font-size: var(--text-sm); text-align: center; }

/* Ktorý krok registrácie človek práve vypĺňa. Viackrokový formulár musí povedať, koľko toho ešte je.
   Nie v hlavnej farbe: limetková na svetlej karte mala kontrast 1,53:1 a drobné písmo sa v nej stratilo. */
.auth-step { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }

/* Prechod medzi prihlásením a registráciou: jeden riadok, nie druhé tlačidlo — hlavná akcia
   na obrazovke ostáva jedna. */
.auth-switch { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-sm); text-align: center; }
.auth-switch a { font-weight: var(--weight-medium); }

/* Poslanie čísla znova je vedľajšia akcia — má stáť pod hlavným tlačidlom, nie vedľa neho. */
.auth-resend { margin-top: var(--space-3); }

.code-inputs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); }
/* Dvojciferné overenie registrácie: dve políčka by cez celú šírku vyzerali ako dve prázdne karty. */
.code-inputs:has(input:nth-child(2):last-child) { justify-content: center; grid-auto-columns: 4.5rem; }
.code-inputs input {
    width: 100%; min-height: 3.5rem; padding: 0; text-align: center;
    border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
    background: var(--surface-muted); color: var(--text);
    font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-bold);
}
.code-inputs input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--lime-500) 30%, transparent); background: var(--surface); }
.code-inputs input:not(:placeholder-shown) { background: var(--surface); border-color: var(--zinc-500); }

/* ---------- inštalácia ---------- */

.install-main { width: 100%; max-width: 40rem; }

.steps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.steps li { padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-subtle); }
.steps li[aria-current="step"] { background: var(--zinc-950); border-color: var(--zinc-950); color: var(--accent-on-dark); }
.steps li.is-done { color: var(--success-text); border-color: var(--success-border); background: var(--success-soft); }

.checks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.checks li { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.checks li + li { border-top: 1px solid var(--border); }
.checks .icon { width: 1.125rem; height: 1.125rem; margin-top: 1px; }
.checks .ok .icon { color: var(--success-text); }
.checks .fail .icon { color: var(--danger-text); }
.checks li > span:not(.detail) { flex-shrink: 0; }
.checks .detail { margin-left: auto; min-width: 0; color: var(--text-subtle); text-align: right; }
/* Limity projektu z OpenAI na stránke OpenAI: nadpis, tabuľka a poznámky pod sebou v rytme karty. */
.project-limits { display: grid; gap: var(--space-3); }
.project-limits > * { min-width: 0; }

/* ---------- osobnosť asistenta ---------- */

/* Sekcia: vľavo text, vpravo poznámka. Na mobile je poznámka pod textom. */
.persona-intro { margin-bottom: var(--space-6); }
.persona-intro code { font-family: var(--font-mono); font-size: var(--text-sm); }

.persona-section { display: grid; grid-template-columns: minmax(0, 1fr); }
.persona-main { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); }
.persona-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.persona-head .persona-toggle { margin-left: auto; }
.persona-text { min-height: 9rem; }
/* Vypnutá sekcia: text ostáva upraviteľný, ale je vidieť, že ho asistent nedostane. */
.persona-section:has(.persona-toggle input:not(:checked)) .persona-text { color: var(--text-subtle); background: var(--surface-muted); }

.persona-note {
    display: grid; gap: var(--space-1); align-content: start;
    padding: var(--space-5); border-top: 1px solid var(--border);
    background: var(--surface-muted); border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    font-size: var(--text-sm); color: var(--text-muted);
}
.persona-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); }
.persona-label:not(:first-child) { margin-top: var(--space-3); }
.persona-recommended { padding: var(--space-3); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); white-space: pre-line; }
.persona-note .btn { margin-top: var(--space-2); }

@media (min-width: 64rem) {
    .persona-section { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .persona-note { border-top: 0; border-left: 1px solid var(--border); border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }
}

/* Uloženie ostáva pri spodnom okraji okna — pri desiatich dlhých sekciách by sa inak hľadalo.
   Na mobile nie: pripnutý panel by zakryl pätinu obrazovky aj text, ktorý sa práve píše. */
.save-bar {
    display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
    padding: var(--space-4) var(--space-5); border-color: var(--accent);
}
@media (min-width: 40rem) {
    .save-bar { position: sticky; bottom: var(--space-4); z-index: 10; }
}
.save-bar .input, .persona-note-input { flex: 1; min-width: 14rem; width: auto; }

.persona-params { display: grid; gap: var(--space-5); }
.persona-param { display: grid; gap: var(--space-2) var(--space-6); }
.persona-param + .persona-param { padding-top: var(--space-5); border-top: 1px solid var(--border); }
.persona-param-note { font-size: var(--text-sm); color: var(--text-muted); max-width: 65ch; }
@media (min-width: 64rem) {
    .persona-param { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

.persona-prompt-stats { margin-bottom: var(--space-4); max-width: 28rem; }
.persona-prompt { max-height: 70vh; overflow: auto; font-size: var(--text-sm); line-height: var(--leading-normal); }

/* Sprievodca /presun: voľba ponechať / skopírovať databázu. */
.presun-choice { display: grid; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.presun-choice h2 { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; font-size: var(--text-lg); }
.presun-fields summary { margin-bottom: var(--space-3); color: var(--accent-text); font-weight: var(--weight-medium); cursor: pointer; }
.persona-prompt-mode + .persona-prompt-mode { border-top: 1px solid var(--border); }
.persona-prompt-mode h3 { margin: 0; }
.persona-prompt-mode .hint { margin: var(--space-1) 0 var(--space-4); }
.persona-prompt-missing { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }
.persona-prompt-toggle summary { margin-bottom: var(--space-3); color: var(--accent-text); font-weight: var(--weight-medium); cursor: pointer; }

/* ---------- predpisy ---------- */

.language-choices { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.language-choices legend { margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); }

.import-version { display: grid; gap: var(--space-3); padding: var(--space-5); border-top: 1px solid var(--border); }
.import-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.import-head h3 { font-size: var(--text-base); }
.import-counts { margin-left: auto; }

/* Priebeh: natívny <progress> — hodnotu nastaví skript cez vlastnosť value, bez atribútu style. */
.import-progress {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: var(--space-3); border: 0; border-radius: var(--radius-full);
    background: var(--surface-hover); overflow: hidden;
}
.import-progress::-webkit-progress-bar { background: var(--surface-hover); border-radius: var(--radius-full); }
.import-progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-full); transition: width var(--duration) var(--ease-out); }
.import-progress::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-full); }
.import-version.is-error .import-progress::-webkit-progress-value { background: var(--danger-text); }
.import-version.is-error .import-progress::-moz-progress-bar { background: var(--danger-text); }

.import-status { font-size: var(--text-sm); color: var(--text-muted); }

.import-steps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.import-steps li { padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-subtle); }
.import-steps li.is-done { color: var(--success-text); border-color: var(--success-border); background: var(--success-soft); }
.import-steps li.is-current { color: var(--text); border-color: var(--accent); }
.import-steps li.is-error { color: var(--danger-text); border-color: var(--danger-border); background: var(--danger-soft); }

.import-log summary { font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; }
.import-log ol { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.import-log li { display: flex; gap: var(--space-3); }
.import-log time { flex: none; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.import-log li.is-error { color: var(--danger-text); }
.import-log li.is-warning { color: var(--warning-text); }
.import-log li.is-success { color: var(--success-text); }

.attachment-list { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.attachment-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.attachment-list a { overflow-wrap: anywhere; }
.attachment-error { flex-basis: 100%; color: var(--warning-text); font-size: var(--text-xs); }

.unit-tabs { margin: 0; padding: 0 var(--space-5); }
.unit-list { margin: 0; padding: 0; list-style: none; }
.unit-list > li { padding: var(--space-4) var(--space-5); }
.unit-list > li + li { border-top: 1px solid var(--border); }
.unit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.unit-path { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-subtle); }
.unit-text { max-width: 80ch; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); white-space: pre-line; overflow-wrap: anywhere; }
.unit-list details { margin-top: var(--space-2); }
.unit-list summary { font-size: var(--text-sm); color: var(--accent-text); cursor: pointer; }
.unit-citation { margin-top: var(--space-2); font-size: var(--text-sm); }

/* ---------- testovací chat (celé okno asistenta) ---------- */

/* Celé okno asistenta je aplikácia, nie dokument: škrupina drží presne výšku okna a roluje sa len
   rozhovor v nej. Keby sa rolovala stránka, na telefóne by pri klávesnici odišla horná lišta a pole
   na otázku by skončilo pod klávesnicou. --app-height je to, čo naozaj vidno (viewport.js);
   bez skriptu zastúpi 100dvh, ktoré na Androide ubratú výšku pozná samo. */
:root:has(.tc-shell) { height: 100%; overflow: hidden; }

.tc-shell {
    position: fixed; top: var(--app-top, 0px); right: 0; left: 0;
    /* min-height zo základného pravidla pre body by výšku okna pretlačilo — tu musí ísť preč. */
    height: var(--app-height, 100dvh); min-height: 0; overflow: hidden;
    background: var(--bg); color: var(--text);
}

/* Žiara v rohu okna (ako v administrácii) tu nie je: za poľom na otázku svieti žiara stále a dve
   naraz sú priveľa. */
/* grid-template-rows: minmax(0, 1fr) je tu nutné, nie kozmetické.
   Bez neho má jediný riadok výšku podľa obsahu, okno s poľom na otázku sa roztiahne pod spodok
   obrazovky a úvod sa „vycentruje" do priestoru, z ktorého vidno len časť — pole potom na obsah
   nasadá. Pri užšom okne sa to neprejavilo: tam je bočný panel vysúvací a škrupina nie je grid. */
@media (min-width: 64rem) {
    .tc-shell { display: grid; grid-template-columns: 17rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
}

/* Vysúvací panel patrí do škrupiny, nie do okna — inak by pri klávesnici trčal pod ňu. */
.tc-sidebar {
    position: absolute; inset: 0 auto 0 0; z-index: 40; width: 17rem;
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-3);
    background: var(--sidebar-bg); color: var(--sidebar-text); border-right: 1px solid var(--sidebar-border);
    transform: translateX(-100%); transition: transform var(--duration-panel) var(--ease-out);
}
.tc-sidebar-open .tc-sidebar { transform: none; }
/* Pruh o cookies a tmavé pozadie panela patria do škrupiny, nie do okna — inak by pri klávesnici
   trčali pod ňu. Na bežných stránkach ostáva pruh pripnutý k oknu, to je iné pravidlo. */
.tc-shell > .sidebar-backdrop, .tc-shell > .cookie-bar { position: absolute; }
@media (min-width: 64rem) {
    /* min-height: 0 dovolí zoznamu rozhovorov zmenšiť sa a rolovať vo vnútri panela. Bez neho
       dlhý zoznam roztiahne panel, s ním celý riadok mriežky a okno prerastie cez spodok obrazovky. */
    .tc-sidebar { position: relative; height: 100%; min-height: 0; transform: none; }
    .tc-menu { display: none; }
}

.tc-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); color: var(--sidebar-text-strong); font-weight: var(--weight-semibold); }
.tc-new, .tc-back { width: 100%; justify-content: flex-start; background: transparent; color: var(--sidebar-text-strong); }
.tc-new { border-color: var(--sidebar-border); }
.tc-new:hover, .tc-back:hover { background: var(--sidebar-hover); }
.tc-back { color: var(--sidebar-text); }
.tc-list-title { margin-top: var(--space-4); padding: 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--zinc-500); }
.tc-empty-list { padding: 0 var(--space-2); font-size: var(--text-sm); color: var(--zinc-500); }
.tc-list { flex: 1; min-height: 0; display: grid; align-content: start; gap: var(--space-1); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.tc-item { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); color: var(--sidebar-text); font-size: var(--text-sm); text-decoration: none; }
.tc-item:hover, .tc-item[aria-current="page"] { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
/* Rozhovory agenta sú v prehliadači návštevníka, nie na adrese — sú to tlačidlá, nie odkazy. */
button.tc-item { width: 100%; border: 0; background: transparent; font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.tc-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-item-meta { font-size: var(--text-xs); color: var(--zinc-500); }
.tc-sidebar-foot { margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--sidebar-border); }
/* Značka a verzia v päte panela. Tlmené, ale čitateľné: odmerané 7,72 : 1 pre značku a 4,54 : 1
   pre verziu (zinc-500 by dal 4,2 a zinc-600 len 2,62 — pod predpísaných 4,5). */
.tc-sidebar-foot > p { font-size: var(--text-xs); color: var(--sidebar-text); }
.tc-sidebar-foot > p + p { margin-top: var(--space-1); color: color-mix(in oklch, var(--sidebar-text) 78%, var(--sidebar-bg)); }

/* Lišta hore, rozhovor v strede, pole na otázku dole — tri pásy, z ktorých roluje len prostredný.
   Okno samo sa **neroluje**: keby sa rolovalo celé, žiara za poľom na otázku (vyššia než pole, takže
   vystupuje pod jeho spodok) by vyrobila miesto na rolovanie aj na prázdnej úvodnej obrazovke —
   prehliadač počíta každý presah dole ako ďalší obsah. Takto je pole aj so žiarou mimo rolovania
   a žiara smie presahovať, kam potrebuje; oreže ju okno. */
.tc-main {
    display: flex; flex-direction: column; min-width: 0; height: 100%; min-height: 0;
    /* clip, nie hidden: hidden sa dá posunúť aj bez tiahla (prehliadač tak vie odsunúť obsah pri
       ťuknutí do poľa) a lišta by ušla hore. clip to nedovolí vôbec. */
    overflow: clip;
}
.tc-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: var(--space-3);
    min-height: var(--topbar-height); padding: var(--space-2) var(--space-4);
    background: var(--bg); border-bottom: 1px solid var(--border);
}
.tc-topbar-title { font-weight: var(--weight-semibold); }
.tc-flashes { width: 100%; max-width: 48rem; margin: var(--space-4) auto 0; padding: 0 var(--space-4); }

/* min-height: 0 je nutné, aby sa rozhovor vo flexe mohol zmenšiť pod výšku svojho obsahu a rolovať.
   overscroll-behavior: contain zabráni tomu, aby sa na jeho konci ťahala stránka pod ním. */
.tc-conversation {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    /* minmax(0, 1fr): stĺpec sa nesmie rozšíriť podľa najdlhšieho nezalomiteľného obsahu (široká tabuľka). */
    display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-8);
    width: 100%; padding: var(--space-8) var(--space-4);
}
/* Šírku drží obsah, nie rolovacia oblasť: tá siaha ku kraju okna, aby tam bolo aj tiahlo.
   Keby bola úzka sama, tiahlo by stálo uprostred obrazovky. */
.tc-conversation > * { width: 100%; max-width: 48rem; margin-inline: auto; }
/* Položka mriežky má predvolene min-width: auto (najmenšia šírka obsahu) a tá vyhrá aj nad max-width —
   odpoveď so širokou tabuľkou by sa natiahla doprava cez šírku rozhovoru a stratila stred. Takto drží
   48rem ako text aj pole na otázku a široká tabuľka sa roluje vo svojom ráme (.tc-table). */
.tc-conversation > *, .tc-msg, .tc-answer { min-width: 0; }
.tc-welcome { display: grid; justify-items: center; gap: var(--space-4); margin-top: 14vh; text-align: center; }
/* Logo klienta nad úvodom, široké 80 až 99 % riadku na otázku. Percentá sedia, lebo rozhovor aj
   pole na otázku majú tú istú najväčšiu šírku (48rem) a to isté bočné odsadenie — úvodná obrazovka
   je teda presne taká široká ako riadok pod ňou.

   Výška sa dopočíta z pomeru strán; strop je poistka pre vysoké logá, aby úvod neodtlačil pole na
   otázku pod ohyb. Pri ňom sa logo vpíše dovnútra (contain), nikdy sa neoreže. */
.tc-logo { width: 99%; min-width: 80%; height: auto; max-height: min(16rem, 24vh); object-fit: contain; }
.tc-welcome h1 { font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: -0.02em; }
.tc-welcome > p { max-width: 46ch; color: var(--text-muted); }
.tc-welcome .alert { text-align: left; }
.tc-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }
.tc-suggestions-title { width: 100%; color: var(--text-subtle); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
.tc-suggestion, .tc-choice { padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer; transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out); }
.tc-suggestion:hover, .tc-choice:hover:not(:disabled), .tc-choice[data-chosen] { border-color: var(--accent); }

/* Výber krajiny pod prehľadom: podrobná odpoveď pre Slovensko, Česko alebo EÚ. */
.tc-choices { display: grid; gap: var(--space-2); }
.tc-choices-title { font-size: var(--text-sm); color: var(--text-muted); }
.tc-choices-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tc-choice[data-chosen] { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.tc-choice:disabled { opacity: 0.5; cursor: not-allowed; }

.tc-msg { display: grid; gap: var(--space-2); }
.tc-user { justify-items: end; }
.tc-bubble { max-width: 85%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); background: var(--surface-hover); white-space: pre-line; overflow-wrap: anywhere; }
.tc-answer { line-height: var(--leading-normal); overflow-wrap: anywhere; }
.tc-answer > * + * { margin-top: var(--space-3); }
.tc-answer ul, .tc-answer ol { display: grid; gap: var(--space-1); padding-left: var(--space-5); }
/* Výpočet po písmenách z predpisu: označenie a), b) v úzkom stĺpci, text zarovnaný pod sebou aj pri zalomení. */
.tc-answer ul.tc-letters { list-style: none; padding-left: var(--space-2); }
.tc-letters li { display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); gap: var(--space-1); }
.tc-letter { color: var(--text-muted); }
.tc-answer h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); }
/* Tabuľka v odpovedi (porovnanie produktov); na úzkom displeji sa roluje vodorovne. */
.tc-table { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.tc-table:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tc-table table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tc-table th, .tc-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
.tc-table tr:last-child td { border-bottom: 0; }
.tc-table th { background: var(--surface-hover); font-weight: var(--weight-semibold); }
/* Bunky aj prvý stĺpec sa zalomia po slovách, nie uprostred slova. Prvý stĺpec bez zalamovania (nowrap)
   pri dlhom popise („Iné motorové vozidlo; autobus s prípojným vozidlom…“) roztiahol odpoveď cez šírku
   rozhovoru. Najužší stĺpec má 6em; čo sa nezmestí ani tak, roluje sa v ráme tabuľky. */
.tc-table td:first-child { color: var(--text-muted); }
.tc-table th, .tc-table td { min-width: 6em; }
/* Kroky agenta počas čakania (steps.js): riadok s pevnou výškou, v ktorom sa nový krok preroluje
   zospodu a starý odíde hore. Text posiela server v jazyku otázky, v CSS nie je. */
.tc-typing { position: relative; min-height: calc(1em * var(--leading-normal)); overflow: hidden; color: var(--text-subtle); }
.tc-step-line {
    display: block;
    animation: tc-pulse 1.4s ease-in-out infinite;
    transition: transform var(--duration-panel) var(--ease-out), opacity var(--duration-panel) var(--ease-out);
}
.tc-step-line.is-entering { transform: translateY(100%); opacity: 0; }
.tc-step-line.is-leaving { position: absolute; inset: 0 auto auto 0; transform: translateY(-100%); opacity: 0; }
@keyframes tc-pulse { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
    .tc-step-line { animation: none; transition: none; }
}
/* Upozornenie zboku, že sa míňa limit (tarifa v konte, otázky na webe). Vyjde sprava pod lištou;
   80 % je tlmené, 90 % farbou upozornenia, vyčerpaný limit farbou chyby. Význam nesie aj nadpis. */
.tc-toasts {
    position: fixed; top: calc(var(--topbar-height) + var(--space-3)); right: var(--space-4); z-index: 30;
    display: grid; gap: var(--space-2);
    width: min(24rem, calc(100vw - 2 * var(--space-4)));
    pointer-events: none;
}
.tc-toast {
    display: flex; gap: var(--space-2); align-items: flex-start;
    padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
    border: 1px solid var(--warning-border); border-radius: var(--radius-lg);
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
    font-size: var(--text-sm); pointer-events: auto;
    animation: tc-toast-in 250ms ease-out;
}
.tc-toast.is-high { background: var(--warning-soft); color: var(--warning-text); }
.tc-toast.is-full { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-border); }
.tc-toast-body { display: grid; gap: var(--space-1); min-width: 0; padding-top: var(--space-1); }
.tc-toast-body p { margin: 0; }
.tc-toast-title { font-weight: var(--weight-semibold); }
.tc-toast-link { justify-self: start; color: inherit; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 0.2em; }
/* Plocha na ťuknutie 44 px, ikona malá. */
.tc-toast-close {
    flex: none; display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; margin: calc(-1 * var(--space-2)) 0;
    border: 0; border-radius: var(--radius-lg); background: transparent; color: inherit; cursor: pointer;
}
.tc-toast-close:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
.tc-toast-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tc-toast-close .icon { width: 1rem; height: 1rem; }
@keyframes tc-toast-in { from { opacity: 0; transform: translateX(var(--space-6)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .tc-toast { animation-name: tc-toast-fade; }
}
@keyframes tc-toast-fade { from { opacity: 0; } to { opacity: 1; } }

.tc-error { color: var(--danger-text); }
.tc-meta { font-size: var(--text-xs); color: var(--text-subtle); }
.tc-warning { color: var(--warning-text); }

.tc-sources summary { font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; }
.tc-sources ol { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.tc-source { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); font-size: var(--text-sm); transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out); }
/* Zdroj, na ktorý sa kliklo zo značky v texte. Zvýraznenie ostáva, kým sa neklikne na inú značku. */
.tc-source[data-highlight] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.tc-source:focus { outline: none; }
.tc-source:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tc-source-title { font-weight: var(--weight-medium); }

/* Značka zdroja v texte odpovede — malé číslo nad riadkom, ktoré vedie na zdroj pod odpoveďou.
   Nesmie rozhodiť riadkovanie: výška je zo spodnej časti riadku, nie navrch. */
.tc-cite {
    display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.125rem; margin: 0 0.125rem;
    padding: 0 0.3125rem; border: 0; border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text);
    font: inherit; font-size: 0.6875rem; font-weight: var(--weight-semibold); line-height: 1; font-variant-numeric: tabular-nums;
    vertical-align: 0.125rem; cursor: pointer;
    transition: background-color var(--duration) var(--ease-out);
}
.tc-cite:hover { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.tc-cite:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* Citácia v texte, ktorá vedie na zdroj: „§ 3 zákona č. 56/2012 Z. z.“. Celá zelená ako názov zdroja
   pod odpoveďou, bez podčiarknutia — podľa farby je jasné, že sa dá kliknúť. --accent-text je zelená,
   ktorá sa dá čítať v oboch režimoch (vo svetlom tmavšia). */
.tc-cite-link {
    border-radius: var(--radius-md); color: var(--accent-text); font-weight: var(--weight-medium);
    text-decoration: none; transition: background-color var(--duration) var(--ease-out);
}
.tc-cite-link:hover { background: var(--accent-soft); }
.tc-cite-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Značka bez zdroja (mimo rozsahu) ostáva v texte, ale nevyzerá ako odkaz — chýba jej zelený
   podklad. Farba textu je tlmená, nie bledá: aj tak nesie informáciu a musí sa dať prečítať. */
.tc-cite:disabled { background: var(--surface-hover); color: var(--text-muted); cursor: default; }
/* Na dotyk je 18 px málo — cieľ sa zväčší neviditeľne, text sa nerozhodí. */
@media (pointer: coarse) { .tc-cite { position: relative; } .tc-cite::after { content: ""; position: absolute; inset: -0.75rem -0.375rem; } }
.tc-source-heading { color: var(--text-muted); }
.tc-source-kind { margin-top: var(--space-1); color: var(--text); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.tc-source-date { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.tc-source-excerpt { margin-top: var(--space-1); color: var(--text-muted); white-space: pre-line; overflow-wrap: anywhere; }

/* Karty produktov pod odpoveďou (režim Eshop): vodorovný pás, na mobile sa posúva prstom. */
.tc-products { display: flex; gap: var(--space-3); margin: var(--space-3) 0 0; padding: 0 0 var(--space-2); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.tc-product { flex: 0 0 min(15rem, 80%); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); scroll-snap-align: start; }
.tc-product-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-muted); }
.tc-product-body { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); padding: var(--space-3); font-size: var(--text-sm); }
.tc-product-name { display: -webkit-box; overflow: hidden; font-weight: var(--weight-medium); line-height: var(--leading-tight); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tc-product-price { font-size: var(--text-base); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.tc-product-price-old { color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.tc-product-stock { color: var(--warning-text); font-size: var(--text-xs); }
.tc-product-stock[data-availability="in_stock"] { color: var(--success-text); }
.tc-product-stock[data-availability="out_of_stock"] { color: var(--danger-text); }
.tc-product-link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: auto; color: var(--accent-text); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 0.2em; }
.tc-product-link:hover { text-decoration-thickness: 2px; }
.tc-product-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-md); }
.tc-product-date { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* Pole na otázku je prilepené dole, ale samo o sebe nemá žiadne pozadie — text rozhovoru
   prechádza tesne za ním a mizne až za samotným poľom, nie za pruhom cez celú šírku. */
/* Pás s poľom je priehľadný, aby cezeň bolo vidieť žiaru. Rozhovor sa popod neho neroluje —
   je mimo rolovacej oblasti — takže presvitať nemá čo. */
.tc-composer { position: sticky; bottom: 0; width: 100%; max-width: 48rem; margin: 0 auto; padding: var(--space-2) var(--space-4) var(--space-4); background: transparent; isolation: isolate; }

/* Zelená žiara za poľom na otázku: stred má v strede poľa a rozlieva sa rovnako hore aj dole.
   Viaže sa na samotné pole, nie na celý pás pod ním — inak by ju drobný text pod poľom stiahol nižšie.
   Je rovnaká na úvodnej obrazovke aj počas rozhovoru a rovnaká vo widgete aj v mobilnej aplikácii —
   pole na otázku je všade to isté miesto s tou istou úlohou. Kým sa po prvej otázke zmenšovala na
   úzky pruh s 10 %, nebolo ju takmer vidieť. */
.tc-input::before {
    content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
    width: 170%; height: 30rem; transform: translate(-50%, -50%); pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 15%, transparent), transparent);
}
/* Úvodná obrazovka: úvod sa vycentruje v rozhovore, pole na otázku ostáva dole ako vždy. Platí len
   dovtedy, kým nie je vysunutá klávesnica (data-keyboard z viewport.js) — vtedy ostáva z okna tretina
   a vycentrovaný úvod by z nej vytlačil to podstatné. */
/* safe center, nie center: keď sa úvod do okna nezmestí, obyčajné centrovanie ho vysunie aj NAD
   začiatok rozhovoru a tá časť sa nedá dorolovať — logo aj nadpis by ostali navždy odrezané.
   safe prepne pri pretečení na zarovnanie k vrchu, takže všetko ostane dostupné. */
:root:not([data-keyboard]) .tc-conversation:has([data-tc-welcome]) { align-content: safe center; }
:root:not([data-keyboard]) .tc-conversation:has([data-tc-welcome]) .tc-welcome { margin-top: 0; }

/* Nízke okno (notebook s otvorenou konzolou, okno na polovicu obrazovky): úvod sa stláča, aby sa
   ponuka otázok zmestila bez rolovania — práve ona ukáže návštevníkovi, čo sa môže pýtať.
   Nič sa neskrýva: obrazovka má vyzerať rovnako v každom okne, len tesnejšie. Odmerané — s terajším
   jednovetovým úvodom sa päť otázok zmestí do 560 px výšky okna, nižšie sa roluje. */
@media (max-height: 56rem) {
    .tc-conversation { padding-block: var(--space-4); }
    .tc-welcome { gap: var(--space-3); }
    .tc-logo { max-height: 14vh; }
    .tc-welcome h1 { font-size: var(--text-2xl); }
    .tc-welcome > p { font-size: var(--text-sm); }
}
@media (max-height: 44rem) {
    .tc-logo { max-height: 12vh; }
}
/* Tlačidlo odoslania a výpis otázok v strede poľa aj pri viacriadkovom texte (nie pri spodnom okraji). */
.tc-input { position: relative; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); background: var(--surface); transition: border-color var(--duration) var(--ease-out); }
.tc-input:focus-within { border-color: var(--focus-ring); }
.tc-input textarea { flex: 1; min-width: 0; padding: var(--space-2) 0; border: 0; background: transparent; color: var(--text); font: inherit; line-height: var(--leading-normal); resize: none; outline: none; }
/* Pole rastie po riadkoch (skript), pri 8 riadkoch sa text posúva kolieskom a klávesmi — tiahlo by v úzkom poli len zavadzalo. */
.tc-input textarea { overflow-y: auto; scrollbar-width: none; }
.tc-input textarea::-webkit-scrollbar { display: none; }
.tc-input textarea::placeholder { color: var(--text-subtle); }
/* Kým beží odpoveď, do poľa sa nepíše — nech je to na prvý pohľad vidieť. */
.tc-input textarea:disabled { opacity: 0.55; cursor: not-allowed; }
/* Koľko otázok ešte ostáva. Tlmené — je to údaj na okraji, nie výstraha. Nie však najtlmenšou
   farbou: pri 12 px by nedosiahla predpísaný kontrast 4,5 : 1 (odmerané 4,12 v tme, 4,39 na svetle). */
.tc-quota { flex: none; align-self: center; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

.tc-send, .tc-stop { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); cursor: pointer; }
/* Prstom sa 40 px trafí ťažko — pri dotykovom ovládaní je tlačidlo na predpísaných 44 px. */
@media (pointer: coarse) { .tc-send, .tc-stop { width: 2.75rem; height: 2.75rem; } }
.tc-send:disabled { opacity: 0.4; cursor: not-allowed; }
.tc-stop { background: var(--text); color: var(--surface); }
.tc-send .icon, .tc-stop .icon { width: 1.25rem; height: 1.25rem; }
/* Poznámka je vlastná malá bunka takmer nalepená pod poľom — nie spojená s ním, len pripojená.
   Pozadie má farbu stránky (v tmavom režime čierne), aby za ňou nepresvital text rozhovoru,
   a je široká len na svoj text. Rámik nemá: na rovnakom pozadí by bol len rušivá linka. */
.tc-note {
    width: fit-content; max-width: 100%;
    margin: var(--space-1) auto 0; padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--bg);
    font-size: var(--text-xs); color: var(--text-muted); text-align: center;
}

/* Chat odpovedá len prihláseným a návštevník prihlásený nie je. Nie je to chyba — nič nepokazil,
   len prišiel inou cestou — preto upozornenie, nie červená. */
.tc-locked {
    display: flex; align-items: center; gap: var(--space-2);
    border: 1px solid var(--warning-border); color: var(--warning-text); font-size: var(--text-sm);
}
.tc-locked .icon { flex: none; width: 1.1rem; height: 1.1rem; }
/* Text je v jednom prvku: ako priame deti flexu by sa text a tučný názov webu rozpadli do troch stĺpcov. */
.tc-locked > span { flex: 1; min-width: 0; }

/* Vyčerpaný počet otázok. Tiež nie chyba — limit je nastavený vopred a návštevník ho len dosiahol —
   preto upozornenie. Odpočet je na vlastnom riadku, aby sa hláška pri každej sekunde nepreskladala. */
.tc-limit {
    border: 1px solid var(--warning-border); color: var(--warning-text); font-size: var(--text-sm);
}
.tc-limit-clock { display: block; font-size: var(--text-xs); opacity: 0.85; }

/* ---------- KNIŽNICA OBRÁZKOV ---------- */

/* Čo je nastavené teraz, a vedľa dve cesty k zmene: knižnica nahratých alebo nový súbor.
   Na úzkom okne sa tlačidlo a pole zalomia pod seba. */
.image-choice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); min-width: 0; margin-top: var(--space-2); }
.image-current {
    display: grid; place-items: center; width: 10rem; height: 5rem; margin: 0; padding: var(--space-2);
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.image-current img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Favicon sa ukazuje v skutočnej veľkosti na karte — 32 px, nie roztiahnutý na celý rámček. */
.image-current-favicon img { width: var(--space-8); height: var(--space-8); }
.image-empty { font-size: var(--text-xs); line-height: var(--leading-tight); color: var(--text-muted); text-align: center; }
.image-choice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
/* Natívne pole na súbor si drží šírku podľa textu „Nie je vybratý žiadny súbor“ a na úzkom okne
   by ťahalo celú stránku do strán. min-width: 0 mu dovolí zmenšiť sa na to, čo je k dispozícii. */
.image-choice-actions .input[type="file"] { flex: 1 1 12rem; min-width: 0; max-width: 100%; }
.image-choice-actions .hint { margin: 0; }

/* Nahraté obrázky na výber pri ďalších chatoch. Mriežka sa prispôsobí šírke sama, aby na úzkom
   okne nevznikol vodorovný posuv. */
.image-library {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none;
}
/* Celá dlaždica je klikacia plocha; prepínač je skrytý pre myš, nie pre čítačku obrazovky. */
.image-pick { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: var(--space-2); border: 2px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; }
.image-pick img { max-width: 100%; max-height: 100%; object-fit: contain; }
.image-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.image-pick:hover { border-color: var(--border-strong); }
.image-pick:has(input:checked) { border-color: var(--accent); }
.image-pick:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Medzinadpis vo formulári: oddelí sadu volieb, ktoré patria k sebe (napr. rozmery widgetu). */
.form-section {
    margin: var(--space-2) 0 0; padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
}
/* Dlaždica „bez avatara“ nemá obrázok, len text — nech má rovnakú výšku ako ostatné. */
.image-pick-none { font-size: var(--text-xs); color: var(--text-muted); text-align: center; }

/* ---------- PRESUN NA INÚ ADRESU ---------- */

/* Zoznam krokov, ktoré sprievodca spraviť nevie (CRON na hostingu, tlačidlo na webe klienta). */
.hint-list { display: grid; gap: var(--space-3); margin: var(--space-3) 0 0; padding-left: var(--space-5); color: var(--text-muted); font-size: var(--text-sm); }
.hint-list strong { color: var(--text); }
.hint-list .code-block { margin-top: var(--space-2); }

/* ---------- CRON ---------- */

.cron-state-text { margin-bottom: var(--space-4); font-size: var(--text-sm); }

/* ---------- konverzácie ---------- */

.conversation-question { display: inline; overflow-wrap: anywhere; }
.conversation-question + .badge { margin-left: var(--space-2); }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pager .subtle { margin-right: auto; }

/* Rozhovor ako riadky s menom a časom, rovnako ako chat na webe — nie bubliny. */
.transcript { list-style: none; margin: 0; padding: 0; }
.transcript-row { padding: var(--space-4) var(--space-5); }
.transcript-row + .transcript-row { border-top: 1px solid var(--border); }
.transcript-row.is-user { background: var(--surface-muted); }
.transcript-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.transcript-meta .name { font-weight: var(--weight-semibold); }
.transcript-meta time { color: var(--text-subtle); }
/* Odkaz na konci hlavičky správy (Pridať ako regresný test) — nenápadný, ale dotykový cieľ 44 px na výšku. */
.transcript-meta .transcript-action { display: inline-flex; align-items: center; min-height: 2.75rem; margin-left: auto; color: var(--accent-text); font-size: var(--text-xs); }
.transcript-text { margin-top: var(--space-1); max-width: 75ch; white-space: pre-line; overflow-wrap: anywhere; }
.transcript-cost { margin-top: var(--space-2); }

/* Úryvky, ktoré model k odpovedi dostal. Zbalené — otvára ich správca, keď hľadá, prečo odpoveď vyšla
   tak, ako vyšla. Použitý úryvok má zelený okraj, nepoužitý je tlmený: na prvý pohľad je vidieť pomer. */
.transcript-sources { margin-top: var(--space-3); max-width: 75ch; font-size: var(--text-sm); }
.transcript-sources summary { color: var(--accent-text); font-weight: var(--weight-medium); cursor: pointer; }
.transcript-sources > .hint { margin-top: var(--space-2); }
.retrieved-list { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.retrieved-item { padding: var(--space-3); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-md); background: var(--surface); }
.retrieved-item.is-used { border-left-color: var(--accent); }
.retrieved-item:not(.is-used) { color: var(--text-muted); }
.retrieved-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* Vstup nástroja v Priebehu agenta je JSON bez medzier — bez zalomenia by pretiekol z bloku. */
.retrieved-head code { min-width: 0; overflow-wrap: anywhere; }
.retrieved-signals { margin-top: var(--space-1); font-size: var(--text-xs); }
.retrieved-excerpt { margin-top: var(--space-2); white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- chybová stránka ---------- */

.error-page { max-width: 32rem; margin: var(--space-16) auto; padding: 0 var(--space-6); }
.error-page p { margin-top: var(--space-3); color: var(--text-muted); }
.error-page pre { margin-top: var(--space-4); padding: var(--space-4); overflow-x: auto; border-radius: var(--radius-lg); background: var(--surface-hover); font-size: var(--text-sm); }

/* ---------- pohyb ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* Kvalita katalógu produktov (detail zdroja v režime Eshop). */
.quality-score { font-size: var(--text-2xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.quality-list { display: grid; gap: var(--space-2); padding-left: var(--space-5); }

/* Otázky v téme chýbajúcich znalostí a výsledky regresných testov: riadky oddelené čiarou, odsadené ako karta. */
.gap-questions, .test-results { margin: 0; padding: 0; list-style: none; }
/* Odpoveď asistenta v téme Chýbajúcich znalostí: Markdown ako v chate, nadpis krajiny len zvýraznený, nie veľký. */
.gap-answer { margin-top: var(--space-2); }
.gap-answer h3, .gap-answer h4 { color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.gap-questions > li, .test-results > li { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); }
.gap-questions > li:first-child, .test-results > li:first-child { border-top: 0; }
.test-results details > summary { cursor: pointer; color: var(--text-muted); font-size: var(--text-sm); }
.test-results .code-block { margin-top: var(--space-2); white-space: pre-wrap; }
/* Menší zvislý odstup vo vnútri upozornenia (veta a tlačidlá pod ňou). */
.stack-sm { display: grid; gap: var(--space-3); }