/* AgentJobWorkspace structural styles.
   Ported from the production BPMN AI run page (BpmnAiInvestigationRun.razor.css) so
   the reusable component matches production pixel-for-pixel. All colors come from the
   shared design tokens (--ant-*, --gray-*, --text-*, --bg-*, --border, --radius*,
   --shadow*, --font-*). The COMPONENT ships this layout; the HOST ships a stylesheet
   that DEFINES those token values - re-theme by supplying different values, no code
   change. Plain (non-scoped) so the markdown rules also apply to MarkupString HTML.
   Host links it via _content/mindzie.Agent.Components/agentJobWorkspace.css */

.ajw-root {
    display: flex;
    gap: 16px;
    height: 100%;
    min-height: 0;
    /* Fill the host container on BOTH axes whether the host wraps the component
       in a block (width fills via auto) or a flex parent (row or column). As the
       lone child of a flex-row host the component must grow to the full width;
       without flex-grow it would shrink to its content and leave the rest of the
       row blank. */
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    color: var(--text-primary, #0F1024);
    font-family: var(--font-sans, "Inter", sans-serif);
    background: var(--bg-layout, #F5F6FB);
    font-size: 14px;
    /* Bug #7789 - lay out against the COMPONENT's own width, not the viewport.
       This component renders inside hosts that consume width before it (the BPM
       Studio sider is ~250px), so a viewport media query fires at the wrong
       moment: there is a band where the component is already too narrow to hold
       its rigid columns - they clip under overflow-x: hidden - while the viewport
       is still wide enough that a viewport breakpoint never triggers. Making the
       root a container lets the narrow-layout rules below key off how much room
       the workspace ACTUALLY has, so the fix holds at any resolution, DPI scaling
       or host chrome. flex-wrap + align-content let the regions drop into a
       vertical stack (each forced to full width below the threshold) and
       overflow-y exposes that taller stack by scrolling the component itself -
       never depending on the host to allow vertical overflow (the BPM host clips
       with overflow: hidden). */
    container-type: inline-size;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
}

.ajw-root *, .ajw-root *::before, .ajw-root *::after { box-sizing: border-box; }

.ajw-chat,
.ajw-workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-container, #FFFFFF);
    border: 1px solid var(--border-secondary, #E7E9F4);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-1, 0 1px 2px rgba(15,16,36,0.05));
    overflow: hidden;
}

.ajw-chat {
    flex: 0 0 380px;
    min-width: 320px;
    /* Chat zoom (Bug #7544): the rail slides open/closed by animating its flex basis. */
    transition: flex-basis 0.25s ease;
}
.ajw-workspace { flex: 1; min-width: 0; }

/* Zoomed: double the rail's width. The cap is a PERCENTAGE of the flex container (not
   the viewport) so hosts with side navigation still keep their files + preview panes
   usable, and shrink is allowed (unlike the resting rule) so the zoomed rail yields
   space back on narrow layouts instead of crushing the workspace. The double selector
   outranks the media-query flex-basis below. */
.ajw-chat.ajw-chat-zoomed { flex: 0 1 min(760px, 55%); }

/* While zoomed, bump the message text a notch for readability - the point of the zoom. */
.ajw-chat-zoomed .ajw-bubble { font-size: 15px; }

/* ---- pane head + status badge ---- */

.ajw-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-secondary, #E7E9F4);
}

.ajw-pane-head-label {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary, #6E7193);
}

.ajw-status {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    text-transform: lowercase;
    border: 1px solid transparent;
}

.ajw-status-active { color: var(--ant-success, #1F8A5B); background: var(--ant-success-bg, #E5F2EC); border-color: var(--ant-success-border, #BFE3CF); }
.ajw-status-starting { color: var(--ant-primary-active, #5834D6); background: var(--ant-primary-bg, #F1ECFF); border-color: var(--ant-primary-border, #CBB6FF); }
.ajw-status-error { color: var(--ant-error, #C9485A); background: var(--ant-error-bg, #F8E7EA); border-color: var(--ant-error-border, #EFC3CB); }
.ajw-status-inactive { color: var(--gray-7, #9396B5); background: var(--gray-3, #EEF0FA); border-color: var(--gray-5, #E0E3F0); }

/* "Email me when ready" toggle in the conversation header */
.ajw-email-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary, #6E7193);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.ajw-email-toggle input { cursor: pointer; margin: 0; accent-color: var(--ant-primary, #7C5CFF); }
.ajw-email-toggle-on { color: var(--ant-primary, #7C5CFF); font-weight: 600; }
/* Locked: the email is promised for an in-flight run and cannot be turned off. */
.ajw-email-toggle-locked, .ajw-email-toggle-locked input { cursor: not-allowed; }

/* ---- chat stream ---- */

.ajw-stream {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.ajw-empty {
    font-size: 13px;
    color: var(--text-tertiary, #6E7193);
    line-height: 1.6;
}

.ajw-empty-center { margin: auto; text-align: center; max-width: 280px; }

/* ---- example starter prompts ---- */

.ajw-examples { display: flex; flex-direction: column; gap: 8px; }

.ajw-example {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border-radius: var(--radius, 9px);
    border: 1px solid var(--border-secondary, #E7E9F4);
    background: var(--gray-2, #FBFBFE);
    cursor: pointer;
}
.ajw-example:hover { border-color: var(--ant-primary-border, #CBB6FF); background: var(--ant-primary-bg, #F1ECFF); }
.ajw-example-title { font-size: 13px; font-weight: 600; color: var(--text-primary, #0F1024); }
.ajw-example-prompt { font-size: 12px; color: var(--text-tertiary, #6E7193); }

/* ---- message bubbles ---- */

.ajw-msgrow { display: flex; }
.ajw-msgrow-user { justify-content: flex-end; }
.ajw-msgrow-assistant { justify-content: flex-start; }

.ajw-bubble {
    max-width: 86%;
    font-size: 14px;
    line-height: 1.55;
    padding: 9px 13px;
    border-radius: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* The user bubble has its own override pair so a host whose design language uses a
   non-primary bubble (BPM Studio v10: ink/navy bubble, cyan buttons) can theme it
   without recoloring every primary control. Defaults preserve the existing look. */
.ajw-bubble-user {
    color: var(--ajw-bubble-user-text, #ffffff);
    background: var(--ajw-bubble-user-bg, var(--ant-primary, #7C5CFF));
    border-bottom-right-radius: 4px;
}

.ajw-bubble-assistant {
    color: var(--text-primary, #0F1024);
    background: var(--gray-3, #EEF0FA);
    border-bottom-left-radius: 4px;
}

.ajw-bubble-meta {
    margin-top: 5px;
    font-size: 11px;
    color: var(--text-tertiary, #6E7193);
    font-family: var(--font-mono, monospace);
}

/* ---- completed activity rows ---- */

.ajw-activity {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--radius, 9px);
    border: 1px dashed var(--border-secondary, #E7E9F4);
    background: var(--gray-2, #FBFBFE);
}

.ajw-activity-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    flex-shrink: 0;
    border-radius: 6px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    background: var(--accent-display-bg, #F1ECFF);
    color: var(--accent-display, #7C5CFF);
}

.ajw-activity-text { font-weight: 600; color: var(--text-primary, #0F1024); }
.ajw-activity-detail { font-size: 12px; color: var(--text-tertiary, #6E7193); font-variant-numeric: tabular-nums; margin-left: auto; }

/* ---- live "working" / "starting" indicators ---- */

.ajw-working {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius, 9px);
    border: 1px solid var(--accent-display-border, #CBB6FF);
    background: var(--accent-display-bg, #F1ECFF);
}

.ajw-working-dots {
    display: inline-flex;
    gap: 5px;
    flex-shrink: 0;
    padding-top: 6px;
}

.ajw-working-dots span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-display, #7C5CFF);
    animation: ajw-pulse 1.2s ease-in-out infinite;
}
.ajw-working-dots span:nth-child(2) { animation-delay: 0.2s; }
.ajw-working-dots span:nth-child(3) { animation-delay: 0.4s; }

.ajw-working-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ajw-working-title { font-size: 13px; font-weight: 600; color: var(--text-primary, #0F1024); }
.ajw-working-stage { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.ajw-working-stage-text { color: var(--accent-display, #7C5CFF); font-weight: 500; }
.ajw-working-elapsed { font-size: 11px; color: var(--text-tertiary, #6E7193); font-variant-numeric: tabular-nums; }

@keyframes ajw-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

/* The "waking up" startup indicator: blue/primary variant, distinct from the working one. */
.ajw-working-starting {
    border-color: var(--ant-primary-border, #CBB6FF);
    background: var(--ant-primary-bg, #F1ECFF);
}
.ajw-working-starting .ajw-working-dots span { background: var(--ant-primary, #7C5CFF); }
.ajw-working-starting .ajw-working-stage-text { color: var(--ant-primary-active, #5834D6); }

/* ---- inline error feedback + retry ---- */

.ajw-feedback {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: var(--radius, 9px);
    border: 1px solid var(--ant-error-border, #EFC3CB);
    background: var(--ant-error-bg, #F8E7EA);
    font-size: 13px;
}

.ajw-feedback-head { display: flex; align-items: flex-start; gap: 8px; }

.ajw-feedback-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex-shrink: 0;
    border-radius: 50%;
    font-weight: 700; font-size: 12px; line-height: 1;
    color: #ffffff;
    background: var(--ant-error, #C9485A);
}

.ajw-feedback-text { color: var(--ant-error, #C9485A); }
.ajw-feedback-actions { display: flex; justify-content: flex-end; }

.ajw-retry {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: var(--ant-error, #C9485A);
    border: none;
    border-radius: var(--radius, 9px);
    padding: 5px 14px;
    cursor: pointer;
}
.ajw-retry:hover { filter: brightness(0.95); }

/* ---- Activity Log rail (component feature; OPEN by default, #7639) ---- */

.ajw-pane-head-left { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ajw-pane-head-actions { display: inline-flex; align-items: center; gap: 8px; }

/* Chat zoom toggle (Bug #7544): icon button in the pane head; chevrons point out
   when the rail can grow and back in when it is zoomed. */
.ajw-zoom-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border, #E0E3F0);
    background: var(--bg-container, #FFFFFF);
    color: var(--text-tertiary, #6E7193);
    cursor: pointer;
}
.ajw-zoom-toggle:hover { border-color: var(--ant-primary-border, #CBB6FF); color: var(--ant-primary-active, #5834D6); }
.ajw-zoom-toggle-on {
    background: var(--ant-primary-bg, #F1ECFF);
    border-color: var(--ant-primary-border, #CBB6FF);
    color: var(--ant-primary-active, #5834D6);
}

/* Collapsed Activity strip (#7639): a slim, always-visible edge affordance that
   re-expands the panel - the panel collapses, it never disappears. */
.ajw-actlog-collapsed {
    flex: 0 0 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 0;
    border-radius: var(--radius, 10px);
    border: 1px solid var(--border-secondary, #E7E9F4);
    background: var(--bg-container, #FFFFFF);
    color: var(--text-tertiary, #6E7193);
    cursor: pointer;
}
.ajw-actlog-collapsed:hover { border-color: var(--ant-primary-border, #CBB6FF); color: var(--ant-primary-active, #5834D6); }
.ajw-actlog-collapsed-label {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.ajw-actlog {
    flex: 0 0 300px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-container, #FFFFFF);
    border: 1px solid var(--border-secondary, #E7E9F4);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-1, 0 1px 2px rgba(15,16,36,0.05));
}

.ajw-actlog-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-secondary, #E7E9F4);
}
.ajw-actlog-title {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary, #6E7193);
}
.ajw-actlog-tabs { display: inline-flex; gap: 4px; }
.ajw-actlog-tab {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border, #E0E3F0);
    background: var(--bg-container, #FFFFFF);
    color: var(--text-secondary, #4F5274);
    cursor: pointer;
}
.ajw-actlog-tab.on {
    background: var(--ant-primary-bg, #F1ECFF);
    border-color: var(--ant-primary-border, #CBB6FF);
    color: var(--ant-primary-active, #5834D6);
}
/* The panel's own collapse control (#7639) - same icon-button look as the chat
   zoom toggle so the two panel affordances read as one family. */
.ajw-actlog-collapse {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border, #E0E3F0);
    background: var(--bg-container, #FFFFFF);
    color: var(--text-tertiary, #6E7193);
    cursor: pointer;
}
.ajw-actlog-collapse:hover { border-color: var(--ant-primary-border, #CBB6FF); color: var(--ant-primary-active, #5834D6); }

.ajw-actlog-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 0; }
.ajw-actlog-empty { padding: 10px 14px; }

.ajw-actlog-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 4px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    border-bottom: 1px solid var(--gray-3, #EEF0FA);
}
.ajw-actlog-ico {
    flex-shrink: 0;
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    color: var(--accent-display, #7C5CFF);
}
.ajw-actlog-label { color: var(--text-primary, #0F1024); font-weight: 500; }
.ajw-actlog-detail { margin-left: auto; font-size: 11px; color: var(--text-tertiary, #6E7193); }

/* Events tab (DebugMode): the raw SSE feed, monospace + per-kind accents. */
.ajw-actlog-time {
    flex: 0 0 auto;
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    color: var(--text-quaternary, #9396B5);
}
.ajw-actlog-ev {
    flex: 0 0 86px;
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-secondary, #4F5274);
}
.ajw-actlog-data {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    color: var(--text-secondary, #4F5274);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ajw-ev-delta .ajw-actlog-ev { color: var(--text-primary, #0F1024); }
.ajw-ev-activity .ajw-actlog-ev { color: var(--ant-primary-active, #5834D6); }
.ajw-ev-heartbeat .ajw-actlog-ev { color: var(--text-tertiary, #6E7193); }
.ajw-ev-done .ajw-actlog-ev { color: var(--ant-success, #1F8A5B); }
.ajw-ev-busy .ajw-actlog-ev, .ajw-ev-idle .ajw-actlog-ev { color: var(--ant-warning, #C98520); }
.ajw-ev-error { background: var(--ant-error-bg, #F8E7EA); }
.ajw-ev-error .ajw-actlog-ev, .ajw-ev-cancelled .ajw-actlog-ev { color: var(--ant-error, #C9485A); }
.ajw-ev-ready .ajw-actlog-ev, .ajw-ev-other .ajw-actlog-ev { color: var(--text-tertiary, #6E7193); }

@media (max-width: 1400px) {
    .ajw-actlog { flex-basis: 260px; }
}

/* ---- liveness banner (PBI #7800) - restored-run "may be stuck" / "result exists but
   still running" notice. Warning tone only; never an error/crash style. ---- */

.ajw-liveness {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 14px 0;
    padding: 10px 12px;
    border-radius: var(--radius, 9px);
    border: 1px solid var(--ant-warning-border, #F0D9A8);
    background: var(--ant-warning-bg, #FBF2E0);
    font-size: 13px;
}
.ajw-liveness-anomaly {
    border-color: var(--ant-primary-border, #CBB6FF);
    background: var(--ant-primary-bg, #F1ECFF);
}
.ajw-liveness-ico {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    color: var(--ant-warning, #C98520);
    background: var(--bg-container, #FFFFFF);
}
.ajw-liveness-anomaly .ajw-liveness-ico { color: var(--ant-primary, #7C5CFF); }
.ajw-liveness-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ajw-liveness-title { font-weight: 600; color: var(--text-primary, #0F1024); }
.ajw-liveness-text { color: var(--text-secondary, #4A4D6B); }

/* ---- live status strip (pinned above the composer) ---- */

.ajw-statusbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-top: 1px solid var(--border-secondary, #E7E9F4);
    font-size: 13px;
    min-height: 40px;
}
.ajw-statusbar-working { background: var(--accent-display-bg, #F1ECFF); }
.ajw-statusbar-starting { background: var(--ant-primary-bg, #F1ECFF); }
.ajw-statusbar-error { background: var(--ant-error-bg, #F8E7EA); }

.ajw-statusbar-dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.ajw-statusbar-dots span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-display, #7C5CFF);
    animation: ajw-pulse 1.2s ease-in-out infinite;
}
.ajw-statusbar-dots span:nth-child(2) { animation-delay: 0.2s; }
.ajw-statusbar-dots span:nth-child(3) { animation-delay: 0.4s; }
.ajw-statusbar-starting .ajw-statusbar-dots span { background: var(--ant-primary, #7C5CFF); }

.ajw-statusbar-text {
    flex: 1;
    min-width: 0;
    color: var(--text-primary, #0F1024);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ajw-statusbar-working .ajw-statusbar-text { color: var(--accent-display, #7C5CFF); }
.ajw-statusbar-error .ajw-statusbar-text { color: var(--ant-error, #C9485A); font-weight: 600; }

.ajw-statusbar-elapsed {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-tertiary, #6E7193);
    font-variant-numeric: tabular-nums;
}

.ajw-statusbar-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    color: #ffffff;
    background: var(--ant-error, #C9485A);
}

.ajw-statusbar-btn {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm, 6px);
    padding: 5px 13px;
    cursor: pointer;
    color: #ffffff;
}
.ajw-statusbar-stop { background: var(--danger, #E03131); }
.ajw-statusbar-stop:hover { background: var(--danger-hover, #C92A2A); }
.ajw-statusbar-retry { background: var(--ant-error, #C9485A); }
.ajw-statusbar-retry:hover { filter: brightness(0.95); }

/* ---- composer ---- */

.ajw-composer {
    border-top: 1px solid var(--border-secondary, #E7E9F4);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ajw-textarea {
    width: 100%;
    resize: none;
    font-size: 14px;
    font-family: var(--font-sans, "Inter", sans-serif);
    color: var(--text-primary, #0F1024);
    border: 1px solid var(--border, #E0E3F0);
    border-radius: var(--radius, 9px);
    padding: 9px 11px;
    outline: none;
    line-height: 1.5;
}
.ajw-textarea:focus {
    border-color: var(--ant-primary, #7C5CFF);
    box-shadow: var(--ring, 0 0 0 3px rgba(124,92,255,0.22));
}
.ajw-textarea:disabled { background: var(--gray-3, #EEF0FA); cursor: not-allowed; }

.ajw-composer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Left group: the dictate button (when the host wires it). */
.ajw-composer-left { display: flex; align-items: center; gap: 10px; }
/* Dictate matches the green the dictation dialog itself uses for Insert. */
.ajw-btn-dictate { color: #ffffff; background: var(--success, #16A34A); }
.ajw-btn-dictate:hover:not(:disabled) { background: var(--success-hover, #15803D); }

/* ---- buttons ---- */

.ajw-btn {
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius, 9px);
    padding: 7px 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ajw-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.ajw-btn-primary { color: #ffffff; background: var(--ant-primary, #7C5CFF); }
.ajw-btn-primary:hover:not(:disabled) { background: var(--ant-primary-hover, #6A45F2); }
.ajw-btn-stop { color: #ffffff; background: var(--danger, #E03131); margin-right: 8px; }
.ajw-btn-stop:hover:not(:disabled) { background: var(--danger-hover, #C92A2A); }
.ajw-btn-ghost { color: var(--text-secondary, #4F5274); background: var(--bg-container, #FFFFFF); border-color: var(--border, #E0E3F0); }
.ajw-btn-ghost:hover:not(:disabled) { background: var(--gray-2, #FBFBFE); border-color: var(--ant-primary-border, #CBB6FF); }

/* ---- files + preview split ---- */

.ajw-ws-split { flex: 1; min-height: 0; display: flex; }

/* Files browser is the primary pane (Bug #7570): it takes a generous share of the
   workspace so file names read in full, while the preview keeps the larger half.
   Proportional (not fixed) so wide screens give both panes room. */
.ajw-files {
    flex: 1 1 42%;
    min-width: 260px;
    max-width: 560px;
    border-right: 1px solid var(--border-secondary, #E7E9F4);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ajw-files-scroll { flex: 1; overflow-y: auto; padding: 8px; min-height: 0; }

.ajw-file-group { margin-bottom: 14px; }

.ajw-file-group-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; }

.ajw-file-group-label {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-quaternary, #9396B5);
    padding: 6px 8px;
}
.ajw-file-group-head .ajw-file-group-label { padding: 0; }

/* The MindzieFileUpload host area inside the Inputs group: maps the uploader's
   --mzu-* theme variables onto this workspace's host tokens so the trigger button
   and per-file progress rows match the rail's look. */
.ajw-uploader {
    margin: 2px 8px 8px 8px;
    --mzu-font: inherit;
    --mzu-accent: var(--ant-primary, #7C5CFF);
    --mzu-text: var(--text-primary, #23263B);
    --mzu-muted: var(--text-tertiary, #6E7193);
    --mzu-border: var(--border-secondary, #E7E9F4);
    --mzu-item-bg: var(--gray-2, #FBFBFE);
    --mzu-bg-active: var(--ant-primary-bg, #F1ECFF);
    --mzu-btn-bg: transparent;
    --mzu-btn-bg-hover: var(--ant-primary-bg, #F1ECFF);
    --mzu-btn-text: var(--ant-primary, #7C5CFF);
    --mzu-btn-padding: 2px 6px;
    --mzu-btn-font-size: 11px;
    --mzu-error: var(--ant-error, #E5484D);
    --mzu-error-bg: var(--ant-error-bg, #FFF1F0);
    --mzu-error-border: var(--ant-error-border, #FFCCC7);
    --mzu-success: var(--ant-success, #30A46C);
    --mzu-bar-bg: var(--border-secondary, #E7E9F4);
    --mzu-radius: var(--radius-sm, 6px);
}

.ajw-file-empty { padding: 2px 8px 6px 8px; line-height: 1.5; }

.ajw-file {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    border-radius: var(--radius, 9px);
    border: 1px solid transparent;
    background: transparent;
}
.ajw-file:hover { background: var(--gray-2, #FBFBFE); }

/* The clickable select area fills the row; the delete button sits beside it. The row
   itself is the flex container so a button is never nested inside another button. */
.ajw-file-select {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 8px;
    border: none;
    background: transparent;
    border-radius: var(--radius, 9px);
    cursor: pointer;
}

.ajw-file-delete,
.ajw-file-action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-quaternary, #9396B5);
    cursor: pointer;
}
.ajw-file-delete { margin-right: 6px; }
.ajw-file-action { margin-right: 2px; }
.ajw-file-delete:hover {
    background: var(--ant-error-bg, #FFF1F0);
    color: var(--ant-error, #E5484D);
}
.ajw-file-action:hover {
    background: var(--ant-primary-bg, #F1ECFF);
    color: var(--ant-primary, #7C5CFF);
}

.ajw-file-active {
    background: var(--ant-primary-bg, #F1ECFF);
    border-color: var(--ant-primary-border, #CBB6FF);
    box-shadow: inset 2px 0 0 0 var(--accent-display, #7C5CFF);
}
.ajw-file-active:hover { background: var(--ant-primary-bg, #F1ECFF); }

.ajw-file-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: 6px;
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.ajw-file-ico-input { background: var(--gray-4, #E7E9F4); color: var(--text-secondary, #4F5274); }
.ajw-file-ico-diagram { background: var(--accent-display-bg, #F1ECFF); color: var(--accent-display, #7C5CFF); }
.ajw-file-ico-report { background: var(--accent-display-bg, #F1ECFF); color: var(--accent-display, #7C5CFF); }
.ajw-file-ico-image { background: var(--ant-primary-bg, #F1ECFF); color: var(--ant-primary-active, #5834D6); }

.ajw-file-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
/* File names wrap instead of truncating (Bug #7562) so long generated names
   ("credit_risk_assessment.original.bpmn") stay fully readable in the list. */
.ajw-file-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #0F1024);
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.ajw-file-subrow { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ajw-file-sub { font-size: 11px; color: var(--text-tertiary, #6E7193); flex-shrink: 0; }
.ajw-file-time { font-size: 11px; color: var(--text-quaternary, #9396B5); flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* PBI #7572 slice B: non-normal output state ("failed", "not captured") - the
   reason rides the title attribute as a tooltip. */
.ajw-file-state {
    font-size: 10px;
    font-weight: 600;
    color: var(--danger-color, #C0392B);
    background: var(--danger-bg, rgba(192, 57, 43, 0.08));
    border-radius: 8px;
    padding: 1px 7px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Deliverables (promoted reports/diagrams) carry a primary accent; plain
   produced files sit quieter below them in the sorted rail. */
.ajw-file-deliverable { border-left: 3px solid var(--primary, #7C5CFF); }

/* ---- preview ---- */

.ajw-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }

.ajw-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wrap rather than clip when the preview pane is narrow (high-DPI / laptop
       screens, Bug #7789): the action buttons drop to a second row instead of
       being pushed off the right edge under the host's overflow-x: hidden. */
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-secondary, #E7E9F4);
}
.ajw-preview-head-left { display: flex; align-items: center; min-width: 0; }
.ajw-preview-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }

.ajw-preview-kind {
    font-family: var(--font-display, "Inter", sans-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #0F1024);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ajw-tabs {
    display: inline-flex;
    gap: 2px;
    background: var(--gray-3, #EEF0FA);
    border-radius: var(--radius, 9px);
    padding: 2px;
}
.ajw-tab {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #4F5274);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 6px);
    padding: 5px 14px;
    cursor: pointer;
}
.ajw-tab-active {
    color: var(--text-primary, #0F1024);
    background: var(--bg-container, #FFFFFF);
    box-shadow: var(--shadow-1, 0 1px 2px rgba(15,16,36,0.05));
}

.ajw-preview-body { flex: 1; min-height: 0; display: flex; position: relative; }
.ajw-preview-host { flex: 1; min-height: 0; display: flex; overflow: auto; }

.ajw-xml {
    flex: 1;
    margin: 0;
    overflow: auto;
    padding: 14px;
    font-size: 12px;
    line-height: 1.5;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    color: var(--text-secondary, #4F5274);
    background: var(--gray-2, #FBFBFE);
    white-space: pre;
}

.ajw-preview-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-secondary, #E7E9F4);
    background: var(--gray-2, #FBFBFE);
}

/* ---- full-screen preview overlay ---- */
.ajw-fs-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    padding: 24px;
    background: rgba(15, 16, 36, 0.55);
    outline: none;
}
.ajw-fs-card {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-container, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-3, 0 16px 48px rgba(15, 16, 36, 0.25));
    overflow: hidden;
}
.ajw-fs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-secondary, #E7E9F4);
    background: var(--gray-2, #FBFBFE);
}
.ajw-fs-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ajw-fs-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ajw-fs-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #0F1024);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ajw-fs-body { flex: 1; min-height: 0; display: flex; position: relative; }
.ajw-preview-meta-name { font-size: 13px; font-weight: 600; color: var(--text-primary, #0F1024); }
.ajw-preview-meta-sub { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-tertiary, #6E7193); }

/* ---- responsive ---- */
@media (max-width: 1200px) {
    .ajw-chat { flex-basis: 320px; min-width: 280px; }
    /* Narrow viewports flip the priority back: a compact files rail beats a
       crushed diagram/report preview. */
    .ajw-files { flex: 0 0 240px; min-width: 220px; }
}

/* ---- narrow / high-DPI laptop layout (Bug #7789) ----
   When the component's OWN width (not the viewport - see the container-type on
   .ajw-root above) drops below the point where the rigid columns (chat ~320 +
   files 240 + preview + activity 300) plus their gaps still leave the preview a
   usable width, the workspace stops being a single non-shrinking row and becomes
   a vertical stack: the conversation rail, the files+preview workspace, and the
   activity rail each take the full width and flow down the component, which the
   root's own overflow-y exposes by scrolling. Every action button (Send, the
   preview actions at the top of the preview pane, the activity controls) is
   therefore always reachable, at any resolution or DPI scaling - which the old
   viewport breakpoint could not guarantee because the host sider offset the
   component's real width from the viewport width.

   1200px is the component width below which the rigid row (chat 380 + files 240 +
   activity 260 + gaps) would crush the preview under ~280px; below it we stack so
   the preview and its action buttons keep a usable width. This covers the common
   real case James hits - a high-DPI Surface at 200% leaves the component ~1080px
   after the BPM sider, which now stacks cleanly instead of squeezing the preview
   to a sliver. Each stacked region keeps a sensible min-height so its own buttons
   stay visible without forcing an extra inner scrollbar. */
@container (max-width: 1200px) {
    .ajw-chat,
    .ajw-chat.ajw-chat-zoomed,
    .ajw-workspace,
    .ajw-actlog {
        /* Full width forces each region onto its own wrapped line (the root is a
           flex-wrap row), i.e. a vertical stack. No horizontal shrink/grow games. */
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    /* Give the conversation and workspace usable height in the stack so the
       composer (Send) and the preview action row are visible within each block,
       not crushed to a sliver. The activity rail sizes to its content. */
    .ajw-chat { min-height: 460px; }
    .ajw-workspace { min-height: 520px; }

    .ajw-actlog {
        /* In the stack the activity rail is a bounded, self-scrolling block
           rather than a full-height column. */
        max-height: 320px;
    }

    /* The collapsed Activity strip is a horizontal bar at the foot of the stack
       (vertical writing-mode would be wrong once it is full width). */
    .ajw-actlog-collapsed {
        flex: 0 0 auto;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        padding: 8px 0;
    }
    .ajw-actlog-collapsed-label { writing-mode: horizontal-tb; }

    /* Inside the workspace, keep files + preview side by side but let the files
       rail give up more room so the preview (and its wrapped action buttons)
       stays usable on the narrower stacked width. */
    .ajw-files { flex: 0 0 220px; min-width: 200px; max-width: 280px; }
}

/* ---- rendered markdown (shared mindzie.Markdown output, injected as MarkupString) ---- */
.ajw-md > :first-child { margin-top: 0; }
.ajw-md > :last-child { margin-bottom: 0; }
.ajw-md h1, .ajw-md h2, .ajw-md h3, .ajw-md h4 { margin: 10px 0 6px; line-height: 1.3; }
.ajw-md h1 { font-size: 17px; }
.ajw-md h2 { font-size: 15px; }
.ajw-md h3 { font-size: 14px; }
.ajw-md p { margin: 6px 0; }
.ajw-md ul, .ajw-md ol { margin: 6px 0; padding-left: 20px; }
.ajw-md li { margin: 2px 0; }
.ajw-md code { background: var(--gray-3, #EEF0FA); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono, monospace); font-size: 12px; }
.ajw-md pre { background: var(--gray-2, #FBFBFE); border: 1px solid var(--border-secondary, #E7E9F4); border-radius: 6px; padding: 10px; overflow-x: auto; margin: 8px 0; }
.ajw-md pre code { background: transparent; padding: 0; }
.ajw-md table { border-collapse: collapse; margin: 8px 0; width: 100%; }
.ajw-md th, .ajw-md td { border: 1px solid var(--border-secondary, #E7E9F4); padding: 4px 8px; text-align: left; }
.ajw-md blockquote { border-left: 3px solid var(--border, #E0E3F0); margin: 6px 0; padding-left: 10px; color: var(--text-secondary, #4F5274); }
.ajw-md a { color: var(--ant-primary, #7C5CFF); }