/* 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; }
.ajw-hint { font-size: 11px; color: var(--text-tertiary, #6E7193); }

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

.ajw-files {
    flex: 0 0 260px;
    min-width: 220px;
    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; }
.ajw-file-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #0F1024);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.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; }

/* ---- 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; }
    .ajw-files { flex-basis: 220px; min-width: 200px; }
}

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