/*
 * Theme Base Styles - Applied to all themes
 * Uses CSS custom properties defined in wwwroot/css/themes/*.css.
 * Ported from NeureauAIEngine and trimmed to the components CodeLens has;
 * copy further rules from the engine's theme-base.css as surfaces grow.
 */

/* Root element theming */
:root {
    /* Default to seafoam theme if not specified */
    --theme-primary: #20B2AA;
}

/* Body and basic elements */
body {
    margin: 0;
    font-family: var(--theme-font-family);
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    transition: background-color var(--theme-transition-base),
                color var(--theme-transition-base);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--theme-text-primary);
}

a {
    color: var(--theme-primary);
    transition: color var(--theme-transition-fast);
}

a:hover {
    color: var(--theme-primary-dark);
}

/* Navigation styles */
.theme-nav {
    background: var(--theme-nav-bg);
    color: var(--theme-nav-text);
    box-shadow: var(--theme-shadow-sm);
    padding: var(--theme-spacing-md) var(--theme-spacing-xl);
    transition: all var(--theme-transition-base);
}

.theme-nav a {
    color: var(--theme-nav-text);
    text-decoration: none;
    transition: background-color var(--theme-transition-fast);
}

.theme-nav a:hover {
    background-color: var(--theme-nav-hover);
}

:root[data-theme="seafoam"] .theme-nav {
    box-shadow: 0 2px 4px rgba(32, 178, 170, 0.15);
}

/* Cards */
.theme-card {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: var(--theme-border-radius);
    padding: var(--theme-spacing-lg);
    box-shadow: var(--theme-card-shadow);
    transition: transform var(--theme-transition-base),
                box-shadow var(--theme-transition-base);
}

/* Buttons */
.theme-btn-primary,
.btn.theme-btn-primary,
a.theme-btn-primary {
    background-color: var(--theme-btn-primary-bg) !important;
    color: var(--theme-btn-primary-text) !important;
    border: 2px solid var(--theme-btn-primary-bg) !important;
    border-radius: var(--theme-border-radius-sm);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--theme-transition-base);
    text-decoration: none;
}

.theme-btn-primary:hover,
.btn.theme-btn-primary:hover,
a.theme-btn-primary:hover {
    background-color: var(--theme-btn-primary-hover) !important;
    border-color: var(--theme-btn-primary-hover) !important;
    color: var(--theme-btn-primary-text) !important;
    transform: translateY(-1px);
    box-shadow: var(--theme-shadow-md);
}

.theme-btn-secondary,
.btn.theme-btn-secondary,
a.theme-btn-secondary {
    background-color: var(--theme-btn-secondary-bg) !important;
    color: var(--theme-btn-secondary-text) !important;
    border: 2px solid var(--theme-btn-secondary-border) !important;
    border-radius: var(--theme-border-radius-sm);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--theme-transition-base);
    text-decoration: none;
}

.theme-btn-secondary:hover,
.btn.theme-btn-secondary:hover,
a.theme-btn-secondary:hover {
    background-color: var(--theme-primary) !important;
    color: var(--theme-text-inverse) !important;
    border-color: var(--theme-primary) !important;
    transform: translateY(-1px);
    box-shadow: var(--theme-shadow-md);
}

/* Footer */
.theme-footer {
    background: var(--theme-footer-bg);
    color: var(--theme-footer-text);
    padding: var(--theme-spacing-lg) var(--theme-spacing-xl);
}

/* Utilities */
.theme-text-primary { color: var(--theme-text-primary); }
.theme-text-secondary { color: var(--theme-text-secondary); }
.theme-text-muted { color: var(--theme-text-muted); }
.theme-bg-primary { background-color: var(--theme-bg-primary); }
.theme-bg-secondary { background-color: var(--theme-bg-secondary); }
.theme-bg-accent { background-color: var(--theme-bg-accent); }

/* Smooth theme transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: var(--theme-transition-base);
    transition-timing-function: ease;
}

.no-theme-transition {
    transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   APP SHELL — layout scaffold (variable-driven; brand-agnostic)
   ═══════════════════════════════════════════════════════════════════════ */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-main {
    flex: 1 1 auto;
}

/* Founders offer — dark pill on the body-colored strip, under the header on every page */
.founders-strip { display: flex; justify-content: center; padding: 12px 16px; background: var(--theme-bg-secondary); }
.founders-pill { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; text-align: center; background: #141D33; color: #AEC0DE; border: 1px solid #2A3550; border-radius: 999px; padding: 8px 20px; font-size: 13.5px; }
.founders-pill b { color: #fff; }
/* CTA reads as a button: white pill outline, fill-on-hover */
.founders-pill a.founders-cta { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap;
    border: 1.5px solid rgba(255, 255, 255, 0.9); border-radius: 999px; padding: 4px 16px; margin-left: 6px;
    transition: background-color .15s ease, color .15s ease; }
.founders-pill a.founders-cta:hover { background: #fff; color: #141D33; text-decoration: none; }

.app-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--theme-spacing-xl) var(--theme-spacing-lg) var(--theme-spacing-3xl);
}

/* ═══════════════════════════════════════════════════════════════════════
   TOP NAV — flex bar layered on .theme-nav (keeps theme bg/shadow/color)
   ═══════════════════════════════════════════════════════════════════════ */
.app-topnav {
    display: flex;
    align-items: center;
    gap: var(--theme-spacing-lg);
    min-height: var(--theme-nav-height, 60px);
    padding: 0 var(--theme-spacing-xl);
    position: sticky;
    top: 0;
    z-index: 40;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-weight: 700;
    font-size: var(--theme-font-size-lg);
    color: var(--theme-nav-text);
    white-space: nowrap;
    text-decoration: none;
}

.app-brand:hover { text-decoration: none; }
.app-brand svg { width: 30px; height: 30px; flex: none; }
.app-brand .wm {
    font-family: var(--theme-font-display, "Bahnschrift", "Segoe UI Semibold", system-ui, sans-serif);
    font-weight: 600; letter-spacing: -0.02em; font-size: 22px;
}
.app-brand .wm .a { color: var(--theme-nav-text); }
.app-brand .wm .l {
    background: linear-gradient(95deg, #3E9BFF, #8FE0FF);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.app-brand .wm sup { font-size: 0.32em; vertical-align: super; color: #8FB6E8; font-weight: 600; }

/* Floating brand glow on dashboards: fixed bottom-right, drifts gently while the
   bulb's beam (.glowcore inside HeroAperture) breathes. Decorative only. */
.hub-float-mark {
    position: fixed; right: 26px; bottom: 22px; width: 92px; height: 92px;
    z-index: 40; pointer-events: none; opacity: .9;
    filter: drop-shadow(0 0 24px rgba(62, 155, 255, .35));
    animation: hub-float 7s ease-in-out infinite;
}
.hub-float-mark svg { width: 100%; height: 100%; }
.hub-float-mark .glowcore { animation: ail-pulse 3.2s ease-in-out infinite; }
@keyframes hub-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ail-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
/* Reduced motion: stop the positional drift, keep a slower/shallower opacity breath
   (a fade is not vestibular motion). Windows "Animation effects: off" lands here. */
@media (prefers-reduced-motion: reduce) {
    .hub-float-mark { animation: none; }
    .hub-float-mark .glowcore { animation: ail-pulse-soft 6s ease-in-out infinite; }
}
@keyframes ail-pulse-soft { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@media (max-width: 820px) { .hub-float-mark { display: none; } }

/* Tier-1 center slot: announcements / specials. Fills the space between brand and
   session controls; empty (and costless) when no announcement is configured. */
.app-announce {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.app-announce-msg {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(143, 224, 255, 0.35);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: var(--theme-font-size-sm);
    color: #E7EEF9;
    min-width: 0;
}

.app-announce-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-announce-link {
    color: #8FE0FF;
    font-weight: 650;
    white-space: nowrap;
    text-decoration: none;
}
.app-announce-link:hover { text-decoration: underline; color: #8FE0FF; }

/* ── Tier 2: light nav bar (two-tier header, adopted from the Agent UI) ──
   Shares the tier-1 horizontal padding so both bars align. */
.app-navbar {
    display: flex;
    align-items: center;
    gap: var(--theme-spacing-xs);
    padding: 0 var(--theme-spacing-xl);
    background: var(--theme-card-bg);
    border-bottom: 1px solid var(--theme-border-color);
    position: sticky;
    top: var(--theme-nav-height, 60px);
    z-index: 39;
    overflow-x: auto;
}

.app-navbar .app-nav-link {
    color: var(--theme-text-secondary);
    border-radius: 0;
    padding: 0.7rem 0.8rem;
}

.app-navbar .app-nav-link:hover {
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
}

.app-navbar .app-nav-link.active {
    background: transparent;
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
    font-weight: 650;
}

.app-nav-links {
    display: flex;
    align-items: center;
    gap: var(--theme-spacing-xs);
    flex: 1 1 auto;
    margin-left: var(--theme-spacing-md);
}

.app-nav-link {
    padding: 0.45rem 0.8rem;
    border-radius: var(--theme-border-radius-sm);
    font-size: var(--theme-font-size-sm);
    font-weight: 500;
    color: var(--theme-nav-text);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}

.app-nav-link:hover {
    background: var(--theme-nav-hover);
    color: var(--theme-nav-text);
}

.app-nav-link.active {
    background: var(--theme-nav-hover);
    border-bottom-color: currentColor;
    font-weight: 650;
}

.app-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--theme-spacing-sm);
    margin-left: auto;
}

.app-nav-signout {
    padding: 0.45rem 0.8rem;
    border-radius: var(--theme-border-radius-sm);
    font-size: var(--theme-font-size-sm);
    font-weight: 500;
    color: var(--theme-nav-text);
    opacity: 0.9;
    text-decoration: none;
    white-space: nowrap;
}

.app-nav-signout:hover {
    background: var(--theme-nav-hover);
    color: var(--theme-nav-text);
    opacity: 1;
}

/* Hamburger — hidden on desktop, shown under the mobile breakpoint */
.app-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--theme-border-radius-sm);
    color: var(--theme-nav-text);
    cursor: pointer;
}

.app-burger:hover {
    background: var(--theme-nav-hover);
}

.app-burger > span,
.app-burger > span::before,
.app-burger > span::after {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    position: relative;
}

.app-burger > span::before { position: absolute; top: -6px; }
.app-burger > span::after  { position: absolute; top: 6px; }

/* Pop-out sheet + scrim, toggled by the hidden checkbox */
.app-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.app-nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--theme-transition-base);
}

.app-nav-sheet {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(300px, 84vw);
    z-index: 60;
    background: var(--theme-card-bg);
    box-shadow: var(--theme-shadow-xl);
    transform: translateX(100%);
    transition: transform var(--theme-transition-slow);
    padding: var(--theme-spacing-lg);
    overflow-y: auto;
}

.app-sheet-links {
    display: flex;
    flex-direction: column;
    gap: var(--theme-spacing-xs);
}

.app-sheet-link {
    padding: 0.75rem;
    border-radius: var(--theme-border-radius-sm);
    color: var(--theme-text-primary);
    font-weight: 500;
    text-decoration: none;
}

.app-sheet-link:hover { background: var(--theme-bg-accent); }

.app-sheet-link.active {
    background: var(--theme-bg-accent);
    color: var(--theme-primary);
    font-weight: 650;
}

.app-sheet-signout {
    margin-top: var(--theme-spacing-md);
    border-top: 1px solid var(--theme-border-color);
    border-radius: 0;
    padding-top: var(--theme-spacing-md);
}

.app-nav-toggle:checked ~ .app-nav-scrim { opacity: 1; pointer-events: auto; }
.app-nav-toggle:checked ~ .app-nav-sheet { transform: translateX(0); }

@media (max-width: 820px) {
    .app-nav-links,
    .app-navbar,
    .app-announce,
    .app-nav-signout { display: none; }
    .app-burger { display: inline-flex; }
    .app-nav-scrim { display: block; }
    .app-content { padding: var(--theme-spacing-lg) var(--theme-spacing-md) var(--theme-spacing-2xl); }

    /* Mobile-first: the desktop min-width on inputs/selects (see PAGE CONTENT below)
       forces controls wider than narrow viewports — e.g. two selects in a 2-up grid
       exceed a phone's width, giving the whole page a horizontal scroll. Let form
       controls shrink with their containers on small screens. */
    .app-content input[type="text"],
    .app-content input[type="search"],
    .app-content input:not([type]),
    .app-content select,
    .app-content textarea { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE CONTENT — style bare HTML in place (scoped to .app-content so the
   auth pages on EmptyLayout are untouched). Every value is a theme token.
   ═══════════════════════════════════════════════════════════════════════ */
.app-content h2 {
    font-size: var(--theme-font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 var(--theme-spacing-lg);
}

.app-content h3 {
    font-size: var(--theme-font-size-xl);
    font-weight: 650;
    margin: var(--theme-spacing-xl) 0 var(--theme-spacing-sm);
}

.app-content > p,
.app-content section > p {
    color: var(--theme-text-secondary);
    line-height: 1.6;
}

/* Cards / sections */
.app-content section {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-card-shadow);
    padding: var(--theme-spacing-lg);
    margin: 0 0 var(--theme-spacing-lg);
}

.app-content section h3 { margin-top: 0; }

/* Tables */
.app-content table {
    width: 100%;
    border-collapse: collapse;
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-card-shadow);
    margin: var(--theme-spacing-md) 0 var(--theme-spacing-lg);
    font-size: var(--theme-font-size-sm);
}

.app-content thead th {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--theme-font-size-xs);
    font-weight: 700;
    color: var(--theme-text-muted);
    background: var(--theme-bg-secondary);
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--theme-card-border);
    white-space: nowrap;
}

.app-content tbody td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--theme-border-color);
    color: var(--theme-text-secondary);
    vertical-align: top;
}

.app-content tbody tr:last-child td { border-bottom: none; }
.app-content tbody tr:hover td { background: var(--theme-bg-accent); }
.app-content td a { font-weight: 550; }

/* Definition lists (Settings) → clean key/value grid */
.app-content dl {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 0.4rem var(--theme-spacing-lg);
    margin: 0;
}

.app-content dt { color: var(--theme-text-muted); font-weight: 600; font-size: var(--theme-font-size-sm); }
.app-content dd { margin: 0; color: var(--theme-text-primary); }

/* Forms — light flow row (never boxed, so in-cell action forms stay compact) */
.app-content form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--theme-spacing-sm) var(--theme-spacing-md);
    margin: 0 0 var(--theme-spacing-lg);
}

.app-content section form { margin-bottom: 0; }
.app-content td form { margin: 0; gap: var(--theme-spacing-xs); }

.app-content label {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: var(--theme-font-size-sm);
    font-weight: 550;
    color: var(--theme-text-secondary);
}

.app-content input[type="text"],
.app-content input[type="search"],
.app-content input:not([type]),
.app-content select,
.app-content textarea {
    font: inherit;
    color: var(--theme-text-primary);
    background: var(--theme-bg-primary);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius-sm);
    padding: 0.5rem 0.7rem;
    min-width: 180px;
}

.app-content input:focus,
.app-content select:focus,
.app-content textarea:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 18%, transparent);
}

/* Buttons — bare <button>/submits become themed buttons */
.app-content button,
.app-content input[type="submit"] {
    font: inherit;
    font-weight: 600;
    font-size: var(--theme-font-size-sm);
    color: var(--theme-btn-primary-text);
    background: var(--theme-btn-primary-bg);
    border: 1px solid var(--theme-btn-primary-bg);
    border-radius: var(--theme-border-radius-sm);
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.app-content button:hover,
.app-content input[type="submit"]:hover {
    background: var(--theme-btn-primary-hover);
    border-color: var(--theme-btn-primary-hover);
}

/* Code / monospace blocks (issued keys, audit fingerprints, message parts) */
.app-content pre {
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius-sm);
    padding: var(--theme-spacing-md);
    overflow-x: auto;
    font-size: var(--theme-font-size-sm);
    color: var(--theme-text-primary);
}

.app-content code {
    background: var(--theme-bg-accent);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.9em;
    color: var(--theme-primary-dark);
}

.app-content pre code { background: none; padding: 0; color: inherit; }

/* Expandable details (thinking / tool_use / tool_result) */
.app-content details {
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius-sm);
    padding: 0.5rem 0.75rem;
    margin: 0.4rem 0;
    background: var(--theme-bg-secondary);
}

.app-content summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--theme-font-size-sm);
    color: var(--theme-text-secondary);
}

/* Conversation message cards */
.app-content article[data-testid="message-item"] {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-card-shadow);
    padding: var(--theme-spacing-md) var(--theme-spacing-lg);
    margin: 0 0 var(--theme-spacing-md);
}

.app-content article[data-testid="message-item"] > header {
    color: var(--theme-primary-dark);
    font-size: var(--theme-font-size-sm);
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--theme-border-color);
}

/* Dashboard headline stats — CSS-only upgrade of the existing <ul>/<li> */
.app-content ul[data-testid="dashboard-stats"] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--theme-spacing-lg);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--theme-spacing-md);
}

.app-content ul[data-testid="dashboard-stats"] > li {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-card-border);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-card-shadow);
    padding: var(--theme-spacing-lg);
    color: var(--theme-text-secondary);
    font-size: var(--theme-font-size-sm);
}

.app-content ul[data-testid="dashboard-stats"] > li strong {
    display: block;
    margin-top: 0.35rem;
    font-size: var(--theme-font-size-2xl);
    font-weight: 700;
    color: var(--theme-text-primary);
    letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONVERSATIONS — view toggle, agentic tree, pager
   ═══════════════════════════════════════════════════════════════════════ */
.app-content .muted,
.app-content .tree-meta.muted { color: var(--theme-text-muted); }

.app-content .badge {
    display: inline-block;
    font-size: var(--theme-font-size-xs);
    font-weight: 600;
    color: var(--theme-primary-dark);
    background: var(--theme-bg-accent);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* Page header: title left, platform scope top-right */
.app-content .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--theme-spacing-md);
}
.app-content .page-header h2 { margin-bottom: 0; }

.app-content .platform-scope {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-color);
    border-radius: 999px;
}

.app-content .platform-scope a {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: var(--theme-font-size-sm);
    font-weight: 550;
    color: var(--theme-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.app-content .platform-scope a:hover { color: var(--theme-text-primary); }

.app-content .platform-scope a,
.app-content .filter-toggle {
    /* Win over the theme's broad `a:not(.btn)…` link-color rule (higher specificity). */
    color: var(--theme-text-secondary) !important;
}

.app-content .platform-scope a.active {
    background: var(--theme-primary);
    color: var(--theme-text-inverse) !important;
    box-shadow: var(--theme-shadow-sm);
}

.app-content .list-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--theme-spacing-md);
    margin-bottom: var(--theme-spacing-lg);
}

.app-content .view-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--theme-bg-secondary);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
}

.app-content .filter-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--theme-border-color);
    border-radius: 999px;
    font-size: var(--theme-font-size-sm);
    font-weight: 550;
    color: var(--theme-text-secondary);
    background: var(--theme-card-bg);
    text-decoration: none;
    white-space: nowrap;
}

.app-content .filter-toggle:hover { border-color: var(--theme-primary); color: var(--theme-text-primary); }

.app-content .filter-toggle.active {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-text-inverse) !important;
}

.app-content .view-toggle a {
    padding: 0.4rem 0.9rem;
    border-radius: var(--theme-border-radius-sm);
    font-size: var(--theme-font-size-sm);
    font-weight: 550;
    color: var(--theme-text-secondary);
    text-decoration: none;
}

.app-content .view-toggle a:hover { color: var(--theme-text-primary); }

.app-content .view-toggle a.active {
    background: var(--theme-card-bg);
    color: var(--theme-primary);
    box-shadow: var(--theme-shadow-sm);
}

/* Agentic tree */
.app-content .tree-list { list-style: none; margin: 0; padding: 0; }

.app-content .tree-list > li {
    border-top: 1px solid var(--theme-border-color);
    padding: 0.55rem 0;
}
.app-content .tree-list > li:first-child { border-top: none; }

.app-content .tree-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem var(--theme-spacing-md);
}

.app-content .tree-file { font-weight: 600; }
.app-content .tree-meta { font-size: var(--theme-font-size-sm); color: var(--theme-text-secondary); }

.app-content .tree-expander {
    font-size: var(--theme-font-size-sm);
    font-weight: 600;
    color: var(--theme-primary);
    text-decoration: none;
    white-space: nowrap;
}
.app-content .tree-expander .caret { font-size: 0.7em; }

.app-content .tree-children {
    margin: 0.5rem 0 0.25rem var(--theme-spacing-lg);
    padding-left: var(--theme-spacing-md);
    border-left: 2px solid var(--theme-border-color);
}
.app-content .tree-children table { margin-top: 0.4rem; box-shadow: none; }

/* Pager */
.app-content .pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: var(--theme-spacing-lg);
}

.app-content .pager a,
.app-content .pager .disabled {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius-sm);
    font-size: var(--theme-font-size-sm);
    font-weight: 550;
    text-decoration: none;
}

.app-content .pager a { color: var(--theme-primary); background: var(--theme-card-bg); }
.app-content .pager a:hover { border-color: var(--theme-primary); background: var(--theme-bg-accent); }
.app-content .pager .disabled { color: var(--theme-text-muted); opacity: 0.6; }
.app-content .pager-status { font-size: var(--theme-font-size-sm); color: var(--theme-text-secondary); margin: 0 0.3rem; }
.app-content .pager-num.active {
    padding: 0.45rem 0.8rem; border: 1px solid var(--theme-primary); border-radius: var(--theme-border-radius-sm);
    font-size: var(--theme-font-size-sm); font-weight: 700; background: var(--theme-primary); color: var(--theme-text-inverse);
}
.app-content .pager-gap { color: var(--theme-text-muted); padding: 0 0.15rem; user-select: none; }

/* ── project aggregates + per-conversation metadata ── */
.app-content .tree-agg { font-size: var(--theme-font-size-sm); color: var(--theme-text-muted); font-weight: 400; }
.app-content .tree-view { margin-left: auto; font-size: var(--theme-font-size-sm); font-weight: 600; white-space: nowrap; }
.app-content .tree-submeta {
    font-size: var(--theme-font-size-xs);
    color: var(--theme-text-secondary);
    margin: 2px 0 0 0;
}
.app-content .tree-submeta .muted { color: var(--theme-text-muted); }
.app-content .tree-fname,
.app-content .list-fname {
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
    font-size: var(--theme-font-size-xs);
    color: var(--theme-text-muted);
    word-break: break-all;
}
.app-content .list-fname { margin-top: 2px; }

/* ── subagent type breakdown ── */
.app-content .type-breakdown { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.2rem 0 0.6rem; }
.app-content .type-chip {
    font-size: var(--theme-font-size-xs);
    background: var(--theme-bg-accent);
    color: var(--theme-primary-dark);
    border-radius: 999px;
    padding: 0.12rem 0.6rem;
}
.app-content .type-chip b { font-weight: 700; }

/* ── subagent invocation (expandable) ── */
.app-content .subagent-item {
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius-sm);
    background: var(--theme-card-bg);
    margin: 0.35rem 0;
    padding: 0;
}
.app-content .subagent-item > summary {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    list-style: none;
    border-radius: var(--theme-border-radius-sm);
}
.app-content .subagent-item > summary::-webkit-details-marker { display: none; }
.app-content .subagent-item > summary:hover { background: var(--theme-bg-accent); }

/* Rotating disclosure caret (replaces the hidden native marker) */
.app-content .subagent-item > summary::before {
    content: "▶";
    display: inline-block;
    flex: none;
    font-size: 0.65em;
    color: var(--theme-text-muted);
    transition: transform var(--theme-transition-fast);
    align-self: center;
}
.app-content .subagent-item[open] > summary::before { transform: rotate(90deg); }
.app-content .subagent-item[open] > summary { background: var(--theme-bg-accent); }
.app-content .sa-idx { font-variant-numeric: tabular-nums; color: var(--theme-text-muted); font-size: var(--theme-font-size-xs); }
.app-content .sa-type {
    font-weight: 650; font-size: var(--theme-font-size-sm); color: var(--theme-primary-dark);
    background: var(--theme-bg-accent); border-radius: 5px; padding: 0.05rem 0.45rem;
}
.app-content .sa-desc { flex: 1; color: var(--theme-text-primary); font-size: var(--theme-font-size-sm); }
.app-content .sa-when { font-size: var(--theme-font-size-xs); }
.app-content .sa-body { padding: 0 0.75rem 0.75rem; border-top: 1px solid var(--theme-border-2, var(--theme-border-color)); }
.app-content .sa-jump { display: inline-block; margin: 0.5rem 0; font-size: var(--theme-font-size-sm); font-weight: 600; }
.app-content .sa-label {
    text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; font-weight: 700;
    color: var(--theme-text-muted); margin: 0.5rem 0 0.2rem;
}
.app-content .sa-pre {
    max-height: 260px; overflow: auto; margin: 0;
    white-space: pre-wrap; word-break: break-word;
    font-size: var(--theme-font-size-xs);
}

/* ── machine picker dialog ── */
.picker-dialog {
    border: none;
    border-radius: var(--theme-border-radius-lg, 12px);
    padding: 0;
    width: min(460px, 92vw);
    box-shadow: var(--theme-shadow-xl);
    color: var(--theme-text-primary);
    background: var(--theme-card-bg);
}
.picker-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.picker-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 1rem; border-bottom: 1px solid var(--theme-border-color);
}
.picker-close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--theme-text-muted); }
.picker-search {
    width: calc(100% - 2rem); margin: 0.8rem 1rem 0; padding: 0.55rem 0.7rem;
    border: 1px solid var(--theme-border-color); border-radius: var(--theme-border-radius-sm);
    font: inherit; color: var(--theme-text-primary); background: var(--theme-bg-secondary);
}
.picker-search:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 18%, transparent); }
.picker-list { max-height: 50vh; overflow-y: auto; padding: 0.5rem; }
.picker-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.6rem; border-radius: var(--theme-border-radius-sm);
    color: var(--theme-text-primary); text-decoration: none; font-size: var(--theme-font-size-sm);
}
.picker-item:hover { background: var(--theme-bg-accent); color: var(--theme-text-primary); }
.picker-item.active { background: var(--theme-bg-accent); color: var(--theme-primary-dark); font-weight: 650; }
.picker-item .picker-name { flex: 1; }
.picker-item .picker-plat {
    text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; font-weight: 700;
    color: var(--theme-text-muted); border: 1px solid var(--theme-border-color); border-radius: 4px; padding: 0 0.35rem;
}
.picker-item .picker-count { font-variant-numeric: tabular-nums; color: var(--theme-text-muted); font-size: var(--theme-font-size-xs); }
.picker-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.picker-item .dot.on { background: var(--theme-success, #10b981); }
.picker-item .dot.off { background: var(--theme-danger, #ef4444); }

/* ── conversation detail header ── */
.app-content .detail-head { margin-bottom: var(--theme-spacing-lg); }
.app-content .detail-back {
    display: inline-block; font-size: var(--theme-font-size-sm); font-weight: 600;
    margin-bottom: 0.4rem;
}
.app-content .detail-head h2 { margin: 0 0 0.25rem; }
.app-content .detail-fname {
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
    font-size: var(--theme-font-size-xs); color: var(--theme-text-muted); word-break: break-all;
    margin-bottom: 0.5rem;
}
.app-content .detail-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.app-content .detail-stat { font-size: var(--theme-font-size-sm); color: var(--theme-text-secondary); }
.app-content .detail-stat .muted { color: var(--theme-text-muted); }
.app-content .badge.badge-warn { background: var(--theme-warning, #f59e0b); color: #1f2937; }

.app-content .detail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--theme-spacing-md); }
.app-content .btn-export {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font: inherit; font-size: var(--theme-font-size-sm); font-weight: 600;
    color: var(--theme-primary) !important; background: var(--theme-card-bg);
    border: 1px solid var(--theme-border-color); border-radius: var(--theme-border-radius-sm);
    padding: 0.4rem 0.8rem; cursor: pointer; text-decoration: none;
}
.app-content .btn-export:hover { border-color: var(--theme-primary); background: var(--theme-bg-accent); }
.app-content .msg-fullnav { margin-top: var(--theme-spacing-md); }

/* ── print: strip chrome, expand everything, plain black-on-white ── */
@media print {
    .topnav, .nav-sheet, .nav-sheet-backdrop,
    .app-content .detail-actions, .app-content .detail-back,
    .app-content .msg-toolbar, .app-content .pager, .app-content .msg-fullnav { display: none !important; }
    .app-content { max-width: none; padding: 0; }
    .app-content .msg-item { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
    .app-content .part-thinking[open] > *, .app-content .part-tool[open] > * { display: revert; }
    details > summary { list-style: none; }
    a[href]::after { content: ""; } /* don't append URLs */
}

/* ── conversation message list: toolbar + filters ── */
.app-content .msg-toolbar {
    position: sticky; top: 0; z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--theme-spacing-md);
    padding: 0.6rem 0.9rem; margin-bottom: var(--theme-spacing-md);
    background: var(--theme-card-bg); border: 1px solid var(--theme-card-border);
    border-radius: var(--theme-border-radius); box-shadow: var(--theme-shadow-sm);
}
.app-content .msg-count { font-size: var(--theme-font-size-sm); color: var(--theme-text-secondary); }
.app-content .msg-filters { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
.app-content .msg-filters label {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: var(--theme-font-size-sm); font-weight: 550; color: var(--theme-text-secondary); cursor: pointer;
}

/* ── message items: role coloring ── */
.app-content .msg-item {
    background: var(--theme-card-bg); border: 1px solid var(--theme-card-border);
    border-left: 3px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius); padding: 0.75rem 1rem;
    margin: 0 0 var(--theme-spacing-md); box-shadow: var(--theme-card-shadow);
}
.app-content .msg-item.msg-user { border-left-color: var(--theme-primary); }
.app-content .msg-item.msg-assistant { border-left-color: var(--theme-success, #10b981); }
/* Tool-result-only "user" turns are machine output — muted, not user-tinted. */
.app-content .msg-item.msg-toolresult { border-left-color: var(--theme-border, #cbd5e1); opacity: .92; }
.app-content .msg-item.msg-toolresult .msg-role { color: var(--theme-text-muted, #64748b); }
.app-content .msg-item.msg-summary {
    border-left-color: var(--theme-warning, #f59e0b);
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 8%, var(--theme-card-bg));
}
.app-content .msg-item.msg-summary .msg-role { color: var(--theme-warning-dark, #b5730c); }
.app-content .msg-item.msg-summary .msg-role::after { content: " (AI-generated context summary)"; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--theme-text-muted); }
.app-content .msg-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; }
.app-content .msg-role {
    font-size: var(--theme-font-size-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--theme-text-secondary);
}
.app-content .msg-item.msg-user .msg-role { color: var(--theme-primary-dark); }
.app-content .msg-item.msg-assistant .msg-role { color: var(--theme-success-dark, #059669); }
.app-content .msg-idx { font-size: var(--theme-font-size-xs); color: var(--theme-text-muted); font-variant-numeric: tabular-nums; }
.app-content .msg-time { font-size: var(--theme-font-size-xs); }

/* ── message parts ── */
.app-content .part-text { white-space: pre-wrap; word-break: break-word; margin: 0.25rem 0; }
.app-content .part-thinking, .app-content .part-tool {
    margin: 0.35rem 0; border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius-sm); background: var(--theme-bg-secondary);
    padding: 0.4rem 0.7rem;
}
.app-content .part-thinking > summary, .app-content .part-tool > summary {
    cursor: pointer; font-weight: 600; font-size: var(--theme-font-size-sm); color: var(--theme-text-secondary);
}
.app-content .part-tool-error { border-color: var(--theme-danger, #ef4444); }
.app-content .part-thinking pre, .app-content .part-tool pre {
    white-space: pre-wrap; word-break: break-word; margin: 0.4rem 0 0;
    font-size: var(--theme-font-size-xs); max-height: 320px; overflow: auto;
}

.app-content article.msg-target {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

/* v5 taxonomy: command / meta-system message roles + placeholder chips */
.app-content .msg-item.msg-command { border-left-color: #4338CA; background: #EEF2FF; }
.app-content .msg-item.msg-command .msg-role { color: #4338CA; }
.app-content .msg-item.msg-command .part-text { font-family: var(--theme-font-mono, ui-monospace, Consolas, monospace); font-size: 0.85em; white-space: pre-wrap; }
.app-content .msg-item.msg-meta,
.app-content .msg-item.msg-system,
.app-content .msg-item.msg-notification { border-left-color: var(--theme-text-muted); opacity: .92; }
.app-content .msg-item.msg-meta .msg-role,
.app-content .msg-item.msg-system .msg-role,
.app-content .msg-item.msg-notification .msg-role { color: var(--theme-text-muted); }
/* v6: background-task completion notice injected into the user turn — nobody typed it. */
.app-content .msg-item.msg-notification .msg-role::after { content: " (background task)"; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--theme-text-muted); }
.app-content .part-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
    padding: 3px 12px; font-size: var(--theme-font-size-sm); margin: 2px 0;
    border: 1px dashed var(--theme-border-color); color: var(--theme-text-secondary);
    background: var(--theme-bg-secondary); }
.app-content .part-chip-redacted { border-color: #C7D2FE; color: #4338CA; background: #EEF2FF; }
.app-content .part-sysevent { font-size: var(--theme-font-size-sm); color: var(--theme-text-secondary); }
.app-content .part-sysevent-badge { display: inline-block; border-radius: 999px; padding: 1px 9px;
    font-size: var(--theme-font-size-xs); font-weight: 700; background: #FEF3C7; color: #92400E; margin-right: 4px; }

/* Structured hover for the encrypted-thinking chip — explains provenance
   (sealed by the AI client + model provider, not AiLucent). */
.app-content .part-chip-redacted { position: relative; cursor: help; }
.app-content .part-chip-redacted .part-tip {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 60;
    width: 330px; max-width: 80vw; white-space: normal; text-align: left;
    background: #0C1222; color: #C9D6EC; border: 1px solid #2A3550; border-radius: 8px;
    padding: 10px 12px; font-size: var(--theme-font-size-sm); line-height: 1.5;
    box-shadow: 0 8px 24px rgba(12, 18, 34, 0.35);
}
.app-content .part-chip-redacted:hover .part-tip,
.app-content .part-chip-redacted:focus .part-tip,
.app-content .part-chip-redacted:focus-within .part-tip { display: block; }
.app-content .part-tip-head { font-weight: 700; color: #8FE0FF; margin-bottom: 6px; }
.app-content .part-tip-line { margin: 4px 0; }
.app-content .part-tip-line::before { content: "\2022\00a0"; color: var(--theme-text-muted); }