/* The mount point, the sign-in screen and the boot splash — the only chrome this head owns. Everything past sign-in is KOAI.Shared's koai.css, unchanged, so the manager looks like the app. Colours come from the same tokens that stylesheet defines, so light and dark follow the app's theme. */ /* The box the whole shell is measured against, and the one thing every head has to give it. koai.css sizes .app-shell as height:100% "of #app, which fills body" — true in the MAUI and demo heads, which each set this in their own app.css, and not true here until now. Without it #app is auto-height, so the shell stops at the height of its contents: the sidebar and the content area end partway down the window with a dead band underneath, and any view that scrolls inside a flex:1 child instead grows past body's overflow:hidden and takes its bottom out of reach. height:100%, not min-height:100vh — .app-shell needs a definite height to resolve against, and vh ignores the text-size zoom on , which would push the shell's bottom off screen at the larger scales. */ #app { height: 100%; } .koai-boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--color-bg, #16181c); color: var(--color-fg-secondary, #9aa0a6); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } .koai-boot-mark { font-size: 26px; font-weight: 650; letter-spacing: 0.16em; color: var(--color-fg, #e8eaed); } .koai-boot-note { font-size: 13px; } .koai-signin { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--color-bg, #16181c); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } .koai-signin-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; padding: 28px 26px 22px; border-radius: 14px; background: var(--color-bg-elevated, #1e2126); border: 1px solid var(--color-border, #2c3036); color: var(--color-fg, #e8eaed); } .koai-signin-mark { font-size: 22px; font-weight: 650; letter-spacing: 0.16em; text-align: center; } .koai-signin-lead { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-fg-secondary, #9aa0a6); text-align: center; } .koai-signin-status { padding: 9px 11px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; background: var(--color-bg-grouped, #24272c); border: 1px solid var(--color-border, #2c3036); } .koai-signin-github { width: 100%; justify-content: center; } .koai-signin-or { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--color-fg-tertiary, #6f757c); } .koai-signin-or::before, .koai-signin-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border, #2c3036); } .koai-signin-form { display: flex; flex-direction: column; gap: 11px; } .koai-signin-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; } .koai-signin-field > span { color: var(--color-fg-secondary, #9aa0a6); } .koai-signin-field em { font-style: normal; color: var(--color-fg-tertiary, #6f757c); } .koai-signin-remember { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-fg-secondary, #9aa0a6); } .koai-signin-switch { align-self: center; } /* The device-flow panel: the code has to be readable across a room, because people type it on a phone while looking at the screen. */ .koai-signin-device { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 16px; border-radius: 10px; background: var(--color-bg-grouped, #24272c); border: 1px solid var(--color-border, #2c3036); } .koai-signin-device-label { font-size: 12.5px; color: var(--color-fg-secondary, #9aa0a6); } .koai-signin-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 27px; font-weight: 600; letter-spacing: 0.14em; user-select: all; } .koai-signin-device-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .koai-signin-device-note { font-size: 11.5px; color: var(--color-fg-tertiary, #6f757c); text-align: center; } .koai-signin-foot { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--color-fg-tertiary, #6f757c); text-align: center; } /* Blazor shows this by inlining display:block on it when the runtime falls over. Hidden until then — without a rule of its own it renders as ordinary text at the bottom of every page. */ .koai-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 11px 16px; font-size: 13px; background: #7f1d1d; color: #fff; } .koai-error-ui .reload { color: #fff; text-decoration: underline; margin-left: 10px; }