/* ============================================================================
   an-viz-ui Design System
   CSS custom property-based styling for DOM components.
   Override --avui-* variables to theme.
   ============================================================================ */

/* === Defaults (Cyber Nebula — operator-companion default) ===
 *
 * Mirrors the `cyber_nebula` preset in
 * `core/an-hitlr/docs/design/tokens.toml` and
 * `core/an-hitlr/app-ios/App/Theme/AnTheme.swift`. Token names align
 * across iOS Swift (camelCase) and CSS (kebab-case) — same names mean
 * the same thing on every platform.
 *
 * Override `--avui-*` to re-skin. Themes shipped in
 * `crates/an-viz-ui/src/theme/mod.rs` (`Theme::cyber_nebula()`,
 * `Theme::cyber_nebula_violet()`, `Theme::cyber_punk_patriot()`,
 * `Theme::minimal_dark()`, `Theme::light()`).
 */
:root {
    --avui-bg: #08071A;
    --avui-bg-panel: rgba(17, 16, 43, 0.88);
    --avui-bg-card: #11102B;
    --avui-text: rgba(245, 245, 255, 0.94);
    --avui-text-muted: rgba(245, 245, 255, 0.55);
    --avui-accent: #3CEFEE;
    --avui-accent-hover: #5EFAEA;
    --avui-accent-secondary: #A765FF;
    --avui-danger: #FF5C7A;
    --avui-success: #4ADE80;
    --avui-warning: #F9C74F;
    --avui-border: rgba(167, 101, 255, 0.16);
    --avui-border-focus: rgba(60, 239, 238, 0.55);
    --avui-glow-accent: rgba(60, 239, 238, 0.42);
    --avui-glow-accent-secondary: rgba(167, 101, 255, 0.40);
    --avui-glass-fill: rgba(17, 16, 43, 0.72);
    --avui-glass-border: rgba(60, 239, 238, 0.22);
    --avui-scope-marketplace: #C9B48A;
    /* The one chrome exception: knock is a gold stroke on an otherwise
       mono mark. Same champagne as marketplace, scoped to the glyph. */
    --avui-knock: #C9B48A;
    --avui-radius: 8px;
    --avui-radius-lg: 14px;
    --avui-font: system-ui, 'SF Pro Text', sans-serif;
    --avui-font-mono: 'JetBrains Mono', 'SF Mono', 'IBM Plex Mono', monospace;
    --avui-font-size: 15px;
    --avui-transition: 0.22s cubic-bezier(0.32, 0.72, 0.0, 1.0);
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; }

/* === Buttons === */
.avui-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 16px; border-radius: var(--avui-radius);
    font-family: var(--avui-font); font-size: var(--avui-font-size);
    cursor: pointer; transition: all var(--avui-transition);
    border: 1px solid var(--avui-border); color: var(--avui-text);
    text-decoration: none; gap: 6px; white-space: nowrap;
}
.avui-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.avui-btn-primary {
    background: var(--avui-accent); border-color: var(--avui-accent); color: #fff;
}
.avui-btn-primary:hover:not(:disabled) { background: var(--avui-accent-hover); }
.avui-btn-secondary {
    background: transparent; border-color: var(--avui-accent); color: var(--avui-accent);
}
.avui-btn-secondary:hover:not(:disabled) { background: rgba(59, 130, 246, 0.1); }
.avui-btn-icon {
    width: 36px; height: 36px; padding: 0;
    background: transparent; border-color: transparent; font-size: 16px;
}
.avui-btn-icon:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); }
.avui-btn-group { display: flex; gap: 8px; align-items: center; }

/* === Card === */
.avui-card {
    background: var(--avui-bg-card); border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius-lg); overflow: hidden;
}
.avui-card-header {
    padding: 12px 16px; border-bottom: 1px solid var(--avui-border);
    background: rgba(255, 255, 255, 0.02);
}
.avui-card-title {
    margin: 0; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--avui-accent);
}
.avui-card-body { padding: 16px; }

/* === Modal === */
.avui-modal-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.avui-modal {
    background: var(--avui-bg-card); border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius-lg); min-width: 400px; max-width: 90vw;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.avui-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--avui-border);
}
.avui-modal-title { margin: 0; font-size: 16px; color: var(--avui-text); }
.avui-modal-close {
    background: none; border: none; color: var(--avui-text-muted);
    font-size: 18px; cursor: pointer; padding: 4px;
}
.avui-modal-close:hover { color: var(--avui-text); }
.avui-modal-body { padding: 20px; color: var(--avui-text); }
.avui-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 16px 20px; border-top: 1px solid var(--avui-border);
}

/* === Tabs === */
.avui-tabs-header {
    display: flex; gap: 2px; border-bottom: 1px solid var(--avui-border);
    padding: 0 8px;
}
.avui-tab-btn {
    padding: 8px 16px; border: none; background: transparent;
    color: var(--avui-text-muted); font-family: var(--avui-font);
    font-size: var(--avui-font-size); cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--avui-transition);
}
.avui-tab-btn:hover { color: var(--avui-text); }
.avui-tab-btn.active {
    color: var(--avui-accent); border-bottom-color: var(--avui-accent);
}
.avui-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
    border-radius: 9px; font-size: 10px; font-weight: 600;
    background: var(--avui-accent); color: #fff;
}
.avui-tabs-content { padding: 16px; }

/* === Loading / Error / Empty === */
.avui-loading-spinner {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 40px; gap: 16px;
    color: var(--avui-text-muted);
}
.avui-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--avui-border);
    border-top-color: var(--avui-accent);
    border-radius: 50%;
    animation: avui-spin 0.8s linear infinite;
}
@keyframes avui-spin { to { transform: rotate(360deg); } }
.avui-loading-skeleton { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.avui-skeleton-line {
    height: 14px; border-radius: 4px;
    background: linear-gradient(90deg, var(--avui-border) 25%, rgba(255,255,255,0.06) 50%, var(--avui-border) 75%);
    background-size: 200% 100%;
    animation: avui-shimmer 1.5s ease-in-out infinite;
}
@keyframes avui-shimmer { to { background-position: -200% 0; } }
.avui-error-state, .avui-empty-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 40px; gap: 12px; text-align: center;
}
.avui-error-icon, .avui-empty-icon { font-size: 2rem; }
.avui-error-message { color: var(--avui-danger); }
.avui-empty-message { color: var(--avui-text-muted); }
.avui-empty-title { color: var(--avui-text); margin: 0; }

/* === Grid === */
.avui-grid-item {
    background: var(--avui-bg-card); border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius); overflow: hidden;
    transition: border-color var(--avui-transition);
}
.avui-grid-item:hover { border-color: var(--avui-accent); }

/* === Carousel === */
.avui-carousel { position: relative; }
.avui-carousel-track::-webkit-scrollbar { display: none; }
.avui-carousel-track { scrollbar-width: none; }
.avui-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--avui-bg-panel); border: 1px solid var(--avui-border);
    color: var(--avui-text); font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; backdrop-filter: blur(8px);
}
.avui-carousel-arrow:hover { border-color: var(--avui-accent); }
.avui-carousel-arrow-left { left: 8px; }
.avui-carousel-arrow-right { right: 8px; }

/* === Forms === */
.avui-input-wrapper { display: flex; flex-direction: column; gap: 6px; }
.avui-input-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--avui-text-muted);
}
.avui-input, .avui-textarea, .avui-select {
    padding: 8px 12px; border-radius: var(--avui-radius);
    border: 1px solid var(--avui-border); background: rgba(255,255,255,0.04);
    color: var(--avui-text); font-family: var(--avui-font);
    font-size: var(--avui-font-size);
    transition: border-color var(--avui-transition);
}
.avui-input:focus, .avui-textarea:focus, .avui-select:focus {
    outline: none; border-color: var(--avui-border-focus);
}
.avui-input:disabled, .avui-textarea:disabled, .avui-select:disabled {
    opacity: 0.4; cursor: not-allowed;
}
.avui-checkbox {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    color: var(--avui-text); font-size: var(--avui-font-size);
}
.avui-form-field { display: flex; flex-direction: column; gap: 6px; }
.avui-form-label { font-size: 12px; color: var(--avui-text-muted); font-weight: 500; }
.avui-form-error { font-size: 11px; color: var(--avui-danger); margin: 0; }
.avui-required { color: var(--avui-danger); margin-left: 2px; }
.avui-form-group {
    border: 1px solid var(--avui-border); border-radius: var(--avui-radius);
    padding: 16px; display: flex; flex-direction: column; gap: 16px;
}
.avui-form-legend {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--avui-accent); padding: 0 8px;
}

/* === Layout === */
.avui-page {
    display: flex; flex-direction: column; min-height: 100vh;
    background: var(--avui-bg); color: var(--avui-text);
    font-family: var(--avui-font); font-size: var(--avui-font-size);
}
.avui-page-header {
    flex-shrink: 0; border-bottom: 1px solid var(--avui-border);
    background: var(--avui-bg-panel);
}
.avui-page-main { flex: 1; overflow-y: auto; }
.avui-page-footer {
    flex-shrink: 0; border-top: 1px solid var(--avui-border);
    background: var(--avui-bg-panel);
}
.avui-sidebar {
    flex-shrink: 0; border-right: 1px solid var(--avui-border);
    background: var(--avui-bg-panel); transition: width var(--avui-transition);
    overflow: hidden;
}
.avui-sidebar-right { border-right: none; border-left: 1px solid var(--avui-border); }
.avui-sidebar-content { padding: 16px; min-width: 280px; }
.avui-panel { background: var(--avui-bg-card); }
.avui-panel-bordered { border: 1px solid var(--avui-border); border-radius: var(--avui-radius-lg); }
.avui-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--avui-border);
}
.avui-panel-title {
    margin: 0; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--avui-accent);
}
.avui-panel-actions { display: flex; gap: 4px; }
.avui-panel-body { padding: 16px; }

/* === Links === */
.avui-link { color: var(--avui-accent); text-decoration: none; }
.avui-link:hover { color: var(--avui-accent-hover); text-decoration: underline; }

/* === Section notebook cell === */
.avui-section-cell { position: relative; }
.avui-section-cell-content { margin-bottom: 0.75rem; }
.avui-section-cell-interaction {
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius-lg);
    background: color-mix(in srgb, var(--avui-bg-panel) 88%, transparent);
    padding: 0.75rem 0.85rem 0.9rem;
}
.avui-section-cell-toolbar {
    display: flex; gap: 0.5rem; justify-content: flex-end; margin-bottom: 0.4rem;
}
.avui-section-cell-clear,
.avui-section-cell-unbind {
    background: transparent; border: none; color: var(--avui-text-muted);
    font-family: var(--avui-font-mono); font-size: 10px; letter-spacing: 0.06em;
    text-transform: uppercase; cursor: pointer; padding: 0;
}
.avui-section-cell-clear:hover,
.avui-section-cell-unbind:hover { color: var(--avui-accent); }

/* === Section focus indicator (pulse + sparkline) === */
.avui-section-focus {
    position: relative;
    border-radius: var(--avui-radius-lg);
    transition: box-shadow var(--avui-transition);
    --avui-progress: 0%;
}
.avui-section-focus--focused {
    box-shadow:
        0 0 0 1px var(--avui-border-focus),
        0 0 32px -8px var(--avui-glow-accent);
    animation: avui-focus-pulse 3.2s ease-in-out infinite alternate;
}
.avui-section-focus--multi.avui-section-focus--phase-b {
    animation-delay: -1.6s;
}
.avui-section-focus--processing {
    animation: none;
    box-shadow: 0 0 0 1px var(--avui-border-focus);
}
.avui-section-focus--error {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--avui-warning) 55%, transparent);
}
.avui-section-focus-sparkline {
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    pointer-events: none; opacity: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--avui-accent) var(--avui-progress),
        transparent calc(var(--avui-progress) + 8%)
    );
    transition: opacity 0.25s ease;
}
.avui-section-focus--processing .avui-section-focus-sparkline { opacity: 0.85; }
.avui-section-focus--error .avui-section-focus-sparkline {
    opacity: 0.7;
    background: linear-gradient(90deg, transparent, var(--avui-warning), transparent);
}
@keyframes avui-focus-pulse {
    from {
        box-shadow:
            0 0 0 1px var(--avui-border-focus),
            0 0 24px -10px color-mix(in srgb, var(--avui-glow-accent) 55%, transparent);
    }
    to {
        box-shadow:
            0 0 0 1px var(--avui-border-focus),
            0 0 40px -6px var(--avui-glow-accent);
    }
}
@media (prefers-reduced-motion: reduce) {
    .avui-section-focus--focused { animation: none; }
}

/* === Interaction bar === */
.avui-interaction-bar { display: flex; flex-direction: column; gap: 0.55rem; }
.avui-interaction-modes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.avui-interaction-mode {
    font-family: var(--avui-font-mono); font-size: 11px; letter-spacing: 0.04em;
    padding: 0.25rem 0.55rem; border-radius: 999px; border: 1px solid var(--avui-border);
    background: transparent; color: var(--avui-text-muted); cursor: pointer;
}
.avui-interaction-mode:hover:not(:disabled) {
    color: var(--avui-text); border-color: var(--avui-border-focus);
}
.avui-interaction-mode-active {
    color: var(--avui-bg); background: var(--avui-accent); border-color: var(--avui-accent);
}
.avui-interaction-mode-soon { opacity: 0.55; cursor: not-allowed; }
.avui-interaction-mode-soon-tag {
    margin-left: 0.3rem; font-size: 9px; text-transform: uppercase; opacity: 0.8;
}
.avui-interaction-input-row { display: flex; gap: 0.4rem; }
.avui-interaction-input {
    flex: 1; min-width: 0; padding: 0.55rem 0.7rem;
    border-radius: var(--avui-radius); border: 1px solid var(--avui-border);
    background: color-mix(in srgb, var(--avui-bg) 70%, transparent);
    color: var(--avui-text); font-family: var(--avui-font); font-size: 13px;
}
.avui-interaction-input:focus {
    outline: none; border-color: var(--avui-border-focus);
}
.avui-interaction-input::placeholder { color: var(--avui-text-muted); }
.avui-interaction-input:disabled { opacity: 0.55; }
.avui-interaction-submit {
    padding: 0.55rem 0.85rem; border-radius: var(--avui-radius);
    border: 1px solid var(--avui-accent); background: var(--avui-accent);
    color: var(--avui-bg); cursor: pointer; font-weight: 600;
}
.avui-interaction-submit:hover:not(:disabled) { background: var(--avui-accent-hover); }
.avui-interaction-submit:disabled { opacity: 0.45; cursor: not-allowed; }

/* === Atmosphere layers === */
.avui-atmosphere {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
    --avui-px: 0; --avui-py: 0;
}
.avui-atmosphere-void {
    position: absolute; inset: 0; background: var(--avui-bg);
}
.avui-atmosphere-nebula {
    position: absolute; width: 70%; height: 55%; border-radius: 50%;
    filter: blur(90px); opacity: 0.55;
    transform: translate(
        calc(var(--avui-px) * 12px),
        calc(var(--avui-py) * 8px)
    );
}
.avui-atmosphere-nebula-a {
    left: 10%; top: 8%;
    background: radial-gradient(circle, var(--avui-glow-accent) 0%, transparent 70%);
    animation: avui-nebula-a 72s ease-in-out infinite alternate;
}
.avui-atmosphere-nebula-b {
    right: 5%; top: 30%;
    background: radial-gradient(circle, var(--avui-glow-accent-secondary) 0%, transparent 70%);
    animation: avui-nebula-b 88s ease-in-out infinite alternate;
}
.avui-atmosphere-nebula-c {
    left: 30%; bottom: 5%;
    background: radial-gradient(circle, color-mix(in srgb, var(--avui-scope-marketplace) 40%, transparent) 0%, transparent 70%);
    animation: avui-nebula-c 96s ease-in-out infinite alternate;
}
@keyframes avui-nebula-a { from { transform: translate(-2%, 0); } to { transform: translate(3%, 2%); } }
@keyframes avui-nebula-b { from { transform: translate(2%, -1%); } to { transform: translate(-3%, 2%); } }
@keyframes avui-nebula-c { from { transform: translate(0, 2%); } to { transform: translate(2%, -2%); } }
.avui-atmosphere-grain {
    position: absolute; inset: 0; opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.avui-atmosphere-horizon-grid {
    position: absolute; left: -20%; right: -20%; bottom: 12%; height: 50%;
    transform-origin: 50% 100%;
    transform: perspective(420px) rotateX(58deg)
        translateX(calc(var(--avui-px) * 6px))
        translateY(calc(var(--avui-py) * 4px));
    background-image:
        linear-gradient(color-mix(in srgb, var(--avui-accent) 22%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--avui-accent) 16%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to top, black 0%, transparent 88%);
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 88%);
}
.avui-atmosphere-horizon-line {
    position: absolute; left: 8%; right: 8%; top: 48%; height: 1px;
    background: linear-gradient(
        90deg, transparent,
        color-mix(in srgb, var(--avui-accent) 45%, transparent) 20%,
        color-mix(in srgb, var(--avui-scope-marketplace) 35%, transparent) 50%,
        color-mix(in srgb, var(--avui-accent) 45%, transparent) 80%,
        transparent
    );
}
.avui-atmosphere-particles {
    position: absolute; inset: 0; width: 100%; height: 100%;
    transform: translate(
        calc(var(--avui-px) * 18px),
        calc(var(--avui-py) * 12px)
    );
}
.avui-atmosphere-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.4) 100%);
}
.avui-atmosphere-head-glow {
    position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, var(--avui-glow-accent) 0%, transparent 70%);
    opacity: 0.12; transition: left 0.05s linear, top 0.05s linear, opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
    .avui-atmosphere-nebula-a,
    .avui-atmosphere-nebula-b,
    .avui-atmosphere-nebula-c { animation: none; }
}

/* === Scope tether === */
.avui-scope-tether {
    position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 40;
    overflow: visible;
}
.avui-scope-tether--hidden { display: none; }
.avui-scope-tether-path {
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Soft under-bloom — same path as spark (no parallel double-rail). */
.avui-scope-tether-path--glow {
    stroke: color-mix(in srgb, var(--avui-accent) 50%, transparent);
    stroke-width: 5;
    opacity: 0.4;
}
/* Sparkline stroke: dashed energy traveling orb → cell. */
.avui-scope-tether-path--spark {
    stroke: color-mix(in srgb, var(--avui-accent-hover) 82%, #fff 18%);
    stroke-width: 2.25;
    stroke-dasharray: 7 11;
    opacity: 0.95;
    animation: avui-tether-spark 0.85s linear infinite;
    filter: drop-shadow(0 0 4px var(--avui-glow-accent));
}
.avui-scope-tether-packet {
    fill: #fff;
    stroke: var(--avui-accent-hover);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 6px var(--avui-glow-accent));
}
.avui-scope-tether-node {
    fill: var(--avui-accent-hover);
    stroke: color-mix(in srgb, var(--avui-accent-hover) 40%, #fff 60%);
    stroke-width: 1.25;
}
.avui-scope-tether-node--head { opacity: 0.9; }
.avui-scope-tether-node--cell {
    opacity: 1;
    transform-box: fill-box;
    transform-origin: center;
    animation: avui-tether-node-pulse 1.8s ease-in-out infinite;
}
.avui-scope-tether--dragging .avui-scope-tether-path--glow { opacity: 0.65; }
.avui-scope-tether--dragging .avui-scope-tether-path--spark {
    opacity: 1;
    animation-duration: 0.55s;
}
/* Off-screen target: relationship stays drawn (path exits the viewport), quieter. */
.avui-scope-tether-link--offscreen .avui-scope-tether-path--glow { opacity: 0.22; }
.avui-scope-tether-link--offscreen .avui-scope-tether-path--spark {
    opacity: 0.5;
    stroke-width: 1.75;
}
.avui-scope-tether-link--offscreen .avui-scope-tether-packet { opacity: 0.55; }
@keyframes avui-tether-spark {
    to { stroke-dashoffset: -36; }
}
@keyframes avui-tether-node-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.85;
        filter: drop-shadow(0 0 2px var(--avui-glow-accent));
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
        filter: drop-shadow(0 0 7px var(--avui-glow-accent));
    }
}
@media (prefers-reduced-motion: reduce) {
    .avui-scope-tether-path--spark,
    .avui-scope-tether-node--cell {
        animation: none;
    }
    .avui-scope-tether-packet { display: none; }
    .avui-scope-tether-path--spark { stroke-dasharray: 5 8; opacity: 0.95; }
}

/* === Cmd head (notebook remote) === */
.avui-cmd-head {
    position: fixed; z-index: 50; width: 55px; height: 55px;
    touch-action: none; user-select: none;
    /* Stacked glass: info sheet above, chat controller below. */
    --avui-cmd-head-controller-h: 3.5rem;
    --avui-cmd-head-stack-gap: 0.5rem;
}
.avui-cmd-head--dragging,
.avui-cmd-head--coasting {
    /* No layout transitions while dragging / coasting — avoids perceived "reset". */
    transition: none;
}
.avui-cmd-head--dragging .avui-cmd-head-sheet,
.avui-cmd-head-sheet--closed {
    /* Hide without unmounting — answer body + scroll survive open/close,
       and the liquid-open animation does not re-fire on every toggle. */
    visibility: hidden; pointer-events: none;
}
.avui-cmd-head-sheet--closed {
    animation: none;
    opacity: 0;
}
.avui-cmd-head-orb {
    width: 55px; height: 55px; border-radius: 50%;
    position: relative; cursor: grab;
    isolation: isolate;
    transition: box-shadow 180ms ease, transform 180ms ease;
    transform-origin: 50% 50%;
}
.avui-cmd-head:hover .avui-cmd-head-orb {
    transform: scale(1.04);
}
.avui-cmd-head--dragging .avui-cmd-head-orb {
    cursor: grabbing;
    transform: scale(1.08);
    transition: none;
}
.avui-cmd-head--coasting .avui-cmd-head-orb {
    cursor: grabbing;
    transform: scale(1.05);
    transition: none;
}
.avui-cmd-head-orb-halo {
    position: absolute; inset: -10px; border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--avui-accent) 45%, transparent),
        transparent 70%
    );
    opacity: 0.55;
    animation: avui-orb-breathe 3.6s ease-in-out infinite;
    z-index: 0;
}
.avui-cmd-head-orb-glass {
    position: absolute; inset: 0; border-radius: 50%;
    background: var(--avui-glass-fill);
    border: 1px solid var(--avui-glass-border);
    backdrop-filter: blur(10px) saturate(1.35);
    -webkit-backdrop-filter: blur(10px) saturate(1.35);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    z-index: 1;
}
.avui-cmd-head-orb-core {
    position: absolute; inset: 9px; border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--avui-accent-hover) 90%, #fff), transparent 42%),
        radial-gradient(circle at 60% 70%, color-mix(in srgb, var(--avui-accent) 55%, #000), var(--avui-accent));
    box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.35);
    z-index: 2;
}
.avui-cmd-head-orb-shine {
    position: absolute; inset: 11px 14px auto 11px; height: 38%;
    border-radius: 50%;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.45),
        rgba(255, 255, 255, 0.05) 55%,
        transparent
    );
    z-index: 3;
    pointer-events: none;
}
.avui-cmd-head-orb-iris {
    position: absolute; left: 50%; top: 52%;
    width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), transparent 45%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--avui-bg) 35%, #000), #0a0c0d);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--avui-accent-hover) 70%, transparent);
    z-index: 4;
    pointer-events: none;
}
.avui-cmd-head-orb-ring {
    position: absolute; inset: 2px; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--avui-glass-border) 80%, transparent);
    border-top-color: color-mix(in srgb, var(--avui-accent-hover) 65%, transparent);
    opacity: 0.85;
    z-index: 5;
    pointer-events: none;
}
.avui-cmd-head--processing .avui-cmd-head-orb-ring {
    animation: avui-orb-spin 1.2s linear infinite;
    border-top-color: var(--avui-accent-hover);
}
.avui-cmd-head--processing .avui-cmd-head-orb-halo {
    opacity: 0.85;
    animation: avui-orb-breathe 1.4s ease-in-out infinite;
}
.avui-cmd-head--error .avui-cmd-head-orb-core {
    background:
        radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--avui-warning) 80%, #fff), transparent 42%),
        radial-gradient(circle at 60% 70%, color-mix(in srgb, var(--avui-warning) 55%, #000), var(--avui-warning));
}
.avui-cmd-head--marketplace .avui-cmd-head-orb-core {
    background:
        radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--avui-scope-marketplace) 85%, #fff), transparent 42%),
        radial-gradient(circle at 60% 70%, color-mix(in srgb, var(--avui-scope-marketplace) 50%, #000), var(--avui-scope-marketplace));
}
.avui-cmd-head--scoped .avui-cmd-head-orb-iris {
    box-shadow: 0 0 0 2px var(--avui-accent);
}

/* Idle beckon — noticeability for first-time visitors (paused on hover / use). */
.avui-cmd-head--beckon .avui-cmd-head-orb {
    animation: avui-orb-beckon 2.8s ease-in-out infinite;
}
.avui-cmd-head--beckon .avui-cmd-head-orb-ring {
    animation: avui-orb-spin 6.5s linear infinite;
    border-top-color: color-mix(in srgb, var(--avui-accent-hover) 85%, transparent);
    opacity: 1;
}
.avui-cmd-head--beckon .avui-cmd-head-orb-halo {
    animation: avui-orb-beckon-halo 2.4s ease-in-out infinite;
}
.avui-cmd-head--beckon:hover .avui-cmd-head-orb,
.avui-cmd-head--beckon:focus-visible .avui-cmd-head-orb {
    animation: none;
    transform: scale(1.04);
}
.avui-cmd-head--beckon:hover .avui-cmd-head-orb-ring,
.avui-cmd-head--beckon:focus-visible .avui-cmd-head-orb-ring {
    animation: none;
}
.avui-cmd-head--beckon:hover .avui-cmd-head-orb-halo,
.avui-cmd-head--beckon:focus-visible .avui-cmd-head-orb-halo {
    animation: avui-orb-breathe 3.6s ease-in-out infinite;
}

@keyframes avui-orb-spin { to { transform: rotate(360deg); } }
@keyframes avui-orb-breathe {
    0%, 100% { transform: scale(0.92); opacity: 0.4; }
    50% { transform: scale(1.08); opacity: 0.7; }
}
@keyframes avui-orb-beckon {
    0%, 100% { transform: rotate(-5deg) scale(1); }
    40% { transform: rotate(6deg) scale(1.07); }
    70% { transform: rotate(-3deg) scale(1.03); }
}
@keyframes avui-orb-beckon-halo {
    0%, 100% { transform: scale(0.88); opacity: 0.35; }
    50% { transform: scale(1.22); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .avui-cmd-head--beckon .avui-cmd-head-orb,
    .avui-cmd-head--beckon .avui-cmd-head-orb-ring,
    .avui-cmd-head--beckon .avui-cmd-head-orb-halo {
        animation: none;
    }
}

.avui-cmd-head-sheet {
    position: absolute; right: 0; left: auto;
    bottom: calc(64px + var(--avui-cmd-head-controller-h) + var(--avui-cmd-head-stack-gap));
    display: flex; flex-direction: column; gap: 0.75rem;
    min-width: 280px; min-height: 220px;
    /* Never let a tall/resized sheet run off the top of the viewport and
       mangle background content. Reserves the controller stack + orb + a
       top breathing margin. Mobile overrides to none (fullscreen sheet). */
    max-height: calc(100dvh - var(--avui-cmd-head-controller-h) - var(--avui-cmd-head-stack-gap) - 140px);
    padding: 1rem 1.05rem 1.15rem;
    border-radius: var(--avui-radius-lg);
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, #e8f0ff 14%, transparent) 0%,
            transparent 42%,
            color-mix(in srgb, #9eb6d4 8%, transparent) 70%,
            transparent 100%
        ),
        var(--avui-glass-fill);
    border: 1px solid var(--avui-glass-border);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    color: var(--avui-text);
    overflow: hidden;
    transform-origin: 100% 100%;
    /* Transform/opacity only — filter + backdrop-filter blanks children in WebKit/Chromium. */
    animation: avui-sheet-liquid-open 0.58s cubic-bezier(0.2, 1.05, 0.32, 1) both;
}
.avui-cmd-head-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        108deg,
        transparent 30%,
        rgba(255, 255, 255, 0.06) 44%,
        rgba(230, 240, 255, 0.38) 50%,
        rgba(160, 190, 220, 0.14) 56%,
        transparent 70%
    );
    background-size: 220% 100%;
    background-position: 120% 0;
    animation: avui-sheet-liquid-sheen 0.75s ease-out 0.04s both;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}
.avui-cmd-head-sheet > * {
    position: relative;
    z-index: 1;
}
/* Floating chat controller — its own glass bar below the info sheet.
   Using the controller generates the sheet above (cmd-head spec). */
.avui-cmd-head-controller {
    position: absolute; right: 0; bottom: 64px;
    display: flex; flex-direction: column;
    min-width: 280px;
    padding: 0.5rem 0.6rem;
    border-radius: var(--avui-radius-lg);
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, #e8f0ff 14%, transparent) 0%,
            transparent 42%,
            color-mix(in srgb, #9eb6d4 8%, transparent) 70%,
            transparent 100%
        ),
        var(--avui-glass-fill);
    border: 1px solid var(--avui-glass-border);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    color: var(--avui-text);
    box-sizing: border-box;
    transform-origin: 100% 100%;
    animation: avui-sheet-liquid-open 0.5s cubic-bezier(0.2, 1.05, 0.32, 1) both;
}
.avui-cmd-head-controller .avui-cmd-head-input-row {
    margin: 0;
}
.avui-cmd-head--dragging .avui-cmd-head-controller,
.avui-cmd-head-controller--closed {
    /* Hide without unmounting (keeps pointer capture + input value stable). */
    visibility: hidden; pointer-events: none;
}
.avui-cmd-head-controller--closed {
    animation: none;
    opacity: 0;
}
.avui-cmd-head-sheet--resizing {
    user-select: none;
    transition: none;
    animation: none;
}
.avui-cmd-head-sheet--resizing::before {
    animation: none;
    opacity: 0;
}
@keyframes avui-sheet-liquid-open {
    0% {
        opacity: 0;
        transform: scale(0.22, 0.16) translate(8px, 14px);
    }
    58% {
        opacity: 1;
        transform: scale(1.012, 1.018) translate(0, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
}
@keyframes avui-sheet-liquid-sheen {
    0% { opacity: 0; background-position: 120% 0; }
    35% { opacity: 0.85; }
    100% { opacity: 0; background-position: -40% 0; }
}
.avui-cmd-head-sheet-close {
    display: none;
}
.avui-cmd-head-resize-host {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.avui-cmd-head-resize-host > * {
    pointer-events: auto;
}
.avui-cmd-head-scope {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.avui-cmd-head-scope-label {
    display: block; font-family: var(--avui-font-mono); font-size: 10px;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--avui-text-muted);
    margin: 0;
}
.avui-cmd-head-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.avui-cmd-head-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-family: var(--avui-font-mono); font-size: 10px;
    padding: 0.2rem 0.45rem; border-radius: 999px;
    border: 1px solid var(--avui-border); background: transparent;
    color: var(--avui-text); cursor: pointer;
}
.avui-cmd-head-chip-x { opacity: 0.6; }
.avui-cmd-head-clear {
    background: transparent; border: none; color: var(--avui-text-muted);
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer;
    padding: 0.2rem 0.25rem;
}
.avui-cmd-head-scope-hint {
    margin: 0; font-size: 11px; line-height: 1.4;
    color: var(--avui-text-muted);
}
.avui-cmd-head-input-row {
    display: flex; align-items: stretch; gap: 0.5rem; flex: 0 0 auto;
}
/*
 * Canonical field pattern: chrome + padding on a wrapper; naked <input> inside.
 * Safari/WebKit does not honor vertical padding on text inputs reliably —
 * padding on a block/flex container always works.
 */
.avui-cmd-head-field {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 2.5rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--avui-radius);
    border: 1px solid var(--avui-border);
    background: color-mix(in srgb, var(--avui-bg) 55%, transparent);
    cursor: text;
}
.avui-cmd-head-field:focus-within {
    border-color: var(--avui-border-focus);
}
.avui-cmd-head-input {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--avui-text);
    font: inherit;
    font-size: 13px;
    line-height: 1.35;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
.avui-cmd-head-input:disabled {
    opacity: 0.55;
}
.avui-cmd-head-send {
    flex: 0 0 auto;
    min-height: 2.5rem; min-width: 3.25rem;
    padding: 0 0.9rem; border-radius: var(--avui-radius);
    border: 1px solid var(--avui-accent); background: var(--avui-accent);
    color: var(--avui-bg); font-size: 12px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box;
}
.avui-cmd-head-body {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    margin-top: 0.1rem;
    padding: 0.65rem 0.1rem 0.15rem 0;
}
.avui-cmd-head-body .avui-answer-stream { margin: 0; }
.avui-cmd-head-body .avui-answer-placeholder {
    font-size: 12px; line-height: 1.45; color: var(--avui-text-muted);
}
.avui-cmd-head-body .avui-timing-profile { margin-top: 0.35rem; }
/* Corpus scope footer — ALL scope data (label + chips + hint) anchors the
   bottom of the info panel, just above the controller. The top of the pane
   is the answer body alone, so nothing crowds the top edge. */
.avui-cmd-head-sheet-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    margin-top: 0.1rem;
    padding: 0.6rem 0.1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--avui-border) 65%, transparent);
}
.avui-cmd-head-sheet-footer .avui-cmd-head-scope-hint {
    margin: 0;
}
.avui-cmd-head-resize {
    position: absolute; z-index: 2; touch-action: none;
    background: transparent;
}
.avui-cmd-head-resize--left {
    top: 16px; bottom: 8px; left: 0; width: 12px;
    cursor: ew-resize;
}
.avui-cmd-head-resize--top {
    top: 0; left: 16px; right: 8px; height: 12px;
    cursor: ns-resize;
}
.avui-cmd-head-resize--corner {
    top: 0; left: 0; width: 22px; height: 22px;
    cursor: nwse-resize;
    border-top-left-radius: var(--avui-radius-lg);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--avui-accent) 70%, transparent) 0 2px,
            transparent 2px 5px,
            color-mix(in srgb, var(--avui-accent) 45%, transparent) 5px 7px,
            transparent 7px);
    opacity: 0.7;
}
.avui-cmd-head-resize--left:hover,
.avui-cmd-head-sheet--resizing .avui-cmd-head-resize--left {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--avui-accent) 35%, transparent),
        transparent
    );
}
.avui-cmd-head-resize--top:hover,
.avui-cmd-head-sheet--resizing .avui-cmd-head-resize--top {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--avui-accent) 35%, transparent),
        transparent
    );
}
.avui-cmd-head-resize--corner:hover,
.avui-cmd-head-sheet--resizing .avui-cmd-head-resize--corner { opacity: 1; }
body.avui-cmd-head-gesture {
    cursor: grabbing !important;
    user-select: none !important;
}
body.avui-cmd-head-gesture * {
    cursor: inherit !important;
}

/* Mobile: bottom-row dock + fullscreen sheet that collapses to the orb */
.avui-cmd-head--mobile {
    height: 55px; width: auto; min-width: 55px;
    --avui-cmd-head-controller-h: 4rem;
    --avui-cmd-head-stack-gap: 0.4rem;
}
.avui-cmd-head--mobile.avui-cmd-head--expanded {
    z-index: 80;
}
.avui-cmd-head--mobile.avui-cmd-head--expanded .avui-cmd-head-orb {
    position: relative;
    z-index: 3;
}
.avui-cmd-head--mobile .avui-cmd-head-sheet {
    position: fixed;
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    z-index: 2;
    border-radius: 0;
    /* Denser fill so landing nav doesn’t read through the sheet chrome. */
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, #e8f0ff 10%, transparent) 0%,
            transparent 42%,
            color-mix(in srgb, #9eb6d4 6%, transparent) 70%,
            transparent 100%
        ),
        rgba(11, 13, 14, 0.94);
    padding:
        max(1.1rem, env(safe-area-inset-top, 0px))
        max(1.1rem, env(safe-area-inset-right, 0px))
        calc(var(--avui-cmd-head-controller-h) + var(--avui-cmd-head-stack-gap) + env(safe-area-inset-bottom, 0px))
        max(1.1rem, env(safe-area-inset-left, 0px));
    transform-origin: 50% 100%;
    animation: avui-sheet-mobile-open 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.avui-cmd-head--mobile .avui-cmd-head-sheet--closing {
    animation: avui-sheet-mobile-close 0.34s cubic-bezier(0.4, 0, 0.2, 1) both;
    pointer-events: none;
}
.avui-cmd-head--mobile .avui-cmd-head-sheet-footer {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.avui-cmd-head--mobile .avui-cmd-head-scope {
    flex: 1 1 auto;
}
.avui-cmd-head--mobile .avui-cmd-head-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0 0.85rem;
    border-radius: var(--avui-radius);
    border: 1px solid var(--avui-border);
    background: color-mix(in srgb, var(--avui-bg) 55%, transparent);
    color: var(--avui-text);
    font-family: var(--avui-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.avui-cmd-head--mobile .avui-cmd-head-field {
    min-height: 3rem;
    padding: 0.85rem 1.15rem;
}
.avui-cmd-head--mobile .avui-cmd-head-input {
    font-size: 16px; /* avoid iOS focus zoom */
    line-height: 1.35;
}
.avui-cmd-head--mobile .avui-cmd-head-input::placeholder {
    opacity: 0.72;
}
.avui-cmd-head--mobile .avui-cmd-head-send {
    min-height: 3rem;
    padding: 0 1.1rem;
}
.avui-cmd-head--mobile .avui-cmd-head-input-row {
    gap: 0.65rem;
    margin-top: 0.15rem;
}
/* Mobile: controller docks at the bottom of the fullscreen sheet. */
.avui-cmd-head--mobile .avui-cmd-head-controller {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    min-width: 0;
    border-radius: 0;
    z-index: 4;
    padding:
        0.5rem max(1.1rem, env(safe-area-inset-right, 0px))
        calc(0.55rem + env(safe-area-inset-bottom, 0px))
        max(1.1rem, env(safe-area-inset-left, 0px));
    transform-origin: 50% 100%;
    animation: avui-sheet-mobile-open 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.avui-cmd-head--mobile .avui-cmd-head-body {
    flex: 1 1 auto;
    min-height: 0;
}
body.avui-cmd-head-sheet-open,
body.avui-cmd-head-sheet-open .landing-shell {
    overflow: hidden !important;
    overscroll-behavior: none;
}
@keyframes avui-sheet-mobile-open {
    0% {
        opacity: 0.75;
        transform: translateY(18%) scale(0.2, 0.14);
        border-radius: 28px;
    }
    62% {
        opacity: 1;
        transform: translateY(0) scale(1.01, 1.015);
        border-radius: 8px;
    }
    100% {
        opacity: 1;
        transform: none;
        border-radius: 0;
    }
}
@keyframes avui-sheet-mobile-close {
    0% {
        opacity: 1;
        transform: none;
        border-radius: 0;
    }
    100% {
        opacity: 0.55;
        transform: translateY(22%) scale(0.18, 0.12);
        border-radius: 28px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .avui-cmd-head--processing .avui-cmd-head-orb-ring,
    .avui-cmd-head-orb-halo { animation: none; }
    .avui-cmd-head-sheet,
    .avui-cmd-head-sheet::before {
        animation: none !important;
    }
    .avui-cmd-head--mobile .avui-cmd-head-sheet,
    .avui-cmd-head--mobile .avui-cmd-head-sheet--closing {
        transform: none;
        border-radius: 0;
    }
}

/* === Orbital host (canvas + dock) === */
.avui-orbital-shell {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
    background: var(--avui-bg);
    color: var(--avui-text);
    /* Layout viewport. The keyboard overlays; the dock does not move.
       See ORBITAL_NAV_SPEC §10. Requires interactive-widget=overlays-content. */
}
.avui-orbital-canvas {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Keyboard past the dock. Zero while the keyboard only covers the dock. */
    margin-bottom: var(--avui-canvas-keyboard-inset, 0px);
}
.avui-orbital-dock {
    flex-shrink: 0;
    /* No safe-area padding: OrbitalNav owns the inset — its container grows
       by env(safe-area-inset-bottom) and the dome bleeds to the edge. */
}
/* Unmarked keyboard: the canvas cannot scroll, so the system bar is
   absent. Pin Done to the canvas bottom, which is the top of the keyboard. */
.avui-orbital-keyboard-strip {
    display: none;
}
.avui-orbital-shell[data-keyboard-dismiss="unmarked"] .avui-orbital-keyboard-strip {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    gap: 2px;
    padding: 4px 12px;
    background: var(--avui-bg);
    border-top: 1px solid var(--avui-border);
}
.avui-orbital-shell[data-keyboard-dismiss="unmarked"] .avui-orbital-canvas {
    padding-bottom: 48px;
}
.avui-orbital-keyboard-step,
.avui-orbital-keyboard-done {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--avui-text);
    font: inherit;
    font-weight: 500;
    min-width: 44px;
    min-height: 36px;
    padding: 6px 10px;
}
.avui-orbital-keyboard-step:disabled {
    color: var(--avui-text-muted);
}
.avui-orbital-keyboard-done {
    color: var(--avui-accent);
}
.avui-orbital-keyboard-spacer {
    flex: 1;
}

/* === Partition charts (treemap / icicle / mekko / mosaic) === */
.avui-partition {
    position: relative;
    width: 100%;
}
.avui-partition-svg {
    display: block;
    width: 100%;
    height: auto;
    --avui-partition-duration: 350ms;
}
.avui-partition-cell {
    cursor: pointer;
    outline: none;
}
.avui-partition-cell .avui-partition-box {
    transition:
        x var(--avui-partition-duration) ease-out,
        y var(--avui-partition-duration) ease-out,
        width var(--avui-partition-duration) ease-out,
        height var(--avui-partition-duration) ease-out,
        opacity 0.18s ease, filter 0.18s ease, stroke 0.18s ease;
    stroke: transparent;
    stroke-width: 0;
}
.avui-partition-cell:hover .avui-partition-box {
    filter: brightness(1.08);
}
.avui-partition-cell:focus-visible .avui-partition-box {
    stroke: var(--avui-accent);
    stroke-width: 2.5;
}
.avui-partition-cell.is-selected .avui-partition-box {
    stroke: var(--avui-accent);
    stroke-width: 2.5;
}
.avui-partition-cell.is-dimmed {
    opacity: 0.32;
}
.avui-partition-label {
    fill: #fff;
    font-family: var(--avui-font);
    font-size: 12px;
    font-weight: 650;
    pointer-events: none;
    transition:
        x var(--avui-partition-duration) ease-out,
        y var(--avui-partition-duration) ease-out;
}
.avui-partition-value {
    fill: rgba(255, 255, 255, 0.84);
    font-family: var(--avui-font);
    font-size: 11px;
    pointer-events: none;
    transition:
        x var(--avui-partition-duration) ease-out,
        y var(--avui-partition-duration) ease-out;
}
.avui-partition-axis {
    fill: var(--avui-text-muted);
    font-family: var(--avui-font);
    font-size: 11px;
    pointer-events: none;
    transition: x var(--avui-partition-duration) ease-out;
}
.avui-partition-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid var(--avui-border);
}
.avui-partition-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px;
    border: none;
    background: transparent;
    color: var(--avui-text-muted);
    font-family: var(--avui-font);
    font-size: 12px;
    cursor: default;
}
.avui-partition-pill:hover,
.avui-partition-pill:focus-visible {
    color: var(--avui-text);
    outline: none;
}
@media (prefers-reduced-motion: reduce) {
    .avui-partition-cell .avui-partition-box,
    .avui-partition-label,
    .avui-partition-value,
    .avui-partition-axis {
        transition: none;
    }
}

/* ==========================================================================
   Business charts + chrome (merged 2026-10-22 from static/pending/).
   Tokens only — no color literals. Source of truth for new work is this
   file; static/pending/ was the parallel-build staging area.
   ========================================================================== */

/* --- charts-shared: tooltip + axis --------------------------------------- */

/* Chart chrome shared by every business chart: tooltip + axis text.
   Colors are --avui-* tokens only. The host tooltip container is position: relative. */

.avui-chart-tooltip {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    min-width: 8rem;
    max-width: 18rem;
    padding: 8px 10px;
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    background: var(--avui-bg-card);
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: 12px;
    line-height: 1.35;
}

.avui-chart-tooltip-title {
    font-weight: 650;
    margin-bottom: 4px;
    color: var(--avui-text);
}

.avui-chart-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--avui-text-muted);
}

.avui-chart-tooltip-key {
    color: var(--avui-text-muted);
}

.avui-chart-tooltip-value {
    color: var(--avui-text);
    font-variant-numeric: tabular-nums;
}

.avui-chart-axis-label {
    fill: var(--avui-chart-axis);
    font-family: var(--avui-font);
    font-size: 11px;
    pointer-events: none;
}

.avui-chart-axis-line {
    stroke: var(--avui-chart-axis);
    stroke-width: 1;
}

.avui-chart-gridline {
    stroke: var(--avui-chart-grid);
    stroke-width: 1;
}

@media (prefers-reduced-motion: reduce) {
    .avui-chart-tooltip,
    .avui-chart-axis-label,
    .avui-chart-axis-line,
    .avui-chart-gridline {
        transition: none;
    }
}

/* --- charts-core: bar, line, area, donut --------------------------------- */

/* Core charts: bar, line, area, donut.
   Series fills and strokes are var(--avui-chart-*) on the SVG.
   Chrome uses theme tokens. No color literals. */

:is(.avui-bar-chart, .avui-line-chart, .avui-area-chart, .avui-donut-chart) {
    position: relative;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
}

.avui-donut-chart {
    width: auto;
    display: inline-block;
}

.avui-chart-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: var(--avui-font);
    font-size: 11px;
    --avui-chart-duration: 350ms;
}

.avui-donut-chart .avui-chart-svg {
    width: auto;
    height: auto;
}

.avui-bar-mark,
.avui-line-series,
.avui-donut-mark {
    cursor: pointer;
    outline: none;
}

.avui-bar-rect {
    stroke: transparent;
    stroke-width: 0;
    vector-effect: non-scaling-stroke;
    transition:
        x var(--avui-chart-duration, 350ms) ease-out,
        y var(--avui-chart-duration, 350ms) ease-out,
        width var(--avui-chart-duration, 350ms) ease-out,
        height var(--avui-chart-duration, 350ms) ease-out,
        opacity 0.18s ease,
        filter 0.18s ease,
        stroke 0.18s ease;
}

.avui-bar-mark:hover .avui-bar-rect {
    filter: brightness(1.08);
}

.avui-bar-mark.is-selected .avui-bar-rect,
.avui-bar-mark:focus-visible .avui-bar-rect {
    stroke: var(--avui-accent);
    stroke-width: 2;
}

.avui-line-path {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
    transition:
        opacity 0.18s ease,
        filter 0.18s ease,
        stroke-width 0.18s ease;
}

.avui-line-hit {
    fill: none;
    stroke: var(--avui-text);
    stroke-opacity: 0;
    stroke-width: 16;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: stroke;
}

.avui-line-dot {
    stroke: none;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
    transition:
        opacity 0.18s ease,
        stroke 0.18s ease;
}

.avui-area-fill {
    stroke: none;
    fill-opacity: 0.2;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.avui-line-series:hover .avui-line-path {
    filter: brightness(1.08);
}

.avui-line-series.is-selected .avui-line-path,
.avui-line-series:focus-visible .avui-line-path {
    stroke-width: 2.75;
    filter: drop-shadow(0 0 3px var(--avui-accent));
}

.avui-line-series.is-selected .avui-line-dot,
.avui-line-series:focus-visible .avui-line-dot {
    stroke: var(--avui-accent);
    stroke-width: 2;
}

.avui-donut-slice {
    stroke: transparent;
    stroke-width: 0;
    vector-effect: non-scaling-stroke;
    transition:
        opacity 0.18s ease,
        filter 0.18s ease,
        stroke 0.18s ease;
}

.avui-donut-mark:hover .avui-donut-slice {
    filter: brightness(1.08);
}

.avui-donut-mark.is-selected .avui-donut-slice,
.avui-donut-mark:focus-visible .avui-donut-slice {
    stroke: var(--avui-accent);
    stroke-width: 2.5;
}

.avui-donut-total {
    fill: var(--avui-text);
    font-family: var(--avui-font);
    font-weight: 650;
    pointer-events: none;
}

.avui-donut-center-label {
    fill: var(--avui-text-muted);
    font-family: var(--avui-font);
    font-weight: 500;
    pointer-events: none;
}

.avui-bar-mark.is-dimmed,
.avui-line-series.is-dimmed,
.avui-donut-mark.is-dimmed {
    opacity: 0.32;
}

:is(.avui-bar-chart, .avui-line-chart, .avui-area-chart).is-instant :is(.avui-bar-rect, .avui-line-path, .avui-line-dot, .avui-area-fill),
.avui-donut-chart.is-instant .avui-donut-slice {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .avui-bar-rect,
    .avui-line-path,
    .avui-line-dot,
    .avui-area-fill,
    .avui-donut-slice {
        transition: none;
    }
}

/* --- charts-data: KPI, table, sparkline, timeline ------------------------ */

/* Data charts — KPI, table, sparkline, timeline.
   Colors are --avui-* tokens only. Integrator merges this file. */

.avui-charts-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- KPI ---------------------------------------------------------------- */

.avui-kpi-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--avui-bg-card);
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: var(--avui-font-size);
    line-height: 1.35;
}

.avui-kpi-icon {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--avui-bg-panel);
    color: var(--avui-accent);
    font-size: 14px;
    line-height: 1;
}

.avui-kpi-body {
    flex: 1 1 8rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.avui-kpi-title,
.avui-kpi-value,
.avui-kpi-sublabel {
    margin: 0;
}

.avui-kpi-title {
    color: var(--avui-text-muted);
    font-size: 0.78em;
    font-weight: 600;
}

.avui-kpi-value-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.avui-kpi-value {
    color: var(--avui-text);
    font-size: 1.2em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.avui-kpi-sublabel {
    color: var(--avui-text-muted);
    font-size: 0.8em;
}

.avui-kpi-delta {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 0.8em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.avui-kpi-delta-up { color: var(--avui-success); }
.avui-kpi-delta-down { color: var(--avui-danger); }
.avui-kpi-delta-flat { color: var(--avui-text-muted); }

/* display:contents so an empty slot adds no flex gap. */
.avui-kpi-slot { display: contents; }

/* --- Table -------------------------------------------------------------- */

.avui-data-table {
    background: var(--avui-bg-card);
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: var(--avui-font-size);
    overflow: hidden;
}

.avui-data-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--avui-border);
}

.avui-data-table-scroll {
    overflow-x: auto;
    min-width: 0;
}

.avui-data-table table {
    width: 100%;
    border-collapse: collapse;
}

.avui-data-table th,
.avui-data-table td {
    border-bottom: 1px solid var(--avui-border);
    text-align: left;
    vertical-align: middle;
}

.avui-data-table th {
    padding: 0;
    color: var(--avui-text-muted);
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
}

.avui-data-table td {
    padding: 10px 12px;
}

.avui-data-table tbody tr:last-child td {
    border-bottom: 0;
}

.avui-data-table th.avui-data-table-num,
.avui-data-table td.avui-data-table-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.avui-data-table-sort,
.avui-data-table-th-label {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 36px;
    padding: 8px 12px;
    text-align: inherit;
}

.avui-data-table th.avui-data-table-num .avui-data-table-sort,
.avui-data-table th.avui-data-table-num .avui-data-table-th-label {
    justify-content: flex-end;
}

.avui-data-table-sort,
.avui-data-table-expand {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.avui-data-table-sort:hover {
    color: var(--avui-text);
}

.avui-data-table-sort-icon {
    color: var(--avui-text-muted);
    font-size: 0.7em;
    line-height: 1;
}

.avui-data-table th[aria-sort="ascending"] .avui-data-table-sort,
.avui-data-table th[aria-sort="descending"] .avui-data-table-sort {
    color: var(--avui-text);
}

.avui-data-table th[aria-sort="ascending"] .avui-data-table-sort-icon,
.avui-data-table th[aria-sort="descending"] .avui-data-table-sort-icon {
    color: var(--avui-accent);
}

.avui-data-table th.avui-data-table-check-cell,
.avui-data-table td.avui-data-table-check-cell,
.avui-data-table th.avui-data-table-expand-cell,
.avui-data-table td.avui-data-table-expand-cell {
    width: 40px;
    padding: 8px 6px;
    text-align: center;
}

.avui-data-table-check {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--avui-accent);
    cursor: pointer;
}

.avui-data-table-expand {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    color: var(--avui-text-muted);
    line-height: 1;
}

.avui-data-table-expand:hover {
    color: var(--avui-text);
    border-color: var(--avui-accent);
}

.avui-data-table-sort:focus-visible,
.avui-data-table-expand:focus-visible,
.avui-data-table-check:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-data-table td.avui-data-table-text {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avui-data-table-row {
    transition: background-color 150ms linear;
}

.avui-data-table-row:hover,
.avui-data-table-row.is-selected {
    background: var(--avui-bg-panel);
}

.avui-data-table-row.is-selected {
    box-shadow: inset 2px 0 0 var(--avui-accent);
}

.avui-data-table-detail td {
    background: var(--avui-bg);
    color: var(--avui-text-muted);
    font-size: 0.92em;
    line-height: 1.45;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: pre-wrap;
}

.avui-data-table td.avui-data-table-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--avui-text-muted);
}

/* --- Sparkline ---------------------------------------------------------- */

.avui-sparkline {
    display: block;
    overflow: visible;
}

.avui-sparkline-line {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avui-sparkline-area {
    stroke: none;
    fill-opacity: 0.18;
}

/* --- Timeline ----------------------------------------------------------- */

.avui-timeline-strip {
    width: 100%;
    min-width: 0;
}

.avui-timeline-svg {
    display: block;
    width: 100%;
    overflow: visible;
    font-family: var(--avui-font);
}

.avui-timeline-base {
    stroke: var(--avui-chart-axis);
    stroke-width: 1;
}

.avui-timeline-tick {
    stroke-width: 2;
    stroke-linecap: round;
}

.avui-timeline-tick-info { stroke: var(--avui-accent); }
.avui-timeline-tick-alert { stroke: var(--avui-danger); }

.avui-timeline-mark {
    fill: var(--avui-text-muted);
    font-size: 11px;
    font-family: var(--avui-font);
}

.avui-sparkline,
.avui-timeline-strip {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .avui-kpi-card,
    .avui-data-table,
    .avui-data-table-row,
    .avui-sparkline,
    .avui-sparkline-line,
    .avui-sparkline-area,
    .avui-timeline-strip {
        transition: none;
        animation: none;
    }
}

/* --- charts-custom: fund-flow + network ---------------------------------- */

/* Fund flow and radial transaction network.
   Paint comes from --avui-* tokens. */

.avui-fund-flow {
    position: relative;
    width: 100%;
}

.avui-fund-flow-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    pointer-events: none;
}

.avui-fund-flow-edge {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.18s ease;
}

.avui-fund-flow-edge.is-alert {
    stroke-width: 2;
}

.avui-fund-flow-edge.is-dimmed {
    opacity: 0.32;
}

.avui-fund-flow-card {
    position: absolute;
    box-sizing: border-box;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    background: var(--avui-bg-card);
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    appearance: none;
    transition: box-shadow 0.18s ease, opacity 0.18s ease;
}

.avui-fund-flow-card:hover {
    box-shadow: 0 0 0 1px var(--avui-accent);
}

.avui-fund-flow-card:focus {
    outline: none;
}

.avui-fund-flow-card:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-fund-flow-card.is-alert {
    border-color: var(--avui-danger);
}

.avui-fund-flow-card.is-selected {
    box-shadow: 0 0 0 2px var(--avui-accent);
}

.avui-fund-flow-card.is-dimmed {
    opacity: 0.32;
}

.avui-fund-flow-label,
.avui-fund-flow-sublabel,
.avui-fund-flow-amount {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avui-fund-flow-label {
    font-weight: 600;
    color: var(--avui-text);
}

.avui-fund-flow-sublabel {
    font-size: 10px;
    color: var(--avui-text-muted);
}

.avui-fund-flow-card.is-alert .avui-fund-flow-sublabel {
    color: var(--avui-danger);
}

.avui-fund-flow-amount {
    font-size: 11px;
    font-weight: 600;
    color: var(--avui-text);
}

.avui-network-graph {
    position: relative;
    width: 100%;
}

.avui-network-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.avui-network-edge {
    pointer-events: none;
}

.avui-network-edge line {
    fill: none;
    stroke-width: 1.25;
    stroke-linecap: round;
}

.avui-network-edge.is-alert line {
    stroke-width: 1.75;
}

.avui-network-edge.is-dimmed {
    opacity: 0.32;
}

.avui-network-edge-chip {
    fill: var(--avui-bg);
}

.avui-network-edge-label {
    fill: var(--avui-text-muted);
    font-family: var(--avui-font);
    font-size: 10px;
}

.avui-network-edge.is-alert .avui-network-edge-label {
    fill: var(--avui-danger);
}

.avui-network-node {
    cursor: pointer;
}

.avui-network-ring {
    fill: var(--avui-bg-card);
    stroke-width: 2;
    transition: stroke-width 0.18s ease, stroke 0.18s ease, opacity 0.18s ease;
}

.avui-network-node.is-subject .avui-network-ring {
    stroke-width: 3;
}

.avui-network-node.is-flagged .avui-network-ring {
    stroke-width: 2.5;
}

.avui-network-node.is-subject.is-flagged .avui-network-ring {
    stroke-width: 3.5;
}

.avui-network-node.is-dimmed {
    opacity: 0.32;
}

.avui-network-node:hover .avui-network-ring {
    stroke-width: 3.5;
}

.avui-network-node:focus {
    outline: none;
}

.avui-network-node:focus-visible .avui-network-ring {
    stroke: var(--avui-accent);
}

.avui-network-select {
    fill: none;
    stroke: var(--avui-accent);
    stroke-width: 1.5;
    opacity: 0;
    pointer-events: none;
}

.avui-network-node.is-selected .avui-network-select {
    opacity: 1;
}

.avui-network-label {
    fill: var(--avui-text);
    font-family: var(--avui-font);
    font-size: 11px;
    font-weight: 600;
}

.avui-network-sublabel {
    fill: var(--avui-text-muted);
    font-family: var(--avui-font);
    font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .avui-fund-flow-edge,
    .avui-fund-flow-card,
    .avui-network-ring {
        transition: none;
    }
}

/* --- chrome-a: pills, alerts, progress, pagination, search --------------- */

/* Chrome A — status pills, alerts, progress, pagination, search.
   Colors are --avui-* tokens only. Tone fills are a 12% mix of the
   tone token; text and border use that token solid.
   Neutral pills use --avui-text-muted (there is no --avui-muted). */

/* === Status pill === */

.avui-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--avui-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

.avui-pill.avui-pill-info {
    color: var(--avui-accent);
    background: color-mix(in srgb, var(--avui-accent) 12%, transparent);
    border-color: var(--avui-accent);
}

.avui-pill.avui-pill-success {
    color: var(--avui-success);
    background: color-mix(in srgb, var(--avui-success) 12%, transparent);
    border-color: var(--avui-success);
}

.avui-pill.avui-pill-warning {
    color: var(--avui-warning);
    background: color-mix(in srgb, var(--avui-warning) 12%, transparent);
    border-color: var(--avui-warning);
}

.avui-pill.avui-pill-danger {
    color: var(--avui-danger);
    background: color-mix(in srgb, var(--avui-danger) 12%, transparent);
    border-color: var(--avui-danger);
}

.avui-pill.avui-pill-neutral {
    color: var(--avui-text-muted);
    background: color-mix(in srgb, var(--avui-text-muted) 12%, transparent);
    border-color: var(--avui-text-muted);
}

/* === Alert === */

.avui-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--avui-radius);
    border: 1px solid transparent;
    font-family: var(--avui-font);
}

.avui-alert-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.avui-alert-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.avui-alert-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.avui-alert-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
}

.avui-alert-message {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: inherit;
}

.avui-alert-action {
    flex-shrink: 0;
    margin: 0;
    padding: 6px 10px;
    border-radius: var(--avui-radius);
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-family: var(--avui-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--avui-transition);
}

.avui-alert-action:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.avui-alert-action:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-alert.avui-alert-info {
    color: var(--avui-accent);
    background: color-mix(in srgb, var(--avui-accent) 12%, transparent);
    border-color: var(--avui-accent);
}

.avui-alert.avui-alert-warning {
    color: var(--avui-warning);
    background: color-mix(in srgb, var(--avui-warning) 12%, transparent);
    border-color: var(--avui-warning);
}

.avui-alert.avui-alert-danger {
    color: var(--avui-danger);
    background: color-mix(in srgb, var(--avui-danger) 12%, transparent);
    border-color: var(--avui-danger);
}

.avui-alert.avui-alert-success {
    color: var(--avui-success);
    background: color-mix(in srgb, var(--avui-success) 12%, transparent);
    border-color: var(--avui-success);
}

/* === Progress === */

.avui-progress-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.avui-progress-label {
    color: var(--avui-text-muted);
    font-family: var(--avui-font);
    font-size: 12px;
    line-height: 1.4;
}

.avui-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--avui-accent) 12%, transparent);
    overflow: hidden;
    pointer-events: none;
}

.avui-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--avui-accent);
    transition: width var(--avui-transition);
}

.avui-progress-ring {
    display: block;
    color: var(--avui-text);
    overflow: visible;
    pointer-events: none;
}

.avui-progress-ring-track,
.avui-progress-ring-value {
    fill: none;
}

.avui-progress-ring-track {
    stroke: var(--avui-border);
}

.avui-progress-ring-value {
    stroke: var(--avui-accent);
    transition: stroke-dasharray var(--avui-transition);
}

.avui-progress-ring-label {
    fill: var(--avui-text);
    font-family: var(--avui-font);
    font-weight: 600;
}

/* === Pagination === */

.avui-pagination {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--avui-font);
}

.avui-pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.avui-pagination-btn,
.avui-pagination-page {
    min-width: 32px;
    height: 32px;
    margin: 0;
    padding: 0 8px;
    border-radius: var(--avui-radius);
    border: 1px solid var(--avui-border);
    background: var(--avui-bg-card);
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition:
        border-color var(--avui-transition),
        color var(--avui-transition),
        background var(--avui-transition);
}

.avui-pagination-btn:hover:not(:disabled),
.avui-pagination-page:hover:not(.avui-pagination-page-active) {
    border-color: var(--avui-accent);
    color: var(--avui-accent);
}

.avui-pagination-btn:focus-visible,
.avui-pagination-page:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.avui-pagination-page-active {
    color: var(--avui-accent);
    background: color-mix(in srgb, var(--avui-accent) 12%, transparent);
    border-color: var(--avui-accent);
    font-weight: 600;
}

.avui-pagination-ellipsis {
    min-width: 24px;
    text-align: center;
    color: var(--avui-text-muted);
    font-size: 13px;
}

/* === Search === */

.avui-search-input {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 220px;
    padding: 6px 10px;
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    background: var(--avui-bg-card);
    color: var(--avui-text-muted);
    transition: border-color var(--avui-transition);
}

.avui-search-input:focus-within {
    border-color: var(--avui-accent);
}

.avui-search-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--avui-text-muted);
}

.avui-search-field {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: var(--avui-font-size);
    line-height: 1.4;
}

.avui-search-field:focus {
    outline: none;
}

.avui-search-field::placeholder {
    color: var(--avui-text-muted);
}

.avui-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--avui-radius);
    background: transparent;
    color: var(--avui-text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.avui-search-clear:hover {
    color: var(--avui-text);
    background: color-mix(in srgb, var(--avui-text) 8%, transparent);
}

.avui-search-clear:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .avui-alert-action,
    .avui-progress-fill,
    .avui-progress-ring-value,
    .avui-pagination-btn,
    .avui-pagination-page,
    .avui-search-input {
        transition: none;
    }
}

/* --- chrome-b: chips, menus, checklist, notes, inspector ----------------- */

/* Chrome B — user chip, menu, copy, checklist, notes, provenance,
   report header, definition list, inspector.
   Colors are --avui-* tokens only. Hover fills are an 8% mix of text. */

/* === Avatar / user chip === */

.avui-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--avui-accent);
    color: var(--avui-bg);
    font-family: var(--avui-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    overflow: hidden;
    user-select: none;
}

.avui-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: var(--avui-font-size);
}

.avui-user-chip-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.2;
}

.avui-user-chip-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--avui-text);
}

.avui-user-chip-role {
    font-size: 12px;
    color: var(--avui-text-muted);
}

/* === Menu === */

.avui-menu {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.avui-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    background: var(--avui-bg-card);
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition:
        border-color 0.16s ease,
        color 0.16s ease,
        background 0.16s ease;
}

.avui-menu-trigger:hover {
    border-color: var(--avui-accent);
    color: var(--avui-accent);
}

.avui-menu-trigger:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-menu-trigger-kebab {
    width: 32px;
    height: 32px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--avui-text-muted);
    font-size: 18px;
    font-weight: 500;
}

.avui-menu-trigger-kebab:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--avui-text) 8%, transparent);
    color: var(--avui-text);
}

.avui-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.avui-menu-panel {
    position: absolute;
    z-index: 91;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    max-height: 280px;
    margin: 0;
    padding: 4px;
    overflow: auto;
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    background: var(--avui-bg-card);
    animation: avui-menu-in 0.16s ease;
}

.avui-menu-kebab .avui-menu-panel {
    left: auto;
    right: 0;
}

.avui-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--avui-radius);
    background: transparent;
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease;
}

.avui-menu-item:hover,
.avui-menu-item:focus-visible {
    background: color-mix(in srgb, var(--avui-text) 8%, transparent);
}

.avui-menu-item:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: -2px;
}

.avui-menu-item-icon {
    flex-shrink: 0;
    color: var(--avui-text-muted);
}

@keyframes avui-menu-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === Copy button === */

.avui-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin: 0;
    padding: 2px 6px;
    min-height: 22px;
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    background: transparent;
    color: var(--avui-text-muted);
    font-family: var(--avui-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        border-color 0.16s ease,
        color 0.16s ease;
}

.avui-copy-btn:hover,
.avui-copy-btn-copied {
    border-color: var(--avui-accent);
    color: var(--avui-accent);
}

.avui-copy-btn:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-copy-btn-icon {
    display: block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.avui-copy-btn-glyph-done {
    display: none;
}

.avui-copy-btn-copied .avui-copy-btn-glyph-copy {
    display: none;
}

.avui-copy-btn-copied .avui-copy-btn-glyph-done {
    display: block;
}

/* === Checklist === */

.avui-checklist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: var(--avui-font-size);
}

.avui-checklist-progress {
    margin: 0 0 8px;
    color: var(--avui-text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.avui-checklist-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.avui-checklist-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 8px;
    border-radius: var(--avui-radius);
    cursor: pointer;
}

.avui-checklist-item:hover {
    background: color-mix(in srgb, var(--avui-text) 6%, transparent);
}

.avui-checklist-item:focus-within {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-checklist-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.avui-checklist-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 1.5px solid var(--avui-border);
    border-radius: 999px;
    background: var(--avui-bg-card);
    color: transparent;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.avui-checklist-input:checked + .avui-checklist-mark {
    background: var(--avui-accent);
    border-color: var(--avui-accent);
    color: var(--avui-bg);
}

.avui-checklist-check {
    display: block;
    width: 12px;
    height: 12px;
}

.avui-checklist-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.avui-checklist-label {
    color: var(--avui-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.avui-checklist-sublabel {
    color: var(--avui-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* === Notes === */

.avui-notes-card {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    background: var(--avui-bg-card);
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: var(--avui-font-size);
}

.avui-notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--avui-border);
}

.avui-notes-card-empty .avui-notes-header {
    border-bottom: 0;
}

.avui-notes-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.avui-notes-add {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--avui-accent);
    font-family: var(--avui-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.avui-notes-add:hover {
    color: var(--avui-accent-hover);
}

.avui-notes-add:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-notes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 12px 16px 14px;
    list-style: none;
}

.avui-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.avui-note .avui-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.avui-note-body {
    min-width: 0;
    flex: 1;
}

.avui-note-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.avui-note-author {
    font-size: 13px;
    font-weight: 600;
}

.avui-note-time {
    color: var(--avui-text-muted);
    font-size: 12px;
}

.avui-note-text {
    margin: 4px 0 0;
    color: var(--avui-text);
    font-size: 13px;
    line-height: 1.45;
}

/* === Provenance === */

.avui-provenance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    min-width: 0;
    font-family: var(--avui-font);
}

.avui-provenance-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--avui-text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.avui-provenance-mark {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--avui-accent);
    flex-shrink: 0;
}

.avui-provenance-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.avui-provenance-chip {
    padding: 2px 8px;
    border: 1px solid var(--avui-border);
    border-radius: 999px;
    background: var(--avui-bg-card);
    color: var(--avui-text-muted);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

/* === Report header === */

.avui-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-width: 0;
    color: var(--avui-text);
    font-family: var(--avui-font);
}

.avui-report-header-copy {
    min-width: 0;
}

.avui-report-header-eyebrow {
    margin: 0 0 4px;
    color: var(--avui-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.avui-report-header-title {
    margin: 0;
    color: var(--avui-text);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.avui-report-header-description {
    margin: 8px 0 0;
    max-width: 640px;
    color: var(--avui-text-muted);
    font-size: 14px;
    line-height: 1.45;
}

.avui-report-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* === Definition list === */

.avui-def-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: var(--avui-font-size);
}

.avui-def-row {
    display: grid;
    grid-template-columns: minmax(108px, 148px) minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
}

.avui-def-label {
    margin: 0;
    color: var(--avui-text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.avui-def-value {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: var(--avui-text);
    font-size: 13px;
    line-height: 1.4;
}

.avui-def-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.avui-def-value:has(.avui-copy-btn) .avui-def-text {
    font-family: var(--avui-font-mono, var(--avui-font));
}

/* === Inspector === */

.avui-inspector {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    background: var(--avui-bg-card);
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: var(--avui-font-size);
}

.avui-inspector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid var(--avui-border);
}

.avui-inspector-title {
    margin: 0;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.avui-inspector-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--avui-radius);
    background: transparent;
    color: var(--avui-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.16s ease,
        color 0.16s ease;
}

.avui-inspector-close:hover {
    background: color-mix(in srgb, var(--avui-text) 8%, transparent);
    color: var(--avui-text);
}

.avui-inspector-close:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-inspector-status {
    padding: 12px 16px 0;
}

.avui-inspector-body {
    padding: 14px 16px 16px;
}

@media (max-width: 720px) {
    .avui-report-header {
        flex-direction: column;
        align-items: stretch;
    }

    .avui-def-row {
        grid-template-columns: 1fr;
        row-gap: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .avui-menu-trigger,
    .avui-menu-panel,
    .avui-menu-item,
    .avui-copy-btn,
    .avui-checklist-mark,
    .avui-inspector-close {
        transition: none;
        animation: none;
    }
}

/* ==========================================================================
   Enhancement wave v0.2 (merged 2026-10-22 from static/pending/).
   Physics/interaction, agent-ops, social. Tokens only — no color literals.
   NOTE: .avui-network-* rules appear in both the v0.1 block above and the
   v0.2 block below. That overlap is intentional: v0.1 holds the base node
   styles, v0.2 extends them (interaction, chips, workflow). Later rules win.
   ========================================================================== */

/* --- physics-p1: shared flow/pulse motion -------------------------------- */

/* Shared motion for live graph edges and running status dots.
   Paint stays on the element (accent, danger, chart tokens). This file
   only marches a dash and pulses opacity — no color literals. */

.avui-flow-dash {
    stroke-dasharray: 6 4;
    animation: avui-flow-dash 0.9s linear infinite;
}

@keyframes avui-flow-dash {
    to { stroke-dashoffset: -20; }
}

.avui-pulse-dot {
    animation: avui-pulse-dot 1.4s ease-in-out infinite;
}

@keyframes avui-pulse-dot {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .avui-flow-dash {
        animation: none;
        stroke-dashoffset: 0;
    }
    .avui-pulse-dot {
        animation: none;
        opacity: 1;
    }
}

/* --- physics-p2: network interaction + workflow -------------------------- */

/* P2 graph styles: network interaction + workflow DAG.
   Colors are --avui-* tokens only. No new tokens.
   Motion reuses .avui-flow-dash and .avui-pulse-dot from physics-p1.css.
   The dash pattern below is what those keyframes travel along. */

.avui-network-graph,
.avui-workflow-graph {
    position: relative;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
}

.avui-network-svg,
.avui-workflow-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.avui-network-svg.is-interactive,
.avui-workflow-svg.is-interactive {
    touch-action: none;
    cursor: grab;
}

.avui-network-edge {
    pointer-events: none;
}

.avui-network-edge line,
.avui-network-ring,
.avui-workflow-edge,
.avui-workflow-card,
.avui-workflow-dot,
.avui-workflow-select {
    vector-effect: non-scaling-stroke;
}

/* Alert / active edges. P1 animates stroke-dashoffset on .avui-flow-dash. */
.avui-network-edge.is-alert line,
.avui-workflow-edge.is-active {
    stroke-dasharray: 6 4;
}

.avui-network-edge-chip {
    fill: var(--avui-bg);
    stroke: var(--avui-border);
    stroke-width: 1;
}

.avui-network-edge-label {
    fill: var(--avui-text-muted);
    font-family: var(--avui-font);
    font-size: 10px;
}

.avui-network-edge.is-alert .avui-network-edge-label {
    fill: var(--avui-danger);
}

.avui-network-node {
    touch-action: none;
    cursor: pointer;
}

.avui-network-node.is-dragging {
    cursor: grabbing;
}

/* --- workflow ----------------------------------------------------------- */

.avui-workflow-edge {
    fill: none;
    stroke: var(--avui-chart-axis);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avui-workflow-edge.is-active {
    stroke: var(--avui-accent);
}

.avui-workflow-node {
    cursor: pointer;
}

.avui-workflow-card {
    fill: var(--avui-bg-card);
    stroke: var(--avui-border);
    stroke-width: 1.25;
    transition: stroke 0.18s ease, stroke-width 0.18s ease;
}

.avui-workflow-node.is-failed .avui-workflow-card {
    stroke: var(--avui-danger);
    stroke-width: 2;
}

.avui-workflow-node.is-skipped .avui-workflow-card {
    stroke: var(--avui-text-muted);
}

.avui-workflow-node:hover .avui-workflow-card {
    stroke-width: 2;
}

.avui-workflow-node:focus {
    outline: none;
}

.avui-workflow-node:focus-visible .avui-workflow-card {
    stroke: var(--avui-accent);
}

.avui-workflow-select {
    fill: none;
    stroke: var(--avui-accent);
    stroke-width: 1.5;
    opacity: 0;
    pointer-events: none;
}

.avui-workflow-node.is-selected .avui-workflow-select {
    opacity: 1;
}

.avui-workflow-dot {
    stroke: none;
}

/* Pending: muted. Running: accent (pulse class is P1). Done: success.
   Failed: danger. Skipped: muted-dim — same muted token, lower opacity.
   There is no --avui-muted-dim token; opacity is the dim. */
.avui-workflow-node.is-pending .avui-workflow-dot {
    fill: var(--avui-text-muted);
}

.avui-workflow-node.is-running .avui-workflow-dot {
    fill: var(--avui-accent);
}

.avui-workflow-node.is-done .avui-workflow-dot {
    fill: var(--avui-success);
}

.avui-workflow-node.is-failed .avui-workflow-dot {
    fill: var(--avui-danger);
}

.avui-workflow-node.is-skipped .avui-workflow-dot {
    fill: var(--avui-text-muted);
    opacity: 0.45;
}

.avui-workflow-label {
    fill: var(--avui-text);
    font-family: var(--avui-font);
    font-size: 13px;
    font-weight: 600;
}

.avui-workflow-sublabel {
    fill: var(--avui-text-muted);
    font-family: var(--avui-font);
    font-size: 11px;
}

.avui-workflow-node.is-skipped .avui-workflow-label,
.avui-workflow-node.is-skipped .avui-workflow-sublabel {
    fill: var(--avui-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .avui-workflow-card,
    .avui-network-node,
    .avui-network-ring {
        transition: none;
    }
}

/* --- physics-p3: flow hover, line crosshair, timeline playhead ----------- */

/* P3 live interaction — fund-flow path hover, line crosshair, timeline playhead.
   Existing --avui-* tokens only. No color literals. No new tokens.
   .avui-flow-dash keyframes live in physics-p1.css. Integrator merges. */

/* --- Fund flow: local node hover --------------------------------------- */

.avui-fund-flow .avui-fund-flow-edge.is-path-dim {
    opacity: 0.25;
}

.avui-fund-flow .avui-fund-flow-edge.is-path-lit {
    opacity: 1;
}

/* --- Line crosshair ---------------------------------------------------- */

.avui-line-crosshair-capture {
    fill: none;
    pointer-events: all;
}

.avui-line-crosshair {
    stroke: var(--avui-chart-axis);
    stroke-width: 1;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.avui-line-chart.is-probing .avui-line-crosshair {
    stroke: var(--avui-accent);
}

.avui-line-crosshair-dot {
    stroke: var(--avui-bg-card);
    stroke-width: 1.5;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.avui-line-chart.is-probing .avui-line-crosshair-dot {
    stroke-width: 2;
}

/* --- Timeline playhead ------------------------------------------------- */

.avui-timeline-strip.is-scrubbable {
    pointer-events: auto;
    touch-action: none;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
}

.avui-timeline-scrub {
    fill: none;
    pointer-events: all;
}

.avui-timeline-playhead {
    stroke: var(--avui-accent);
    stroke-width: 1.5;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.avui-timeline-knob {
    fill: var(--avui-bg-card);
    stroke: var(--avui-accent);
    stroke-width: 2;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.avui-timeline-strip.is-scrubbable:hover .avui-timeline-knob,
.avui-timeline-strip.is-scrubbing .avui-timeline-knob {
    stroke: var(--avui-accent);
    stroke-width: 2.5;
}

.avui-timeline-strip.is-scrubbing .avui-timeline-playhead {
    stroke: var(--avui-accent);
}

@media (prefers-reduced-motion: reduce) {
    .avui-fund-flow .avui-fund-flow-edge.is-path-dim,
    .avui-fund-flow .avui-fund-flow-edge.is-path-lit,
    .avui-line-crosshair,
    .avui-line-crosshair-dot,
    .avui-timeline-playhead,
    .avui-timeline-knob {
        transition: none;
        animation: none;
    }
}

/* --- ops-a1: op tree + timeline ----------------------------------------- */

/* Agent-ops tree + timeline (A1). Tokens only — dark and light both resolve. */

.avui-op-tree {
    min-width: 0;
    padding: 4px 0;
    background: var(--avui-bg-card);
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: var(--avui-font-size);
    overflow-x: auto;
}

.avui-op-tree-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 28px;
    box-sizing: border-box;
    color: inherit;
    background-color: transparent;
    transition: background-color 150ms linear;
}

.avui-op-tree.is-interactive .avui-op-tree-row {
    cursor: pointer;
}

.avui-op-tree-row:hover {
    background-color: color-mix(in srgb, var(--avui-text) 5%, transparent);
}

.avui-op-tree-row.is-selected {
    background-color: color-mix(in srgb, var(--avui-accent) 14%, transparent);
    box-shadow: inset 2px 0 0 var(--avui-accent);
}

.avui-op-tree-row:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: -2px;
}

/* One box per row. Columns are a repeating gradient so depth does not add nodes. */
.avui-op-tree-guides {
    width: calc(var(--avui-op-depth, 0) * 14px);
    flex: 0 0 auto;
    align-self: stretch;
    background-image: repeating-linear-gradient(
        90deg,
        var(--avui-chart-grid) 0,
        var(--avui-chart-grid) 1px,
        transparent 1px,
        transparent 14px
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.avui-op-tree-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 10px 2px 4px;
}

.avui-op-tree-expand,
.avui-op-tree-expand-spacer {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    box-sizing: border-box;
}

.avui-op-tree-expand {
    padding: 0;
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    background: none;
    color: var(--avui-text-muted);
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.avui-op-tree-expand:hover {
    color: var(--avui-text);
    border-color: var(--avui-accent);
}

.avui-op-tree-expand:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-op-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    box-sizing: border-box;
    border-radius: 999px;
}

.avui-op-dot-queued {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--avui-text-muted);
}

.avui-op-dot-running {
    background: var(--avui-accent);
    box-shadow: inset 0 0 0 1.5px var(--avui-accent);
    animation: avui-op-pulse 1.4s ease-in-out infinite;
}

.avui-op-dot-done {
    background: var(--avui-success);
    box-shadow: inset 0 0 0 1.5px var(--avui-success);
}

.avui-op-dot-failed {
    background: var(--avui-danger);
    box-shadow: inset 0 0 0 1.5px var(--avui-danger);
}

.avui-op-dot-skipped {
    background: color-mix(in srgb, var(--avui-text-muted) 35%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--avui-text-muted) 55%, transparent);
}

.avui-op-tree-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avui-op-tree-dur {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--avui-text-muted);
    font-family: var(--avui-font-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.avui-op-tree-more {
    padding: 6px 10px 8px;
    border-top: 1px solid var(--avui-border);
    color: var(--avui-text-muted);
    font-size: 12px;
}

.avui-op-timeline {
    width: 100%;
    min-width: 0;
    background: var(--avui-bg-card);
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    overflow: hidden;
}

.avui-op-timeline-svg {
    display: block;
    width: 100%;
}

.avui-op-lane,
.avui-op-now {
    pointer-events: none;
}

.avui-op-lane {
    stroke: var(--avui-chart-grid);
    stroke-width: 1;
}

.avui-op-bar {
    stroke-width: 1.25;
}

.avui-op-bar-queued {
    fill: transparent;
    stroke: var(--avui-text-muted);
}

.avui-op-bar-running {
    fill: var(--avui-accent);
    stroke: transparent;
}

.avui-op-bar-done {
    fill: var(--avui-success);
    stroke: transparent;
}

.avui-op-bar-failed {
    fill: var(--avui-danger);
    stroke: transparent;
}

.avui-op-bar-skipped {
    fill: color-mix(in srgb, var(--avui-text-muted) 40%, transparent);
    stroke: transparent;
}

.avui-op-bar.is-selected {
    stroke: var(--avui-accent);
    stroke-width: 1.75;
}

.avui-op-timeline.is-interactive .avui-op-bar {
    cursor: pointer;
}

.avui-op-now {
    stroke: var(--avui-accent);
    stroke-width: 1.25;
    stroke-dasharray: 3 3;
}

@keyframes avui-op-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .avui-op-tree-row,
    .avui-op-tree-expand,
    .avui-op-dot-running,
    .avui-op-bar {
        transition: none;
        animation: none;
    }
}

/* --- ops-a2: event feed, throughput, depth ------------------------------ */

/* Ops A2 — event feed, throughput meter, depth stack.
   Colors are --avui-* tokens only. Info uses the muted text token
   (there is no --avui-muted). Tool accent, Error danger, Metric success.
   Depth fill is accent until depth >= max-1, then danger.
   Feed scroll anchoring is off so a row leaving the capped window
   does not look like the user left the bottom. */

/* === Event feed === */

.avui-feed {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 16rem;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    overscroll-behavior: contain;
    scroll-behavior: auto;
    scrollbar-color: var(--avui-chart-axis) transparent;
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    background: var(--avui-bg-card);
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: 13px;
    line-height: 1.4;
    outline: none;
}

.avui-feed:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-feed-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 4px 10px;
}

.avui-feed-row + .avui-feed-row {
    border-top: 1px solid var(--avui-border);
}

.avui-feed-time {
    min-width: 3.25rem;
    color: var(--avui-text-muted);
    font-family: var(--avui-font-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.avui-feed-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--avui-font);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.avui-feed-chip-info {
    color: var(--avui-text-muted);
    background: color-mix(in srgb, var(--avui-text-muted) 12%, transparent);
    border-color: var(--avui-text-muted);
}

.avui-feed-chip-tool {
    color: var(--avui-accent);
    background: color-mix(in srgb, var(--avui-accent) 12%, transparent);
    border-color: var(--avui-accent);
}

.avui-feed-chip-error {
    color: var(--avui-danger);
    background: color-mix(in srgb, var(--avui-danger) 12%, transparent);
    border-color: var(--avui-danger);
}

.avui-feed-chip-metric {
    color: var(--avui-success);
    background: color-mix(in srgb, var(--avui-success) 12%, transparent);
    border-color: var(--avui-success);
}

.avui-feed-label {
    min-width: 0;
    color: var(--avui-text);
    overflow-wrap: anywhere;
}

/* === Throughput meter === */

.avui-meter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    color: var(--avui-text);
    font-family: var(--avui-font);
}

.avui-meter-label {
    margin: 0;
    color: var(--avui-text-muted);
    font-size: 12px;
    line-height: 1.3;
}

.avui-meter-readout {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
}

.avui-meter-rate {
    color: var(--avui-text);
    font-family: var(--avui-font-mono);
    font-size: 28px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
}

.avui-meter-unit {
    color: var(--avui-text-muted);
    font-size: 12px;
    line-height: 1.3;
}

/* === Depth stack === */

.avui-depth {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 4.5rem;
    max-width: 100%;
    color: var(--avui-text);
    font-family: var(--avui-font);
}

.avui-depth-label {
    color: var(--avui-text-muted);
    font-size: 12px;
    line-height: 1.3;
}

.avui-depth-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    max-width: 8rem;
}

.avui-depth-seg {
    display: block;
    box-sizing: border-box;
    height: 8px;
    border: 1px solid var(--avui-border);
    border-radius: 999px;
    background: var(--avui-chart-grid);
    transition: background-color 0.22s ease, border-color 0.22s ease;
}

.avui-depth-seg-on {
    background: var(--avui-accent);
    border-color: var(--avui-accent);
}

.avui-depth-hot .avui-depth-seg-on {
    background: var(--avui-danger);
    border-color: var(--avui-danger);
}

@media (prefers-reduced-motion: reduce) {
    .avui-feed,
    .avui-feed-row,
    .avui-feed-chip,
    .avui-meter,
    .avui-meter-rate,
    .avui-depth,
    .avui-depth-seg {
        transition: none;
        animation: none;
        scroll-behavior: auto;
    }
}

/* --- social-s1: message, thread, composer -------------------------------- */

/* Social S1 — message bubble, thread column, composer.
   Colors are --avui-* tokens only. The mine bubble is a 12% accent mix.
   Presence: online = success, away = warning, offline = text-muted
   (there is no --avui-muted token). */

/* === Message === */

.avui-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    min-width: 0;
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: var(--avui-font-size);
}

.avui-msg-mine {
    flex-direction: row-reverse;
}

.avui-msg-compact {
    gap: 6px;
}

.avui-msg-avatar {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.avui-msg-avatar-face {
    display: flex;
}

.avui-msg-presence {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--avui-bg);
}

.avui-msg-presence-online {
    background: var(--avui-success);
}

.avui-msg-presence-away {
    background: var(--avui-warning);
}

.avui-msg-presence-offline {
    background: var(--avui-text-muted);
}

.avui-msg-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(75%, 36rem);
}

.avui-msg-mine .avui-msg-main {
    align-items: flex-end;
}

.avui-msg-compact .avui-msg-main {
    gap: 2px;
}

.avui-msg-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
}

.avui-msg-name {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--avui-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avui-msg-time {
    flex-shrink: 0;
    color: var(--avui-text-muted);
    font-size: 12px;
    line-height: 1.3;
}

.avui-msg-bubble {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius-lg);
    background: var(--avui-bg-card);
    color: var(--avui-text);
    font: inherit;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.avui-msg-mine .avui-msg-bubble {
    background: color-mix(in srgb, var(--avui-accent) 12%, transparent);
    border-color: var(--avui-accent);
}

.avui-msg-compact .avui-msg-bubble {
    padding: 4px 8px;
}

.avui-msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
}

.avui-msg-thread {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--avui-accent);
    font-family: var(--avui-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: color var(--avui-transition);
}

.avui-msg-thread:hover {
    color: var(--avui-accent-hover);
}

.avui-msg-thread:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-msg-status {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    color: var(--avui-text-muted);
}

.avui-msg-status-read {
    color: var(--avui-success);
}

.avui-msg-tick {
    display: block;
}

.avui-msg-tick + .avui-msg-tick {
    margin-left: -7px;
}

/* === Thread === */

.avui-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    margin: 0;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: auto;
    color: var(--avui-text);
    font-family: var(--avui-font);
}

.avui-thread:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: -2px;
}

/* === Composer === */

.avui-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 8px;
    border-top: 1px solid var(--avui-border);
    background: var(--avui-bg-panel);
}

.avui-composer-input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius);
    background: var(--avui-bg-card);
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: var(--avui-font-size);
    line-height: 1.4;
    transition: border-color var(--avui-transition);
}

.avui-composer-input::placeholder {
    color: var(--avui-text-muted);
}

.avui-composer-input:focus {
    outline: none;
    border-color: var(--avui-accent);
}

.avui-composer-send {
    flex-shrink: 0;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--avui-accent);
    border-radius: var(--avui-radius);
    background: var(--avui-accent);
    color: var(--avui-bg);
    font-family: var(--avui-font);
    font-size: var(--avui-font-size);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color var(--avui-transition), border-color var(--avui-transition);
}

.avui-composer-send:hover:not(:disabled) {
    background: var(--avui-accent-hover);
    border-color: var(--avui-accent-hover);
}

.avui-composer-send:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-composer-send:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .avui-msg-thread,
    .avui-composer-input,
    .avui-composer-send {
        transition: none;
    }
}

/* --- social-s2: conversations, presence, typing, reactions ---------------- */

/* Social S2 — conversation rows, presence dots, avatar stack, typing, reactions.
   Colors are --avui-* tokens only. Offline uses --avui-text-muted.
   Chart tokens distinguish stacked circles in dark and light; text on
   those fills is --avui-bg, which flips with the theme.
   Typing dots pulse. Reduced motion leaves them static. */

/* === Conversation list === */

.avui-conversation-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: var(--avui-font-size);
}

.avui-conversation-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "stack title time"
        "stack preview badge";
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--avui-border);
    appearance: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    outline: none;
}

.avui-conversation-row:last-child {
    border-bottom: 0;
}

.avui-conversation-row:hover {
    background: color-mix(in srgb, var(--avui-text) 6%, transparent);
}

.avui-conversation-row:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: -2px;
}

.avui-conversation-row-selected {
    background: color-mix(in srgb, var(--avui-accent) 14%, transparent);
    box-shadow: inset 2px 0 0 var(--avui-accent);
}

.avui-conversation-row-selected:hover {
    background: color-mix(in srgb, var(--avui-accent) 20%, transparent);
}

.avui-conversation-stack {
    grid-area: stack;
    display: flex;
    align-items: center;
}

.avui-conversation-title {
    grid-area: title;
    min-width: 0;
    overflow: hidden;
    color: var(--avui-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avui-conversation-title-unread {
    font-weight: 700;
}

.avui-conversation-time {
    grid-area: time;
    justify-self: end;
    color: var(--avui-text-muted);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.avui-conversation-preview {
    grid-area: preview;
    min-width: 0;
    overflow: hidden;
    color: var(--avui-text-muted);
    font-size: 13px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avui-conversation-unread {
    grid-area: badge;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--avui-accent);
    color: var(--avui-bg);
    font-family: var(--avui-font);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* === Presence dot === */

.avui-presence-dot {
    display: inline-block;
    box-sizing: border-box;
    flex-shrink: 0;
    border: 1px solid var(--avui-bg);
    border-radius: 999px;
    vertical-align: middle;
}

.avui-presence-dot-online {
    background: var(--avui-success);
}

.avui-presence-dot-away {
    background: var(--avui-warning);
}

.avui-presence-dot-offline {
    background: var(--avui-text-muted);
}

/* === Avatar stack === */

.avui-avatar-stack {
    display: inline-flex;
    align-items: center;
    min-width: 28px;
    min-height: 28px;
}

.avui-avatar-stack-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin-left: -8px;
    border: 2px solid var(--avui-bg);
    border-radius: 999px;
    color: var(--avui-bg);
    font-family: var(--avui-font);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    overflow: hidden;
    user-select: none;
}

.avui-avatar-stack-item:first-child {
    margin-left: 0;
}

.avui-avatar-stack-item:nth-child(8n + 1) { background: var(--avui-chart-1); }
.avui-avatar-stack-item:nth-child(8n + 2) { background: var(--avui-chart-2); }
.avui-avatar-stack-item:nth-child(8n + 3) { background: var(--avui-chart-3); }
.avui-avatar-stack-item:nth-child(8n + 4) { background: var(--avui-chart-4); }
.avui-avatar-stack-item:nth-child(8n + 5) { background: var(--avui-chart-5); }
.avui-avatar-stack-item:nth-child(8n + 6) { background: var(--avui-chart-6); }
.avui-avatar-stack-item:nth-child(8n + 7) { background: var(--avui-chart-7); }
.avui-avatar-stack-item:nth-child(8n + 8) { background: var(--avui-chart-8); }

/* === Typing === */

.avui-typing {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: var(--avui-text-muted);
    font-family: var(--avui-font);
    font-size: 13px;
    line-height: 1.4;
}

.avui-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 1em;
}

.avui-typing-dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--avui-text-muted);
    animation: avui-typing-pulse 1.2s ease-in-out infinite;
}

.avui-typing-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.avui-typing-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes avui-typing-pulse {
    0%,
    80%,
    100% {
        opacity: 0.25;
    }
    40% {
        opacity: 1;
    }
}

/* === Reactions === */

.avui-reaction-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.avui-reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 2px 8px;
    border: 1px solid var(--avui-border);
    border-radius: 999px;
    appearance: none;
    background: color-mix(in srgb, var(--avui-text) 6%, transparent);
    color: var(--avui-text);
    font-family: var(--avui-font);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    outline: none;
}

.avui-reaction:hover {
    border-color: var(--avui-accent);
}

.avui-reaction:focus-visible {
    outline: 2px solid var(--avui-accent);
    outline-offset: 2px;
}

.avui-reaction.avui-reaction-mine {
    border-color: var(--avui-accent);
    background: color-mix(in srgb, var(--avui-accent) 12%, transparent);
}

.avui-reaction-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .avui-typing-dot {
        animation: none;
        opacity: 1;
    }
}

/* === AppShell + Sheet + SegmentedControl (2026-10-24) ===
   Breakpoint registry shared with org-riskbias-ui compact canon:
   compact ≤767px · regular 768–1119px · wide ≥1120px. Hosts must not
   add other widths for these primitives. */
.avui-shell { display: flex; flex-direction: column; height: 100dvh; background: var(--avui-bg); color: var(--avui-text); font-family: var(--avui-font); }
.avui-shell-top {
    display: flex; align-items: center; gap: 12px; flex: none;
    min-height: 52px; padding: 6px 16px;
    padding-top: max(6px, env(safe-area-inset-top));
    border-bottom: 1px solid var(--avui-border); background: var(--avui-bg-panel);
}
.avui-shell-body { display: flex; flex: 1; min-height: 0; }
.avui-shell-main { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px 32px; }
.avui-shell-rail {
    display: none; flex-direction: column; gap: 2px; flex: none;
    width: 208px; padding: 12px 8px; border-right: 1px solid var(--avui-border);
    background: var(--avui-bg-panel);
}
.avui-shell-bottom {
    display: flex; flex: none; border-top: 1px solid var(--avui-border);
    background: var(--avui-bg-panel);
    padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.avui-shell-rail-btn, .avui-shell-bottom-btn {
    display: flex; align-items: center; gap: 10px; border: 0; background: transparent;
    color: var(--avui-text-muted); font-family: var(--avui-font); cursor: pointer;
    border-radius: var(--avui-radius); text-align: left;
}
.avui-shell-rail-btn { min-height: 44px; padding: 10px 12px; font-size: 14px; }
.avui-shell-bottom-btn {
    flex: 1 1 0; flex-direction: column; gap: 2px; justify-content: center;
    min-height: 52px; padding: 6px 2px; font-size: 11px;
}
.avui-shell-nav-icon { font-size: 18px; line-height: 1; }
.avui-shell-bottom-btn .avui-shell-nav-icon { font-size: 20px; }
.avui-shell-nav-on { color: var(--avui-accent); background: var(--avui-glass-fill); }
.avui-shell-rail-btn:hover, .avui-shell-bottom-btn:hover { color: var(--avui-text); }
@media (min-width: 768px) {
    .avui-shell-rail { display: flex; }
    .avui-shell-bottom { display: none; }
}
@media (min-width: 768px) and (max-width: 1119px) {
    .avui-shell-rail { width: 68px; }
    .avui-shell-rail-btn { flex-direction: column; gap: 3px; font-size: 10px; text-align: center; padding: 8px 2px; }
}
@media (max-width: 767px) {
    .avui-shell-main { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
}

/* Sheet: bottom sheet on compact, right drawer on regular/wide. */
.avui-sheet-backdrop {
    position: fixed; inset: 0; z-index: 1500; background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: flex-end; justify-content: stretch;
}
.avui-sheet {
    position: relative;
    background: var(--avui-bg-card); color: var(--avui-text); width: 100%;
    max-height: 86dvh; display: flex; flex-direction: column;
    border-radius: 16px 16px 0 0; border-top: 1px solid var(--avui-border);
    padding-bottom: env(safe-area-inset-bottom);
}
.avui-sheet-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px 6px; }
.avui-sheet-grip { position: absolute; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 999px; background: var(--avui-border); margin-top: -2px; }
.avui-sheet-title { margin: 0; font-size: 15px; font-weight: 650; flex: 1; }
.avui-sheet-close {
    width: 44px; height: 44px; border: 0; background: transparent; color: var(--avui-text-muted);
    font-size: 22px; cursor: pointer; border-radius: var(--avui-radius);
}
.avui-sheet-body { overflow-y: auto; padding: 8px 16px 20px; }
@media (min-width: 768px) {
    .avui-sheet-backdrop { justify-content: flex-end; align-items: stretch; }
    .avui-sheet { width: min(420px, 92vw); max-height: none; border-radius: 0; border-top: 0; border-left: 1px solid var(--avui-border); }
    .avui-sheet-grip { display: none; }
}

/* SegmentedControl: scrollable, snap, ≥44px segments. */
.avui-segmented {
    display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
    background: var(--avui-glass-fill); border: 1px solid var(--avui-border);
    border-radius: var(--avui-radius-lg); padding: 3px; scroll-snap-type: x proximity;
}
.avui-segmented::-webkit-scrollbar { display: none; }
.avui-segment {
    flex: 1 0 auto; scroll-snap-align: start; min-height: 44px; padding: 8px 16px;
    border: 0; border-radius: var(--avui-radius); background: transparent;
    color: var(--avui-text-muted); font-family: var(--avui-font); font-size: 13px;
    font-weight: 600; cursor: pointer; white-space: nowrap;
}
.avui-segment-on { color: var(--avui-text); background: var(--avui-bg-card); box-shadow: inset 0 0 0 1px var(--avui-border); }

/* DataTable compact card mode (opt-in via compact_cards): rows restack
   as labelled cells; the header row retires. */
@media (max-width: 767px) {
    .avui-data-table--cards .avui-data-table-scroll { overflow: visible; }
    .avui-data-table--cards table, .avui-data-table--cards tbody { display: block; width: 100%; }
    .avui-data-table--cards thead { display: none; }
    .avui-data-table--cards .avui-data-table-row {
        display: block; border: 1px solid var(--avui-border); border-radius: var(--avui-radius-lg);
        background: var(--avui-bg-card); padding: 8px 12px; margin-bottom: 10px;
    }
    .avui-data-table--cards td {
        display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
        border: 0; padding: 5px 0; text-align: right; overflow-wrap: anywhere;
    }
    .avui-data-table--cards td::before {
        content: attr(data-label); color: var(--avui-text-muted); font-size: 11px;
        font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; text-align: left;
    }
    .avui-data-table--cards td:empty { display: none; }
}

/* Compact touch/type pass: primitives inherit host font sizes, so the
   floor lives here — ≥44px targets, 16px form controls (iOS zoom). */
@media (max-width: 767px) {
    .avui-btn { min-height: 44px; padding: 10px 18px; }
    .avui-btn-icon { width: 44px; height: 44px; }
    .avui-tab-btn { min-height: 44px; padding: 10px 14px; }
    .avui-input, .avui-textarea, .avui-select { font-size: 16px; min-height: 48px; padding: 10px 12px; }
    .avui-modal { min-width: 0; width: calc(100vw - 24px); }
    .avui-tabs-header { overflow-x: auto; scrollbar-width: none; }
    .avui-tabs-header::-webkit-scrollbar { display: none; }
}




/* MeridianMap: continuous information surface (mono by default).
   Edge kind = dash + glyph, node kind = fill value, score = radius. */
.avui-meridian-map {
    background: var(--avui-bg); color: var(--avui-text);
    font-family: var(--avui-font); overflow: hidden;
    border-radius: var(--avui-radius-lg); touch-action: none;
    user-select: none; -webkit-user-select: none;
}
.avui-meridian-svg { display: block; }
.avui-meridian-label { font-size: 10px; pointer-events: none; }
.avui-meridian-edge-glyph { font-size: 9px; pointer-events: none; }
.avui-meridian-node { pointer-events: none; }
.avui-meridian-fit {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    background: var(--avui-bg-card); color: var(--avui-text);
    border: 1px solid var(--avui-border); border-radius: 999px;
    padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
    font-family: var(--avui-font);
}
.avui-meridian-card {
    position: absolute; z-index: 2; width: 230px; padding: 12px;
    background: var(--avui-bg-card); border: 1px solid var(--avui-border);
    border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.avui-meridian-card-author { font-size: 11px; color: var(--avui-text-muted); overflow-wrap: anywhere; }
.avui-meridian-card-body { font-size: 14px; line-height: 1.35; margin-top: 4px; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.avui-meridian-card-earn { font-size: 11px; font-weight: 700; margin-top: 6px; }
.avui-lens-header { font-family: var(--avui-font); color: var(--avui-text); }
.avui-lens-label { font-size: 15px; font-weight: 700; }
.avui-lens-fingerprint { font-size: 11px; color: var(--avui-text-muted); font-family: var(--avui-font-mono); margin-top: 2px; }
.avui-lens-telemetry { font-size: 11px; color: var(--avui-text-muted); font-family: var(--avui-font-mono); margin-top: 2px; }
.avui-lens-markers { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.avui-lens-marker { font-size: 11px; color: var(--avui-text-muted); }

/* Orientation in human form: face (whose map, block reach, seal),
   weather (surge, sources, posts, horizon), rim chips for absence,
   and the inspector (exact dev strings, one tap in). Glyph +
   caption always; mono except the knock gold exception. */
.avui-orient-face, .avui-weather-row {
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
    font-family: var(--avui-font); color: var(--avui-text);
}
.avui-orient-whose { display: flex; flex-direction: column; }
.avui-orient-owner { font-size: 15px; font-weight: 700; font-family: var(--avui-font-mono); }
.avui-orient-whose-label { font-size: 11px; color: var(--avui-text-muted); }
.avui-orient-fact { display: inline-flex; gap: 7px; align-items: center; font-size: 12px; }
.avui-orient-glyph { flex: none; }
.avui-weather-row { margin-top: 6px; color: var(--avui-text-muted); }
.avui-weather-wave { font-size: 16px; color: var(--avui-text); }
.avui-hidden-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.avui-hidden-chip {
    display: inline-flex; gap: 6px; align-items: center;
    font-size: 11px; color: var(--avui-text-muted);
    border: 1px dashed var(--avui-border); border-radius: 999px; padding: 3px 9px;
    font-family: var(--avui-font);
}
.avui-hidden-chip-glyph { font-weight: 700; color: var(--avui-text); }
.avui-empty-map {
    font-family: var(--avui-font); font-size: 13px; color: var(--avui-text-muted);
    border: 1px dashed var(--avui-border); border-radius: 12px; padding: 14px;
    text-align: center;
}
.avui-inspector {
    font-family: var(--avui-font); border: 1px solid var(--avui-border);
    border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px;
}
.avui-inspector-row { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; }
.avui-inspector-label { color: var(--avui-text-muted); }
.avui-inspector-value { font-family: var(--avui-font-mono); overflow-wrap: anywhere; text-align: right; }
.avui-meridian-chips { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* DivePane: glass content walker over the map. */
.avui-dive-pane {
    position: absolute; inset: 56px 18px 96px; z-index: 8; overflow: hidden;
    background: rgba(10,10,10,0.72); border: 1px solid var(--avui-border);
    border-radius: 20px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    padding: 18px; font-family: var(--avui-font); color: var(--avui-text);
}
.avui-dive-pane-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.avui-dive-crumb { font-size: 11px; color: var(--avui-text-muted); font-family: var(--avui-font-mono); overflow-wrap: anywhere; }
.avui-dive-done, .avui-dive-navbtn {
    background: var(--avui-bg-card); color: var(--avui-text); border: 1px solid var(--avui-border);
    border-radius: 999px; padding: 6px 14px; font-weight: 700; cursor: pointer; font-family: var(--avui-font);
}
.avui-dive-dimensions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.avui-dive-dimension {
    border-radius: 999px; padding: 6px 12px; font-weight: 700; cursor: pointer;
    border: 1px solid var(--avui-border); background: var(--avui-bg-panel); color: var(--avui-text);
    font-family: var(--avui-font);
}
.avui-dive-dimension.is-active { background: var(--avui-text); color: var(--avui-bg); }
.avui-dive-author { margin-top: 16px; font-size: 12px; color: var(--avui-text-muted); overflow-wrap: anywhere; }
.avui-dive-body { margin-top: 6px; font-size: 22px; line-height: 1.35; max-width: 640px; }
.avui-dive-readout { margin-top: 10px; font-size: 11px; color: var(--avui-text-muted); font-family: var(--avui-font-mono); }
.avui-dive-next {
    margin-top: 14px; width: 100%; text-align: left; cursor: pointer;
    background: var(--avui-bg-panel); color: var(--avui-text);
    border: 1px solid var(--avui-border); border-radius: 12px; padding: 10px 12px;
    font-family: var(--avui-font); font-size: 14px;
}
.avui-dive-next-meta { font-size: 11px; color: var(--avui-text-muted); }
.avui-dive-note {
    margin-top: 14px; font-size: 12px; color: var(--avui-text-muted);
    border: 1px dashed var(--avui-border); border-radius: 12px; padding: 10px 12px;
}
.avui-dive-hub { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.avui-dive-hub-title { font-size: 11px; letter-spacing: 0.08em; color: var(--avui-text-muted); }
.avui-dive-lane {
    text-align: left; border-radius: 12px; padding: 10px 12px; cursor: pointer;
    border: 1px solid var(--avui-border); background: var(--avui-bg-panel); color: var(--avui-text);
    font-family: var(--avui-font); font-size: 14px;
}
.avui-dive-lane.is-lit { background: var(--avui-text); color: var(--avui-bg); }
.avui-dive-nav { position: absolute; left: 18px; bottom: 14px; display: flex; gap: 8px; }
.avui-meridian-chip {
    background: var(--avui-bg-panel); color: var(--avui-text);
    border: 1px solid var(--avui-border); border-radius: 999px;
    padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer;
    font-family: var(--avui-font); min-height: 32px;
}

/* Contacts & identity: the person card in the map's mono grammar.
   Reduced confidence = dashed + dimmed; collision = double outline.
   Meaning is carried by border style and weight, never hue. Life is
   motion: a springy cubic-bezier (the CSS cousin of the dock's
   playful ζ≈0.5 spring) on hovers and presses, staggered entrances,
   per-person mono avatar shades. Reduced-motion stills all of it. */
@keyframes avui-rise {
    from { opacity: 0; transform: translateY(7px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes avui-knock {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-9deg) translateY(-1px); }
    40% { transform: rotate(2deg); }
    60% { transform: rotate(-7deg) translateY(-1px); }
    80% { transform: rotate(0deg); }
}
@keyframes avui-tick-flash {
    0%, 100% { opacity: 0.2; }
    20%, 60% { opacity: 1; }
    40%, 80% { opacity: 0.35; }
}
@keyframes avui-dot-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}
.avui-panel {
    border: 1px solid var(--avui-border); border-radius: 16px;
    background: var(--avui-bg-card); padding: 14px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.28);
    animation: avui-rise 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.avui-panel-head { display: flex; gap: 10px; align-items: center; }
.avui-panel-icon {
    width: 34px; height: 34px; border-radius: 50%; flex: none;
    border: 1px solid var(--avui-border); background: var(--avui-bg-panel);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
/* Our knock mark (inline SVG, currentColor icon stroke — never a
   platform emoji): the fist rocks and its impact ticks flash in
   sequence when it heads a knock panel; elsewhere it sits still. */
.avui-knock-glyph {
    display: inline-block; vertical-align: -2px; flex: none;
    color: var(--avui-knock, #C9B48A);
}
.avui-knock-row .avui-knock-glyph, .avui-knock-confirm .avui-knock-glyph {
    animation: avui-knock 2.8s ease-in-out infinite;
    transform-origin: 50% 85%;
}
.avui-knock-tick { animation: avui-tick-flash 2.8s ease-in-out infinite; }
.avui-knock-tick-2 { animation-delay: 0.12s; }
.avui-knock-tick-3 { animation-delay: 0.24s; }
.avui-knock-button, .avui-knock-offer .avui-address-action {
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.avui-panel-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.avui-panel-title { font-size: 15px; font-weight: 700; }
.avui-person-card {
    display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0;
    padding: 10px 12px; border: 1px solid var(--avui-border);
    border-radius: 14px; background: var(--avui-bg-card); color: var(--avui-text);
    font-family: var(--avui-font);
}
.avui-person-reduced { border-style: dashed; opacity: 0.66; }
.avui-person-unavailable { border-style: dotted; opacity: 0.45; }
.avui-person-collision { outline: 2px solid var(--avui-text); outline-offset: 1px; }
.avui-person-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    border: 1px solid var(--avui-border); display: flex; color: #fff;
    align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
    letter-spacing: 0.02em; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avui-address-row:hover .avui-person-avatar, .avui-panel:hover .avui-person-avatar {
    transform: rotate(-5deg) scale(1.07);
}
.avui-person-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.avui-person-namerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.avui-person-name {
    font-size: 14px; font-weight: 700; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.avui-person-standing {
    flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--avui-text-muted);
    border: 1px solid var(--avui-border); border-radius: 999px; padding: 2px 7px;
}
.avui-person-reduced .avui-person-standing { border-style: dashed; }
.avui-person-handle {
    font-size: 12px; font-family: var(--avui-font-mono); overflow-wrap: anywhere;
    color: var(--avui-text-muted);
}
.avui-person-detail { font-size: 11px; color: var(--avui-text-muted); }
.avui-person-collision-note {
    font-size: 11px; font-weight: 700; margin-top: 3px;
    border: 1px dashed var(--avui-border); border-radius: 8px; padding: 3px 7px;
    align-self: flex-start;
}
.avui-address-book, .avui-knock-row, .avui-knock-confirm, .avui-grant-diff, .avui-handle-composer {
    font-family: var(--avui-font); color: var(--avui-text);
    display: flex; flex-direction: column; gap: 10px;
}
.avui-search-wrap { position: relative; }
.avui-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: 16px; color: var(--avui-text-muted); pointer-events: none;
}
.avui-address-search {
    width: 100%; padding: 10px 12px 10px 34px; border-radius: 999px;
    border: 1px solid var(--avui-border); background: var(--avui-bg-panel);
    color: var(--avui-text); font-family: var(--avui-font); font-size: 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.avui-address-search:focus {
    outline: none; border-color: var(--avui-text);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}
.avui-address-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.avui-address-chip, .avui-address-action {
    border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 700;
    border: 1px solid var(--avui-border); background: var(--avui-bg-panel);
    color: var(--avui-text); cursor: pointer; font-family: var(--avui-font);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.15s ease, color 0.15s ease, box-shadow 0.2s ease;
}
.avui-address-chip:hover, .avui-address-action:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.avui-address-chip:active, .avui-address-action:active { transform: scale(0.95); }
.avui-address-chip.is-active { background: var(--avui-text); color: var(--avui-bg); }
.avui-action-primary {
    background: var(--avui-text); color: var(--avui-bg); border-color: var(--avui-text);
    padding: 7px 15px; flex: none;
}
.avui-address-notice {
    font-size: 12px; border: 1px dashed var(--avui-border);
    border-radius: 12px; padding: 9px 12px; background: var(--avui-bg-panel);
    animation: avui-rise 0.4s ease both;
}
.avui-address-state { font-size: 13px; color: var(--avui-text-muted); padding: 14px 4px; }
.avui-loading-dots span {
    display: inline-block;
    animation: avui-dot-bounce 1.2s ease-in-out infinite;
}
.avui-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.avui-loading-dots span:nth-child(3) { animation-delay: 0.3s; }
.avui-address-row {
    display: flex; gap: 10px; align-items: center;
    border: 1px solid var(--avui-border); border-radius: 14px;
    background: var(--avui-bg-card); padding: 6px 8px 6px 6px;
    animation: avui-rise 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    animation-delay: calc(var(--row-i, 0) * 55ms);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.avui-address-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.32);
}
/* Inside a row or panel the person card is content, not a second card. */
.avui-address-row .avui-person-card, .avui-panel .avui-person-card {
    border: none; background: transparent; padding: 6px;
    outline-offset: -1px;
}
.avui-knock-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.avui-scope-list { display: flex; flex-direction: column; gap: 6px; }
.avui-scope-line {
    display: flex; gap: 9px; align-items: flex-start; font-size: 13px;
    background: var(--avui-bg-panel); border-radius: 10px; padding: 8px 10px;
}
.avui-scope-marker {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    border: 1px solid var(--avui-border); display: flex;
    align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.avui-scope-main { display: flex; flex-direction: column; gap: 1px; }
.avui-scope-removed .avui-scope-line { opacity: 0.55; }
.avui-scope-removed .avui-scope-main > span:first-child { text-decoration: line-through; }
.avui-composer-hint {
    font-size: 12px; color: var(--avui-text-muted); padding: 2px 4px;
    display: inline-flex; align-items: center; gap: 6px;
}
.avui-composer-result { animation: avui-rise 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.avui-knock-offer {
    display: flex; gap: 10px; align-items: center;
    border: 1px dashed var(--avui-border); border-radius: 14px;
    background: var(--avui-bg-card); padding: 12px;
}
.avui-knock-offer-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) {
    .avui-panel, .avui-address-row, .avui-address-notice, .avui-composer-result {
        animation: none;
    }
    .avui-knock-row .avui-knock-glyph, .avui-knock-confirm .avui-knock-glyph,
    .avui-knock-tick, .avui-loading-dots span { animation: none; }
    .avui-person-avatar, .avui-address-chip, .avui-address-action, .avui-address-row {
        transition: none;
    }
}

/* ChatHeads: loosely-pinned dock. Transform is spring-driven from
   Rust (dock physics); CSS only paints the circles. Mono presence:
   white at three opacities, never hue. */
.avui-chat-heads {
    display: flex; flex-direction: column; gap: 8px; align-items: center;
    font-family: var(--avui-font);
}
.avui-chat-head {
    position: relative; width: 56px; height: 56px; border-radius: 50%;
    border: 1px solid var(--avui-border); background: var(--avui-bg-card);
    color: var(--avui-text); cursor: pointer; touch-action: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 600; padding: 0; will-change: transform;
}
.avui-chat-head.is-active { border: 2px solid var(--avui-text); }
.avui-chat-head-label { pointer-events: none; }
.avui-chat-head-badge {
    position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px;
    border-radius: 999px; background: var(--avui-text); color: var(--avui-bg);
    font-size: 11px; font-weight: 700; display: flex; align-items: center;
    justify-content: center; padding: 0 6px; pointer-events: none;
}
.avui-chat-head-presence {
    position: absolute; top: 2px; right: 2px; width: 12px; height: 12px;
    border-radius: 50%; border: 2px solid var(--avui-bg); pointer-events: none;
}
.avui-chat-head-overflow, .avui-chat-head-new {
    font-size: 13px; font-weight: 700; color: var(--avui-text-muted);
}
/* Ghost anchor: the `+` button's home while it travels up into the
   expanded row. Dashed, half-lit — a place held, not a control
   competing with content. Tapping it re-collapses the stack. */
.avui-chat-head-ghost {
    border: 1.5px dashed rgba(255, 255, 255, 0.4);
    background: transparent; color: rgba(255, 255, 255, 0.4);
    font-size: 15px; font-weight: 600;
}
.avui-unread-divider {
    display: flex; align-items: center; gap: 10px;
    color: var(--avui-text-muted); font-size: 11px; font-weight: 700;
    font-family: var(--avui-font); margin: 8px 0;
}
.avui-post-embed {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
    text-align: left; width: 100%; padding: 10px; cursor: pointer;
    background: var(--avui-bg-panel); color: var(--avui-text);
    border: 1px solid var(--avui-border); border-radius: 12px;
    font-family: var(--avui-font);
}
.avui-post-embed-author { font-size: 11px; color: var(--avui-text-muted); overflow-wrap: anywhere; }
.avui-post-embed-body { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.avui-post-embed-missing { font-size: 12px; font-style: italic; color: var(--avui-text-muted); }
.avui-compose-embed { flex-direction: row; align-items: flex-start; gap: 8px; }
.avui-compose-embed-main {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
    text-align: left; flex: 1; background: none; border: 0; padding: 0;
    color: inherit; font: inherit; cursor: pointer;
}
.avui-compose-embed-remove {
    background: none; border: 0; color: var(--avui-text-muted);
    font-size: 16px; cursor: pointer; padding: 2px 6px; min-width: 32px; min-height: 32px;
}

/* GlassThread: content-first translucent sheet over the map.
   The map stays visible; chrome is the focused message's ops. */
.avui-glass-thread {
    display: flex; flex-direction: column; gap: 10px; padding: 16px;
    background: var(--avui-glass-fill); border: 1px solid var(--avui-glass-border);
    border-radius: var(--avui-radius-lg);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    font-family: var(--avui-font); color: var(--avui-text);
}
.avui-glass-message {
    padding: 12px 14px; border-radius: 14px; cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent; max-width: 86%;
    align-self: flex-start;
}
.avui-glass-message.is-mine { align-self: flex-end; background: rgba(255, 255, 255, 0.09); }
.avui-glass-message.is-focused { border-color: var(--avui-border); }
.avui-glass-message-author { font-size: 11px; font-weight: 700; color: var(--avui-text-muted); display: flex; gap: 8px; }
.avui-glass-message-time { font-weight: 400; }
.avui-glass-message-body { font-size: 16px; line-height: 1.45; margin-top: 4px; overflow-wrap: anywhere; }
.avui-message-ops { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.avui-message-op {
    background: var(--avui-bg-card); color: var(--avui-text);
    border: 1px solid var(--avui-border); border-radius: 999px;
    padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
    font-family: var(--avui-font); min-height: 36px;
}
.avui-message-ops-scopes { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.avui-message-op-scope { font-weight: 600; color: var(--avui-text-muted); }
.avui-message-ops-chosen { font-size: 12px; font-weight: 700; align-self: center; }

/* Message input system: token-derived form composer. */
.avui-rich-composer {
    display: flex; flex-direction: column; gap: 8px; padding: 12px;
    background: var(--avui-glass-fill); border: 1px solid var(--avui-glass-border);
    border-radius: var(--avui-radius-lg); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px); font-family: var(--avui-font); color: var(--avui-text);
}
.avui-input-formline { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.avui-input-form { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.avui-input-formtools { display: flex; gap: 6px; flex-wrap: wrap; }
.avui-input-tool {
    background: var(--avui-bg-panel); color: var(--avui-text-muted); border: 1px solid var(--avui-border);
    border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
    font-family: var(--avui-font); min-height: 36px;
}
.avui-input-tool.is-on { background: var(--avui-text); color: var(--avui-bg); }
.avui-input-recipients { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 30px; }
.avui-input-nobody { font-size: 12px; color: var(--avui-text-muted); }
.avui-input-token {
    display: inline-flex; gap: 6px; align-items: center; padding: 5px 8px 5px 11px;
    background: var(--avui-bg-card); border: 1px solid var(--avui-border); border-radius: 999px;
    font-size: 12px; font-weight: 700;
}
.avui-input-token button { background: none; border: 0; color: var(--avui-text-muted); cursor: pointer; font-size: 13px; padding: 0 2px; }
.avui-input-panel { display: flex; flex-direction: column; gap: 6px; }
.avui-input-row {
    display: flex; gap: 10px; align-items: center; text-align: left; width: 100%;
    background: var(--avui-bg-panel); color: var(--avui-text); border: 1px solid var(--avui-border);
    border-radius: 12px; padding: 9px 12px; cursor: pointer; font-family: var(--avui-font);
}
.avui-input-row.is-selected { border-color: var(--avui-text); background: var(--avui-bg-card); }
.avui-input-row-glyph { font-size: 14px; }
.avui-input-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.avui-input-row-label { font-size: 13px; font-weight: 700; }
.avui-input-row-detail { font-size: 11px; color: var(--avui-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avui-input-row-check { font-size: 13px; font-weight: 800; min-width: 16px; text-align: center; }
.avui-input-addrow { display: flex; gap: 8px; }
.avui-input-field {
    flex: 1; background: var(--avui-bg-panel); color: var(--avui-text); border: 1px solid var(--avui-border);
    border-radius: 10px; padding: 9px 12px; font-size: 14px; font-family: var(--avui-font); min-height: 44px;
}
.avui-input-addbtn, .avui-input-create, .avui-input-send {
    background: var(--avui-text); color: var(--avui-bg); border: 0; border-radius: 10px;
    padding: 9px 16px; font-size: 13px; font-weight: 800; cursor: pointer; font-family: var(--avui-font);
    min-height: 44px;
}
.avui-input-addbtn:disabled, .avui-input-create:disabled, .avui-input-send:disabled { opacity: 0.35; cursor: default; }
.avui-input-error { font-size: 12px; color: var(--avui-text); }
.avui-input-suggestions { display: flex; gap: 6px; flex-wrap: wrap; }
.avui-input-suggestion {
    background: none; border: 1px solid var(--avui-border); color: var(--avui-text-muted);
    border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer;
    font-family: var(--avui-font); min-height: 32px;
}
.avui-input-context { display: flex; gap: 6px; flex-wrap: wrap; }
.avui-input-contextchip {
    display: inline-flex; gap: 6px; align-items: center; padding: 5px 8px 5px 11px; max-width: 100%;
    background: var(--avui-bg-panel); border: 1px dashed var(--avui-border); border-radius: 999px;
    font-size: 11px; overflow-wrap: anywhere;
}
.avui-input-contextchip button { background: none; border: 0; color: var(--avui-text-muted); cursor: pointer; padding: 0 2px; }
.avui-input-protocols { display: flex; gap: 8px; flex-wrap: wrap; }
.avui-input-protocol {
    display: flex; flex-direction: column; gap: 1px; align-items: flex-start; text-align: left;
    background: var(--avui-bg-panel); color: var(--avui-text); border: 1px solid var(--avui-border);
    border-radius: 12px; padding: 8px 12px; cursor: pointer; font-family: var(--avui-font); min-height: 52px;
}
.avui-input-protocol.is-selected { border-color: var(--avui-text); background: var(--avui-bg-card); }
.avui-input-protocol-intent { font-size: 12px; font-weight: 800; }
.avui-input-protocol-name { font-size: 11px; color: var(--avui-text-muted); }
.avui-input-protocol-note { font-size: 10px; color: var(--avui-text-muted); }
.avui-input-draftrow { display: flex; gap: 8px; align-items: flex-end; }
.avui-input-draft {
    flex: 1; background: var(--avui-bg-panel); color: var(--avui-text); border: 1px solid var(--avui-border);
    border-radius: 12px; padding: 10px 12px; font-size: 15px; font-family: var(--avui-font); resize: vertical;
}
.avui-input-groupcreator { display: flex; flex-direction: column; gap: 8px; font-family: var(--avui-font); }
.avui-input-share { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.avui-input-share-label { font-size: 11px; color: var(--avui-text-muted); font-weight: 700; }
.avui-input-sharemode {
    background: var(--avui-bg-panel); color: var(--avui-text-muted); border: 1px solid var(--avui-border);
    border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 700; cursor: pointer;
    font-family: var(--avui-font); min-height: 32px;
}
.avui-input-sharemode.is-selected { background: var(--avui-text); color: var(--avui-bg); }
.avui-input-share-note { font-size: 11px; color: var(--avui-text-muted); }