/* Corkboard web UI. MudBlazor does the look: the app bar, forms, tables, chips, alerts, dialogs and buttons use CorkboardTheme's light and dark palettes. This file is only what
   MudBlazor has no component for (the board layout, phase bars, run log, chat bubbles, plan page grids) and the shape of cards and buttons; screens take every colour from MudBlazor
   variables so both palettes follow. The --dp-* tokens are the design's values: the plain sign-in page (no MudBlazor) uses them directly. */

/* Host Grotesk (headings) and Instrument Sans (text), SIL Open Font License (fonts/OFL-*.txt), served from this host: the content security policy allows no other font source. */
@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/host-grotesk-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Host Grotesk"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/host-grotesk-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/instrument-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/instrument-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --da-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
    --dp-font-display: "Host Grotesk", "Instrument Sans", sans-serif;
    --dp-font-body: "Instrument Sans", sans-serif;
    --dp-color-ground: #fcfcfd; --dp-color-ground-muted: #f3f4f6; --dp-color-panel: #ffffff; --dp-color-rule: #dde0e6;
    --dp-color-ink: #16191f; --dp-color-ink-secondary: #454c58; --dp-color-accent: #074ce0; --dp-color-on-accent: #ffffff;
    --dp-color-field: #16191f; --dp-color-on-field: #fcfcfd; --dp-color-on-field-secondary: #d0d4dd;
    --dp-radius-panel: 12px; --dp-border-hairline: 1px;
    --dp-shadow-card: 0 1px 2px rgba(22, 25, 31, .04), 0 4px 12px -4px rgba(22, 25, 31, .08);
    --dp-shadow-lift: 0 2px 4px rgba(22, 25, 31, .06), 0 10px 20px -8px rgba(22, 25, 31, .16);
    --dp-motion-interaction: 160ms; --dp-motion-easing: ease-out;
}

/* Blazor focuses the page h1 after navigation (FocusOnNavigate); the focus is for screen readers, so no ring on it. */
h1[tabindex="-1"]:focus { outline: none; }

/* ------------------------------------------------------------------ cards and buttons */
.mud-paper-outlined, .mud-card { border-radius: var(--dp-radius-panel); box-shadow: var(--dp-shadow-card); }
.mud-dialog { border-radius: var(--dp-radius-panel); }
.mud-tab { text-transform: none; font-weight: 600; }
.da-panel-title { font-family: var(--dp-font-display); }
.mud-button-root.mud-button { transition: transform var(--dp-motion-interaction) var(--dp-motion-easing), box-shadow var(--dp-motion-interaction) var(--dp-motion-easing), background-color var(--dp-motion-interaction) var(--dp-motion-easing); }
.mud-button-filled:hover { transform: translateY(-1px); box-shadow: var(--dp-shadow-lift); }
.mud-button-outlined:hover { transform: translateY(-1px); }
.mud-button-root.mud-button:active { transform: none; }
/* MudBlazor shows keyboard focus only as a faint fill; a ring in the accent colour makes it visible on every surface. */
.mud-button-root:focus-visible, .mud-nav-link:focus-visible, .mud-tab:focus-visible, a:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .mud-button-root.mud-button, .da-btn { transition: none; }
    .mud-button-root.mud-button:hover, .da-btn:hover { transform: none; }
}

.da-mono { font-family: var(--da-mono); font-size: 12px; }
.da-spacer { margin-left: auto; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; }
.da-buttons { margin: 8px 0; flex-wrap: wrap; }
.da-panel { margin-bottom: 12px; }
.da-field-label { display: block; font-size: 12.5px; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }
.da-tabs { margin-top: 8px; }
/* A details page's tab row is a flat strip with a rule under it, not a card (the outlined-paper rule above would round it), so each tab's own cards sit below it as its content. */
.da-tabs > .mud-tabs-tabbar { border: none; border-bottom: 1px solid var(--mud-palette-lines-default); border-radius: 0; box-shadow: none; background: transparent; }
.da-tabs > .mud-tabs-panels { padding-top: 16px; }

/* ------------------------------------------------------------------ shell: top bar and side drawer (ADR 0052) */
.da-brand { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; margin-left: 4px; font-weight: 600; font-size: 17px; }
.da-brand img { display: block; }
.da-solution { max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-who { display: inline-flex; padding: 6px; color: inherit; text-decoration: none; border-radius: 50%; }
.da-who:focus-visible { outline: 2px solid currentColor; }
.da-who .mud-avatar { font-size: 12px; font-weight: 600; color: inherit; border-color: currentColor; }
.da-nav-section { padding: 12px 16px 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
@media (max-width: 599.98px) { .da-brand-name { display: none; } .da-solution { max-width: 28vw; } }

/* The sign-in page is plain server-rendered HTML (a form that sets the cookie): no MudBlazor on it. */
body:has(.da-signin-page) { margin: 0; background: var(--dp-color-ground); color: var(--dp-color-ink); font-family: var(--dp-font-body); font-size: 16px; line-height: 1.6; }
.da-signin-page { max-width: 480px; margin: 0 auto; padding: 48px 16px; }
.da-signin-page h1 { font-family: var(--dp-font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.da-signin-page .da-sub { color: var(--dp-color-ink-secondary); }
.da-signin-form + .da-signin-form { margin-top: 8px; }
.da-btn { display: inline-block; font: 600 15px/1.4 var(--dp-font-body); padding: 10px 18px; border: var(--dp-border-hairline) solid var(--dp-color-rule); border-radius: 6px; background: var(--dp-color-panel);
    color: var(--dp-color-ink); cursor: pointer; text-decoration: none; transition: transform var(--dp-motion-interaction) var(--dp-motion-easing), background-color var(--dp-motion-interaction) var(--dp-motion-easing); }
.da-btn:hover { transform: translateY(-1px); background: var(--dp-color-ground-muted); }
.da-btn:active { transform: none; }
.da-btn:focus-visible { outline: 2px solid var(--dp-color-accent); outline-offset: 2px; }
.da-btn-primary { background: var(--dp-color-accent); border-color: var(--dp-color-accent); color: var(--dp-color-on-accent); }
.da-btn-primary:hover { background: #063fbb; }

/* ------------------------------------------------------------------ toolbar and board */
.da-toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.da-filters { flex-wrap: wrap; align-items: flex-end; }
.da-hidden { color: var(--mud-palette-text-secondary); font-size: 13px; padding-bottom: 8px; }
.da-running { color: var(--mud-palette-success); font-weight: 600; font-size: 13px; padding-bottom: 8px; display: inline-flex; align-items: center; gap: 6px; }
.da-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mud-palette-success); display: inline-block; }

.da-board { display: grid; grid-template-columns: repeat(7, minmax(190px, 1fr)); gap: 10px; overflow-x: auto; align-items: start; }
.da-column { min-height: 120px; }
.da-board-4 { grid-template-columns: repeat(4, minmax(200px, 1fr)); }
.da-board-3 { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
.da-card-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.da-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.da-strip-person { padding: 8px 12px; min-width: 150px; }
.da-strip-person a { color: inherit; text-decoration: none; }
.da-strip-counts { display: flex; gap: 10px; font-size: 12.5px; color: var(--mud-palette-text-secondary); margin-top: 4px; }
.da-strip-blocked { color: var(--mud-palette-error); font-weight: 600; }
.da-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 12px; }
.da-agent-card { padding: 12px; }
.da-agent-card a { color: inherit; text-decoration: none; }
.da-agent-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.da-agent-name { font-weight: 700; font-size: 15px; }
/* The org chart (after Paperclip's): cards laid out as a tree by OrgTree, elbow lines under them, panned and zoomed by OrgChart.razor.js. */
.da-org-viewport { position: relative; height: min(70vh, 640px); min-height: 360px; overflow: hidden; border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dp-radius-panel); background: var(--mud-palette-background-gray); cursor: grab; touch-action: none; overscroll-behavior: contain; }
.da-org-dragging { cursor: grabbing; }
.da-org-dragging .da-org-layer { user-select: none; }
.da-org-controls { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.da-org-controls .mud-icon-button { background: var(--mud-palette-surface); }
.da-org-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.da-org-lines path { fill: none; stroke: var(--mud-palette-lines-inputs); stroke-width: 1.5; }
.da-org-layer { position: absolute; inset: 0; transform-origin: 0 0; }
.da-org-card { position: absolute; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: var(--dp-radius-panel); box-shadow: var(--dp-shadow-card); color: var(--mud-palette-text-primary);
    text-decoration: none; transition: border-color var(--dp-motion-interaction) var(--dp-motion-easing), box-shadow var(--dp-motion-interaction) var(--dp-motion-easing); }
a.da-org-card:hover { border-color: var(--mud-palette-primary); box-shadow: var(--dp-shadow-lift); }
.da-org-person { border-top: 3px solid var(--mud-palette-primary); }
.da-org-avatar { position: relative; flex-shrink: 0; }
.da-org-dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--mud-palette-surface); background: var(--mud-palette-gray-default); }
.da-org-dot-on { background: var(--mud-palette-success); }
.da-org-text { display: flex; flex-direction: column; min-width: 0; }
.da-org-text strong { font-family: var(--dp-font-display); font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-org-sub { font-size: 12.5px; line-height: 1.3; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .da-org-card { transition: none; } }
.da-mono-input textarea { font-family: var(--da-mono); font-size: 13px; }
/* An agent's instruction files (after Paperclip's): the file list on the left, the chosen file on the right; stacked on a narrow screen. */
.da-files { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 16px; align-items: start; }
.da-files > .da-panel { margin-bottom: 0; }
.da-files-list .mud-card-content { padding-top: 0; }
.da-files-list .mud-list-item { border-radius: 6px; padding: 6px 8px; }
.da-files-list .mud-list-item-icon { min-width: 28px; }
.da-file { display: flex; align-items: center; gap: 8px; min-width: 0; }
.da-file-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; }
.da-file-tag { flex-shrink: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px; color: var(--mud-palette-text-secondary); }
.da-file-title { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 959.98px) { .da-files { grid-template-columns: minmax(0, 1fr); } }
.da-mywork { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.da-column > header { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 4px 8px; }
.da-colcount { color: var(--mud-palette-text-secondary); font-weight: 600; }
.da-card { margin-bottom: 8px; }
.da-card:hover { border-color: var(--mud-palette-info); }
.da-card > a { display: block; padding: 8px 10px; color: inherit; text-decoration: none; }
.da-card-blocked { border-left: 3px solid var(--mud-palette-error); }
.da-card-key { font-family: var(--da-mono); font-size: 11px; color: var(--mud-palette-text-secondary); }
.da-card-title { font-weight: 600; font-size: 13.5px; margin: 2px 0 6px; }
.da-card-people { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.da-card-foot { font-size: 11.5px; color: var(--mud-palette-text-secondary); margin-left: 3px; }

.da-phasebar { display: flex; gap: 3px; }
.da-seg { flex: 1; height: 5px; border-radius: 3px; background: var(--mud-palette-lines-default); }
.seg-complete { background: var(--mud-palette-success); }
.seg-progress { background: var(--mud-palette-warning); }
.seg-qa { background: var(--mud-palette-info); }
.seg-blocked { background: var(--mud-palette-error); }
.seg-cancelled { background: var(--mud-palette-gray-default); }

/* ------------------------------------------------------------------ plan page */
.da-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.da-sub { color: var(--mud-palette-text-secondary); font-size: 13px; margin: 2px 0 10px; }
.da-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 992px) { .da-layout { grid-template-columns: 1fr; } .da-board { grid-template-columns: repeat(7, 220px); } .da-board-4 { grid-template-columns: repeat(4, 220px); } .da-board-3 { grid-template-columns: repeat(3, 220px); } .da-mywork { grid-template-columns: 1fr; } }

.da-phase { border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; margin-bottom: 8px; background: var(--mud-palette-surface); }
.da-phase > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.da-phase > summary::-webkit-details-marker { display: none; }
.da-phase-key { font-family: var(--da-mono); font-weight: 700; font-size: 12.5px; }
.da-phase-title { flex: 1; font-size: 13.5px; }
.da-phase-steps { color: var(--mud-palette-text-secondary); font-size: 12.5px; white-space: nowrap; }
.da-phase-body { padding: 4px 14px 12px; border-top: 1px solid var(--mud-palette-divider); }
.da-step { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; font-size: 13px; }
.da-step input { margin-top: 3px; }
.da-step-removed { color: var(--mud-palette-text-secondary); text-decoration: line-through; }
.da-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 10px 0 2px; }
.da-md { font-size: 13px; }
.da-md pre, .da-pre { background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; padding: 8px; overflow-x: auto; }
.da-pre { font-family: var(--da-mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.da-facts { display: grid; grid-template-columns: minmax(90px, 130px) 1fr; gap: 4px 10px; font-size: 13px; margin: 0; }
.da-facts dt { color: var(--mud-palette-text-secondary); font-weight: 400; }
.da-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* An Overview's fields (docs/13) stack at phone width. */
@media (max-width: 599.98px) { .da-facts { grid-template-columns: 1fr; gap: 0; } .da-facts dd { margin-bottom: 8px; } }
.da-side > * { margin-bottom: 12px; }
.da-doc { display: flex; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; }
.da-doc-rev { margin-left: auto; font-family: var(--da-mono); font-size: 11.5px; color: var(--mud-palette-text-secondary); }

/* ------------------------------------------------------------------ runs (the log is dark in both themes, like a terminal) */
.da-runlog { background: var(--dp-color-field); color: #d8e1e8; font-family: var(--da-mono); font-size: 12px; border-radius: 4px; padding: 10px 12px; max-height: 560px; overflow: auto; white-space: pre-wrap; }
.da-runlog .ev { display: block; padding: 1px 0; }
.da-runlog .ev-status { color: #8fb4d4; }
.da-runlog .ev-tool { color: #b5c7a3; }
.da-runlog .ev-decision { color: #e3c07a; }
.da-runlog .ev-error { color: #ff8f84; }
.da-runlog time { color: #6c7a86; margin-right: 8px; }

/* ------------------------------------------------------------------ chat */
.da-chat { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow: auto; padding: 4px; }
.da-msg { display: flex; gap: 8px; align-items: flex-start; }
.da-msg-body { background: var(--mud-palette-background-gray); border-radius: 8px; padding: 6px 10px; font-size: 13px; max-width: 80%; white-space: pre-wrap; }
.da-msg-agent .da-msg-body { background: var(--mud-palette-action-default-hover); }
.da-msg-meta { font-size: 11px; color: var(--mud-palette-text-secondary); }
.da-queued { font-style: italic; color: var(--mud-palette-text-secondary); }

/* ------------------------------------------------------------------ mockup review */
.da-mockup { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.da-views { display: flex; gap: 8px; margin: 8px 0 12px; }
.da-images { display: flex; flex-direction: column; gap: 16px; }
.da-image { margin: 0; }
.da-image figcaption { font-size: 0.85rem; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }
.da-image img { display: block; max-width: 100%; height: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: #fff; }
.da-mockup-frame { width: 100%; height: 640px; border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; background: #fff; }
.da-thread { border: 1px solid var(--mud-palette-lines-default); border-radius: 4px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px; }
.da-thread-outdated { border-style: dashed; opacity: .85; }
.da-anchor { font-family: var(--da-mono); font-size: 11.5px; background: var(--mud-palette-action-default-hover); border-radius: 3px; padding: 0 5px; }
.da-sections { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

/* ------------------------------------------------------------------ misc */
.da-empty { color: var(--mud-palette-text-secondary); padding: 18px 4px; font-size: 13.5px; }
.da-editor { font-family: var(--da-mono); font-size: 13px; min-height: 480px; }
.da-issue { font-size: 13px; padding: 2px 0; }
.da-issue-error { color: var(--mud-palette-error); }
/* A command to copy (enrolment codes): its own box, text in the page's colour rather than the alert's, one click selects all of it, the copy button at its end. */
.da-command { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding: 2px 4px 2px 12px; max-width: max-content; border: 1px solid var(--mud-palette-lines-inputs); border-radius: 6px;
    background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary); }
.da-command-text { font-family: var(--da-mono); font-size: 13px; user-select: all; overflow-wrap: anywhere; min-width: 0; }
.da-project-row-actions { display: flex; gap: 2px; align-items: center; }
#blazor-error-ui { background: var(--mud-palette-warning); color: var(--mud-palette-warning-text); bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
/* The plan editor's text: Write (the WysiMd editor), Markdown and Preview tabs in one outlined box. The editor is themed from the palette, so it follows light and dark. */
.da-plan-text .wysimd-editor { border: none; --wysimd-font: inherit; --wysimd-mono: var(--da-mono); --wysimd-bg: var(--mud-palette-surface); --wysimd-bg-toolbar: var(--mud-palette-background-gray);
    --wysimd-bg-statusbar: var(--mud-palette-background-gray); --wysimd-text: var(--mud-palette-text-primary); --wysimd-text-muted: var(--mud-palette-text-secondary);
    --wysimd-border: var(--mud-palette-lines-default); --wysimd-separator: var(--mud-palette-lines-default); --wysimd-btn-hover: var(--mud-palette-action-default-hover);
    --wysimd-btn-active: var(--mud-palette-primary-lighten); --wysimd-accent: var(--mud-palette-primary); --wysimd-accent-hover: var(--mud-palette-primary-darken);
    --wysimd-code-bg: var(--mud-palette-background-gray); --wysimd-preview-h: var(--mud-palette-text-primary); --wysimd-shadow: none; }
.da-plan-text .wysimd-toolbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.da-plan-text textarea.da-editor { display: block; width: 100%; padding: 12px; border: none; outline: none; resize: vertical; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }
.da-plan-preview { padding: 12px 16px; min-height: 480px; }
/* Blazor's reconnect dialog (ReconnectModal.razor): blazor.web.js puts the state class on the dialog and these rules show only that state's lines. Here rather than in a scoped .razor.css so it takes the theme's colours. */
.components-reconnect-first-attempt-visible, .components-reconnect-repeated-attempt-visible, .components-reconnect-failed-visible, .components-pause-visible, .components-resume-failed-visible,
.components-rejoining-animation { display: none; }
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible, #components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible, #components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible, #components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible { display: block; }
#components-reconnect-modal { width: min(20rem, calc(100vw - 32px)); box-sizing: border-box; margin: 20vh auto; padding: 24px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--dp-radius-panel);
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); box-shadow: var(--dp-shadow-lift); font-family: var(--dp-font-body); }
#components-reconnect-modal::backdrop { background: var(--mud-palette-overlay-dark); }
.components-reconnect-container { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#components-reconnect-modal p { margin: 0; text-align: center; }
#components-reconnect-modal button { font: 600 14px/1.75 var(--dp-font-body); padding: 6px 20px; border: 0; border-radius: 6px; cursor: pointer;
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
#components-reconnect-modal button:hover { background: var(--mud-palette-primary-darken); }
#components-reconnect-modal button:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.components-rejoining-animation { position: relative; width: 64px; height: 64px; }
.components-rejoining-animation div { position: absolute; border: 3px solid var(--mud-palette-primary); border-radius: 50%; animation: components-rejoining 1.5s cubic-bezier(0, .2, .8, 1) infinite; }
.components-rejoining-animation div:nth-child(2) { animation-delay: -.5s; }
@keyframes components-rejoining {
    0%, 4.9% { inset: 32px; opacity: 0; }
    5% { inset: 32px; opacity: 1; }
    100% { inset: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .components-rejoining-animation div { animation: none; inset: 0; } }

/* ------------------------------------------------------------------ agent characters (ADR 0055): Paperclip's characters, still in lists, alive on the agent page */
.da-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.da-agent-avatar { display: block; flex-shrink: 0; }
.da-character { position: relative; display: inline-block; flex-shrink: 0; }
.da-character-64 { width: 64px; height: 64px; }
.da-character-128 { width: 128px; height: 128px; }
.da-character-still, .da-character-live { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.da-character-still img, .da-character-live svg { display: block; width: 100%; height: 100%; }
.da-character-ready .da-character-still { visibility: hidden; }
/* AgentCharacter.razor.js names the parts: the figure leans toward the pointer (--lean, on its outer group) and bobs (its inner group), the face and eyes slide
   toward it (--gx/--gy, --ex/--ey), the shadow breathes and the eyes blink. The slides are the individual translate property, so they add to the blink. */
.da-character-moving .cb-lean { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(var(--lean, 0deg)); transition: transform 320ms ease-out; }
.da-character-moving .cb-figure { animation: cb-bob 3.2s ease-in-out infinite; }
.da-character-moving .cb-shadow { transform-box: fill-box; transform-origin: center; animation: cb-shadow 3.2s ease-in-out infinite; }
.da-character-moving .cb-face { translate: var(--gx, 0) var(--gy, 0); transition: translate 260ms ease-out; }
.da-character-moving .cb-eye { transform-box: fill-box; transform-origin: center; animation: cb-blink 5.2s infinite; translate: var(--ex, 0) var(--ey, 0);
    transition: translate 200ms ease-out; }
@keyframes cb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes cb-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .75; } }
@keyframes cb-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) { .da-character .cb-figure, .da-character .cb-shadow, .da-character .cb-eye { animation: none; translate: none; transition: none; }
    .da-character .cb-lean { transform: none; transition: none; } .da-character .cb-face { translate: none; transition: none; } }
.da-avatar-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.da-avatar-preview { display: flex; justify-content: center; padding: 4px 0 8px; }
.da-avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.da-avatar-option { display: flex; align-items: center; justify-content: center; padding: 2px; border: 2px solid transparent; border-radius: 10px; cursor: pointer;
    background: var(--mud-palette-background-gray); }
.da-avatar-option:hover { border-color: var(--mud-palette-lines-inputs); }
.da-avatar-option:has(input:checked) { border-color: var(--mud-palette-primary); background: var(--mud-palette-surface); }
.da-avatar-option:has(input:focus-visible) { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.da-avatar-own { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.da-avatar-own-choice { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }