/* =============================================================================
   LXBrain — Tokyo Night Dark + Pastel

   A paletta SZÁNDÉKOSAN bit-azonos a workspace többi appjával, hogy a LoxTop
   felületei egy rendszernek látszódjanak:
     - k8s-chromeservice-dashboard/src/frontend/style.css
     - k8s-web-server/src/frontend/admin.css
     - k8s-mail-watchdog/src/frontend/style.css

   Ha a paletta valaha változik, ott is változzon.
============================================================================= */

:root {
    /* --- Felületek --- */
    --bg-page:       #1a1b26;
    --bg-card:       #24283b;
    --bg-header:     #1f2335;
    --bg-row-alt:    #1f2231;
    --bg-row-hover:  #2a2e44;
    --bg-deep:       #16161e;
    --border:        #414868;
    --border-light:  #2a2e44;

    /* --- Szöveg --- */
    --text:          #c0caf5;
    --text-muted:    #9aa5ce;
    --text-dim:      #6b7394;

    /* --- Pasztell akcentusok --- */
    --pastel-cyan:   #7dcfff;
    --pastel-mint:   #9ece6a;
    --pastel-peach:  #e0af68;
    --pastel-red:    #f7768e;
    --pastel-lilac:  #bb9af7;
    --pastel-blue:   #a9b1d6;

    --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    --radius: 8px;
    --radius-sm: 6px;

    /* Az űrlap-vezérlők (input, select) és a szűrősávok gombjainak KÖZÖS
       magassága. Egy helyen, hogy ne csússzanak szét. */
    --control-h: 36px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-page);
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
}

a { color: var(--pastel-cyan); text-decoration: none; }
a:hover { color: var(--pastel-lilac); text-decoration: underline; }

/* =============================================================================
   SCROLLBAR — globális, nem csak a táblákon.
   A hagyományos világos scrollbar egy sötét felületen a leginkább zavaró
   részlet; ezért az EGÉSZ alkalmazásra beállítjuk (ugyanaz a döntés, mint az
   AKCS dashboardon 2026-09-03-án).
============================================================================= */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-page);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--bg-page); border-radius: 4px; }
*::-webkit-scrollbar-thumb {
    background: var(--border);
    border: 2px solid var(--bg-page);
    border-radius: 5px;
    min-height: 24px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--pastel-blue); }
*::-webkit-scrollbar-corner { background: var(--bg-page); }

/* =============================================================================
   ELRENDEZÉS — bal oldali navigáció + tartalom
============================================================================= */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 218px;
    flex: 0 0 218px;
    background: var(--bg-deep);
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar-brand {
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border-light);
}
.sidebar-brand .logo {
    font-size: 17px; font-weight: 700; letter-spacing: 0.4px;
    color: var(--pastel-cyan);
}
.sidebar-brand .tagline {
    font-size: 11px; color: var(--text-dim); margin-top: 2px;
}

.nav-section { padding: 12px 0 4px; }
.nav-section-title {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-dim); padding: 0 18px 6px;
}
.nav-link {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 18px;
    color: var(--text-muted);
    font-size: 13px;
    border-left: 2px solid transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.nav-link:hover {
    background: var(--bg-row-hover); color: var(--text);
    text-decoration: none;
}
.nav-link.active {
    background: var(--bg-header);
    color: var(--pastel-cyan);
    border-left-color: var(--pastel-cyan);
}
.nav-icon { width: 16px; text-align: center; opacity: 0.85; }

/* ALÁRENDELT menüpont: a fölötte álló ponthoz tartozik, nem önálló világ.
   A behúzás ÉS a halványabb szöveg együtt mondja ki a viszonyt; egyik önmagában
   csak „kicsit másnak" látszana, nem alárendeltnek. */
.nav-link.nav-sub {
    padding-left: 38px;
    font-size: 12.5px;
    color: var(--text-dim);
}
.nav-link.nav-sub:hover { color: var(--text-muted); }
.nav-link.nav-sub .nav-icon { opacity: 0.55; }

.sidebar-footer {
    margin-top: auto;
    padding: 12px 18px;
    border-top: 1px solid var(--border-light);
    font-size: 11.5px;
    color: var(--text-dim);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* =============================================================================
   FEJLÉC
============================================================================= */
/* 🔴 A HAMBURGER ALAPBÓL REJTETT, ÉS EZ A SOR SZÁNDÉKOSAN ITT ÁLL.

   A mobil `display: grid` lejjebb van a fájlban, és azonos specificitásnál a
   KÉSŐBBI nyer. Amikor ez a szabály a media query UTÁN állt, a hamburger
   mobilon sem jelent meg — a fiókot semmi nem tudta kinyitni. Mérve
   2026-09-24: „element is not visible". Néma hiba: a lap hibátlanul betöltött,
   csak épp nem volt menü. */
.lx-burger { display: none; }

.topbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 11px 20px;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.topbar h1 { font-size: 16px; font-weight: 600; letter-spacing: 0.2px; }
.topbar .subtitle { color: var(--text-muted); font-size: 12px; margin-top: 1px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }

.user-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--bg-header); border: 1px solid var(--border);
    border-radius: 999px; padding: 3px 11px 3px 4px;
    font-size: 12.5px;
}
.user-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--pastel-lilac); color: var(--bg-page);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}

.content { padding: 18px 20px 40px; flex: 1; }

/* =============================================================================
   KÁRTYA
============================================================================= */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
}
.card > h2 {
    font-size: 15px; font-weight: 600; color: var(--text);
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
    display: flex; align-items: center; gap: 8px;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}

/* -----------------------------------------------------------------------------
   KÉT KÁRTYA EGYMÁS MELLETT

   Egy 3-4 oszlopos táblázat teljes szélességű kártyában OLVASHATATLAN: a
   `table { width: 100% }` miatt a névoszlop elnyeli a helyet, a számok pedig
   kiszorulnak a jobb szélre, és a szemnek végig kell utaznia a soron. A user
   szava (2026-09-25): „nagyon messze vannak az oszlopok egymástól, alig lehet
   értelmezni".

   ⚠️ `auto-fit`, NEM `auto-fill` — és ez nem ízlés kérdése: ha a párból csak
   AZ EGYIK kártya létezik (mert a másik még tölt, vagy hibára futott), az
   `auto-fill` üresen hagyná a másik oszlopot, és a megmaradt kártya fél
   szélességben árválkodna. Az `auto-fit` összecsukja az üres sávot, tehát az
   egyedül maradt kártya kitölti a helyet.

   A `minmax` alsó határa miatt nem kell médiaszabály: szűk képernyőn a két
   kártya magától egymás alá kerül. 🎯 Így elkerüljük azt a sorrend-csapdát is,
   ami a mobil fejlécnél és a hamburgernél kétszer megvert (azonos
   specificitásnál a KÉSŐBBI szabály nyer).
----------------------------------------------------------------------------- */
.card-pair {
    display: grid;
    /* 🔴 `min(420px, 100%)`, NEM csak `420px`.
       Mérve 390×844-en: a csupasz `minmax(420px, 1fr)` egy 420 px-es sávot
       KÉNYSZERÍT akkor is, ha a képernyő keskenyebb — ettől az egész lap
       vízszintesen görgethető lett. A `min()` a sáv alsó határát a
       rendelkezésre álló szélességre húzza vissza. */
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: 14px;

    /* 🔴 `stretch`, NEM `start` — a user kérése (2026-09-25): „a »Mentés
       fájlba« frame legyen ugyanolyan magas, mint a »Mentések«, hogy ne
       maradjon ki szünet."

       Eredetileg `start` volt, azzal az indokkal, hogy a rövidebb kártya ne
       nyúljon a hosszabbhoz. Mérve viszont ez **642 vs 300 px**-et adott, és a
       rövidebb kártya alatt csupasz háttér tátongott — a sor alja csipkézett
       lett. Egyenlő magassággal a pár egy blokként olvasódik. */
    align-items: stretch;

    /* ⚠️ A PÁRNAK KELL AZ ALSÓ MARGÓ, mert a gyerekekét kinulláztuk (lásd
       lentebb). Enélkül két EGYMÁST KÖVETŐ pár összeér: mérve 2026-09-25,
       élesben **0 px** volt a Mentések alja és a Kötet teteje között, és a
       user vette észre („egymásra érnek"). Ugyanaz a 14 px, mint a `.card`
       saját margója, hogy a lap függőleges ritmusa ne törjön meg. */
    margin-bottom: 14px;
}
/* A külső rács adja a térközt — a kártya saját alsó margóját itt dupláznánk. */
.card-pair > .card { margin-bottom: 0; }

.stat { background: var(--bg-header); border: 1px solid var(--border-light);
        border-radius: var(--radius-sm); padding: 12px 14px; }
.stat-label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase;
              letter-spacing: 0.5px; }
.stat-value { font-size: 22px; font-weight: 600; margin-top: 3px;
              font-variant-numeric: tabular-nums; }

/* =============================================================================
   GOMBOK
============================================================================= */
.btn {
    background: var(--bg-header); color: var(--text);
    border: 1px solid var(--border);
    padding: 7px 14px; border-radius: var(--radius-sm);
    font-size: 13px; font-family: inherit; line-height: 1.3;
    cursor: pointer; display: inline-block; text-decoration: none;
    transition: all 0.12s;
}
.btn:hover { background: var(--bg-row-hover); border-color: var(--text-dim); text-decoration: none; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.3); }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ── Magnó-vezérlők: ▶ küld / újrafuttat, ■ leállít, ✕ mégse ────────────────
   Kerek, azonos méretű ikon-gombok. A méret NEM a betűmérettől függ: egy
   `padding`-gel méretezett kör a ▶ és a ■ eltérő optikai súlya miatt két
   különböző nagyságú gombot adna, pedig egymás mellett állnak.

   ⚠️ A `title` és az `aria-label` minden ikon-gombon KÖTELEZŐ — a piktogram
   önmagában semmit nem mond a képernyőolvasónak.

   A KÖR ÉS AZ IKON ARÁNYA külön hangolva (a user kérésére, 2026-09-23): a kör
   ~20%-kal kisebb, a piktogram ~15%-kal nagyobb lett, mint az első változatban
   (34→27 px és 11→12.5 px; a kicsié 26→21 px és 9.5→11 px). Egy kör alakú
   gombnál a kettő NEM együtt mozog: a karakter a saját glyph-boxában amúgy is
   körbe van párnázva, tehát a „kisebb kör" önmagában aránytalanul üresnek
   látszik. */
.btn-icon {
    width: 27px; height: 27px; padding: 0;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    font-size: 12.5px; line-height: 1;
}
.btn-icon.btn-sm { width: 21px; height: 21px; font-size: 11px; }

.btn-primary {
    background: var(--pastel-cyan); color: var(--bg-page);
    border-color: var(--pastel-cyan); font-weight: 600;
}
.btn-primary:hover:not(:disabled) {
    background: var(--pastel-lilac); border-color: var(--pastel-lilac); color: var(--bg-page);
}
.btn-secondary { background: var(--bg-header); color: var(--text); border-color: var(--border); }
.btn-danger { background: #b04555; color: #fff; border-color: #b04555; font-weight: 600; }
.btn-danger:hover:not(:disabled) { background: #8f3745; border-color: #8f3745; }

/* =============================================================================
   ŰRLAPOK
============================================================================= */
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.form-group label { color: var(--text-muted); font-size: 12.5px; font-weight: 500; }
.form-hint { font-size: 11.5px; color: var(--text-dim); }

/* 🔴 A KIZÁRÁSOS SZELEKTOR SZÁNDÉKOS, NEM LUSTASÁG.
   A korábbi felsorolás (`input[type="text"], input[type="email"], …`) két
   okból is mellétrafált, és a hibája NÉMA volt — a mező egyszerűen natívan
   jelent meg, sehol nem volt hibaüzenet:

     • hiányzott belőle a `type="date"` (6 mező az alkalmazásban);
     • és ami alattomosabb: a Blazor `<input @bind="x" />` NEM ÍR KI `type`
       attribútumot. A `.type` IDL-tulajdonság ilyenkor „text"-et mond, a CSS
       viszont az ATTRIBÚTUMRA illeszkedik — tehát 23 mező kimaradt.

   Mérve 2026-09-21: a szűrősáv dátum-mezője 21,3 px, a keresőmező 19,3 px, a
   legördülő 36,7 px magas volt, mert az utóbbi kettőre nem érvényesült semmi.

   A kizárásos alak minden JÖVŐBELI típusra is működik, és csak azt a hármat
   hagyja ki, aminek natívnak kell maradnia. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
    background: var(--bg-header); color: var(--text);
    border: 1px solid var(--border);
    padding: 8px 11px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 13.5px;
    outline: none; transition: border-color 0.12s;
    width: 100%;
}

/* EGYSÉGES MAGASSÁG. A `select` belső sormagassága böngészőnként más, és a
   legördülő-nyíl is hozzátesz — azonos paddinggel sem lesz magától egyforma a
   három vezérlő. Ezért explicit magasság; a textarea kimarad, annak nőnie kell. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select {
    height: var(--control-h);
    box-sizing: border-box;
}

/* A natív dátumválasztó (naptár-ikon, felugró panel) a böngésző saját
   színsémájából dolgozik. Enélkül sötét háttéren SÖTÉT ikon és VILÁGOS
   felugró panel jönne — a mező stílusa hiába lenne rendben. */
input[type="date"], input[type="datetime-local"], input[type="time"] {
    color-scheme: dark;
}
/* =============================================================================
   SZŰRŐSÁV

   Ugyanez a sáv öt lapon van (Jegyzetek, Dokumentumok, Audit, Kérdés-napló,
   Kérdezz), és eddig MINDEGYIKEN inline stílusként, ötször lemásolva. Egy
   osztályba véve a magasság-igazítás is egy helyen történik.
============================================================================= */
.filter-bar {
    display: flex; gap: 12px; flex-wrap: wrap;
    align-items: flex-end; margin-bottom: 14px;
}

/* A sávban lévő mezők a saját szélességüket a `.form-group` inline
   `max-width`-éből kapják, de a margót itt nullázzuk — a sáv maga ad gap-et. */
.filter-bar .form-group { margin-bottom: 0; }

/* 🔴 A GOMB IS ANNYI LEGYEN, mint a mezők. A `.btn-sm` magától 25 px lenne a
   mezők 36 px-éhez képest, és a sáv alján lógna. Az `align-self: stretch` NEM
   jó megoldás: a sáv magasságát a címkés `.form-group`-ok határozzák meg
   (címke + mező), tehát a gomb TÚL magas lenne tőle. */
.filter-bar .btn {
    height: var(--control-h);
    padding-top: 0; padding-bottom: 0;
    display: inline-flex; align-items: center;
    white-space: nowrap;
}

input:focus, select:focus, textarea:focus { border-color: var(--pastel-cyan); }
input::placeholder { color: var(--text-dim); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }

/* --- Checkbox és radio ---
   Az `accent-color` a legegyszerűbb mód arra, hogy a natív vezérlő a paletta
   szerint színeződjön, és közben megmaradjon minden natív viselkedése
   (billentyűzet, képernyőolvasó, indeterminate állapot). A saját, div-ekből
   épített checkbox ezeket mind eldobná. */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--pastel-cyan);
    width: 15px; height: 15px;
    cursor: pointer;
    vertical-align: -2px;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; opacity: 0.5; }

.check-row {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 0; font-size: 13px; cursor: pointer; user-select: none;
}
.check-row:hover { color: var(--pastel-cyan); }

/* -----------------------------------------------------------------------------
   SAJÁT JELÖLŐNÉGYZET

   A natív jelölőnégyzet a rendszer színeit hozza (Windowson élénk kék, éles
   sarkok), ami a Tokyo Night palettában idegen testként ül. A user szava
   (2026-09-25): „nagyon közönséges… legyen szebb, alkalmazkodjon a designhoz".

   🔴 SZÁNDÉKOSAN A `.check-row` EGÉSZÉRE VONATKOZIK, nem csak az export-lapra.
   Ugyanez az osztály áll a Felhasználók, Szerepkörök, Termékek, Partnerek,
   Témák, a dokumentum-részletek és a jegyzet-szerkesztő lapon is. Ha csak az
   egyiket szépítenénk meg, a felület kilenc helyen kezdene széttartani — és a
   következő fejlesztő nem tudná, melyik a „helyes".

   ⚠️ AZ `appearance: none` ELDOBJA A PIPÁT IS, nem csak a keretet. Ezért kell
   a `::after` álelem: az a pipa. E nélkül a bejelölt állapot NÉMÁN
   megkülönböztethetetlen lenne a nem bejelölttől — a doboz csak színt váltana,
   és egy színtévesztő felhasználó semmit nem látna belőle.
----------------------------------------------------------------------------- */
.check-row input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    /* Kicsit nagyobb a nyers ~13 px-es natívnál, de nem tolja szét a sort:
       a `.check-row` 13 px-es szövegéhez ez arányos. */
    width: 17px; height: 17px;
    flex: 0 0 auto;              /* a flex-sorban ne nyomódjon össze */
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 5px;          /* „kissé lekerekítve" — a --radius-sm kisebb testvére */
    background: var(--bg-header);
    cursor: pointer;
    position: relative;
    transition: background .12s ease, border-color .12s ease;
}

/* A pipa. Elforgatott „L" — nem betű és nem ikonkészlet, tehát nem tud
   hiányozni, és nem kell hozzá betűtípust tölteni. */
.check-row input[type="checkbox"]::after {
    content: "";
    position: absolute;
    left: 5px; top: 1.5px;
    width: 4px; height: 8px;
    border: solid var(--bg-deep);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;                  /* alapból nincs pipa */
    transition: opacity .12s ease;
}

.check-row input[type="checkbox"]:hover:not(:disabled) { border-color: var(--pastel-cyan); }

.check-row input[type="checkbox"]:checked {
    background: var(--pastel-cyan);
    border-color: var(--pastel-cyan);
}
.check-row input[type="checkbox"]:checked::after { opacity: 1; }

/* ⚠️ A FÓKUSZGYŰRŰ NEM ELHAGYHATÓ. Az `appearance: none` a natív fókuszjelet
   is elviszi, és e nélkül a billentyűzettel navigáló felhasználó nem látná,
   hol jár. A `:focus-visible` csak billentyűzetnél gyújt, egérkattintásnál nem. */
.check-row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--pastel-cyan);
    outline-offset: 2px;
}

/* =============================================================================
   TÁBLÁZAT
============================================================================= */
.table-scroll { overflow-x: auto; border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
    background: var(--bg-header); color: var(--text-muted);
    text-align: left; font-weight: 600; font-size: 11.5px;
    text-transform: uppercase; letter-spacing: 0.4px;
    padding: 8px 11px; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 2;
}
tbody td { padding: 8px 11px; border-bottom: 1px solid var(--border-light); }
tbody tr:nth-child(even) { background: var(--bg-row-alt); }
tbody tr:hover { background: var(--bg-row-hover); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   SZOROS TÁBLÁZAT — MINDEN oszlop a tartalmára zsugorodik

   A `width: 1%` nem elírás: ez a bevett módja annak, hogy egy oszlop a
   TARTALMÁRA húzódjon össze. A böngésző a százalékot a maradék hely
   elosztásakor veszi figyelembe, de a `white-space: nowrap` miatt a cella nem
   mehet a szövegénél keskenyebbre — a végeredmény „pont akkora, amekkora kell".

   🔴 DE EZ ÖNMAGÁBAN KEVÉS VOLT, ÉS EZT MÉRÉS MUTATTA MEG. Először csak a
   SZÁMOSZLOPOKAT szorítottam össze — a „Sor" 50 px lett, a „Méret" 62 px,
   tehát a szabály működött. A névoszlop viszont továbbra is elnyelte a
   maradékot (500 px), így a tábla NEVE és az első szám között **389 px** üres
   hely maradt. Vagyis a bajt (a szemnek végig kell utaznia a soron) nem
   szüntettem meg, csak feleakkorára vittem.

   🎯 A megoldás: MINDEN oszlop zsugorodjon, és a maradékot egy SZÁNDÉKOSAN
   ÜRES záróoszlop nyelje el. Ettől a valódi oszlopok balra, egymás mellé
   kerülnek, a táblázat viszont teljes szélességű marad — tehát a váltakozó
   sorháttér és az elválasztó vonalak végigérnek a kártyán. (Egy `width: auto`
   táblázatnál a csíkozás félúton elvágódna.)
----------------------------------------------------------------------------- */
.table-tight th,
.table-tight td { width: 1%; white-space: nowrap; }

/* A maradékot ez az egy cella kapja — tartalma nincs, dolga a helyfoglalás. */
.table-tight th.spacer,
.table-tight td.spacer { width: auto; }

/* =============================================================================
   ÁLLAPOT-JELZŐK
============================================================================= */
.badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
    border: 1px solid transparent;
}
.badge-approved { background: rgba(158, 206, 106, 0.15); color: var(--pastel-mint);  border-color: rgba(158, 206, 106, 0.35); }
.badge-draft    { background: rgba(169, 177, 214, 0.13); color: var(--pastel-blue);  border-color: rgba(169, 177, 214, 0.30); }
.badge-review   { background: rgba(224, 175, 104, 0.15); color: var(--pastel-peach); border-color: rgba(224, 175, 104, 0.35); }
.badge-rejected { background: rgba(247, 118, 142, 0.15); color: var(--pastel-red);   border-color: rgba(247, 118, 142, 0.35); }
.badge-archived { background: rgba(107, 115, 148, 0.15); color: var(--text-dim);     border-color: rgba(107, 115, 148, 0.35); }

/* A „View" MŰVELET-jelvény — a státusz-badge-ek formája, de kattintható.
   Szándékosan ugyanaz az ovális alak: a sorban így egy vizuális családba
   tartozik az állapottal, nem üt el tőle egy külön gomb-stílussal.
   A HALVÁNYKÉK azért fontos, mert a státusz-színek (zöld/sárga/piros/szürke)
   mind FOGLALTAK — egy művelet nem keveredhet össze egy állapottal. */
a.badge-view {
    background: rgba(125, 207, 255, 0.13); color: var(--pastel-cyan);
    border-color: rgba(125, 207, 255, 0.35);
    text-decoration: none; cursor: pointer;
}
a.badge-view:hover { background: rgba(125, 207, 255, 0.26); }

/* =============================================================================
   JEGYZET-LISTA (2026-09-21)

   Miért NEM táblázat, mint a többi lista: egy jegyzetsor kilenc adatot hordoz
   (cím, állapot, dátum, partner, helyszín, szekrény-szám, termék, témák,
   darabszám), és ennyi oszlop 1200 px alatt olvashatatlan lenne. A user kérése
   is „több soros lista" volt. Soronként három sáv: cím + állapot, metaadatok,
   témák — a harmadik csak akkor jelenik meg, ha van téma.
============================================================================= */
.note-list { display: flex; flex-direction: column; gap: 8px; }

.note-row {
    display: block; text-decoration: none; color: inherit;
    padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 8px;
    background: var(--bg-row-alt);
    transition: border-color 0.12s ease, background 0.12s ease;
}
.note-row:hover { border-color: var(--pastel-cyan); background: var(--bg-row-hover); }

.note-row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-title { font-weight: 600; font-size: 14px; }

.note-row-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 4px; font-size: 12px; color: var(--text-muted);
}
.note-row-spacer { flex: 1 1 auto; }
.note-sep { color: var(--text-dim); }
/* Tabuláris számjegyek: a dátumoszlop így nem ugrál soronként. */
.note-date { font-variant-numeric: tabular-nums; }

.note-row-topics { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* A szerkesztő téma-választója: két oszlopban, hogy 10-15 témánál se tolja
   le a képernyőről a jegyzet szövegét. */
.topic-picker {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 14px; margin-bottom: 4px;
}
.topic-chip {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; background: rgba(125, 207, 255, 0.10);
    color: var(--pastel-cyan); border: 1px solid rgba(125, 207, 255, 0.25);
}

/* A jóváhagyási sor: piszkozat/ellenőrzésre vár darabszámok kattintható
   jelvényként. Ez tartja életben a jóváhagyási folyamatot, miután a jegyzetek
   kikerültek a Dokumentumok listából. */
/* A visszahozás-sáv a törölt sor ALATT, a soron kívül: a sor maga egy <a>, és
   egy gomb azon belül a navigációval versenyezne. */
.note-row-actions {
    display: flex; align-items: center; gap: 10px; justify-content: flex-end;
    margin: -4px 2px 4px; font-size: 12px;
}

.note-queue { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.note-queue-chip { cursor: pointer; font-family: inherit; }
.note-queue-chip:hover { filter: brightness(1.25); }

.pager {
    display: flex; align-items: center; gap: 6px;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
}
.pager-label { font-size: 12px; margin: 0 8px; font-variant-numeric: tabular-nums; }

.muted { color: var(--text-muted); }
.dim   { color: var(--text-dim); }
.accent-cyan  { color: var(--pastel-cyan); }
.accent-mint  { color: var(--pastel-mint); }
.accent-peach { color: var(--pastel-peach); }
.accent-red   { color: var(--pastel-red); }
.accent-lilac { color: var(--pastel-lilac); }

/* =============================================================================
   ÜZENETEK
============================================================================= */
.alert {
    border-radius: var(--radius-sm); padding: 10px 13px;
    font-size: 13px; margin-bottom: 13px;
    border: 1px solid transparent;
}
.alert-error   { background: rgba(247, 118, 142, 0.12); color: var(--pastel-red);   border-color: rgba(247, 118, 142, 0.35); }
.alert-success { background: rgba(158, 206, 106, 0.12); color: var(--pastel-mint);  border-color: rgba(158, 206, 106, 0.35); }
.alert-warning { background: rgba(224, 175, 104, 0.12); color: var(--pastel-peach); border-color: rgba(224, 175, 104, 0.35); }
.alert-info    { background: rgba(125, 207, 255, 0.10); color: var(--pastel-cyan);  border-color: rgba(125, 207, 255, 0.30); }

/* =============================================================================
   BETÖLTÉS — vázlatsorok és beúszás

   A cél, hogy a lista megjelenése ne rándulás legyen. Két eszköz:
     - a vázlat (skeleton) nagyjából akkora helyet foglal, mint a valódi tábla,
       így a csere pillanatában nem ugrik meg az oldal;
     - a megérkező tartalom rövid beúszást kap, ami elfedi a váltást.

   Mindkettő kikapcsol, ha a felhasználó csökkentett mozgást kért a rendszerben
   — a mozgás egyeseknél szédülést okoz, és ez nem opcionális udvariasság.
============================================================================= */
.skeleton { display: flex; flex-direction: column; gap: 7px; padding: 2px 0; }
.skeleton-row {
    height: 32px;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--bg-header) 0%,
        var(--bg-row-hover) 38%,
        var(--bg-header) 76%);
    background-size: 280% 100%;
    animation: skeleton-sweep 1.25s ease-in-out infinite;
}
/* A fejlécsor sötétebb és keskenyebb, mint az adatsorok — így a vázlat
   ránézésre is táblának látszik, nem egy halom csíknak. */
.skeleton-row:first-child { height: 26px; opacity: 0.75; }

@keyframes skeleton-sweep {
    from { background-position: 140% 0; }
    to   { background-position: -40% 0; }
}

/* ⚠️ A .fade-in KIZÁRÓLAG olyan elemre tehető, ami csak felhasználói
   kattintásra jön létre (szerkesztő-panel, megerősítő doboz, űrlap).
   SOHA nem tehető olyanra, ami a prerender során is kirajzolódik — például egy
   listára.

   Miért: a Blazor a prerenderelt DOM-ot az interaktív kapcsolat felépülésekor
   nem foltozza, hanem LEBONTJA ÉS ÚJRAÉPÍTI. Böngészőből mérve (2026-09-15):
     21 ms  — fade-in indul a prerenderelt táblán      ← villanás #1
    707 ms  — a .content teljes tartalma törlődik és újraépül
    721 ms  — fade-in indul ÚJRA, az új táblán          ← villanás #2
   Mivel az animáció opacity 0-ról indul, mindkét építés látható villanás:
   előbb üresen, aztán a listával. Animáció nélkül a 707 ms-os csere azonos
   tartalomra megy, tehát észrevehetetlen. */
.fade-in { animation: fade-in 180ms ease-out both; }

@keyframes fade-in {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

/* Csak a képernyőolvasónak: a vázlat maga néma, az állapotot ez mondja ki. */
.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;
}

/* ── Válasz és forrásmegjelölés (M7) ─────────────────────────────────────── */

/* ── A VÁLASZ TAGOLÁSA ────────────────────────────────────────────────────
   🔴 A `pre-wrap` KIKERÜLT (2026-09-22). Azzal a válasz SZÓ SZERINT úgy jelent
   meg, ahogy a modell írta — és a modell fordulónként másképp tagol. Mérve a
   20 tárolt válaszon: az egyik üres sort tett a lépések közé (50% üres sor),
   a másik nem (14%). A user ezt „más stílusnak" látta, joggal.

   Most az `AnswerLayout` ismeri fel a szerkezetet (bekezdés / számozott lista /
   felsorolás), és a TÉRKÖZT INNEN kapja. Így minden válasz egyformán néz ki,
   függetlenül attól, hány sortörést írt a modell.

   A `pre-wrap` a SOROKON BELÜL megmarad (`.ans-text`): egy szándékos többes
   szóköz vagy behúzás ne vesszen el.                                        */
.answer-text {
    line-height: 1.65;
    font-size: 14px;
}

/* A blokkok KÖZÖTT egységes térköz — ez az egész változtatás lényege. */
.ans-block + .ans-block { margin-top: 10px; }

/* A bekezdésen belüli sorok között NINCS térköz: ha a modell egy gondolatot
   két sorba tört, az egy bekezdés marad. */
.ans-line { display: flex; gap: 8px; }
.ans-text { white-space: pre-wrap; min-width: 0; }

/* Listánál a sorok kapnak egy kis levegőt — de egyformát, akár tett a modell
   üres sort közéjük, akár nem. */
.ans-orderedlist .ans-line + .ans-line,
.ans-bulletlist  .ans-line + .ans-line { margin-top: 5px; }

/* A jelölés FIX szélességen, jobbra igazítva: így a listaelemek szövege egy
   vonalban kezdődik akkor is, ha a `9.` után `10.` következik. */
.ans-marker {
    flex: none; min-width: 22px; text-align: right;
    color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.ans-bulletlist .ans-marker { min-width: 12px; }

/* A hivatkozás-jelölések ([1], [2]) a szövegben maradnak, hogy a forráslista
   sorszámaival összeköthetők legyenek. */
.source-list {
    margin: 6px 0 0;
    padding-left: 22px;
    font-size: 12.5px;
    line-height: 1.8;
}
.source-list li { color: var(--text-dim); }
.source-list a { color: var(--pastel-cyan); }

details > summary { color: var(--text-dim); }
details > summary:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
    .skeleton-row { animation: none; }
    .fade-in { animation: none; }
}

/* =============================================================================
   BEJELENTKEZÉS
============================================================================= */
.login-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    /* Finom, kétpontos sugárzás — ugyanaz a mélység, mint a kártya-árnyékon. */
    background:
        radial-gradient(1000px 500px at 18% -10%, rgba(125, 207, 255, 0.07), transparent 60%),
        radial-gradient(800px 420px at 88% 110%, rgba(187, 154, 247, 0.07), transparent 60%),
        var(--bg-page);
}
.login-card {
    width: 100%; max-width: 380px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 28px 26px 24px;
    box-shadow: var(--shadow);
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand .logo {
    font-size: 26px; font-weight: 700; letter-spacing: 0.6px;
    color: var(--pastel-cyan);
}
.login-brand .tagline { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.login-card .btn-primary { width: 100%; padding: 9px; font-size: 14px; margin-top: 4px; }
.login-footer {
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--border-light);
    text-align: center; font-size: 11.5px; color: var(--text-dim);
}

/* =============================================================================
   CHAT (M8)

   A geometria a `k8s-support-chat`-ből jön (buborék-szélesség, aszimmetrikus
   sarkok, pirula alakú beviteli sáv, három pontos gépelés-jelző); CSAK a színek
   cserélődnek a Tokyo Night változókra. Új hexa-érték nem kerülhet be: a paletta
   három testvérprojekttel bitre azonos.
============================================================================= */

/* 🔴 A LAP MAGASSÁGA SZERKEZETBŐL JÖN, NEM SZÁMOLT LEVONÁSBÓL.
 *
 * Eredetileg `height: calc(100vh - 120px)` volt, ahol a 120 a topbar plusz a
 * `.content` bélésének BECSÜLT összege. Böngészőből mérve: a dokumentum
 * pontosan **2 px-cel** volt magasabb a nézetablaknál (1089 vs 1087) — vagyis
 * a helyes szám 122 lett volna —, és ettől az OLDAL kapott egy teljes
 * magasságú, vastag görgetősávot. Épp azt, amit a vékony belső sávval
 * kerülni akartunk.
 *
 * A 122 sem lenne jó: a topbar magassága a fejléc szövegétől függ (hosszabb
 * felirat tördelhet), és a bélés töréspontonként más. Minden becsült szám
 * előbb-utóbb eltér a valóditól. Ezért a lánc végig flexbox, és a chat-lap
 * egyszerűen kitölti, ami marad.
 *
 * A `:has()` szűkíti a beavatkozást a chat-lapra: a többi oldal (hosszú
 * táblák) változatlanul az oldallal görget.
 */
.chat-page {
    display: flex;
    gap: 14px;
    flex: 1;
    min-height: 0;   /* enélkül a flex-elem nem zsugorodik a tartalma alá */
}

.app-shell:has(.chat-page) { height: 100vh; overflow: hidden; }
.app-shell:has(.chat-page) .main { min-height: 0; }
.app-shell:has(.chat-page) .content {
    min-height: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
}

/* ── Beszélgetés-oldalsáv ────────────────────────────────────────────────── */
.chat-conversations {
    width: 232px; flex: 0 0 232px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.chat-conversations-head {
    padding: 12px; border-bottom: 1px solid var(--border-light);
}
.chat-conversations-head .btn { width: 100%; }
.chat-conversation-list { flex: 1; overflow-y: auto; }

.chat-conversation {
    position: relative;
    display: block;
    border-bottom: 1px solid var(--border-light);
    border-left: 2px solid transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    transition: background 0.12s, color 0.12s;
}
.chat-conversation:hover { background: var(--bg-row-hover); color: var(--text); }
.chat-conversation.active {
    background: var(--bg-header);
    border-left-color: var(--pastel-cyan);
    color: var(--text);
}

/* A kattintható felület a LINK, nem a sor: a törlés-gomb így kimarad belőle.
   A jobb oldali bélés a gombnak tart helyet, hogy a cím ne fusson alá. */
.chat-conversation > .fo {
    display: block;
    padding: 9px 30px 9px 10px;
    color: inherit;
}
.chat-conversation > .fo:hover { text-decoration: none; color: inherit; }

/* Csak rámutatáskor (és a nyitott soron) látszik — nyolc beszélgetésnél nyolc
   állandóan kint lévő × jel zajos lenne, és véletlen kattintásra hívna. */
.chat-conversation > .torles {
    position: absolute; top: 6px; right: 6px;
    background: none; border: none;
    color: var(--text-dim);
    font-size: 16px; line-height: 1;
    padding: 2px 5px; border-radius: var(--radius-sm);
    cursor: pointer; opacity: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.chat-conversation:hover > .torles,
.chat-conversation > .torles:focus-visible { opacity: 1; }
.chat-conversation > .torles:hover { background: rgba(247, 118, 142, 0.18); color: var(--pastel-red); }

/* ── Admin: egy forduló a visszanézett átiratban ──────────────────────────
   Nem buborék: itt nem beszélgetni akarunk, hanem ÁTNÉZNI. A lapos, sorszámmal
   és állapot-jelzőkkel ellátott alak gyorsabban olvasható végig, és a
   kérdés-napló táblájával is egy nyelvet beszél. */
.admin-turn {
    border-left: 2px solid var(--border);
    padding: 8px 0 8px 12px;
    margin-bottom: 14px;
}
.admin-turn-head {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    font-size: 11.5px; margin-bottom: 6px;
}
.admin-turn-q {
    font-weight: 600; color: var(--text);
    margin-bottom: 6px; white-space: pre-wrap;
}

.torles-megerosites {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 0 10px 9px;
    font-size: 11.5px; color: var(--pastel-red);
}
/* Két sor után levágva: egy hosszú kérdés különben szétfeszítené az oldalsávot. */
.chat-conversation .title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.35;
}
.chat-conversation .meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; }

/* ── Átirat ──────────────────────────────────────────────────────────────── */
/* A mobil chat-fejléc alapból REJTETT, és ez a szabály SZÁNDÉKOSAN itt áll,
   nem a fájl végén: a mobil `display: flex` lejjebb van, és azonos
   specificitásnál a KÉSŐBBI nyer. Fordítva a fejléc mobilon is rejtve
   maradna — némán, mert a lap egyébként hibátlanul betöltődik. */
.chat-mobil-fejlec { display: none; }

.chat-main {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
}

/* 🔴 `column-reverse`, ÉS EZÉRT A DOM-BAN A LEGÚJABB FORDULÓ AZ ELSŐ.
   Ez adja JavaScript nélkül az alulra rögzítést, ÉS megtartja a pozíciót, ha a
   felhasználó feljebb görgetett — amit a naiv `scrollTop = scrollHeight` (az
   előd megoldása) épp elront: elrántja a lapot olvasás közben. Ez lenne a
   projekt első JS-e; a §28 szerint ahhoz indok kell, és most nincs. */
.chat-transcript {
    flex: 1;
    overflow-y: auto;
    display: flex; flex-direction: column-reverse;
    gap: 20px;
    padding: 24px;
}

/* A globális 10px-es görgetősáv egy táblázatnál rendben van, de az átiratban
   végig ott ül a szöveg mellett, és elviszi a figyelmet a tartalomról. Itt
   vékonyabb és halványabb — csak akkor látszik igazán, amikor kell. */
.chat-transcript::-webkit-scrollbar,
.chat-conversation-list::-webkit-scrollbar,
.chat-input-wrapper textarea::-webkit-scrollbar { width: 6px; }

.chat-transcript::-webkit-scrollbar-track,
.chat-conversation-list::-webkit-scrollbar-track,
.chat-input-wrapper textarea::-webkit-scrollbar-track { background: transparent; }

.chat-transcript::-webkit-scrollbar-thumb,
.chat-conversation-list::-webkit-scrollbar-thumb,
.chat-input-wrapper textarea::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border: none;
    border-radius: 3px;
}
.chat-transcript:hover::-webkit-scrollbar-thumb,
.chat-conversation-list:hover::-webkit-scrollbar-thumb { background: var(--border); }

/* Firefox: `thin` + átlátszó sáv. Itt nincs szélesség-állítás, ez a maximum. */
.chat-transcript,
.chat-conversation-list,
.chat-input-wrapper textarea { scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }

/* A fordulón BELÜL viszont normál a sorrend: kérdés, majd válasz. */
.chat-turn { display: flex; flex-direction: column; gap: 14px; }

.msg { max-width: 80%; padding: 11px 15px; line-height: 1.6; font-size: 13.5px; }

/* A „farok" a megfelelő sarokban — ez teszi ránézésre is beszélgetéssé.

   🔴 SÖTÉT BUBORÉK, VILÁGOS SZÖVEG (2026-09-23, a user visszajelzésére: „a
   világoskék szín nagyon világít és a szöveg alig olvasható"). A tömör
   `--pastel-cyan` háttér a legvilágosabb felület volt az egész sötét
   felületen — a szem oda ugrott, pedig a saját kérdésünk a legkevésbé érdekes
   rész az átiratban.

   A cián MEGMARAD, csak áttetszően: így a kérdés-buborék továbbra is egy
   pillantásra megkülönböztethető a válaszétól (`--bg-header` + szürke keret),
   de ugyanabban a sötét fénytartományban marad, mint a lap többi része. */
.msg-user {
    align-self: flex-end;
    background: rgba(125, 207, 255, 0.13);            /* --pastel-cyan, halványan */
    border: 1px solid rgba(125, 207, 255, 0.32);
    color: var(--text);
    border-radius: 20px 20px 4px 20px;

    position: relative;             /* a szerkesztés-gomb horgonya */

    /* Hely a buborék ALATT a ceruzának. A `.chat-turn` saját `gap`-je (14px)
       önmagában kevés: a gomb belelógna a válasz-buborék sávjába. */
    margin-bottom: 10px;
}

/* ⚠️ A tördelés a SZÖVEGÉ, nem a dobozé. A `pre-wrap` a buborékon azt is
   megtartaná, amit a Razor a szöveg és a szerkesztés-gomb KÖZÉ ír ki
   (behúzás, sortörés) — egy üres sorként, aminek semmi köze a kérdéshez. */
.msg-user .msg-text { white-space: pre-wrap; }

/* ── Kérdés szerkesztése ────────────────────────────────────────────────────
   A ceruza a buborék ALATT, jobbra igazítva, és csak akkor látszik, ha az
   egér a buborékon áll (a user kérése). Így a nyugalmi átirat tiszta marad. */
.msg-edit {
    position: absolute; top: calc(100% + 2px); right: 2px;
    width: 20px; height: 20px; padding: 0;
    display: grid; place-items: center;
    border: 1px solid var(--border-light); border-radius: 50%;
    background: var(--bg-header); color: var(--text-dim);
    font-size: 11px; line-height: 1; cursor: pointer;

    opacity: 0; pointer-events: none;
    transition: opacity 0.12s, color 0.12s, border-color 0.12s;

    /* 🔴 A HÍD FÖLÉ. Mérve 2026-09-23: enélkül a gomb LÁTSZIK, de NEM
       KATTINTHATÓ — a Playwright „<div class='msg msg-user'> intercepts
       pointer events"-szel esett el. A `::after` generált tartalom, ami a
       gyerekek UTÁN fest, tehát azonos z-szinten eltakarja a gombot. Ez a
       legrosszabb fajta hiba: a felület hibátlannak látszik. */
    z-index: 1;
}

/* 🔴 HOVER-HÍD, ENÉLKÜL A GOMB NEM KATTINTHATÓ.
   A ceruza a buborékon KÍVÜL van: ahogy az egér ráhúzna, elhagyná a
   `.msg-user`-t, a `:hover` megszűnne, és a gomb ELTŰNNE ALÓLA. Ez a
   pszeudo-elem áthidalja a rést — a buborék RÉSZE, tehát fölötte a `:hover`
   érvényben marad. Csak a jobb szélen, 34px szélesen: a válasz-buborék
   balra zárt és legfeljebb 88% széles, tehát ide nem ér el. */
.msg-user::after {
    content: ''; position: absolute;
    top: 100%; right: 0; width: 34px; height: 24px;
}

.msg-user:hover .msg-edit,
.msg-edit:focus-visible { opacity: 1; pointer-events: auto; }

.msg-edit:hover { color: var(--text); border-color: var(--border); }

/* ⚠️ A szerkesztő állapotban NINCS ceruza és nincs hover-híd — a `::after`
   ott csak egy láthatatlan, kattintást fogó folt lenne a gombsor alatt. */
.msg-user-edit::after { display: none; }

/* Szerkesztő állapot: a buborék marad (szín, farok), csak a tartalma más —
   így a szerkesztés tényleg „a buborékban" történik, nem mellette. */
.msg-user-edit { display: flex; flex-direction: column; gap: 8px; min-width: 320px; }

.msg-user-edit textarea {
    width: 100%; resize: vertical;
    padding: 0; border: 0; border-radius: 0;
    background: transparent; color: var(--text);
    caret-color: var(--pastel-cyan);
    font: inherit; line-height: 1.6;
    border-bottom: 1px solid rgba(125, 207, 255, 0.3);
}
.msg-user-edit textarea:focus { outline: 0; border-bottom-color: var(--pastel-cyan); }

.msg-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }

/* A „N további forduló eltűnik" figyelmeztetés: BALRA tolva, tehát a szem a
   gombok felé haladva átmegy rajta. `margin-right: auto` — nem `space-between`,
   mert figyelmeztetés nélkül a két gomb akkor is jobbra maradjon. */
.msg-edit-warn {
    margin-right: auto;
    font-size: 11px; color: var(--pastel-peach);
    line-height: 1.3;
}
.msg-bot {
    align-self: flex-start;
    background: var(--bg-header);
    border: 1px solid var(--border-light);
    border-radius: 20px 20px 20px 4px;
    max-width: 88%;
}
/* Félbeszakadt válasz: a részszöveg MARAD látható, elhalványítva. */
.msg-bot.partial { opacity: 0.72; }

.msg-bot .answer-text { font-size: 13.5px; }
.msg-notice { font-size: 11.5px; color: var(--text-dim); margin-top: 8px; }

.chat-sources {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid var(--border-light);
    font-size: 11.5px; color: var(--text-dim);
}
.chat-sources ol { margin: 6px 0 0; padding-left: 22px; line-height: 1.7; }

/* Összecsukva alapból: a forráslista hosszú fejezet-útvonalakkal több helyet
   foglalt, mint maga a válasz. A darabszám a fejlécben marad, tehát egy
   pillantásra látszik, hogy a válasz alapozott — a §14 ezt követeli meg, nem
   azt, hogy a lista állandóan nyitva legyen. */
.chat-sources-toggle {
    background: none; border: none; padding: 0;
    color: var(--text-dim);
    font: inherit; font-size: 11.5px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
}
.chat-sources-toggle:hover { color: var(--pastel-cyan); }
.chat-sources-toggle .jel { display: inline-block; width: 10px; }

/* ── A szövegbeli [n] jelölés, kattinthatóan ──────────────────────────────
   Gomb, nem link: nem navigál sehova, csak kinyitja a panelt és kiemeli a
   sort. Egy `<a href="#…">` a görgetést is elrántaná, és a böngésző
   előzményébe is bekerülne. A gomb-alapértelmezéseket le kell szedni, hogy a
   szöveg folyásában maradjon. */
.answer-text .cite {
    background: none; border: none;
    padding: 0 1px; margin: 0;
    font: inherit;
    color: var(--pastel-cyan);
    cursor: pointer;
    vertical-align: baseline;
    border-radius: 3px;
    transition: background 0.12s, color 0.12s;
}
.answer-text .cite:hover { background: rgba(125, 207, 255, 0.16); color: var(--text); }
.answer-text .cite:focus-visible { outline: 1px solid var(--pastel-cyan); outline-offset: 1px; }

/* A legutóbb megnyitott jelölés — hogy látszódjon, melyikre kattintottunk. */
.answer-text .cite.aktiv {
    background: rgba(125, 207, 255, 0.22);
    color: var(--text);
    font-weight: 600;
}

/* A hozzá tartozó forrás-sor kiemelése. A `::marker` is színeződik, mert a
   sorszám az, ami összeköti a szöveget a listával. */
.chat-sources li { transition: background 0.15s; border-radius: var(--radius-sm); }
.chat-sources li.kiemelt {
    background: rgba(125, 207, 255, 0.12);
    box-shadow: -3px 0 0 var(--pastel-cyan);
    padding: 1px 6px;
    margin-left: -6px;
}
.chat-sources li.kiemelt::marker { color: var(--pastel-cyan); font-weight: 700; }
.chat-sources li.kiemelt a { color: var(--text); }

/* ── „Mutasd a találatot": a tudás-darab szövege ──────────────────────────
   Ez az EGYETLEN mód a tartalom megnézésére HTML-nél és DOCX-nél; PDF-nél az
   oldalugrás mellé jön. A kapcsoló a `.chat-sources-toggle` mintáját követi,
   csak eggyel beljebb — a forrás-soré, nem a panelé. */
.chunk-toggle {
    display: block; margin: 2px 0 0;
    background: none; border: none; padding: 0;
    color: var(--text-dim);
    font: inherit; font-size: 11px;
    cursor: pointer;
}
.chunk-toggle:hover { color: var(--pastel-cyan); }

/* A magasságkorlát szándékos: egy 1500 karakteres darab kinyitva kilökné a
   képernyőről a beszélgetést. */
.chunk-text {
    margin: 4px 0 6px;
    padding: 8px 10px;
    background: var(--bg-page);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 11.5px; line-height: 1.55;
    max-height: 320px; overflow-y: auto;
}

/* 🔴 BEKEZDÉSENKÉNT egy `<p>`, NEM egy nagy `pre-wrap` blokk. A chunkoló
   `\n\n`-nel fűzi össze a blokkokat, amiből a `pre-wrap` teljes ÜRES SORT
   csinál — egy DOCX-nél, ahol minden rövid bekezdés önálló blokk, ettől minden
   sor közé üres sor kerül. A user jelezte: „mintha dupla soremeléssel lenne".
   Így ugyanaz a tagolás, harmad annyi függőleges helyen.

   A `pre-wrap` a bekezdésen BELÜL marad: a PDF-parser ott tartja meg a
   felsorolás-elemek sortöréseit, azok nem eshetnek össze. A `break-word` a
   tördelés nélküli hosszú azonosítók (hash, XML-sor) miatt kell — enélkül
   vízszintes görgetést csinálnának a buborékban. */
.chunk-text p {
    margin: 0 0 6px;
    white-space: pre-wrap; overflow-wrap: break-word;
}
.chunk-text p:last-child { margin-bottom: 0; }

.chat-feedback {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid var(--border-light);
    display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
    font-size: 11.5px; color: var(--text-dim);
}

/* ── „Gondolkodik…" ──────────────────────────────────────────────────────── */
/* KÖTELEZŐ állapot, nem dísz: gondolkodó modellnél a teljes gondolkodási fázis
   alatt NULLA delta érkezik (mérve 1,2–4,3 mp). Enélkül a felhasználó üres
   buborékot néz másodpercekig — a streamelés épp az ellenkezőjét érné el. */
.typing { display: inline-flex; align-items: center; gap: 5px; }
.typing span {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-dim);
    animation: typing-bounce 1.2s infinite ease-in-out both;
}
.typing span:nth-child(1) { animation-delay: -0.32s; }
.typing span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
    40%           { transform: scale(1);   opacity: 1; }
}

.chat-phase { font-size: 11.5px; color: var(--text-dim); margin-left: 8px; }

/* ── Beviteli sáv ────────────────────────────────────────────────────────── */
.chat-composer { border-top: 1px solid var(--border-light); padding: 14px 18px; }

/* `align-items: flex-end`, hogy a küldés gomb a mező aljához igazodjon. */
.chat-input-wrapper {
    display: flex; align-items: flex-end; gap: 9px;
    max-width: 900px; margin: 0 auto;
    background: var(--bg-header);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 6px 6px 6px 16px;
    transition: border-color 0.12s;
}
.chat-input-wrapper:focus-within { border-color: var(--pastel-cyan); }

/* A mező FIX magasságú: az előd JS-sel növesztette (`style.height =
   scrollHeight`). Tudatosan vállalt kisebb kényelem azért, hogy a projektnek ne
   kelljen az első JS-interopja — utólag egy lapra töltött ES-modul megoldja. */
.chat-input-wrapper textarea {
    flex: 1; border: none; background: transparent;
    padding: 8px 0; resize: none; max-height: 140px;
    font-size: 13.5px; line-height: 1.5;
}
.chat-input-wrapper textarea:focus { border: none; }
.chat-input-wrapper .btn { border-radius: 999px; padding: 7px 16px; flex: none; }

/* ⚠️ A fenti szabály SPECIFIKUSABB, mint a `.btn-icon` (0,2,0 vs 0,1,0), és
   lejjebb is áll — a `padding: 7px 16px` tehát széttolná a kör alakú gombot.
   Ezért a küldés/leállítás gomb itt kapja vissza a saját méretét. */
.chat-input-wrapper .btn-icon { width: 30px; height: 30px; padding: 0; font-size: 14px; }

.chat-hint {
    max-width: 900px; margin: 7px auto 0;
    font-size: 11px; color: var(--text-dim);
    display: flex; justify-content: space-between; gap: 10px;
}

.chat-empty {
    margin: auto; text-align: center; color: var(--text-dim);
    font-size: 13px; max-width: 420px; padding: 20px;
}

@media (max-width: 860px) {
    /* 🔴 A CHAT KITÖLTI A KÉPERNYŐT — ITT KORÁBBAN `height: auto` VOLT, ÉS EZ
       VOLT A HIBA GYÖKERE.

       Mérve 2026-09-24, 390×844-en: a lap 1175 px magasra nőtt, a beviteli sáv
       a 991–1144 px tartományba esett, vagyis TELJESEN a képernyőn kívülre. A
       felhasználó csak görgetve látott valamit, és a válasz aljából annyit,
       hogy „Hasznos volt?".

       Most a héj a képernyő magasságát kapja, és a görgetés az ÁTIRATON belül
       van — a beviteli sáv mindig kéznél.

       ⚠️ `dvh`, nem `vh`: mobilon a `100vh` a böngésző címsávja ALÁ lóg, tehát
       a beviteli sáv megint kicsúszna. A `vh` sor fallback a régi motoroknak. */
    .app-shell:has(.chat-page) { height: 100vh; height: 100dvh; overflow: hidden; }
    .app-shell:has(.chat-page) .content {
        display: flex; flex-direction: column; overflow: hidden; min-height: 0;
    }

    /* A lista kikerül a flow-ból (lásd a fiók-blokkot), tehát a `.chat-main`
       megkapja a teljes szélességet ÉS magasságot. */
    .chat-page { flex-direction: row; flex: 1; gap: 0; min-height: 0; }
    .chat-main { flex: 1; min-width: 0; height: auto; }

    .msg, .msg-bot { max-width: 92%; }

    /* A szerkesztő így is kapjon értelmes szélességet, de ne feszítse szét a lapot. */
    .msg-user-edit { min-width: 0; width: 100%; }

    /* A chat fölötti mobil fejléc: fiók-nyitó, cím, új beszélgetés. */
    .chat-mobil-fejlec {
        display: flex; align-items: center; gap: 8px;
        padding: 0 0 8px;
        border-bottom: 1px solid var(--border-light);
        margin-bottom: 8px;
    }
    .chat-mobil-cim {
        flex: 1; min-width: 0;
        font-size: 12.5px; color: var(--text-muted);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .chat-mobil-fejlec .btn { flex: none; padding: 4px 9px; }
}

/* 🔴 ÉRINTŐKÉPERNYŐN NINCS HOVER — ott a ceruza ELÉRHETETLEN lenne.
   A `hover: none` médiajellemző pontosan azokat az eszközöket fogja meg, ahol
   a mutató nem tud „fölötte állni" semminek (telefon, tablet), és NEM a
   képernyő szélessége szerint dönt: egy érintőképernyős laptop is ide tartozik.
   Ott a gomb halványan, de MINDIG kint van. */
@media (hover: none) {
    .msg-edit { opacity: 0.5; pointer-events: auto; }

    /* ⚠️ ÉRINTÉSI CÉLTERÜLET. A 21 px-es szerkesztő-gomb egérrel pontosan
       eltalálható, ujjal viszont nem — a WCAG 2.2 legalább 24 px-t kér. A
       vizuális arány (a user által hangolt kör/ikon viszony) egérrel marad
       változatlan; itt csak a fizikai méret nő. */
    .btn-icon.btn-sm { width: 28px; height: 28px; }
    .msg-edit { width: 26px; height: 26px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .typing span { animation: none; opacity: 0.7; }
}

/* =============================================================================
   RESPONSIVE
============================================================================= */
@media (max-width: 860px) {
    /* 🔴 A NAVIGÁCIÓ BECSÚSZÓ FIÓK LETT, NEM VÍZSZINTES SÁV.

       A sáv 168 px-et vitt el egy 844 px magas képernyőből, a fejléc további
       82-t — és ezek a tartalom FÖLÖTT ültek, minden lapon. A fiók nulla
       helyet foglal, amíg nincs rá szükség.

       `position: fixed`, tehát kikerül a flow-ból: a `.main` megkapja a teljes
       szélességet. */
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
        width: 264px; max-width: 84vw; height: auto;
        flex: none;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        overflow-y: auto;
        border-right: 1px solid var(--border);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }
    .lx-drawer-toggle:checked ~ .app-shell .sidebar { transform: none; }

    /* A fiókban a menü MARAD függőleges — ott van hely, és az eredeti
       elrendezés (szekció-címek, behúzott alpont) olvashatóbb. */
    .sidebar-footer { display: none; }

    .content { padding: 12px 12px 24px; }

    /* ── A fejléc összeolvad ────────────────────────────────────────────
       Egy sor: ☰ · LXBrain · avatar · Kilépés. Az alcím és a felhasználó
       neve elmarad — a monogram elég, és a hosszú név két sorba tört. */
    .topbar { padding: 8px 12px; gap: 10px; }
    .topbar h1 { font-size: 15px; }
    .topbar .subtitle { display: none; }
    .topbar-actions { gap: 8px; }
    .user-chip { padding: 3px 4px; }
    .user-chip .user-name { display: none; }

    .lx-burger { display: flex; }
}

/* =============================================================================
   MOBIL FIÓKOK (off-canvas) — közös rész
   A kapcsoló egy rejtett jelölőnégyzet; lásd a `MainLayout` megjegyzését arról,
   miért nem Blazor-állapot.
============================================================================= */
.lx-drawer-toggle { position: absolute; opacity: 0; pointer-events: none; }

/* A hamburger méretei. A `display`-t SZÁNDÉKOSAN NEM itt állítjuk — lásd a
   `.topbar` melletti szabályt és az ottani indoklást. */
.lx-burger {
    /* 🔴 FLEX, NEM GRID `place-content: center`-REL — MÉRVE 2026-09-24.
       Az eredeti `display: grid; place-content: center` mellett a gomb ÜRES
       KERETKÉNT jelent meg: a `place-content` a `justify-content`-et is
       középre állítja, amitől a grid-sáv a TARTALMÁHOZ zsugorodik
       (`grid-template-columns: 0px`), a vonalak `width: 100%`-a pedig egy
       nulla szélességű sávban körkörös hivatkozás — mindhárom vonal 0 px
       széles lett. A keret látszott, a szimbólum nem.

       Flex oszlopban az `align-items` alapértelmezése `stretch`, tehát a
       vonalak maguktól kitöltik a szélességet. Nincs mit elrontani rajta. */
    flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 34px; flex: none;
    padding: 8px 7px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-header);
    cursor: pointer;
}
.lx-burger span {
    display: block; height: 2px;
    background: var(--text-muted); border-radius: 1px;
}
.lx-burger:hover span { background: var(--pastel-cyan); }

.topbar-title { min-width: 0; }

/* A sötétítő réteg csak nyitott fióknál fogja az érintést. */
.lx-drawer-overlay {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
    display: none;
}
@media (max-width: 860px) {
    .lx-drawer-overlay { display: block; }
    .lx-drawer-toggle:checked ~ .app-shell > .lx-drawer-overlay,
    .lx-drawer-toggle:checked ~ .chat-page > .lx-drawer-overlay {
        opacity: 1; pointer-events: auto;
    }

    /* A beszélgetés-lista ugyanígy fiók. */
    .chat-conversations {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
        width: 280px; max-width: 86vw;
        flex: none;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }
    .lx-drawer-toggle:checked ~ .chat-page .chat-conversations { transform: none; }
}

/* ⚠️ Aki kikapcsolta az animációt, annak a fiók ne csússzon, csak jelenjen meg. */
@media (prefers-reduced-motion: reduce) {
    .sidebar, .chat-conversations, .lx-drawer-overlay { transition: none; }
}