/* IOFlex Agent Orchestration — app shell + page styles.
   Built on the Provenance --pv-* token layer (Provenance.Blazor bundle);
   canonical reference: davidson/provenance/design-principles. The bundle
   already themes MudBlazor components (app bar, nav links, inputs, tables,
   chips, tabs); this file only adds shell hairlines and app-specific
   compositions that the shared library does not ship.
   Tokens (--pv-*) come from _content/Provenance.Blazor/css/ProvenanceBlazor.css,
   linked in App.razor ahead of this stylesheet, and flip light/dark via the
   [data-theme] attribute that App.razor's inline script and
   MainLayout.ApplyThemeAsync keep in sync. */

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--pv-page, #0d1020);
    color: var(--pv-text-primary, #f5f6fa);
    font-family: var(--pv-font-body, "Geist", "Helvetica Neue", Arial, sans-serif);
}

/* ── Shell chrome: flat structure, hairline rules, no shadows ─────────── */

.mud-appbar {
    border-bottom: 1px solid var(--pv-border-subtle);
    background-color: var(--pv-surface-translucent) !important;
    backdrop-filter: blur(8px);
}

.mud-drawer {
    border-right: 1px solid var(--pv-border-subtle);
    box-shadow: none !important;
}

.mud-nav-link {
    color: var(--pv-text-secondary) !important;
}

.mud-nav-link.active {
    color: var(--pv-primary) !important;
    background-color: var(--pv-selected) !important;
}

.mud-input-root {
    color: var(--pv-text-primary) !important;
}

.mud-input-label {
    color: var(--pv-text-secondary) !important;
}

.mud-table-row:hover {
    background-color: var(--pv-hover) !important;
}

.pv-appbar-brand {
    font-family: var(--pv-font-heading);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--pv-text-primary);
}

.pv-appbar-user {
    color: var(--pv-text-secondary);
}

.pv-appbar-version {
    font-family: var(--pv-font-mono);
    color: var(--pv-text-tertiary);
}

/* FocusOnNavigate (Routes.razor) moves focus to the page h1 after routing
   so screen readers announce the new page. The h1 is not interactive, so the
   visible focus ring is noise for everyone; suppress it unconditionally
   (matches the stock Blazor template's h1:focus rule). */
h1:focus {
    outline: none;
}

/* Keyboard users get a way past the drawer straight into the page. */
.pv-skip-link {
    position: absolute;
    left: -9999px;
    top: 12px;
    z-index: var(--pv-z-toast);
    padding: 8px 16px;
    background-color: var(--pv-surface-1);
    color: var(--pv-text-primary);
    border: 1px solid var(--pv-border-default);
    border-radius: var(--pv-radius-md);
    text-decoration: none;
}

.pv-skip-link:focus {
    left: 16px;
}

.main-content {
    min-height: calc(100vh - var(--mud-appbar-height, 64px));
    /* Own all gutters here (the pa-6 utility was removed from MudMainContent's
       Class to avoid its padding: !important, which forced an !important override
       and was fragile to stylesheet load order). The top gutter clears the fixed
       AppBar (its height + 24px) so page headers are never obscured; the other
       three sides keep the former pa-6 24px inset. This rule is authored after
       MudBlazor's stylesheet, so it wins over the built-in padding-top without
       !important. */
    padding: calc(var(--mud-appbar-height, 64px) + 24px) 24px 24px;
}

/* ── Assistant page: instrument panel ─────────────────────────────────── */

.pv-agent-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pv-space-4);
    flex-wrap: wrap;
    padding-bottom: var(--pv-space-4);
    margin-bottom: var(--pv-space-6);
    border-bottom: 1px solid var(--pv-border-subtle);
}

.pv-agent-strip__identity {
    display: flex;
    align-items: center;
    gap: var(--pv-space-5);
    min-width: 0;
}

.pv-agent-strip__name {
    font-family: var(--pv-font-mono);
    font-weight: 800;
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-agent-strip__repo {
    font-family: var(--pv-font-mono);
    font-size: var(--pv-font-size-small);
    color: var(--pv-text-secondary);
}

/* The terminal is the primary readout: full width, flat, hairline-ruled. */
.pv-agent-terminal {
    display: flex;
    height: min(64vh, 640px);
    overflow: hidden;
    background-color: var(--pv-surface-0);
    border: 1px solid var(--pv-border-subtle);
    border-radius: var(--pv-radius-lg);
}

.pv-agent-terminal iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: var(--pv-neutral-1000);
}

.pv-agent-terminal__placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flush list rows: hairline-separated, affordances revealed on hover. */
.pv-row-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pv-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--pv-space-4);
    padding: var(--pv-space-3) var(--pv-space-2) var(--pv-space-3) var(--pv-space-6);
    border-bottom: 1px solid var(--pv-border-subtle);
    transition: background-color var(--pv-duration-fast) var(--pv-ease-subtle);
}

.pv-row--interactive {
    cursor: pointer;
}

.pv-row:hover {
    background-color: var(--pv-hover);
}

.pv-row__chevron {
    position: absolute;
    left: 0;
    display: flex;
    color: var(--pv-info-base);
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity var(--pv-duration-fast) var(--pv-ease-subtle),
        transform var(--pv-duration-fast) var(--pv-ease-subtle);
}

.pv-row:hover .pv-row__chevron,
.pv-row:focus-within .pv-row__chevron {
    opacity: 1;
    transform: translateX(0);
}

.pv-row__mono {
    font-family: var(--pv-font-mono);
    font-size: var(--pv-font-size-small);
    font-variant-numeric: tabular-nums;
    color: var(--pv-text-primary);
    white-space: nowrap;
}

.pv-row__mono--secondary {
    color: var(--pv-text-secondary);
}

.pv-row__spacer {
    margin-left: auto;
}

.pv-row-list__empty {
    margin: 0;
    padding: var(--pv-space-4) 0;
    color: var(--pv-text-tertiary);
    font-size: var(--pv-font-size-body);
}

/* Monospace count pill next to section titles (warms on row hover). */
.pv-count-pill {
    font-family: var(--pv-font-mono);
    font-size: var(--pv-font-size-caption);
    font-variant-numeric: tabular-nums;
    color: var(--pv-text-secondary);
    background-color: var(--pv-surface-1);
    border-radius: var(--pv-radius-full);
    padding: 2px 8px;
}

/* Definition rows for the Advanced tab's agent details. */
.pv-detail-list {
    display: flex;
    flex-direction: column;
}

.pv-detail-row {
    display: flex;
    align-items: baseline;
    gap: var(--pv-space-4);
    padding: var(--pv-space-2) 0;
    border-bottom: 1px solid var(--pv-border-subtle);
}

.pv-detail-row dt {
    flex: 0 0 120px;
    margin: 0;
    font-size: var(--pv-font-size-small);
    color: var(--pv-text-secondary);
}

.pv-detail-row dd {
    margin: 0;
    min-width: 0;
    font-family: var(--pv-font-mono);
    font-size: var(--pv-font-size-small);
    color: var(--pv-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Assistant chat thread ─────────────────────────────────────────────── */

.pv-chat {
    display: flex;
    flex-direction: column;
    gap: var(--pv-space-2);
    min-height: 320px;
    max-height: 480px;
    overflow-y: auto;
    padding: var(--pv-space-4);
    background-color: var(--pv-surface-0);
    border: 1px solid var(--pv-border-subtle);
    border-radius: var(--pv-radius-lg);
}

.pv-chat__bubble {
    max-width: 70%;
    padding: var(--pv-space-2) var(--pv-space-3);
    border-radius: var(--pv-radius-lg);
    color: var(--pv-text-primary);
    overflow-wrap: break-word;
}

.pv-chat__bubble--user {
    align-self: flex-end;
    background-color: color-mix(in srgb, var(--pv-info-base) 18%, transparent);
}

.pv-chat__bubble--da {
    align-self: flex-start;
    background-color: var(--pv-surface-1);
}

/* ── Scrollbars on code/terminal surfaces ─────────────────────────────── */

pre {
    scrollbar-width: thin;
    scrollbar-color: var(--pv-border-default) var(--pv-page);
}

pre::-webkit-scrollbar {
    width: 8px;
}

pre::-webkit-scrollbar-track {
    background: var(--pv-page);
}

pre::-webkit-scrollbar-thumb {
    background: var(--pv-border-default);
    border-radius: 4px;
}

/* ── Reduced motion: state changes become instant, nothing disappears ── */

@media (prefers-reduced-motion: reduce) {
    .pv-row,
    .pv-row__chevron {
        transition: none;
    }

    .pv-row__chevron {
        transform: none;
    }
}