/* ========================================================================= Almanach — komponensréteg ------------------------------------------------------------------------- Betöltési sorrend: almanach-tokens.css → almanach-components.css Előfeltétel: a tokenfájl nélkül ez a fájl nem működik. Két felületmód, EGY osztálykészlet. A geometria a tokenből jön: marketing módban --radius = 0 és --radius-pill nincs (fallback 0), tehát ugyanez a `.btn` szögletes; product módban (``) pill. Ezért nincs `.btn-app`: a komponens nem tud a módról, a mód tud róla. FIGYELEM — két mért csapda, mindkettő visszaesésre hajlamos: 1) A háttérszínt MINDIG background-color-ral add meg, soha a background rövidítéssel: az törölné a papír-textúrát (background-image). 2) Ez a fájl NEM kerülhet @layer-be. A Tailwind preflight rétegezetlen, és a rétegezetlen szabály veri a rétegezettet specificitástól függetlenül — a .btn/.field minden vitatott tulajdonságát elvitte (mérve: border-width 0, padding 0, letter-spacing normal). Az ára: `class="btn px-4"` foltozás döntetlen és némán hatástalan, ezért a foltozás tiltott — burkolóelemre tedd az utility-t. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Elem-alapok ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--surface); color: var(--text-primary); font-family: var(--font-serif); font-size: var(--text-body); line-height: var(--lh-body); margin: 0; -webkit-font-smoothing: antialiased; text-wrap: pretty; } h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; margin: 0; } h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); } h3 { font-size: var(--text-h3); line-height: var(--lh-h3); } /* Folyékony címsor: a tokenskála asztali fix méret, 375 px-en a 62 px kilóg. */ @media (max-width: 767px) { h1 { font-size: clamp(32px, 9vw, 44px); } h2 { font-size: clamp(24px, 6.5vw, 30px); } h3 { font-size: 20px; } } /* A kizárás nem kozmetika: a:hover (0,1,1) legyőzné a .btn-primary-t (0,1,0), és a linkként megírt gombok hoveren siennára váltanának, aláhúzással. */ a:where(:not(.btn, .chip, .nav-brand, .navlink, .card-link, .pill-opt)) { color: var(--link, var(--accent)); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:where(:not(.btn, .chip, .nav-brand, .navlink, .card-link, .pill-opt)):hover { color: var(--sienna-hover, var(--accent)); } :focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: inherit; } ::selection { background-color: var(--vellum); color: var(--ink); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ------------------------------------------------------------------------- 2. Szövegosztályok ------------------------------------------------------------------------- */ /* Monospace verzál címke. Ez a rendszer hangja — soha nem kisbetűs, soha nem szoros. Papíron 11 px-en az Ink 3 csak 4.31:1, ezért ott .lbl-aa kell; kártyán (#FBF8F1) a sima .lbl 4.70:1, elég. */ .lbl { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--text-muted); } .lbl-aa { color: var(--ink-3-aa); } .lbl-lg { font-size: var(--text-label); letter-spacing: var(--ls-label); } /* Azonosító, fájlnév, felhasználónév: monospace és halk, de NEM verzál — a verzál meghamisítja az azonosítót (`admin` → `ADMIN`). */ .meta { font-family: var(--font-mono); font-size: var(--text-small); color: var(--text-muted); letter-spacing: 0; text-transform: none; } .meta-link { color: var(--text-secondary); text-decoration: underline; } .meta-link:hover { color: var(--text-primary); } .lead { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--text-secondary); max-width: 44ch; } .measure { max-width: var(--measure); } .read { max-width: var(--read-measure, var(--measure)); margin-inline: auto; } /* ------------------------------------------------------------------------- 3. Gombok — egy nézetben EGY elsődleges ------------------------------------------------------------------------- */ .btn { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-label); letter-spacing: var(--ls-label); text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: var(--space-2); height: 52px; width: 100%; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill, 0); background-color: transparent; cursor: pointer; text-decoration: none; transition: background-color .12s linear, color .12s linear; } @media (min-width: 640px) { .btn { display: inline-flex; width: auto; height: var(--control-height, 48px); padding: 0 26px; } } .btn-primary { background-color: var(--surface-inverse); color: var(--text-on-inverse); } .btn-secondary { background-color: transparent; color: var(--text-primary); border: var(--border-button) solid var(--border-strong); } .btn-accent { background-color: var(--accent); color: var(--text-on-accent); } .btn-quiet { background-color: var(--surface-raised); color: var(--text-secondary); border: 1px solid var(--border-hairline); } .btn-ghost { background-color: transparent; color: var(--text-secondary); } .btn-primary:hover { background-color: var(--ink-2); } .btn-accent:hover { background-color: var(--sienna-hover, var(--accent)); } .btn-secondary:hover { background-color: var(--surface-fill); } .btn-quiet:hover { background-color: var(--surface-fill); color: var(--text-primary); } .btn-ghost:hover { background-color: var(--surface-fill); color: var(--text-primary); } .btn[disabled], .btn[aria-disabled='true'] { background-color: var(--vellum); color: var(--text-muted); border-color: transparent; cursor: not-allowed; } /* A product mód gombfelirata antikva, nem verzál mono: a pill gombon a 0.16em ritkítás 48 px-en már sávot rajzol, nem szót. Az elsődleges ÉS a másodlagos akció egyszerre vált — egymás melletti gombárnál a kétféle feliratnyelv véletlennek olvasódik. */ .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 { font-family: var(--font-serif); font-size: 18px; font-weight: 400; letter-spacing: 0; text-transform: none; } /* A variánsok SORRENDJE tartalmi kérdés: .btn-block a .btn-sm ELŐTT némán width:auto-ra megy. Először méret, utána szélesség. */ .btn-sm { height: var(--control-height-sm, 40px); padding: 0 18px; font-size: var(--text-micro); } .btn-block { width: 100%; } .btn-icon { width: 44px; height: 44px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background-color: transparent; color: var(--text-muted); border-radius: var(--radius-pill, 0); cursor: pointer; } .btn-icon:hover { color: var(--text-primary); background-color: var(--surface-fill); } .btn-icon svg { width: 20px; height: 20px; } .btn-icon-danger:hover { color: var(--accent); } /* Szöveges gomb: a vonal és a szöveg EGYÜTT vált siennára. */ .btn-text { display: inline-flex; align-items: center; min-height: var(--touch-min); font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-primary); background: none; border: 0; padding: 0; border-bottom: 1.5px solid var(--border-strong); cursor: pointer; } .btn-text:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ------------------------------------------------------------------------- 4. Chip, pötty, kód ------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 30px; padding: 0 12px; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); background-color: transparent; border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-pill, 0); text-decoration: none; } .chip-aa { color: var(--ink-3-aa); } .chip-fill { background-color: var(--surface-fill); border-color: transparent; } .chip-action { cursor: pointer; } .chip-action:hover { color: var(--text-primary); border-color: var(--border-strong); } .chip-src { text-transform: none; letter-spacing: 0; font-size: var(--text-small); } .chip-file { max-width: 220px; } .chip-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 7 px: olive = élesítve, sienna = jóváhagyásra vár, slate = fut, ink-3 = archivált. A szintet a pötty hordozza, nem a szöveg színe — siennából soha nem lesz kis szöveg. */ .dot { width: 7px; height: 7px; flex: none; display: inline-block; border-radius: var(--radius-pill, 0); } .dot-olive { background-color: var(--approved); } .dot-late { background-color: var(--bordeaux, var(--accent)); } .dot-sienna { background-color: var(--accent); } .dot-slate { background-color: var(--info); } .dot-muted { background-color: var(--ink-3); } .dot-pulse { animation: almanach-pulse 1.8s ease-in-out infinite; } @keyframes almanach-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } } .code { font-family: var(--font-mono); font-size: var(--text-code); background-color: var(--data-fill, var(--vellum)); color: var(--data-ink, var(--text-primary)); padding: 2px 7px; border-radius: var(--radius-sm, 0); } /* Adatblokk: a gépi tartalom hűvös felületen áll, saját görgetéssel. A width:max-content és a burkoló CSAK EGYÜTT működik — nélküle 390 px-en a tábla karakterenként tördel („UTOLS / Ó / MOZGÁ / S"). */ .datablock { background-color: var(--data-fill, var(--vellum)); border: var(--hairline) solid var(--data-line, var(--border-hairline)); border-radius: var(--radius-sm, 0); padding: var(--space-4); overflow-x: auto; } .datablock > pre { margin: 0; width: max-content; min-width: 100%; font-family: var(--font-mono); font-size: var(--text-code); color: var(--data-ink, var(--text-primary)); } /* ------------------------------------------------------------------------- 5. Űrlap — a címke a mező FÖLÉ kerül, így üresen is olvasható ------------------------------------------------------------------------- */ .field-row { display: flex; flex-direction: column; gap: 7px; } .field-label { display: block; font-size: var(--text-small); color: var(--text-secondary); } .field { width: 100%; height: var(--control-height, 48px); padding: 0 18px; font-family: var(--font-serif); font-size: var(--text-body); color: var(--text-primary); background-color: var(--surface-raised); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-pill, 0); } .field::placeholder { color: var(--text-muted); opacity: 1; } .field:hover { border-color: var(--app-line-firm, var(--border-hairline)); } .field:focus-visible { border-color: var(--accent); outline-color: var(--accent); } .field-sm { height: 38px; padding: 0 12px; font-size: var(--text-small); } .field-area { height: auto; min-height: 96px; padding: 12px 16px; border-radius: var(--radius, 0); line-height: 1.55; resize: vertical; } .field-num { font-family: var(--font-mono); text-align: right; } /* Hiba: a KERET vált siennára, a szöveg nem. A mondat teljes mondat. */ .field[aria-invalid='true'] { border-color: var(--accent); border-width: 1.5px; } .field-error { display: flex; align-items: flex-start; gap: 11px; font-size: var(--text-body); line-height: 1.5; color: var(--sienna-deep, var(--ink-2)); background-color: var(--sienna-wash, var(--surface-fill)); border: var(--hairline) solid var(--sienna-wash-ln, var(--border-hairline)); border-radius: var(--radius, 0); padding: 12px 14px; } .field-error svg { width: 17px; height: 17px; flex: none; margin-top: 2px; stroke: var(--sienna-text, var(--accent)); } .field-hint { font-size: var(--text-small); color: var(--text-muted); } /* Jelölőelem. 18 px a doboz, de a kattintható sáv legalább 44 px. */ .choice { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); font-size: 16px; color: var(--text-secondary); cursor: pointer; } .choice-box { width: 18px; height: 18px; flex: none; background-color: var(--surface-raised); border: 1px solid var(--app-line-firm, var(--border-strong)); border-radius: 5px; } .choice-box-round { border-radius: var(--radius-pill, 0); } .choice input:checked + .choice-box { background-color: var(--accent); border-color: var(--accent); } /* Kapcsoló — admin: MCP, skill, jogosultság */ .switch { width: 44px; height: 26px; flex: none; padding: 3px; background-color: var(--vellum); border: 0; border-radius: var(--radius-pill, 0); cursor: pointer; display: flex; } .switch > span { display: block; width: 20px; height: 20px; background-color: var(--paper-hi); border-radius: var(--radius-pill, 0); transition: transform .14s ease; } .switch[aria-checked='true'] { background-color: var(--approved); } .switch[aria-checked='true'] > span { transform: translateX(18px); } /* Pill-váltó: AI Chat / Admin a felső sávban. Két-három rövid opcióra. */ .pill-switch { display: inline-flex; gap: 2px; padding: 3px; background-color: var(--surface-fill); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-pill, 0); } /* ⭐ `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. */ .pill-opt { white-space: nowrap; display: inline-flex; align-items: center; height: 32px; padding: 0 16px; font-size: var(--text-small); color: var(--text-secondary); border-radius: var(--radius-pill, 0); text-decoration: none; } .pill-opt[aria-current='page'] { background-color: var(--surface-raised); color: var(--text-primary); box-shadow: 0 1px 2px rgba(33,29,23,.06); } /* ------------------------------------------------------------------------- 6. Felületek: kártya, callout, panel ------------------------------------------------------------------------- */ .card { background-color: var(--surface-raised); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius, 0); padding: var(--space-5); } .card-lg { border-radius: var(--radius-lg, 0); padding: 28px; } /* Kijelölt listaelem: 3 px sienna él a bal oldalon. A „bal oldali színes csík" a marketing módban tiltott — a product listában viszont ez az egyetlen jel, ami görgetés közben periférián is látszik. */ .card-sel { background-color: var(--surface-raised); border-color: var(--app-line-firm, var(--border-strong)); box-shadow: inset var(--radius-xs, 3px) 0 0 var(--accent); } .callout { background-color: var(--surface-alt); border-block: var(--hairline) solid var(--border-hairline); padding: var(--space-4) 0; } .app .callout, [data-almanach-mode='product'] .callout { border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius, 0); padding: 14px 16px; } .inverse-block { background-color: var(--surface-inverse); color: var(--text-on-inverse); padding: var(--space-6); } .inverse-block .lbl { color: var(--vellum); } .panel { background-color: var(--surface-raised); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-md, 0); overflow: hidden; } .panel-head { display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-4); border-bottom: var(--hairline) solid var(--border-hairline); } .panel-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); } /* ------------------------------------------------------------------------- 7. Táblázat — zebracsíkozás nincs ------------------------------------------------------------------------- */ .tbl { width: 100%; border-collapse: collapse; } .tbl th { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3-aa); text-align: left; font-weight: 500; padding: var(--space-2) var(--space-3); border-bottom: var(--rule-strong) solid var(--border-strong); white-space: nowrap; } .tbl td { padding: 11px var(--space-3); border-bottom: var(--hairline) solid var(--border-hairline); vertical-align: top; } .tbl td:last-child, .tbl th:last-child { text-align: right; } .tbl-num td:nth-child(n+2) { font-family: var(--font-mono); font-size: var(--text-small); } /* Adat-táblázat: hűvös fejléc, a számok slate-ben. Token-, napló-, használati táblák — minden, ami mérés és nem mondat. */ .tbl-data th { background-color: var(--data-fill, var(--vellum)); color: var(--data-ink, var(--ink-2)); border-bottom-color: var(--data-line, var(--border-hairline)); border-bottom-width: var(--hairline); } .tbl-data td { border-bottom-color: var(--data-line, var(--border-hairline)); } .tbl-wrap { overflow-x: auto; border: var(--hairline) solid var(--data-line, var(--border-hairline)); border-radius: var(--radius-md, 0); } .tbl-wrap > .tbl { width: max-content; min-width: 100%; } /* ------------------------------------------------------------------------- 8. Alkalmazás-héj: felső sáv, oldalsáv ------------------------------------------------------------------------- */ .nav { display: flex; align-items: center; justify-content: space-between; height: var(--topbar-h, 60px); padding-inline: var(--page-margin-s); border-bottom: var(--hairline) solid var(--border-hairline); background-color: var(--surface-alt); } @media (min-width: 1024px) { .nav { padding-inline: 28px; } } /* Vízszintes lockup: rajz + ÉLŐ Newsreader-szó. 22 px szóhoz 34 px rajz, 13 px köz. A szó soha nem görbe és soha nem sienna. */ .nav-brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-serif); font-size: 20px; letter-spacing: -.012em; color: var(--text-primary); text-decoration: none; } .nav-jel { width: 31px; height: auto; display: block; } @media (min-width: 1024px) { .nav-brand { font-size: 22px; gap: 13px; } .nav-jel { width: 34px; } } .navlinks { display: flex; align-items: center; gap: 30px; } /* ⭐ `nowrap` — l. a `.pill-opt`-nal. Merve: a "Kilépés" 375px-en 2,4 sor magas volt. */ .navlink { white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--touch-min); font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3-aa); text-decoration: none; } .navlink:hover, .navlink.on { color: var(--text-primary); } /* 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):

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.) */ .nav-menu { display: none; } .nav-menu > summary { list-style: none; } .nav-menu > summary::-webkit-details-marker { display: none; } .nav-menu > summary svg { width: 24px; height: 24px; } .nav-menu-open, .nav-menu-close { display: inline-flex; } .nav-menu-close, .nav-menu[open] .nav-menu-open { display: none; } .nav-menu[open] .nav-menu-close { display: inline-flex; } .nav-menu-panel { position: absolute; inset-inline: 0; top: 100%; z-index: 20; padding: var(--space-2) var(--page-margin-s) var(--space-3); background-color: var(--surface-alt); border-bottom: var(--hairline) solid var(--border-hairline); } .nav-menu-panel .navlinks { flex-direction: column; align-items: stretch; gap: 0; } .nav-menu-sep { margin: var(--space-2) 0; border: 0; border-top: var(--hairline) solid var(--border-hairline); } @media (max-width: 767px) { .nav-menu { display: block; } } .shell { display: flex; min-height: 0; flex: 1; } .sidebar { width: var(--sidebar-w, 312px); flex: none; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background-color: var(--surface-alt); border-right: var(--hairline) solid var(--border-hairline); overflow-y: auto; } .sidebar-group { display: flex; flex-direction: column; gap: var(--space-2); } .sidebar-group > .lbl { padding-inline: 2px; } /* Beszélgetés-kártya: 12 px sarok, 1 px keret, kijelölve 3 px sienna él. A dátumcsoport fejléce .lbl .lbl-aa. */ /* ⭐ 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; display: flex; flex-direction: column; 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); text-decoration: none; color: var(--text-primary); cursor: pointer; } .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)); border-color: var(--app-line, var(--border-hairline)); box-shadow: inset var(--radius-xs, 3px) 0 0 var(--accent); } /* ⭐ 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); line-height: 1.35; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 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 { display: flex; 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); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; background-color: var(--surface); } /* ------------------------------------------------------------------------- 9. Chat ------------------------------------------------------------------------- */ .thread { flex: 1; overflow-y: auto; padding: var(--space-6) var(--space-5); } .thread > .read { display: flex; flex-direction: column; gap: var(--space-5); } /* Kérdés: halk folt jobbra igazítva. */ .msg-q { display: flex; justify-content: flex-end; } /* 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. */ .bubble { max-width: 78%; padding: 12px 16px; 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); overflow-wrap: anywhere; } /* Válasz: keret nélkül áll a lapon, előtte 2 px sienna FÜGGŐLEGES SÁV — a forrásmegjelölés jele, NEM logó. (Designer-döntés 2026-08-30: a screen plan sávja nyert a korábbi § szakaszjel helyett.) A markup §-t írhat a spanbe (tartalék/legacy) — a glifát a font-size: 0 tünteti el, a sávot a háttérszín rajzolja. Az align-self: stretch explicit, hogy a sáv akkor is teljes magas legyen, ha a sor items-center-t kap (töltésjelző). A sarok pill-token: marketing módban szögletes marad. */ /* ⭐ 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 { display: flex; gap: 0; } .msg-mark { flex: none; align-self: stretch; width: 3px; border-radius: var(--radius) 0 0 var(--radius); background-color: var(--accent); font-size: 0; color: transparent; } .msg-mark-muted { background-color: var(--text-muted); } /* ⭐ 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 { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; 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 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .msg-tools { display: flex; align-items: center; gap: var(--space-1); } /* 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

-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 ` 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 ``
   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 : 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); }

/* Beviteli sor: hajszálvonal fölötte, árnyék nincs; a küldés gomb
   48×48 és a mező jobb végén ül. */
.composer { flex: none; padding: var(--space-4) var(--space-5) var(--space-5); border-top: var(--hairline) solid var(--border-hairline); background-color: var(--surface); }
.composer-box { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); background-color: var(--surface-raised); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-lg, 0); }
.composer-box:focus-within { border-color: var(--accent); }
.composer-input { flex: 1; min-width: 0; border: 0; background: none; resize: none; font-family: var(--font-serif); font-size: var(--text-small); line-height: var(--lh-small); color: var(--text-primary); padding: 12px 0; max-height: 168px; }
.composer-input:focus-visible { outline: none; }
.composer-send { width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; background-color: var(--accent); color: var(--text-on-accent); border-radius: var(--radius-pill, 0); cursor: pointer; }
.composer-send:hover { background-color: var(--sienna-hover, var(--accent)); }
.composer-send[disabled] { background-color: var(--vellum); color: var(--text-muted); cursor: not-allowed; }
.composer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }

/* -------------------------------------------------------------------------
   10. Admin: kapcsolósor, ACL-rács
   ------------------------------------------------------------------------- */

.rowlist { display: flex; flex-direction: column; }
.rowitem { display: flex; align-items: center; gap: var(--space-4); padding: 14px var(--space-4); border-bottom: var(--hairline) solid var(--app-line-soft, var(--border-hairline)); }
.rowitem:last-child { border-bottom: 0; }
.rowitem-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rowitem-title { font-size: 17px; }
.rowitem-sub { font-size: var(--text-small); color: var(--text-secondary); }

/* --acl-cols: ahány jogosultság-oszlop van. Az auto-fit itt nem jó: a
   fejléc-cellák számát nem ismeri, és félsornyival elcsúsztatja a rácsot. */
.acl { display: grid; grid-template-columns: minmax(160px, 1.4fr) repeat(var(--acl-cols, 3), minmax(72px, 1fr)); align-items: stretch; gap: 1px; background-color: var(--data-line, var(--border-hairline)); border: var(--hairline) solid var(--data-line, var(--border-hairline)); border-radius: var(--radius-md, 0); overflow: hidden; }
.acl > * { display: flex; align-items: center; background-color: var(--surface-raised); padding: 10px 12px; }
.acl > .acl-h { background-color: var(--data-fill, var(--vellum)); font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--data-ink, var(--ink-2)); justify-content: center; }
.acl-cell { justify-content: center; }

/* -------------------------------------------------------------------------
   11. Modális, toast, üres állapot
   ------------------------------------------------------------------------- */

.backdrop { position: fixed; inset: 0; background-color: rgba(33,29,23,.42); display: flex; align-items: center; justify-content: center; padding: var(--space-5); }
.modal { width: 100%; max-width: 460px; background-color: var(--surface-raised); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-lg, 0); padding: 26px; display: flex; flex-direction: column; gap: var(--space-4); }
.modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

.toast { position: fixed; inset-inline: var(--space-4); bottom: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px 16px; background-color: var(--surface-inverse); color: var(--text-on-inverse); border-radius: var(--radius, 0); }
@media (min-width: 768px) { .toast { inset-inline: auto var(--space-5); max-width: 28rem; } }
.toast-dot { margin-top: 8px; flex: none; }
.toast-close { margin-left: auto; background: none; border: 0; color: var(--vellum); cursor: pointer; }
.toast-close:hover { color: var(--paper); }

.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-7) var(--space-5); text-align: center; }
.empty > img { width: 44px; height: auto; opacity: .8; }
.empty-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

/* --- Állapot-badge és összeg (ügyfélportál) --------------------------------
   A pötty továbbra is a jel, a badge csak keretet ad neki: pénzügyi listában
   a puszta pötty + szöveg túl halk, a kitöltött badge viszont színes foltok
   sorát rajzolja. Ezért: 1 px keret, átlátszó belső, benne a 7 px pötty.  */

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 11px;
  font-size: var(--text-small);
  color: var(--text-secondary);
  background-color: transparent;
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-pill, 0);
  white-space: nowrap;
}
.badge-late { color: var(--bordeaux-deep, var(--ink-2)); border-color: var(--bordeaux-line, var(--border-hairline)); background-color: var(--bordeaux-wash, transparent); }
.badge-wait { color: var(--sienna-deep, var(--ink-2)); border-color: var(--sienna-wash-ln, var(--border-hairline)); }
.badge-ok   { color: var(--ink-2); border-color: var(--app-line-firm, var(--border-hairline)); }

/* Összeg: monospace és tabuláris, hogy a listában a számjegyek egy vonalba
   essenek. A pénznem halk és kisebb — a szám a főszereplő. */
.money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.money-cur { font-size: .8em; color: var(--text-muted); margin-left: .35em; }
.money-lg { font-size: 30px; }
.money-late { color: var(--bordeaux, inherit); }

/* Összegző sorok: nettó / áfa / bruttó. A bruttó felül 2 px tintavonal. */
.sum { display: flex; flex-direction: column; }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); padding: 8px 0; font-size: var(--text-small); color: var(--text-secondary); }
.sum-total { border-top: var(--rule-strong) solid var(--border-strong); margin-top: var(--space-2); padding-top: 12px; font-size: var(--text-body); color: var(--text-primary); }

/* --- Adatpár: címke fölül, érték alul (fiókadat, számlaadat) ----------- */
.pair { display: flex; flex-direction: column; gap: 3px; }
.pair > .lbl { margin-bottom: 1px; }

/* --- Kiválasztható opciókártya (fizetési mód) --------------------------- */
.pick { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background-color: var(--surface-raised); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius, 0); cursor: pointer; text-align: left; }
.pick:hover { border-color: var(--app-line-firm, var(--border-strong)); }
.pick[aria-checked='true'] { border-color: var(--accent); border-width: 1.5px; }
.pick-main { display: flex; flex-direction: column; gap: 3px; }

/* -------------------------------------------------------------------------
   12. Telefon — 390 px a mérték
   -------------------------------------------------------------------------
   Az app-héj mobilon EGY nézet: a lista és a beszélgetés váltakozik,
   nem szűkül. Amíg a lista van elöl, a fejléc morzsája elrejtve.
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .shell { flex-direction: column; }
  .sidebar { width: auto; border-right: 0; border-bottom: var(--hairline) solid var(--border-hairline); max-height: 45vh; }
  .shell[data-view='thread'] .sidebar { display: none; }
  .shell[data-view='list'] .main { display: none; }
  .thread { padding: var(--space-5) var(--space-4); }
  .bubble { max-width: 88%; }
  /* 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-3) var(--space-4) var(--space-4); }
  .composer-box { padding-left: var(--space-3); }
  .btn-icon, .composer-send { min-width: var(--touch-min); min-height: var(--touch-min); }
  .navlinks { gap: var(--space-4); }
  /* ⭐ 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; }
  .acl { grid-template-columns: 1fr; }
  .acl > .acl-h:not(:first-child) { display: none; }
  .rowitem { flex-wrap: wrap; }
  .sum-row { gap: var(--space-4); }
  .money-lg { font-size: 26px; }
}

/* -------------------------------------------------------------------------
   13. Nyomtatás
   ------------------------------------------------------------------------- */

@media print {
  body { background-color: #fff; font-size: 12pt; }
  .app .sidebar, .app .composer, .toast, .app .btn { display: none !important; }
  .card, .panel, .tbl-wrap { break-inside: avoid; }
  a { color: var(--ink); text-decoration: none; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   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 { flex-direction: column; }
  .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; }
}