. min-height would not do — it's a floor, so children stay free to grow and nothing can claim "the leftover viewport height". dvh so mobile browser chrome doesn't cost a strip. */ body { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; font-size: var(--app-text-sm); background: transparent; } body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--app-ground); } /* ─── Header ──────────────────────────────────────────────────────────────── Workspace's header is transparent over the ground with brand-blue glyphs — no solid bar. Text colour comes from --p-text-color, which flips to a near white in dark mode, so the same rules read correctly in both schemes. */ header { min-height: 64px; color: var(--p-text-color); padding: var(--app-space-8) var(--app-space-20); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; background: transparent; gap: var(--app-space-12); } .header-left { display: flex; align-items: center; gap: var(--app-space-12); } /* The wordmark is two-tone: the aqua half is fixed, the other half is `currentColor` so it reads as brand blue on the light ground and near-white on the dark one. That's why it's inlined here rather than an — currentColor can't cross into an 's isolated SVG document. (The shared- conversation page in main.py still uses the plain white logo.svg, which is correct: its header stays a solid dark bar.) */ .header-logo { height: 30px; width: auto; color: var(--p-text-color); flex-shrink: 0; } header h1 { font-size: var(--app-text-xl); font-weight: var(--app-font-semibold); letter-spacing: -0.01em; } header .tagline { color: var(--p-primary-color); font-size: var(--app-text-xs); font-weight: var(--app-font-medium); } .header-right { display: flex; align-items: center; gap: var(--app-space-8); position: relative; min-width: 0; } /* The tab strip is the only part of the header allowed to run out of room. A superadmin sees ten tabs plus the theme toggle, username, role badge, Password and Logout; at 1366x768 that overflowed by 9px and clipped Logout, and the hamburger fallback only starts at 768px. Letting the tabs scroll inside their own track keeps the account controls pinned and reachable at any width. Scrollbar hidden — it would sit under the tabs in the header. */ /* Groups everything the mobile hamburger owns. `contents` means the wrapper contributes no box of its own on desktop — the tab strip, theme toggle and account menu lay out exactly as if it weren't here. It only becomes a real element inside the mobile media query. */ .header-menu { display: contents; } /* Wraps rather than scrolls. The hidden scrollbar meant a superadmin's tabs simply ran off the edge with nothing to show it: at 1280px "Admin" was gone entirely and "Vessels" was cut mid-word, which reads as a missing feature rather than as content out of view. Wrapping costs a second row on wide accounts and loses nothing. */ .nav-tabs { display: flex; flex-wrap: wrap; gap: var(--app-space-4); min-width: 0; scrollbar-width: none; } .nav-tabs::-webkit-scrollbar { display: none; } /* Tabs read as quiet text buttons until selected — the Workspace "text secondary" treatment — so the header stays calm at eight-plus tabs. */ .nav-tab { padding: var(--app-space-8) var(--app-space-12); background: transparent; color: var(--p-text-color); border: 1px solid transparent; border-radius: var(--p-border-radius-md); cursor: pointer; font-size: var(--app-text-sm); font-weight: var(--app-font-medium); transition: background var(--app-duration-fast) var(--app-ease-standard), color var(--app-duration-fast) var(--app-ease-standard); white-space: nowrap; } /* Hover is a neutral wash, not the primary tint — the selected state owns the brand colour, so hover has to read as "reachable" without competing. 5% is tuned, not guessed: measured against the gradient behind the header it moves the background 15/255, where selected moves it 26. Weaker than selected but still legible. At 8% the two land 9 apart and are hard to tell apart; at 12% hover is louder than selected, which inverts the hierarchy. */ .nav-tab:hover { background: color-mix(in srgb, var(--p-text-color) 5%, transparent); } /* Selected: a tint rather than a solid aqua pill, at the stronger nav-specific opacity — enough on its own here, so no border. Weight does the rest. Text stays --p-text-color deliberately: aqua-on-tint measures ~2.5:1, which is unreadable, while brand blue holds ~7:1. */ .nav-tab.active { background: var(--app-nav-selected-background); color: var(--p-text-color); font-weight: var(--app-font-semibold); } /* ─── Account menu ────────────────────────────────────────────────────────── The username is the trigger; Password and Logout live behind it. With eleven tabs for a superadmin those two buttons overflowed the header at 1366px, and the hamburger fallback only starts at 768px. */ .user-menu-wrap { position: relative; flex-shrink: 0; } .user-info { display: flex; align-items: center; gap: var(--app-space-8); color: var(--p-text-color); font-size: var(--app-text-sm); /* It is a button now, so it needs the affordance the plain div never had. */ background: transparent; border: 1px solid transparent; border-radius: var(--p-border-radius-md); padding: var(--app-space-4) var(--app-space-8); cursor: pointer; white-space: nowrap; transition: background var(--app-duration-fast) var(--app-ease-standard); } .user-info:hover, .user-info[aria-expanded='true'] { background: color-mix(in srgb, var(--p-text-color) 5%, transparent); } .user-menu-caret { font-size: var(--app-text-2xs); color: var(--p-text-muted-color); line-height: var(--app-leading-none); } .user-menu { position: absolute; top: calc(100% + var(--app-space-4)); right: 0; min-width: 180px; z-index: 200; display: flex; flex-direction: column; gap: var(--app-space-2); padding: var(--app-space-4); background: var(--p-overlay-background); border: 1px solid var(--p-overlay-border-color); border-radius: var(--p-border-radius-lg); box-shadow: var(--p-shadow-lg); } .user-menu button { appearance: none; background: transparent; border: none; border-radius: var(--p-border-radius-md); padding: var(--app-space-8) var(--app-space-12); text-align: left; color: var(--p-text-color); font-size: var(--app-text-sm); cursor: pointer; white-space: nowrap; } .user-menu button:hover, .user-menu button:focus-visible { background: var(--p-selection-background); outline: none; } .user-role { padding: var(--app-space-2) var(--app-space-8); background: var(--p-primary-color); color: var(--p-primary-contrast-color); border-radius: var(--p-border-radius-sm); font-size: var(--app-text-2xs); font-weight: var(--app-font-semibold); text-transform: uppercase; letter-spacing: 0.04em; } /* Icon buttons in the header carry no outline — they sit on the ground, not on a surface, and a box around each one made the bar read as a toolbar. Hover supplies the affordance. The border stays as `transparent` rather than `none` so their box matches the account trigger beside them. (.btn-logout dropped from this group: the account menu replaced it and the class no longer appears in the markup.) */ .btn-theme, .btn-sidebar-toggle, .btn-nav-toggle { padding: var(--app-space-8) var(--app-space-12); background: transparent; color: var(--p-text-color); border: 1px solid transparent; border-radius: var(--p-border-radius-md); cursor: pointer; font-size: var(--app-text-sm); line-height: 1; white-space: nowrap; transition: background var(--app-duration-fast) var(--app-ease-standard); } .btn-theme:hover, .btn-sidebar-toggle:hover, .btn-nav-toggle:hover { background: color-mix(in srgb, var(--p-text-color) 5%, transparent); } .btn-sidebar-toggle, .btn-nav-toggle { display: none; } /* Full-bleed, like Workspace's shell — the ground reads as a frame around the content rather than a field beside it. A flex column so the active screen can claim the leftover viewport height; min-height:0 lets it shrink below its content so inner panes scroll instead of pushing the page taller. */ main { flex: 1; width: 100%; padding: 0 var(--app-space-16) var(--app-space-16); display: flex; flex-direction: column; min-height: 0; /* Since no longer scrolls, this is the scroll container for the content-sized screens (admin, dashboard). Chat sizes itself to fit, so it never triggers this. */ overflow-y: auto; } /* ─── Surfaces ────────────────────────────────────────────────────────────── The floating card: 16px radius, shadow-md in light, and in dark a visible border instead (shadow tokens resolve to `none` there). */ /* The card is .chat-layout, not its children: the sidebar and the chat column are siblings inside it, and they have to read as one surface split by a divider rather than two floating panels. overflow:hidden is what lets the sidebar's square corners sit inside the 16px radius. */ .chat-layout, .admin-container, .login-container { background: var(--p-content-background); border-radius: var(--app-radius-card); box-shadow: var(--p-shadow-md); } /* The chat card is deliberately borderless — it fills the viewport, so its own size is the edge and a rule around it just adds noise. The other two are content-sized boxes floating on the ground and still need one, which is also what carries their elevation in dark mode where shadows resolve to none. */ .admin-container, .login-container { border: 1px solid var(--p-content-border-color); } /* width:100% is load-bearing now that

is a flex column: the `auto` side margins that centre this also switch off the default cross-axis stretch, so without an explicit width the card shrink-wraps its content (311px) instead of filling to its 400px cap. */ .login-container { width: 100%; max-width: 400px; margin: var(--app-space-48) auto; padding: var(--app-space-32); flex-shrink: 0; } .login-container h2 { margin-bottom: var(--app-space-24); color: var(--p-text-color); font-size: var(--app-text-2xl); font-weight: var(--app-font-semibold); } /* Transparent — it's a column inside the .chat-layout card, not a card itself. The card went full-bleed, which is right for the card and wrong for prose: at 1293px the transcript hit 102 characters per line and it scales with the monitor. This gutter centres a fixed-width reading column inside the card — the scrollbar stays on the card edge, only the content is constrained. */ .chat-container { --chat-gutter: max(var(--app-space-24), calc((100% - 880px) / 2)); background: transparent; display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; } .admin-container { padding: var(--app-space-24); } /* ─── Forms ───────────────────────────────────────────────────────────────── 1px borders (Aura) rather than the old 2px, with the focus ring carrying the emphasis instead of a thicker edge. */ .form-group { margin-bottom: var(--app-space-16); } .form-group label { display: block; margin-bottom: var(--app-space-8); font-weight: var(--app-font-medium); font-size: var(--app-text-sm); color: var(--p-text-color); } .form-input, .input-area textarea, .filter-row select, .vessel-typeahead input { width: 100%; padding: var(--app-space-8) var(--app-space-12); background: var(--p-form-field-background); color: var(--p-text-color); border: 1px solid var(--p-form-field-border-color); border-radius: var(--p-border-radius-md); font-size: var(--app-text-sm); outline: none; transition: border-color var(--app-duration-fast) var(--app-ease-standard), box-shadow var(--app-duration-fast) var(--app-ease-standard); } .form-input:hover, .input-area textarea:hover { border-color: var(--p-form-field-hover-border-color); } .form-input:focus, .input-area textarea:focus, .filter-row select:focus, .vessel-typeahead input:focus { border-color: var(--p-primary-color); box-shadow: 0 0 0 3px var(--p-selection-background); } .form-input::placeholder, .input-area textarea::placeholder { color: var(--p-text-muted-color); } /* ─── Buttons ─────────────────────────────────────────────────────────────── Workspace's convention: solid primary = the CTA in a context; solid secondary = the dismissive partner in a dialog footer; danger = destructive. Aura's radius throughout — the old 3.75rem pills are what read least like Workspace. Primary is aqua, not brand blue: blue is for text and secondary actions. */ .btn-primary, .btn-add, .btn-new-chat, .btn-respond, .btn-reopen { padding: var(--app-space-8) var(--app-space-16); background: var(--p-primary-color); color: var(--p-primary-contrast-color); border: 1px solid var(--p-primary-color); border-radius: var(--p-border-radius-md); font-size: var(--app-text-sm); font-weight: var(--app-font-medium); cursor: pointer; transition: background var(--app-duration-fast) var(--app-ease-standard), border-color var(--app-duration-fast) var(--app-ease-standard); } .btn-primary:hover, .btn-add:hover, .btn-new-chat:hover, .btn-respond:hover, .btn-reopen:hover { background: var(--p-primary-hover-color); border-color: var(--p-primary-hover-color); } /* The auth card's submit is the one deliberately full-width button: it's the only action on the card, so stretching reads as "end of the form". Scoped to .login-container (login + invite screens) rather than living on .btn-primary itself — the same class is the CTA in fifteen modal footers, where stretching is wrong and where a different font-size made it a different height from the Cancel button beside it. */ .login-container .btn-primary { width: 100%; padding: var(--app-space-8) var(--app-space-16); /* Same size as a dialog footer action — this is the same kind of control: the terminal decision on a card, not a toolbar button. */ font-size: var(--app-text-base); } .btn-primary:disabled, .btn-add:disabled, .btn-new-chat:disabled { background: var(--p-surface-400); border-color: var(--p-surface-400); cursor: not-allowed; } /* Solid secondary — Cancel in a dialog footer. Brand blue, per the button conventions table. */ .btn-secondary, .btn-edit, .btn-close-fb { padding: var(--app-space-8) var(--app-space-16); background: var(--p-dualog-blue-500); color: var(--p-content-background); border: 1px solid var(--p-dualog-blue-500); border-radius: var(--p-border-radius-md); font-size: var(--app-text-sm); font-weight: var(--app-font-medium); cursor: pointer; transition: opacity var(--app-duration-fast) var(--app-ease-standard); } /* No flex:1 — footer buttons hug their content. See .modal-actions. */ .btn-secondary:hover, .btn-edit:hover, .btn-close-fb:hover { opacity: 0.85; } .btn-delete { background: var(--p-danger-color); color: var(--p-danger-contrast-color); border: 1px solid var(--p-danger-color); } .btn-delete:hover { background: var(--p-danger-hover-color); border-color: var(--p-danger-hover-color); } .btn-action { padding: var(--app-space-4) var(--app-space-8); border: none; border-radius: var(--p-border-radius-sm); cursor: pointer; font-size: var(--app-text-xs); font-weight: var(--app-font-medium); margin-right: var(--app-space-4); } /* Outlined secondary — available but dismissive. */ .btn-feedback { padding: var(--app-space-8) var(--app-space-12); background: transparent; color: var(--p-primary-color); border: 1px solid var(--p-primary-color); border-radius: var(--p-border-radius-md); cursor: pointer; font-size: var(--app-text-sm); font-weight: var(--app-font-medium); transition: background var(--app-duration-fast) var(--app-ease-standard); white-space: nowrap; } .btn-feedback:hover { background: var(--p-selection-background); } .btn-sm { padding: var(--app-space-4) var(--app-space-12); font-size: var(--app-text-xs); } /* Carries the same 1px border as the real buttons even though it's an anchor — without it this sits 2px shorter than the Close button beside it in the file viewer's footer. */ .download-btn { display: inline-block; padding: var(--app-space-8) var(--app-space-16); background: var(--p-primary-color); color: var(--p-primary-contrast-color); text-decoration: none; border: 1px solid var(--p-primary-color); border-radius: var(--p-border-radius-md); font-size: var(--app-text-sm); font-weight: var(--app-font-medium); transition: background var(--app-duration-fast) var(--app-ease-standard), border-color var(--app-duration-fast) var(--app-ease-standard); } .download-btn:hover { background: var(--p-primary-hover-color); border-color: var(--p-primary-hover-color); } .error-msg { color: var(--p-danger-color); font-size: var(--app-text-sm); margin-top: var(--app-space-16); } /* ─── Chat ────────────────────────────────────────────────────────────────── Sent bubbles take Workspace's periwinkle (dualogPurple.subtle) rather than a solid brand-blue fill, so the transcript stays legible as dark-on-light in both schemes instead of flipping to white-on-blue. */ /* min-height:0 is what actually makes this scroll. It has had overflow-y:auto since before the redesign, but a flex item won't shrink below its content without this, so the transcript used to push the whole page taller instead of scrolling in place. */ .messages { flex: 1; min-height: 0; padding: var(--app-space-24) var(--chat-gutter); overflow-y: auto; display: flex; flex-direction: column; gap: var(--app-space-16); } /* Everything below the transcript keeps its natural height — only the message list absorbs the slack. */ .saved-queries, .shared-queries, .examples, .input-area { flex-shrink: 0; } .message { /* Bounded by measure, not just by percentage: 80% of the reading column is still ~94 characters, past the ~75-90 where lines get hard to track back from. `ch` keeps that true if the type scale ever moves. */ max-width: min(80%, 72ch); padding: var(--app-space-12) var(--app-space-16); border-radius: var(--p-border-radius-xl); line-height: var(--app-leading-relaxed); font-size: var(--app-text-sm); } .message.user { background: var(--p-dualog-purple-subtle); color: var(--p-text-color); align-self: flex-end; border-bottom-right-radius: var(--p-border-radius-sm); position: relative; } .message.assistant { background: var(--p-surface-200); color: var(--p-text-color); align-self: flex-start; border-bottom-left-radius: var(--p-border-radius-sm); position: relative; } body.dark .message.assistant { background: var(--p-surface-800); } .message pre { background: var(--p-content-background); border: 1px solid var(--p-content-border-color); padding: var(--app-space-12); border-radius: var(--p-border-radius-md); overflow-x: auto; margin: var(--app-space-8) 0; font-size: var(--app-text-xs); } .message.loading { color: var(--p-text-muted-color); font-style: italic; } .generated-file { display: flex; flex-direction: column; align-items: flex-start; gap: var(--app-space-8); } .generated-file .file-icon { font-size: var(--app-text-3xl); } .generated-file .file-name { font-weight: var(--app-font-medium); color: var(--p-text-color); } /* Rating buttons */ .rating-bar { display: flex; gap: var(--app-space-4); margin-top: var(--app-space-8); padding-top: var(--app-space-8); border-top: 1px solid var(--p-content-border-color); } .rating-btn { background: none; border: 1px solid var(--p-content-border-color); border-radius: var(--p-border-radius-sm); cursor: pointer; padding: var(--app-space-2) var(--app-space-8); font-size: var(--app-text-xs); color: var(--p-text-muted-color); transition: all var(--app-duration-fast) var(--app-ease-standard); } .rating-btn:hover { color: var(--p-text-color); border-color: var(--p-text-muted-color); } .rating-btn.selected-up { color: var(--p-success-color); border-color: var(--p-success-color); } .rating-btn.selected-down { color: var(--p-danger-color); border-color: var(--p-danger-color); } /* ─── Source / document references ──────────────────────────────────────── */ .document-list { background: var(--p-content-background); border: 1px solid var(--p-content-border-color); border-radius: var(--p-border-radius-lg); padding: var(--app-space-12); margin-top: var(--app-space-8); } .document-list-header { font-weight: var(--app-font-semibold); color: var(--p-text-color); margin-bottom: var(--app-space-8); font-size: var(--app-text-sm); cursor: pointer; list-style: none; } .document-list-header::-webkit-details-marker { display: none; } .document-list-header::before { content: '▶ '; font-size: var(--app-text-2xs); } details[open] > .document-list-header::before { content: '▼ '; } .document-item { display: flex; align-items: flex-start; gap: var(--app-space-8); padding: var(--app-space-4) 0; border-bottom: 1px solid var(--p-content-border-color); } .document-item:last-child { border-bottom: none; } .doc-icon { font-size: var(--app-text-base); flex-shrink: 0; line-height: var(--app-leading-normal); } /* subject + meta stacked; min-width:0 lets the subject wrap inside the flex row */ .doc-body { display: flex; flex-direction: column; gap: var(--app-space-2); min-width: 0; flex: 1; } .doc-link { color: var(--app-link-color); text-decoration: none; font-weight: var(--app-font-medium); white-space: normal; overflow-wrap: anywhere; } .doc-link:hover { text-decoration: underline; color: var(--app-link-hover-color); } /* date · sender line under each source; wraps instead of truncating */ .doc-meta { color: var(--p-text-muted-color); font-size: var(--app-text-xs); white-space: normal; overflow-wrap: anywhere; } .doc-path { color: var(--p-text-muted-color); font-size: var(--app-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Markdown tables in chat answers */ .md-table-wrap { overflow-x: auto; margin: var(--app-space-8) 0; } .md-table { border-collapse: collapse; font-size: var(--app-text-xs); } .md-table th, .md-table td { border: 1px solid var(--p-content-border-color); padding: var(--app-space-4) var(--app-space-8); text-align: left; white-space: nowrap; } .md-table th { background: var(--p-surface-200); color: var(--p-text-color); font-weight: var(--app-font-semibold); } .md-table tr:nth-child(even) td { background: var(--p-surface-100); } /* surface.700, not surface.800 — the assistant bubble these tables sit inside is already surface.800, so a matching header row would vanish into it and the table would lose its header entirely in dark mode. */ body.dark .md-table th { background: var(--p-surface-700); } body.dark .md-table tr:nth-child(even) td { background: var(--p-surface-950); } /* ─── Composer ──────────────────────────────────────────────────────────── */ .input-area { padding: var(--app-space-16) var(--chat-gutter); background: var(--p-content-background); border-top: 1px solid var(--p-content-border-color); display: flex; gap: var(--app-space-8); align-items: flex-end; } .input-area textarea { flex: 1; font-family: inherit; resize: none; overflow: hidden; min-height: 40px; max-height: 10rem; line-height: var(--app-leading-normal); } .input-btn { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--p-border-radius-md); cursor: pointer; font-size: var(--app-text-base); flex-shrink: 0; transition: all var(--app-duration-fast) var(--app-ease-standard); border: 1px solid transparent; } .input-btn.primary { background: var(--p-primary-color); border-color: var(--p-primary-color); color: var(--p-primary-contrast-color); } .input-btn.primary:hover { background: var(--p-primary-hover-color); border-color: var(--p-primary-hover-color); } .input-btn.primary:disabled { background: var(--p-surface-400); border-color: var(--p-surface-400); cursor: not-allowed; } .input-btn.ghost { background: transparent; color: var(--p-text-muted-color); border-color: var(--p-content-border-color); } .input-btn.ghost:hover { color: var(--p-primary-color); border-color: var(--p-primary-color); background: var(--p-selection-background); } /* ─── Example prompts ───────────────────────────────────────────────────── */ .examples { padding: var(--app-space-8) var(--chat-gutter) var(--app-space-12); } .examples h3 { font-size: var(--app-text-2xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--app-font-semibold); color: var(--p-text-muted-color); margin-bottom: var(--app-space-8); } .examples ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--app-space-8); } .examples li { background: var(--p-content-background); border: 1px solid var(--p-content-border-color); padding: var(--app-space-4) var(--app-space-12); border-radius: var(--app-radius-pill); font-size: var(--app-text-xs); color: var(--p-text-muted-color); cursor: pointer; transition: all var(--app-duration-fast) var(--app-ease-standard); } .examples li:hover { border-color: var(--p-primary-color); color: var(--p-primary-color); background: var(--p-selection-background); } .examples-more { margin-top: var(--app-space-8); font-size: var(--app-text-xs); } .examples-more a { color: var(--app-link-color); text-decoration: none; } .examples-more a:hover { text-decoration: underline; } /* ─── Admin ─────────────────────────────────────────────────────────────── */ .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--app-space-24); padding-bottom: var(--app-space-16); border-bottom: 1px solid var(--p-content-border-color); } .admin-header h2 { color: var(--p-text-color); font-size: var(--app-text-xl); font-weight: var(--app-font-semibold); } .users-table { width: 100%; border-collapse: collapse; font-size: var(--app-text-sm); } .users-table th, .users-table td { padding: var(--app-space-12) var(--app-space-16); text-align: left; border-bottom: 1px solid var(--p-content-border-color); } .users-table th { background: var(--p-surface-200); font-weight: var(--app-font-semibold); color: var(--p-text-muted-color); font-size: var(--app-text-xs); text-transform: uppercase; letter-spacing: 0.04em; } body.dark .users-table th { background: var(--p-surface-800); } .users-table tr:hover { background: var(--p-selection-background); } .role-badge { padding: var(--app-space-2) var(--app-space-8); border-radius: var(--p-border-radius-sm); font-size: var(--app-text-2xs); font-weight: var(--app-font-semibold); text-transform: uppercase; letter-spacing: 0.04em; } .role-admin { background: var(--p-dualog-blue-500); color: var(--p-content-background); } .role-manager { background: var(--p-primary-color); color: var(--p-primary-contrast-color); } .role-user { background: var(--p-surface-400); color: var(--p-surface-950); } .permissions-list { display: flex; flex-wrap: wrap; gap: var(--app-space-4); } .permission-tag { background: var(--p-surface-200); color: var(--p-text-color); padding: var(--app-space-2) var(--app-space-8); border-radius: var(--p-border-radius-sm); font-size: var(--app-text-2xs); font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; display: flex; align-items: center; gap: var(--app-space-4); } body.dark .permission-tag { background: var(--p-surface-800); } .permission-tag .remove, .vessel-tag .remove { cursor: pointer; color: var(--p-danger-color); font-weight: var(--app-font-bold); } .vessel-tag { background: var(--p-dualog-purple-subtle); color: var(--p-text-color); padding: var(--app-space-2) var(--app-space-8); border-radius: var(--p-border-radius-sm); font-size: var(--app-text-2xs); display: flex; align-items: center; gap: var(--app-space-4); } /* fixed, not absolute: it is positioned from getBoundingClientRect (viewport coords) and no longer scrolls, so absolute + window.scrollY would be right only by coincidence. */ .vessel-typeahead { position: fixed; z-index: 1000; background: var(--p-overlay-background); border: 1px solid var(--p-overlay-border-color); border-radius: var(--p-border-radius-lg); box-shadow: var(--p-shadow-lg); width: 260px; max-height: 280px; display: flex; flex-direction: column; overflow: hidden; } .vessel-typeahead input { border: none; border-bottom: 1px solid var(--p-content-border-color); border-radius: 0; padding: var(--app-space-8); } .vessel-typeahead input:focus { box-shadow: none; border-color: var(--p-content-border-color); border-bottom-color: var(--p-primary-color); } .vessel-typeahead .vt-results { overflow-y: auto; max-height: 220px; } .vessel-typeahead .vt-item { padding: var(--app-space-8) var(--app-space-12); cursor: pointer; font-size: var(--app-text-sm); border-radius: var(--p-border-radius-md); margin: var(--app-space-2) var(--app-space-4); } .vessel-typeahead .vt-item:hover { background: var(--p-selection-background); color: var(--p-text-color); } .vessel-typeahead .vt-empty { padding: var(--app-space-8); color: var(--p-text-muted-color); font-size: var(--app-text-sm); text-align: center; } /* ─── Modals ────────────────────────────────────────────────────────────── */ .modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 1000; } .modal.show { display: flex; } .modal-content { background: var(--p-overlay-background); color: var(--p-text-color); border: 1px solid var(--p-overlay-border-color); padding: var(--app-space-24); border-radius: var(--app-radius-card); box-shadow: var(--p-shadow-xl); max-width: 450px; width: 90%; } .modal-content h3 { margin-bottom: var(--app-space-24); color: var(--p-text-color); font-size: var(--app-text-xl); font-weight: var(--app-font-semibold); } /* Dialog footer. Buttons hug their content and sit bottom-right, dismissive first and affirmative last, so the action the dialog is for is the closest thing to the user's cursor. They are not a segmented control — stretching them to fill the dialog gives a 200px "Close" that reads as important as the CTA beside it. Every control here inherits the same font-size, padding and 1px border, so they come out the same height without anyone setting one. */ .modal-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--app-space-8); margin-top: var(--app-space-24); } /* `a` as well as `button` — the file viewer's download action is an anchor. */ .modal-actions > button, .modal-actions > a { flex: 0 0 auto; width: auto; /* A step up from the app's default `sm` — dialog actions are the terminal decision on a modal surface and carry more weight than a toolbar button. */ font-size: var(--app-text-base); /* Without this a two-word label ("Send & Close") wraps inside its own box and comes out taller than its neighbours, which is the height inconsistency wearing a different hat. */ white-space: nowrap; } /* ─── Email viewer ──────────────────────────────────────────────────────── */ .email-link { color: var(--app-link-color); text-decoration: underline; cursor: pointer; font-weight: var(--app-font-medium); } .email-link:hover, .message.assistant .email-link:hover { color: var(--app-link-hover-color); } .message.assistant .email-link { color: var(--app-link-color); } .email-modal .modal-content { max-width: 800px; max-height: 90vh; display: flex; flex-direction: column; } /* The source popup is where a user decides whether to trust an answer, so the header has to be scannable: subject first, then who and when, with the labels quiet enough to disappear. */ .email-header { border-bottom: 1px solid var(--p-content-border-color); padding: 0 0 var(--app-space-16) var(--app-space-12); margin-bottom: var(--app-space-16); border-left: 3px solid var(--p-primary-color); } .email-header h3 { margin-bottom: var(--app-space-8); color: var(--p-text-color); font-size: var(--app-text-lg); font-weight: var(--app-font-semibold); line-height: var(--app-leading-tight); } .email-meta { display: flex; flex-direction: column; gap: var(--app-space-2); font-size: var(--app-text-sm); } .email-meta-row { display: flex; align-items: baseline; gap: var(--app-space-12); } .email-meta-row.hidden { display: none; } .email-meta-label { flex: 0 0 3.2rem; color: var(--p-text-muted-color); font-size: var(--app-text-2xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--app-font-semibold); } .email-meta-value { color: var(--p-text-color); min-width: 0; overflow-wrap: anywhere; } .email-addr { color: var(--p-text-color); } .email-folder-chip { display: inline-block; background: var(--p-selection-background); color: var(--p-primary-color); border-radius: var(--app-radius-pill); padding: var(--app-space-2) var(--app-space-8); font-size: var(--app-text-xs); font-weight: var(--app-font-medium); } .email-body { flex: 1; overflow-y: auto; padding: var(--app-space-16); background: var(--p-surface-200); border: 1px solid var(--p-content-border-color); border-radius: var(--p-border-radius-lg); white-space: pre-wrap; font-size: var(--app-text-sm); line-height: var(--app-leading-relaxed); max-height: 50vh; } body.dark .email-body { background: var(--p-surface-950); } /* Replied-to text is context, not the message. Dimming it makes the new content in a long chain obvious at a glance. */ .email-quote { display: block; color: var(--p-text-muted-color); border-left: 2px solid var(--p-content-border-color); padding-left: var(--app-space-12); margin: var(--app-space-2) 0 var(--app-space-8) var(--app-space-2); } .email-sep { display: block; color: var(--p-text-muted-color); font-size: var(--app-text-xs); margin-top: var(--app-space-8); } .email-empty { color: var(--p-text-muted-color); font-style: italic; } .email-attach-block { margin-top: var(--app-space-16); padding-top: var(--app-space-12); border-top: 1px dashed var(--p-content-border-color); } .email-attach-title { font-size: var(--app-text-2xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--app-font-semibold); color: var(--p-primary-color); margin-bottom: var(--app-space-8); } .email-loading { text-align: center; padding: var(--app-space-32); color: var(--p-text-muted-color); } /* ─── Thread view ───────────────────────────────────────────────────────── */ .modal-large .modal-content { max-width: 900px; } .thread-view { display: flex; flex-direction: column; gap: var(--app-space-16); max-height: 60vh; overflow-y: auto; padding: var(--app-space-16); } .thread-email { border-left: 3px solid var(--p-dualog-blue-300); padding: var(--app-space-16); margin-left: var(--app-space-16); background: var(--p-surface-200); border-radius: 0 var(--p-border-radius-lg) var(--p-border-radius-lg) 0; } body.dark .thread-email { background: var(--p-surface-950); } .thread-email.root { margin-left: 0; border-left-color: var(--p-primary-color); } .thread-email-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--app-space-8); } .thread-email-from { font-weight: var(--app-font-semibold); color: var(--p-text-color); } .thread-email-date, .thread-email-subject, .thread-count { font-size: var(--app-text-xs); color: var(--p-text-muted-color); } .thread-email-subject { font-size: var(--app-text-sm); margin-bottom: var(--app-space-8); } .thread-count { font-size: var(--app-text-sm); margin-bottom: var(--app-space-16); } .thread-email-body { font-size: var(--app-text-sm); line-height: var(--app-leading-relaxed); white-space: pre-wrap; color: var(--p-text-color); } /* ─── File viewer ───────────────────────────────────────────────────────── */ .file-type-badge { display: inline-block; padding: var(--app-space-2) var(--app-space-8); border-radius: var(--p-border-radius-sm); font-size: var(--app-text-2xs); font-weight: var(--app-font-semibold); text-transform: uppercase; letter-spacing: 0.04em; /* allow-hex: vendor file-format colours (Adobe / Microsoft), not brand */ color: #ffffff; } /* allow-hex: canonical file-format brand colours */ .file-type-pdf { background: #e74c3c; } .file-type-docx { background: #2b5797; } .file-type-xlsx { background: #217346; } .file-type-pptx { background: #d04423; } .file-type-txt, .file-type-md { background: var(--p-surface-600); } .file-link { color: var(--app-link-color); text-decoration: underline; cursor: pointer; font-weight: var(--app-font-medium); } .file-link:hover { color: var(--app-link-hover-color); } /* ─── Badges ────────────────────────────────────────────────────────────── */ .nav-tab-wrapper { position: relative; display: inline-flex; } .notification-badge, .alert-badge { position: absolute; top: -4px; right: -4px; color: var(--p-danger-contrast-color); font-size: var(--app-text-2xs); font-weight: var(--app-font-bold); min-width: 16px; height: 16px; border-radius: var(--app-radius-pill); display: flex; align-items: center; justify-content: center; padding: 0 var(--app-space-4); } .notification-badge { background: var(--p-danger-color); } .alert-badge { background: var(--p-warning-color); } /* ─── Dashboard ─────────────────────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--app-space-16); margin-bottom: var(--app-space-24); } .stat-card, .usage-stat, .chart-container, .feedback-item { background: var(--p-content-background); border: 1px solid var(--p-content-border-color); border-radius: var(--app-radius-card); box-shadow: var(--p-shadow-sm); } .stat-card { padding: var(--app-space-20); text-align: center; } .stat-card .stat-value { font-size: var(--app-text-3xl); font-weight: var(--app-font-bold); color: var(--p-primary-color); line-height: var(--app-leading-tight); } .stat-card .stat-label, .usage-stat .stat-label { font-size: var(--app-text-xs); color: var(--p-text-muted-color); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--app-space-4); } .charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--app-space-24); margin-bottom: var(--app-space-24); } @media (max-width: 768px) { .charts-row { grid-template-columns: 1fr; } } .chart-container { padding: var(--app-space-20); } /* Chart.js sizes a responsive canvas from its parent, so the parent has to own the height. Without this the charts keep `maintainAspectRatio`, which ties height to container width — fine while

was capped at 1100px, but the card is full-bleed now, so on a 2560px display each column is ~1250px wide and the doughnut would render ~1250px tall. Fixed height instead; Workspace's own wrapper does the same thing for the same reason. */ .chart-canvas { position: relative; height: 280px; } .chart-container h3 { font-size: var(--app-text-sm); font-weight: var(--app-font-semibold); color: var(--p-text-color); margin-bottom: var(--app-space-16); } .dashboard-section { margin-bottom: var(--app-space-24); } .dashboard-section h3 { color: var(--p-text-color); margin-bottom: var(--app-space-16); font-size: var(--app-text-base); font-weight: var(--app-font-semibold); } .filter-row { display: flex; gap: var(--app-space-12); align-items: center; margin-bottom: var(--app-space-16); } .filter-row select { width: auto; } .usage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--app-space-16); margin-bottom: var(--app-space-24); } .usage-stat { padding: var(--app-space-16); text-align: center; } .usage-stat .stat-value { font-size: var(--app-text-2xl); font-weight: var(--app-font-bold); color: var(--p-primary-color); } /* ─── Feedback ──────────────────────────────────────────────────────────── */ .feedback-tabs { display: flex; gap: var(--app-space-8); margin-bottom: var(--app-space-16); } .feedback-tab { padding: var(--app-space-8) var(--app-space-16); background: var(--p-content-background); color: var(--p-text-color); border: 1px solid var(--p-content-border-color); border-radius: var(--p-border-radius-md); cursor: pointer; font-size: var(--app-text-sm); transition: all var(--app-duration-fast) var(--app-ease-standard); } .feedback-tab.active { background: var(--p-primary-color); color: var(--p-primary-contrast-color); border-color: var(--p-primary-color); } .feedback-item { padding: var(--app-space-16); margin-bottom: var(--app-space-12); } .feedback-meta { display: flex; align-items: center; gap: var(--app-space-8); margin-bottom: var(--app-space-8); font-size: var(--app-text-xs); color: var(--p-text-muted-color); } .feedback-category { padding: var(--app-space-2) var(--app-space-8); border-radius: var(--p-border-radius-sm); font-size: var(--app-text-2xs); font-weight: var(--app-font-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--p-primary-contrast-color); } .category-bug { background: var(--p-danger-color); } .category-feature { background: var(--p-info-color); } .category-comment { background: var(--p-success-color); } .category-general { background: var(--p-surface-500); } .feedback-message { font-size: var(--app-text-sm); line-height: var(--app-leading-relaxed); margin-bottom: var(--app-space-8); } .feedback-response { background: var(--p-surface-200); border-left: 3px solid var(--p-primary-color); padding: var(--app-space-12); margin-top: var(--app-space-8); border-radius: 0 var(--p-border-radius-md) var(--p-border-radius-md) 0; font-size: var(--app-text-sm); } body.dark .feedback-response { background: var(--p-surface-950); } .feedback-actions { display: flex; gap: var(--app-space-8); margin-top: var(--app-space-12); } .feedback-actions button { padding: var(--app-space-4) var(--app-space-12); border: none; border-radius: var(--p-border-radius-md); cursor: pointer; font-size: var(--app-text-xs); font-weight: var(--app-font-medium); } /* ─── Sidebar ───────────────────────────────────────────────────────────── */ /* Claims the leftover viewport height rather than sizing to its content. min-height:0 is load-bearing: a flex item defaults to min-height:auto, which refuses to shrink below its content, so without it the card would grow past the viewport and overflow:hidden would clip the transcript out of reach. */ .chat-layout { display: flex; gap: 0; flex: 1; min-height: 0; overflow: hidden; } /* Width is a variable so the drag handle can set it; 380px is the default and what you get with no stored preference. Clamps live in the JS alongside the drag, so there is one source of truth for the bounds. */ .sidebar { width: var(--sidebar-width, 380px); background: transparent; border-right: 1px solid var(--p-content-border-color); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; } /* Straddles the divider: 5px of grab area, pulled back 2px each side so it occupies 1px of layout and the sidebar's border still reads as the line. */ .sidebar-resizer { flex: 0 0 5px; margin: 0 -2px; position: relative; z-index: 2; cursor: col-resize; background: transparent; touch-action: none; } .sidebar-resizer::after { content: ''; position: absolute; inset: 0 2px; background: var(--p-primary-color); opacity: 0; transition: opacity var(--app-duration-fast) var(--app-ease-standard); } .sidebar-resizer:hover::after, .sidebar-resizer:focus-visible::after, .sidebar-resizer.dragging::after { opacity: 1; } .sidebar-resizer:focus-visible { outline: none; } /* Kills text selection and the I-beam cursor while dragging across the app. */ body.resizing-sidebar { user-select: none; cursor: col-resize; } .sidebar-header { padding: var(--app-space-16); border-bottom: 1px solid var(--p-content-border-color); display: flex; justify-content: space-between; align-items: center; gap: var(--app-space-8); } .sidebar-header h3 { font-size: var(--app-text-xs); color: var(--p-text-muted-color); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--app-font-semibold); } .btn-new-chat { font-size: var(--app-text-xs); padding: var(--app-space-4) var(--app-space-12); } .sidebar-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--app-space-8); } .sidebar-group-label { font-size: var(--app-text-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--p-text-muted-color); padding: var(--app-space-8) var(--app-space-8) var(--app-space-4); font-weight: var(--app-font-semibold); display: flex; align-items: center; gap: var(--app-space-4); cursor: pointer; user-select: none; border-radius: var(--p-border-radius-md); } .sidebar-group-label:hover { color: var(--p-text-color); } .sidebar-caret { font-size: var(--app-text-2xs); line-height: var(--app-leading-none); width: 0.6rem; } /* The count is why collapsing is safe: a folded group still says how much is in it. */ .sidebar-group-count { margin-left: auto; background: var(--p-surface-200); color: var(--p-text-muted-color); border-radius: var(--app-radius-pill); padding: 0 var(--app-space-8); font-size: var(--app-text-2xs); } body.dark .sidebar-group-count { background: var(--p-surface-800); } .sidebar-group-items.hidden { display: none; } .sidebar-item { padding: var(--app-space-8) var(--app-space-12); border-radius: var(--p-border-radius-md); cursor: pointer; font-size: var(--app-text-sm); color: var(--p-text-color); display: flex; justify-content: space-between; align-items: center; gap: var(--app-space-8); white-space: nowrap; overflow: hidden; } .sidebar-item:hover { background: var(--p-selection-background); } /* Selected rows use the shared selection tint rather than a solid fill — the Workspace pattern, so the label keeps its normal colour. */ .sidebar-item.active { background: var(--p-selection-background); color: var(--p-text-color); font-weight: var(--app-font-medium); } .sidebar-item-title { overflow: hidden; text-overflow: ellipsis; flex: 1; } .sidebar-item .sidebar-delete { display: none; background: none; border: none; color: var(--p-danger-color); cursor: pointer; font-size: var(--app-text-sm); padding: 0; flex-shrink: 0; } .sidebar-item:hover .sidebar-delete, .sidebar-item.active .sidebar-delete { display: inline; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 998; } .sidebar-backdrop.show { display: block; } .btn-load-more { width: calc(100% - var(--app-space-16)); margin: var(--app-space-8); padding: var(--app-space-8); background: transparent; color: var(--p-primary-color); border: 1px dashed var(--p-content-border-color); border-radius: var(--p-border-radius-md); cursor: pointer; font-size: var(--app-text-xs); } .btn-load-more:hover { background: var(--p-selection-background); } /* ─── Saved / shared prompt chips ───────────────────────────────────────── */ .saved-queries, .shared-queries { display: flex; flex-wrap: wrap; gap: var(--app-space-8); padding: var(--app-space-8) var(--chat-gutter) 0; } .saved-chip { background: var(--p-dualog-blue-500); color: var(--p-content-background); padding: var(--app-space-4) var(--app-space-12); border-radius: var(--app-radius-pill); font-size: var(--app-text-xs); cursor: pointer; display: flex; align-items: center; gap: var(--app-space-4); transition: opacity var(--app-duration-fast) var(--app-ease-standard); max-width: 220px; position: relative; } .saved-chip:hover { opacity: 0.85; } .saved-chip.shared { background: var(--p-primary-color); color: var(--p-primary-contrast-color); } .saved-chip .chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .saved-chip:hover .chip-tooltip { display: block; } .chip-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--p-surface-900); /* allow-hex: white on a permanently dark tooltip, theme-agnostic */ color: #ffffff; padding: var(--app-space-8) var(--app-space-12); border-radius: var(--p-border-radius-md); font-size: var(--app-text-xs); white-space: normal; /* From main: an absolutely positioned child sizes against its containing block, so without this it collapsed to the chip's own width and rendered as a ~90px column of single words. */ width: max-content; max-width: 340px; z-index: 100; pointer-events: none; box-shadow: var(--p-shadow-md); } body.dark .chip-tooltip { background: var(--p-surface-700); } .saved-chip .chip-remove, .saved-chip .chip-share { font-size: var(--app-text-2xs); opacity: 0.7; cursor: pointer; line-height: var(--app-leading-none); } .saved-chip .chip-remove:hover, .saved-chip .chip-share:hover, .saved-chip .chip-share.on { opacity: 1; } /* Prompts a colleague shared, kept below a line so your own row stays yours. Hidden entirely when nobody has shared anything. */ .shared-queries { margin-top: var(--app-space-8); border-top: 1px solid var(--p-content-border-color); } .shared-queries.hidden { display: none; } .shared-queries .shared-label { width: 100%; font-size: var(--app-text-xs); color: var(--p-text-muted-color); margin-bottom: var(--app-space-2); } /* ─── Inline message actions ────────────────────────────────────────────── */ .msg-star, .msg-delete { position: absolute; top: var(--app-space-4); right: var(--app-space-4); background: none; border: none; cursor: pointer; font-size: var(--app-text-sm); color: var(--p-text-muted-color); opacity: 0; transition: opacity var(--app-duration-fast) var(--app-ease-standard), color var(--app-duration-fast) var(--app-ease-standard); padding: var(--app-space-2); line-height: var(--app-leading-none); } .message.user .msg-delete { right: var(--app-space-32); } .message:hover .msg-star, .message:hover .msg-delete { opacity: 1; } /* allow-hex: gold star is a fixed affordance colour, not a brand token */ .msg-star:hover, .msg-star.saved { color: #ffc233; } .msg-star.saved { opacity: 1; } .msg-delete:hover { color: var(--p-danger-color); } /* Mobile: always show action buttons (no hover) */ @media (max-width: 768px) { .msg-star, .msg-delete { opacity: 1; font-size: var(--app-text-base); padding: var(--app-space-4); } } /* ─── Digests ───────────────────────────────────────────────────────────── */ .digest-item, .alert-item { padding: var(--app-space-12); border: 1px solid var(--p-content-border-color); border-radius: var(--p-border-radius-lg); margin-bottom: var(--app-space-8); } .digest-item { display: flex; align-items: center; justify-content: space-between; } .digest-item-info { flex: 1; } .digest-item-info .digest-name { font-weight: var(--app-font-medium); } .digest-item-info .digest-schedule { font-size: var(--app-text-xs); color: var(--p-text-muted-color); } .digest-actions { display: flex; gap: var(--app-space-8); align-items: center; } .toggle-switch { position: relative; width: 40px; height: 22px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--p-surface-400); border-radius: var(--app-radius-pill); transition: background var(--app-duration-base) var(--app-ease-standard); } .toggle-slider:before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; /* allow-hex: the knob stays white on both the off and on track */ background: #ffffff; border-radius: 50%; transition: transform var(--app-duration-base) var(--app-ease-standard); } .toggle-switch input:checked + .toggle-slider { background: var(--p-primary-color); } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); } /* ─── Alerts ────────────────────────────────────────────────────────────── */ .alert-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--app-space-4); } .alert-item-name { font-weight: var(--app-font-medium); } .alert-item-query { font-size: var(--app-text-xs); color: var(--p-text-muted-color); margin-bottom: var(--app-space-8); } .alert-item-footer { display: flex; gap: var(--app-space-8); align-items: center; } .alert-pending { background: color-mix(in srgb, var(--p-warning-color) 18%, transparent); color: var(--p-warning-color); padding: var(--app-space-2) var(--app-space-8); border-radius: var(--app-radius-pill); font-size: var(--app-text-xs); font-weight: var(--app-font-semibold); } /* ─── Prompt library ────────────────────────────────────────────────────── */ .library-modal-content { max-width: 780px; width: 92%; } .library-intro, .hub-summary, .lib-admin-note, .lib-admin-body { font-size: var(--app-text-sm); color: var(--p-text-muted-color); } .library-intro { margin-bottom: var(--app-space-12); } .hub-summary { margin: 0 0 var(--app-space-16); } .hub-summary .hub-down { color: var(--p-warning-color); } .library-body { max-height: 60vh; overflow-y: auto; padding-right: var(--app-space-4); } .lib-cat { margin-bottom: var(--app-space-20); } .lib-cat h4 { font-size: var(--app-text-xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--app-font-semibold); color: var(--p-primary-color); margin: 0 0 var(--app-space-8); } .lib-item { display: flex; gap: var(--app-space-12); align-items: flex-start; padding: var(--app-space-8) 0; border-bottom: 1px solid var(--p-content-border-color); } .lib-item-main { flex: 1; display: flex; flex-direction: column; gap: var(--app-space-2); } .lib-item-main strong { font-size: var(--app-text-sm); font-weight: var(--app-font-semibold); } .lib-body { font-size: var(--app-text-xs); color: var(--p-text-muted-color); } .lib-desc { font-size: var(--app-text-xs); color: var(--p-text-muted-color); font-style: italic; } .lib-item-actions { display: flex; gap: var(--app-space-4); flex-shrink: 0; } .lib-admin-note { margin: 0 0 var(--app-space-16); max-width: 60ch; } .lib-admin-note code { background: var(--p-surface-200); padding: 0 var(--app-space-4); border-radius: var(--p-border-radius-sm); font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; } body.dark .lib-admin-note code { background: var(--p-surface-800); } .lib-admin-body { margin-top: var(--app-space-2); max-width: 55ch; } .lib-retired { opacity: 0.55; } .lib-runs { color: var(--p-text-muted-color); font-size: var(--app-text-xs); } .lib-actions { white-space: nowrap; } .lib-actions .btn-sm { margin-right: var(--app-space-4); } /* ─── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { header { padding: var(--app-space-12) var(--app-space-16); flex-wrap: nowrap; gap: var(--app-space-8); } header h1 { font-size: var(--app-text-lg); } header .tagline { display: none; } .btn-nav-toggle, .btn-sidebar-toggle { display: inline-block; } /* ── One panel behind one hamburger ────────────────────────────────────── Tabs, theme and account actions all live in the hamburger here. Before this there were three controls in the bar (history, menu, account) and two dropdowns of their own — more chrome than the overflowing header it was meant to fix. The history drawer stays separate: it opens a surface, not a menu, and it is a per-message action rather than a setting. */ .header-menu { display: none; } .header-right.nav-open .header-menu { display: flex; flex-direction: column; align-items: stretch; gap: var(--app-space-2); position: absolute; top: 100%; right: 0; min-width: 210px; max-width: min(280px, calc(100vw - var(--app-space-16))); padding: var(--app-space-8); background: var(--p-overlay-background); border: 1px solid var(--p-overlay-border-color); border-radius: var(--p-border-radius-lg); box-shadow: var(--p-shadow-lg); z-index: 200; } /* The tab strip is a plain stack in here — no horizontal scroll track. */ .header-right.nav-open .nav-tabs { display: flex; flex-direction: column; gap: var(--app-space-2); overflow: visible; min-width: 0; } .header-right.nav-open .nav-tab, .header-right.nav-open .btn-theme, .header-right.nav-open .user-menu button { width: 100%; text-align: left; justify-content: flex-start; padding: var(--app-space-8) var(--app-space-12); } /* Badges are positioned against the tab wrapper, which is now full width. */ .header-right.nav-open .nav-tab-wrapper { display: block; position: relative; } .header-right.nav-open .btn-theme { display: block; border: none; background: transparent; font-size: var(--app-text-sm); } /* Account section: a labelled group at the foot of the panel rather than a nested dropdown, which on a touch screen is a trap. */ .header-right.nav-open .user-menu-wrap { display: flex; flex-direction: column; width: 100%; border-top: 1px solid var(--p-content-border-color); margin-top: var(--app-space-4); padding-top: var(--app-space-4); } .header-right.nav-open .user-info { pointer-events: none; background: transparent; padding: var(--app-space-4) var(--app-space-12); color: var(--p-text-muted-color); font-size: var(--app-text-xs); min-width: 0; } /* A long username has to ellipsis rather than widen the panel. */ .header-right.nav-open #username-display { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-right.nav-open .user-menu-caret { display: none; } /* Beats .hidden — both carry !important, so specificity decides, and this is three classes to its one. The panel owns visibility here, not the trigger. */ .header-right.nav-open .user-menu { display: flex !important; position: static; min-width: 0; padding: 0; background: transparent; border: none; box-shadow: none; } /* Edge to edge on a phone — a gutter here only narrows the reading column without the ground being visible enough to earn it. */ main { padding: 0; } /* The card meets the bottom and side edges, so only the top corners are a real corner. Squaring the bottom stops the ground showing through in two small wedges under the composer. */ .chat-layout { border-radius: var(--app-radius-card) var(--app-radius-card) 0 0; } .chat-container { min-height: 60vh; } .message { max-width: 95%; } .input-area { padding: var(--app-space-8); gap: var(--app-space-8); } .admin-container { overflow-x: auto; } .users-table { font-size: var(--app-text-xs); } .modal-content { margin: var(--app-space-8); max-height: 90vh; overflow-y: auto; } .sidebar { display: none; } /* The drawer is a fixed overlay at a percentage width here — nothing to drag against, and a 5px grab strip beside the transcript would only be a mis-tap. */ .sidebar-resizer { display: none; } .sidebar.show { display: flex; position: fixed; top: 64px; left: 0; bottom: 0; z-index: 999; width: 85%; max-width: 340px; border-radius: 0; background: var(--p-content-background); box-shadow: var(--p-shadow-lg); } } .hidden { display: none !important; } /* ─── Ported from main ────────────────────────────────────────────────────── Components that landed on main while this branch was open. They were written against the old --dualog-* variables inside the inline