/* pipeticket.com - ukážky rozhrania appky (triedy .ui-*).
   Verné obrazovkám aplikácie (pipeticket/resources/less: _posta, _karta, _nastenka, _panel, _ai, _toasty,
   _horna-lista, _detail, _hladanie). Ilustračný obsah, žiadne skutočné firmy ani štatistiky.

   Mierka: všetky rozmery sú násobky premennej --u (predvolene 1rem = veľkosť ako v appke).
   Veľká ukážka v hero: rodič nastaví napr. --u: 1.125rem, malá v dlaždici --u: 0.75rem
   (smie byť aj clamp() z rem a vw). Vlásková linka (--vlas) sa neškáluje.
   Okno Pošty a nástenka sa samy prispôsobia šírke cez container queries.
   Statická ukážka = <span>/<div> (nie fokusovateľné prvky) v obale role="img" s aria-label;
   interaktívna (verzia A) = skutočné <button>, triedy ostávajú rovnaké. Návod: docs/zaklad.md. */

:root {
    --u: 1rem;
    /* priority z appky (App\Enums\TicketPriority::color, _karta.less) - len značka, nie plocha */
    --priorita-asap: #EE7A3B;
    --priorita-asap-text: #AC4B18;
    --priorita-blokujuce: #E14568;
    --priorita-blokujuce-text: #AE2A4A;
    /* tmavý toast (appka: _toasty.less) */
    --tlmene-tma: #98A5C0;
    /* tiene ukážok - jemné, svetlé */
    --ui-tien: 0 1.75rem 3.5rem -1.25rem rgb(20 27 43 / 0.2), 0 0.375rem 1rem -0.25rem rgb(20 27 43 / 0.06);
    --ui-tien-maly: 0 0.75rem 1.75rem -0.5rem rgb(20 27 43 / 0.18), 0 0.125rem 0.375rem rgb(20 27 43 / 0.05);
}

/* ---- základ každej ukážky ---- */
.ui,
.ui-okno, .ui-posta, .ui-riadok, .ui-karta, .ui-nastenka, .ui-sprava, .ui-pipe, .ui-toast,
.ui-telefon, .ui-zalozky, .ui-stav, .ui-priorita, .ui-avatar, .ui-tlacidlo, .ui-hladanie, .ui-cip, .ui-kbd {
    font-family: var(--pismo);
    -webkit-font-smoothing: antialiased;
}

.ui {
    color: var(--text);
    font-size: calc(0.875 * var(--u));
    line-height: 1.45;
    text-align: left;
}

/* obal, ktorý reaguje na svoju šírku (okno Pošty, nástenka mimo okna) */
.ui-obal,
.ui-okno-obsah {
    container: okno / inline-size;
}

/* Kontajnery container queries potrebujú určitú šírku - inak ich flex/grid rodič pri meraní výšky
   rozloží v nulovej šírke (úzka verzia) a ukážka dostane prázdne miesto pod sebou. */
.ui-obal,
.ui-okno,
.ui-nastenka {
    width: 100%;
}

/* ikona Phosphor v ukážke */
.ui-ikona {
    flex: none;
    width: calc(1.125 * var(--u));
    height: calc(1.125 * var(--u));
}

/* ilustračný text - sivé riadky namiesto vymysleného obsahu */
.ui-text {
    display: grid;
    gap: calc(0.875 * var(--u));
    padding-block: calc(0.375 * var(--u));
}

.ui-text > i {
    display: block;
    height: calc(0.5 * var(--u));
    border-radius: 999rem;
    background: color-mix(in srgb, var(--text) 9%, transparent);
}

.ui-text > i:nth-child(3n + 2) { width: 93%; }
.ui-text > i:nth-child(3n) { width: 81%; }
.ui-text > i:last-child:not(:only-child) { width: 54%; }

/* =====================================================================
   Avatar, bodka stavu, čip stavu, priorita
   ===================================================================== */
.ui-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(1.75 * var(--u));
    height: calc(1.75 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: 50%;
    background: var(--hmla);
    color: var(--text);
    font-size: calc(0.6875 * var(--u));
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

.ui-avatar.is-maly {
    width: calc(1.375 * var(--u));
    height: calc(1.375 * var(--u));
    font-size: calc(0.5625 * var(--u));
    letter-spacing: 0;
}

.ui-avatar.is-velky {
    width: calc(2.25 * var(--u));
    height: calc(2.25 * var(--u));
    font-size: calc(0.8125 * var(--u));
}

/* riešiteľ zatiaľ nie je */
.ui-avatar.is-nikto {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--tlmene) 45%, var(--linka));
    background: transparent;
}

/* farby stavov - bodka, čip aj hlavička stĺpca nástenky čítajú --stav-farba */
:is(.ui-bodka, .ui-stav, .ui-stlpec).is-novy { --stav-farba: var(--signal); }
:is(.ui-bodka, .ui-stav, .ui-stlpec).is-otvoreny { --stav-farba: var(--text); }
:is(.ui-bodka, .ui-stav, .ui-stlpec).is-caka { --stav-farba: var(--cakanie); }
:is(.ui-bodka, .ui-stav, .ui-stlpec).is-vyrieseny { --stav-farba: var(--vyriesene); }

.ui-bodka {
    display: inline-block;
    flex: none;
    width: calc(0.5 * var(--u));
    height: calc(0.5 * var(--u));
    border-radius: 50%;
    background: var(--stav-farba, var(--tlmene));
}

/* čip stavu - pilulka s bodkou, text vždy tmavý (farba je len v bodke) */
.ui-stav {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: calc(0.375 * var(--u));
    height: calc(1.5 * var(--u));
    padding: 0 calc(0.625 * var(--u)) 0 calc(0.5 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: 999rem;
    background: var(--papier);
    color: var(--text);
    font-size: calc(0.75 * var(--u));
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.ui-stav::before {
    content: "";
    width: calc(0.5 * var(--u));
    height: calc(0.5 * var(--u));
    border-radius: 50%;
    background: var(--stav-farba, var(--tlmene));
}

/* priorita - tichá značka: bodka + text, bez pilulky (ako na karte v appke) */
.ui-priorita {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: calc(0.375 * var(--u));
    color: var(--text);
    font-size: calc(0.75 * var(--u));
    font-weight: 600;
    line-height: calc(1.375 * var(--u));
    white-space: nowrap;
}

.ui-priorita::before {
    content: "";
    width: calc(0.5 * var(--u));
    height: calc(0.5 * var(--u));
    border-radius: 50%;
    background: var(--priorita-farba, var(--tlmene));
}

.ui-priorita.is-nizka {
    --priorita-farba: color-mix(in srgb, var(--tlmene) 40%, var(--linka));
    color: var(--tlmene);
    font-weight: 500;
}

.ui-priorita.is-bezna {
    --priorita-farba: var(--tlmene);
    font-weight: 500;
}

.ui-priorita.is-asap {
    --priorita-farba: var(--priorita-asap);
    color: var(--priorita-asap-text);
}

.ui-priorita.is-blokujuce {
    --priorita-farba: var(--priorita-blokujuce);
    color: var(--priorita-blokujuce-text);
}

/* =====================================================================
   Tlačidlá appky, klávesa, hľadanie, čipy filtrov, záložky
   ===================================================================== */
.ui-tlacidlo {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: calc(0.375 * var(--u));
    height: calc(2.25 * var(--u));
    padding: 0 calc(0.875 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: calc(0.5 * var(--u));
    background: var(--papier);
    color: var(--text);
    font-family: var(--pismo);
    font-size: calc(0.875 * var(--u));
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}

:is(button, a).ui-tlacidlo {
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

:is(button, a).ui-tlacidlo:hover {
    background: var(--hmla);
    color: var(--text);
}

.ui-tlacidlo.is-primarne {
    border-color: var(--signal);
    background: var(--signal);
    color: var(--papier);
    font-weight: 600;
}

:is(button, a).ui-tlacidlo.is-primarne:hover {
    border-color: var(--signal-tmavy);
    background: var(--signal-tmavy);
    color: var(--papier);
}

.ui-tlacidlo .ui-ikona {
    width: calc(1 * var(--u));
    height: calc(1 * var(--u));
}

/* AI akcie - sparkle v akcente (na primárnom bielom) */
.ui-tlacidlo.is-ai .ui-ikona {
    color: var(--signal);
}

.ui-tlacidlo.is-ai.is-primarne .ui-ikona {
    color: var(--papier);
}

.ui-tlacidlo.is-male {
    height: calc(1.875 * var(--u));
    padding: 0 calc(0.625 * var(--u));
    border-radius: calc(0.4375 * var(--u));
    font-size: calc(0.8125 * var(--u));
}

/* len ikona (⋯) - štvorec */
.ui-tlacidlo.is-ikona {
    width: calc(2.25 * var(--u));
    padding: 0;
}

.ui-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(1.5 * var(--u));
    height: calc(1.5 * var(--u));
    padding: 0 calc(0.375 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-bottom-width: calc(0.125 * var(--u));
    border-radius: calc(0.375 * var(--u));
    background: var(--hmla);
    color: var(--text);
    font-family: var(--pismo-mono);
    font-size: calc(0.8125 * var(--u));
    font-weight: 500;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
}

/* tmavá klávesa (--noc, malý prvok) */
.ui-kbd.is-tmava {
    border-color: var(--noc);
    border-bottom-color: color-mix(in srgb, var(--noc) 60%, #000);
    background: var(--noc);
    color: var(--papier);
}

/* práve stlačená (nápoveda skratiek vo verzii A) */
.ui-kbd.is-stlacena {
    border-color: var(--signal-tmavy);
    border-bottom-width: var(--vlas);
    background: var(--signal);
    color: var(--papier);
    transform: translateY(calc(0.0625 * var(--u)));
}

.ui-hladanie {
    display: flex;
    align-items: center;
    gap: calc(0.5 * var(--u));
    height: calc(2.25 * var(--u));
    padding: 0 calc(0.5 * var(--u)) 0 calc(0.75 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: calc(0.625 * var(--u));
    background: var(--papier);
    color: var(--tlmene);
    font-size: calc(0.875 * var(--u));
    white-space: nowrap;
}

.ui-hladanie .ui-ikona {
    width: calc(1 * var(--u));
    height: calc(1 * var(--u));
}

.ui-hladanie > span:not(.ui-kbd) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-hladanie .ui-kbd {
    min-width: calc(1.25 * var(--u));
    height: calc(1.25 * var(--u));
    padding: 0 calc(0.3125 * var(--u));
    border-bottom-width: var(--vlas);
    border-radius: calc(0.3125 * var(--u));
    color: var(--tlmene);
    font-family: var(--pismo);
    font-size: calc(0.75 * var(--u));
}

.ui-cipy {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.375 * var(--u));
}

.ui-cip {
    display: inline-flex;
    align-items: center;
    height: calc(1.75 * var(--u));
    padding: 0 calc(0.75 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: 999rem;
    background: var(--papier);
    color: var(--text);
    font-size: calc(0.8125 * var(--u));
    font-weight: 500;
    white-space: nowrap;
}

.ui-cip.is-aktivny {
    border-color: color-mix(in srgb, var(--signal) 45%, var(--linka));
    background: color-mix(in srgb, var(--signal) 10%, var(--papier));
}

/* záložky „komu patrí" - Moje / Sledujem / Nepriradené / Všetky */
.ui-zalozky {
    display: flex;
    gap: calc(1.5 * var(--u));
    border-bottom: var(--vlas) solid var(--linka);
    overflow: hidden;
}

.ui-zalozka {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: calc(0.375 * var(--u));
    margin-bottom: calc(-1 * var(--vlas));
    padding: calc(0.375 * var(--u)) 0 calc(0.625 * var(--u));
    border: 0;
    border-bottom: calc(0.125 * var(--u)) solid transparent;
    background: none;
    color: var(--tlmene);
    font-family: var(--pismo);
    font-size: calc(0.9375 * var(--u));
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.ui-zalozka.is-aktivna {
    border-bottom-color: var(--text);
    color: var(--text);
    font-weight: 600;
}

.ui-zalozka-pocet {
    min-width: calc(1.5 * var(--u));
    padding: 0 calc(0.375 * var(--u));
    border-radius: 999rem;
    background: color-mix(in srgb, var(--linka) 70%, var(--hmla));
    color: var(--tlmene);
    font-size: calc(0.75 * var(--u));
    font-weight: 500;
    line-height: calc(1.25 * var(--u));
    text-align: center;
}

.ui-zalozka.is-aktivna .ui-zalozka-pocet {
    color: var(--text);
}

/* =====================================================================
   Okno prehliadača a horná lišta appky
   ===================================================================== */
.ui-okno {
    --ui-okno-r: calc(1 * var(--u));
    overflow: hidden;
    border: var(--vlas) solid var(--linka);
    border-radius: var(--ui-okno-r);
    background: var(--papier);
    box-shadow: var(--ui-tien);
}

.ui-okno-lista {
    display: flex;
    align-items: center;
    gap: calc(1 * var(--u));
    height: calc(2.375 * var(--u));
    padding: 0 calc(0.875 * var(--u));
    border-bottom: var(--vlas) solid var(--linka);
    background: color-mix(in srgb, var(--hmla) 70%, var(--papier));
}

.ui-okno-bodky,
.ui-okno-lista::after {
    display: flex;
    flex: none;
    gap: calc(0.375 * var(--u));
    width: calc(2.625 * var(--u));
}

.ui-okno-lista::after {
    content: "";
}

.ui-okno-bodky > i {
    width: calc(0.625 * var(--u));
    height: calc(0.625 * var(--u));
    border-radius: 50%;
    background: color-mix(in srgb, var(--tlmene) 22%, var(--linka));
}

.ui-okno-adresa {
    flex: 0 1 calc(22 * var(--u));
    min-width: 0;
    height: calc(1.5 * var(--u));
    margin-inline: auto;
    padding: 0 calc(0.75 * var(--u));
    overflow: hidden;
    border: var(--vlas) solid var(--linka);
    border-radius: 999rem;
    background: var(--papier);
    color: var(--tlmene);
    font-size: calc(0.75 * var(--u));
    line-height: calc(1.375 * var(--u));
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* horná lišta appky: logo, Tikety / Pošta / Klienti, vpravo zvonček a avatar */
.ui-app-hd {
    display: flex;
    align-items: center;
    gap: calc(1.75 * var(--u));
    height: calc(3.25 * var(--u));
    padding: 0 calc(1.25 * var(--u));
    border-bottom: var(--vlas) solid var(--linka);
    background: var(--papier);
}

.ui-app-logo {
    flex: none;
    width: auto;
    height: calc(1 * var(--u));
}

.ui-app-nav {
    display: flex;
    gap: calc(1.25 * var(--u));
    color: var(--tlmene);
    font-size: calc(0.875 * var(--u));
}

.ui-app-nav > span {
    padding: calc(0.25 * var(--u)) 0;
    border-bottom: var(--vlas) solid transparent;
    white-space: nowrap;
}

.ui-app-nav > .is-aktivna {
    border-bottom-color: var(--signal);
    color: var(--text);
}

.ui-app-vpravo {
    display: flex;
    align-items: center;
    gap: calc(0.875 * var(--u));
    margin-left: auto;
    color: var(--tlmene);
}

.ui-app-vpravo .ui-ikona {
    width: calc(1.25 * var(--u));
    height: calc(1.25 * var(--u));
}

/* =====================================================================
   Pošta - kontá a priečinky | zoznam | otvorená správa
   ===================================================================== */
.ui-posta {
    display: grid;
    grid-template-columns: calc(12.5 * var(--u)) minmax(0, calc(22 * var(--u))) minmax(0, 1fr);
    min-height: var(--ui-posta-vyska, calc(30 * var(--u)));
    background: var(--papier);
    color: var(--text);
}

.ui-posta-konta {
    padding: calc(1 * var(--u)) calc(0.75 * var(--u));
    border-right: var(--vlas) solid var(--linka);
    background: var(--hmla);
}

.ui-posta-konto + .ui-posta-konto {
    margin-top: calc(1.25 * var(--u));
}

.ui-posta-konto-nazov {
    display: block;
    margin-bottom: calc(0.375 * var(--u));
    padding: 0 calc(0.625 * var(--u));
    color: var(--tlmene);
    font-size: calc(0.75 * var(--u));
    font-weight: 600;
}

.ui-posta-priecinky {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-posta-priecinok {
    display: flex;
    align-items: center;
    gap: calc(0.625 * var(--u));
    min-height: calc(2.25 * var(--u));
    padding: 0 calc(0.625 * var(--u));
    border-radius: calc(0.625 * var(--u));
    color: var(--text);
    font-size: calc(0.875 * var(--u));
    white-space: nowrap;
}

.ui-posta-priecinok.is-aktivny {
    background: color-mix(in srgb, var(--signal) 12%, var(--papier));
    color: var(--signal-tmavy);
    font-weight: 600;
}

.ui-posta-priecinok > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-posta-priecinok > .ui-posta-odznak {
    flex: none;
    min-width: calc(1.375 * var(--u));
    padding: 0 calc(0.375 * var(--u));
    border-radius: 999rem;
    background: var(--signal);
    color: var(--papier);
    font-size: calc(0.75 * var(--u));
    font-weight: 600;
    line-height: calc(1.375 * var(--u));
    text-align: center;
}

.ui-posta-zoznam {
    min-width: 0;
    overflow: hidden;
    border-right: var(--vlas) solid var(--linka);
}

.ui-posta-zoznam-hd {
    padding: calc(1 * var(--u)) calc(1 * var(--u)) calc(0.75 * var(--u));
}

.ui-posta-nadpis {
    display: block;
    font-size: calc(1.25 * var(--u));
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.ui-posta-podnadpis {
    display: block;
    overflow: hidden;
    color: var(--tlmene);
    font-size: calc(0.8125 * var(--u));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-posta-zoznam > .ui-hladanie,
.ui-posta-zoznam > .ui-cipy {
    margin: 0 calc(1 * var(--u)) calc(0.75 * var(--u));
}

.ui-posta-citanie {
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--u));
    min-width: 0;
    padding: calc(1.25 * var(--u)) calc(1.5 * var(--u)) calc(1.5 * var(--u));
}

.ui-posta-akcie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(0.375 * var(--u));
}

.ui-posta-akcie > .ui-tlacidlo.is-ikona:last-child {
    margin-left: auto;
}

.ui-posta-predmet {
    display: block;
    font-size: calc(1.25 * var(--u));
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* pruh tiketu nad vláknom - číslo, stav, riešiteľ */
.ui-posta-tiket {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(0.375 * var(--u)) calc(1 * var(--u));
    padding: calc(0.5 * var(--u)) calc(0.75 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: calc(0.625 * var(--u));
    background: var(--hmla);
    font-size: calc(0.875 * var(--u));
}

.ui-posta-tiket > span {
    display: inline-flex;
    align-items: center;
    gap: calc(0.375 * var(--u));
    min-width: 0;
}

.ui-posta-tiket-cislo {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* zbalené písanie pod správou - „Odpovedať zákazníkovi…" + AI návrh */
.ui-pisanie {
    display: flex;
    gap: calc(0.5 * var(--u));
}

.ui-pisanie-riadok {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    min-height: calc(2.5 * var(--u));
    padding: 0 calc(0.75 * var(--u));
    overflow: hidden;
    border: var(--vlas) solid var(--linka);
    border-radius: calc(0.625 * var(--u));
    background: var(--papier);
    color: var(--tlmene);
    font-size: calc(0.875 * var(--u));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-pisanie > .ui-tlacidlo {
    height: auto;
    min-height: calc(2.5 * var(--u));
}

/* užšie okno: najprv zmizne čítanie, potom kontá (zoznam ostáva vždy) */
@container okno (width < 52rem) {
    .ui-posta {
        grid-template-columns: calc(12.5 * var(--u)) minmax(0, 1fr);
    }

    .ui-posta-citanie {
        display: none;
    }

    .ui-posta-zoznam {
        border-right: 0;
    }
}

@container okno (width < 30rem) {
    .ui-posta {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-posta {
        min-height: var(--ui-posta-vyska-uzka, 0rem);
    }

    .ui-posta-konta {
        display: none;
    }

    .ui-app-nav > :not(.is-aktivna) {
        display: none;
    }
}

/* =====================================================================
   Riadok mailu
   ===================================================================== */
.ui-riadky {
    margin: 0;
    padding: 0;
    border-top: var(--vlas) solid var(--linka);
    list-style: none;
}

.ui-riadok {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(0.1875 * var(--u));
    min-width: 0;
    padding: calc(0.625 * var(--u)) calc(1 * var(--u)) calc(0.625 * var(--u)) calc(2.25 * var(--u));
    border-bottom: var(--vlas) solid var(--linka);
    background: var(--papier);
    color: var(--text);
    line-height: 1.45;
}

/* konverzácia bez tiketu - jemne iné pozadie */
.ui-riadok.is-konverzacia {
    background: color-mix(in srgb, var(--signal) 4%, var(--papier));
}

.ui-riadok-r1,
.ui-riadok-r2 {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(0.5 * var(--u));
    min-width: 0;
}

.ui-riadok-od,
.ui-riadok-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-riadok-od {
    font-size: calc(0.875 * var(--u));
}

.ui-riadok-text {
    font-size: calc(0.8125 * var(--u));
}

.ui-riadok-zaciatok {
    color: var(--tlmene);
}

.ui-riadok-cas {
    flex: none;
    margin-left: auto;
    color: var(--tlmene);
    font-size: calc(0.75 * var(--u));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ui-riadok-cislo {
    flex: none;
    color: var(--tlmene);
    font-size: calc(0.75 * var(--u));
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ui-riadok .ui-avatar {
    width: calc(1.375 * var(--u));
    height: calc(1.375 * var(--u));
    font-size: calc(0.5625 * var(--u));
    letter-spacing: 0;
}

/* bodka neprečítané - v ľavom okraji, zarovnaná s prvým riadkom */
.ui-riadok-bodka {
    position: absolute;
    top: 50%;
    left: calc(-1.375 * var(--u));
    width: calc(0.5 * var(--u));
    height: calc(0.5 * var(--u));
    border-radius: 50%;
    background: var(--signal);
    opacity: 0;
    transform: translateY(-50%);
}

.ui-riadok.is-neprecitane .ui-riadok-bodka {
    opacity: 1;
}

.ui-riadok.is-neprecitane :is(.ui-riadok-od, .ui-riadok-predmet) {
    font-weight: 600;
}

/* vybraná položka (j/k) */
.ui-riadok.is-vybrany {
    outline: calc(0.125 * var(--u)) solid var(--signal);
    outline-offset: calc(-0.125 * var(--u));
    background: color-mix(in srgb, var(--signal) 8%, var(--papier));
}

/* naposledy otvorená */
.ui-riadok.is-posledny {
    background: var(--odpoved-plocha);
    box-shadow: inset calc(0.1875 * var(--u)) 0 0 var(--signal);
}

/* =====================================================================
   Karta tiketu
   ===================================================================== */
.ui-karta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(0.375 * var(--u));
    min-width: 0;
    padding: calc(0.75 * var(--u)) calc(0.875 * var(--u)) calc(0.6875 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: calc(0.625 * var(--u));
    background: var(--papier);
    color: var(--text);
    line-height: 1.45;
    text-align: left;
}

/* ASAP / Blokujúce - farebný ľavý okraj (Bežná a Nízka bez značky) */
.ui-karta.is-priorita-asap {
    border-left: calc(0.1875 * var(--u)) solid var(--priorita-asap);
}

.ui-karta.is-priorita-blokujuce {
    border-left: calc(0.1875 * var(--u)) solid var(--priorita-blokujuce);
}

.ui-karta.is-vybrana {
    border-color: var(--signal);
    box-shadow: 0 0 0 calc(0.1875 * var(--u)) color-mix(in srgb, var(--signal) 15%, transparent);
}

/* neprečítaný - rámik jantárom (outline, nie text) */
.ui-karta.is-neprecitany {
    outline: calc(0.125 * var(--u)) solid var(--cakanie);
    outline-offset: calc(0.0625 * var(--u));
}

/* Pipe čaká na potvrdenie - rámik signálom + pilulka vpravo hore */
.ui-karta.is-pipe-caka {
    outline: calc(0.125 * var(--u)) solid var(--signal);
    outline-offset: calc(0.0625 * var(--u));
}

.ui-karta-pipe {
    position: absolute;
    top: calc(-0.5625 * var(--u));
    right: calc(0.75 * var(--u));
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: calc(0.25 * var(--u));
    max-width: calc(100% - 1.5 * var(--u));
    padding: 0 calc(0.4375 * var(--u)) 0 calc(0.3125 * var(--u));
    overflow: hidden;
    border-radius: 999rem;
    background: var(--signal);
    color: var(--papier);
    font-size: calc(0.6875 * var(--u));
    font-weight: 600;
    line-height: calc(1.125 * var(--u));
    white-space: nowrap;
}

.ui-karta-pipe .ui-ikona {
    width: calc(0.75 * var(--u));
    height: calc(0.75 * var(--u));
}

.ui-karta-hore,
.ui-karta-dole {
    display: flex;
    align-items: center;
    gap: calc(0.5 * var(--u));
    min-width: 0;
}

/* v úzkom stĺpci sa čas zalomí pod číslo, nepretečie */
.ui-karta-hore {
    flex-wrap: wrap;
    row-gap: 0;
}

.ui-karta-cislo {
    color: var(--tlmene);
    font-family: var(--pismo-mono);
    font-size: calc(0.75 * var(--u));
    white-space: nowrap;
}

.ui-karta-cas {
    margin-left: auto;
    color: var(--tlmene);
    font-size: calc(0.75 * var(--u));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ui-karta-predmet {
    display: -webkit-box;
    overflow: hidden;
    font-size: calc(0.9375 * var(--u));
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.ui-karta-kto {
    overflow: hidden;
    color: var(--tlmene);
    font-size: calc(0.8125 * var(--u));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-karta-dole {
    flex-wrap: wrap;
    gap: calc(0.375 * var(--u)) calc(0.625 * var(--u));
    min-height: calc(1.75 * var(--u));
    margin-top: calc(0.125 * var(--u));
}

.ui-karta-dole > .ui-avatar {
    margin-left: auto;
}

/* =====================================================================
   Nástenka - 4 stĺpce (na úzkom obale 2 a 1)
   ===================================================================== */
.ui-nastenka {
    container-type: inline-size;
    color: var(--text);
}

/* hlavička nástenky ako v appke: nadpis, pod ním záložky */
.ui-nastenka-hd {
    display: grid;
    gap: calc(0.75 * var(--u));
    margin-bottom: calc(1 * var(--u));
}

.ui-nastenka-nadpis {
    font-size: calc(1.375 * var(--u));
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.ui-nastenka-stlpce {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(0.75 * var(--u));
    align-items: start;
}

@container (width < 40rem) {
    .ui-nastenka-stlpce {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (width < 17rem) {
    .ui-nastenka-stlpce {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ui-stlpec {
    display: flex;
    flex-direction: column;
    gap: calc(0.625 * var(--u));
    min-width: 0;
    padding: calc(0.75 * var(--u)) calc(0.625 * var(--u)) calc(0.625 * var(--u));
    border-radius: calc(0.875 * var(--u));
    background: var(--stlpec-tint, var(--hmla));
}

.ui-stlpec-hd {
    display: flex;
    align-items: center;
    gap: calc(0.4375 * var(--u));
    min-width: 0;
    padding: calc(0.125 * var(--u)) calc(0.375 * var(--u)) calc(0.125 * var(--u));
    overflow: hidden;
    font-size: calc(0.875 * var(--u));
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.ui-stlpec-hd::before {
    content: "";
    flex: none;
    width: calc(0.5 * var(--u));
    height: calc(0.5 * var(--u));
    border-radius: 50%;
    background: var(--stav-farba, var(--tlmene));
}

.ui-stlpec-nazov {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-stlpec-pocet {
    color: var(--tlmene);
    font-weight: 500;
}

.ui-stlpec-karty {
    display: flex;
    flex-direction: column;
    gap: calc(0.5 * var(--u));
    min-height: calc(3.5 * var(--u));
}

.ui-stlpec-prazdny {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(3.5 * var(--u));
    border: var(--vlas) dashed color-mix(in srgb, var(--tlmene) 35%, var(--linka));
    border-radius: calc(0.625 * var(--u));
    color: var(--tlmene);
    font-size: calc(0.75 * var(--u));
}

/* =====================================================================
   Vlákno: mail, interná poznámka (žltá), odpoveď zákazníkovi (modrá)
   ===================================================================== */
.ui-sprava {
    padding: calc(0.75 * var(--u)) calc(0.875 * var(--u)) calc(0.875 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: calc(0.625 * var(--u));
    background: var(--papier);
    color: var(--text);
    line-height: 1.45;
}

.ui-sprava--mail {
    background: var(--hmla);
}

.ui-sprava--poznamka {
    border-color: var(--poznamka-linka);
    background: var(--poznamka-plocha);
}

.ui-sprava--odpoved {
    border-color: var(--odpoved-linka);
    background: var(--odpoved-plocha);
}

.ui-sprava-hd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(0.25 * var(--u)) calc(0.5 * var(--u));
    margin-bottom: calc(0.5 * var(--u));
    color: var(--tlmene);
    font-size: calc(0.8125 * var(--u));
    line-height: 1.3;
}

.ui-sprava-hd strong {
    color: var(--text);
    font-weight: 600;
}

.ui-sprava-hd .ui-avatar {
    width: calc(1.5 * var(--u));
    height: calc(1.5 * var(--u));
    font-size: calc(0.5625 * var(--u));
}

/* druh správy - „Interná poznámka", „Odpoveď zákazníkovi" */
.ui-sprava-druh {
    color: var(--text);
    font-weight: 500;
}

.ui-sprava-cas {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ui-sprava-komu {
    margin: calc(-0.25 * var(--u)) 0 calc(0.375 * var(--u));
    color: var(--tlmene);
    font-size: calc(0.8125 * var(--u));
}

.ui-sprava-telo {
    font-size: calc(0.9375 * var(--u));
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* @Meno v poznámke - text v tmavšom signáli kvôli kontrastu na žltej */
.ui-zmienka {
    padding: 0 calc(0.3125 * var(--u));
    border-radius: calc(0.375 * var(--u));
    background: color-mix(in srgb, var(--signal) 10%, transparent);
    color: var(--signal-tmavy);
    font-weight: 500;
    white-space: nowrap;
}

/* =====================================================================
   Pipe - karta „AI návrh" / „AI súhrn" (sparkle + text AI …)
   ===================================================================== */
.ui-pipe {
    padding: calc(0.875 * var(--u)) calc(1 * var(--u)) calc(1 * var(--u));
    border-radius: calc(0.875 * var(--u));
    background: color-mix(in srgb, var(--signal) 7%, var(--papier));
    box-shadow: inset 0 0 0 var(--vlas) color-mix(in srgb, var(--signal) 22%, transparent);
    color: var(--text);
    line-height: 1.45;
}

.ui-pipe-hd {
    display: flex;
    align-items: center;
    gap: calc(0.4375 * var(--u));
    margin-bottom: calc(0.625 * var(--u));
    font-size: calc(0.875 * var(--u));
    font-weight: 600;
}

.ui-pipe-hd .ui-ikona {
    color: var(--signal);
}

.ui-pipe-kto {
    margin-left: auto;
    color: var(--tlmene);
    font-size: calc(0.8125 * var(--u));
    font-weight: 500;
}

.ui-pipe-pole {
    min-height: calc(4.75 * var(--u));
    padding: calc(0.625 * var(--u)) calc(0.875 * var(--u));
    border: var(--vlas) solid var(--odpoved-linka);
    border-radius: calc(0.625 * var(--u));
    background: var(--papier);
    font-size: calc(0.9375 * var(--u));
    line-height: 1.55;
}

/* prázdne pole - „Pipe navrhne odpoveď" */
.ui-pipe-pole.is-prazdne {
    color: var(--tlmene);
}

.ui-pipe-zoznam {
    display: grid;
    gap: calc(0.5 * var(--u));
    margin: 0;
    padding: 0 0 0 calc(1.125 * var(--u));
}

.ui-pipe-zoznam li::marker {
    color: var(--signal);
}

.ui-pipe-zoznam .ui-text {
    padding-block: calc(0.3125 * var(--u)) 0;
}

.ui-pipe-akcie {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.5 * var(--u));
    margin-top: calc(0.75 * var(--u));
}

/* =====================================================================
   Toast so „Späť" - tmavý ako v appke (malý prvok)
   ===================================================================== */
.ui-toast {
    display: inline-flex;
    align-items: center;
    gap: calc(0.75 * var(--u));
    max-width: calc(26 * var(--u));
    padding: calc(0.625 * var(--u)) calc(0.625 * var(--u)) calc(0.625 * var(--u)) calc(1 * var(--u));
    border-radius: calc(0.625 * var(--u));
    background: var(--noc);
    box-shadow: var(--ui-tien-maly);
    color: var(--papier);
    font-size: calc(0.9375 * var(--u));
    line-height: 1.3;
}

.ui-toast > .ui-ikona {
    color: color-mix(in srgb, var(--vyriesene) 65%, var(--papier));
}

.ui-toast-text {
    min-width: 0;
}

.ui-toast-akcia {
    flex: none;
    padding: calc(0.25 * var(--u)) calc(0.5 * var(--u));
    border: 0;
    border-radius: calc(0.375 * var(--u));
    background: rgb(255 255 255 / 0.12);
    color: var(--papier);
    font-family: var(--pismo);
    font-size: calc(0.8125 * var(--u));
    font-weight: 600;
    line-height: 1.3;
    text-decoration: underline;
    text-underline-offset: calc(0.125 * var(--u));
}

button.ui-toast-akcia {
    cursor: pointer;
}

button.ui-toast-akcia:hover {
    background: rgb(255 255 255 / 0.2);
}

button.ui-toast-akcia:focus-visible {
    outline-color: var(--signal-svetly);
}

.ui-toast-zavriet {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(1.75 * var(--u));
    height: calc(1.75 * var(--u));
    margin-left: auto;
    color: var(--tlmene-tma);
}

.ui-toast-zavriet .ui-ikona {
    width: calc(1 * var(--u));
    height: calc(1 * var(--u));
}

/* =====================================================================
   Telefón - appka do mobilu so spodnou lištou („ostrov")
   Obsah telefónu má vlastnú, menšiu mierku (--u * 0,78), aby sedel pomer ako na skutočnom displeji.
   ===================================================================== */
.ui-telefon {
    --u-telefon: calc(0.78 * var(--u));
    --telefon-r: calc(2.75 * var(--u));
    --telefon-ram: calc(0.5 * var(--u));
    position: relative;
    flex: none;
    width: calc(18 * var(--u));
    aspect-ratio: 9 / 19;
    padding: var(--telefon-ram);
    border-radius: var(--telefon-r);
    background: var(--papier);
    box-shadow: inset 0 0 0 var(--vlas) var(--linka), var(--ui-tien);
    color: var(--text);
}

.ui-telefon-obrazovka {
    --u: var(--u-telefon);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: var(--vlas) solid var(--linka);
    border-radius: calc(var(--telefon-r) - var(--telefon-ram));
    background: var(--papier);
    font-size: calc(1 * var(--u));
    line-height: 1.45;
}

/* výrez kamery - malý tmavý prvok */
.ui-telefon-obrazovka::before {
    content: "";
    position: absolute;
    top: calc(0.75 * var(--u));
    left: 50%;
    z-index: 3;
    width: calc(6.5 * var(--u));
    height: calc(1.75 * var(--u));
    border-radius: 999rem;
    background: var(--noc);
    transform: translateX(-50%);
}

.ui-telefon-hd {
    display: flex;
    flex: none;
    align-items: center;
    gap: calc(0.5 * var(--u));
    padding: calc(3.25 * var(--u)) calc(0.75 * var(--u)) calc(0.5 * var(--u));
    border-bottom: var(--vlas) solid var(--linka);
}

.ui-telefon-hd-nazov {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: calc(0.9375 * var(--u));
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-telefon-hd-nazov.is-cislo {
    color: var(--tlmene);
    font-family: var(--pismo-mono);
    font-size: calc(0.8125 * var(--u));
    font-weight: 400;
}

/* okrúhle tlačidlá hlavičky (späť, ⋯) */
.ui-telefon-kruh {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(2.75 * var(--u));
    height: calc(2.75 * var(--u));
    border-radius: 999rem;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    color: var(--text);
}

.ui-telefon-kruh .ui-ikona {
    width: calc(1.25 * var(--u));
    height: calc(1.25 * var(--u));
}

.ui-telefon-obsah {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: calc(0.75 * var(--u));
    min-height: 0;
    padding: calc(1 * var(--u)) calc(1 * var(--u)) calc(5.5 * var(--u));
    overflow: hidden;
    background: var(--papier);
}

.ui-telefon-nadpis {
    display: block;
    font-size: calc(1.25 * var(--u));
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.ui-telefon-vlastnosti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(0.375 * var(--u)) calc(0.625 * var(--u));
}

.ui-telefon-vlastnosti .ui-stav {
    height: calc(2 * var(--u));
    padding-inline: calc(0.625 * var(--u)) calc(0.75 * var(--u));
    font-size: calc(0.8125 * var(--u));
}

.ui-telefon-kto {
    display: inline-flex;
    align-items: center;
    gap: calc(0.375 * var(--u));
    color: var(--tlmene);
    font-size: calc(0.8125 * var(--u));
}

/* spodná lišta - ostrov nad spodkom obrazovky */
.ui-telefon-lista {
    position: absolute;
    right: calc(0.625 * var(--u));
    bottom: calc(0.625 * var(--u));
    left: calc(0.625 * var(--u));
    z-index: 2;
    display: flex;
    align-items: stretch;
    gap: calc(0.375 * var(--u));
    height: calc(4 * var(--u));
    padding: calc(0.375 * var(--u));
    border: var(--vlas) solid var(--linka);
    border-radius: calc(1.375 * var(--u));
    background: color-mix(in srgb, var(--papier) 90%, transparent);
    box-shadow: 0 0.75rem 2rem rgb(14 20 32 / 0.14), 0 0.125rem 0.375rem rgb(14 20 32 / 0.06);
}

.ui-telefon-polozka {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(0.1875 * var(--u));
    min-width: 0;
    border-radius: calc(1 * var(--u));
    color: var(--tlmene);
    font-size: calc(0.6875 * var(--u));
    font-weight: 500;
    line-height: 1.1;
}

.ui-telefon-polozka > span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-telefon-ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(3.25 * var(--u));
    max-width: 100%;
    height: calc(1.875 * var(--u));
    border-radius: 999rem;
}

.ui-telefon-ikona .ui-ikona {
    width: calc(1.375 * var(--u));
    height: calc(1.375 * var(--u));
}

/* akcia v detaile tiketu má text tmavý, sekcia v lište tlmený */
.ui-telefon-polozka.is-akcia {
    color: var(--text);
}

.ui-telefon-polozka.is-aktivna {
    color: var(--text);
    font-weight: 600;
}

.ui-telefon-polozka.is-aktivna .ui-telefon-ikona {
    background: color-mix(in srgb, var(--signal) 16%, transparent);
    color: var(--signal);
}

/* hlavná akcia detailu (Odpovedať) - jediné plné tlačidlo */
.ui-telefon-hlavna {
    display: inline-flex;
    flex: 1.4 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 calc(0.5 * var(--u));
    border-radius: calc(1 * var(--u));
    background: var(--signal);
    color: var(--papier);
    font-size: calc(0.9375 * var(--u));
    font-weight: 600;
    white-space: nowrap;
}

/* Pipe zaparkovaný vpravo v lište */
.ui-telefon-pipe {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: calc(0.4375 * var(--u));
    padding: 0 calc(0.875 * var(--u)) 0 calc(0.75 * var(--u));
    border-radius: calc(1 * var(--u));
    background: color-mix(in srgb, var(--signal) 14%, var(--papier));
    color: var(--signal-tmavy);
    font-size: calc(0.875 * var(--u));
    font-weight: 600;
}

.ui-telefon-pipe .ui-ikona {
    width: calc(1.25 * var(--u));
    height: calc(1.25 * var(--u));
    color: var(--signal);
}