markon-core 0.15.13

/* markon-chat — floating-sphere AI assistant. A single container morphs in
   place between a 40×40 sphere (collapsed) and a ~420×600 panel (expanded),
   the same pattern as the Live sphere. The face stays pinned to the panel's
   bottom-right corner, so clicking it again at the same screen position is
   the exact reverse of opening — and the sphere doesn't visually "jump" when
   the panel is bigger. Position, drag, and collision avoidance are driven by
   FloatingLayer (components/floating-layer.js); this file is geometry +
   theming only. */

:root {
    --markon-chat-accent: #8B5CF6;       /* Tailwind violet-500 */
    --markon-chat-accent-fg: color-mix(in srgb, var(--markon-chat-accent) 68%, var(--markon-fg-muted));
    --markon-chat-accent-border: color-mix(in srgb, var(--markon-chat-accent) 34%, var(--markon-border-emphasis));
    --markon-chat-accent-ring: color-mix(in srgb, var(--markon-chat-accent) 12%, transparent);
    --markon-chat-accent-soft: color-mix(in srgb, var(--markon-chat-accent) 12%, transparent);
    --markon-chat-resizer-arc-radius: var(--markon-radius-lg);
    --markon-chat-resizer-arc-width: 1.5px;
    /* The resting resize handle reuses the panel's border-strong token so it
       stays visually stitched to the panel chrome under both themes. The hover
       color stays theme-specific (no matching neutral mid-tone in our token
       set), so its dark override lives below. */
    --markon-chat-resizer-color: var(--markon-border-emphasis);
    --markon-chat-resizer-color-hover: #8c959f;
}

html[data-theme="dark"] {
    --markon-chat-resizer-color-hover: #768390;
}

/* ─── Container (morph host) ─────────────────────────────────────────── */

/* Collapsed: a 40×40 circle. Same surface + 1px hairline border as the
   TOC and Live spheres so the three floating affordances visually belong
   to one family — no drop shadow, the border alone separates them from
   the article surface. FloatingLayer writes the position
   (top/right/bottom/left) directly. */
.markon-chat-container {
    position: fixed;
    z-index: var(--markon-z-chrome);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--markon-bg-elevated);
    color: var(--markon-fg-subtle);
    /* 2.5px border matches the Live sphere's "off" stroke width — same
       visual weight across all three floating-layer family members. */
    border: 2.5px solid var(--markon-border-emphasis);
    box-sizing: border-box;
    user-select: none;
    overflow: hidden;
    /* Float above the document — same panel-opacity as the editor panels.
       Popout mode overrides this to 1 (the panel IS the window then). */
    opacity: var(--markon-panel-opacity, 0.9);
}

/* Dark mode keeps a slightly muted body color on the sphere face — handled
   by --markon-fg-subtle; container background + border are token-driven. */

/* Expanded: panel rectangle. Inherits the sphere's surface + text color so
   clicking feels like a pure geometric transform (sphere → panel), not a
   skin swap. Border-radius matches the sphere radius (20px) for the corner
   continuity, and we cap width/height to the viewport so very small windows
   still get a readable panel. Background tracks `--markon-bg-elevated` — the
   same surface tone the Live panel and TOC narrow-screen menu use, so the
   three floating-layer family members read as one component class. */
.markon-chat-container.expanded {
    width: 420px;
    height: 600px;
    min-width: 320px;
    min-height: 400px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    /* `resize: both` only takes effect when overflow != visible. Switching to
       hidden gives the user a native BR-corner drag handle for resizing the
       panel. The thread-menu dropdown lives inside .markon-chat-body which
       has its own overflow rules, and the mention popup is `position: fixed`
       on document.body — so neither is clipped by this. */
    overflow: hidden;
    resize: both;
}

.markon-chat-container:not(.expanded) .markon-modal-frame-drag-region {
    display: none;
}

/* Webkit-only restyle of the BR resize handle. Draw a short 1/4-circle handle
   around the panel corner; longer arcs start looking like an extra panel
   border turning inward. */
.markon-chat-container.expanded::-webkit-resizer {
    background-color: transparent;
    background-image: radial-gradient(
        circle at 0 0,
        transparent 0 calc(var(--markon-chat-resizer-arc-radius) - var(--markon-chat-resizer-arc-width)),
        var(--markon-chat-resizer-color) calc(var(--markon-chat-resizer-arc-radius) - var(--markon-chat-resizer-arc-width)) var(--markon-chat-resizer-arc-radius),
        transparent var(--markon-chat-resizer-arc-radius)
    );
}

.markon-chat-container.expanded::-webkit-resizer:hover {
    background-image: radial-gradient(
        circle at 0 0,
        transparent 0 calc(var(--markon-chat-resizer-arc-radius) - var(--markon-chat-resizer-arc-width)),
        var(--markon-chat-resizer-color-hover) calc(var(--markon-chat-resizer-arc-radius) - var(--markon-chat-resizer-arc-width)) var(--markon-chat-resizer-arc-radius),
        transparent var(--markon-chat-resizer-arc-radius)
    );
}

html[data-theme="dark"] .markon-chat-container.expanded {
    color: var(--markon-fg-default);
}

/* ─── Face (sphere face / close handle) ──────────────────────────────── */

/* When collapsed, the face fills the container. When expanded, it shrinks
   to a 40×40 button pinned at the panel's bottom-right corner, becoming the
   close (X) — exactly the position the sphere occupied before expand, so a
   second click at the same spot reverses the first. */
.markon-chat-face {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: inherit;
}

.markon-chat-face-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: inherit;
}

/* The sparkle inherits the violet accent so the Chat sphere is identifiable
   at a glance — no separate corner dot needed since the icon itself carries
   the brand color. The close X (expanded state) reverts to currentColor so
   it matches the panel's text. */
/* Sphere icon joins the ToC / Live chrome family: the same muted grey, not
   the brand accent — quieter and consistent with its neighbours. */
.markon-chat-face-icon.icon-chat {
    color: var(--markon-fg-subtle);
}

.markon-chat-face-icon.icon-close {
    display: none;
}

.markon-chat-container.expanded .markon-chat-face-icon.icon-chat {
    display: none;
}

.markon-chat-container.expanded .markon-chat-face-icon.icon-close {
    display: inline-flex;
}

/* Pin face to the TL corner when expanded — same morph as the Live panel.
   The sphere becomes the panel's top-left close button; round only the TL
   so it visually continues the panel's TL rounded corner. */
.markon-chat-container.expanded .markon-chat-face {
    position: absolute;
    top: var(--markon-modal-frame-inset);
    left: var(--markon-modal-frame-inset);
    width: 40px;
    height: 40px;
    z-index: var(--markon-z-content-overlay);
    border-radius: var(--markon-radius-lg) 0 0 0;
}

/* Hover spin on the X — same playful affordance as TOC and Live use. */
.markon-chat-container.expanded .markon-chat-face .icon-close {
    transition: transform 0.35s ease;
}
.markon-chat-container.expanded .markon-chat-face:hover .icon-close {
    transform: rotate(180deg);
}

/* ─── Body (panel content) ───────────────────────────────────────────── */

/* Hidden when collapsed — only the face is visible inside the 40×40 sphere.
   When expanded, fills the container with header / messages / footer.
   The container itself owns the border + radius; the body just rounds its
   own clip so its content doesn't bleed past the rounded corners. */
.markon-chat-body {
    display: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    flex-direction: column;
    color: inherit;
    overflow: hidden;
}

.markon-chat-container.expanded .markon-chat-body {
    display: flex;
}

@media (max-width: 600px) {
    .markon-chat-container.expanded {
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
    }
}

/* ─── Header ─────────────────────────────────────────────────────────── */

/* Header: 40px tall so the X face (top:0, 40×40) and the inline action buttons
   share the same horizontal mid-line. No bottom border — the panel reads as a
   single continuous surface, divider-less, matching the Live panel. The X face
   and the right-side action group are both absolutely-positioned, leaving the
   title group as the only flex child — `justify-content: center` then puts it
   at the panel's true horizontal center (not just centered in the available
   space between X and actions). */
.markon-chat-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    /* Header doubles as the panel-drag handle (FloatingLayer's
       expandedDragHandle). Show a grab cursor over its blank space; the
       buttons + thread title inside override with their own cursors. */
    cursor: grab;
}

.markon-chat-header:active {
    cursor: grabbing;
}

/* Centered title-group (title text + rename pencil). Sits in the natural flex
   center, with side margins to keep clear of the X (left) and action buttons
   (right) when the title is long. */
.markon-chat-header-titlebar {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    /* 48px clears the X face on the left and the action group on the right. */
    margin: 0 56px;
}

/* Action group (chevron + new) pinned to the right edge, mirror of the X on
   the left. Absolute so it stays out of the flex flow and doesn't shift the
   centered title-group. */
.markon-chat-header-actions {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Left actions group — sits right of the X face (which occupies left:0..40),
   currently hosts the popout button. Same absolute positioning as the right
   actions so the centered title group stays balanced. */
.markon-chat-header-left-actions {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Title: plain text. shrinks with ellipsis when the workspace name is long.
   No cursor:text — renaming goes through the dedicated pencil button. */
.markon-chat-thread-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    user-select: none;
}

.markon-chat-thread-title:empty::before {
    content: attr(data-placeholder);
    opacity: 0.5;
    font-weight: 400;
}

/* Edit mode (entered via the rename pencil): contenteditable surface gets a
   soft accent background and a text cursor. */
.markon-chat-thread-title[contenteditable="true"] {
    cursor: text;
    user-select: text;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
}

/* The switcher is now a plain icon button (chevron only). Dropdown opens
   only from this explicit affordance — clicking the title text does not
   trigger it (low-frequency action, deliberate). */
.markon-chat-thread-switcher svg {
    transform: rotate(90deg);
    opacity: 0.7;
}

.markon-chat-icon-btn {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.markon-chat-icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .markon-chat-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Thread menu — absolutely-positioned dropdown anchored to the header.
   Width matches the title button so it visually flows from the chevron. */
.markon-chat-thread-menu {
    position: absolute;
    top: 100%;
    left: 48px;           /* skip the TL sphere/close button */
    right: 48px;          /* skip the [+] button on the right */
    margin-top: 4px;
    /* Pops one tier above the elevated panel surface. --markon-bg-overlay is
       canvas in light mode (white "highest" layer) and a recessed mid-tone
       in dark mode (#21262d, sits between subtle and elevated). */
    background: var(--markon-bg-overlay);
    border: 1px solid var(--markon-border-emphasis);
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    z-index: var(--markon-z-popover-inline);
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}

html[data-theme="dark"] .markon-chat-thread-menu {
    /* Dark border drops to the softer `--markon-border-default` because the strong
       value (#484f58) is too loud against the recessed overlay surface. */
    border-color: var(--markon-border-default);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.markon-chat-thread-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.markon-chat-thread-row:hover {
    background: var(--markon-bg-hover);
}

.markon-chat-thread-row.active {
    background: var(--markon-chat-accent-soft);
}

.markon-chat-thread-row-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.markon-chat-thread-row-delete {
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.4;
    padding: 2px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.markon-chat-thread-row:hover .markon-chat-thread-row-delete {
    opacity: 0.8;
}

.markon-chat-thread-row-delete:hover {
    background: rgba(220, 53, 69, 0.15);
    color: var(--markon-danger);
    opacity: 1;
}

.markon-chat-thread-empty {
    padding: 16px;
    text-align: center;
    opacity: 0.55;
    font-size: 13px;
}

/* ─── Messages wrapper / list ────────────────────────────────────────── */

/* Middle scrollable region between header and footer. `position: relative`
   anchors the floating "↓ new messages" pill below. */
.markon-chat-messages-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.markon-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.markon-chat-empty {
    text-align: center;
    opacity: 0.55;
    font-size: 13px;
    padding: 32px 16px;
}

/* Floating "↓ new messages" pill. Fixed to the bottom-center of the
   message list so the user can jump back to streaming output even while
   scrolled up. */
.markon-chat-scroll-pill {
    appearance: none;
    border: none;
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--markon-chat-accent);
    color: var(--markon-fg-on-emphasis);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    z-index: var(--markon-z-content-overlay);
}

.markon-chat-scroll-pill:hover {
    filter: brightness(1.05);
}

/* ─── Messages ───────────────────────────────────────────────────────── */

.markon-chat-message {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.markon-chat-message-user {
    align-items: flex-end;
}

.markon-chat-message-assistant,
.markon-chat-message-system {
    align-items: flex-start;
}

.markon-chat-message-body {
    max-width: 92%;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* User bubble: one tier above the panel (--markon-bg-elevated-2) so the
   message stands out from the assistant's prose-on-canvas style. */
.markon-chat-message-user .markon-chat-message-body {
    background: var(--markon-bg-elevated-2);
    color: var(--markon-fg-default);
    padding: 8px 12px;
    border-radius: 14px 14px 4px 14px;
}

/* Assistant: just text on canvas — minimal chrome so streamed output reads
   like a document, not a chat balloon. */
.markon-chat-message-assistant .markon-chat-message-body {
    padding: 0;
    background: transparent;
}

.markon-chat-text > :first-child { margin-top: 0; }
.markon-chat-text > :last-child  { margin-bottom: 0; }

.markon-chat-text p {
    margin: 0.5em 0;
}

.markon-chat-text code {
    background: rgba(135, 131, 120, 0.15);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.88em;
}

html[data-theme="dark"] .markon-chat-text code {
    background: rgba(110, 118, 129, 0.4);
}

.markon-chat-text pre {
    background: var(--markon-bg-muted);
    border: 1px solid var(--markon-border-emphasis);
    border-radius: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    font-size: 0.85em;
    line-height: 1.45;
    margin: 8px 0;
}

.markon-chat-text pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

html[data-theme="dark"] .markon-chat-text pre {
    /* GitHub-dark recesses code blocks below `subtle` (#161b22) — `#0d1117`
       (canvas in dark) reads as a deeper well against the panel. Border drops
       to `--markon-border-default` so the chrome stays understated against this
       darker fill. */
    background: var(--markon-bg-default);
    border-color: var(--markon-border-default);
}

.markon-chat-text ul,
.markon-chat-text ol {
    padding-left: 1.4em;
    margin: 0.5em 0;
}

.markon-chat-text li {
    margin: 0.2em 0;
}

.markon-chat-text a {
    color: var(--markon-chat-accent);
    text-decoration: underline;
}

/* ─── Tool calls ─────────────────────────────────────────────────────── */

.markon-chat-tool-call,
.markon-chat-tool-result {
    margin: 6px 0;
    border: 1px solid var(--markon-border-emphasis);
    border-radius: 6px;
    background: var(--markon-bg-muted);
    overflow: hidden;
}

html[data-theme="dark"] .markon-chat-tool-call,
html[data-theme="dark"] .markon-chat-tool-result {
    /* Mirrors `.markon-chat-text pre` — tool pills sink below the `subtle`
       step in dark mode for a visible "well" against the elevated panel. */
    background: var(--markon-bg-default);
    border-color: var(--markon-border-default);
}

.markon-chat-tool-call > summary,
.markon-chat-tool-result > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    user-select: none;
}

.markon-chat-tool-call > summary::-webkit-details-marker,
.markon-chat-tool-result > summary::-webkit-details-marker {
    display: none;
}

/* Rotate the chevron when the pill is open. We use a 0deg → 90deg sweep so
   the right-pointing arrow becomes a down-arrow, mirroring native disclosure
   triangles in most browsers. */
.markon-chat-tool-pill-icon {
    display: inline-flex;
    transition: transform 0.15s;
}

.markon-chat-tool-call[open] .markon-chat-tool-pill-icon,
.markon-chat-tool-result[open] .markon-chat-tool-pill-icon {
    transform: rotate(90deg);
}

.markon-chat-tool-name {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 11px;
    color: var(--markon-chat-accent);
}

.markon-chat-tool-args,
.markon-chat-tool-output {
    margin: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--markon-border-emphasis);
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow-y: auto;
}

html[data-theme="dark"] .markon-chat-tool-args,
html[data-theme="dark"] .markon-chat-tool-output {
    /* Match the parent pill's softened dark border. */
    border-top-color: var(--markon-border-default);
}

.markon-chat-tool-result-error {
    border-color: rgba(220, 53, 69, 0.5);
}

/* ─── Errors / stopped ───────────────────────────────────────────────── */

.markon-chat-error {
    margin-top: 6px;
    padding: 8px 12px;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.4);
    border-radius: 6px;
    color: #b42318;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.markon-chat-error-text {
    flex: 1;
    min-width: 0;
}

html[data-theme="dark"] .markon-chat-error {
    color: #ff8a91;
    background: rgba(220, 53, 69, 0.18);
}

.markon-chat-retry {
    appearance: none;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    min-height: 30px;
    padding: 2px 10px;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.markon-chat-retry:hover {
    background: rgba(220, 53, 69, 0.12);
    color: inherit;
}

.markon-chat-stopped {
    font-size: 11px;
    opacity: 0.55;
    margin-top: 4px;
    font-style: italic;
}

/* ─── Footer (input) ─────────────────────────────────────────────────── */

/* Footer hosts a single composite element: textarea with the send button
   absolutely pinned to its inner bottom-right corner. No top border — the
   input's own outline is the only divider, so the panel reads as "messages
   above, a free-floating input below". */
.markon-chat-footer {
    padding: 10px 12px;
    flex-shrink: 0;
}

/* Input-group — single rounded composite that hosts the optional quote chip
   on top, the textarea in the middle, and the send button anchored to its
   bottom-right. One outer border + radius so chip + textarea read as ONE
   control, not two stacked rectangles. The send button is `position:
   absolute` against this group, so its placement is unaffected by the chip's
   presence. */
.markon-chat-input-group {
    position: relative;
    border: 1px solid var(--markon-border-emphasis);
    border-radius: var(--markon-radius-lg);
    background: var(--markon-bg-default);
    color: inherit;
    overflow: hidden;       /* clips chip's tinted bg into the rounded corner */
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Lift the focus ring to the *group* so the whole composite (chip + input)
   highlights together when the textarea has focus, instead of just the
   textarea — that keeps the "single control" reading intact. */
.markon-chat-input-group:focus-within {
    border-color: var(--markon-chat-accent-border);
    box-shadow: 0 0 0 3px var(--markon-chat-accent-ring);
}

html[data-theme="dark"] .markon-chat-input-group {
    /* Dark side keeps the input border softer than `--markon-border-emphasis`
       (#484f58) — #30363d (= `--markon-border-default`) preserves the original quiet
       outline against the canvas-dark fill. */
    border-color: var(--markon-border-default);
}

/* Quote chip — appears in the upper half of the group when "聊聊" / Chat is
   clicked on a selection. Tinted background distinguishes it from the white
   textarea below: the user reads it as "context attached", not "another
   input". A 1px hairline at the bottom is the only divider — same vibe as
   GitHub's PR comment quote-reply box. */
.markon-chat-quote-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    /* padding-right tuned so the X (20×20) centers on the same vertical line
       as the send button below: X.center = group.right − padding-right − 10
       must equal send.center = group.right − send.right (10) − 13
       ⇒ padding-right = 13. Keeps the two action buttons stacked. */
    padding: 6px 13px 6px 12px;
    background: rgba(0, 0, 0, 0.035);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 11.5px;
    line-height: 1.35;
    min-width: 0;
}

.markon-chat-quote-chip[hidden] { display: none; }

html[data-theme="dark"] .markon-chat-quote-chip {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.markon-chat-quote-icon {
    position: relative;
    top: -1px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    opacity: 0.5;
}

.markon-chat-quote-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    opacity: 0.7;
}

.markon-chat-quote-dismiss {
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    padding: 0;
    transition: background-color 0.12s, opacity 0.12s;
}

.markon-chat-quote-dismiss:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .markon-chat-quote-dismiss:hover {
    background: rgba(255, 255, 255, 0.1);
}

.markon-chat-quote-dismiss svg { display: block; }

/* Textarea is borderless — the input-group owns the rounded outline. The
   `block` display kills the inline-block baseline gap that would otherwise
   throw the bottom-anchored send button off the last-line center by ~4px. */
.markon-chat-input {
    width: 100%;
    box-sizing: border-box;
    display: block;
    min-width: 0;
    resize: none;
    appearance: none;
    border: none;
    border-radius: 0;
    /* Right padding clears the 26px-wide send button + 12px gap. */
    padding: 14px 44px 14px 14px;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    background: transparent;
    color: inherit;
    max-height: 136px;       /* matches the JS-side cap (6 lines + padding). */
    outline: none;
}

/* Pinned to the input-group's inner bottom-right. The group is the absolute-
   positioning context, so this `bottom` measures against the group's bottom
   edge (the group expands to include the chip when visible, but the send
   button stays anchored to the textarea's last line either way).
   Default state is a quiet outlined glyph — no filled disc — so the input
   field reads as the dominant element and the send affordance recedes
   until a draft is actually in flight. Background only appears on hover /
   while streaming. */
.markon-chat-send {
    appearance: none;
    border: none;
    position: absolute;
    right: 10px;
    /* Anchored to the *last line* of the textarea: as the draft grows, the
       button stays vertically centered on the current bottom line. Math
       (group as reference): group border (1) + textarea padding-bottom (14)
       + half line-height (13 × 1.4 / 2 ≈ 9) − half button height (13)
       = ~11px from the group's bottom edge. */
    bottom: 11px;
    width: 26px;
    height: 26px;
    /* padding:0 + box-sizing strips the user-agent button padding; grid +
       place-items centers the icon glyph exactly on the button's geometric
       center (inline-flex through a span wrapper had baseline drift). */
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background: transparent;
    color: var(--markon-chat-accent-fg);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 0.15s, transform 0.1s;
}

/* svg block-level so the wrapping span has no baseline gap below the glyph. */
.markon-chat-send svg { display: block; }

.markon-chat-send:hover {
    background: var(--markon-chat-accent-soft);
}

.markon-chat-send:active {
    transform: scale(0.94);
}

/* Streaming: turn into a small filled stop button (red) so the action is
   unambiguous mid-stream. */
.markon-chat-send.streaming {
    background: var(--markon-danger);
    color: var(--markon-fg-on-emphasis);
}

/* ─── Mention pill (in user message bubbles) ─────────────────────────── */

/* Inline pill marking an `@<path>` mention in a sent user message. We can't
   render pills inside the textarea (textareas don't support inline markup)
   so the literal `@path` text lives in the input, and only the rendered
   bubble shows the styled chip. */
.markon-chat-mention-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 8px;
    margin: 0 1px;
    border-radius: 999px;
    background: var(--markon-chat-accent-soft);
    color: var(--markon-chat-accent);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: baseline;
}

html[data-theme="dark"] .markon-chat-mention-pill {
    background: rgba(139, 92, 246, 0.25);
    color: #c4b5fd;
}

/* ─── Mention autocomplete popup ─────────────────────────────────────── */

/* Floating list anchored to the top edge of the textarea (we open upward
   so the popup never gets clipped against the panel footer). */
.markon-chat-mention-popup {
    position: fixed;
    /* Width is set inline to match the input-group's rendered width (see
       #positionMentionPopup). No min/max here — clamping with CSS would
       fight the inline value and break the alignment in popout mode. */
    max-height: 280px;
    overflow-y: auto;
    box-sizing: border-box;
}

.markon-chat-mention-popup[hidden] {
    display: none;
}

.markon-chat-mention-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 8px;
    margin: 0 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
    /* Left-align name; right-align dir. The dir column truncates from the
       left so the most-specific (rightmost) directory stays visible. */
}

.markon-chat-mention-row:first-child {
    margin-top: 4px;
}

.markon-chat-mention-row:last-child {
    margin-bottom: 4px;
}

.markon-chat-mention-row:hover {
    background: var(--markon-bg-hover);
}

.markon-chat-mention-row.is-active {
    background: var(--markon-chat-accent-soft);
}

.markon-chat-mention-name {
    flex: 0 0 auto;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.markon-chat-mention-dir {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    opacity: 0.6;
    font-size: 11px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;            /* truncate from the *left* of the dir path */
}

/* ─── Citation pills (in assistant messages) ─────────────────────────── */

/* A citation `<code>path:42</code>` becomes a clickable pill. Distinct from
   mention pills (which are purple) — citations use the primary accent. */
.markon-chat-citation {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--markon-accent) 14%, transparent);
    color: var(--markon-accent);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: baseline;
    border: 1px solid transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.markon-chat-citation:hover {
    background: color-mix(in srgb, var(--markon-accent) 22%, transparent);
    border-color: color-mix(in srgb, var(--markon-accent) 35%, transparent);
}

/* ─── Popout window mode ─────────────────────────────────────────────── */

/* When the chat is loaded in its own browser-level window (`?chat_popout=1`),
   the chat IS the entire page — there's no markdown body, no TOC, no Live
   sphere. The page's body class flips, and rules below hide all the page
   chrome and grow the chat container to fill the viewport. The morph
   animation is bypassed (we add .expanded synchronously at boot), so the
   panel reads as a fixed full-window surface, not a floating overlay. */
body.markon-chat-popout-mode {
    margin: 0;
    overflow: hidden;
    background: var(--markon-bg-elevated);
}

/* Hide everything else but the chat surface. The mention-popup lives on
   `body` (position:fixed) so the @ autocomplete works the same in popout
   mode — exempt it explicitly. Any future body-level chat overlay must
   either be appended to .markon-chat-container or be added to this
   exclusion list. */
body.markon-chat-popout-mode > :not(.markon-chat-container):not(.markon-chat-mention-popup):not(script):not(style) {
    /* Overrides inline `element.style.display` set at runtime by managers
       like popover-manager, search-manager, note-manager — those toggle
       block/none on body-level children and an inline value beats any
       selector specificity without !important. */
    display: none !important;
}

body.markon-chat-popout-mode .markon-chat-container,
body.markon-chat-popout-mode .markon-chat-container.expanded {
    /* All declarations in this block override inline styles written by
       FloatingLayer (components/floating-layer.ts) at runtime —
       position / top / right / bottom / left / width / height /
       border-radius / transform. Inline styles beat any selector, so
       !important is the only way to force popout-mode geometry. */
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: var(--markon-bg-elevated) !important;
    box-shadow: none !important;
    /* Panel IS the window — resize the OS window, not the panel inside. */
    resize: none !important;
    /* In popout mode the container fills the OS window, so the panel-opacity
       fade (used for in-page float) would just bleed the desktop through.
       Force fully opaque. */
    opacity: 1 !important;
}

/* No floating sphere in popout mode — the panel is the window itself. The X
   close button at the TL also has no role here (closing the chat means
   closing the window). The popout button stays visible but its icon/role is
   swapped to "dock back to in-page" by initPopout().
   Specificity (0,2,1) beats `.markon-chat-container.expanded .markon-chat-face`
   (0,2,0) without !important. */
body.markon-chat-popout-mode .markon-chat-face {
    display: none;
}

/* Body always shown in popout mode (the .expanded class is set at boot, but
   guard against any timing where it isn't applied yet).
   Specificity (0,2,1) beats `.markon-chat-container.expanded .markon-chat-body`
   (0,2,0) without !important. */
body.markon-chat-popout-mode .markon-chat-body {
    display: flex;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Header has no X face to clear in popout mode — pull the left actions group
   back to the edge (and currently the popout button is hidden, so this just
   keeps the header symmetric if other left-side controls are added later). */
body.markon-chat-popout-mode .markon-chat-header-left-actions {
    left: 6px;
}

/* No popout header override is needed: the title centering math assumes a
   40px-wide X face on the left, and with the face hidden the title stays
   visually centered against the full window width. */

/* ─── edit_file pending-confirmation flow ─────────────────────────────────
   Two surfaces work together:
   1. `.markon-chat-edit-pending` — diff card rendered inline in the message
      stream. Shows path, line, old → new, and a status pill that flips when
      the user resolves the proposal.
   2. `.markon-chat-edit-bar` — bottom-row bar that *replaces* the textarea
      input group while at least one edit is pending. Apply / Reject map to
      the same backend endpoints as the card; Enter/Esc keybindings live on
      the panel-level keydown handler. */
.markon-chat-edit-pending {
    margin: 6px 0;
    border: 1px solid var(--markon-chat-border, rgba(0, 0, 0, 0.12));
    border-left: 3px solid var(--markon-warning);
    border-radius: 6px;
    background: color-mix(in srgb, var(--markon-warning) 10%, transparent);
    overflow: hidden;
    font-size: 13px;
}
.markon-chat-edit-pending[data-status="applied"]  { border-left-color: var(--markon-chat-applied); background: color-mix(in srgb, var(--markon-chat-applied) 8%, transparent); }
.markon-chat-edit-pending[data-status="rejected"] { border-left-color: var(--markon-chat-neutral); background: color-mix(in srgb, var(--markon-chat-neutral) 8%, transparent); opacity: 0.7; }
.markon-chat-edit-pending[data-status="drifted"]  { border-left-color: var(--markon-warning); background: color-mix(in srgb, var(--markon-warning) 14%, transparent); }
.markon-chat-edit-pending[data-status="reverted"] { border-left-color: var(--markon-chat-neutral); background: color-mix(in srgb, var(--markon-chat-neutral) 5%, transparent); opacity: 0.6; }
.markon-chat-edit-pending[data-status="reverted"] .markon-chat-edit-pending-old,
.markon-chat-edit-pending[data-status="reverted"] .markon-chat-edit-pending-new {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--markon-chat-neutral) 50%, transparent);
}

.markon-chat-edit-pending-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--markon-chat-border, rgba(0, 0, 0, 0.08));
    font-weight: 500;
}
.markon-chat-edit-pending-path { font-family: var(--markon-mono, monospace); font-size: 12px; }
.markon-chat-edit-pending-status {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--markon-warning);
}
.markon-chat-edit-pending[data-status="applied"]  .markon-chat-edit-pending-status { color: var(--markon-chat-applied-fg); }
.markon-chat-edit-pending[data-status="rejected"] .markon-chat-edit-pending-status { color: var(--markon-chat-neutral-fg); }
.markon-chat-edit-pending[data-status="drifted"]  .markon-chat-edit-pending-status { color: var(--markon-warning); }
.markon-chat-edit-pending[data-status="reverted"] .markon-chat-edit-pending-status { color: var(--markon-chat-neutral-fg); }

.markon-chat-edit-pending-head-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.markon-chat-edit-pending-undo {
    background: transparent;
    border: 1px solid var(--markon-chat-border, rgba(0, 0, 0, 0.15));
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--markon-chat-text, inherit);
    cursor: pointer;
    line-height: 1.4;
}
.markon-chat-edit-pending-undo:hover { background: var(--markon-bg-hover); }

.markon-chat-edit-pending-diff {
    font-family: var(--markon-mono, monospace);
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.markon-chat-edit-pending-old,
.markon-chat-edit-pending-new {
    padding: 4px 10px;
}
.markon-chat-edit-pending-old {
    background: var(--markon-chat-diff-del-bg);
    color: var(--markon-chat-diff-del-fg);
    text-decoration: line-through;
    text-decoration-color: var(--markon-chat-diff-del-strike);
}
.markon-chat-edit-pending-new {
    background: var(--markon-chat-diff-add-bg);
    color: var(--markon-chat-diff-add-fg);
}

/* Bottom bar — appears in place of `.markon-chat-input-group` whenever the
   pending-edit queue is non-empty. Matches the input group's height so the
   panel footer doesn't jump. */
.markon-chat-edit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    min-height: 44px;
    border: 1px solid var(--markon-chat-border, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--markon-chat-bg, rgba(0, 0, 0, 0.02));
    font-size: 13px;
}
/* `display: flex` above would otherwise beat the UA `[hidden]` rule and keep
   the bar visible with no pending edit — restore the hidden behaviour. */
.markon-chat-edit-bar[hidden] { display: none; }
html[data-theme="dark"] .markon-chat-edit-bar {
    background: rgba(255, 255, 255, 0.04);
}
.markon-chat-edit-bar-label {
    font-family: var(--markon-mono, monospace);
    font-size: 12px;
    color: var(--markon-chat-text-muted, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.markon-chat-edit-bar-buttons { display: flex; gap: 6px; flex: 0 0 auto; }
.markon-chat-edit-bar-buttons button {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--markon-chat-border, rgba(0, 0, 0, 0.15));
    cursor: pointer;
}
.markon-chat-edit-bar-reject {
    background: transparent;
    color: var(--markon-chat-text, inherit);
}
.markon-chat-edit-bar-reject:hover { background: rgba(0, 0, 0, 0.04); }
html[data-theme="dark"] .markon-chat-edit-bar-reject:hover { background: rgba(255, 255, 255, 0.06); }
.markon-chat-edit-bar-apply {
    background: var(--markon-chat-applied);
    color: var(--markon-fg-on-emphasis);
    border-color: var(--markon-chat-applied-strong);
}
.markon-chat-edit-bar-apply:hover { background: var(--markon-chat-applied-strong); }