/* ⭐ AL469 — a kinyitható név-chip (tenant/projekt): gomb, kattintásra a teljes név TÖRDELVE látszik.
   ⛔ A `.chip` fix 30 px magas és nowrap — nyitva ezt oldjuk; a `.truncate` (Tailwind) felülírása nagyobb specificitással. */
.chip-kinyithato { cursor: pointer; max-width: 100%; }
.chip-kinyithato:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-nyitott { height: auto; min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
.chip-nyitott .truncate { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }

/* ⭐ `nowrap`: egy GOMBFELIRAT soha nem torhet sorba — a gomb magassaga valtozna
   tole, es a fejlec elcsuszna. Merve 2026-09-07, 375px szeles kepernyon: az
   "AI Chat" felirat `white-space: normal` volt, tehat barmikor torhetett. */



/* AL559-POST: a kilépés <button>-ként (POST-form) — a böngésző gomb-alapjai ki, a .navlink kinézete marad */
button.navlink { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

/* Mobil menü (a design system `.nav-menu` komponense, DS 2026-09-07 / DS-006 — kézzel
   átültetve, mert ez a másolat a forrástól máshol már eltért, a teljes cserét nem bírja):
   <details class="nav-menu"> a topbar jobb blokkjában. A summary a kapcsoló (a .btn-icon
   geometriájával: 44×44 tapintófelület, benne a menu és a bezar ikon — az [open] állapot
   váltja őket), a .nav-menu-panel a topbar ALÁ nyílik teljes szélességben, ugyanazokkal a
   .navlink-ekkel, amik asztalon a topbarban állnak. JS nélkül működik (natív details), a
   summary billentyűzetről fókuszálható és Enterrel/szóközzel nyílik. 767 px-ig él; felette
   display: none, mert ott a .navlinks a topbarban van.

   ⛔ ELTÉRÉS A FORRÁSTÓL — SZÁNDÉKOS: a forrás a `.nav`-ot `position: relative`-re
   állítja, hogy a panelnek legyen viszonyítási alapja. Itt NEM vesszük át: a fejléc
   `class="nav sticky top-0 z-30"`, és ez a fájl RÉTEGEZETLEN, a Tailwind utility
   rétegezett — a `relative` némán legyőzné a `sticky`-t, a fejléc elgörögne. A `sticky`
   elem maga is pozicionált, tehát az `absolute` panel NÉLKÜLE is a fejléchez igazodik.
   (T-033 / T-031, l. docs/DESIGN.md.) */

/* ⭐ MINDEN beszelgetes LATHATO, keretes egyseg — a nem aktivak is.
   Korabban az inaktiv kartya keret NELKUL, atlatszo hattérrel ult; a lista igy egy
   tagolatlan szovegfolyam volt. A hierarchiat nem a keret LETE adja (az mindenhol van),
   hanem a keret ERŐSSÉGE es a hattér: soft -> firm, alt -> raised.
   ⛔ `--radius: 0` es `--shadow: none` — az Almanach nem lekerekit es nem arnyekol. */
.session-card { position: relative; gap: var(--space-1); padding: var(--space-2) var(--space-3); background-color: var(--app-fill, var(--surface-fill)); border: var(--hairline) solid var(--app-line-soft, var(--border-hairline)); border-radius: var(--radius); }
.session-card:hover { background-color: var(--app-raised, var(--surface-raised)); border-color: var(--app-line, var(--border-hairline)); }
.session-card:focus-within { border-color: var(--accent); }
/* Az AKTIV allapot jele HARMAS: erosebb keret + bal oldali akcentus-sav + vilagosabb lap.
   ⚠️ Egyetlen jel keves lenne: a keret-erosseg onmagaban alig latszik, az akcentus-sav
   onmagaban pedig szinvakoknal veszik el. */
/* 🔴 MERT: a korabbi `--paper-hi` a kartya sajat `--app-raised` hatteren 1,03:1 volt —
   azaz LATHATATLAN. A lepcso most: inaktiv `--app-fill` -> aktiv `--app-raised`. */
.session-card[aria-current='true'] { background-color: var(--app-raised, var(--surface-raised)); }
/* ⭐ A CIM EGY SOR, `…`-lel csonkolva — es a teljes szoveg a `title` attributumban.
   ⚠️ A `white-space: nowrap` NELKUL a `text-overflow` NEM lep eletbe: tobb soros szoveg
   egyszeruen tovabb tordelne, `…` nelkul. Ez a harom tulajdonsag EGYUTT mukodik. */
/* ⭐ 2026-09-07 — a KOZOS skalara igazitva (`--text-small`, 15px).
   Korabban asztali nezetben 16px volt, 1023px alatt 15px — a 16px viszont a
   design-rendszer skalajan NINCS RAJTA (a portal es az Iris tokenjei bitre
   azonosak: 76/62/36/24/20/17/15/14/12/11). Az egyseges 15px-szel a
   toresponti felulíras is feleslegesse valt. */
.session-title { display: block; font-family: var(--font-serif); font-size: var(--text-small); color: var(--text-primary); overflow-wrap: anywhere; }
/* ⭐ SZELES KEPERNYON KET SOR: ott ugyis szelesebb az oldalsav, es a hasonlo kezdetu
   promptok csak igy kulonboztethetok meg.
   ⚠️ A `white-space: normal` KELL: kulonben a fenti `nowrap` legyozne a clampet. */
@media (min-width: 1440px) {
  .session-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }
}
/* A meta 11 px mono verzal (`.lbl`), a cim 16 px antikva: a ketto kozott ~1,5x meretkulonbseg
   ES tipus-valtas van. ⛔ Korabban 17 px / 15 px volt — az olvaso nem latta, melyik a cim. */
/* ⛔ A META SOR NEM CSONKOLODIK. Egy verzal mono cimke csonkolva (`UTO…`) nem roviditest,
   hanem RONCSOT ad. Ha nem fer ki, TORDELJON masik sorba. */
/* ⚠️ A jobb oldali 60px CSAK ott kell, ahol a muvelet-ikonsor ABSZOLUT
   pozicioban a meta-sor FOLE kerul (`.session-muveletek`) — az a REACT-felulet.
   🔴 A HTMX-kartyan NINCS `.session-muveletek`: ott az ikonsor a CIM soraban all,
   normal folyamban (merve: `grep -rn "session-muveletek" templates/` -> 0 talalat).
   Ott tehat a 60px SOHA nem volt indokolt — csak eddig nem latszott, mert a
   keskenyebb (312px) kartyan a meta-szoveg amugy is kitoltotte a sort.
   A 375px-es kartyan viszont a token-hasznalat gomb (`ml-auto`) a padding BELSO
   szeleig tolodott, es "beljebb" allt a jobb szeltol. Merve: 2026-09-07. */
.session-meta { flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); row-gap: var(--space-1); min-width: 0; }
.session-card:has(.session-muveletek) .session-meta { padding-inline-end: 60px; }
.session-meta > .lbl { overflow: visible; text-overflow: clip; white-space: nowrap; color: var(--ink-3-aa); }

.thread > .read { gap: var(--space-5); }

/* A KERDES: egy fokkal SOTETEBB a lapnal, jobbra zarva, korlatozott szelesseggel.
   ⚠️ A `--surface-fill` az app-modban `--app-fill` (#F7F3EA), ami a lapon (#F5EFE2)
   1,03:1 — gyakorlatilag lathatatlan. A `--app-shell` (#F1E9D9) az, ami LEFELE lep. */
/* ⚠️ A KERDES es a VALASZ TORZSE AZONOS meretu: korabban 16 px / 17 px volt, ami
   olvasas kozben „ugralo" ritmust adott. A kulonbseget a HATTER es az IGAZITAS viszi,
   nem a betumeret. */
/* ⭐ AL201 — MERT HIBA: egyetlen roved szo (pl. "teszt") a flex-elrendezes
   auto-szelesseg-becslesevel tul szuk dobozt kapott, es a `overflow-wrap: anywhere`
   miatt karakterenkent tordelodott ("te" / "sz" / "t"). Tobb szavas / hosszu,
   szokoz nelkuli uzenetnel ez nem jott elo (ott a sor mar amugy is tordelheto,
   ill. a max-width kap eleg helyet ad). A `min-width` egy also korlatot ad, hogy
   a becsles alacsonyabb hataran se csusszon 1-2 karakteres sorokba. Leellenorizve:
   rovid egyszavas uzenet EGY sorban, hosszu (150 kar.) szokoz nelkuli token
   tovabbra is helyesen tordelodik, vizszintes tulcsordulas nelkul. */
.bubble { max-width: 78%; min-width: 5em; background-color: var(--app-shell, var(--surface-fill)); border: var(--hairline) solid var(--app-line, var(--border-hairline)); border-radius: var(--radius-md); font-size: var(--text-small); line-height: var(--lh-small); }

/* ⭐ A SIENNA SAV A DOBOZ ELE, nem mellette lebego pipa.
   🔴 MERT: a `gap: 18px` miatt a 2 px-es sav 18 px-re elszakadt a valaszdoboztol —
   ket kulonallo elemnek latszott. */
.msg-a { gap: 0; }
.msg-mark { width: 3px; border-radius: var(--radius) 0 0 var(--radius); }

/* ⭐ A VALASZ is keretes egyseg — de a kerdesnel HALKABB.
   A hierarchia: a kerdes `--surface-fill` (telt folt, jobbra zarva, max 80%),
   a valasz `--app-raised` (vilagos lap, teljes szelesseg) + a bal oldali akcentus-sav.
   ⚠️ Ha a ketto AZONOS sulyu lenne, egy hosszu beszelgetes „dobozok sorava" valna, es
   eltunne a kerdes-valasz ritmus. */
/* A VALASZ: egy fokkal VILAGOSABB a lapnal, teljes szelesseg, a sav a bal ele.
   ⚠️ A ket iranyu lepes a lenyeg: kerdes lefele (#F1E9D9), lap kozepen (#F5EFE2),
   valasz felfele (#FDFBF7). A paletta ennel nagyobb szorast nem enged. */
.msg-body { flex: 1; background-color: var(--app-raised, var(--surface-raised)); border: var(--hairline) solid var(--app-line-soft, var(--border-hairline)); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-4) var(--space-5); }
/* 🔴 MERT KASZKAD-UTKOZES (2026-09-06): a `.msg-body p` (specificitas 0,1,1) LEGYOZTE a
   `.lbl`-t (0,1,0) — az eltelt ido cimkeje ezert 17 px antikvaval jelent meg 11 px mono
   helyett. A `:not()` KIZARJA a cimkeket a szabalybol, ahelyett hogy egy meg specifikusabb
   ellenszabalyt irnank: igy a `.lbl` marad az EGYETLEN hely, ahol a cimke merete el.
   ⚠️ Ez a hibaosztaly nemán all be: a szabaly „mukodik", csak nem arra, amire szantak. */
/* 🔴 ES UGYANEZ MEGISMETLODOTT (2026-09-07): a `.part-partial` (0,1,0) is elvesztette a
   harcot ezzel a szaballyal — a STREAM kozbeni eszkoz-jelzes ezert 15 px-cel es TINTA
   szinnel jelent meg, holott a sajat szabalya 12 px-et es siennat mond. A felhasznalo azt
   latta, hogy a jelzes SOKKAL nagyobb, mint a helyere erkezo vegleges cimke (11 px).
   ⚠️ A `.part-partial` szabalya vegig OTT VOLT es „helyesnek latszott" — csak nem hatott.
   Merve: `getComputedStyle` a valodi feluleten (15px / rgb(33,29,23)). */
.msg-body p:not(.lbl):not(.meta):not(.part-partial) { margin: 0; font-size: var(--text-small); line-height: var(--lh-small); color: var(--text-primary); }
.msg-sources { gap: var(--space-2); }

/* Strukturált üzenet-darabok (AL72): a válasz nem csak szöveg — eszközhívás,
   eszköz-eredmény és gondolkodás is megjelenik.

   A blokkok SZÁNDÉKOSAN halkak és alapból ÖSSZECSUKOTTAK: a főszereplő a válasz
   szövege, ezek a munkanapló. Nincs új szín — a hiba a meglévő sienna-wash folt.

   ⛔ A .part-raw tartalma külső rendszer NYERS kimenete (tool-argumentum,
   tool-eredmény): a sablon <pre>-be teszi, Django-escape-pel, és NEM megy át
   markdown-renderelésen. Ezért itt nincs `.prose`-szerű tipográfia. */
.msg-parts { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.part { border-left: 2px solid var(--border-hairline); padding-left: var(--space-3); }
/* ⭐⭐ A VALASZDOBOZON BELUL a munkanaplo HUVOS rampara valt — nem kap ujabb keretet.
   A `tokens.css` kimondja: „A meleg papir a szovege, a slate az adate." Az eszkoz- es
   gondolkodas-blokk pontosan gepi adat.
   ⛔ Igy elkerulheto a „minden egy doboz" hatas: a harmadik szintet HOMERSEKLET jeloli,
   nem egy ujabb vonal. Okolszabaly: egy feluleten legfeljebb KET egymasba agyazott keret. */
.msg-a .msg-parts { gap: var(--space-3); }
.msg-a .part { border-left: 0; padding-left: 0; background-color: var(--data-page); border: var(--hairline) solid var(--data-line); border-radius: var(--radius-sm); padding: 6px var(--space-3); }
.msg-a .part > summary { color: var(--data-ink); }
.msg-a .part-raw { background-color: var(--data-fill); border-radius: var(--radius-sm); }
/* A Forrasok-blokk MELEG marad: az a valasz alatamasztasa, nem munkanaplo. */
.msg-a .part-forrasok { background-color: transparent; border: 0; border-radius: 0; padding: 0; border-left: 2px solid var(--border-hairline); padding-left: var(--space-3); }
.part > summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: var(--text-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--ink-3-aa); }
.part > summary::-webkit-details-marker { display: none; }
.part > summary:hover { color: var(--text-primary); }
.part > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* ⭐ 2026-09-07 — 11px, mint a mellette allo `ESZKOZ`/`GONDOLKODAS` cimke.
   Korabban `--text-small` (15px) volt, a cimke pedig 11px: EGY sorban ket, egymastol
   negy fokkal eltero meret. Merve a /ai/52/-n es /ai/14/-en (125 elem).
   ⚠️ A `text-transform: none` es a `letter-spacing: 0` MARAD: a tool NEVE nem cimke,
   tehat nem verzal es nem ritkitott — a megkulonboztetes ettol jon, nem a merettol. */
.part-name { text-transform: none; letter-spacing: 0; font-size: var(--text-micro); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-state { margin-left: auto; flex: none; }
/* ⚠️ A 4px alatti ertekek SZANDEKOSAN nincsenek a `--space-*` skalan: ott a
   4px-es lepes durva lenne (egy ikon-sor 2px-rol 4px-re duplazodna). A portal
   ugyanigy csinalja (`gap: 14px`, `padding: 11px 13px`) — a skala a SZERKEZETI
   terkozoket koti meg, nem az optikai finomhangolast. Merve: 2026-09-07. */
.part-err { color: var(--sienna-deep); background-color: var(--sienna-wash); padding: 0 6px; }
.part-raw { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-code); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; color: var(--text-secondary); background-color: var(--surface-fill); padding: var(--space-3); }
/* ⭐ 2026-09-07 — A STREAM-JELZES METRIKAJA = A VEGLEGES CIMKEE (`.part > summary`):
   11 px mono, `--ls-micro`, verzal. Miert pont ugyanaz: a jelzes PONTOSAN OTT all, ahova
   a vegleges `ESZKOZ <nev>` sor fog erkezni — barmilyen elteres MERET-UGRASKENT latszik a
   csere pillanataban. A megkulonboztetes egyetlen tengelyen tortenik: a SZIN (sienna =
   most fut, ink-3 = kesz). ⚠️ A tool NEVET a JS `.part-name` spanbe teszi, tehat az —
   ugyanugy, mint a veglegesben — NEM verzal es NEM ritkitott.
   `display: flex`: a cimke es a nev kozott ugyanaz a `--space-2` koz, mint a summaryben.
   ⛔⛔ ES EZERT KELL A `[hidden]` SOR: a bongeszo `[hidden] { display: none }` szabalya
   UA-szintu, tehat egy OSZTALY `display: flex`-e LEGYOZI. A stream-jelzes `hidden`-nel
   indul — enelkul egy ures, siennás sor jelenne meg MINDEN valasznal, amelyben nincs
   eszkozhivas. (Ugyanaz a kaszkad-csapda, ami a font-size-nal fent all.) */
.part-partial[hidden] { display: none; }
/* ⭐⭐ AL185 — AZ OSSZEFOGOTT LEPES-FUTAM.

   ⛔ MERT OK (`/ai/342/`, 2026-09-14): 61 `details.part` blokk, MIND CSUKVA, es megis
   1861 px — kb. HET kepernyonyi gorgetes PUSZTAN a fejlecekbol. ⚠️ Az osszecsukas mint
   funkcio tehat nem segitett: a baj az, hogy 61 CSUKOTT sor is sok.

   ⭐ A minta az `ai-elements` `ChainOfThought`-jabol jon (EGY konteneT, benne lepesek),
   ⛔ de a komponenst NEM vettuk at (React + Radix + AI SDK) — ⚠️ a nativ `<details>`
   ugyanezt adja, JS nelkul es akadalymentesen. */
/* ⛔⛔ MERT HIBA (2026-09-14, felhasznaloi bejelentes): a nyilat CSS `content`-tel
   raktam ki (`\25B8`), ⚠️ es a szerkesztes heredocon at ment — a backslash atalakult,
   a Python a `\25`-ot OKTALIS escape-kent ertelmezte, ⛔ es egy 0x15-os VEZERLOKARAKTER
   + "B8" kerult a fajlba. A felhasznalo ezt latta a csoport jobb szelen.

   ⭐⭐ EZERT A JEL MOSTANTOL A MARKUPBAN VAN, SVG-kent:
     - ⛔ nincs escape, tehat nincs mit elrontani egy szerkesztesnek;
     - ⚠️ nem fugg betukeszlettol (a `▸` nem minden fontban van meg);
     - ⭐ es a `stroke`-ot a szoveg szine orokli, tehat a temaval egyutt valtozik.
   (`CLAUDE.md` 8.: a Bash eszkoz retege ATALAKITJA a backslash-eket — ⭐ a `Write`/`Edit`
   eszkoz a fo ut. Ez a sor pontosan azert all itt, mert ezt en magam sertettem meg.) */

/* ⭐⭐ A CSOPORT-FEJLEC KATTINTHATONAK LATSZIK — ⛔ felhasznaloi keres:
   „hivja fel magara egy picit jobban a figyelmet, hogy kattintassal le lehet nyitni".
   ⚠️ A tobbi `.part` summary-je szandekosan diszkret marad: ⭐ a CSOPORT az, amit
   MEG KELL TALALNI, a benne levo sorok mar kontextusban vannak. */
.part-csoport > summary {
  padding: var(--space-2) var(--space-3);
  background-color: var(--surface-fill);
  border: 1px solid var(--border-hairline);
  border-radius: 4px;
  transition: background-color .12s ease, border-color .12s ease;
}
.part-csoport > summary:hover {
  background-color: var(--surface-raised, var(--surface-fill));
  border-color: var(--ink-3-aa);
}
.part-csoport > summary > span:first-child { color: var(--text-primary); font-weight: 600; }
/* ⭐ A „mit csinal, ha rakattintok" SZOVEGGEL is — ⛔ nem csak ikonnal.
   ⚠️ Csak asztali szelessegen: mobilon a hely szuk, ott az ikon + a keret elég. */
.part-csoport-tipp { display: none; }
@media (min-width: 768px) {
  .part-csoport-tipp { display: inline; margin-left: auto; flex: none; color: var(--ink-3-aa); }
  .part-csoport[open] > summary > .part-csoport-tipp::after { content: 'elrejt'; }
  .part-csoport:not([open]) > summary > .part-csoport-tipp::after { content: 'mutasd'; }
}
/* ⭐ A chevron a markupbol jon (l. `_valasz_torzs.html`), itt csak forgatjuk. */
.part-csoport-nyil {
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform .15s ease;
}
.part-csoport[open] > summary > .part-csoport-nyil { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .part-csoport > summary,
  .part-csoport-nyil { transition: none; }
}
/* ⚠️ A behuzas a csoporton BELUL kell, kulonben a belso `.part`-ok bal szegelye
   egybeesne a csoporteval, es nem latszana, hogy MI TARTOZIK a csoportba. */
.part-csoport-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-3);
  min-width: 0;          /* ⛔ a `truncate`-lanchoz — l. a `szal-cim` B1 buktatojat */
}

.part-partial { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-family: var(--font-mono); font-size: var(--text-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--sienna-deep); }

/* Forrás-hivatkozások (R5). Nincs <details>: a források nem munkanapló, hanem a válasz
   alátámasztása -- alapból LÁTSZANAK. Nincs új szín és nincs új token. */
.part-forrasok { display: flex; flex-direction: column; gap: var(--space-2); }
.part-forrasok ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.part-forrasok li { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; font-size: var(--text-small); }
.part-forrasok a, .part-forrasok .forras-cim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-forrasok .forras-cim { color: var(--text-secondary); }
.forras-hol { flex: none; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-label); color: var(--ink-3-aa); }

.composer { padding: var(--space-3) var(--space-5) var(--space-3); }
/* ⭐ AL469 — a tömörebb alsó blokk: a motor-választó a lábsor bal csoportjában (a „Csatolás” mellett), a jogi
   MI-tájékoztatás saját, 13 px-es sorban. ⛔ Az `#engine-valaszto`-ra NEM teszünk osztályt (OOB outerHTML-csere). */
.composer-foot-bal { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.composer-foot-motor { min-width: 0; }
/* ⭐ AL469 (2. dev-mérés után): a motor-gombok mobilon KOMPAKTAK. ⛔ A mért ok: a `.btn` mobilon `width:100%`, 52 px —
   ezért a gombok MINDIG egymás alá törtek (a régi elrendezésben is). A teljes sor (`flex-basis:100%`) NEM segített, és a
   lakat-állapotot rontotta (375 px: 170 -> 204, mérve) — ezért visszavonva. Saját osztály, nem a `.btn-sm` foltozása
   (board #11); az érintési cél >= 44 px marad. */
@media (max-width: 639px) {
  .engine-opt { width: auto; height: auto; min-height: var(--touch-min, 44px); padding: 0 var(--space-4); }
}
/* ⭐ AL469 (tulajdonosi lelet, 2026-10-01: „lehetne egy sorban a motor, csatolás gombokkal”): az MI-tájékoztatás a
   lábsorban, JOBBRA igazítva, a gombokkal egy sorban; ha nem fér ki (mobil), a gombok ALÁ tördel, teljes szélességben,
   balra igazítva. 13 px, `text-ink-2` (AA). A csak-megtekintő nézetben (nincs lábsor) önálló sor marad. */
.mi-tajekoztatas { margin: var(--space-1) 0 0; font-size: 13px; line-height: 1.35; text-align: center; }
/* ⭐ T-27 (2026-10-05): `flex-basis: auto` (= a mondat természetes szélessége) a 20rem helyett — ha a gombok mellett nem fér
   el, a TELJES mondat a gombok alá kerül, egy sorban (mérve: 1024 px-en a 20rem-es alap a mellett-állást erőltette, és két sorba
   tört). ⚠️ A beszélgetés-oszlop 768 px-en ~345 px — ott a ~500 px-es mondat fizikailag nem fér el, két sorba tör. */
.composer-foot .mi-tajekoztatas { margin: 0; flex: 1 1 auto; min-width: 0; text-align: right; }
@media (max-width: 639px) { .composer-foot .mi-tajekoztatas { flex-basis: 100%; text-align: left; } }
/* ⭐ AL469 (dev-mérés, b4c9097): mobilon a tördelt MI-sor fölötti sorköz 4 px (mint a korábbi margó) — a 8 px-es sorköz
   +4 px-et adott (375 px: lakat 166 -> 170, aktív 218 -> 222). */
@media (max-width: 639px) { .composer-foot { row-gap: var(--space-1); } }
.composer-box { padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }

.composer-input { font-size: var(--text-small); line-height: var(--lh-small); }

.composer-foot { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }

@media (max-width: 767px) {

  /* A torzsszoveg 2026-09-07 ota MAR 15px (--text-small) az asztali nezetben is —
     a portal skalajahoz igazitva. Egy mobil-specifikus 16px innentol NAGYOBB
     lenne, mint az asztali, ezert a szabaly TORLODOTT (nem 14px-re allt). */
  .composer { padding: var(--space-2) var(--space-4) var(--space-3); }
  .composer-box { padding-left: var(--space-3); }

  /* ⭐ A pill-valto MOBILON szukebb belso margot kap.
     ⛔ A MERT PROBLEMA (2026-09-11): a komponens — ahogy a definicioja is mondja —
     KET rovid opciora keszult ('AI Chat / Admin'). A HARMADIK opcioval
     ('Biztonsag', T-030) 375px-en a fejlec VIZSZINTESEN TULCSORDULT:
         nav-brand 31 + pill-switch 272.5 + navlinks 54.7 = 382  >  375
     A tulcsordulo elem a `navlinks` volt (`shrink-0`), de a KIVALTO OK a
     pill-switch szelessege — ezert itt javitunk, nem ott.
     ⚠️ A magassag (32px) es a `nowrap` VALTOZATLAN: a tapintasi felulet
     magassaga es a feliratok egysorossaga nem romolhat. */
  .pill-opt { padding: 0 10px; }

}

/* ─────────────────────────────────────────────────────────────────────────────
   React-felület (AL72/F4). ⭐ SZÁNDÉKOSAN KEVÉS: a React-fa ugyanazokat az
   osztályokat használja (.shell, .sidebar, .thread, .msg-q, .msg-a, .part…),
   mint a HTMX-felület. Két stíluskészlet garantáltan elcsúszna.

   Itt csak az él, aminek a HTMX-oldalon nincs megfelelője: az assistant-ui
   viewportja saját görgethető konténer.
   ───────────────────────────────────────────────────────────────────────── */
.react-gyoker { display: contents; }

/* A beszelgetes-lista: kozok a kartyak kozott, hogy KULON egysegnek latszodjanak. */
.session-lista { display: flex; flex-direction: column; gap: var(--space-2); }
/* A cim-gomb a kartyan belul: teljes szelesseg, sajat keret nelkul (a kartya a keret). */
.session-nyito { display: block; width: 100%; min-width: 0; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; border-radius: var(--radius); }
/* ⚠️ A fokusz-iv KOVESSE a kartya sarkat: a 12 px sarku kartyaban egy szogletes outline
   optikailag „kilog". A `--focus-offset` a rendszer sajat erteke. */
.session-nyito:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
/* ⭐ „Stretched link": a TELJES kartya kattinthato, de a fokusz es az akadalymentes nev a
   gombe marad. ⚠️ A muveleteknek `z-index` kell, kulonben a kiterjesztett felulet ELFOGNA
   a kattintasukat. */
.session-nyito::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
/* ⚠️ A 4px alatti ertekek SZANDEKOSAN nincsenek a `--space-*` skalan: ott a
   4px-es lepes durva lenne (egy ikon-sor 2px-rol 4px-re duplazodna). A portal
   ugyanigy csinalja (`gap: 14px`, `padding: 11px 13px`) — a skala a SZERKEZETI
   terkozoket koti meg, nem az optikai finomhangolast. Merve: 2026-09-07. */
.session-muveletek { z-index: 1; }
/* A kartyan belul a muvelet-gombok kisebbek: 44 px-es erintőcel itt nem fer el, es a
   kartya EGESZE kattinthato — a gombok csak masodlagos muveletek. */
.session-muveletek .btn-icon { width: 28px; height: 28px; min-height: 0; }
/* A muveletek jobbra tolodnak, es CSAK hoveren/fokuszon latszanak — a lista nyugodt marad.
   ⚠️ `visibility`, nem `display`: igy a hely FOGLALT marad, es a kartya nem ugrik hoverkor. */
/* ⭐ A muveletek KIKERULNEK a folyambol: abszolut pozicioval a kartya jobb felso sarkaba.
   🔴 MERT: a `visibility: hidden` a helyet FOGLALTA, es a benne levo 44x44-es gomb miatt
   MINDEN kartya meta-sora 44 px magas volt — uresen is. Ettol tunt a lista ritkasnak.
   ⚠️ ERINTON nincs hover: ott mindig latszanak, kulonben az atnevezes es a torles
   ELERHETETLEN (merve tableten es mobilon). */
/* ⚠️ A muveletek a kartya ALSO sarkaban ulnek, nem a felsoben: felul a CIM van, ami
   szeles kepernyon KET sorra is fut — ott a gombok RARAJZOLODTAK a szovegre (merve).
   Alul a meta sor rovid (`PI_API 8 ÜZENET`), tehat nincs utkozes. */
.session-muveletek { position: absolute; inset-block-end: 6px; inset-inline-end: 6px; display: flex; gap: 2px; opacity: 0; visibility: hidden; transition: opacity .12s; }
.session-card:hover .session-muveletek,
.session-card:focus-within .session-muveletek,
.session-card[aria-current='true'] .session-muveletek { opacity: 1; visibility: visible; }
@media (hover: none) { .session-muveletek { opacity: 1; visibility: visible; } }
.session-atnevezo { display: flex; flex-direction: column; gap: var(--space-2); }

/* A csatolmany-gomb a beviteli sorban: a rejtett file-input a label gyermeke. */
.composer-box > label.btn { flex: none; cursor: pointer; }

/* A gorgetheto uzenet-terulet. A beviteli sor a viewport ALJAN tapad (ViewportFooter). */
/* ⭐⭐ OLVASASI SAV. 🔴 MERT: 1600 px-en, 368 px oldalsav mellett a szovegoszlop ~1150 px
   volt = 120+ karakter soronkent. A rendszer `--measure: 66ch`-t ir elo, a beszelgetesre
   pedig `--read-measure: 748px`-et — a HTMX-felulet ezt a `.read` burkoloval mar hasznalja.
   ⛔ Ez a legsulyosabb olvashatosagi hiba volt, es minden doboz-kerdest eltorzitott. */
.thread-viewport { display: flex; flex-direction: column; gap: var(--space-5); flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-6) var(--space-5); }
.thread-viewport > * { width: 100%; max-width: var(--read-measure, var(--measure)); margin-inline: auto; }
.thread-viewport > .composer { position: sticky; bottom: 0; max-width: none; margin: var(--space-4) calc(-1 * var(--space-5)) calc(-1 * var(--space-6)); }
.thread-viewport > .composer > * { max-width: var(--read-measure, var(--measure)); margin-inline: auto; }

/* ⭐ SZELES KEPERNYON az oldalsav bovebb: tobb latszik a cimekbol.
   ⚠️ A `--sidebar-w` a `.sidebar` szabalyaban van hasznalva; itt csak a valtozot allitjuk,
   hogy egyetlen helyen dolgozzon. */
/* ⚠️ TABLETEN SZUKEBB: 900 px-en a 312 px az ablak 35%-a, es a szovegoszlop 560 px ala esne. */
@media (max-width: 1023px) { .shell { --sidebar-w: 268px; } }
@media (min-width: 1440px) { .shell { --sidebar-w: 368px; } }
@media (min-width: 1800px) { .shell { --sidebar-w: 400px; } }

/* ⭐⭐ KESKENY KEPERNYON EGYSZERRE EGY PANEL.
   🔴 MERT HIBA (420 px): a ket panel egymas ALA csuszott, az oldalsav felbevagva, a
   beviteli sor pedig EGYALTALAN nem latszott — a felulet hasznalhatatlan volt.
   A `.shell-szal` osztalyt a React allitja, amikor a felhasznalo beszelgetest valaszt. */
.vissza-lista { display: none; }
@media (max-width: 767px) {
  /* ⚠️ OSZLOP-IRANY: sor-iranyban a `flex: 1` a SZELESSEGRE hatna, nem a magassagra —
     a lista igy tartalom-magassagura nott, es a LAP gorgott, nem a lista. A `min-height: 0`
     kotelezo: enelkul a flex-elem alap `min-height: auto`-ja megakadalyozza a zsugorodast,
     es az `overflow-y: auto` sosem lep eletbe. */
  
  .shell > .sidebar { width: 100%; flex: 1; min-height: 0; border-right: 0; }
  .shell > .main { display: none; }
  .shell-szal > .sidebar { display: none; }
  .shell-szal > .main { display: flex; }
  .vissza-lista { display: inline-flex; align-self: flex-start; margin: var(--space-3) var(--space-3) 0; }
  .thread-viewport { padding: var(--space-4) var(--space-3); }
  .thread-viewport > .composer { margin: var(--space-3) calc(-1 * var(--space-3)) calc(-1 * var(--space-4)); }
  .bubble { max-width: 92%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   KULDES-JELZO („Maris kuldom a valaszt.") — AL72/F4f

   🔴 MERT: a jelzo TELJES SZELESSEGBEN ult (x=312, w=1288), a beviteli doboz viszont
   a 748 px-es olvasasi savban, kozepre igazitva (x=582, w=748). A jelzo igy balra
   ELOBB kezdodott es jobbra a kepernyo szeleig ert — nem a mezovel egy vonalban.

   ⭐ Ugyanaz a sav, ugyanaz a kozep: a jelzo a beviteli doboz FOLE kerul, pontosan
   ugyanolyan szelesen.
   ───────────────────────────────────────────────────────────────────────── */
.kuldes-jelzo { max-width: var(--read-measure, var(--measure)); margin-inline: auto; }

/* ⭐ ELO JELZES: harom pottyocska, egymas utan halkulva-erosodve.
   ⛔ NINCS uj szin es nincs uj konyvtar: a sienna akcentus es 12 sor CSS.
   ⚠️ `prefers-reduced-motion` eseten a mozgas MEGALL — a jelzes megmarad (nem tunik el),
   csak nem mozog. A mozgas-erzekenyseg nem esztetikai kerdes. */
.gepel { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.gepel > i { width: 5px; height: 5px; border-radius: var(--radius-pill, 999px); background-color: var(--accent); opacity: .25; animation: gepel-pulzus 1.2s ease-in-out infinite; }
.gepel > i:nth-child(2) { animation-delay: .18s; }
.gepel > i:nth-child(3) { animation-delay: .36s; }
@keyframes gepel-pulzus {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .gepel > i { animation: none; opacity: .55; }
}

/* A beszelgetes cime a fejlecben.

   ⛔⛔ MERT HIBA (2026-09-14, felhasznaloi bejelentes): a korabbi szabaly PC-n
   SZANDEKOSAN nem csonkolt — az indok az volt, hogy „ott boven van hely”.
   ⚠️ Ez rovid cimekre igaz; a cim viszont az ELSO PROMPTBOL jon, es az lehet
   TOBBSOROS. Merve a `/ai/339/`-en: 121 karakter, ES egy `\n` benne.

   ⛔ Kovetkezmeny: a `white-space` alapertelmezese mellett a cim TOBB SORBA tort
   egy FIX magassagu (60 px, --topbar-h) fejlecben — a masodik sor kilogott.

   ⭐ Ezert MINDEN szelessegen egy sor + `…`. Az informacio NEM vesz el: a teljes
   cim ott van a `title=` attributumban (hover), es a beszelgetes elso uzenete
   ugyis lathato a chatben. */
.szal-cim {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A React kuldes-jelzoje: a `.msg-a` szerkezetet hasznalja, de nem uzenet — nincs doboz. */
.kuldes-jelzo { align-items: center; gap: var(--space-3); padding-block: var(--space-2); }
.kuldes-jelzo > .msg-mark { align-self: center; height: 18px; }
.kuldes-jelzo-szoveg { flex: 1; min-width: 0; margin: 0; font-size: var(--text-small); color: var(--text-secondary); }

/* A csatolas-gomb a beviteli sorban: a rejtett file-input a label gyermeke, tehat a
   labelnek kell gombkent viselkednie (a `.btn-icon` meretezi). */
.csatol-gomb { display: inline-flex; align-items: center; justify-content: center; }
.composer-send > svg { flex: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   SZOVEG-SHIMMER (AL72/F4f) — a varakozas „elo" jelzese.

   ⭐ MIERT SAJAT CSS ES NEM KONYVTAR: az `ai-elements` `Shimmer` komponense ugyanezt
   csinalja, de **Framer Motion + Tailwind 4 + shadcn-registry** kell hozza — a mi
   Tailwind 3-as, `@layer`-en KIVULI komponensretegunkkel utkozik (merve az `S34`
   vizsgalatban), es csak a React-oldalon letezne. Az eredmeny KET kulonbozo jelzes
   lenne a ket feluleten. Ez itt ~10 sor, es MINDKET feluleten ugyanaz.

   ⛔ A CSAPDA, AMIT KI KELL KERULNI: a hatas `color: transparent` + `background-clip: text`
   parbol all. Ha a hatter BARMIERT nem festodik ki (regi bongeszo, kikapcsolt gradiens,
   nyomtatas), a szoveg **LATHATATLAN** marad. Ezert a teljes blokk `@supports` MOGOTT van,
   es a `color: transparent` SOHA nem all be onmagaban.

   ⚠️ `prefers-reduced-motion`: mozgas-erzekenysegnel a shimmer NEM indul el — a szoveg
   ilyenkor a sajat, normal szinevel latszik. A jelzes megmarad, csak nem mozog.
   ───────────────────────────────────────────────────────────────────────── */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .shimmer {
      background-image: linear-gradient(
        100deg,
        var(--text-secondary) 0%,
        var(--text-secondary) 42%,
        var(--accent) 50%,
        var(--text-secondary) 58%,
        var(--text-secondary) 100%);
      background-size: 260% 100%;
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: shimmer-sopres 2.6s linear infinite;
    }
  }
}
@keyframes shimmer-sopres {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

/* =========================================================================
   AL625 — a vendorolt DS (f386220) és a régi Iris-fork KÜLÖNBSÉGEINEK
   semlegesítése, hogy a szétválasztás VISELKEDÉS-AZONOS legyen.
   -------------------------------------------------------------------------
   A régi `almanach.css` (fork) a DS alábbi szabályait TÖRÖLTE vagy sosem
   vette át. Most a DS bájtra pontos másolatként előbb töltődik, ezért ezek
   „átszivárognának”. Mérő: `welotech/tools/alm_ds_kaszkad.py kaszkad`
   (statikus) + a differenciális computed-style mérés (Playwright).
   ⚠️ Ha a DS-t frissítjük (PR-2), ezt a blokkot ÚJRA kell mérni: ami itt
   áll, az a fork és a DS eltérése, nem tervezési szándék.
   ========================================================================= */

/* (1) `.msg-body p` (DS 0,1,1) — a fork a `:not(.lbl):not(.meta):not(.part-partial)`
   változatra cserélte, mert a tag-szabály legyőzte a `.lbl`/`.part-partial`
   osztályt (mérve 2026-09-06 és 09-07). A kizárt osztályú `p`-ken a régi
   értékeket állítjuk vissza. A `.msg-body`-n belül előforduló kombinációk
   (mérve a sablonokból és a JS-ből): `p.lbl.lbl-aa`, `p.part-partial`, `p.meta`.
   A `margin: 0` a DS-ben és a régiben (Tailwind preflight) azonos. */
.msg-body p.lbl { font-size: var(--text-micro); line-height: var(--lh-micro); color: var(--text-muted); }
.msg-body p.lbl.lbl-aa { color: var(--ink-3-aa); }
.msg-body p.meta { font-size: var(--text-small); line-height: inherit; color: var(--text-muted); }
.msg-body p.part-partial { font-size: var(--text-micro); line-height: var(--lh-micro); color: var(--sienna-deep); }

/* (2) H-28 `text-indent` (DS f386220) — a fork nem vette át. */
.btn { text-indent: inherit; }
.app .btn-accent, .app .btn-primary, .app .btn-secondary, .app .btn-quiet, [data-almanach-mode='product'] .btn-accent, [data-almanach-mode='product'] .btn-primary, [data-almanach-mode='product'] .btn-secondary, [data-almanach-mode='product'] .btn-quiet { text-indent: inherit; }

/* (3) `.nav { position: relative }` (DS) — a fork nem vette át; a régi kaszkádban a
   fejléc pozícióját a Tailwind `sticky` osztálya adta (`base.html`: `nav sticky top-0 z-30`).
   A DS-szabály a Tailwind UTÁN tölt, ezért a `sticky`-t visszaállítjuk (0,2,0). ⛔ Egy
   `.nav { position: static }` itt a ragadós fejlécet törné el (mérve: computed-style diff). */
.nav.sticky { position: sticky; }