/* ============================================================ zenpAI Arbeitsbereich — shell layout: the 68px header, the transcript/rail grid, the rail's tab chrome, the identity popover and the <1100px off-canvas drawer. Companion to assets/zpa-app.css, which owns every colour, radius, hairline and type scale used below; this file adds no token of its own. No CDN, no web font, no external reference of any kind. ============================================================ */ /* The app is a fixed viewport with exactly one scroll container per column; the document itself never scrolls. `height:100%` has to be stated on both html and body, because a percentage height resolves against the parent's *used* height and the initial containing block is the only ancestor with one. Leptos mounts into (`mount_to_body`), so body IS the shell's root element and carries the column layout: header, optional degradation banner, then the grid taking whatever is left. A flex column rather than `calc(100% - 68px)` on the grid, because the banner's height is not a constant — its German sentence wraps to three lines on a 390px phone — and a layout that hardcodes it pushes the composer off the bottom of exactly the screen where that matters most. */ html, body { height: 100%; } body { overflow: hidden; display: flex; flex-direction: column; } /* Hairline, in-palette scrollbars. The browser default reads as chrome from another product on a surface this quiet. */ .transcript, .rail-panes, .popover, .md pre, .md .table-wrap, .report-dialog-content { scrollbar-width: thin; scrollbar-color: var(--linie) transparent; } /* ── Header (68px) ────────────────────────────────────────────────── */ /* `min-height` + `flex-wrap`, not a fixed `height`: at 68px the header is one row at every width the product is designed for, and on a 320px phone it becomes two rather than pushing its last control past the right edge — where `body{overflow:hidden}` would make it invisible *and* unreachable. Flex decides when that happens; there is no second breakpoint to keep in sync. */ .app-header { min-height: var(--app-header-h); flex-shrink: 0; border-bottom: 1px solid var(--linie); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding: 0 22px; position: relative; z-index: 60; background: var(--kohle); transition: background 380ms var(--ease), border-color 380ms var(--ease); } .header-brand { display: flex; align-items: center; gap: inherit; min-width: 0 } .header-controls { display: flex; align-items: center; gap: 12px; margin-left: auto } .crumb { border-left: 1px solid var(--linie); padding-left: 18px; margin-left: 2px; white-space: nowrap } .crumb .sep { color: var(--linie); margin: 0 7px } /* DE | EN. Two buttons and a hairline separator — not a select: the choice is binary and permanently visible. */ .lang-toggle { display: flex; align-items: center; gap: 2px } .lang-toggle button { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--schiefer); padding: 6px 5px; } .lang-toggle button.on { color: var(--graphit) } .lang-toggle .sep { color: var(--linie) } .theme-toggle { font-size: 15px; line-height: 1; padding: 8px 9px } /* Muted, non-blocking degradation banner: `policy_error` from /api/bootstrap. Muted on purpose — the workspace works, only the "which alias resolves local" annotation is missing, and a red bar would claim otherwise. */ .degraded { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; flex-shrink: 0; padding: 9px 22px; border-bottom: 1px solid var(--linie); background: var(--kohle-card); } .degraded .service-de { font-size: 13px; color: var(--schiefer); line-height: 1.45 } /* ── Shell grid (minmax(0,1fr) 400px at >=1100px) ─────────────────── */ .app-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); overflow: hidden; /* The containing block for the rail once it becomes a drawer: the drawer covers the content area and never the header, whatever the header and banner happen to add up to. */ position: relative; } /* min-height:0 / min-width:0 — a flex or grid item refuses to shrink below its content, so without these the composer is pushed off the bottom of the viewport and the transcript never scrolls. */ .app-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--linie); position: relative; } .transcript { flex: 1; min-height: 0; overflow-y: auto; /* overflow-anchor:none — the browser's own scroll anchoring fights the transcript autoscroll. scroll-behavior stays `auto` here; the one smooth scroll in the product is the pill's, set per call. */ overflow-anchor: none; scroll-behavior: auto; padding: 34px 40px 26px; /* Own paint, not a transparent hole onto : the data-theme flip at mount is a real value change on the already-painted , so body's own `transition: background 380ms` runs, and an element without a background of its own shows that transition through as a flat grey rectangle for up to 380ms. Freshly inserted elements (.app-header/.rail/.composer-bar) have no prior value to transition from and paint their final colour at once, which is why only this one needs a background. */ background: var(--kohle); transition: background 380ms var(--ease); } .column-inner { max-width: 820px; margin: 0 auto } .composer-bar { position: relative; border-top: 1px solid var(--linie); padding: 16px 40px 18px; background: var(--kohle); } /* ── Composer meta line ───────────────────────────────────────────── */ /* Composition of existing primitives, no token or colour of its own: the two