/* ============================================================================
   Lepší maso — design systém
   ----------------------------------------------------------------------------
   Jeden soubor pro VŠECHNY plochy. Před tímhle měla appka čtyři nesouvisející
   vizuální systémy (tmavá hnědá konzole, tmavý slate customer_card, světlá
   krémová veřejná stránka, vlastní paleta v date_pickeru) a 4377 řádků
   duplikovaného CSS. Cokoliv se tu změní, změní se všude.

   PALETA: hluboká lesní zelená + chladné papírové neutrály.
   Vědomě NE béžová/terakotová. Lepší maso prodává masO z pastvy na předplatné
   a jeho skutečný argument je pastva a dohledatelnost (VS, porážkové dny,
   doručovací okna), ne řemeslná nostalgie. Takže paleta má být „pole a denní
   světlo", ne „kůže v řeznictví". Teplo na zákaznických stránkách nese
   fotografie, ne CSS.

   TVARY: jedno pravidlo, platí všude — ovládací prvky (tlačítka, inputy) 4px,
   kontejnery (karty) 6px, štítky stavů plný radius. Nic jiného se nezakulacuje.

   PÍSMA: Geist + Geist Mono, self-hostovaná ze static/fonts/ (viz komentář
   u STATICFILES_DIRS v settings.py — hotlink na Google je problém s GDPR).
   Mono se používá na VŠECHNA čísla, ne na ozdobu: konzole je hustá tabulková
   plocha a proporcionální číslice v ní neseřadí sloupec.

   HUSTOTA: <body class="console"> = hustý provozní režim (operátor v tom sedí
   celý den), <body class="portal"> = vzdušný zákaznický režim. Paleta stejná.
   ============================================================================ */

/* ---------- Písma ---------------------------------------------------------- */
/* @font-face je v samostatnem static/css/lm-fonts.css, protoze ho potrebuje i
   Django admin, ktery si ale zbytek tohohle souboru vzit nemuze. Sablony
   linkuji lm-fonts.css PRED lm.css. */

/* ---------- Tokeny: světlý režim ------------------------------------------ */
:root {
    --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    --bg: #f2f5f2;
    --bg-elevated: #fbfdfb;
    --panel: #ffffff;
    --surface: #ffffff;          /* alias pro zákaznické šablony */
    --panel-2: #e9eee9;
    --border: #bec7bf;
    --border-soft: #d3dcd4;
    /* Hranice OVLÁDACÍCH prvků (input, select, textarea, tlačítko). --border je
       vlasová linka kontejnerů a dělítek — na papírovém pozadí má 1,7:1, což je
       na kontejner v pořádku, ale na inputu ne: WCAG 1.4.11 chce 3:1 pro obrys,
       podle kterého se prvek vůbec pozná. Ve světlém režimu bez toho pole
       splývala s kartou a formulář vypadal jako plocha textu. 3,3:1 na bílé. */
    --border-strong: #7b857d;

    --text: #0d120f;
    --text-muted: #38403a;       /* Vysoký kontrast 7.8:1 na bílé */
    --text-faint: #4c544e;       /* 5.8:1 na bílé — zaručená čitelnost */

    --accent: #174227;           /* hluboká lesní zelená, 11:1 na bílé */
    --accent-hover: #0f2c1a;
    --accent-soft: #e0eee2;
    --accent-text: #113820;
    --accent-on: #ffffff;        /* text NA plné akcentní ploše */

    --success: #205e34;
    --success-soft: #def3e3;
    --danger: #9c1f14;
    --danger-soft: #fee4e2;
    --warning: #7a4604;
    --warning-soft: #fef0d2;
    --info: #343c39;             /* zřetelná tmavší neutrální */
    --info-soft: #e4e7e5;
    /* Fialová = „pouze vyřešit" (karta #329, majitel 4. 9. 2026): tiket, u
       kterého zákazníkovi nic neodejde, ať ve frontě nezůstane ležet. Jediné
       použití, schválně mimo zelenou/oranžovou/červenou. */
    --violet: #5b3a9a;
    --violet-soft: #eee6fb;

    /* aliasy, na kterých stojí zákaznické šablony */
    --forest: var(--accent);
    --forest-soft: var(--accent-soft);

    --radius: 4px;               /* ovládací prvky */
    --radius-lg: 6px;            /* kontejnery */

    --shadow: 0 1px 2px rgba(20, 24, 21, 0.05);
    --shadow-lift: 0 4px 14px rgba(20, 24, 21, 0.08);

    --speed: 140ms;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Výška horní lišty konzole (52px vnitřek + 1px spodní linka). Sticky
       prvky pod lištou (hlavičky tabulek, akční panel v tiketu) se od ní
       odsazují tímhle — ne napevno, ať se nerozjedou, když se lišta jednou
       přerobí. */
    --topbar-h: 53px;

    /* hustota — přepisuje ji .console / .portal na body */
    --base-size: 15px;
    --cell-y: 0.6rem;
    --cell-x: 0.85rem;

    color-scheme: light dark;
}

/* ---------- Tokeny: tmavý režim ------------------------------------------- */
/* Ne čistá čerň (#000 zabíjí hloubku) a ne modrý slate. Neutrální off-black,
   akcent se rozsvětlí, aby na tmavé prošel na kontrast. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #101211;
        --bg-elevated: #161918;
        --panel: #191d1b;
        --surface: #191d1b;
        --panel-2: #222726;
        --border: #2e3432;
        --border-soft: #242927;
        --border-strong: #6b746e;    /* 3,5:1 na tmavé kartě — stejné pravidlo jako ve světlém */

        --text: #e8ebe9;
        --text-muted: #9aa39d;
        --text-faint: #8b948d;

        --accent: #6fbe8b;
        --accent-hover: #87cf9f;
        --accent-soft: rgba(111, 190, 139, 0.14);
        --accent-text: #8fd0a5;
        --accent-on: #0e1210;

        --success: #6fbe8b;
        --success-soft: rgba(111, 190, 139, 0.14);
        --danger: #e2857a;
        --danger-soft: rgba(226, 133, 122, 0.14);
        --warning: #d9ac5c;
        --warning-soft: rgba(217, 172, 92, 0.14);
        --info: #9aa39d;
        --info-soft: rgba(154, 163, 157, 0.12);
        --violet: #b89af0;
        --violet-soft: rgba(184, 154, 240, 0.16);

        --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-lift: 0 4px 14px rgba(0, 0, 0, 0.5);
    }
}

/* ---------- Portálová varianta palety ------------------------------------ */
/* Majitel chce zákaznický portál „světle zelený" — hluboká lesní zelená
   (#174227) mu na zákaznické ploše vyšla moc tmavá. NENÍ to druhá paleta:
   je to tentýž lesní odstín o dva stupně světlejší a papír s trochou zeleně.
   Provozní konzole zůstává na tmavší verzi, protože v ní operátor sedí celý
   den a potřebuje kontrastnější plochu.

   Text se NEROZSVĚCUJE: --accent-text (odkazy, akcentní text) zůstává tmavý,
   světlá je jen výplň (--accent) a papír. Poměry hlídá
   portal/tests/test_barvy_portalu.py, ne oko.

   Tmavý režim se schválně nepřepisuje — tam už je akcent světlý (#6fbe8b)
   a portál v něm vypadá správně. Proto blok platí jen mimo tmavý režim. */
@media not all and (prefers-color-scheme: dark) {
    body.portal {
        --bg: #eaf4ee;
        --bg-elevated: #f3faf5;
        --panel-2: #dceee4;
        --border: #b7d2c1;
        --border-soft: #d0e4d7;

        --accent: #2f7d4f;       /* světlejší lesní zelená, 5:1 na bílé */
        --accent-hover: #26663f;
        --accent-soft: #e2f3e8;
        --accent-text: #1c5936;  /* text a odkazy zůstávají tmavé, 8,3:1 */
    }
}

/* ---------- Manažerské prostředí: druhá značková barva (karta #548) ------ */
/* Mirek 21. 9. 2026: v manažerském prostředí nemá pozadí svítit zeleně jako
   operátorovi, ale druhou značkovou barvou, aby bylo na první pohled vidět,
   kde jsem. Odstín je ZATÍM PRACOVNÍ — čeká se na přesný kód z brand manuálu
   (majitel ho měl poslat); tahle růžová/malinová jen drží stejný kontrast
   (~8:1 na bílé i na tmavé) jako zelený --accent, ať se dá bez rizika
   nahradit přesnou hodnotou později, aniž by se muselo cokoli přepočítávat.
   Přepisuje se jen --accent* — zbytek palety (pozadí, text, hranice) zůstává
   stejný jako u operátora, mění se jen akcentní barva. */
body.rezim-manazer {
    --accent: #9c1450;
    --accent-hover: #7d0f40;
    --accent-soft: #fbe1ec;
    --accent-text: #7d0f40;
}
@media (prefers-color-scheme: dark) {
    body.rezim-manazer {
        --accent: #e79dbb;
        --accent-hover: #efb5cc;
        --accent-soft: rgba(231, 157, 187, 0.16);
        --accent-text: #eeb0cd;
        --accent-on: #2b0a17;
    }
}

/* ---------- Sekce Manažer: softphone vpravo dole pryč (Tomáš 19. 10. 2026) --- */
/* „Operátoři momentálně navolávají skrze tikety, kde se rovnou číslo daného
   zákazníka propíše. Tam to necháváme, jak je. Jen pouze prosím tyto bloky skryj."
   Lištu kreslí `support/static/support/js/webrtc_phone.js` (`initPhoneUI`) na KAŽDÉ
   stránce konzole, protože se načítá z `base_console.html`.

   Schválně `sekce-manazera`, ne `rezim-manazer`: druhá třída platí i na detailu
   tiketu otevřeném z manažerské nástěnky a tam telefon zůstat MUSÍ.

   Skrývá se jen lišta a vytáčecí okno. Registrace k ústředně i okno příchozího
   hovoru (`#incoming-call-modal`) běží dál — manažerovi nemá utéct příchozí hovor.
   `!important` kvůli inline `display: flex`, kterým lištu vykresluje ten skript. */
body.sekce-manazera #phone-bar,
body.sekce-manazera #phone-dialer-modal {
    display: none !important;
}

/* ---------- Základ -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--base-size);
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;          /* ne 100vh — na iOS Safari skáče o výšku lišty */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.console { --base-size: 14px; --cell-y: 0.45rem; --cell-x: 0.7rem; }
body.portal  { --base-size: 16px; --cell-y: 0.7rem;  --cell-x: 1rem; line-height: 1.6; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--text);
    text-wrap: balance;          /* zabíjí osamocená slova na poslední řádce */
}
h1 { font-size: 1.55rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: 0.98rem; }
body.portal h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.025em; }
body.portal h2 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); }

p { margin: 0 0 0.85rem; max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
body.portal p { color: var(--text-muted); }

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

strong { font-weight: 600; }
hr { border: none; border-top: 1px solid var(--border-soft); margin: 1.5rem 0; }

code, kbd, samp, .mono {
    font-family: var(--mono);
    font-size: 0.92em;
    font-variant-numeric: tabular-nums;
}
code { color: var(--accent-text); }

/* Čísla musí být tabulární, jinak se sloupec v tabulce nezarovná. */
.num, td, th, .count, input[type="number"], input[type="date"] {
    font-variant-numeric: tabular-nums;
}

::selection { background: var(--accent-soft); color: var(--accent-text); }

/* ---------- Přístupnost --------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}
.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: 0.5rem; top: -3rem; z-index: 100;
    background: var(--accent); color: var(--accent-on);
    padding: 0.5rem 0.9rem; border-radius: var(--radius);
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
    transition: top var(--speed) var(--ease);
}
.skip-link:focus { top: 0.5rem; color: var(--accent-on); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Layout ------------------------------------------------------- */
.shell { max-width: 1240px; margin: 0 auto; padding: 1.5rem 1.5rem 3.5rem; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.wrap-narrow { max-width: 420px; margin: 0 auto; padding: 3.5rem 1.5rem; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.row-between { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.stack > * + * { margin-top: 0.75rem; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.right { text-align: right; }

/* ---------- Horní lišta (konzole) ---------------------------------------- */
/* Výška 52px + 1px linka = --topbar-h. Nav musí zůstat na JEDNOM řádku do
   1024px; pod tím se sroluje vodorovně, což je lepší než dvouřádková lišta
   žrající výšku.

   Majitel 7. 9. 2026 (karta #391): lišta se dřív schovávala za tenký proužek
   a musela se ručně vyklikávat — „otravuje to". Teď je natrvalo vidět a
   lepí se nahoru přes celé rolování. */
.topbar {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar-inner {
    max-width: 1240px; margin: 0 auto; padding: 0 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    height: 52px;
}
.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; flex-shrink: 0; }
.brand-mark {
    width: 24px; height: 24px; border-radius: var(--radius);
    background: var(--accent); color: var(--accent-on);
    font-weight: 700; font-size: 0.8rem; letter-spacing: -0.03em;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.brand-name { font-weight: 600; font-size: 0.95rem; color: var(--text); letter-spacing: -0.02em; white-space: nowrap; }
.brand-sub {
    font-size: 0.68rem; color: var(--text-faint); text-transform: uppercase;
    letter-spacing: 0.07em; padding-left: 0.55rem; margin-left: 0.05rem;
    border-left: 1px solid var(--border); white-space: nowrap;
}
.nav-links { display: flex; gap: 0.15rem; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-item {
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.nav-item:hover { color: var(--text); background: var(--panel-2); }
.nav-item.active { color: var(--accent-text); background: var(--accent-soft); font-weight: 600; }

@media (max-width: 720px) {
    .brand-sub { display: none; }
    .topbar-inner { gap: 0.75rem; }
}

/* ---------- Přepínače první úrovně a záložky druhé úrovně (karta #549) ----
   Majitel 21. 9. 2026: místo jedné dlouhé lišty široké přepínače
   Operátor | Zákazníci | Manažer a pod nimi záložky. Segmenty jsou roztažené
   přes celou šířku (flex: 1), aktivní nese plnou akcentovou barvu — týž
   vzhled jako aktivní záložka (.tab-btn.active) o řádek níž.

   Řada NENÍ přilepená nahoru: --topbar-h měří jen lištu s logem a počítají
   s ní lepicí hlavičky uvnitř stránek (position: sticky; top: var(--topbar-h)). */
.prepinace { background: var(--panel); border-bottom: 1px solid var(--border); }
.prepinace-inner {
    max-width: 1240px; margin: 0 auto; padding: 0.2rem 1.5rem;
    display: flex; gap: 0.25rem;
}
/* Hana 14. 10. 2026: přepínače Operátor / Zákazníci / Manažer užší lišta a menší písmo — stejná velikost jako
   odkazy horní lišty (.nav-item, 0.85rem). */
.prepinac {
    flex: 1; text-align: center;
    padding: 0.28rem 0.9rem;
    border-radius: var(--radius);
    color: var(--text-muted); text-decoration: none;
    font-size: 0.85rem; font-weight: 600; white-space: nowrap;
    transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.prepinac:hover { color: var(--text); background: var(--panel-2); }
.prepinac.active { background: var(--accent); color: var(--accent-on); }
.nav-druha-uroven { max-width: 1240px; margin: 0 auto; padding: 0.75rem 1.5rem 0; }

/* ---------- Pás fronty pod přepínačem (Hana 14. 10. 2026) ------------------
   Záložky fronty (Zmeškané hovory, E-maily & SMS, …) a nástroje (nový tiket, hledání, přiřazení, stránkování)
   jsou jeden pás nalepený přímo na přepínač Operátor / Zákazníci / Manažer. Pás vyplňuje blok `pod_prepinaci`
   v base_console.html, takže jde přes celou šířku okna s obsahem uprostřed. Otevřená záložka je jen lehce
   podbarvená, ne plná akcentová barva. */
.fronta-pas { background: var(--panel); border-bottom: 1px solid var(--border); }
.fronta-pas-inner { max-width: 1240px; margin: 0 auto; padding: 0.3rem 1.5rem 0.45rem; }
.fronta-pas .nav-tabs { background: none; border: none; padding: 0; margin: 0 0 0.35rem; gap: 0.2rem; }
.fronta-pas .tab-btn { padding: 0.3rem 0.75rem; font-size: 0.85rem; }
.fronta-pas .tab-btn:hover { background: var(--panel-2); color: var(--text); }
.fronta-pas .tab-btn.active { background: var(--accent-soft); color: var(--accent-text); }
/* Hana 14. 10. 2026: manažerská řada záložek je jeden řádek jako u operátora — nikdy se nezlomí pod sebe;
   když se nevejde (úzké okno), posouvá se do strany. */
.nav-tabs-jeden-radek { flex-wrap: nowrap; overflow-x: auto; }
/* Hana 15. 10. 2026: poslední dvě lišty (přepínač Operátor / Zákazníci / Manažer a řada záložek) jsou stejně široké —
   záložky se roztáhnou přes celou šířku pásu (stejný max-width a okraje jako .prepinace-inner), text na střed. */
.nav-tabs-jeden-radek .tab-btn { flex: 1 0 auto; white-space: nowrap; text-align: center; justify-content: center; }
.fronta-nastroje { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.fronta-nastroje .hledani, .fronta-nastroje select {
    padding: 0.3rem 0.65rem; font-size: 0.85rem; border-radius: 8px;
    border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.fronta-nastroje .hledani { flex: 1; min-width: 200px; }
.fronta-nastroje select { width: auto; flex: 0 0 auto; min-width: 9rem; max-width: 18rem; }
.fronta-nastroje .strankovani-radek { margin-left: auto; font-size: 0.85rem; color: var(--text-muted); }
.fronta-pas + .shell { padding-top: 1rem; }


/* Řada záložek s počty. Bývala v support/templates/support/_styl_fronty.html
   (karta #544); od karty #549 ji potřebuje i hlavní navigace v base_console,
   takže je tady v jediném lm.css a fronty ji dědí. */
.nav-tabs {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.3rem;
    background: var(--bg-elevated); padding: 0.3rem;
    border-radius: var(--radius); border: 1px solid var(--border-soft);
    margin-bottom: 0.75rem;
}
.tab-btn { padding: 0.5rem 1rem; border-radius: 6px; font-weight: 600; font-size: 0.85rem; color: var(--text-muted); text-decoration: none; }
.tab-btn.active { background: var(--accent); color: var(--accent-on); }
/* Počítadlo má vlastní neprůhledné pozadí (--panel) i vlastní barvu textu —
   bez toho zdědí na aktivní záložce --accent-on (skoro černá) a na tmavém
   pozadí pilulky zmizí. */
.pocet-zalozky {
    display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.4rem;
    border-radius: 999px; background: var(--panel); color: var(--text-muted);
    font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
}

/* ---------- Hlavička (zákaznická) --------------------------------------- */
.site-header { border-bottom: 1px solid var(--border); background: var(--panel); }
.site-header-inner {
    max-width: 1080px; margin: 0 auto; padding: 0 1.5rem;
    height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.site-header .brand-mark { width: 30px; height: 30px; font-size: 0.95rem; }
.site-header .brand-name { font-size: 1.08rem; }
.header-link { font-size: 0.88rem; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.header-link:hover { color: var(--accent); }

/* ---------- Nadpisové drobnosti ----------------------------------------- */
/* .eyebrow je malý kapitálkový štítek nad nadpisem. V konzoli je to legitimní
   označení sekce v hustém rozhraní. Na zákaznických stránkách se drží na
   minimu — tam z toho jinak vznikne ta typická „každá sekce má nálepku"
   šablonovitost. */
.eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 0.3rem;
}
.lead { font-size: 1.05rem; color: var(--text-muted); max-width: 60ch; }
body.portal .lead { font-size: 1.12rem; }

/* ---------- Karty ------------------------------------------------------- */
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.3rem;
    margin-bottom: 1.25rem;
}
body.portal .card { padding: 1.6rem 1.8rem; margin-bottom: 1.5rem; box-shadow: var(--shadow); }
.card > :last-child { margin-bottom: 0; }
.card-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; margin-bottom: 0.9rem; padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-soft);
}
.card-header:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.card-note { font-size: 0.85rem; color: var(--text-muted); margin: 0.35rem 0 0; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .card-header { padding: 1.15rem 1.3rem 0.8rem; margin-bottom: 0; }

/* ---------- Nápověda / kroky -------------------------------------------- */
details.guide {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.5rem;
}
details.guide summary {
    font-weight: 600; font-size: 0.95rem; cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    color: var(--text);
}
details.guide summary::-webkit-details-marker { display: none; }
details.guide summary::after {
    content: "+"; font-family: var(--mono); color: var(--text-faint);
    font-size: 1.1rem; line-height: 1;
}
details.guide[open] summary::after { content: "\2212"; }
.guide-hint { font-size: 0.78rem; font-weight: 400; color: var(--text-faint); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.step { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 0.8rem 0.9rem; }
.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-text);
    font-family: var(--mono); font-weight: 700; font-size: 0.7rem;
    margin-bottom: 0.45rem;
}
.step strong { display: block; margin-bottom: 0.15rem; font-size: 0.9rem; }
.step p { font-size: 0.82rem; color: var(--text-muted); margin: 0; }

/* ---------- Tlačítka ---------------------------------------------------- */
/* `button, .btn { display: inline-flex }` níže by jinak přebilo atribut
   `hidden` — skryté tlačítko „enter" z karty #402 (ticket_detail) tak bylo
   12. 9. 2026 vidět jako prázdný rámeček nad návrhem odpovědi. Platí pro
   cokoli s `hidden`, ne jen pro tlačítka. */
[hidden] { display: none !important; }
/* :active posune o 1px dolů — hmatová odezva, aby kliknutí mělo fyzický pocit. */
button, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--panel);
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;         /* text v CTA se nesmí zlomit na dva řádky */
    transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
body.portal button, body.portal .btn { padding: 0.65rem 1.2rem; font-size: 0.92rem; }
button:hover, .btn:hover { background: var(--panel-2); border-color: var(--text-faint); color: var(--text); }
button:active, .btn:active { transform: translateY(1px); }
button[disabled], .btn[disabled], button:disabled {
    opacity: 0.45; cursor: not-allowed; transform: none;
}
button.primary, .btn.primary {
    background: var(--accent); border-color: var(--accent); color: var(--accent-on);
}
button.primary:hover, .btn.primary:hover {
    background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-on);
}
button.success, .btn.success { background: var(--success); border-color: var(--success); color: var(--accent-on); }
button.success:hover, .btn.success:hover { filter: brightness(1.08); color: var(--accent-on); }
button.danger, .btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
button.danger:hover, .btn.danger:hover { background: var(--danger-soft); color: var(--danger); }
button.ghost, .btn.ghost { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
button.ghost:hover, .btn.ghost:hover { background: var(--panel-2); color: var(--text); }
button.block, .btn.block { width: 100%; }
button.sm, .btn.sm { padding: 0.28rem 0.6rem; font-size: 0.78rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }

/* Řádek stránkování seznamu tiketů (karta #33, `_strankovani_tiketu.html`).
   Chyběl mu vlastní styl úplně — bez odsazení jel nalepený na řádek nad
   sebou/pod sebou (Hana 24. 9. 2026, snímek). */
.pagination-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.6rem;
    padding: 0.75rem 0; margin: 0.5rem 0 1rem;
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted); font-size: 0.85rem;
}

/* Textový odkaz jako terciární akce — ubere vizuální šum tam, kde by dvě
   tlačítka vedle sebe soupeřila. */
.btn-link {
    background: none; border: none; padding: 0; color: var(--accent-text);
    font-weight: 600; font-size: 0.85rem; cursor: pointer; text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Formuláře --------------------------------------------------- */
/* Label VŽDY nad inputem, chybová hláška pod ním. Placeholder není label. */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="password"], input[type="search"], select, textarea {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--bg-elevated);
    color: var(--text);
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.4;
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
body.portal input[type="text"], body.portal input[type="email"], body.portal input[type="tel"],
body.portal select, body.portal textarea { padding: 0.6rem 0.8rem; font-size: 0.95rem; }
textarea { resize: vertical; min-height: 5rem; }
input:hover, select:hover, textarea:hover { border-color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; }
input[aria-invalid="true"], .field-error input, .field-error textarea, .field-error select {
    border-color: var(--danger);
}
select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 49%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 51%);
    background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
    background-size: 5px 5px, 5px 5px;
    /* Bez `no-repeat` se ty dva pětipixelové trojúhelníčky, ze kterých je
       složená šipka, vydláždí po CELÉ ploše seznamu. Výsledkem je šrafovaná
       tapeta přes text, takže vybraná hodnota nejde přečíst — a protože je to
       tady v základním stylu, platilo to na všech rozbalovacích seznamech
       v portálu, konzoli operátora i v provozní sekci. */
    background-repeat: no-repeat;
    padding-right: 1.8rem;
}
select option, select optgroup {
    background-color: var(--surface, #191d1b);
    color: var(--text, #e8ebe9);
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
}
label.field-label, .field > label {
    display: block; font-size: 0.8rem; font-weight: 600;
    color: var(--text); margin-bottom: 0.3rem;
}
.field { margin-bottom: 0.9rem; }
.field-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.25rem; }
.field-msg { font-size: 0.78rem; color: var(--danger); margin-top: 0.25rem; font-weight: 500; }
fieldset { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1rem 1.1rem; margin: 0 0 1rem; }
legend { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); padding: 0 0.4rem; }

form.inline-form { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; margin-top: 0.85rem; }
form.inline-form label { font-size: 0.8rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.25rem; }
form.inline-form input, form.inline-form select { width: auto; min-width: 9rem; }

/* ---------- Tabulky ----------------------------------------------------- */
/* Hustý režim: jen spodní vlasová linka mezi řádky, žádné rámečky okolo
   každé buňky. Hlavička se lepí, protože provozní tabulky jsou dlouhé. */
/* KARTA #478: uvnitř `.table-wrap` se hlavička lepit NEMŮŽE. `overflow-x: auto`
   dělá z obalu scrollovací kontejner (druhá osa se dopočítá na `auto`) a sticky
   hlavička se pak měří od něj, ne od okna — usadí se --topbar-h pod horním
   okrajem tabulky, tedy přes první řádek. Obal roluje vodorovně schválně
   (široké pivoty v ops), takže se vzdává lepení, ne rolování. */
.table-wrap { overflow-x: auto; margin-top: 0.85rem; }
.table-wrap th { position: static; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.card > table:first-child, .table-wrap > table { margin-top: 0; }
th {
    text-align: left;
    color: var(--text-faint);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.5rem var(--cell-x);
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    position: sticky; top: var(--topbar-h); z-index: 1;
    white-space: nowrap;
}
td { padding: var(--cell-y) var(--cell-x); border-bottom: 1px solid var(--border-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--speed) var(--ease); }
tbody tr:hover { background: var(--bg-elevated); }
td.num, th.num, td.right, th.right { text-align: right; font-family: var(--mono); }
table caption { text-align: left; font-size: 0.8rem; color: var(--text-muted); padding-bottom: 0.5rem; }

/* ---------- Dlaždice ---------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
.tile {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 0.8rem 0.9rem;
    text-decoration: none;
    color: var(--text);
    transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
a.tile:hover { border-color: var(--accent); background: var(--panel); color: var(--text); }
.tile .count {
    font-family: var(--mono);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    display: block;
    color: var(--text);
    line-height: 1.1;
}
.tile .count.zero { color: var(--text-faint); font-weight: 400; }
.tile .label { font-size: 0.76rem; color: var(--text-muted); display: block; margin-top: 0.15rem; }

/* ---------- Štítky stavů ------------------------------------------------ */
/* Plný radius je vyhrazený VÝHRADNĚ štítkům stavu. Nic jiného v systému
   není pilulka, takže kulatý tvar sám nese informaci „tohle je stav". */
.pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.pill-ok, .pill-active { background: var(--success-soft); color: var(--success); }
.pill-fail { background: var(--danger-soft); color: var(--danger); }
.pill-warn { background: var(--warning-soft); color: var(--warning); }
.pill-wait, .pill-muted { background: var(--info-soft); color: var(--info); }
.pill-violet { background: var(--violet-soft); color: var(--violet); border: 1px solid var(--violet); }
.pill-accent { background: var(--accent-soft); color: var(--accent-text); }

/* ---------- Kanál zprávy (karta #120) ------------------------------------ */
/* Levý proužek podle kanálu — ve vlákně zprávy tiketu i v ose komunikace.
   Ikona (a title) jsou v šabloně, tady jen barva. Existující tokeny,
   žádná nová paleta. */
.msg--call { border-left: 3px solid var(--accent); }
.msg--email { border-left: 3px solid var(--info); }
.msg--sms, .msg--whatsapp { border-left: 3px solid var(--warning); }
.msg--slack { border-left: 3px solid var(--success); }
.msg--social { border-left: 3px solid var(--danger); }
.msg--note { border-left: 3px solid var(--info); }

/* ---------- Hlášky ------------------------------------------------------ */
.messages { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.messages li, .notice {
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    margin-bottom: 0.45rem;
    font-size: 0.86rem;
    font-weight: 500;
    border-left: 3px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
}
.messages li:last-child { margin-bottom: 0; }
.messages .success, .notice.success { background: var(--success-soft); border-left-color: var(--success); }
.messages .error, .notice.danger { background: var(--danger-soft); border-left-color: var(--danger); }
.messages .warning, .notice.warning { background: var(--warning-soft); border-left-color: var(--warning); }
.messages .info, .notice.info { background: var(--info-soft); border-left-color: var(--info); }

/* ---------- Prázdné a načítací stavy ------------------------------------ */
/* Prázdný stav není „nic tu není" — má říct, co se má stát dál. */
.empty {
    text-align: center;
    padding: 2.25rem 1.5rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
}
.empty-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; color: var(--text); }
.empty p { font-size: 0.86rem; color: var(--text-muted); margin: 0 auto; max-width: 44ch; }
.empty .btn-row { justify-content: center; margin-top: 1rem; }

/* Skeleton kopíruje tvar výsledku, ne kolečko doprostřed. */
.skeleton {
    background: var(--panel-2);
    border-radius: var(--radius);
    height: 0.85rem;
    position: relative;
    overflow: hidden;
}
.skeleton + .skeleton { margin-top: 0.45rem; }
.skeleton::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
    animation: lm-shimmer 1.4s infinite;
}
@keyframes lm-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* ---------- Vstup na scénu ---------------------------------------------- */
/* Jediná animace obsahu v celém systému a má důvod: pořadí příchodu drží
   hierarchii čtení na zákaznické stránce. V konzoli se nepoužívá vůbec —
   provozní nástroj má být hned celý, ne se skládat. */
@media (prefers-reduced-motion: no-preference) {
    body.portal .rise {
        animation: lm-rise 0.5s var(--ease) both;
        animation-delay: calc(var(--i, 0) * 70ms);
    }
    @keyframes lm-rise {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: none; }
    }
}

/* ---------- Obrázky ----------------------------------------------------- */
img { max-width: 100%; height: auto; display: block; }
/* Místo pro fotku drží poměr stran, takže se stránka po dotažení obrázku
   neposune (CLS). Dokud fotka nedorazí, je vidět klidná plocha, ne prázdno. */
.photo {
    background: var(--panel-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}
.photo > img { width: 100%; height: 100%; object-fit: cover; }
.photo-4x3 { aspect-ratio: 4 / 3; }
.photo-3x2 { aspect-ratio: 3 / 2; }
.photo-1x1 { aspect-ratio: 1 / 1; }
.photo-wide { aspect-ratio: 16 / 9; }
.photo-todo::after {
    content: attr(data-note);
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; text-align: center;
    font-family: var(--mono); font-size: 0.72rem; line-height: 1.5;
    color: var(--text-faint);
}

/* ---------- detail tiketu — třísloupcový layout ------------------------ */
/* Karta #236. Panel akcí („Co se má provést") je TRVALE vpravo. Dřív to byl
   modál přes celou obrazovku, který zakryl právě vyřizovanou zprávu, takže
   operátor odklikával akce naslepo. Sloupce zleva:

     .panel-left      zákazník, zpráva, přílohy, osa komunikace
     .lm-stred        návrh odpovědi a tlačítka odbavení
     .lm-akce-panel   zaškrtávátka akcí, termíny a platba

   Mřížka je dvouúrovňová, protože prostřední a pravý sloupec dělí až
   `.ai-card` uvnitř `.panel-right`: `.workspace-grid` odděluje levý sloupec od
   zbytku, `.ai-card` prostřední od pravého. `:has()` je tu schválně — nechce
   přidávat třídy na kontejnery, na jejichž přesné znění se odkazují testy
   layoutu (`<div class="workspace-grid"`, `<section class="panel-right">`).

   Zlomy: pod 1280 px se panel akcí složí pod prostřední sloupec, pod 900 px
   je všechno v jednom sloupci.

   CHATOVÝ VZHLED (zadání majitelky 5. 10. 2026, výchozí): tam sloupce nejsou —
   detail je jeden sloupec a panel akcí je pop-up. Proto platí pravidla téhle
   sekce jen pro PŮVODNÍ vzhled (`body:not(.lm-vzhled-chat)`, v detailu
   `?vzhled=puvodni`); chatový vzhled má vlastní sekci až za tiskem. */
body:not(.lm-vzhled-chat) .workspace-grid:has(.lm-akce-panel) { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 900px) {
    body:not(.lm-vzhled-chat) .workspace-grid:has(.lm-akce-panel) {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    }
}

/* Bývalý modál jako běžný blok — žádné `position: fixed`, žádná tmavá vrstva. */
body:not(.lm-vzhled-chat) .lm-akce-panel { display: block; margin-top: 0.85rem; }
.lm-akce-panel__box {
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 1280px) {
    /* Karta #267: na celé šířce okna dělí sloupce poměr 1 : 1,3 : 1
       (levý = 1/3,3 celku, zbytek 2,3 se dělí 1,3 : 1 v `.ai-card`). */
    body:not(.lm-vzhled-chat) .workspace-grid:has(.lm-akce-panel) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
    }
    body:not(.lm-vzhled-chat) .ai-card:has(> .lm-akce-panel) {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 1fr);
        column-gap: 1.1rem;
        align-items: start;
    }
    /* Prostřední sloupec: oba obaly `.lm-stred` (a skryté pole) pod sebou. */
    body:not(.lm-vzhled-chat) .ai-card:has(> .lm-akce-panel) > * { grid-column: 1; min-width: 0; }
    /* Karta #577 (25. 9. 2026): `.lm-akce-panel` je dlouhý (pět kategorií
       akcí) — dokud byl `grid-row: 1 / span 2` obyčejná mřížková položka,
       jeho výška se počítala DO řádek 1+2, i když žádná z nich sama tak
       vysoká být nepotřebuje. Po sbalení Hovoru/E-mailu tak řádka 1 zůstala
       uměle vysoká a pod krátkým obsahem se objevila obří prázdná mezera.
       `position: absolute` grid položku z počítání výšky řádek úplně
       vyjme (řádky se pak řídí jen `.lm-stred` obsahem), a protože žádnou
       z hran (`top`/`right`/`bottom`/`left`) neuvádíme (zůstávají `auto`),
       mřížka ji sama zarovná přesně na buňku druhého sloupce/obou řádků —
       to je speciální výjimka pro absolutně umístěné položky mřížky, funguje
       i bez `position: relative` na `.ai-card`. Přesah řeší panel sám svým
       `position: sticky` + `overflow` uvnitř. */
    body:not(.lm-vzhled-chat) .ai-card:has(> .lm-akce-panel) > .lm-akce-panel {
        grid-column: 2;
        grid-row: 1 / span 2;
        position: absolute;
        align-self: stretch;
        margin-top: 0;
    }
    /* Panel zůstává na očích i u dlouhé odpovědi — roluje se uvnitř sebe.
       Odsazení shora je za výškou horní lišty (--topbar-h, natrvalo
       viditelná), aby se panel nezasunul pod ni. */
    body:not(.lm-vzhled-chat) .lm-akce-panel__box {
        position: sticky;
        top: calc(var(--topbar-h) + 0.65rem);
        max-height: calc(100vh - var(--topbar-h) - 1.3rem);
    }
    /* Skok na panel má smysl jen tam, kde je panel složený dole. V chatovém
       vzhledu tlačítko „Upravit akce" otevírá pop-up, tam zůstává vidět vždy. */
    body:not(.lm-vzhled-chat) .lm-akce-jump { display: none !important; }
}

/* Přeskočit / Eskalovat / Vyřešit / Odeslat a provést zůstávají viditelné
   i u dlouhého vlákna — sticky u spodní hrany prostředního sloupce. */
.lm-akce-tlacitka {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--panel);
    padding-top: 0.55rem;
}

/* ---------- detail tiketu — text v blocích a hlavička odpovědi ------- */
/* Karta #450. Bloky s předformátovaným textem (zpráva zákazníka, návrh
   Klaudie, přílohy, skripty) měly jen `white-space: pre-wrap`. Dlouhý řetězec
   bez mezer — platební odkaz do portálu, sledovací odkaz dopravce — se nemá
   kde zlomit a vyteče z rámečku ven (tiket #9068). `anywhere` zlomí i takový
   řetězec a zároveň drží min-content šířku sloupce mřížky; `word-break: normal`
   je pojistka, aby se běžná slova nelámala uprostřed. */
.lm-text-blok {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* KARTA #477. Řádek přílohy zprávy držel přehrávač i tlačítko „Stáhnout“ v jedné
   neskládací řadě a levá část (ikona + název souboru) měla `min-width: auto`.
   Název nahrávky z callcentra má běžně 60+ znaků bez mezery, takže levou část
   roztáhl na min-content a ovládací prvky vytlačil ven z rámečku — majitel je
   neviděl a neměl na co kliknout. Název se teď zalomí (`min-width: 0` +
   `anywhere`) a když už se řada nevejde, zalomí se celá. */
.lm-priloha {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.lm-priloha__popis {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Ovládací prvky se nikdy nenatáhnou přes okraj: `margin-left: auto` je drží
   vpravo, `flex-wrap` je nechá zalomit pod sebe místo vytékání. */
.lm-priloha__ovladace {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-left: auto;
}

/* KARTA #837. Přílohy u zprávy v ose komunikace: odkaz ke stažení, obrázek
   náhledem. Čip se zalomí, dlouhý název souboru nenatáhne sloupec. */
.lm-prilohy-odkazy { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.2rem; min-width: 0; }
.lm-priloha-odkaz {
    display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%;
    padding: 0.15rem 0.5rem; border: 1px solid var(--border-soft); border-radius: 6px;
    background: var(--panel); color: var(--text); font-size: 0.78rem; font-weight: 600;
    text-decoration: none; overflow-wrap: anywhere;
}
a.lm-priloha-odkaz:hover { border-color: var(--accent); }
.lm-priloha-nahled {
    display: block; width: 3rem; height: 3rem; object-fit: cover; flex: 0 0 auto;
    border-radius: 4px; border: 1px solid var(--border-soft); background: var(--panel-2);
}

/* Karta #451. Hlavička panelu odpovědi (popisek „Odpověď zákazníkovi…“,
   dva odpočty, tlačítko „↺ Reset pauzy“ a štítek případu) stála v jedné řadě
   s `flex-wrap: nowrap`. V úzkém prostředním sloupci se popisek smrskl a jeho
   text vytekl z boxu přes tlačítko i přes štítek případu — jeden text se psal
   přes druhý (tiket #8537). Se `wrap` se řada zalomí, místo aby se přetiskla. */
.lm-odpoved-hlavicka {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    margin-bottom: 0.4rem;
}
.lm-odpoved-hlavicka > * { flex: 0 0 auto; }
/* Hana 25. 9. 2026: karta e-mailu je sbalovatelná (<details>/<summary>), ale
   `display: flex` výš přepisuje nativní `display: list-item` u <summary> —
   tím zmizí i jeho vestavěná šipka. Vlastní šipka (▶/▼ znak, přepíná ho JS
   na `toggle` — `transform: rotate()` se na flex item spolehlivě neotáčel,
   viz commit) ji nahrazuje. */
.lm-sbaleni-sipka { display: inline-block; color: var(--text-muted); font-size: 0.72rem; }
.lm-odpoved-hlavicka > .field-label {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    overflow-wrap: anywhere;
    /* Karta #577 bis: obecný `field-label` (0.8rem/600) byl vedle nadpisu
       "Hovor" (0.95rem/800, přímo na <summary>) nápadně menší a tenčí —
       sjednoceno na stejnou váhu/velikost, ať oba nadpisy vypadají stejně. */
    font-weight: 800;
    font-size: 0.95rem;
}

/* ---------- Tisk -------------------------------------------------------- */
@media print {
    .topbar, .site-header, .skip-link, .btn-row, button, .btn { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .card { border-color: #ccc; box-shadow: none; break-inside: avoid; }
    a { text-decoration: none; color: #000; }
}

/* ---------- detail tiketu — chatový vzhled („jako WhatsApp") ------------ */
/* Zadání majitelky (Hana, 5. 10. 2026): „hlavička; historie — scrollování —
   jedna dlouhá konverzace; dole odpověď, předmět a akční tlačítka; tabulka
   akcí vpravo není, jsou jen zobrazené vybrané akce nad tlačítky — rozkliknout
   a upravit jako pop-up." Výchozí vzhled detailu; třída `lm-vzhled-chat` na
   <body> (ticket_detail.html, `vzhled_chat` z views/dashboard.py).

   HTML je v obou vzhledech TÉMĚŘ STEJNÉ — tentýž `#ticket-form`, tatáž pole,
   tytéž `id`. Chatový vzhled jen přidá hlavičku, pásy upozornění, obal
   konverzace a panel „Zákazník a kontext" a zbytek rozloží tady. Proto tolik
   `!important`: šablona nese inline styly původních sloupců a ty se jinak
   přebít nedají. Barvy jen tokeny (světlý i tmavý režim), žádné nové písmo.

     .lm-chat               celý detail na výšku okna (výšku dopočítá JS)
       .lm-chat-hlava       jméno, kontakt, kanál, stav, #, navigace
       .lm-chat-pas         sbalitelné pruhy upozornění
       .workspace-grid      sloupec: konverzace (roluje) + composer dole
         .lm-chat-konverzace
         .panel-right       composer: předmět, odpověď, vybrané akce, tlačítka
   Pod 900 px: composer je pořád dole a pop-up akcí přes celou obrazovku. */
body.lm-vzhled-chat .shell { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.lm-chat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Výška NENÍ pevná (Hana Klečková, 6. 10. 2026): detail je aspoň tak vysoký
       jako okno, ale když je composer vyšší, roste a posouvá se celá stránka —
       composer nemá vlastní posuvník. Konverzace roluje uvnitř sebe jako chat. */
    height: auto;
    min-height: max(var(--lm-chat-vyska, calc(100vh - 3rem)), 26rem);
}

/* Hlavička */
.lm-chat-hlava {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.75rem;
}
.lm-chat-hlava__radek { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem 0.9rem; min-width: 0; }
.lm-chat-hlava__kdo { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 16rem; min-width: 0; }
.lm-chat-hlava__avatar {
    width: 2.25rem; height: 2.25rem; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent-text); font-weight: 700;
}
.lm-chat-hlava__text { display: flex; flex-direction: column; min-width: 0; }
.lm-chat-hlava__jmeno { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.lm-chat-hlava__kontakt { display: flex; flex-wrap: wrap; gap: 0 0.8rem; font-size: 0.8rem; color: var(--text-muted); }
.lm-chat-hlava__kontakt > * { min-width: 0; overflow-wrap: anywhere; }
.lm-chat-hlava__stav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.lm-chat-hlava__cislo { font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted); }
.lm-chat-hlava__navigace { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin-left: auto; }
.lm-chat-hlava__pozice { font-size: 0.76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lm-chat-hlava__neaktivni { opacity: 0.45; cursor: default; pointer-events: none; }
/* Lišta softphonu přestěhovaná do hlavičky (_chat_vzhled_js.html) — jinak by
   vpravo dole zakrývala „Odeslat a provést". */
body.lm-vzhled-chat #phone-bar.lm-chat-telefon {
    position: static !important;
    z-index: auto !important;   /* jako flex položka by inline 9999 platilo i bez `position` */
    box-shadow: none !important;
    padding: 3px 4px 3px 10px !important;
    font-size: 0.74rem !important;
}
.lm-chat-hlava__kontext[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
/* Původní horní řádek (předmět + návrat do fronty) je druhý řádek hlavičky. */
body.lm-vzhled-chat .lm-chat-hlava .ticket-topline {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    flex-wrap: nowrap !important;
}
body.lm-vzhled-chat .lm-chat-hlava .ticket-topline h1 { font-size: 0.95rem !important; }

/* HLAVIČKA NA JEDEN ŘÁDEK (Hana Klečková, 6. 10. 2026: „napadá tě, jak toto
   zpřehlednit?"): zákazník | PŘEDMĚT | stav a číslo | navigace. Předmět zabere
   zbytek šířky (max. dva řádky), „Tiket #… · typ" zmizelo — typ i číslo už
   nesou odznaky vpravo. Na úzkém okně se předmět zalomí pod ostatní. */
body.lm-vzhled-chat .lm-chat-hlava {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem;
}
body.lm-vzhled-chat .lm-chat-hlava__radek { display: contents; }
body.lm-vzhled-chat .lm-chat-hlava__kdo { order: 1; flex: 0 1 auto; max-width: 24rem; }
body.lm-vzhled-chat .lm-chat-hlava .ticket-topline { order: 2; flex: 1 1 16rem; min-width: 0; }
body.lm-vzhled-chat .lm-chat-hlava .ticket-topline > div:first-child { flex: 1 1 0 !important; min-width: 0; }
body.lm-vzhled-chat .lm-chat-hlava .ticket-topline .eyebrow { display: none; }
body.lm-vzhled-chat .lm-chat-hlava .ticket-topline h1 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.lm-vzhled-chat .lm-chat-hlava__stav { order: 3; }
body.lm-vzhled-chat .lm-chat-hlava__navigace { order: 4; margin-left: 0; }

/* Menu „⋯" — méně časté věci (přiřadit jinému zákazníkovi, původní vzhled). */
.lm-chat-menu { position: relative; }
.lm-chat-menu > summary { list-style: none; cursor: pointer; }
.lm-chat-menu > summary::-webkit-details-marker { display: none; }
.lm-chat-menu__panel {
    position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 60;
    min-width: 16rem; padding: 0.3rem;
    display: flex; flex-direction: column; gap: 0.2rem;
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.lm-chat-menu__panel .btn { justify-content: flex-start; text-align: left; width: 100%; }
/* Telefon v klidu = jen tečka a tlačítko; text stavu se ukáže při hovoru. */
body.lm-vzhled-chat #phone-bar.lm-telefon-klid #phone-status-text { display: none; }
.lm-vzhled-prepinac { display: flex; justify-content: flex-end; margin-bottom: 0.4rem; }

/* Sbalitelné pásy upozornění (nad konverzací a nad composerem). Bez jediného
   pruhu uvnitř se pás schová celý. */
.lm-chat-pas {
    flex: 0 0 auto;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    min-width: 0;
}
.lm-chat-pas:not(:has(> :not(summary):not(script))) { display: none; }
.lm-chat-pas[open] { overflow-y: auto; overscroll-behavior: contain; }
.lm-chat-pas--horni[open] { max-height: 30vh; }
.lm-chat-pas--composer { margin-bottom: 0.5rem; }
.lm-chat-pas--composer[open] { max-height: 26vh; }
.lm-chat-pas__nadpis {
    cursor: pointer; user-select: none;
    position: sticky; top: 0; z-index: 1;
    background: var(--panel);
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
}
.lm-chat-pas > :not(summary) { margin: 0.35rem 0.6rem 0.5rem !important; }

/* Rozložení: jeden sloupec na výšku zbytku okna. */
body.lm-vzhled-chat .workspace-grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.5rem;
}
/* Konverzace dostane všechno, co composer nepotřebuje, ale nikdy míň než
   12rem — když je composer vyšší, zmenší se a roluje se on. */
body.lm-vzhled-chat .panel-left { flex: 1 1 0; min-height: 42vh; display: flex; flex-direction: column; }
body.lm-vzhled-chat .panel-left > .card {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    padding: 0; margin: 0;
}

/* DVA SLOUPCE 3/5 + 2/5 (Miroslav Jílek 5. 10. 2026: „když se nahoře objeví
   víc okýnek, dole není skoro náš chat"). Upozornění z pásu nad konverzací
   (a hlášky Djanga, které sem přesune JS) jdou do pravého sloupce, takže
   konverzace + composer + tlačítka mají celou výšku vlevo. Bez upozornění je
   pás prázdný, schovaný, a chat zůstává na plnou šířku. */
@media (min-width: 1100px) {
    .lm-chat:has(> .lm-chat-pas--horni > :not(summary):not(script)) {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-rows: auto 1fr;
        column-gap: 0.75rem;
        row-gap: 0.5rem;
    }
    .lm-chat:has(> .lm-chat-pas--horni > :not(summary):not(script)) > * { grid-column: 1 / -1; }
    .lm-chat:has(> .lm-chat-pas--horni > :not(summary):not(script)) > .workspace-grid { grid-column: 1; grid-row: 2; }
    .lm-chat:has(> .lm-chat-pas--horni > :not(summary):not(script)) > .lm-chat-pas--horni {
        grid-column: 2; grid-row: 2;
        align-self: start;
        position: sticky; top: 0.5rem;
    }
    .lm-chat:has(> .lm-chat-pas--horni > :not(summary):not(script)) > .lm-chat-pas--horni[open] {
        max-height: calc(100vh - 1.5rem);
    }
}

/* ODCHOZÍ HOVOR: pravý sloupec (Hana, 16. 10. 2026) — nahoře karta hovoru (typ, skript), pod ní upozornění k tiketu.
   Wrapper `.lm-pravy` vytváří `_odchozi_hovor_vpravo_js.html`; od 1100 px stojí vedle konverzace, pod tím pod sebou. */
@media (min-width: 1100px) {
    .lm-chat:has(> .lm-pravy) {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-rows: auto 1fr;
        column-gap: 0.75rem;
        row-gap: 0.5rem;
    }
    .lm-chat:has(> .lm-pravy) > * { grid-column: 1 / -1; }
    .lm-chat:has(> .lm-pravy) > .workspace-grid { grid-column: 1; grid-row: 2; }
    .lm-chat:has(> .lm-pravy) > .lm-pravy {
        grid-column: 2; grid-row: 2;
        align-self: start;
        position: sticky; top: 0.5rem;
        max-height: calc(100vh - 1.5rem); overflow-y: auto;
    }
}
.lm-pravy > #lm-hovor-karta { margin-bottom: 0.5rem; }
.lm-pravy > [data-bez-poctu] { margin-bottom: 0.5rem; }
/* Hana 16. 10. 2026: pravé okno odchozího hovoru se posouvá CELÉ — pás upozornění uvnitř nemá vlastní posuvník ani
   omezenou výšku (jinak by se rolovalo „nadvakrát"). */
.lm-pravy > .lm-chat-pas--horni,
.lm-pravy > .lm-chat-pas--horni[open] { max-height: none; overflow: visible; }

/* Tomáš 20. 10. 2026 (tiket #14589): pás „Hovor a upozornění k odpovědi" stojí vpravo NAD upozorněními
   k tiketu (přesouvá `_upozorneni_k_odpovedi_vpravo_js.html`). Platí pro něj totéž co pro pás nad ním —
   posouvá se celé pravé okno, pás uvnitř nemá vlastní posuvník ani strop výšky (jinak by se rolovalo
   „nadvakrát" a 26vh by v úzkém sloupci uřízlo i krátké upozornění). */
.lm-pravy > .lm-chat-pas--composer { margin-bottom: 0.5rem; }
.lm-pravy > .lm-chat-pas--composer,
.lm-pravy > .lm-chat-pas--composer[open] { max-height: none; overflow: visible; }

/* Konverzace — jediná posouvatelná oblast. */
.lm-chat-konverzace {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.75rem clamp(0.5rem, 2vw, 1.25rem);
    background: var(--bg);
    border-radius: var(--radius-lg);
}
.lm-chat-konverzace:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
body.lm-vzhled-chat .lm-chat-konverzace .inbound-box {
    display: flex; flex-direction: column; gap: 0.6rem;
    background: transparent; border: none; padding: 0; margin: 0;
}
/* Hana 17. 10. 2026: u tiketu plateb stojí datum a čas příchodu NAD nadpisem „Nesrovnalost platby — …“ (ten zůstává uprostřed). */
body.lm-vzhled-chat .lm-chat-konverzace .inbound-box.lm-nesrovnalost .inbound-kdy { order: -3; text-align: center; margin: 0; }
/* Starší komunikace se zákazníkem (osa) je NAD zprávou tiketu — chronologicky. */
.lm-chat-konverzace .lm-osa-obal { order: -1; margin: 0 !important; padding: 0 !important; border: none !important; }
.lm-chat-konverzace .lm-osa-obal::after {
    content: "Tento tiket";
    display: block; margin-top: 0.75rem;
    text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-faint);
}
.lm-chat-konverzace #komunikace { display: flex; flex-direction: column; gap: 0.5rem; }
.lm-chat-konverzace .osa-hlava { order: -2; justify-content: center; margin: 0; }
.lm-chat-konverzace .osa-vice { order: -1; align-self: center; margin: 0; }
.lm-chat-konverzace .osa-seznam { flex-direction: column-reverse; gap: 0.5rem; }
.lm-chat-konverzace details.osa-radek { max-width: 100%; border-radius: 14px; box-shadow: var(--shadow); }
.lm-chat-konverzace details.osa-radek.osa-radek--prichozi { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--panel); }
.lm-chat-konverzace details.osa-radek.osa-radek--odchozi { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--accent-soft); }
/* Hovor má stranu jako zpráva (karta #967): příchozí bíle vlevo, odchozí barevně vpravo. */
.lm-chat-konverzace details.osa-radek.msg--note,
.lm-chat-konverzace details.osa-systemove {
    align-self: center; max-width: 100%;
    background: var(--panel-2); border-style: dashed; border-radius: 10px; box-shadow: none;
}
.lm-chat-konverzace #komunikace > p { text-align: center; }

/* Začátek tiketu (předmět, přepis hovoru, termín) jako oddělovač uprostřed. */
.lm-chat-konverzace .lm-zacatek-tiketu {
    align-self: center; max-width: 100%;
    align-items: center !important; justify-content: center !important; flex-wrap: wrap;
    background: var(--panel-2); border-radius: 12px; padding: 0.3rem 0.9rem;
}
.lm-chat-konverzace .lm-zacatek-tiketu .inbound-subject { font-size: 0.92rem !important; margin: 0; text-align: center; }
.lm-chat-konverzace .lm-podobny-zakaznik { align-self: center; max-width: 100%; margin: 0 !important; }
.lm-chat-konverzace .inbound-kdy { align-self: flex-start; margin: 0 !important; font-size: 0.74rem !important; }
.lm-chat-konverzace .inbound-body {
    margin: 0 !important;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
}
.lm-chat-konverzace .inbound-body > .lm-text-blok,
.lm-chat-konverzace .inbound-body > details { max-width: 100%; margin: 0 !important; }
/* Příchozí bublina neutrální, odchozí v akcentní barvě. */
.lm-chat-konverzace .inbound-body > .lm-text-blok,
.lm-chat-konverzace .lm-bublina--inbound {
    background: var(--panel) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 16px 16px 16px 4px !important;
    box-shadow: var(--shadow);
}
.lm-chat-konverzace .msg-thread { align-self: stretch; margin: 0; gap: 0.6rem; }
.lm-chat-konverzace .lm-bublina { max-width: 100%; }
.lm-chat-konverzace .lm-bublina--inbound { align-self: flex-start; margin: 0 !important; }
.lm-chat-konverzace .lm-bublina--outbound {
    align-self: flex-end;
    margin: 0 !important;
    background: var(--accent-soft) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 16px 16px 4px 16px !important;
    box-shadow: var(--shadow);
}
/* Interní poznámky — vycentrované, menší, bez „strany". Hovor ne (karta #967, Vít 17. 10. 2026:
   „příchozí hovor má být bíle a ne zeleně") — bere si styl příchozí / odchozí zprávy podle směru. */
.lm-chat-konverzace .lm-bublina.msg--note {
    align-self: center;
    max-width: 100%;
    background: var(--panel-2) !important;
    border: 1px dashed var(--border) !important;
    border-radius: 10px !important;
    box-shadow: none;
    font-size: 0.92em;
}
.lm-chat-konverzace .lm-prilohy-obal {
    align-self: flex-start; max-width: 100%;
    margin: 0 !important; padding: 0.6rem 0.8rem !important;
    background: var(--panel); border: 1px solid var(--border-soft) !important;
    border-radius: 16px 16px 16px 4px;
}

/* NEJNOVĚJŠÍ ZPRÁVA — lehounce podsvícený rámeček (class dává _chat_vzhled_js.html). */
/* Specificita je vyšší než u `.inbound-body > .lm-text-blok` (hlavní zpráva tiketu má
   rámeček i stín s !important), jinak by se podsvícení na ní neprojevilo. */
body.lm-vzhled-chat .lm-chat-konverzace .lm-posledni-zprava {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-soft)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), var(--shadow) !important;
}

/* Panel „Zákazník a kontext" — vysouvá se zprava, obsah bývalého levého sloupce. */
.lm-chat-kontext {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 950;
    width: min(36rem, 100vw);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0 1rem 1rem;
    background: var(--panel);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform var(--speed) var(--ease), visibility 0s linear var(--speed);
}
body.lm-kontext-otevreny .lm-chat-kontext { transform: none; visibility: visible; transition: transform var(--speed) var(--ease); }
.lm-chat-kontext-clona {
    position: fixed; inset: 0; z-index: 940;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.lm-chat-kontext-clona[hidden] { display: none; }
.lm-chat-kontext__hlava {
    position: sticky; top: 0; z-index: 2;
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
    margin: 0 -1rem 0.75rem; padding: 0.75rem 1rem;
    background: var(--panel); border-bottom: 1px solid var(--border-soft);
}
.lm-chat-x {
    background: transparent; border: none; color: var(--text-muted);
    font-size: 1.15rem; line-height: 1; padding: 0.2rem 0.45rem; cursor: pointer;
}
.lm-chat-x:hover { color: var(--text); background: var(--panel-2); }
/* Objednávky a „Další údaje" jsou v panelu rozbalené napořád — žádný hover. */
.lm-chat-kontext .msg-head { flex-direction: column; align-items: stretch; }
.lm-chat-kontext .hover-tools { flex-direction: column; align-items: stretch; gap: 0.75rem; }
.lm-chat-kontext .hovercard { padding: 0; margin: 0; }
.lm-chat-kontext .hovercard-trigger {
    pointer-events: none; border: none; background: none; padding: 0;
    font-size: 0.82rem; color: var(--text-muted);
}
.lm-chat-kontext .hovercard-panel {
    position: static; opacity: 1; visibility: visible;
    transform: none !important; transition: none;
    width: auto; max-height: none !important; margin-top: 0.35rem;
    box-shadow: none;
}
.lm-chat-kontext .hovercard-panel::before { display: none; }

/* Composer dole: předmět, odpověď, vybrané akce, tlačítka. Roluje se uvnitř
   sebe, tlačítka zůstávají přilepená dole (`.lm-akce-tlacitka`). */
body.lm-vzhled-chat .panel-right {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;   /* bez vlastního posuvníku — posouvá se celá stránka */
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.75rem 0;
}
body.lm-vzhled-chat .panel-right > * { flex: 0 0 auto; }
/* Vyřešený / sloučený tiket formulář odpovědi nemá (karta #460) — bez něj
   by dole zůstal prázdný rámeček composeru. */
body.lm-vzhled-chat .panel-right:not(:has(#ticket-form)) { border-color: transparent; background: transparent; padding: 0; }
/* Řada tlačítek musí být vidět VŽDY, i když se composer roluje. `sticky` drží
   jen uvnitř rodiče, a ten je v DOMu malý obal na konci formuláře — proto se
   formulář, `.ai-card` a druhý `.lm-stred` rozpustí (`display: contents`;
   formulář tím nepřestává být formulářem, pole k němu patří podle DOMu)
   a obal tlačítek je přímo položkou composeru: na konci (`order`) a přilepený
   ke spodní hraně. */
body.lm-vzhled-chat #ticket-form,
body.lm-vzhled-chat #ticket-form > .ai-card,
body.lm-vzhled-chat #actionsModal + .lm-stred { display: contents; }
body.lm-vzhled-chat #actionsModal + .lm-stred > div:first-child {
    order: 10;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 0.35rem -0.75rem 0 !important;
    padding: 0.45rem 0.75rem 0.1rem !important;
    background: var(--panel);
    border-top: 1px solid var(--border-soft) !important;
}
body.lm-vzhled-chat .panel-right .ai-card { background: transparent; border: none; padding: 0; margin: 0; }
body.lm-vzhled-chat .panel-right .lm-stred > details.card {
    border: none !important; box-shadow: none;
    padding: 0; margin: 0 0 0.25rem !important;
}
/* Odpověď se vejde CELÁ na očích jako okno chatu (Hana Klečková, 5. 10. 2026):
   textarea roste s textem (`field-sizing`; ve starších prohlížečích dorovná výšku
   `_chat_vzhled_js.html`), až do poloviny okna, pak se roluje uvnitř. */
body.lm-vzhled-chat .reply-textarea {
    min-height: 6rem; height: auto; max-height: none; field-sizing: content;
    border-radius: 14px; padding: 0.7rem 0.9rem;
}
body.lm-vzhled-chat .panel-right .lm-odpoved-hlavicka { margin-bottom: 0.25rem; }
/* Dva sloupce vedle sebe (Hana Klečková, 5. 10. 2026): vlevo „E-mail zákazníkovi“
   (předmět + odpověď), vpravo „Co se má provést“ o šířce podle obsahu (nejvýš
   22 rem). Pod 900 px zase pod sebou. */
body.lm-vzhled-chat .lm-odpoved-telo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) fit-content(22rem);
    column-gap: 0.75rem;
    align-items: start;
}
body.lm-vzhled-chat .lm-odpoved-telo > * { grid-column: 1; min-width: 0; }
body.lm-vzhled-chat .lm-odpoved-telo > .actions-box {
    grid-column: 2; grid-row: 1 / span 8; align-self: start;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    margin: 0 0 0.25rem;
}
body.lm-vzhled-chat .lm-odpoved-telo > .actions-box > div:first-child { min-width: 0 !important; }
/* Upozornění vpravo (Hana, 16. 10. 2026): nahoře pravého sloupce, nad „Co se má provést". */
#lm-varovani-vpravo { flex: 0 0 100%; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; margin-bottom: 0.4rem; }
#lm-varovani-vpravo > .lm-varovani { margin: 0 !important; font-size: 0.82rem; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
    body.lm-vzhled-chat .lm-odpoved-telo { grid-template-columns: minmax(0, 1fr); }
    body.lm-vzhled-chat .lm-odpoved-telo > .actions-box { grid-column: 1; grid-row: auto; }
}
/* Pruh vybraných akcí nad tlačítky — klik otevře pop-up s akcemi. */
body.lm-vzhled-chat .actions-box { background: var(--bg-elevated); border-radius: 12px; margin: 0.45rem 0 0.25rem; }
/* Hana 16. 10. 2026: „akce zarovnat" — „Co se má provést", vybrané akce i tlačítko „Upravit akce" začínají na stejné
   levé hraně (dřív byly vycentrované / odsazené). */
body.lm-vzhled-chat .actions-box { align-items: flex-start !important; text-align: left; }
body.lm-vzhled-chat .actions-box > div { align-self: flex-start; justify-content: flex-start !important; margin-left: 0 !important; }
body.lm-vzhled-chat .actions-box .lm-akce-jump { margin-left: 0; }
/* Rozhodnutí o vratce nahoře pravého sloupce (karta #917, Vít 16. 10. 2026): manažer vidí částku, důvod a tři
   tlačítka hned, bez rolování pod text odpovědi. Lišta je první dítě `.actions-box`; přes celou šířku sloupce,
   bez vlastního odsazení a čáry (ty patřily poloze pod odpovědí) a tlačítka ve dvou sloupcích — „Schválit" přes oba. */
.actions-box > #vratka-rozhodnuti {
    flex: 1 1 100%; width: 100%; min-width: 0; box-sizing: border-box;
    margin: 0 0 0.2rem !important; padding: 0 !important; border-top: none !important;
    align-self: stretch !important;
}
.actions-box > #vratka-rozhodnuti .lm-akce-tlacitka {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.4rem !important;
    position: static; padding-top: 0; background: transparent;
}
.actions-box > #vratka-rozhodnuti .lm-akce-tlacitka > * {
    width: 100% !important; min-width: 0 !important; box-sizing: border-box;
    white-space: normal !important; padding: 0.4rem 0.5rem !important; font-size: 0.8rem !important;
}
.actions-box > #vratka-rozhodnuti .lm-akce-tlacitka > [style*="grid-column"] { grid-column: 1 / -1 !important; }
/* Hana 17. 10. 2026: tlačítka rozhodnutí o vratce (Schválit a provést akce / Zamítnout / Vrátit operátorovi) stojí DOLE
   jako u ostatních tiketů — sticky u spodku composeru, stejně jako `.lm-provest-fixni` u plateb a sock. V chatovém vzhledu
   je to jedna řada malých tlačítek zleva (pravidla `.panel-right .lm-akce-tlacitka` v `_chat_pevne_okno.html`); na malém
   okně (pod 900 px / 480 px) se okno neposouvá po částech, ale celá stránka, a lišta se lepí ke spodku obrazovky. */
.lm-vratka-lista-fixni {
    position: sticky; bottom: 0; z-index: 5;
    background: var(--panel);
    margin-top: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.2rem;
    border-top: 1px solid var(--border-soft);
}
.lm-vratka-lista-fixni .lm-akce-tlacitka { margin-bottom: 0.3rem; }
body.lm-vzhled-chat #active_actions_summary_badges { cursor: pointer; }
body.lm-vzhled-chat #active_actions_summary_badges:hover .action-chip { border-color: var(--accent) !important; }
body.lm-vzhled-chat .lm-akce-tlacitka > * { white-space: normal; text-align: center; }
/* Na širokém okně jedna řada jako u chatu: „Odeslat a provést" poslední vpravo
   a dvojnásob široké (v DOMu je poslední i dnes). */
@media (min-width: 900px) {
    body.lm-vzhled-chat .lm-akce-tlacitka { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)) !important; }
    body.lm-vzhled-chat .lm-akce-tlacitka > [style*="grid-column"] { grid-column: span 2 !important; }
}

/* Pop-up „Upravit akce" — CELÝ panel akcí, pořád uvnitř #ticket-form. */
body.lm-vzhled-chat #actionsModal {
    display: none;
    position: fixed; inset: 0; z-index: 1000;
    margin: 0;
    padding: clamp(0.5rem, 3vh, 2rem) 1rem;
    align-items: flex-start; justify-content: center;
    background: color-mix(in srgb, var(--bg) 60%, transparent);
    backdrop-filter: blur(3px);
}
body.lm-vzhled-chat #actionsModal.lm-akce-otevreny { display: flex; }
body.lm-vzhled-chat #actionsModal .lm-akce-panel__box {
    width: min(62rem, 100%);
    max-height: 100%;
    border-color: var(--border);
    box-shadow: var(--shadow-lift);
}
.lm-akce-modal__hlava {
    flex: 0 0 auto;
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.75rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.lm-akce-modal__hlava .lm-chat-x { margin-left: auto; }
.lm-akce-modal__napoveda { order: 3; flex-basis: 100%; font-size: 0.8rem; color: var(--text-muted); }
.lm-akce-modal__pata {
    flex: 0 0 auto;
    display: flex; justify-content: flex-end;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--border-soft);
}
body.lm-modal-akci-otevreny { overflow: hidden; }

@media (max-width: 899px) {
    body.lm-vzhled-chat .shell { padding-left: 0.5rem; padding-right: 0.5rem; }
    body.lm-vzhled-chat .panel-right { max-height: none; }
    /* Hlavička na telefonu: kontakt i popisky tlačítek jsou v panelu
       „Zákazník a kontext" / v `title`, tady by zabraly půl obrazovky. */
    .lm-chat-hlava { padding: 0.4rem 0.5rem; }
    .lm-chat-hlava__kontakt, .lm-chat-popisek, .lm-chat-hlava__pozice { display: none; }
    .lm-chat-hlava__kdo { flex-basis: 100%; }
    .lm-chat-hlava__navigace { margin-left: 0; }
    body.lm-vzhled-chat #phone-bar.lm-chat-telefon #phone-status-text { display: none; }
    /* Tlačítka odbavení po třech v řadě, bez klávesových zkratek (telefon
       klávesnici nemá). Hlavní „Odeslat a provést" dál přes celou šířku. */
    body.lm-vzhled-chat .lm-akce-tlacitka { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.35rem !important; }
    body.lm-vzhled-chat .lm-akce-tlacitka > * { padding: 0.35rem 0.4rem !important; font-size: 0.78rem !important; }
    body.lm-vzhled-chat .lm-akce-tlacitka .shortcut-badge { display: none; }
    body.lm-vzhled-chat #actionsModal { padding: 0; }
    body.lm-vzhled-chat #actionsModal .lm-akce-panel__box {
        width: 100%; height: 100%; max-height: none;
        border: none; border-radius: 0;
    }
    .lm-chat-konverzace details.osa-radek,
    .lm-chat-konverzace .lm-bublina,
    .lm-chat-konverzace .inbound-body > .lm-text-blok,
    .lm-chat-konverzace .inbound-body > details,
    .lm-chat-konverzace .lm-prilohy-obal { max-width: 92%; }
}

/* Zprávy v konverzaci od kraje ke kraji (Hana Klečková, 5. 10. 2026): bubliny
   zabírají celou šířku okna, ne jen část — i krátká zpráva stojí na plné šířce
   a jen se liší strana (barva, zaoblení), ne šířka. */
.lm-chat-konverzace .inbound-body > .lm-text-blok,
.lm-chat-konverzace .inbound-body > details,
.lm-chat-konverzace details.osa-radek,
.lm-chat-konverzace .lm-bublina,
.lm-chat-konverzace .lm-prilohy-obal {
    width: 100%;
    box-sizing: border-box;
}

/* „Zobrazit původní zprávu / historii“ jen jako malá špička v pravém spodním
   rohu zprávy (Hana Klečková, 5. 10. 2026) — ne jako samostatný řádek pod ní.
   Otevřená historie se rozbalí normálně přes celou šířku. */
.lm-chat-konverzace .inbound-body > .lm-text-blok:has(+ details:not([open])) { padding-bottom: 2.1rem !important; }
/* Špičky v rohu zprávy (surový přepis, původní zpráva, 📎 přílohy) sedí vedle
   sebe v jedné řadě vpravo dole — příloha je „sponka" úplně vpravo (Hana
   Klečková, 6. 10. 2026). Rozbalená špička se roztáhne přes celou šířku. */
.lm-chat-konverzace .lm-spicky:not(:has(> details)) { display: none; }
.lm-chat-konverzace .lm-spicky {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem;
    align-self: flex-end; max-width: 100%;
    margin: -1.9rem 0.7rem 0 0; position: relative; z-index: 1;
}
.lm-chat-konverzace .lm-spicky:has(> details[open]) {
    flex-direction: column; align-self: stretch; width: 100%; margin: 0.3rem 0 0;
}
.lm-chat-konverzace .lm-spicky > details:not([open]) {
    margin: 0 !important; padding: 0.1rem 0.55rem !important;
    border-radius: 8px !important; background: var(--panel-2) !important; width: auto;
}
.lm-chat-konverzace .lm-spicky > details:not([open]) > summary { font-size: 0.7rem !important; font-weight: 600 !important; }
/* Špičky v jedné řadě (Hana Klečková, 6. 10. 2026: „oprav tu svorku"): dlouhé názvy
   nahrávek se zkrátí na tři tečky, ať se tři špičky vejdou vedle sebe, a 📎 sedí
   vždycky úplně vpravo, stejně vysoká a čitelná jako ostatní. */
.lm-chat-konverzace .lm-spicky { align-items: center; }
.lm-chat-konverzace .lm-spicky > details:not([open]) > summary {
    display: block; max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lm-chat-konverzace .lm-spicky > .lm-sponka-prilohy { margin-left: auto; flex: 0 0 auto; }
.lm-chat-konverzace .lm-spicky > .lm-sponka-prilohy:not([open]) > summary {
    /* Karta #837: u svorky jsou i názvy souborů — dlouhé se zkrátí na tři tečky. */
    max-width: min(24rem, 100%); font-size: 0.82rem !important; font-weight: 700 !important; line-height: 1.5; padding: 0 0.1rem;
}
.lm-chat-konverzace .lm-spicky > details[open] { margin: 0.3rem 0 0 !important; }
.lm-chat-konverzace .inbound-body > .lm-text-blok:has(+ .lm-spicky > details:not([open])) { padding-bottom: 2.1rem !important; }
.lm-chat-konverzace .lm-spicky:has(> details[open]) + * { margin-top: 0; }
.lm-sponka-prilohy > summary { cursor: pointer; user-select: none; list-style: none; }
.lm-sponka-prilohy[open] > summary { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); padding: 0.2rem 0.1rem; }
.lm-sponka-prilohy > .lm-prilohy-obal { margin: 0.3rem 0 0 !important; }
.lm-chat-konverzace .inbound-body > details:not([open]) {
    width: auto; align-self: flex-end;
    margin: -1.9rem 0.7rem 0 0 !important;
    position: relative; z-index: 1;
    padding: 0.1rem 0.55rem !important;
    border-radius: 8px !important;
    background: var(--panel-2) !important;
}
.lm-chat-konverzace .inbound-body > details:not([open]) > summary { font-size: 0.7rem !important; font-weight: 600 !important; }
.lm-chat-konverzace .inbound-body > details[open] { width: 100%; align-self: stretch; margin: 0.3rem 0 0 !important; }
/* Totéž u zpráv ve vlákně (bubliny): špička uvnitř bubliny dole vpravo. */
.lm-chat-konverzace .lm-bublina { position: relative; }
.lm-chat-konverzace .lm-bublina:has(details:not([open])) { padding-bottom: 2.1rem; }
.lm-chat-konverzace .lm-bublina details:not([open]) {
    position: absolute; right: 0.7rem; bottom: 0.4rem; margin: 0 !important;
    background: var(--panel-2); border-radius: 8px; padding: 0.05rem 0.5rem;
}
.lm-chat-konverzace .lm-bublina details:not([open]) > summary { font-size: 0.7rem !important; font-weight: 600 !important; }

/* PANEL VRATKY (support/_vratka_panel.html) — fronta vratek i detail tiketu v manažerském
   režimu (Vít 13. 10. 2026: „ať je prakticky 1 okno"). Přesunuto z vratky_fronta.html. */
/* Jedna vratka = jeden řádek jako tiket, pod ním rozbalení s podklady
   a tlačítky. Bez skriptu — rozbalení dělá prohlížeč. */
.vratka { margin-bottom: 0.75rem; }
.vratka > .ticket-row { margin-bottom: 0; }
.vratka-stitky { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.3rem; }
.vratka-detail { padding: 0.5rem 1.4rem 0; }
.vratka-detail[open] {
    padding-bottom: 0.9rem; border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.vratka-detail > summary { cursor: pointer; font-size: 0.85rem; color: var(--text-muted); list-style: none; }
.vratka-detail > summary::-webkit-details-marker { display: none; }
.vratka-detail > summary::before { content: "+ "; font-family: var(--mono); color: var(--text-faint); }
.vratka-detail[open] > summary::before { content: "\2212 "; }
.vratka-detail > summary:hover { color: var(--text); }
.vratka-detail[open] > summary { margin-bottom: 0.75rem; }
/* Akce tiketu u vratky: řádek zaškrtnutých + rozbalení se skupinami (6. 10. 2026). */
.vratka-akce-zaskrtnute { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0; }
.vratka-akce-chip { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.82rem; font-weight: 600; }
.vratka-vstup { width: 100%; padding: 0.5rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.vratka-blok { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 0.75rem 0.9rem; margin-bottom: 0.9rem; }
.vratka-varovani { background: var(--warning-soft, rgba(210, 140, 40, 0.14)); border: 2px solid var(--warning); border-radius: var(--radius-lg); padding: 0.75rem 0.9rem; margin-bottom: 0.9rem; }
/* KARTA #554: co psal zákazník a co mu odpovíme, vedle sebe. `auto-fit`
   místo media query — na úzkém displeji se sloupce samy složí pod sebe. */
.vratka-sloupce { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 0.9rem; }
.vratka-zprava { white-space: pre-wrap; max-height: 280px; overflow: auto; border-left: 3px solid var(--border); padding: 0.1rem 0 0.1rem 0.7rem; margin-top: 0.25rem; }

/* Telefonní číslo, které po kliknutí otevře plovoucí telefon s předvyplněným
   číslem (support_extras.tel_predvyplnit, webrtc_phone.js; Hana 14. 10. 2026). */
.tel-predvyplnit { color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.tel-predvyplnit:hover { color: var(--accent-text, inherit); text-decoration: underline; }
/* PANEL VRATKY VE FRONTĚ SE UŽ NEROZBALUJE (Vít 15. 10. 2026: „zrušit možnost
   rozbalování vratek"). Je to `<div>`, ne `<details>`, ale vypadá přesně jako
   rozbalený panel — ať se fronta vizuálně nezměnila jinak, než bylo zadané. */
.vratka-detail--vzdy {
    padding-bottom: 0.9rem; border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* DVĚ STRANY PANELU: vlevo zpráva a odpověď, vpravo podklad k rozhodnutí
   (AI shrnutí a doporučení, výše vratky, objednávky a položky). Na užším okně
   se složí pod sebe. */
.vratka-rozlozeni { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-bottom: 0.9rem; }
.vratka-rozlozeni--jen-podklad { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .vratka-rozlozeni { grid-template-columns: minmax(0, 1fr); } }
.vratka-rozlozeni__vpravo { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.vratka-rozlozeni__vlevo { min-width: 0; }
/* AI shrnutí a doporučení ke schválení. Podklad pro manažera, ne rozhodnutí —
   proto klidný panel, ne poplašný pruh. */
.vratka-ai { position: relative; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 0.7rem 0.85rem; }
.vratka-ai__text { margin: 0.4rem 0 0 0; font-size: 0.88rem; line-height: 1.45; }
.vratka-ai__text--duvod { color: var(--text-muted); }
/* Hodnocení se počítá na pozadí — tišší než hotový blok, ať neřve. */
.vratka-ai--ceka { border-style: dashed; background: transparent; }
.vratka-ai__znovu {
    position: absolute; top: 0.45rem; right: 0.5rem; background: none; border: none;
    color: var(--text-faint); font-size: 0.95rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.25rem;
}
.vratka-ai__znovu:hover { color: var(--text); }
/* Výše vratky bez popisků (Vít 15. 10. 2026: „bez kterýkoli textů okolo"). */
.vratka-castka-hlavni { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.vratka-castka-hlavni input[type="number"] { width: 7rem; flex: 0 0 auto; font-size: 1.05rem; font-weight: 700; }
.vratka-castka-hlavni input[type="text"] { flex: 1 1 10rem; min-width: 0; }
.vratka-castka-hlavni__mena { color: var(--text-muted); font-weight: 700; }
.vratka-castka-soucet { margin: 0; font-size: 1.05rem; font-weight: 700; }
.vratka-castka-soucet small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--text-muted); }
/* K čemu se vratka dělá: objednávky a položky. */
.vratka-doklady { border: 1px dashed var(--border); border-radius: var(--radius); padding: 0.5rem 0.6rem; font-size: 0.85rem; }
.vratka-doklady__radek { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; margin-top: 0.3rem; }
.vratka-doklady__radek:first-child { margin-top: 0; }
.vratka-doklady__radek input[type="checkbox"] { width: auto; flex: 0 0 auto; }
/* `input[type=number]` má v tomhle CSS width:100 % (Formuláře výš) — v řádku
   objednávky se musí vejít vedle názvu, proto se šířka přebíjí tady. */
input.vratka-doklady__castka, input.vratka-doklady__pocet {
    padding: 0.25rem 0.4rem; border-radius: 6px; border: 1px solid var(--border);
    background: var(--panel); color: var(--text); flex: 0 0 auto;
}
input.vratka-doklady__castka { width: 6.5rem; }
input.vratka-doklady__pocet { width: 4rem; }
.vratka-doklady__zbozi { margin: 0.3rem 0 0.3rem 1.4rem; }