/* ============================================================================
   canvas-panel.css — right-side Canvas panel for rich artifacts
   ----------------------------------------------------------------------------
   Canvas is a real third column: sidebar | chat | Canvas. The sidebar keeps its
   state, the chat keeps a readable width, and the app bar ends where Canvas
   begins so the panel reads from y=0. Its left edge is a drag handle, and the
   chosen width is remembered (JS sets --dc-panel-pref). On mobile (<=1000px)
   Canvas becomes a full-screen overlay.

   Colours come from the app accent tokens (--accent / --accent-color /
   --accent-soft / --accent-ring), so Canvas follows the user's theme.
   ========================================================================== */

:root {
    /* Motion: one expressive curve for layout, one snappy curve for controls.
       Keeping these as tokens is what makes the whole panel feel like a single
       coordinated surface rather than a pile of independent widgets. */
    --dc-anim: 0.34s cubic-bezier(.22, 1, .36, 1);
    --dc-anim-fast: 0.16s cubic-bezier(.4, 0, .2, 1);
    --dc-anim-spring: 0.42s cubic-bezier(.34, 1.32, .5, 1);

    --dc-chat-min-w: clamp(300px, 28vw, 400px);
    --dc-accent: var(--accent-color, var(--accent, #b7795c));
    --dc-surface: var(--chat-area-background, #0f1116);
    --dc-surface-2: var(--darker-background, #1a1a1a);
    --dc-line: var(--border-color, rgba(255, 255, 255, .1));
    --dc-text: var(--text-color, #e5e7eb);
    --dc-muted: var(--subheading-color, #9ca3af);

    /* Elevation is reserved for transient controls only. The Canvas is a real
       app column, not a floating card: its left border is the only separator. */
    --dc-shadow-1: 0 1px 2px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .12);
    --dc-shadow-2: 0 4px 12px -2px rgba(0, 0, 0, .3), 0 2px 6px -2px rgba(0, 0, 0, .2);
    --dc-shadow-3: 0 18px 44px -12px rgba(0, 0, 0, .55), 0 6px 16px -8px rgba(0, 0, 0, .4);
    --dc-shadow-panel: none;

    /* Semantic diff colours (kept close to GitHub/VS Code so they read instantly). */
    --dc-add: #3fb950;
    --dc-add-soft: rgba(63, 185, 80, .13);
    --dc-add-edge: rgba(63, 185, 80, .42);
    --dc-del: #f85149;
    --dc-del-soft: rgba(248, 81, 73, .12);
    --dc-del-edge: rgba(248, 81, 73, .4);

    --dc-radius: 12px;
    --dc-radius-sm: 9px;
    --dc-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* Width: the preferred width (default, or the user's dragged value) clamped to
   the room actually left beside the current sidebar and the chat column. */
body {
    --dc-sidebar-current-w: var(--sidebar-rail-width, 56px);
    --dc-panel-pref: clamp(420px, 47vw, 900px);
    --dc-panel-max: calc(100vw - var(--dc-sidebar-current-w) - var(--dc-chat-min-w));
    --dc-panel-w: clamp(
        min(340px, var(--dc-panel-max)),
        var(--dc-panel-pref),
        var(--dc-panel-max)
    );
}
body:has(.nav-menu.open) {
    --dc-sidebar-current-w: var(--sidebar-panel-width, 292px);
}

/* ── The panel ─────────────────────────────────────────────────────────────── */
.dc-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--dc-panel-w);
    display: flex;
    flex-direction: column;
    background: var(--dc-surface);
    border-left: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow-panel);
    /* A hair of scale on entry reads as "sliding in from depth" rather than a
       flat push — the same trick modern AI canvases use. */
    transform: translateX(102%) scale(.995);
    transform-origin: right center;
    opacity: .6;
    transition:
        transform var(--dc-anim),
        opacity var(--dc-anim),
        width var(--sidebar-motion-duration, 320ms) var(--sidebar-motion-ease, ease);
    /* Above the chat + sidebar, but deliberately below the modal layer
       (.data-window / backdrop at 9998-9999) so dialogs still win. */
    z-index: 9995;
    pointer-events: none;
    will-change: transform, width;
}
body.delphos-canvas-open .dc-panel {
    transform: translateX(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* A soft accent hairline along the top edge ties the panel to the brand without
   adding chrome. Purely decorative. */
.dc-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dc-accent), transparent);
    opacity: .5;
    pointer-events: none;
    z-index: 4;
}

/* ── Live-edit / review states ──────────────────────────────────────────────
   While Delphos is writing into a file the panel breathes a faint accent glow,
   so it is obvious at a glance that the editor is being driven by the AI. */
.dc-panel.dc-editing-live { box-shadow: inset 0 0 0 1px var(--accent-ring, rgba(183, 121, 92, .4)); }
.dc-panel.dc-editing-live::before { opacity: 1; animation: dc-edge-pulse 1.9s ease-in-out infinite; }
@keyframes dc-edge-pulse {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .dc-panel { transition: transform .01s linear, opacity .01s linear; }
    .dc-panel.dc-editing-live::before { animation: none; }
}
/* While dragging, kill the width animation so the edge tracks the pointer. */
body.dc-resizing .dc-panel,
body.dc-resizing .nav,
body.dc-resizing .chat-container,
body.dc-resizing .typing-area {
    transition: none !important;
}
body.dc-resizing {
    cursor: col-resize;
    user-select: none;
}
/* The iframe must not swallow pointer moves mid-drag. */
body.dc-resizing .dc-frame { pointer-events: none; }

/* ── Resize handle (left edge) ─────────────────────────────────────────────── */
.dc-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    width: 10px;
    cursor: col-resize;
    background: transparent;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}
.dc-resizer-grip {
    width: 3px;
    height: 44px;
    border-radius: 3px;
    background: transparent;
    transition: background .15s ease, height .15s ease;
}
.dc-resizer:hover .dc-resizer-grip,
.dc-resizer:focus-visible .dc-resizer-grip,
body.dc-resizing .dc-resizer-grip {
    background: var(--dc-accent);
    height: 72px;
}
.dc-resizer:focus-visible {
    outline: 2px solid var(--accent-ring, rgba(183, 121, 92, .4));
    outline-offset: -2px;
}

/* ── Responsive three-column desktop layout ───────────────────────────────── */
@media (min-width: 1001px) {
    /* Preserve the current rail/panel instead of collapsing it. The chat and
       composer always occupy exactly the space between sidebar and Canvas. */
    body.delphos-canvas-open .nav-menu ~ .chat-container,
    body.delphos-canvas-open .nav-menu ~ .typing-area {
        width: calc(100% - var(--dc-sidebar-current-w) - var(--dc-panel-w)) !important;
        margin-left: var(--dc-sidebar-current-w) !important;
        transition:
            width var(--sidebar-motion-duration, 320ms) var(--sidebar-motion-ease, ease),
            margin-left var(--sidebar-motion-duration, 320ms) var(--sidebar-motion-ease, ease) !important;
    }

    body.delphos-canvas-open .chat-list {
        width: min(92%, 760px);
        max-width: 760px;
    }

    /* The app bar ends where Canvas begins, so the panel reads as its own
       column from y=0 and the bar's controls stay visible and clickable. */
    body.delphos-canvas-open .nav {
        right: var(--dc-panel-w);
        transition: right var(--dc-anim);
    }
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.dc-panel-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px 11px 16px;
    border-bottom: 1px solid var(--dc-line);
    /* Two stacked gradients: a faint accent wash for warmth plus a top-down
       lift so the header separates from the body without a hard band. */
    background:
        linear-gradient(180deg, var(--accent-soft, rgba(183, 121, 92, .14)), transparent 90%),
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 70%);
    flex: 0 0 auto;
    min-height: 58px;
    position: relative;
    z-index: 2;
}
.dc-panel-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--dc-radius-sm);
    background: var(--accent-soft, rgba(183, 121, 92, .14));
    border: 1px solid var(--accent-ring, rgba(183, 121, 92, .4));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    color: var(--dc-accent);
    flex: 0 0 auto;
    transition: transform var(--dc-anim-spring), background var(--dc-anim-fast), color var(--dc-anim-fast);
}
.dc-panel-ico .material-symbols-rounded { font-size: 19px; }
.dc-panel.dc-reviewing .dc-panel-ico {
    background: var(--dc-add-soft);
    border-color: var(--dc-add-edge);
    color: var(--dc-add);
}
.dc-panel.dc-editing-live .dc-panel-ico { animation: dc-ico-breathe 1.9s ease-in-out infinite; }
@keyframes dc-ico-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.dc-panel-titles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
}
.dc-panel-title {
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -.01em;
    line-height: 1.25;
    color: var(--dc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dc-panel-sub {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .005em;
    color: var(--dc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.dc-panel-sub:empty { display: none; }
.dc-panel-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.dc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border: 0;
    border-radius: var(--dc-radius-sm);
    background: transparent;
    color: var(--dc-muted);
    cursor: pointer;
    /* If the icon font has not loaded yet, keep the ligature text inside the
       button instead of letting it cover its neighbours. */
    overflow: hidden;
    transition: background var(--dc-anim-fast), color var(--dc-anim-fast), transform var(--dc-anim-fast);
}
.dc-icon-btn:hover { background: var(--accent-soft, rgba(183, 121, 92, .14)); color: var(--dc-text); }
.dc-icon-btn:active { transform: scale(.92); }
.dc-icon-btn:focus-visible {
    outline: 2px solid var(--accent-ring, rgba(183, 121, 92, .5));
    outline-offset: 1px;
}
.dc-icon-btn[aria-pressed="true"] { background: var(--accent-soft, rgba(183, 121, 92, .14)); color: var(--dc-accent); }
.dc-icon-btn[hidden] { display: none; }
.dc-icon-btn .material-symbols-rounded { font-size: 19px; }

/* ── Preview | Code segmented toggle (interactive artifacts, Claude-style) ── */
.dc-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    margin: 0 6px 0 auto;
    border-radius: 11px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid var(--dc-line);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
    flex: 0 0 auto;
}
.dc-seg[hidden] { display: none; }
.dc-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dc-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background var(--dc-anim-fast), color var(--dc-anim-fast), box-shadow var(--dc-anim-fast), transform var(--dc-anim-fast);
}
.dc-seg-btn .material-symbols-rounded { font-size: 16px; }
.dc-seg-btn:hover { color: var(--dc-text); background: rgba(255, 255, 255, .05); }
.dc-seg-btn:active { transform: scale(.96); }
.dc-seg-btn:focus-visible { outline: 2px solid var(--accent-ring, rgba(183, 121, 92, .5)); outline-offset: 1px; }
.dc-seg-btn[aria-selected="true"] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--dc-accent) 88%, white), var(--dc-accent));
    color: #fff;
    box-shadow: var(--dc-shadow-1), inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* color-mix fallback for older engines. */
@supports not (background: color-mix(in srgb, red, blue)) {
    .dc-seg-btn[aria-selected="true"] { background: var(--dc-accent); }
}
/* When the segmented control is present, actions no longer push to the far
   right on their own — the seg already claimed the auto margin. */
.dc-seg + .dc-panel-actions { margin-left: 0; }

/* ── Notice strip (e.g. a link that could not be refreshed) ───────────────── */
.dc-panel-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--dc-text);
    background: var(--accent-soft, rgba(183, 121, 92, .14));
    border-bottom: 1px solid var(--dc-line);
    flex: 0 0 auto;
    animation: dc-note-in .28s cubic-bezier(.22, 1, .36, 1);
}
@keyframes dc-note-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
.dc-panel-note[hidden] { display: none; }
.dc-panel-note .material-symbols-rounded { font-size: 17px; color: var(--dc-accent); flex: 0 0 auto; }
.dc-note-text { flex: 1 1 auto; min-width: 0; }
/* While the AI writes, the note's icon spins gently to signal live work. */
.dc-panel.dc-editing-live .dc-panel-note .material-symbols-rounded { animation: dcspin 1.6s linear infinite; }
.dc-note-btn {
    border: 1px solid var(--accent-ring, rgba(183, 121, 92, .4));
    background: transparent;
    color: var(--dc-accent);
    border-radius: 8px;
    padding: 4px 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background var(--dc-anim-fast), transform var(--dc-anim-fast);
}
.dc-note-btn:hover { background: var(--accent-soft, rgba(183, 121, 92, .14)); }
.dc-note-btn:active { transform: scale(.95); }
/* The retry action only makes sense for a load failure, not the live-edit note. */
.dc-panel.dc-editing-live .dc-note-btn,
.dc-panel.dc-reviewing .dc-note-btn { display: none; }

/* ── Body / preview frame ────────────────────────────────────────────────────── */
.dc-panel-body {
    flex: 1 1 auto;
    position: relative;
    background: var(--dc-surface-2);
    overflow: hidden;
}
.dc-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
.dc-panel-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dc-muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    gap: 11px;
    pointer-events: none;
    opacity: 1;
    transition: opacity .28s ease;
}
.dc-panel-body.loaded .dc-panel-loading { opacity: 0; }
.dc-spin {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--dc-line);
    border-top-color: var(--dc-accent);
    animation: dcspin .8s linear infinite;
}
@keyframes dcspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .dc-spin { animation-duration: 2s; }
}

/* ── Code artifact viewer (multi-file, Claude-style) ─────────────────────── */
.dc-code {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--dc-surface);
}
.dc-code-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    border-bottom: 1px solid var(--dc-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent);
    flex: 0 0 auto;
    scroll-behavior: smooth;
}
.dc-code-tabs::-webkit-scrollbar { height: 4px; }
.dc-code-tabs::-webkit-scrollbar-thumb { background: var(--dc-line); border-radius: 4px; }
.dc-code-tabs[hidden] { display: none; }
.dc-code-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    max-width: 250px;
    padding: 6px 11px;
    border: 1px solid transparent;
    border-radius: var(--dc-radius-sm);
    background: transparent;
    color: var(--dc-muted);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: background var(--dc-anim-fast), color var(--dc-anim-fast),
        border-color var(--dc-anim-fast), transform var(--dc-anim-fast);
}
.dc-code-tab:hover { background: rgba(255, 255, 255, .055); color: var(--dc-text); }
.dc-code-tab:active { transform: scale(.97); }
.dc-code-tab:focus-visible { outline: 2px solid var(--accent-ring, rgba(183, 121, 92, .5)); outline-offset: 1px; }
.dc-code-tab[aria-selected="true"] {
    background: var(--accent-soft, rgba(183, 121, 92, .14));
    border-color: var(--accent-ring, rgba(183, 121, 92, .4));
    color: var(--dc-text);
    font-weight: 600;
    box-shadow: var(--dc-shadow-1);
}
.dc-tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--dc-mono);
    font-size: 12px;
}
.dc-tab-lang {
    flex: 0 0 auto;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 1.5px 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .07);
    color: var(--dc-muted);
}
.dc-code-tab[aria-selected="true"] .dc-tab-lang {
    color: var(--dc-accent);
    background: var(--accent-soft, rgba(183, 121, 92, .2));
}

/* Per-file change badges in the tab strip while reviewing an edit. */
.dc-tab-count,
.dc-tab-status {
    flex: 0 0 auto;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 1.5px 6px;
    border-radius: 999px;
    line-height: 1.5;
}
.dc-tab-count {
    background: var(--dc-add-soft);
    color: var(--dc-add);
    border: 1px solid var(--dc-add-edge);
    font-variant-numeric: tabular-nums;
}
.dc-tab-new { background: var(--dc-add-soft); color: var(--dc-add); border: 1px solid var(--dc-add-edge); }
.dc-tab-del { background: var(--dc-del-soft); color: var(--dc-del); border: 1px solid var(--dc-del-edge); }

.dc-code-panes { position: relative; flex: 1 1 auto; min-height: 0; }
.dc-code-pane { display: none; position: absolute; inset: 0; }
.dc-code-pane.active { display: block; animation: dc-pane-in .2s ease-out; }
@keyframes dc-pane-in {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}
.dc-code-scroll {
    height: 100%;
    overflow: auto;
    background: var(--dc-surface);
    /* Extra bottom padding clears the sticky review bar so the last lines of a
       file are never hidden behind it. */
    padding: 12px 0 96px;
    font-family: var(--dc-mono);
    font-size: 12.5px;
    line-height: 1.75;
    tab-size: 4;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}
.dc-code-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.dc-code-scroll::-webkit-scrollbar-track { background: transparent; }
.dc-code-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .13);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 8px;
}
.dc-code-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); background-clip: content-box; }
/* The lines wrapper is min-width:max-content so long unwrapped lines extend it
   and the whole grid scrolls horizontally as one unit — numbers stay glued to
   their code. */
.dc-code-lines {
    display: block;
    min-width: max-content;
    background: transparent !important;
    padding: 0 !important;
}
.dc-line {
    display: flex;
    align-items: flex-start;
    min-height: 1.75em;
    /* Grow to the widest line so long lines scroll horizontally, but always
       fill at least the viewport so the hover highlight spans the full row. */
    width: max-content;
    min-width: 100%;
    transition: background var(--dc-anim-fast);
}
.dc-line:hover { background: rgba(127, 127, 127, .07); }
.dc-line.has-comment { background: var(--accent-soft, rgba(183, 121, 92, .1)); }
.dc-ln {
    flex: 0 0 auto;
    position: sticky;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
    min-width: 52px;
    padding: 0 14px 0 16px;
    border: 0;
    border-right: 1px solid var(--dc-line);
    background: var(--dc-surface);
    color: var(--dc-muted);
    opacity: .6;
    text-align: right;
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    user-select: none;
    transition: color .12s ease, opacity .12s ease, background .12s ease;
}
.dc-line:hover .dc-ln { opacity: 1; }
.dc-ln:hover { color: var(--dc-accent); background: var(--accent-soft, rgba(183, 121, 92, .18)); }
.dc-line.has-comment .dc-ln { color: var(--dc-accent); opacity: 1; }
.dc-lc {
    flex: 0 0 auto;
    padding: 0 20px 0 16px;
    white-space: pre;
    color: var(--dc-text);
}

/* ── per-line comments / suggestions ── */
.dc-comment-edit, .dc-comment-note {
    position: sticky;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    margin: 6px 0 6px 52px;
    border: 1px solid var(--accent-ring, rgba(183, 121, 92, .4));
    border-radius: 10px;
    background: var(--dc-surface);
    font-family: var(--font, system-ui, sans-serif);
}
.dc-comment-inner { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.dc-comment-cue { font-size: 16px; color: var(--dc-accent); }
.dc-comment-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--dc-line);
    border-radius: 8px;
    background: var(--dc-bg, rgba(0, 0, 0, .18));
    color: var(--dc-text);
    font: inherit;
    font-size: 13px;
}
.dc-comment-input:focus { outline: none; border-color: var(--dc-accent); }
.dc-comment-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dc-comment-actions button {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid var(--dc-line);
    background: transparent;
    color: var(--dc-muted);
    font-size: 12.5px;
    cursor: pointer;
}
.dc-comment-save { background: var(--dc-accent) !important; color: #fff !important; border-color: var(--dc-accent) !important; }
.dc-comment-note { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; }
.dc-comment-text { flex: 1 1 auto; color: var(--dc-text); font-size: 13px; line-height: 1.45; white-space: pre-wrap; cursor: text; }
.dc-comment-del {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--dc-muted);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}
.dc-comment-del:hover { color: #f85149; }

/* ════════════════════════════════════════════════════════════════════════════
   LIVE INLINE DIFF — the AI's edit rendered directly in the code editor
   ----------------------------------------------------------------------------
   A change hunk is a self-contained card inside the line flow: removed lines on
   a red wash, added lines on a green wash, and a small action row to keep or
   revert just that change. Two gutters (old line / new line) mirror a real
   side-by-side-aware unified diff so the user can orient instantly.
   ═══════════════════════════════════════════════════════════════════════════ */
.dc-code--diff .dc-code-scroll { padding-bottom: 120px; }

/* Two narrow number gutters + a sign column, all sticky so they stay put while
   the code scrolls sideways. */
/* One token drives all three sticky offsets, so the gutters can never drift out
   of alignment the way hard-coded pixel `left` values do. */
.dc-code--diff { --dc-gutter-w: 44px; --dc-sign-w: 22px; }
.dc-dln {
    flex: 0 0 auto;
    position: sticky;
    box-sizing: border-box;
    width: var(--dc-gutter-w, 44px);
    padding: 0 8px;
    text-align: right;
    color: var(--dc-muted);
    opacity: .45;
    font-variant-numeric: tabular-nums;
    user-select: none;
    overflow: hidden;
    background: var(--dc-surface);
    z-index: 1;
}
.dc-dln-old { left: 0; }
.dc-dln-new { left: var(--dc-gutter-w, 44px); border-right: 1px solid var(--dc-line); }
.dc-dsign {
    flex: 0 0 auto;
    position: sticky;
    left: calc(var(--dc-gutter-w, 44px) * 2);
    z-index: 1;
    box-sizing: border-box;
    width: var(--dc-sign-w, 22px);
    padding-left: 7px;
    font-weight: 700;
    user-select: none;
    background: var(--dc-surface);
}
.dc-line--ctx .dc-dsign { color: var(--dc-muted); opacity: .35; }
.dc-line:hover .dc-dln { opacity: .85; }

/* Added / removed rows. The left accent bar is what makes a long hunk readable
   at a glance when scrolling fast. */
.dc-line--add {
    background: var(--dc-add-soft);
    box-shadow: inset 2px 0 0 var(--dc-add-edge);
}
.dc-line--add .dc-dsign { color: var(--dc-add); }
.dc-line--add .dc-dln,
.dc-line--add .dc-dsign { background: color-mix(in srgb, var(--dc-add-soft) 60%, var(--dc-surface)); }
.dc-line--add:hover { background: color-mix(in srgb, var(--dc-add) 18%, transparent); }

.dc-line--del {
    background: var(--dc-del-soft);
    box-shadow: inset 2px 0 0 var(--dc-del-edge);
}
.dc-line--del .dc-dsign { color: var(--dc-del); }
.dc-line--del .dc-dln,
.dc-line--del .dc-dsign { background: color-mix(in srgb, var(--dc-del-soft) 60%, var(--dc-surface)); }
.dc-line--del .dc-lc { opacity: .82; }
.dc-line--del:hover { background: color-mix(in srgb, var(--dc-del) 16%, transparent); }

@supports not (background: color-mix(in srgb, red, blue)) {
    .dc-line--add .dc-dln, .dc-line--add .dc-dsign { background: rgba(63, 185, 80, .1); }
    .dc-line--del .dc-dln, .dc-line--del .dc-dsign { background: rgba(248, 81, 73, .09); }
}

/* ── A change hunk (code diff) ──────────────────────────────────────────────
   Named .dc-dh, NOT .dc-hunk: canvas-artifact.css owns .dc-hunk for the chat
   DOCUMENT canvas, and this stylesheet loads after it, so a shared name would
   silently override the document diff. Keeping them separate isolates both. */
.dc-dh {
    position: relative;
    display: block;
    width: max-content;
    min-width: 100%;
    margin: 10px 0;
    border-top: 1px solid var(--dc-line);
    border-bottom: 1px solid var(--dc-line);
    background: rgba(255, 255, 255, .015);
    animation: dc-dh-in .3s cubic-bezier(.22, 1, .36, 1) both;
    transition: opacity var(--dc-anim-fast), filter var(--dc-anim-fast);
}
@keyframes dc-dh-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
.dc-dh--pending { box-shadow: inset 0 0 0 1px var(--accent-ring, rgba(183, 121, 92, .28)); }
.dc-dh--accept { opacity: .95; }
.dc-dh--accept .dc-dh-tag { color: var(--dc-add); }
.dc-dh--reject .dc-dh-tag { color: var(--dc-muted); }

/* Action row pinned to the left so it stays visible on a horizontally
   scrolled hunk. */
.dc-dh-actions {
    position: sticky;
    left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 5px 12px 5px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent);
    border-bottom: 1px dashed var(--dc-line);
    font-family: var(--font, system-ui, -apple-system, 'Segoe UI', sans-serif);
    z-index: 2;
}
.dc-dh-tag {
    flex: 1 1 auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dc-accent);
}
.dc-dh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 26px;
    height: 28px;
    padding: 0 9px;
    border-radius: 8px;
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    color: var(--dc-muted);
    cursor: pointer;
    box-shadow: var(--dc-shadow-1);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 650;
    transition: background var(--dc-anim-fast), color var(--dc-anim-fast),
        border-color var(--dc-anim-fast), transform var(--dc-anim-fast);
}
.dc-dh-btn .material-symbols-rounded { font-size: 15px; }
.dc-dh-label { line-height: 1; }
.dc-dh-btn:active { transform: scale(.9); }
.dc-dh-btn:focus-visible { outline: 2px solid var(--accent-ring, rgba(183, 121, 92, .5)); outline-offset: 1px; }
.dc-dh-accept:hover { background: var(--dc-add-soft); color: var(--dc-add); border-color: var(--dc-add-edge); }
.dc-dh-reject:hover { background: var(--dc-del-soft); color: var(--dc-del); border-color: var(--dc-del-edge); }

/* ── Sticky review bar (Accept all / Reject all) ────────────────────────────
   Deliberately NOT .dc-diff-bar: that class belongs to chat-stream.css as a
   fixed, screen-centered overlay and would fight this in-panel bar. */
.dc-review-bar {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px 11px 14px;
    border-radius: 14px;
    border: 1px solid var(--accent-ring, rgba(183, 121, 92, .4));
    background: color-mix(in srgb, var(--dc-surface-2) 88%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: var(--dc-shadow-3);
    font-family: var(--font, system-ui, -apple-system, 'Segoe UI', sans-serif);
    transform: translateY(140%);
    opacity: 0;
    transition: transform var(--dc-anim-spring), opacity var(--dc-anim);
    z-index: 6;
}
.dc-review-bar.show { transform: translateY(0); opacity: 1; }
@supports not (background: color-mix(in srgb, red, blue)) {
    .dc-review-bar { background: rgba(26, 26, 26, .92); }
}
.dc-review-icon {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--dc-accent);
}
.dc-review-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.dc-review-title {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.005em;
    color: var(--dc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dc-review-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dc-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.dc-rv-add { color: var(--dc-add); font-weight: 700; }
.dc-rv-rem { color: var(--dc-del); font-weight: 700; }
.dc-rv-pending { color: var(--dc-muted); }
.dc-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 7px 13px;
    border-radius: 10px;
    border: 1px solid var(--dc-line);
    background: rgba(255, 255, 255, .05);
    color: var(--dc-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dc-anim-fast), border-color var(--dc-anim-fast), transform var(--dc-anim-fast);
}
.dc-review-btn .material-symbols-rounded { font-size: 16px; }
.dc-review-btn:hover { background: rgba(255, 255, 255, .1); }
.dc-review-btn:active { transform: scale(.96); }
.dc-review-btn:focus-visible { outline: 2px solid var(--accent-ring, rgba(183, 121, 92, .5)); outline-offset: 2px; }
.dc-review-btn--primary {
    background: var(--dc-accent);
    border-color: var(--dc-accent);
    color: #fff;
    box-shadow: var(--dc-shadow-2);
}
.dc-review-btn--primary:hover { filter: brightness(1.08); background: var(--dc-accent); }

/* Narrow panels: stack the bar's actions under its label so nothing clips. */
@media (max-width: 560px) {
    .dc-review-bar { flex-wrap: wrap; }
    .dc-review-text { flex-basis: 100%; }
    .dc-review-btn { flex: 1 1 0; justify-content: center; }
}

/* ── Inline artifact card (shown in the chat message) ───────────────────────── */
.dc-artifact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 440px;
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius, 14px);
    background:
        linear-gradient(135deg, var(--accent-soft, rgba(183, 121, 92, .14)), transparent 70%),
        rgba(255, 255, 255, .028);
    box-shadow: var(--dc-shadow-1);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: transform var(--dc-anim-fast), border-color var(--dc-anim-fast),
        background var(--dc-anim-fast), box-shadow var(--dc-anim-fast);
}
.dc-artifact-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-ring, rgba(183, 121, 92, .4));
    box-shadow: var(--dc-shadow-2);
}
.dc-artifact-card:active { transform: translateY(0) scale(.995); }
.dc-artifact-card:focus-visible {
    outline: 2px solid var(--accent-ring, rgba(183, 121, 92, .4));
    outline-offset: 2px;
}
.dc-artifact-card.is-open {
    border-color: var(--dc-accent);
    box-shadow: inset 0 0 0 1px var(--accent-ring, rgba(183, 121, 92, .4));
}
.dc-artifact-card .dc-ac-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--dc-surface);
    border: 1px solid var(--accent-ring, rgba(183, 121, 92, .4));
    color: var(--dc-accent);
    overflow: hidden;
}
.dc-artifact-card .dc-ac-ico .material-symbols-rounded { font-size: 21px; }
/* Title and meta are their own rows — spans default to inline, which used to
   let the meta text wrap up beside a long title. */
.dc-ac-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.dc-ac-title {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--dc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dc-ac-meta {
    display: block;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--dc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dc-ac-open {
    flex: 0 0 auto;
    font-size: 19px;
    color: var(--dc-muted);
    transition: color .15s ease;
}
.dc-artifact-card:hover .dc-ac-open,
.dc-artifact-card.is-open .dc-ac-open { color: var(--dc-accent); }

/* "Open in Canvas" affordance on ordinary code blocks + sandbox boxes. */
.code-header .dc-code-open,
.sandbox-code-header .dc-code-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    margin-right: 6px;
    padding: 4px 9px;
    border: 1px solid var(--accent-ring, rgba(183, 121, 92, .4));
    border-radius: 8px;
    background: transparent;
    color: var(--dc-accent);
    font-size: 11.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease;
}
.code-header .dc-code-open:hover,
.sandbox-code-header .dc-code-open:hover { background: var(--accent-soft, rgba(183, 121, 92, .14)); }
.code-header .dc-code-open .material-symbols-rounded,
.sandbox-code-header .dc-code-open .material-symbols-rounded { font-size: 15px; }

/* ── Mobile / small screens: a separate window that slides in from the RIGHT ─ */
@media (max-width: 1000px) {
    .dc-panel {
        top: 0;                        /* full height, above the top bar */
        width: 100vw;                  /* ignore the desktop three-column width */
        max-width: none;
        border-left: 0;
    }
    /* No edge-dragging on touch layouts: Canvas is full-screen there. */
    .dc-resizer { display: none; }
    /* Full-screen overlay: the chat is not shrunk, the panel simply covers it.
       The app bar is hidden rather than layered over the panel — the Canvas
       header carries its own close/download controls. */
    body.delphos-canvas-open { overflow: hidden; }
    body.delphos-canvas-open .nav { display: none; }
    /* The composer sits at z-index 100, far below the panel, so it was already
       invisible — but a hidden-yet-focusable input under a full-screen overlay
       still steals taps and scrolls the page on iOS. */
    body.delphos-canvas-open .typing-area { display: none; }

    /* ── Header that actually fits a phone ──────────────────────────────────
       The head packs an icon, a title, the Preview|Code toggle and up to five
       actions into 100vw. All of those were flex: 0 0 auto, so the row simply
       overflowed and the LAST control — Close — was the one clipped off the
       screen, leaving no way out of the Canvas. Fixed by dropping the
       decorative icon, letting the title and the toggle shrink, and pinning the
       actions so Close is always the one thing guaranteed to be on screen. */
    .dc-panel-head {
        gap: 6px;
        padding: 8px 8px 8px 12px;
        min-height: 52px;
    }
    .dc-panel-ico { display: none; }
    .dc-panel-titles { flex: 1 1 0; min-width: 0; }
    .dc-panel-title { font-size: 13.5px; }
    .dc-seg {
        flex: 0 1 auto;
        min-width: 0;
        margin: 0 2px 0 auto;
        padding: 2px;
        overflow: hidden;
    }
    .dc-seg-btn { min-width: 0; padding: 6px 10px; font-size: 12px; }
    .dc-panel-actions { gap: 0; flex: 0 0 auto; }
    .dc-panel-actions .dc-icon-btn { width: 36px; height: 36px; }

    /* Expand/collapse is meaningless at 100vw — the panel is already as wide as
       it can get. Hidden in JS too (syncWideButton); this is the belt to that
       braces so a stale DOM state can never resurrect it. */
    .dc-panel [data-dc-wide] { display: none !important; }

    /* Close is the primary way out of a full-screen Canvas, so it reads as a
       real button instead of one more grey glyph in a row of five. */
    .dc-panel-actions [data-dc-close] {
        margin-left: 4px;
        color: var(--dc-text);
        background: rgba(255, 255, 255, .06);
        border: 1px solid var(--dc-line);
    }
    .dc-panel-actions [data-dc-close]:hover,
    .dc-panel-actions [data-dc-close]:active {
        background: var(--accent-soft, rgba(183, 121, 92, .18));
        color: var(--dc-accent);
    }
}

/* Narrow phones: with the Preview|Code toggle on screen there is no room left
   for a title as well, and the toggle + actions are the useful half. The title
   is still shown for artifacts that have no toggle (documents, decks, PDFs). */
@media (max-width: 560px) {
    .dc-panel-head:has(.dc-seg:not([hidden])) .dc-panel-titles { display: none; }
    .dc-panel-head:has(.dc-seg:not([hidden])) .dc-seg { margin-left: 0; }
    .dc-panel-head:has(.dc-seg:not([hidden])) .dc-seg + .dc-panel-actions { margin-left: auto; }
}

/* ============================================================================
   PAGE AUDIT — what Delphos saw when it looked at its own document
   ----------------------------------------------------------------------------
   viewFile rasterizes a produced PDF and measures it. This is the user-facing
   half of that: a filmstrip of the pages the model actually looked at, pinned
   under the preview, with the blank ones flagged. It is deliberately evidence
   rather than a status line — a page that came out empty shows up as an empty
   picture, which is the one thing a "your PDF is ready" sentence cannot fake.

   The strip is a flex SIBLING of .dc-panel-body, never a child: setFrame()
   replaces the body's innerHTML on every load and would take it along.
   ========================================================================== */
.dc-pages {
    position: relative;
    flex: 0 0 auto;
    border-top: 1px solid var(--dc-line);
    background: var(--dc-surface);
    padding: 9px 12px 11px;
    overflow: hidden;
    animation: dc-pages-in var(--dc-anim);
}
.dc-pages[hidden] { display: none; }
@keyframes dc-pages-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.dc-pages-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    min-width: 0;
}
.dc-pages-ic {
    font-size: 17px;
    color: var(--dc-accent);
    flex: 0 0 auto;
}
.dc-pages-title {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--dc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.dc-pages-verdict {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    border: 1px solid transparent;
}
.dc-pages-verdict.is-ok {
    color: var(--dc-add);
    background: var(--dc-add-soft);
    border-color: var(--dc-add-edge);
}
.dc-pages-verdict.is-bad {
    color: var(--dc-del);
    background: var(--dc-del-soft);
    border-color: var(--dc-del-edge);
}
.dc-pages-verdict.is-wait {
    color: var(--dc-accent);
    background: var(--accent-soft, rgba(183, 121, 92, .14));
    border-color: var(--accent-ring, rgba(183, 121, 92, .4));
}
/* Three dots that fill left to right while a vision helper is being asked. */
.dc-pv-dots { display: inline-flex; gap: 3px; }
.dc-pv-dots i {
    width: 3px; height: 3px; border-radius: 50%;
    background: currentColor;
    opacity: .3;
    animation: dc-pv-dot 1.05s ease-in-out infinite;
}
.dc-pv-dots i:nth-child(2) { animation-delay: .16s; }
.dc-pv-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes dc-pv-dot {
    0%, 100% { opacity: .25; transform: none; }
    45% { opacity: 1; transform: translateY(-1.5px); }
}
.dc-pages-x {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--dc-muted);
    cursor: pointer;
    transition: background var(--dc-anim-fast), color var(--dc-anim-fast);
}
.dc-pages-x .material-symbols-rounded { font-size: 15px; }
.dc-pages-x:hover { background: rgba(255, 255, 255, .07); color: var(--dc-text); }

/* ── the filmstrip ─────────────────────────────────────────────────────────── */
.dc-pages-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--dc-line) transparent;
}
.dc-pages-strip::-webkit-scrollbar { height: 6px; }
.dc-pages-strip::-webkit-scrollbar-thumb {
    background: var(--dc-line);
    border-radius: 3px;
}
.dc-pages-empty {
    font-size: 12px;
    color: var(--dc-muted);
    padding: 8px 2px;
}
.dc-page {
    position: relative;
    flex: 0 0 auto;
    width: 62px;
    padding: 0;
    border: 1px solid var(--dc-line);
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    line-height: 0;
    transition: transform var(--dc-anim-fast), border-color var(--dc-anim-fast),
        box-shadow var(--dc-anim-fast);
    animation: dc-page-in .3s cubic-bezier(.22, 1, .36, 1) backwards;
}
/* Pages fan in left to right, so a twelve-page report reads as a strip being
   laid out rather than twelve thumbnails blinking on at once. */
.dc-page:nth-child(1) { animation-delay: .02s; }
.dc-page:nth-child(2) { animation-delay: .05s; }
.dc-page:nth-child(3) { animation-delay: .08s; }
.dc-page:nth-child(4) { animation-delay: .11s; }
.dc-page:nth-child(5) { animation-delay: .14s; }
.dc-page:nth-child(6) { animation-delay: .17s; }
.dc-page:nth-child(n+7) { animation-delay: .2s; }
@keyframes dc-page-in {
    from { opacity: 0; transform: translateY(8px) scale(.94); }
    to { opacity: 1; transform: none; }
}
.dc-page img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 108px;
    object-fit: cover;
    object-position: top center;
}
.dc-page:hover {
    transform: translateY(-3px);
    border-color: var(--accent-ring, rgba(183, 121, 92, .4));
    box-shadow: var(--dc-shadow-2);
}
.dc-page:active { transform: translateY(-1px) scale(.985); }
.dc-page:focus-visible {
    outline: 2px solid var(--accent-ring, rgba(183, 121, 92, .4));
    outline-offset: 2px;
}
.dc-page.is-sel {
    border-color: var(--dc-accent);
    box-shadow: 0 0 0 2px var(--accent-ring, rgba(183, 121, 92, .4));
}
.dc-page-n {
    position: absolute;
    left: 3px;
    bottom: 3px;
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(2px);
}
/* A defective page is marked ON the evidence, not only in the summary. */
.dc-page.is-bad {
    border-color: var(--dc-del-edge);
    background: var(--dc-del-soft);
}
.dc-page.is-bad::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--dc-del-soft);
    pointer-events: none;
}
.dc-page-flag {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 13px;
    color: #fff;
    background: var(--dc-del);
    border-radius: 50%;
    padding: 2px;
    line-height: 1;
    z-index: 1;
}

/* A sweep across the strip while a vision helper is being consulted: something
   is looking at these pages right now, and the panel says so. */
.dc-pages-sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(100deg,
        transparent 30%,
        var(--accent-soft, rgba(183, 121, 92, .14)) 48%,
        rgba(255, 255, 255, .07) 52%,
        transparent 70%);
    background-size: 240% 100%;
}
.dc-panel[data-dc-fv="pending"] .dc-pages-sweep {
    opacity: 1;
    animation: dc-sweep 1.5s linear infinite;
}
@keyframes dc-sweep {
    from { background-position: 140% 0; }
    to { background-position: -140% 0; }
}
.dc-panel[data-dc-fv="pending"] .dc-pages-ic { animation: dc-pv-look 1.6s ease-in-out infinite; }
@keyframes dc-pv-look {
    0%, 100% { opacity: .55; transform: none; }
    50% { opacity: 1; transform: scale(1.12); }
}

/* The delegated description — a model without eyes borrowed some. Clamped to
   two lines because it is a paragraph, expandable because it is the answer. */
.dc-pages-note {
    width: 100%;
    margin-top: 2px;
    padding: 7px 9px;
    border: 1px dashed var(--dc-line);
    border-radius: var(--dc-radius-sm, 9px);
    background: rgba(255, 255, 255, .022);
    color: var(--dc-muted);
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--dc-anim-fast), border-color var(--dc-anim-fast);
}
.dc-pages-note[hidden] { display: none; }
.dc-pages-note:hover { color: var(--dc-text); border-color: var(--accent-ring, rgba(183, 121, 92, .4)); }
.dc-pages-note.is-expanded {
    -webkit-line-clamp: unset;
    max-height: 30vh;
    overflow-y: auto;
    color: var(--dc-text);
}

/* ============================================================================
   EDIT BAR — the repairs Delphos can make to the document on screen
   ----------------------------------------------------------------------------
   Each chip writes a real request into the composer and sends it, so the change
   goes through the same chain (rebuild → render → re-check) as the first draft
   and stays visible in the transcript. Only measured defects get a chip.
   ========================================================================== */
.dc-editbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--dc-line);
    background: linear-gradient(180deg, var(--accent-soft, rgba(183, 121, 92, .1)), transparent);
    animation: dc-note-in .28s cubic-bezier(.22, 1, .36, 1);
}
.dc-editbar[hidden] { display: none; }
.dc-eb-lead {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--dc-muted);
}
.dc-eb-lead .material-symbols-rounded { font-size: 16px; color: var(--dc-accent); }
.dc-eb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}
.dc-eb-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--dc-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: var(--dc-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--dc-anim-fast), background var(--dc-anim-fast),
        border-color var(--dc-anim-fast), color var(--dc-anim-fast);
}
.dc-eb-chip .material-symbols-rounded { font-size: 15px; color: var(--dc-accent); }
.dc-eb-chip:hover {
    transform: translateY(-1px);
    background: var(--accent-soft, rgba(183, 121, 92, .14));
    border-color: var(--accent-ring, rgba(183, 121, 92, .4));
}
.dc-eb-chip:active { transform: none; }
.dc-eb-chip:focus-visible {
    outline: 2px solid var(--accent-ring, rgba(183, 121, 92, .4));
    outline-offset: 2px;
}

/* ── the same repairs, under the card still sitting in the conversation ─────── */
.dc-ac-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    max-width: 440px;
    margin: -4px 0 12px;
}
.dc-ac-tools .dc-eb-chip {
    padding: 4px 10px;
    font-size: 11.5px;
    background: transparent;
}
.dc-ac-tools .dc-eb-chip .material-symbols-rounded { font-size: 14px; }

/* The card carries the verdict too, so a PDF further up the thread still says
   whether anyone actually checked it. */
.dc-artifact-card.has-defect .dc-ac-ico {
    border-color: var(--dc-del-edge);
    color: var(--dc-del);
}
.dc-artifact-card.has-defect .dc-ac-meta { color: var(--dc-del); }
.dc-artifact-card.is-clean .dc-ac-ico {
    border-color: var(--dc-add-edge);
    color: var(--dc-add);
}
.dc-artifact-card.is-checking .dc-ac-ico { animation: dc-pv-look 1.6s ease-in-out infinite; }

@media (max-width: 560px) {
    /* On a phone the strip is the point of the panel's bottom edge, so it keeps
       its size and the chrome around it gives way instead. */
    .dc-pages { padding: 8px 10px 10px; }
    .dc-pages-title { display: none; }
    .dc-pages-verdict { margin-left: 0; }
    .dc-editbar { flex-wrap: wrap; gap: 7px; }
    .dc-eb-lead { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-pages,
    .dc-page,
    .dc-editbar,
    .dc-pages-sweep,
    .dc-pv-dots i,
    .dc-panel[data-dc-fv="pending"] .dc-pages-ic,
    .dc-artifact-card.is-checking .dc-ac-ico { animation: none; }
    .dc-page:hover,
    .dc-eb-chip:hover { transform: none; }
}