/* 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;
}

.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); }

/* ---- 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;
}

.ajw-bubble-user {
    color: #ffffff;
    background: 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, toggled on/off) ---- */

.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);
}

.ajw-actlog-toggle {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--border, #E0E3F0);
    background: var(--bg-container, #FFFFFF);
    color: var(--text-tertiary, #6E7193);
    cursor: pointer;
}
.ajw-actlog-toggle:hover { border-color: var(--ant-primary-border, #CBB6FF); color: var(--ant-primary-active, #5834D6); }
.ajw-actlog-toggle-on {
    background: var(--ant-primary-bg, #F1ECFF);
    border-color: var(--ant-primary-border, #CBB6FF);
    color: var(--ant-primary-active, #5834D6);
}

.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);
}
.ajw-actlog-close {
    margin-left: auto;
    padding: 0 6px;
    border: none;
    background: transparent;
    color: var(--text-tertiary, #6E7193);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.ajw-actlog-close:hover { color: var(--text-primary, #0F1024); }

.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; }
}

/* ---- 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; }

.ajw-addfiles-btn {
    font-size: 11px;
    font-weight: 600;
    color: var(--ant-primary, #7C5CFF);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-sm, 6px);
}
.ajw-addfiles-btn:hover { background: var(--ant-primary-bg, #F1ECFF); }

.ajw-addfiles {
    margin: 4px 8px 10px 8px;
    padding: 10px;
    border: 1px solid var(--border-secondary, #E7E9F4);
    border-radius: var(--radius, 9px);
    background: var(--gray-2, #FBFBFE);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ajw-addfiles-label {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary, #6E7193);
}

.ajw-addfiles-hint {
    font-size: 11px;
    color: var(--text-tertiary, #6E7193);
    line-height: 1.4;
}

.ajw-upload-notice {
    margin: 0 8px 8px 8px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--ant-error, #E5484D);
    background: var(--ant-error-bg, #FFF1F0);
    border: 1px solid var(--ant-error-border, #FFCCC7);
    border-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;
    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; 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);
}
.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; }
}

/* ---- 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); }