/* * MONETIC UI - m0 Design System * ============================== * Grayscale foundation with deep blue and gold accents * Multi-tenant themeable via server-provided CSS variables */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ============================================================================ CSS CUSTOM PROPERTIES (m0 Design Tokens) ============================================================================ */ :root { /* Deep Blue Accent - Rich and Professional */ --primary-blue: #1a4b8c; --primary-blue-glow: #1a4b8c99; --secondary-blue: #0d3b66; --navy-dark: #0a1628; /* Gold Accent - Warmth and Prestige */ --accent-gold: #c9a227; --accent-gold-glow: #c9a227cc; --accent-gold-light: #d4af37; /* Legacy compatibility (mapped to new palette) */ --accent-red: var(--accent-gold); --accent-red-glow: var(--accent-gold-glow); --accent-red-dark: #a68b1f; --patriot-white: #e8e8ec; --star-white: #ffffff; /* Background Colors - Steel Charcoal */ --dark-bg: #0a0a0f; --card-bg: #141419; --modal-bg: #1a1a22; --panel-bg: linear-gradient(135deg, #141419 0%, #1e1e28 100%); /* Grid and Effects */ --grid-color: #1a4b8c12; --border-glow: #1a4b8c80; --border-glow-gold: #c9a22780; --border-glow-red: var(--border-glow-gold); /* Typography */ --text-primary: #e8e8ec; --text-secondary: #a0a0b0; --text-accent: #5a8fd4; --text-accent-gold: #d4af37; --text-accent-red: var(--text-accent-gold); /* * Bumped 2026-04-18 from #606070 to #86869a so muted text passes * WCAG AA (4.5:1) on both `--dark-bg` and `--card-bg`. The previous * value was ~3.2:1 on dark and ~2.9:1 on cards — failing AA for * normal text and the 3:1 minimum for UI components on cards. * The new value preserves the muted hierarchy: still distinctly * less luminous than `--text-secondary` (#a0a0b0) so the visual * tier still reads "secondary > muted". * * NOTE for the future theme system (Phase 2): this is exactly the * kind of value that NFT-derived themes need to ship within a * versioned spec so we can validate contrast ratios before * applying them — see docs/specs/ui-theme-spec-v1.md (TBD). */ --text-muted: #86869a; /* Status Colors */ --status-success: var(--status-success); --status-warning: #c9a227; --status-error: var(--status-error); --status-info: #5a8fd4; /* Spacing Scale */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; /* Panel edge padding — the breathing room between a panel's outer border / chrome divider and its inner content. The canonical "header + scrollable list" panel idiom (Home, Account Management, Entity / Principal Management, …) was letting text run flush against the left/right edges; this token gives each panel a single source of truth for the inset so a future "tighten everything by 2px" review only touches one declaration. Defaults to spacing-md (1rem) — large enough to read as deliberate negative space, not so large that it eats horizontal real estate on narrow columns. */ --panel-edge-pad: var(--spacing-md); /* ────────────────────────────────────────────────────────── Canonical interaction states (hover / focus / active). Single source of truth so every clickable surface in the UI reads with the same visual grammar: - **Hover** = subtle bg overlay + 1px gold outline. The outline says "this is interactive" without the visual weight of a focus ring. Distinguishable from focus because: 1px (not 2px), no offset (sits flush on edge), lower-alpha gold. Works on dark + light surfaces alike because both layers are color-mix on accent tokens. - **Focus** = 2px solid gold outline at 2px offset. This is the keyboard-nav indicator; deliberately stronger than hover so screen-reader / keyboard users get an unambiguous selection cue distinct from mouse-over. - **Active (pressed)** = 1px transform offset (down). Tactile feedback that the press registered. Use the matching `--interactive-*` tokens on any clickable surface: buttons, list items, cards, links acting as CTAs. Per-component overrides are fine when the design needs them (e.g. destructive buttons get a red focus ring), but start from these tokens so the default reads consistent. ────────────────────────────────────────────────────────── */ --interactive-hover-bg: color-mix(in srgb, var(--anviz-accent-secondary) 14%, transparent); --interactive-hover-outline: 1px solid color-mix(in srgb, var(--anviz-accent-primary) 60%, transparent); --interactive-focus-outline: 2px solid var(--anviz-accent-primary); --interactive-focus-offset: 2px; --interactive-active-translate: 1px; /* ────────────────────────────────────────────────────────── Canonical workspace bar primitives. Both bars (chat-side `.chat-bar-row` + `.chat-input-container`, panel-side `.m-panel-bar`) share these so any height, padding, or chrome change touches one declaration and both bars stay in lockstep. The user's "why aren't they using the same theme primitives" rule, codified. - **Top row**: 52px container holding 44px-tall buttons centered vertically. Used for the chat-bar (Threads / D.B.O.M. / Send / Receive) and the panel-bar's top (panel-switcher tabs OR item-sub-tabs). - **Bottom row**: 76px = 44px button + `--panel-edge-pad` on top + bottom. Used for the chat input row (textarea + send button at min-height) and the panel-bar's bottom (`[← ⚙]` / middle / `[X]`). The chat input row can grow above this (textarea max-height 120px); the panel row stays fixed. - **Button size**: 44px height across every bar button in the workspace. Single canonical touch target. - **Chrome**: shared background + border-top declarations so chat + auxiliary chrome render identically. The bar `border-top` separates the bar from the panel content above. The TOP row's `border-bottom` separates the two rows within a bar. The BOTTOM row carries no extra border — it inherits the parent bar's chrome. This mirror-image structure is enforced on both sides (chat-side: `.chat-bar-row` border-top + border-bottom, `.chat-input-container` border-top: none). ────────────────────────────────────────────────────────── */ --bar-button-size: 44px; --bar-row-height-top: 52px; /* Outer height of the canonical bar bottom row. Both `.chat-input-container` (chat-side) and `.m-panel-bar__row--bottom` (panel-side) consume this token as their `min-height`. Matching values land both bars' bottom edges at the same Y position so the chat panel and the right-side panel(s) read as a unified control surface across the workspace. Theoretical minimum is `--bar-button-size + --panel-edge-pad * 2` = 44 + 28 = 72px (a 44px button inside a 14px-padded frame). Empirical chat render is 5px taller because the chat-input textarea's user-agent baseline + line-height pushes its content area to 49px, so the chat-input-container outer = 49 + 28 = 77px regardless of the min-height token. To make the panel-bar bottom row match that rendered height, this token is hardcoded to 77px (the empirical chat render) rather than the theoretical 72px. Both consumers' min-height lands at 77; the panel bar (with chip content shorter than 49) sits exactly at 77; chat (with content >= 49) also sits at 77 (or grows further if the textarea expands past 49px, which is allowed up to the chat input's `max-height: 120px`). Adjust this token if the chat textarea's intrinsic content baseline shifts (font change, line-height change, padding tweak on `.chat-input-field`). The two bars must keep sharing the same value. */ --bar-row-height-bottom: 77px; --bar-row-bg: color-mix(in srgb, var(--card-bg) 70%, transparent); --bar-row-border: 1px solid color-mix(in srgb, var(--text-accent) 30%, transparent); --bar-row-divider: 1px solid color-mix(in srgb, var(--text-accent) 18%, transparent); /* Divider thickness as a bare value (not the full `border:` shorthand above) so calc() arithmetic on row heights can include it. The chat-side `.chat-bar-row`'s border-bottom sits OUTSIDE the inner `.chat-bar` box, adding 1px to the row's outer height; the panel-side `.m-panel-bar__row--top`'s border-bottom is INSIDE its border-box height and subtracts from the content area. Adding this thickness to the panel-side row--top height cancels the subtraction so both bars stack to the same total pixel height. Pre-fix the panel side was 1px shorter than the chat side. */ --bar-row-divider-thickness: 1px; /* Border Radius */ --radius-sm: 5px; --radius-md: 10px; --radius-lg: 15px; --radius-pill: 25px; /* Animation */ --duration-fast: 0.2s; --duration-normal: 0.3s; --duration-slow: 0.5s; /* Shadows */ --shadow-glow-blue: 0 0 20px var(--primary-blue-glow); --shadow-glow-gold: 0 0 20px var(--accent-gold-glow); --shadow-glow-red: var(--shadow-glow-gold); /* * an-viz DesignTokens bridge (core/an-viz client/config.rs — DesignTokens::from_css). * The an-viz crate has no DOM tile primitives; GPU views read these. Domain shells * reuse the same tokens so canvases and chrome stay aligned. */ --anviz-bg-primary: #0a0a0f; --anviz-bg-panel: color-mix(in srgb, var(--card-bg) 85%, transparent); --anviz-accent-primary: #c9a227; --anviz-accent-secondary: #1a4b8c; --anviz-accent-tertiary: #e8e8ec; --anviz-data-low: #1e3a5f; --anviz-data-mid: #5a8fd4; --anviz-data-high: #c9a227; --anviz-grid-color: color-mix(in srgb, var(--primary-blue) 8%, transparent); --anviz-grid-major: color-mix(in srgb, var(--primary-blue) 15%, transparent); --anviz-axis-x: var(--status-error); --anviz-axis-y: var(--status-success); --anviz-axis-z: #5a8fd4; --anviz-glow-color: color-mix(in srgb, var(--primary-blue) 30%, transparent); --anviz-bloom-threshold: 0.8; --anviz-bloom-intensity: 0.3; } /* ============================================================================ BASE STYLES ============================================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; font-family: 'Orbitron', monospace; font-size: 14px; color: var(--text-primary); background: var(--dark-bg); -webkit-font-smoothing: antialiased; line-height: 1.6; overflow: hidden; /* Subtle grid background - steel blue tint */ background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.02) 1px, transparent 1px), radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--primary-blue) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary-blue) 4%, transparent) 1px, transparent 1px); background-size: 400px 400px, 500px 500px, 50px 50px, 50px 50px; background-color: var(--dark-bg); } /* m0 accent stripe - subtle blue/gold gradient */ body::after { content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--primary-blue) 0%, var(--secondary-blue) 40%, var(--accent-gold) 60%, var(--accent-gold-light) 100% ); z-index: 9999; pointer-events: none; } /* ============================================================================ WORKSPACE ============================================================================ */ .monetic-app { width: 100%; /* iOS Safari's `100vh` is the LARGE viewport (URL bar + bottom tab bar excluded from the calculation), so content laid out to `100vh` extends BEHIND the chrome and the bottom-most rows (chat-bar with Threads / D.B.O.M. / Send / Receive) get occluded by Safari's bottom UI. `100dvh` (dynamic viewport height) uses the CURRENT visible viewport — shrinks/grows as Safari hides/shows its chrome. Safari 15.4+ (March 2022) supports it; older browsers fall through to the `100vh` declaration above per the cascade. The viewport meta tag carries `viewport-fit=cover` so `env(safe-area-inset-bottom)` resolves to the iPhone's home-indicator inset where applicable (Face ID models). The chat-bar's bottom row already provides enough breathing room above the home indicator without an explicit padding-bottom — if a future panel pushes content flush to the bottom edge, add the inset there. */ height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: transparent; } /* Single-panel architecture (PR Series A.2.2b+, 2026-05-10): `.workspace` is a horizontal flex row holding two regions — chat (fixed-ish width, always left) and the auxiliary panel slot (flexes to fill). Pre-A.2.2b this was a column that stacked `.workspace-panels` (horizontal panel strip) above the minimized tray; both retired. */ .workspace { flex: 1; display: flex; flex-direction: row; overflow: hidden; } /* Chat region — left side, always visible. Width determined by `style:flex-grow=split` (workspace state's `chat_panel_split`, default 0.5 for an even split). The `flex-basis: 0` lets `flex-grow` be the sole sizing authority; min-width clamps the absolute floor below which the divider can't be dragged. */ .workspace-chat-region { flex: 0.5 1 0; min-width: 280px; display: flex; flex-direction: column; overflow: hidden; } /* Auxiliary panel region — right side. Same flex-grow model as chat-region; default 0.5 (even split). */ .workspace-panel-region { flex: 0.5 1 0; min-width: 280px; display: flex; flex-direction: column; overflow: hidden; } /* Draggable divider between chat and auxiliary panel. PR Series A.3 hotfix (2026-05-11): introduces a single resize affordance on the chat / panel boundary (different from the legacy multi-panel per-panel resize handles). Drag updates `WorkspaceState::chat_panel_split` via the workspace shell's mousedown-and-track handler; persistence rides the existing workspace-state localStorage path. */ .workspace-divider { flex: 0 0 6px; display: flex; align-items: center; justify-content: center; cursor: col-resize; background: rgb(from var(--card-bg) r g b / 0.50); border-left: 1px solid rgb(from var(--text-accent) r g b / 0.18); border-right: 1px solid rgb(from var(--text-accent) r g b / 0.18); transition: background-color 120ms ease; touch-action: none; z-index: 1; } .workspace-divider:hover, .workspace-divider:active { background: rgb(from var(--text-accent) r g b / 0.18); } .workspace-divider__grip { display: block; width: 2px; height: 32px; background: rgb(from var(--text-accent) r g b / 0.40); border-radius: 1px; pointer-events: none; } .workspace-divider:hover .workspace-divider__grip, .workspace-divider:active .workspace-divider__grip { background: var(--text-accent); } /* Inner slot wrapper so future split-pane modes can layer without affecting the region's flex behavior. */ .workspace-panel-slot { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } /* Mobile (≤768px): two-page swipeable workspace. Pattern (specced 2026-06-12, operator UX call): - Page 1 (default) = chat region, full viewport width. - Page 2 = active panel region, full viewport width. - Swipe right-to-left snaps from page 1 → page 2 (and back). - Tap "Send" / "Receive" / any nav.push_root from the chat-bar also lands the user on page 2 — the workspace's `create_effect` watcher in `workspace/mod.rs` calls `scrollIntoView()` on the panel region whenever the active panel changes on mobile. CSS scroll-snap is the canonical primitive — no JS for the swipe gesture itself, just for the programmatic-tap path. `scroll-behavior: smooth` on the workspace makes the programmatic `scrollIntoView()` animate at the same ease as the native swipe. Desktop (>768px) is unchanged — flex-row split with the draggable divider; the panel-region's inline `style:flex-grow` drives the resize handle. On mobile we override that inline flex-grow with `!important` so both regions become fixed 100vw pages regardless of where the divider was last dragged on desktop. */ @media (max-width: 768px) { .workspace { flex-direction: row; overflow-x: scroll; overflow-y: hidden; /* **No `scroll-snap-type`** — runtime evidence (Safari Web Inspector scroll-event log, 2026-06-13): every tap on an interior panel button triggers iOS Safari's tap-to-focus-into-view autoscroll, and any `scroll-snap-type` value (mandatory, proximity) then re-snaps to chat (scrollLeft=0) as the "nearest" snap point — even when the panel region was at scrollLeft=393 immediately before the tap. The bounce fires WITHIN ONE FRAME, before any Rust event handler runs, so it's not preventable from our app code. CSS scroll-snap is incompatible with this layout's interaction model; the canonical fix is to disable scroll-snap entirely and let `overflow-x: scroll` handle the swipe gesture without any "settle to the nearest page" behavior. Programmatic scrolls (`workspace.scrollTo(...)`) then land and stay. User-initiated swipes still page-swap fine — iOS Safari's native scroll-momentum is sufficient on a container where each child is exactly `100vw`. If we ever want true page-pagination behavior back, the canonical replacement is a JS-side touchend listener that calls `scrollTo(round(scrollLeft / clientWidth) * clientWidth, 0)` — that's scope for a follow-up; the current behavior (free swipe + reliable programmatic snap) is the documented mobile workspace contract. */ /* `overflow-anchor: none` belt-and-suspenders: prevents WebKit's scroll-anchoring heuristic from preserving a "visual anchor" when the panel content reflows (e.g. when a panel re-renders after a NavigatePush). Without this, focus moving to a freshly-rendered interactive element can shift `scrollLeft` to keep that anchor in view, defeating our `scrollTo`. */ overflow-anchor: none; /* Stop horizontal scroll-chaining into ancestor scrollers — bounded swipe so the mobile workspace doesn't accidentally drive page-level overscroll. */ overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; } .workspace::-webkit-scrollbar { display: none; } .workspace-chat-region, .workspace-panel-region { /* Override the inline `style:flex-grow` set by the desktop resize logic — on mobile both regions are fixed 100vw pages, not a flex split. */ flex: 0 0 100vw !important; width: 100vw; min-width: 100vw; max-width: 100vw; height: 100%; /* `scroll-snap-align` retired alongside the parent's `scroll-snap-type` — see the parent's comment for the runtime evidence proving snap-type fights our programmatic `scrollTo`. The child snap-align is dead-letter without it. */ overflow-y: auto; } .workspace-divider { display: none; } /* The chat-region's panel-container has a border-right that reads as a desktop side-by-side separator. On mobile the regions are separate scroll-snap pages (not side-by-side), so the border becomes visual noise at the right edge of page 1. Hide it. */ .workspace-chat-region .panel-container, .workspace-panel-region .panel-container { border-right: none; } } /* `.workspace-panels` retired in PR Series A.3 (2026-05-11) along with the multi-panel `` render. Kept the selector commented for one release window in case any stale CSS rules elsewhere reference it via cascade. */ /* .workspace-panels { … legacy multi-panel horizontal strip … } */ /* ============================================================================ PANEL CONTAINER (single-panel architecture, PR Series A.3, 2026-05-11) ============================================================================ Pre-A.3: heavyweight container with two width modes (auto-share via `flex: 1 1 0` for the multi-panel + locked `.user-sized` for the resize-handle flow). Both retired with the multi-panel infrastructure. The container now fills its parent flex slot — chat region for chat, auxiliary slot for whichever panel is current per `state.workspace.history.current()`. */ .panel-container { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; height: 100%; width: 100%; position: relative; /* Smooth focus transitions (ADR-012) — kept for the chat/aux focus-class toggle even though under single- panel both are always "focused" in the rendering sense. */ transition: box-shadow var(--duration-fast) ease-out, background var(--duration-fast) ease-out; /* Frosted glass effect */ background: color-mix(in srgb, var(--card-bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-right: 1px solid color-mix(in srgb, var(--text-accent) 30%, transparent); /* Subtle inner glow */ box-shadow: inset 0 0 40px color-mix(in srgb, var(--text-accent) 3%, transparent); } /* `.user-sized` retired in PR Series A.3 (2026-05-11) along with the resize handle. */ .panel-container:last-child { border-right: none; } .panel-container.focused { background: color-mix(in srgb, var(--card-bg) 90%, transparent); box-shadow: inset 0 0 40px color-mix(in srgb, var(--text-accent) 8%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--text-accent) 50%, transparent); } /* Panel header with patriot stripe */ .panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-sm) var(--spacing-md); background: color-mix(in srgb, var(--card-bg) 70%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--text-accent) 30%, transparent); min-height: 44px; position: relative; } .panel-header::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent-red), var(--patriot-white), var(--primary-blue) ); } .panel-header-title { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--primary-blue); } .panel-code { font-size: 0.6rem; font-weight: 900; padding: 2px 6px; background: color-mix(in srgb, var(--text-accent) 15%, transparent); border: 1px solid var(--primary-blue); border-radius: var(--radius-sm); letter-spacing: 1px; } .panel-header-controls { display: flex; gap: var(--spacing-xs); } .panel-control { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-size: 14px; transition: all var(--duration-fast); } .panel-control:hover { background: color-mix(in srgb, var(--text-accent) 10%, transparent); border-color: var(--primary-blue); color: var(--primary-blue); } .panel-control.close:hover { background: color-mix(in srgb, var(--status-error) 20%, transparent); border-color: var(--accent-red); color: var(--accent-red); } .panel-control.bug-report { font-size: 12px; } .panel-control.bug-report:hover { background: rgba(255, 152, 0, 0.15); border-color: rgba(255, 152, 0, 0.5); } /* ============================================================================ BUG REPORT MODAL ============================================================================ */ .bug-report-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.2s ease; } .bug-report-modal { background: var(--surface-panel); border: 1px solid var(--border-color); border-radius: 12px; width: 90%; max-width: 480px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; animation: slideUp 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .bug-report-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border-color); } .bug-report-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary); } .bug-report-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; border-radius: 4px; } .bug-report-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); } .bug-report-body { padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-md); overflow-y: auto; } .bug-report-context { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background: color-mix(in srgb, var(--text-accent) 10%, transparent); border-radius: 6px; font-size: 13px; } .bug-report-context .context-label { color: var(--text-muted); } .bug-report-context .context-value { color: var(--primary-blue); font-weight: 500; } .bug-report-field { display: flex; flex-direction: column; gap: var(--spacing-xs); } .bug-report-field label { font-size: 13px; font-weight: 500; color: var(--text-secondary); } .bug-report-field textarea { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: var(--spacing-md); font-family: inherit; font-size: 14px; color: var(--text-primary); resize: vertical; } .bug-report-field textarea:focus { outline: none; border-color: var(--primary-blue); } .bug-report-field textarea::placeholder { color: var(--text-muted); } .bug-report-option { display: flex; align-items: center; } .bug-report-option label { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 14px; color: var(--text-secondary); cursor: pointer; } .bug-report-option input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-blue); } .bug-report-footer { display: flex; justify-content: flex-end; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--border-color); } .bug-report-cancel { padding: var(--spacing-sm) var(--spacing-lg); background: transparent; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-secondary); font-size: 14px; cursor: pointer; } .bug-report-cancel:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .bug-report-submit { padding: var(--spacing-sm) var(--spacing-lg); background: var(--primary-blue); border: none; border-radius: 6px; color: white; font-size: 14px; font-weight: 500; cursor: pointer; } .bug-report-submit:hover:not(:disabled) { background: #0090cc; } .bug-report-submit:disabled { opacity: 0.5; cursor: not-allowed; } .bug-report-success { padding: var(--spacing-xl); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); text-align: center; } .bug-report-success .success-icon { font-size: 48px; } .bug-report-success p { font-size: 16px; color: var(--text-secondary); margin: 0; } /* Panel Content Container * * PATTERN: The .panel-content wrapper fills available space (flex: 1). * Each panel's root element (e.g., .chat-panel, .vault-panel) should: * * 1. Set height: 100% to fill the container * 2. Set overflow-y: auto for vertical scrolling * 3. Use display: flex; flex-direction: column for internal layout * * Example panel structure: * .panel-content (this class - flex container) * .my-panel (height: 100%, overflow-y: auto, display: flex, flex-direction: column) * .my-panel-header (flex: 0 - fixed height) * .my-panel-content (flex: 1, overflow-y: auto - scrollable area) * .my-panel-footer (flex: 0 - fixed height, optional) */ .panel-content { flex: 1; overflow: hidden; /* Fallback scroll for panels that don't set their own */ /* Individual panels should use overflow-y: auto on their root element */ } /* Base styles for all panel root elements * Panels use the naming convention: .{panel-name}-panel * This provides sensible defaults for scrolling behavior * * Individual panels can override overflow if they have internal scroll containers. * Panels with complex layouts (header + scroll area + footer) should: * 1. Set overflow: hidden on the panel root * 2. Set overflow-y: auto on the scrollable content area */ [class$="-panel"] { height: 100%; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Panels with internal scroll containers - prevent double scrolling * These panels have a header/footer + scrollable content area pattern. * The content area (e.g., .chat-messages-container) handles scrolling. * On mobile, the media query overrides this to allow panel-level scroll. * * WARNING: Only add a panel here if it has a dedicated internal scroll container * (e.g., .chat-messages-container, .panel-scrollable). Otherwise the panel * won't scroll at all and content will be clipped. * * If your panel just has a bunch of content that should scroll, do NOT add it * here - the base [class$="-panel"] rule already provides overflow-y: auto. */ .chat-panel, .transactions-panel, .settings-panel, .comms-panel, .onboarding-panel, .opex-panel, .spend-shell-panel, .home-panel, .vault-panel, .address-book-panel, .services-shell-panel, .books-panel { overflow: hidden; } /* Scrollable panel content - use this class for the main scrollable area */ .panel-scrollable { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ============================================================================ LAZY PANEL SKELETON (ADR-012 Phase 3) ============================================================================ */ .lazy-panel-wrapper { width: 100%; height: 100%; } .panel-skeleton { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-md); animation: skeleton-pulse 1.5s ease-in-out infinite; } .skeleton-header { height: 32px; background: linear-gradient(90deg, color-mix(in srgb, var(--text-accent) 5%, transparent) 0%, color-mix(in srgb, var(--text-accent) 10%, transparent) 50%, color-mix(in srgb, var(--text-accent) 5%, transparent) 100%); border-radius: var(--radius-md); } .skeleton-content { display: flex; flex-direction: column; gap: var(--spacing-sm); } .skeleton-line { height: 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--text-accent) 3%, transparent) 0%, color-mix(in srgb, var(--text-accent) 8%, transparent) 50%, color-mix(in srgb, var(--text-accent) 3%, transparent) 100%); border-radius: var(--radius-sm); } .skeleton-line.short { width: 60%; } @keyframes skeleton-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* ============================================================================ RESIZE HANDLE ============================================================================ */ .resize-handle { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 10; background: transparent; transition: background 0.15s ease; } .resize-handle:hover { background: linear-gradient(180deg, var(--accent-red), var(--primary-blue)); box-shadow: 0 0 10px var(--primary-blue-glow); } /* Global resizing state - applied to body during drag */ body.resizing { cursor: col-resize !important; user-select: none !important; } body.resizing * { cursor: col-resize !important; } body.resizing .resize-handle { background: linear-gradient(180deg, var(--accent-red), var(--primary-blue)); box-shadow: 0 0 10px var(--primary-blue-glow); } /* ============================================================================ CHAT PANEL ============================================================================ */ .chat-panel { display: flex; flex-direction: column; height: 100%; background: transparent; } /* Holographic Memory Upgrade Notice */ .chat-upgrade-notice { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: var(--spacing-xl); text-align: center; color: var(--text-primary); } .chat-upgrade-notice .upgrade-icon { color: var(--accent-cyan); opacity: 0.8; margin-bottom: var(--spacing-lg); animation: pulse-glow 2s ease-in-out infinite; } @keyframes pulse-glow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .chat-upgrade-notice h2 { font-size: 1.5rem; font-weight: 500; color: var(--text-primary); margin-bottom: var(--spacing-md); } .chat-upgrade-notice .upgrade-description { max-width: 400px; font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--spacing-lg); } .chat-upgrade-notice .upgrade-features { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); } .chat-upgrade-notice .feature { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 0.9rem; color: var(--text-primary); } .chat-upgrade-notice .feature-icon { color: var(--accent-cyan); font-weight: bold; } .chat-upgrade-notice .upgrade-status { font-size: 0.85rem; color: var(--text-tertiary); font-style: italic; } /* ============================================================================ HOLOGRAPHIC STATUS BAR ============================================================================ */ .holographic-status-bar { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-xs) var(--spacing-md); background: linear-gradient(90deg, color-mix(in srgb, var(--primary-blue) 15%, transparent) 0%, color-mix(in srgb, var(--text-accent) 8%, transparent) 100%); border-bottom: 1px solid color-mix(in srgb, var(--text-accent) 20%, transparent); font-size: 0.8rem; } /* Modality Indicator */ .status-modality { display: flex; align-items: center; gap: var(--spacing-xs); padding: 2px 8px; border-radius: 4px; font-weight: 500; } .status-modality .modality-icon { font-size: 1rem; } .status-modality .modality-label { text-transform: uppercase; letter-spacing: 0.05em; } .status-modality .build-phase { opacity: 0.7; font-weight: 400; } /* Modality colors */ .modality-discovery { background: rgba(138, 43, 226, 0.2); color: #b366ff; } .modality-research { background: color-mix(in srgb, var(--text-accent) 20%, transparent); color: var(--accent-cyan); } .modality-build { background: rgba(255, 165, 0, 0.2); color: var(--status-warning); } .modality-execute { background: color-mix(in srgb, var(--status-success) 20%, transparent); color: var(--status-success); } /* Regime Indicator */ .status-regime { display: flex; align-items: center; gap: var(--spacing-xs); padding: 2px 8px; border-radius: 4px; } .status-regime .regime-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: regime-pulse 2s ease-in-out infinite; } .status-regime .regime-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; } @keyframes regime-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Regime colors */ .regime-unknown { color: var(--text-tertiary); } .regime-exploring { color: #9966ff; } .regime-focused { color: var(--status-success); } .regime-transitioning { color: var(--status-warning); } .regime-looping { color: #ff6b6b; } /* Turn Counter */ .status-turn { display: flex; align-items: center; gap: 4px; margin-left: auto; color: var(--text-secondary); } .status-turn .turn-label { font-size: 0.7rem; text-transform: uppercase; opacity: 0.6; } .status-turn .turn-count { font-family: var(--font-mono); font-weight: 500; color: var(--text-primary); } /* Connection Indicator */ .status-connected, .status-disconnected { display: flex; align-items: center; padding: 2px; } .status-connected .connection-dot, .status-disconnected .connection-dot { width: 8px; height: 8px; border-radius: 50%; } .status-connected .connection-dot { background: var(--status-success); box-shadow: 0 0 6px #00ff8866; } .status-disconnected .connection-dot { background: #ff6b6b; box-shadow: 0 0 6px #ff6b6b66; } .chat-header { padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid color-mix(in srgb, var(--text-accent) 20%, transparent); } /* Branch Controls */ .chat-branch-controls { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); background: rgba(0, 82, 204, 0.15); border-bottom: 1px solid color-mix(in srgb, var(--text-accent) 20%, transparent); } .branch-selector, .modality-selector { display: flex; align-items: center; gap: var(--spacing-xs); } .branch-label, .modality-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .branch-dropdown, .modality-dropdown { background: color-mix(in srgb, var(--card-bg) 80%, transparent); color: var(--text-primary); border: 1px solid color-mix(in srgb, var(--text-accent) 30%, transparent); border-radius: var(--radius-sm); padding: var(--spacing-xs) var(--spacing-sm); font-family: var(--font-mono); font-size: 0.85rem; cursor: pointer; } .branch-dropdown:hover, .modality-dropdown:hover { border-color: var(--primary-blue); background: color-mix(in srgb, var(--text-accent) 10%, transparent); } .branch-dropdown:focus, .modality-dropdown:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 8px var(--primary-blue-glow); } /* Message action buttons */ .message-actions { display: flex; gap: var(--spacing-xs); margin-top: var(--spacing-sm); padding-top: var(--spacing-xs); border-top: 1px solid rgba(255, 255, 255, 0.05); opacity: 0; transition: opacity 0.2s ease; } .message:hover .message-actions { opacity: 1; } /* Onboarding panel actions should always be visible */ .onboarding-panel .message-actions, .onboarding-message .message-actions { opacity: 1; } .msg-action-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-secondary); padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; min-width: 28px; } .msg-action-btn:hover { background: color-mix(in srgb, var(--text-accent) 15%, transparent); border-color: var(--primary-blue); color: var(--text-primary); } .msg-action-btn.copied { background: color-mix(in srgb, var(--status-success) 20%, transparent); border-color: var(--status-success); color: var(--status-success); } /* Inline edit form */ .edit-inline { display: flex; flex-direction: column; gap: var(--spacing-xs); width: 100%; margin-top: var(--spacing-sm); } .edit-inline .edit-textarea { width: 100%; min-height: 60px; background: color-mix(in srgb, var(--card-bg) 80%, transparent); color: var(--text-primary); border: 1px solid color-mix(in srgb, var(--text-accent) 30%, transparent); border-radius: var(--radius-sm); padding: var(--spacing-sm); font-family: inherit; font-size: 0.9rem; resize: vertical; } .edit-inline .edit-textarea:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 8px var(--primary-blue-glow); } .edit-buttons { display: flex; gap: var(--spacing-xs); justify-content: flex-end; } .edit-save, .edit-cancel { padding: 4px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; transition: all 0.2s ease; } .edit-save { background: var(--primary-blue); color: var(--star-white); border: none; } .edit-save:hover { background: var(--secondary-blue); } .edit-cancel { background: transparent; color: var(--text-secondary); border: 1px solid rgba(255, 255, 255, 0.2); } .edit-cancel:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); } .branch-btn { background: transparent; border: 1px solid color-mix(in srgb, var(--text-accent) 30%, transparent); color: var(--text-secondary); padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.9rem; transition: all 0.2s ease; } .branch-btn:hover { background: color-mix(in srgb, var(--text-accent) 20%, transparent); border-color: var(--primary-blue); color: var(--text-primary); } .fork-btn:hover { border-color: var(--status-info); } .edit-btn:hover { border-color: var(--status-warning); } /* Edit form inline */ .edit-form { display: flex; flex-direction: column; gap: var(--spacing-sm); width: 100%; } .edit-textarea { width: 100%; min-height: 80px; background: color-mix(in srgb, var(--card-bg) 80%, transparent); color: var(--text-primary); border: 1px solid color-mix(in srgb, var(--text-accent) 30%, transparent); border-radius: var(--radius-sm); padding: var(--spacing-sm); font-family: inherit; resize: vertical; } .edit-textarea:focus { outline: none; border-color: var(--primary-blue); } .edit-actions { display: flex; gap: var(--spacing-sm); justify-content: flex-end; } .edit-submit, .edit-cancel { padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; transition: all 0.2s ease; } .edit-submit { background: var(--primary-blue); color: var(--star-white); border: none; } .edit-submit:hover { background: var(--secondary-blue); } .edit-cancel { background: transparent; color: var(--text-secondary); border: 1px solid rgba(255, 255, 255, 0.2); } .edit-cancel:hover { background: rgba(255, 255, 255, 0.1); } /* Branch indicator on messages */ .branch-indicator { margin-left: var(--spacing-xs); font-size: 0.75rem; opacity: 0.7; } .branch-correction { color: var(--status-warning); } .branch-exploration { color: var(--status-info); } .branch-checkpoint { color: var(--status-success); } .chat-messages-container { flex: 1; overflow-y: auto; padding: var(--spacing-md); min-height: 0; } .chat-navigation { padding: var(--spacing-sm) var(--spacing-md); border-top: 1px solid color-mix(in srgb, var(--text-accent) 20%, transparent); background: color-mix(in srgb, var(--card-bg) 50%, transparent); } /* Chat-input row — Row B of the chat panel's two-row chrome. Mirrors the panel-bar's `__row--bottom`: same height (`--bar-row-height-bottom`), same chrome (no extra border-top — `.chat-bar-row`'s border-bottom serves as the between-rows divider, exactly like the panel-bar's top-row border-bottom does). Both bars now have IDENTICAL bottom-row dimensions and chrome via the shared `--bar-*` tokens. */ .chat-input-container { /* `min-height` (not `height`) so the textarea can grow beyond the canonical 76px when the user types multiple lines — chat input legitimately expands; the panel-bar bottom row stays fixed. */ min-height: var(--bar-row-height-bottom); padding: var(--panel-edge-pad); background: var(--bar-row-bg); } /* Session Manager */ .session-manager { display: flex; align-items: center; gap: var(--spacing-sm); position: relative; } .current-thread { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-sm) var(--spacing-md); background: color-mix(in srgb, var(--text-accent) 10%, transparent); border: 1px solid var(--primary-blue); border-radius: var(--radius-md); color: var(--text-primary); cursor: pointer; font-family: 'Orbitron', monospace; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; transition: all var(--duration-fast); } .current-thread:hover { background: color-mix(in srgb, var(--text-accent) 15%, transparent); box-shadow: var(--shadow-glow-blue); } .new-thread { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue)); border: none; border-radius: var(--radius-md); color: white; cursor: pointer; font-size: 18px; font-weight: 700; box-shadow: var(--shadow-glow-blue); transition: all var(--duration-fast); position: relative; z-index: 101; /* Above thread-list dropdown */ flex-shrink: 0; } .new-thread:hover { transform: translateY(-2px); box-shadow: 0 0 30px var(--primary-blue-glow); } .new-thread:active { transform: translateY(0); box-shadow: var(--shadow-glow-blue); } .thread-list { position: absolute; top: 100%; left: 0; right: 48px; margin-top: var(--spacing-xs); background: var(--modal-bg); border: 1px solid var(--primary-blue); border-radius: var(--radius-md); z-index: 100; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), var(--shadow-glow-blue); max-height: 200px; overflow-y: auto; /* Smooth dropdown animation (ADR-012) */ animation: dropdown-appear var(--duration-fast) ease-out; } @keyframes dropdown-appear { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .thread-item { display: block; width: 100%; padding: var(--spacing-sm) var(--spacing-md); background: transparent; border: none; color: var(--text-secondary); cursor: pointer; text-align: left; pointer-events: auto; position: relative; font-family: 'Orbitron', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; transition: all var(--duration-fast); } .thread-item:hover { background: color-mix(in srgb, var(--text-accent) 10%, transparent); color: var(--primary-blue); } .thread-item.active { background: color-mix(in srgb, var(--text-accent) 20%, transparent); color: var(--primary-blue); border-left: 3px solid var(--primary-blue); } /* Messages */ .message-list { display: flex; flex-direction: column; gap: var(--spacing-md); overflow: visible; } .message { max-width: 85%; padding: var(--spacing-md); border-radius: var(--radius-lg); font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; /* Smooth appearance animation (ADR-012) */ animation: message-appear var(--duration-normal) ease-out; } @keyframes message-appear { from { opacity: 0.7; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .message-user { align-self: flex-end; background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue)); color: white; box-shadow: var(--shadow-glow-blue); } .message-agent { align-self: flex-start; background: var(--navy-dark); border: 1px solid var(--primary-blue); color: var(--text-secondary); } .message-system { align-self: center; background: transparent; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; } .message-header { display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); font-size: 0.65rem; font-family: 'Orbitron', monospace; text-transform: uppercase; letter-spacing: 1px; opacity: 0.7; } .message-content { line-height: 1.6; } /* Markdown Content Styling */ .markdown-content { line-height: 1.7; } .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content h5, .markdown-content h6 { color: var(--cyber-cyan); font-family: 'Orbitron', monospace; margin: 0.8em 0 0.4em 0; font-weight: 600; } .markdown-content h1 { font-size: 1.4rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3em; } .markdown-content h2 { font-size: 1.2rem; } .markdown-content h3 { font-size: 1rem; color: var(--patriot-gold); } .markdown-content p { margin: 0.5em 0; } .markdown-content ul, .markdown-content ol { margin: 0.5em 0; padding-left: 1.5em; } .markdown-content li { margin: 0.25em 0; } .markdown-content strong { color: var(--patriot-gold); font-weight: 600; } .markdown-content em { color: var(--text-secondary); font-style: italic; } .markdown-content code { background: rgba(0, 0, 0, 0.5); color: var(--cyber-cyan); padding: 0.15em 0.4em; border-radius: var(--radius-sm); font-family: 'IBM Plex Mono', monospace; font-size: 0.85em; } .markdown-content pre { background: rgba(0, 0, 0, 0.6); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--spacing-sm); margin: 0.75em 0; overflow-x: auto; } .markdown-content pre code { background: none; padding: 0; color: var(--text-secondary); font-size: 0.8rem; line-height: 1.5; } .markdown-content table { width: 100%; border-collapse: collapse; margin: 0.75em 0; font-size: 0.85em; } .markdown-content th, .markdown-content td { border: 1px solid var(--border-color); padding: 0.4em 0.6em; text-align: left; } .markdown-content th { background: color-mix(in srgb, var(--text-accent) 10%, transparent); color: var(--cyber-cyan); font-weight: 600; } .markdown-content tr:nth-child(even) td { background: rgba(0, 0, 0, 0.2); } .markdown-content hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--border-color), transparent); margin: 1em 0; } .markdown-content blockquote { border-left: 3px solid var(--patriot-gold); margin: 0.75em 0; padding: 0.5em 1em; background: color-mix(in srgb, var(--accent-gold) 5%, transparent); color: var(--text-secondary); } .markdown-content a { color: var(--cyber-cyan); text-decoration: none; border-bottom: 1px dashed var(--cyber-cyan); } .markdown-content a:hover { color: var(--patriot-gold); border-color: var(--patriot-gold); } /* Task lists */ .markdown-content input[type="checkbox"] { margin-right: 0.5em; accent-color: var(--cyber-cyan); } /* Server-rendered diagrams (mermaid, etc.) */ .markdown-content .diagram { margin: 1.5rem 0; padding: 1rem; background: rgba(10, 25, 47, 0.9); border: 1px solid var(--cyber-cyan); border-radius: var(--radius-md); box-shadow: 0 0 20px color-mix(in srgb, var(--text-accent) 15%, transparent); /* Container fits content */ display: inline-block; max-width: 100%; transition: all 0.3s ease; } /* SVG sizing - use width to control size, container follows */ .markdown-content .diagram svg { display: block; /* Default: small thumbnail */ width: 280px; height: auto; cursor: zoom-in; transition: width 0.3s ease; } /* Expand on hover */ .markdown-content .diagram:hover svg { width: 500px; cursor: zoom-out; } /* Full size on click/active - caps at container width */ .markdown-content .diagram:active svg { width: 100%; max-width: 800px; } /* Hint text */ .markdown-content .diagram figcaption { margin-top: 0.5rem; text-align: center; font-size: 0.8rem; color: var(--cyber-cyan); } .markdown-content .diagram figcaption::after { content: " (hover to zoom)"; opacity: 0.6; font-size: 0.7rem; } .markdown-content .diagram figcaption { margin-top: 0.75rem; font-size: 0.8rem; color: var(--cyber-cyan); text-align: center; font-style: italic; } /* Monochromatic cyan theme for diagrams */ .markdown-content .diagram svg * { /* Reset all fills and strokes */ } /* All text white */ .markdown-content .diagram svg text, .markdown-content .diagram svg tspan, .markdown-content .diagram svg .nodeLabel, .markdown-content .diagram svg .label, .markdown-content .diagram svg .edgeLabel span, .markdown-content .diagram svg foreignObject div, .markdown-content .diagram svg foreignObject span, .markdown-content .diagram svg foreignObject p { fill: #ffffff !important; color: #ffffff !important; font-weight: 500 !important; } /* Node boxes - monochromatic cyan */ .markdown-content .diagram svg rect, .markdown-content .diagram svg .node rect, .markdown-content .diagram svg .node polygon, .markdown-content .diagram svg .basic, .markdown-content .diagram svg .label-container { fill: color-mix(in srgb, var(--text-accent) 20%, transparent) !important; stroke: var(--cyber-cyan) !important; stroke-width: 2px !important; } /* Edges/arrows - white for visibility */ .markdown-content .diagram svg path.flowchart-link, .markdown-content .diagram svg .edgePath path, .markdown-content .diagram svg line { stroke: #ffffff !important; stroke-width: 2px !important; } /* Arrow markers - white */ .markdown-content .diagram svg marker path, .markdown-content .diagram svg .arrowMarkerPath { fill: #ffffff !important; stroke: #ffffff !important; } /* Edge labels background */ .markdown-content .diagram svg .edgeLabel rect, .markdown-content .diagram svg .labelBkg { fill: rgba(10, 25, 47, 0.95) !important; opacity: 1 !important; } /* Cluster/subgraph boxes */ .markdown-content .diagram svg .cluster rect { fill: color-mix(in srgb, var(--text-accent) 8%, transparent) !important; stroke: color-mix(in srgb, var(--text-accent) 50%, transparent) !important; } /* ============================================================================ ACTION BUTTONS (from an-agent action catalog) ============================================================================ */ /* Base action button */ .action-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; margin: 0.5rem 0.25rem; border-radius: var(--radius-md); font-family: 'Orbitron', monospace; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; border: none; text-transform: uppercase; letter-spacing: 0.5px; } /* Interactive actions (forms, wizards) - Blue theme */ .action-btn.interactive { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4); } .action-btn.interactive:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(59, 130, 246, 0.5); background: linear-gradient(135deg, #60a5fa, #3b82f6); } /* Approval actions (biometric, signing) - Green theme */ .action-btn.approval { background: linear-gradient(135deg, #10b981, #059669); color: white; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4); } .action-btn.approval:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5); background: linear-gradient(135deg, #34d399, #10b981); } /* Notification actions - Subtle gray theme */ .action-btn.notification { background: linear-gradient(135deg, #4b5563, #374151); color: #e5e7eb; box-shadow: 0 2px 8px rgba(75, 85, 99, 0.3); } .action-btn.notification:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(75, 85, 99, 0.4); } /* Action button icon */ .action-btn .action-icon { font-size: 1.1rem; } /* Action button label */ .action-btn .action-label { white-space: nowrap; } /* Active/pressed state */ .action-btn:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } /* Disabled state */ .action-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Group of actions */ .markdown-content .action-group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; } .message.streaming .typing-indicator { color: var(--accent-red); animation: blink 1s infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Chat Input */ .chat-input { display: flex; gap: var(--spacing-sm); align-items: flex-end; } .chat-input-field { flex: 1; /* `--bar-button-size` ensures the textarea's collapsed height equals the canonical bar button height — same as `.chat-send-button` next to it, same as every panel-bar button. The chat input legitimately grows beyond this up to `max-height` when the user types multiple lines. */ min-height: var(--bar-button-size); max-height: 120px; padding: var(--spacing-sm) var(--spacing-md); background: var(--card-bg); border: 1px solid var(--primary-blue); border-radius: var(--radius-lg); color: var(--text-primary); font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; resize: none; outline: none; transition: all var(--duration-fast); } .chat-input-field:focus { box-shadow: var(--shadow-glow-blue); } .chat-input-field::placeholder { color: var(--text-muted); font-family: 'Orbitron', monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; } .chat-send-button { width: var(--bar-button-size); height: var(--bar-button-size); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-red-dark), var(--accent-red)); border: none; border-radius: var(--radius-lg); color: white; cursor: pointer; font-size: 18px; box-shadow: var(--shadow-glow-red); transition: all var(--duration-fast); } /* `.chat-scope-button` retired in PR Series A.4 hotfix (2026-05-11) — the corpus-override cycle button folded into the new D.B.O.M. picker semantics on `ChatBar`. The runtime API + storage path stay; only the chat-input affordance retires (functional re-introduction belongs on the D.B.O.M. workstream). */ .chat-send-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 30px var(--accent-red-glow); } .chat-send-button:disabled { background: var(--navy-dark); color: var(--text-muted); cursor: not-allowed; box-shadow: none; } .chat-disconnected { margin-top: var(--spacing-sm); padding: var(--spacing-sm); background: color-mix(in srgb, var(--status-error) 20%, transparent); border: 1px solid var(--accent-red); border-radius: var(--radius-sm); color: var(--accent-red); font-family: 'Orbitron', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; text-align: center; } /* `.chat-action-bar`, `.primary-domain-controls`, `.primary-domain-control`, and `.primary-domain-control--home` retired in PR Series A.4 hotfix (2026-05-11) — the chat panel's 3-row chrome collapsed to 2 rows per the wireframe. The chat-side quick-launchers moved into `.chat-bar__button--nav` on the new `ChatBar` component (Send + Receive only; Home + Services were redundant with the panel-bar's [X] / [Services] tab). ChatBar styles live alongside `.chat-input-field` further down the file (search "chat-bar" in styles.css). */ .domain-shell-panel { padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-md); height: 100%; } .domain-shell-title { font-family: 'Orbitron', monospace; font-size: 0.85rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--primary-blue); margin: 0; } .domain-shell-subtitle { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.5; } /* ============================================================================ SEND SHELL — Phase 1 of the Send/Receive/Products IA cutover. Method-first action surface: header + active-Entity line + horizontal method row + per-method form panel. Receive will reuse most of these classes once Phase 2 ships. ============================================================================ */ .send-shell-panel { display: flex; flex-direction: column; gap: 0; min-height: 0; padding-inline: var(--panel-edge-pad); padding-block-start: var(--panel-edge-pad); } .send-shell-header { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); padding-bottom: var(--spacing-md); } /* Context-only header (post the IA review): drop the redundant inner panel title — the panel chrome already shows it — and render only the active-Entity + Account context line. Tighter bottom padding because there's just one line of content now. */ .send-shell-header--context-only { padding-bottom: var(--spacing-sm); } .send-shell-title { margin: 0; font-family: 'Orbitron', monospace; font-size: 0.85rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--anviz-accent-primary); } .send-shell-subtitle { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; } /* Active operating context — Entity + Account, separated by a middle dot. Surfaces the two dimensions the user changes from Home so the Send / Receive panel makes its operating context immediately visible. The Entity + Account names render in the gold accent color with a soft text-shadow halo so they read as "this is the active selection" — same visual grammar (gold = active) we use on Home rows + the active method button. The ambient prefix copy stays muted so the names own the line's visual weight. */ .send-shell-active-context { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacing-xs); font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; color: var(--text-secondary); } .send-shell-active-context-prefix { color: var(--text-muted); } .send-shell-active-context strong { color: var(--anviz-accent-primary); font-weight: 700; letter-spacing: 0.4px; text-shadow: 0 0 8px color-mix(in srgb, var(--anviz-accent-primary) 35%, transparent); } .send-shell-active-context-separator { color: var(--text-muted); margin-inline: var(--spacing-xs); } .send-shell-empty-state { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--spacing-xl); } .send-shell-empty-message { margin: 0; max-width: 480px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary); } .send-shell-body { display: flex; flex-direction: column; gap: var(--spacing-md); flex: 1; min-height: 0; /* **Thumb-reach layout.** The body's children (amount, form, action stack) align toward the bottom so the controls the user actually presses live in the lower-half / thumb-reach zone on mobile. The header (one line of context) floats alone at the top; the empty space sits between header and the amount cluster, not between the form and the action buttons. The form area gets `flex: 0 1 auto` (don't grow, do shrink + scroll if it would overflow) — see `.send-method-content` below — so a short form doesn't expand to fill the panel and bias the cluster back toward the top. */ justify-content: flex-end; } /* Centered amount header — the primary view item per the IA review. Sits at the top of the amount/form/action cluster, larger than any other form input so the user sees the dollar value first. The currency suffix tracks the shell-level `TransferAmountContext` currency signal (defaults USD; P2P-on-chain overwrites with the selected asset). **Layout note:** uses a 3-column grid (`1fr auto 1fr`) so the input sits in the geometric center of the section, not shifted left by the right-side USD label. The two `1fr` columns balance whatever leftover space exists on either side; the input lives in the auto-centered middle column, and the currency label sits at the start of the right `1fr` column right next to the input. A flex-with-justify-center layout would have centered the group but that puts the visual weight (the input) off-center because the USD label adds width on one side only. */ .send-shell-amount { /* `flex: 1 1 auto` so the amount section grows to fill the empty vertical space between the header and the form cluster. The form keeps `flex: 0 1 auto` (don't grow) so it stays anchored just above the action stack; the amount absorbs whatever's left over. Combined with `align-content: center` on the grid below, the `0.00 USDC` row centers vertically in the open space — not pinned to the top, not pinned to the bottom. */ flex: 1 1 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; align-content: center; column-gap: var(--spacing-sm); padding-block: var(--spacing-md); min-height: 120px; /* Glowing breakline — navy blue accent + soft halo. The negative spread on the box-shadow keeps the glow tight to the bottom edge instead of haloing the whole section. Same treatment on `.send-action-stack` border-top so the two dividers read as one visual grammar. */ border-bottom: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 75%, transparent); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--anviz-accent-secondary) 65%, transparent); } .send-shell-amount-input { grid-column: 2; font-family: 'Orbitron', monospace; font-size: 2.5rem; font-weight: 700; text-align: center; letter-spacing: 1px; background: transparent; border: none; color: var(--patriot-white); width: 100%; min-width: 200px; max-width: 320px; padding: 0; transition: color var(--duration-fast); } .send-shell-amount-input:focus { outline: none; color: var(--anviz-accent-primary); } .send-shell-amount-input::placeholder { color: var(--text-muted); font-weight: 500; } .send-shell-amount-currency { grid-column: 3; justify-self: start; font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); } /* Method form area — sits between the amount header and the action stack. `flex: 0 1 auto` means: don't grow, do shrink + scroll internally if the form would overflow. Combined with `justify-content: flex-end` on the parent, this makes the form sit just above the action stack rather than stretching to fill the empty middle of the panel. */ .send-method-content { flex: 0 1 auto; overflow-y: auto; min-height: 0; max-height: 100%; } /* ============================================================================ ACTION STACK — the bottom-of-panel "game-controls" cluster. The method picker + the primary Send button together form one tactile control set. Visually grouped (top border, common block padding); the Send button at the bottom is the primary action — gold, larger, distinct from the method selectors above it. Receive uses the same chrome with the `--no-action` modifier (no Send button — credential display, not transaction). ============================================================================ */ .send-action-stack { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); padding-block: var(--spacing-sm) var(--spacing-md); /* Glowing breakline — same treatment as `.send-shell-amount`'s border-bottom but inverted (top edge, glow extends upward). Negative spread keeps the halo tight to the line. */ border-top: 1px solid color-mix(in srgb, var(--anviz-accent-secondary) 75%, transparent); box-shadow: 0 -4px 14px -4px color-mix(in srgb, var(--anviz-accent-secondary) 65%, transparent); } /* Method picker — stacked button list. Each button reads as a discrete control: full-width hit target, larger touch surface, gold-glow active state. */ .send-method-row { display: flex; flex-direction: column; gap: var(--spacing-xs); } .send-method-row-button { appearance: none; width: 100%; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--text-accent) 38%, transparent); background: color-mix(in srgb, var(--card-bg) 40%, transparent); color: var(--text-secondary); font-family: 'Orbitron', monospace; font-size: 0.78rem; font-weight: 600; letter-spacing: 1px; text-align: left; cursor: pointer; transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast); } .send-method-row-button:hover { border-color: var(--text-accent); color: var(--patriot-white); background: var(--interactive-hover-bg); } .send-method-row-button:focus-visible { outline: var(--interactive-focus-outline); outline-offset: var(--interactive-focus-offset); } .send-method-row-button.active { border-color: var(--anviz-accent-primary); color: var(--patriot-white); background: color-mix(in srgb, var(--anviz-accent-primary) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--anviz-accent-primary) 30%, transparent); } /* Placeholder methods (Card / Swap) read as "still selectable but not wired" — dashed border + muted color so the user sees the difference without hiding them. */ .send-method-row-button.placeholder { border-style: dashed; color: var(--text-muted); } /* `.send-action-row` — the bottom-of-stack peer-action container. Renders two equal-weight buttons split 50/50: Send shell: [ Swap ] [ Send via ] Receive shell: [ Swap ] [ Request ] The peer buttons themselves are `