/* Embedded ForgeAtlas agent dock. Deliberately scoped below .agent-dock-panel:
 * the chat is lazy-loaded and must not perturb Studio's hot canvas path. */
.agent-lazy-placeholder,
.agent-dock-panel {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.agent-lazy-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-2);
    font-size: 11px;
}

.agent-dock-panel,
.agent-dock-panel button,
.agent-dock-panel input,
.agent-dock-panel textarea,
.agent-dock-panel select {
    font-family: "Manrope", "ForgeUI Studio CJK", sans-serif;
    box-sizing: border-box;
}

.agent-dock-panel button,
.agent-dock-panel select,
.agent-dock-panel input,
.agent-dock-panel textarea {
    color: var(--text-1);
}

.agent-root {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-1);
}

.agent-connection-banner { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; margin: 5px 8px 0; padding: 6px 8px; border: 1px solid rgba(255, 196, 120, .42); border-radius: 5px; background: rgba(255, 196, 120, .08); color: var(--text-1); font-size: 9px; line-height: 1.35; }
.agent-connection-banner .ms-icon { flex: 0 0 auto; color: rgba(255, 196, 120, .9); font-size: 13px; }
.agent-connection-text { min-width: 0; }

.agent-header,
.agent-settings-row,
.agent-composer-bar,
.agent-dialog-actions,
.agent-permission-actions {
    display: flex;
    align-items: center;
    min-width: 0;
}

.agent-header {
    flex: 0 0 38px;
    gap: 7px;
    padding: 0 8px 0 10px;
    border-bottom: 1px solid rgba(65, 71, 85, .36);
    background: var(--bg-2);
    /* Below the conversations overlay (z-index 70), which covers the whole
     * tab and provides its own close button when open. */
    position: relative;
    z-index: 60;
}

.agent-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text-0);
    font-size: 11px;
    letter-spacing: .045em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.agent-status-dot,
.agent-health-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-2);
    box-shadow: 0 0 0 2px rgba(139, 144, 160, .12);
}

.agent-status-dot.connected,
.agent-health-dot.ok {
    background: var(--success);
    box-shadow: 0 0 0 2px rgba(74, 222, 128, .13);
}

.agent-status-dot.disconnected,
.agent-health-dot.missing {
    background: var(--danger);
    box-shadow: 0 0 0 2px rgba(248, 113, 113, .12);
}

.agent-provider-badge {
    min-width: 0;
    margin-left: auto;
    padding: 2px 6px;
    overflow: hidden;
    border: 1px solid rgba(163, 201, 255, .22);
    border-radius: 999px;
    color: var(--primary);
    font-size: 9px;
    text-overflow: ellipsis;
    text-transform: capitalize;
    white-space: nowrap;
}

.agent-icon-btn,
.agent-compact-btn,
.agent-send,
.agent-suggestion,
.agent-load-older,
.agent-diff-comment,
.agent-attachment-remove {
    border: 1px solid rgba(65, 71, 85, .55);
    border-radius: 4px;
    background: var(--bg-3);
    cursor: pointer;
}

.agent-icon-btn {
    display: inline-flex;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
}

.agent-icon-btn .ms-icon { font-size: 15px; }
.agent-icon-btn:hover,
.agent-compact-btn:hover,
.agent-send:hover { border-color: rgba(163, 201, 255, .58); color: var(--text-0); }
.agent-icon-btn:disabled,
.agent-compact-btn:disabled,
.agent-send:disabled { cursor: default; opacity: .42; }
.agent-danger { color: var(--danger); }
.agent-icon-btn.armed { border-color: var(--danger); background: rgba(248, 113, 113, .12); }

.agent-settings-row {
    flex: 0 0 auto;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(65, 71, 85, .25);
}

.agent-settings-row { padding-top: 0; }

.agent-select,
.agent-text-input,
.agent-input {
    min-width: 0;
    border: 1px solid rgba(65, 71, 85, .52);
    border-radius: 4px;
    outline: none;
    background: var(--bg-2);
    color: var(--text-0);
    font-size: 11px;
}

.agent-select {
    flex: 1 1 0;
    box-sizing: border-box;
    height: 28px;
    padding: 0 6px;
    /* Same vertical contract as .prop-input: border-box + line-height minus
     * the borders, or the text hugs the top of the 28 px box. */
    line-height: 26px;
    vertical-align: middle;
}
.agent-select-field { height: 28px; flex: 1 1 0; }
.agent-select-field > .agent-select {
    display: block;
    width: 100%;
    height: 100%;
    padding-right: 26px;
}
.agent-select-field > .prop-select-chevron { height: 28px; line-height: 28px; }
.agent-mode-select-field { flex: 0 0 72px; width: 72px; }

.agent-select:focus,
.agent-text-input:focus,
.agent-input:focus { border-color: var(--primary-strong); }

.agent-compact-btn {
    flex: 0 0 auto;
    min-height: 26px;
    padding: 4px 8px;
    font-size: 10px;
}

.agent-primary,
.agent-send {
    border-color: rgba(33, 147, 251, .65);
    background: var(--primary-strong);
    color: #fff;
}

.agent-settings-section { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agent-settings-heading { display: block; margin-bottom: 4px; font-size: 10px; text-transform: uppercase; }
.agent-settings-advanced { display: block; min-width: 0; border-top: 1px solid rgba(65, 71, 85, .28); }
.agent-settings-advanced-summary { display: flex; align-items: center; min-height: 28px; color: var(--text-1); font-size: 10px; cursor: pointer; user-select: none; }
.agent-settings-advanced-summary::before { content: "›"; display: inline-block; width: 14px; color: var(--text-2); font-size: 16px; transform: rotate(0deg); }
.agent-settings-advanced[open] > .agent-settings-advanced-summary::before { transform: rotate(90deg); }
.agent-settings-advanced-body { display: none; padding: 4px 0 2px; }
.agent-settings-advanced[open] > .agent-settings-advanced-body { display: block; }
.agent-settings-advanced-body > * + * { margin-top: 8px; }
.agent-provider-model { flex: 0 0 38%; min-width: 88px; height: 24px; font-size: 10px; line-height: 22px; }
.agent-mcp-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(65, 71, 85, .28); }
.agent-mcp-env { min-height: 40px; padding: 5px 7px; resize: vertical; }
.agent-harness { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.agent-harness-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.agent-harness-label { color: var(--text-2); font-size: 9px; }
.agent-harness-text { box-sizing: border-box; width: 100%; min-height: 56px; padding: 5px 7px; overflow: auto; border: 1px solid rgba(65, 71, 85, .52); border-radius: 4px; outline: none; background: var(--bg-1); color: var(--text-1); font-family: monospace; font-size: 9px; resize: vertical; white-space: pre; }
.agent-harness-note { color: var(--text-2); font-size: 9px; line-height: 1.35; }
.agent-health-row,
.agent-mcp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 4px;
}
.agent-health-info { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.agent-health-info strong { color: var(--text-0); font-size: 11px; }
.agent-health-info span,
.agent-muted { overflow: hidden; color: var(--text-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.agent-host-diagnostic {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding: 8px;
    border: 1px solid rgba(248, 113, 113, .28);
    border-radius: 5px;
    background: rgba(248, 113, 113, .08);
}
.agent-host-diagnostic strong { color: var(--text-0); font-size: 10px; }
.agent-host-diagnostic span {
    overflow-wrap: anywhere;
    color: var(--text-2);
    font-size: 9px;
    line-height: 1.35;
}
.agent-host-diagnostic a {
    align-self: flex-start;
    color: var(--primary);
    font-size: 10px;
    text-decoration: none;
}
.agent-host-diagnostic a:hover { text-decoration: underline; }
/* Signed-out recovery, inside Settings under the provider it belongs to. */
.agent-health-dot.warn { background: var(--secondary); box-shadow: 0 0 0 2px rgba(255, 215, 155, .14); }
.agent-signin { display: flex; flex-direction: column; gap: 5px; margin: 0 4px 6px; padding: 7px 8px; border: 1px solid rgba(255, 215, 155, .34); border-radius: 5px; background: rgba(255, 215, 155, .07); }
.agent-signin-hint { color: var(--text-1); font-size: 9px; line-height: 1.4; }
.agent-signin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.agent-signin-command { flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 3px 6px; border-radius: 3px; background: var(--bg-1); color: var(--text-0); font-family: monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

/* Provider substitution notice — a fact about this conversation, not an error. */
.agent-fallback { display: flex; align-items: center; gap: 6px; overflow: hidden; margin: 0 0 6px; padding: 4px 4px 4px 7px; border: 1px solid rgba(163, 201, 255, .35); border-radius: 4px; background: rgba(33, 147, 251, .07); color: var(--text-1); font-size: 9px; }
.agent-fallback .ms-icon { flex: 0 0 auto; font-size: 12px; opacity: .85; }
.agent-fallback-text { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-fallback-fix { flex: 0 0 auto; padding: 2px 7px; border: 1px solid rgba(163, 201, 255, .5); border-radius: 3px; background: transparent; color: inherit; font-size: 9px; cursor: pointer; }
.agent-fallback-fix:hover { background: rgba(163, 201, 255, .16); }
.agent-fallback-dismiss { flex: 0 0 18px; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }

.agent-mcp-row input { flex: 0 0 auto; accent-color: var(--primary-strong); }
.agent-mcp-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.agent-activity {
    display: flex;
    flex: 0 0 27px;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border-bottom: 1px solid rgba(65, 71, 85, .28);
    color: var(--primary);
    font-size: 10px;
}
.agent-activity .ms-icon { font-size: 14px; animation: agent-spin 1.1s linear infinite; }
.agent-activity-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-activity-time { margin-left: auto; color: var(--text-2); }
@keyframes agent-spin { to { transform: rotate(360deg); } }

.agent-messages {
    /* The thread is a scrollable block formatting context. A vertical flex
       column made ForgeUI shrink wrapping message articles below the height
       of their flowed Markdown even with `flex: 0 0 auto`; the overflow was
       then painted on top of later turns. */
    position: relative;
    z-index: 1;
    display: block;
    flex: 1 1 auto;
    height: 0;
    min-width: 0;
    min-height: 0;
    max-height: none;
    padding: 10px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    overscroll-behavior: none;
    clip-path: inset(0);
}
.agent-messages > * + * { margin-top: 8px; }

/* One commercial task per user turn.  The body is intentionally block flow:
   nested vertical flex columns can under-measure wrapped text in ForgeUI and
   were the root cause of the previous Mako transcript overlap. */
.agent-task-card { display: block; min-width: 0; overflow: hidden; border: 1px solid rgba(65, 71, 85, .55); border-radius: 8px; background: rgba(24, 26, 31, .72); }
.agent-task-head { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 8px; border-bottom: 1px solid rgba(65, 71, 85, .4); background: rgba(33, 147, 251, .055); }
.agent-task-head .ms-icon { flex: 0 0 auto; color: var(--primary); font-size: 13px; }
.agent-task-title { min-width: 0; overflow: hidden; color: var(--text-0); font-size: 10px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.agent-task-body { display: block; min-width: 0; padding: 8px; }
.agent-task-body > * + * { margin-top: 7px; }
.agent-task-body > .agent-message { margin-right: 0; margin-left: 0; }
.agent-task-actions { display: block; min-width: 0; }
.agent-task-actions:empty { display: none; }
.agent-task-actions .agent-revert { margin: 0; border-width: 1px 0 0; border-radius: 0; }
.agent-task-toolbar { display: flex; align-items: center; gap: 3px; min-height: 26px; padding: 3px 6px; border-top: 1px solid rgba(65, 71, 85, .4); }
.agent-task-action { flex: 0 0 24px; width: 24px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--text-2); }
.agent-task-action .ms-icon { font-size: 13px; }
.agent-task-action:hover { border-color: rgba(163, 201, 255, .3); background: rgba(33, 147, 251, .08); color: var(--text-0); }
.agent-task-action[aria-pressed="true"] { border-color: rgba(33, 147, 251, .45); background: rgba(33, 147, 251, .16); color: var(--primary); }
.agent-task-action.copy-feedback { border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .12); color: #4ade80; }
.agent-task-see { flex-basis: 28px; width: 28px; color: var(--primary); }
.agent-task-see.success { border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .12); color: #4ade80; }
.agent-diff-card.agent-diff-highlight { border-color: var(--primary-strong); box-shadow: 0 0 0 1px rgba(33, 147, 251, .22); }
.agent-reflection-status {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 7px 8px;
    border-top: 1px solid rgba(65, 71, 85, .4);
    color: var(--text-1);
    font-size: 10px;
    line-height: 1.35;
    background: rgba(33, 147, 251, .045);
}
.agent-reflection-status .ms-icon { flex: 0 0 auto; color: var(--primary); font-size: 13px; }
.agent-reflection-status.error { color: var(--danger); background: rgba(239, 83, 80, .06); }
.agent-reflection-status.error .ms-icon { color: var(--danger); }
.agent-reflection-policy { color: var(--text-muted); margin-left: auto; font-size: 11px; }

.agent-empty {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    min-height: 160px;
    padding: 20px;
    color: var(--text-2);
    text-align: center;
}
.agent-empty .ms-icon { color: var(--primary); font-size: 28px; }
.agent-empty strong { color: var(--text-1); font-size: 12px; }
.agent-empty span { max-width: 230px; font-size: 10px; line-height: 1.5; }
.agent-empty-hint {
    display: block;
    width: 100%;
    max-width: 230px;
    height: auto;
    margin-bottom: 7px;
    overflow-wrap: break-word;
    white-space: normal;
}
.agent-starters { display: grid; width: 100%; max-width: 300px; gap: 10px; margin-top: 3px; }
.agent-starter-group { display: grid; gap: 5px; min-width: 0; }
.agent-starter-group-label { max-width: none !important; color: var(--text-2); font-size: 8px !important; font-weight: 700; letter-spacing: .08em; line-height: 1.2 !important; text-align: left; text-transform: uppercase; }
.agent-starter { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid rgba(33, 147, 251, .34); border-radius: 5px; background: rgba(33, 147, 251, .11); color: var(--text-0); font-size: 9px; line-height: 1.35; text-align: left; cursor: pointer; }
.agent-starter:hover { border-color: rgba(85, 177, 255, .76); background: rgba(33, 147, 251, .2); }
.agent-starter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.agent-starter-template { border-color: rgba(171, 132, 255, .38); border-style: dashed; background: rgba(128, 91, 214, .1); color: var(--text-1); }
.agent-starter-template:hover { border-color: rgba(188, 159, 255, .78); background: rgba(128, 91, 214, .18); }

.agent-message {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(65, 71, 85, .34);
    border-radius: 7px;
    background: var(--bg-2);
}
.agent-message.user { margin-left: 18px; border-color: rgba(33, 147, 251, .32); background: rgba(33, 147, 251, .08); }
/* A row that is only tool traffic carries no byline, so it must not look like
   a spoken message either: the card inside provides its own frame. */
.agent-message-bare { padding: 0; border: 0; background: transparent; }
.agent-message-bare > .agent-tool-card,
.agent-message-bare > .agent-diff-card,
.agent-message-bare > .agent-tool-block > .agent-tool-card { margin-top: 0; }
.agent-message.error { border-color: rgba(248, 113, 113, .45); }
.agent-message-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; color: var(--text-2); font-size: 9px; }
.agent-message-meta strong { color: var(--text-1); font-size: 10px; text-transform: capitalize; }
.agent-message-meta span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-pending { margin-left: auto; color: var(--primary); }
/* break-word, not anywhere: `anywhere` breaks inside ordinary words as soon as
   the line is tight, and a 360 px dock is always tight — the thread read
   "c onfirmation", "firs t". break-word still rescues a single unbreakable
   token (a URL, a long path) that cannot fit on a line of its own. */
.agent-message-text { color: var(--text-0); font-size: 11px; line-height: 1.6; overflow-wrap: break-word; white-space: pre-wrap; }
.agent-message-image { display: block; max-width: 100%; max-height: 220px; margin-top: 6px; border-radius: 5px; object-fit: contain; }
.agent-image-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 7px 0 0; }
.agent-image-compare-cell { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(65, 71, 85, .5); border-radius: 5px; background: var(--bg-3); }
.agent-image-compare-label { position: absolute; z-index: 1; top: 4px; left: 4px; padding: 2px 5px; border-radius: 3px; background: rgba(8, 10, 14, .82); color: var(--text-0); font-size: 8px; font-weight: 650; text-transform: uppercase; }
.agent-image-compare-image { display: block; width: 100%; height: auto; object-fit: contain; }

/* Rendered Markdown. `white-space: pre-wrap` is inherited from
   .agent-message-text and stays: inside a paragraph the author's own newlines
   are meaningful, and the parser already consumed the block-level ones. */
/* BLOCK layout, deliberately — not a flex column with a gap.
   Measured in the live dock: a vertical flex whose items hold wrapping text
   sizes each item from less than its wrapped height, and the engine then
   paints the overflow on top of the next item (up to 107 px of overlap on a
   real answer). `flex: 0 0 auto` does NOT rescue it. Block boxes derive their
   height from the flowed lines, which is exactly the guarantee this needs, so
   the spacing is margins and the list marker is a hanging indent rather than
   a flex row. Same engine family as [flex-basis dropped on text leaves]. */
.agent-md { display: block; }
.agent-md > * + * { margin-top: 6px; }
.agent-md-h { color: var(--text-0); font-weight: 600; letter-spacing: .01em; }
.agent-md-h1 { font-size: 13px; }
.agent-md-h2 { font-size: 12px; }
.agent-md-h3 { font-size: 11px; }
/* Hanging indent: marker and body share one block so the wrapped lines flow
   under the text, not under the bullet, without a nested flex row. */
.agent-md-item { display: block; padding-left: 14px; text-indent: -14px; }
.agent-md-marker { display: inline; margin-right: 5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.agent-md-item-body { display: inline; text-indent: 0; }
.agent-md-quote { padding-left: 8px; border-left: 2px solid rgba(163, 201, 255, .35); color: var(--text-1); }
.agent-md-rule { height: 1px; margin: 2px 0; background: rgba(65, 71, 85, .55); }
/* Keep every inline run on identical metrics. A nested inline-block with its
   own font-size/line-height is measured atomically in ForgeUI, but a wrapping
   paragraph still advances subsequent text with the parent line box. Long
   replies containing many code chips therefore painted several lines on top
   of each other. A real inline run participates in the paragraph shaping and
   wrapping; no horizontal padding is used because padding is paint-only on a
   split inline fragment in the current engine. Monospace + background still
   distinguish code without changing the line advance. */
.agent-md-code { display: inline; padding: 0; border-radius: 3px; background: rgba(163, 201, 255, .1); color: var(--text-0); font-family: monospace; font-size: inherit; line-height: inherit; vertical-align: baseline; overflow-wrap: anywhere; }
.agent-md-pre { margin: 0; padding: 7px 8px; overflow-x: auto; border: 1px solid rgba(65, 71, 85, .45); border-radius: 5px; background: var(--bg-3); color: var(--text-1); font: 9px/1.5 monospace; white-space: pre; }
.agent-md-link { color: var(--primary); text-decoration: underline; }
.agent-md-strike { text-decoration: line-through; opacity: .75; }

.agent-thinking,
.agent-tool-card,
.agent-diff-card,
.agent-permission-card {
    min-width: 0;
    margin-top: 6px;
    overflow: hidden;
    border: 1px solid rgba(65, 71, 85, .48);
    border-radius: 5px;
    background: var(--bg-3);
    color: var(--text-1);
    font-size: 10px;
}
.agent-thinking summary,
.agent-tool-card summary { padding: 6px 7px; cursor: pointer; color: var(--text-1); }
.agent-thinking pre,
.agent-tool-card pre { max-height: 260px; margin: 0; padding: 7px; overflow: auto; border-top: 1px solid rgba(65, 71, 85, .35); color: var(--text-2); font: 9px/1.45 monospace; white-space: pre-wrap; }
/* ForgeUI intentionally keeps HTML element defaults minimal, so do not rely
   on a browser UA rule to collapse <details>. Command cards are divs and keep
   their output visible; only disclosure-backed thinking/tool cards hide it. */
details.agent-thinking > pre,
details.agent-tool-card > pre { display: none; }
details.agent-thinking[open] > pre,
details.agent-tool-card[open] > pre { display: block; }
.agent-tool-card.error { border-color: rgba(248, 113, 113, .5); }
.agent-tool-card summary .ms-icon { margin-right: 4px; font-size: 13px; vertical-align: middle; opacity: .8; }
.agent-tool-card summary span { vertical-align: middle; }
.agent-tool-card > .ms-icon,
.agent-diff-card > .ms-icon { margin: 6px 3px 6px 7px; font-size: 13px; vertical-align: middle; }
.agent-tool-card > strong,
.agent-diff-card > strong { display: inline-block; max-width: calc(100% - 32px); overflow: hidden; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; }
.agent-tool-status { display: block; padding: 4px 7px; color: var(--text-2); }
.agent-error { color: var(--danger) !important; }

.agent-diff-lines { max-height: 330px; overflow: auto; border-top: 1px solid rgba(65, 71, 85, .35); font: 9px/1.45 monospace; }
.agent-diff-line { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 18px; }
.agent-diff-side { display: grid; grid-template-columns: 35px minmax(0, 1fr) 20px; min-width: 0; border-right: 1px solid rgba(65, 71, 85, .25); }
.agent-diff-side:last-child { border-right: 0; }
.agent-diff-side.old.changed { background: rgba(248, 113, 113, .08); }
.agent-diff-side.new.changed { background: rgba(74, 222, 128, .08); }
.agent-diff-separator { grid-column: 1 / -1; padding: 3px 7px; overflow: hidden; color: var(--text-2); background: rgba(65, 71, 85, .12); text-overflow: ellipsis; white-space: nowrap; }
.agent-diff-separator.hunk { color: var(--primary); }
.agent-diff-no { padding: 2px 5px; color: var(--text-2); text-align: right; user-select: none; }
.agent-diff-text { min-width: 0; padding: 2px 4px; overflow-wrap: anywhere; white-space: pre-wrap; }
.agent-diff-comment { width: 18px; height: 18px; padding: 0; opacity: 0; color: var(--primary); }
.agent-diff-side:hover .agent-diff-comment { opacity: 1; }
.agent-diff-comment-input { grid-column: 1 / -1; width: calc(100% - 8px); margin: 3px 4px 5px; border: 1px solid var(--primary-strong); border-radius: 3px; background: var(--bg-1); color: var(--text-0); font: 10px Inter, sans-serif; }

.agent-permission-card { padding: 8px; border-color: rgba(255, 215, 155, .4); }
.agent-permission-card > .ms-icon { margin-right: 5px; color: var(--secondary); font-size: 14px; vertical-align: middle; }
.agent-permission-card > strong { vertical-align: middle; }
.agent-permission-card > .agent-text-input { width: 100%; height: 27px; margin-top: 7px; padding: 0 7px; }
.agent-permission-actions { flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.agent-resolved { display: block; margin-top: 5px; color: var(--success); }
.agent-resolved.danger { color: var(--danger); }

.agent-load-older {
    align-self: center;
    padding: 4px 8px;
    color: var(--text-2);
    font-size: 9px;
}

/* Next-action chips (Lot 8) — one pill row under the thread, above the
   composer, shown only after a completed assistant turn. */
.agent-next-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px 8px 0;
}
.agent-next-actions[hidden] { display: none; }
.agent-next-chip {
    padding: 3px 9px;
    border: 1px solid rgba(33, 147, 251, .45);
    border-radius: 11px;
    background: rgba(33, 147, 251, .08);
    color: var(--text-1);
    font-size: 9px;
    cursor: pointer;
}
.agent-next-chip:hover { background: rgba(33, 147, 251, .18); color: var(--text-0); }

.agent-composer {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    padding: 7px 8px 8px;
    border-top: 1px solid rgba(65, 71, 85, .4);
    background: var(--bg-2);
}
.agent-composer.dragover { background: rgba(33, 147, 251, .12); }
.agent-input { display: block; width: 100%; min-height: 58px; max-height: 150px; padding: 7px 8px; resize: vertical; line-height: 1.45; }
.agent-composer-bar { gap: 5px; margin-top: 6px; }
.agent-composer-tools { position: relative; flex: 0 0 auto; }
.agent-composer-menu-btn[aria-expanded="true"] { border-color: rgba(33, 147, 251, .62); background: rgba(33, 147, 251, .16); color: var(--text-0); }
.agent-composer-menu {
    position: absolute;
    z-index: 75;
    bottom: 34px;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 210px;
    padding: 4px;
    border: 1px solid rgba(65, 71, 85, .72);
    border-radius: 6px;
    background: var(--bg-3);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
}
.agent-composer-menu[hidden] { display: none; }
.agent-composer-action {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 28px;
    gap: 8px;
    padding: 4px 7px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-1);
    text-align: left;
    cursor: pointer;
}
.agent-composer-action:hover,
.agent-composer-action:focus-visible { outline: none; background: rgba(33, 147, 251, .14); color: var(--text-0); }
.agent-composer-action .ms-icon { flex: 0 0 16px; font-size: 15px; }
.agent-composer-action-label { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.agent-composer-spacer { flex: 1 1 auto; }
.agent-context-badge { flex: 0 0 auto; padding: 2px 5px; border: 1px solid rgba(65, 71, 85, .65); border-radius: 8px; color: var(--text-2); font-size: 8px; white-space: nowrap; }
.agent-context-badge.warn { border-color: rgba(250, 204, 21, .65); color: #facc15; }
.agent-context-badge.bad { border-color: rgba(248, 113, 113, .72); color: var(--danger); }
.agent-mcp-row.managed { cursor: default; }
.agent-mcp-row.managed input { opacity: .75; }
.agent-mcp-managed { margin-left: auto; color: var(--text-2); font-size: 8px; }
.agent-send { display: inline-flex; flex: 0 0 28px; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; }
.agent-send .ms-icon { font-size: 15px; }
.agent-speech-btn.recording { border-color: rgba(239, 83, 80, .65); background: rgba(239, 83, 80, .14); color: var(--danger); }
.agent-speech-review { display: flex; align-items: center; gap: 5px; min-width: 0; margin-top: 6px; padding: 6px; border: 1px solid rgba(65, 71, 85, .55); border-radius: 5px; background: rgba(24, 26, 31, .78); }
.agent-speech-review[hidden] { display: none; }
.agent-speech-text { flex: 1 1 auto; min-width: 0; color: var(--text-0); font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.agent-stop { border-color: rgba(248, 113, 113, .6); background: rgba(248, 113, 113, .14); color: var(--danger); }

.agent-pinned-comments,
.agent-attachments { display: flex; gap: 5px; margin-bottom: 6px; overflow-x: auto; }
/* Edited-element targets — the bridge from transcript back to canvas. */
.agent-tool-targets { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 7px 5px; }
.agent-tool-targets-label { color: var(--text-2); font-size: 9px; }
.agent-uid-chip { padding: 1px 6px; border: 1px solid rgba(163, 201, 255, .4); border-radius: 9px; background: transparent; color: var(--text-1); font-size: 9px; cursor: pointer; }
.agent-uid-chip:hover { background: rgba(163, 201, 255, .16); }

/* Conversations overlay (Lot 2) — covers the whole agent tab, Codex-style:
 * an opaque full-surface layer with its own header, above the thread and the
 * composer (suggestions sit at 30) but below the Settings modal (80). */
.agent-drawer {
    position: absolute;
    /* Above the panel header (z-index 60): the overlay owns the whole tab,
     * including its own title bar with the close button — Codex style. */
    z-index: 70;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
}
.agent-drawer[hidden] { display: none; }
.agent-drawer-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(65, 71, 85, .36);
    background: var(--bg-2);
}
.agent-drawer-head .agent-drawer-title { margin-right: auto; }
.agent-drawer-scope-row { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 5px 8px 2px; }
.agent-drawer-scope-label { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--text-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.agent-drawer-scope-toggle { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-drawer-archive-toggle { flex: 0 0 auto; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-drawer-search { box-sizing: border-box; flex: 0 0 27px; width: calc(100% - 16px); height: 27px; margin: 4px 8px; padding: 0 7px; line-height: 25px; }
.agent-drawer-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-0);
    font-size: 11px;
    letter-spacing: .045em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.agent-drawer-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px; }
.agent-drawer-group { padding: 7px 6px 3px; color: var(--text-2); font-size: 8px; font-weight: 650; letter-spacing: .055em; text-transform: uppercase; }
.agent-drawer-empty { padding: 8px; color: var(--text-2); font-size: 9px; text-align: center; }
.agent-drawer-row { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; overflow: hidden; box-sizing: border-box; padding: 5px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--text-1); font-size: 10px; text-align: left; cursor: pointer; }
.agent-drawer-row:hover { background: rgba(163, 201, 255, .1); }
.agent-drawer-row.active { background: rgba(163, 201, 255, .16); }
.agent-drawer-row.unread .agent-drawer-label { color: var(--text-0); font-weight: 650; }
.agent-drawer-row.unread .agent-drawer-dot { background: var(--primary-strong); }
.agent-drawer-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: rgba(150, 158, 175, .6); }
.agent-drawer-dot.busy { background: #7ad39a; }
.agent-drawer-text { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; }
.agent-drawer-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-drawer-meta { overflow: hidden; color: var(--text-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.agent-drawer-scope { flex: 0 0 auto; padding: 1px 5px; border: 1px solid rgba(163, 201, 255, .22); border-radius: 999px; color: var(--text-2); font-size: 8px; }
.agent-drawer-action { display: inline-flex; flex: 0 0 22px; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.agent-drawer-action:hover { color: var(--primary); }
.agent-drawer-action:disabled { cursor: not-allowed; opacity: .35; }
.agent-drawer-action .ms-icon { font-size: 14px; }
.agent-archive-notice { position: absolute; z-index: 75; right: 8px; bottom: 8px; left: 8px; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 7px 5px 9px; border: 1px solid rgba(163, 201, 255, .34); border-radius: 5px; background: var(--bg-2); box-shadow: 0 6px 18px rgba(0, 0, 0, .32); color: var(--text-1); font-size: 9px; }
.agent-archive-notice[hidden] { display: none; }
.agent-archive-notice > span { flex: 1 1 auto; min-width: 0; }

/* Tool burst — a run of scaffolding calls folded into one line. Muted on
   purpose: it is the turn's plumbing, not its answer. */
.agent-burst { margin: 0 0 6px; border: 1px solid rgba(65, 71, 85, .5); border-radius: 4px; }
.agent-burst-head { display: flex; align-items: center; gap: 6px; overflow: hidden; padding: 4px 7px; color: var(--text-2); font-size: 9px; cursor: pointer; list-style: none; }
.agent-burst-head::-webkit-details-marker { display: none; }
.agent-burst-head .ms-icon { flex: 0 0 auto; font-size: 12px; opacity: .75; }
.agent-burst-count { flex: 0 0 auto; font-weight: 600; }
.agent-burst-names { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
/* ForgeUI deliberately has a minimal UA sheet and therefore does not supply
   the browser's native <details> disclosure rule.  A collapsed burst must
   remove its message rows from layout explicitly; leaving them merely
   unpainted makes long histories accumulate hidden Yoga heights and can
   overflow the scroll range into multi-billion-pixel geometry. */
details.agent-burst > .agent-message { display: none; }
details.agent-burst[open] > .agent-message { display: block; }
.agent-burst[open] .agent-burst-head { border-bottom: 1px solid rgba(65, 71, 85, .4); }
.agent-burst .agent-message { margin: 0; padding: 4px 7px; border: 0; }

/* Studio context chips — the editor-native references (selection, colour,
   screen, token) a web chat cannot offer. */
.agent-context { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.agent-context-chip { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; max-width: 240px; padding: 3px 4px 3px 6px; border: 1px solid rgba(163, 201, 255, .35); border-radius: 4px; color: var(--text-1); font-size: 9px; }
.agent-context-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-context-chip .ms-icon { flex: 0 0 auto; font-size: 12px; opacity: .8; }
.agent-context-chip .agent-icon-btn { flex-basis: 18px; width: 18px; height: 18px; }
.agent-context-chip .agent-context-edit { color: var(--primary); }
.agent-context-swatch { flex: 0 0 10px; width: 10px; height: 10px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 2px; }
.agent-context-swatches { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; }
.agent-context-swatches .agent-context-swatch { flex-basis: 8px; width: 8px; height: 8px; }

/* Pick mode (Lot 6) — visible while the next stage click is claimed for the
   composer. Reads like the queued bar: an intention, not transcript. */
.agent-pick-banner { display: flex; align-items: center; gap: 6px; overflow: hidden; margin: 0 0 6px; padding: 4px 4px 4px 7px; border: 1px solid rgba(163, 201, 255, .45); border-radius: 4px; background: rgba(33, 147, 251, .1); color: var(--text-1); font-size: 9px; }
.agent-pick-banner .ms-icon { flex: 0 0 auto; font-size: 12px; opacity: .85; }
.agent-pick-text { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-pick-cancel { flex: 0 0 18px; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.agent-pick-cancel:hover { color: var(--text-0); }
.agent-icon-btn.active { border-color: rgba(163, 201, 255, .6); background: rgba(33, 147, 251, .16); color: var(--text-0); }

/* Palette popup (Lot 7) — editable swatch row + named presets. */
.agent-palette-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.agent-palette-item { position: relative; flex: 0 0 26px; width: 26px; height: 26px; }
.agent-palette-swatch { width: 100%; height: 100%; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 4px; cursor: pointer; }
.agent-palette-swatch-remove { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 7px; background: rgba(14, 14, 14, .85); color: #fff; line-height: 12px; cursor: pointer; }
.agent-palette-swatch-remove .ms-icon { font-size: 10px; }
.agent-palette-save-row { display: flex; gap: 6px; }
.agent-palette-save-row .agent-text-input { flex: 1 1 0; min-width: 0; }
.agent-palette-presets { display: flex; flex-direction: column; gap: 4px; }
.agent-palette-row { display: flex; align-items: center; gap: 6px; }
.agent-palette-name { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--text-1); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.agent-palette-empty { color: var(--text-2); font-size: 9px; }

/* Provider-free quick edit. The form deliberately shares the modal, input,
   swatch and primary-button primitives used elsewhere in Studio. */
.agent-direct-edit-card { width: calc(100vw - 24px); max-width: 360px; }
.agent-direct-edit-selection { margin: -2px 0 4px; overflow: hidden; color: var(--text-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.agent-direct-edit-field { display: flex; flex-direction: column; min-width: 0; }
.agent-direct-edit-field > .agent-settings-heading { margin-bottom: 3px; color: var(--text-2); }
.agent-direct-edit-text { box-sizing: border-box; width: 100%; min-height: 56px; padding: 6px 7px; resize: vertical; }
.agent-direct-color { display: flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 7px; border: 1px solid rgba(65, 71, 85, .52); border-radius: 4px; background: var(--bg-2); color: var(--text-1); cursor: pointer; }
.agent-direct-color:hover { border-color: rgba(163, 201, 255, .58); color: var(--text-0); }
.agent-direct-color .agent-context-swatch { width: 16px; height: 16px; }
.agent-direct-color-value { font-family: monospace; font-size: 10px; }
.agent-direct-size-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
.agent-direct-size-row .agent-text-input { box-sizing: border-box; width: 100%; height: 28px; padding: 0 7px; line-height: 26px; }

/* Turn revert — the post-turn safety net. Warmer than the queued bar because
   it is an action on work already applied, not a pending intention. */
.agent-revert { display: flex; align-items: center; gap: 6px; overflow: hidden; margin: 0 0 6px; padding: 4px 4px 4px 7px; border: 1px solid rgba(255, 196, 120, .38); border-radius: 4px; background: rgba(255, 196, 120, .07); color: var(--text-1); font-size: 9px; }
.agent-revert .ms-icon { flex: 0 0 auto; font-size: 12px; opacity: .85; }
.agent-revert-text { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-revert-apply { flex: 0 0 auto; padding: 2px 7px; border: 1px solid rgba(255, 196, 120, .5); border-radius: 3px; background: transparent; color: inherit; font-size: 9px; cursor: pointer; }
.agent-revert-apply:hover:not(:disabled) { background: rgba(255, 196, 120, .14); }
.agent-revert-apply:disabled { opacity: .5; cursor: default; }
.agent-revert-dismiss { flex: 0 0 18px; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }

/* Queued turn — reads as "next", not as transcript: dashed edge, muted, and
   sitting between the thread and the composer. */
.agent-queued { display: flex; flex-direction: column; gap: 2px; overflow: hidden; margin: 0 0 6px; padding: 3px; border: 1px dashed rgba(163, 201, 255, .45); border-radius: 4px; color: var(--text-2); font-size: 9px; }
.agent-queued-item { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 22px; padding-left: 4px; }
.agent-queued .ms-icon { flex: 0 0 auto; font-size: 12px; opacity: .8; }
.agent-queued-text { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-queued-count { min-width: 14px; padding: 1px 3px; border-radius: 8px; background: var(--surface-3); text-align: center; }
.agent-queued-status { flex: 1 1 100%; min-width: 0; overflow: hidden; color: var(--warning, #f2b95e); text-overflow: ellipsis; white-space: nowrap; }
.agent-queued-action,
.agent-queued-cancel { flex: 0 0 18px; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.agent-queued-action:hover,
.agent-queued-cancel:hover { color: var(--text-1); }
.agent-queued-action:disabled { opacity: .25; cursor: default; }

.agent-node-fetch { flex: 0 0 auto; margin: 6px 8px 0; padding: 8px 9px; border: 1px solid rgba(90, 167, 255, .45); border-radius: 6px; background: var(--surface-2); color: var(--text-1); }
.agent-node-fetch.failed { border-color: rgba(255, 105, 105, .55); }
.agent-node-fetch-title { font-size: 11px; font-weight: 650; }
.agent-node-fetch-reason { margin-top: 3px; color: var(--text-2); font-size: 9px; line-height: 1.35; }
.agent-node-fetch-track { position: relative; height: 3px; margin-top: 7px; overflow: hidden; border-radius: 3px; background: var(--surface-4); }
.agent-node-fetch-fill { height: 100%; border-radius: inherit; background: var(--accent); }
.agent-node-fetch-track.indeterminate .agent-node-fetch-fill { width: 35% !important; animation: agent-node-fetch-slide 1.1s ease-in-out infinite; }
.agent-node-fetch-footer { display: flex; align-items: center; gap: 6px; min-height: 19px; margin-top: 4px; color: var(--text-2); font-size: 9px; }
.agent-node-fetch-amount { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-node-fetch-retry { margin-left: auto; min-height: 19px; padding: 1px 7px; border: 1px solid var(--border-2); border-radius: 4px; background: var(--surface-3); color: var(--text-1); cursor: pointer; }
.agent-node-fetch-retry:hover { border-color: var(--accent); }
.agent-node-fetch-retry:disabled { opacity: .55; cursor: default; }
@keyframes agent-node-fetch-slide { from { transform: translateX(-120%); } to { transform: translateX(330%); } }
.agent-error-details { margin-top: 4px; color: var(--text-2); font-size: 9px; }
.agent-error-details summary { cursor: pointer; user-select: none; }
.agent-error-details pre { max-height: 140px; margin: 4px 0 0; overflow: auto; white-space: pre-wrap; }
.agent-attachment-error { margin: -1px 0 6px; font-size: 9px; line-height: 1.35; }
.agent-comment-chip { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; max-width: 240px; padding: 3px 4px 3px 6px; border: 1px solid rgba(163, 201, 255, .35); border-radius: 4px; color: var(--text-1); font-size: 9px; }
.agent-comment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-comment-chip .agent-icon-btn { flex-basis: 18px; width: 18px; height: 18px; }
.agent-attachment { position: relative; flex: 0 0 45px; width: 45px; height: 45px; overflow: hidden; border: 1px solid rgba(65, 71, 85, .55); border-radius: 4px; }
.agent-attachment img { width: 100%; height: 100%; object-fit: cover; }
.agent-attachment-remove { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; padding: 0; background: rgba(14, 14, 14, .85); color: #fff; line-height: 14px; }

.agent-suggestions {
    position: absolute;
    z-index: 30;
    right: 8px;
    bottom: 72px;
    left: 8px;
    max-height: 190px;
    overflow: auto;
    border: 1px solid rgba(65, 71, 85, .75);
    border-radius: 5px;
    background: var(--bg-2);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, .35);
}
.agent-suggestion { display: block; width: 100%; padding: 6px 8px; overflow: hidden; border: 0; border-radius: 0; color: var(--text-1); font-size: 10px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.agent-suggestion:hover { background: rgba(33, 147, 251, .12); color: var(--text-0); }

.agent-modal {
    position: absolute;
    z-index: 80;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(0, 0, 0, .62);
}
.agent-modal-card { display: flex; width: 100%; max-height: calc(100% - 20px); flex-direction: column; gap: 8px; padding: 12px; overflow: auto; border: 1px solid rgba(65, 71, 85, .8); border-radius: 7px; background: var(--bg-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
.agent-modal-header { display: flex; min-height: 26px; align-items: center; justify-content: space-between; gap: 8px; }
.agent-modal-card h3 { margin: 0; color: var(--text-0); font-size: 12px; }
.agent-modal-dismiss { width: 26px; height: 26px; }
.agent-dialog-error { min-height: 12px; color: var(--danger); font-size: 9px; }
.agent-dialog-actions { justify-content: flex-end; gap: 6px; }

@media (max-width: 315px) {
    .agent-header { gap: 5px; padding-inline: 6px; }
    .agent-provider-badge { max-width: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .agent-settings-row { flex-wrap: wrap; }
    .agent-settings-row .agent-select-field { flex-basis: calc(50% - 3px); }
    .agent-context-badge { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
}


/* ── Agent governance band (Slice 5) ──────────────────────────────────────
 * Makes the three facts that decide what Mako may do readable at a glance:
 * permission mode, presence, model — plus the way back (checkpoints).
 * Colour meaning follows theme.mako.css: TEAL is the agent surface
 * (Mako brand --teal #123B40), GREEN (--primary) stays the action, orange
 * stays "busy/divergence", red stays error. The band adds no new colour
 * meaning and no new state; it only shows state the agent modules own. */
.agent-root {
    /* Brand teal surface for agent-owned chrome (design/brand mako-brand.css
     * --teal). Declared here, scoped to the agent dock, so the shared studio
     * token vocabulary stays untouched. */
    --agent-surface: #123b40;
    --agent-surface-line: rgba(47, 247, 191, .22);
}

.agent-governance {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-bottom: 1px solid rgba(65, 71, 85, .3);
    background: var(--agent-surface);
}

.agent-governance-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 8px;
}

.agent-gov-spacer { flex: 1 1 auto; min-width: 0; }

/* Presence ring — a ring, not a filled dot, so it never reads as "action". */
.agent-gov-ring {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border: 2px solid var(--text-2);
    border-radius: 50%;
}

.agent-gov-ring.live {
    border-color: var(--success);
    box-shadow: 0 0 7px rgba(47, 247, 191, .35);
}

.agent-gov-ring.busy { border-color: var(--tertiary); }

.agent-gov-ring.off { border-color: var(--danger); }

.agent-gov-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--agent-surface-line);
    border-radius: 999px;
    background: rgba(47, 247, 191, .06);
    color: var(--text-1);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.agent-gov-chip .ms-icon { flex: 0 0 auto; font-size: 13px; color: var(--success); }

.agent-gov-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The permission mode is the contract: it never truncates. The model name
 * gives up its width first. */
.agent-gov-mode { flex: 0 0 auto; }

/* Plan is the read-only contract: it must not look like a running action. */
.agent-gov-mode.plan { color: var(--success); }

.agent-gov-mode.act {
    border-color: rgba(73, 201, 120, .35);
    color: var(--primary);
}

.agent-gov-mode.act .ms-icon { color: var(--primary); }

.agent-gov-model { flex: 1 1 60px; color: var(--text-2); }

.agent-gov-checkpoints { flex: 0 0 auto; cursor: pointer; }

.agent-gov-checkpoints:disabled { color: var(--text-2); cursor: default; opacity: .7; }

.agent-gov-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px 7px;
}

.agent-gov-list-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.agent-gov-list-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-1);
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Restore rewrites the open document: it is armed by a first click and only
 * runs on the second one, so the button carries the action colour only while
 * it is armed. */
.agent-gov-restore,
.agent-thread-checkpoint {
    flex: 0 0 auto;
    cursor: pointer;
    background: rgba(47, 247, 191, .06);
}

.agent-gov-restore.armed,
.agent-thread-checkpoint.armed {
    border-color: var(--primary);
    background: rgba(73, 201, 120, .16);
    color: var(--primary);
}

.agent-gov-restore:disabled,
.agent-thread-checkpoint:disabled { cursor: default; opacity: .55; }

.agent-thread-checkpoint { margin: 4px 0 0; }

/* Judge verdict, in the thread, next to the reflection status it belongs to.
 * Score and rubric come from judge-rubric.js / judge.json — never invented,
 * and absent when the turn produced no verdict. */
.agent-reflection-status { flex-wrap: wrap; }

.agent-judge-chip { flex: 0 0 auto; margin-left: 2px; }

.agent-judge-chip .ms-icon { color: var(--success); }

/* ── Mako Agent conversation system ────────────────────────────────────────
 * DSH-inspired hierarchy adapted to the embedded Studio dock:
 * - assistant narration is open page flow, never a bubble in a card;
 * - the user's prompt is the only conversation bubble;
 * - tool traffic is a compact disclosure row, not a stack of boxes;
 * - the composer is one elevated capsule with controls inside it.
 * Mako's graphite/teal world stays authoritative; mineral green is spent only
 * on presence, progress and the primary action. */
.agent-root {
    --agent-base: #0e1718;
    --agent-raised: #1b2527;
    --agent-card: #242e30;
    --agent-card-hover: #2a3638;
    --agent-paper: #f4f2ec;
    --agent-ink-muted: rgba(244, 242, 236, .62);
    --agent-ink-faint: rgba(244, 242, 236, .56);
    --agent-line: rgba(244, 242, 236, .10);
    --agent-line-strong: rgba(244, 242, 236, .17);
    --agent-green: #49c978;
    --agent-green-hover: #68cb87;
    --agent-green-pressed: #37a862;
    --agent-teal: #123b40;
    color: var(--agent-paper);
    background: var(--agent-base);
}

.agent-header {
    flex-basis: 40px;
    gap: 8px;
    padding: 0 8px 0 12px;
    border-bottom-color: var(--agent-line);
    background: var(--agent-base);
}
.agent-title {
    color: var(--agent-paper);
    font-size: 11px;
    font-weight: 720;
    letter-spacing: .12em;
}
.agent-provider-badge {
    padding: 3px 8px;
    border-color: var(--agent-line);
    background: var(--agent-raised);
    color: var(--agent-ink-muted);
    font-size: 9px;
}
.agent-status-dot,
.agent-health-dot { width: 6px; height: 6px; box-shadow: none; }
.agent-status-dot.connected,
.agent-health-dot.ok { background: var(--agent-green); box-shadow: 0 0 0 3px rgba(73, 201, 120, .12); }

.agent-connection-banner {
    margin: 8px 10px 0;
    padding: 8px 10px;
    border-color: rgba(242, 185, 94, .30);
    border-radius: 10px;
    background: rgba(242, 185, 94, .07);
    font-size: 10px;
}

.agent-governance {
    border-bottom-color: var(--agent-line);
    background: rgba(18, 59, 64, .70);
}
.agent-governance-row { gap: 6px; padding: 5px 8px; }
.agent-gov-ring { width: 7px; height: 7px; border-width: 1.5px; }
.agent-gov-ring.live { border-color: var(--agent-green); box-shadow: 0 0 0 3px rgba(73, 201, 120, .12); }
.agent-gov-chip {
    padding: 3px 7px;
    border-color: rgba(244, 242, 236, .10);
    border-radius: 7px;
    background: rgba(14, 23, 24, .18);
    color: rgba(244, 242, 236, .76);
    font-size: 9px;
    font-weight: 600;
}
.agent-gov-chip .ms-icon { color: var(--agent-green); }
.agent-gov-mode { display: flex; min-width: 78px; align-items: center; gap: 2px; padding: 0 0 0 6px; }
.agent-gov-mode-field { display: block; min-width: 0; flex: 1 1 auto; }
.agent-gov-mode-field .agent-select {
    width: 100%;
    min-height: 26px;
    padding: 3px 20px 3px 3px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font-size: 9px;
    font-weight: 700;
}
.agent-gov-mode-field .agent-select:hover { background: rgba(244, 242, 236, .06); }
.agent-gov-mode-field .agent-select:focus-visible { outline: 2px solid rgba(73, 201, 120, .72); outline-offset: 1px; }
.agent-gov-model {
    min-width: 0;
    flex: 1 1 110px;
    padding: 0;
    color: rgba(244, 242, 236, .70);
}
.agent-gov-model-field { display: block; min-width: 0; height: 26px; }
.agent-gov-model-select {
    box-sizing: border-box;
    width: 100%;
    height: 26px;
    min-height: 26px;
    padding: 0 22px 0 8px;
    overflow: hidden;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font-size: 9px;
    font-weight: 600;
    line-height: 26px;
    vertical-align: middle;
    text-overflow: ellipsis;
}
.agent-gov-model-select:hover { background: rgba(244, 242, 236, .06); color: var(--agent-paper); }
.agent-gov-model-select:focus-visible { outline: 2px solid rgba(73, 201, 120, .72); outline-offset: 1px; }
.agent-gov-list { gap: 6px; padding: 2px 10px 9px; }
.agent-gov-list-row { padding: 5px 7px; border-radius: 7px; background: rgba(14, 23, 24, .22); }
.agent-gov-list-row .agent-gov-restore {
    min-width: 0;
    max-width: min(58%, 220px);
    overflow: hidden;
}
.agent-gov-list-row .agent-gov-restore .agent-gov-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-settings-row {
    gap: 7px;
    padding: 8px 10px;
    border-bottom-color: var(--agent-line);
    background: var(--agent-base);
}
.agent-select,
.agent-text-input {
    border-color: var(--agent-line);
    border-radius: 8px;
    background: var(--agent-raised);
}
.agent-select:focus,
.agent-text-input:focus,
.agent-input:focus { border-color: rgba(73, 201, 120, .58); }

.agent-icon-btn,
.agent-compact-btn,
.agent-suggestion,
.agent-load-older,
.agent-diff-comment,
.agent-attachment-remove {
    border-color: transparent;
    border-radius: 8px;
    background: transparent;
}
.agent-root button:focus-visible,
.agent-root select:focus-visible,
.agent-root textarea:focus-visible,
.agent-root summary:focus-visible {
    outline: 2px solid rgba(73, 201, 120, .72);
    outline-offset: 2px;
}
.agent-icon-btn:hover,
.agent-compact-btn:hover {
    border-color: transparent;
    background: rgba(244, 242, 236, .07);
    color: var(--agent-paper);
}
.agent-primary,
.agent-send {
    border-color: transparent;
    background: var(--agent-green);
    color: #0b1712;
}
.agent-send:hover { border-color: transparent; background: var(--agent-green-hover); color: #08110d; }
.agent-send:active { background: var(--agent-green-pressed); }

.agent-activity {
    flex-basis: 30px;
    padding: 0 14px;
    border-bottom: 0;
    color: var(--agent-green);
    font-size: 10px;
    font-weight: 600;
}
.agent-activity .ms-icon { font-size: 13px; }
.agent-activity.waiting-input { color: #f2b95e; }
.agent-activity.waiting-input .ms-icon { animation: none; }
.agent-activity-time { color: var(--agent-ink-faint); font-variant-numeric: tabular-nums; }

.agent-messages {
    padding: 14px 12px 18px;
    background: var(--agent-base);
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 242, 236, .22) transparent;
}
.agent-messages > * + * { margin-top: 14px; }
.agent-load-older {
    display: block;
    margin: 0 auto 4px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--agent-raised);
    color: var(--agent-ink-muted);
}

/* Turns are a semantic boundary, not a visual card. */
.agent-task-card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.agent-task-head { display: none; }
.agent-task-body { padding: 0; }
.agent-task-body > * + * { margin-top: 9px; }
.agent-task-body > .agent-message { margin-right: 0; }

/* Assistant prose occupies the full reading column. */
.agent-message {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.agent-message.assistant { color: var(--agent-paper); }
.agent-message.assistant > .agent-message-meta { display: none; }
.agent-message.user {
    width: auto;
    max-width: 94%;
    margin-left: auto;
    padding: 10px 14px;
    border: 1px solid var(--agent-line);
    border-radius: 17px 17px 5px 17px;
    background: var(--agent-card);
}
.agent-message.user > .agent-message-meta { display: none; }
.agent-message-collapsible:not(.expanded) .agent-message-text {
    height: 7.8em;
    max-height: 7.8em;
    overflow: hidden;
    clip-path: inset(0);
}
.agent-message-expand {
    display: block;
    margin: 8px 0 0 auto;
    padding: 3px 7px;
    border: 0;
    border-radius: 6px;
    background: rgba(244, 242, 236, .06);
    color: var(--agent-ink-muted);
    font-size: 9px;
}
.agent-message-expand:hover { background: rgba(244, 242, 236, .11); color: var(--agent-paper); }
.agent-message-expand:focus-visible { outline: 2px solid rgba(73, 201, 120, .72); outline-offset: 2px; }
.agent-message.error {
    padding: 10px 12px;
    border: 1px solid rgba(239, 83, 80, .32);
    border-radius: 10px;
    background: rgba(239, 83, 80, .07);
}
.agent-message-meta {
    margin-bottom: 6px;
    color: var(--agent-ink-faint);
    font-size: 9px;
}
.agent-message-meta strong { color: var(--agent-ink-muted); }
.agent-message-text {
    max-width: 68ch;
    color: var(--agent-paper);
    font-size: 13px;
    line-height: 1.62;
}
.agent-message.user .agent-message-text { color: rgba(244, 242, 236, .92); }

/* Markdown carries hierarchy through type and rhythm, not nested chrome. */
.agent-md > * { margin: 0; }
.agent-md > * + * { margin-top: 11px; }
.agent-md-h { color: var(--agent-paper); font-weight: 700; letter-spacing: -.01em; }
.agent-md-h1 { font-size: 17px; line-height: 1.3; }
.agent-md-h2 { font-size: 15px; line-height: 1.35; }
.agent-md-h3 { font-size: 13px; line-height: 1.4; }
.agent-md-list { display: grid; gap: 5px; padding-left: 20px; }
.agent-md-list::marker,
.agent-md-item::marker { color: var(--agent-green); font-variant-numeric: tabular-nums; }
.agent-md-item { display: list-item; min-width: 0; padding-left: 2px; text-indent: 0; }
.agent-md-quote {
    padding: 7px 0 7px 12px;
    border-left-color: rgba(73, 201, 120, .55);
    color: var(--agent-ink-muted);
}
.agent-md-rule { height: 1px; margin: 12px 0; border: 0; background: var(--agent-line); }
.agent-md-code {
    border-radius: 4px;
    background: rgba(73, 201, 120, .10);
    color: #dff8e7;
    font-family: "SFMono-Regular", Consolas, monospace;
}
.agent-md-pre {
    padding: 11px 12px;
    border-color: var(--agent-line);
    border-radius: 10px;
    background: #10191a;
    color: rgba(244, 242, 236, .82);
    font: 10px/1.6 "SFMono-Regular", Consolas, monospace;
}
.agent-md-link { color: var(--agent-green-hover); text-decoration-color: rgba(104, 203, 135, .45); }

.agent-image-review {
    max-width: 336px;
    margin: 8px 0 0;
    overflow: hidden;
    border: 1px solid var(--agent-line);
    border-radius: 11px;
    background: #081011;
}
.agent-image-open {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #081011;
    cursor: zoom-in;
}
.agent-image-open:focus-visible { outline: 2px solid rgba(73, 201, 120, .72); outline-offset: -3px; }
.agent-message-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 200px;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
    background: #081011;
    object-fit: contain;
}
.agent-image-caption {
    display: flex;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    padding: 5px 7px 5px 9px;
    border-top: 1px solid var(--agent-line);
    color: var(--agent-ink-muted);
    font-size: 9px;
}
.agent-image-caption-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-image-dimensions { color: var(--agent-ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.agent-image-caption-spacer { flex: 1 1 auto; }
.agent-image-caption-action {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--agent-ink-muted);
}
.agent-image-caption-action:hover { background: rgba(244, 242, 236, .07); color: var(--agent-paper); }
.agent-image-caption-action:focus-visible { outline: 2px solid rgba(73, 201, 120, .72); outline-offset: 1px; }
.agent-image-compare { gap: 8px; margin-top: 10px; }
.agent-image-compare-cell { overflow: hidden; border-color: var(--agent-line); border-radius: 10px; background: #081011; }
.agent-image-compare-cell .agent-image-open { height: 100%; }
.agent-image-compare-label { border-radius: 6px; background: rgba(14, 23, 24, .90); }
.agent-image-review-card { max-width: min(920px, 100%); overflow: hidden; }
.agent-studio-modal { z-index: 10040; }
.agent-studio-modal .agent-image-review-card {
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    max-width: none;
    max-height: none;
}
.agent-image-review-viewport {
    max-height: calc(100vh - 150px);
    overflow: auto;
    background: #081011;
}
.agent-image-review-full {
    display: block;
    max-width: none;
    max-height: none;
    margin: 0 auto;
    object-fit: none;
    background: #081011;
}
.agent-image-review-full.fit { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 175px); object-fit: contain; }
.agent-image-review-actions { flex-wrap: wrap; }
.agent-image-review-actions .ms-icon { margin-right: 4px; font-size: 13px; vertical-align: middle; }

/* DSH-style tool traffic: a quiet 28px disclosure line, details on demand. */
.agent-burst {
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
}
.agent-burst-head {
    min-height: 26px;
    padding: 2px 6px;
    border-radius: 7px;
    color: var(--agent-ink-muted);
    font-size: 10px;
}
.agent-burst-count { color: var(--agent-ink-faint); }
.agent-burst-names { min-width: 0; overflow: hidden; color: var(--agent-ink-muted); opacity: 1; text-overflow: ellipsis; white-space: nowrap; }
.agent-burst-head:hover { background: rgba(244, 242, 236, .055); color: var(--agent-paper); }
.agent-burst-head .ms-icon { color: var(--agent-ink-muted); }
.agent-burst[open] .agent-burst-head { border-bottom: 0; background: rgba(244, 242, 236, .045); }
.agent-burst .agent-message { padding: 4px 7px 4px 26px; }

.agent-thinking,
.agent-tool-card,
.agent-diff-card {
    margin-top: 4px;
    border-color: var(--agent-line);
    border-radius: 9px;
    background: var(--agent-raised);
    color: var(--agent-ink-muted);
    font-size: 10px;
}
.agent-thinking summary,
.agent-tool-card summary { min-height: 27px; padding: 4px 7px; }
.agent-message-bare > .agent-tool-card,
.agent-message-bare > .agent-tool-block > .agent-tool-card {
    border-color: transparent;
    background: transparent;
}
.agent-message-bare > .agent-tool-card summary,
.agent-message-bare > .agent-tool-block > .agent-tool-card summary { padding-right: 6px; padding-left: 6px; }
.agent-message-bare > .agent-tool-card:hover,
.agent-message-bare > .agent-tool-block > .agent-tool-card:hover { background: rgba(244, 242, 236, .045); }
.agent-tool-running summary .ms-icon { color: var(--agent-green); animation: agent-spin 1s linear infinite; }
.agent-command-card summary { display: flex; align-items: center; gap: 6px; }
.agent-command-preview {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    color: var(--agent-ink-faint);
    font: 9px/1.4 "SFMono-Regular", Consolas, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agent-thinking pre,
.agent-tool-card pre {
    padding: 10px;
    border-top-color: var(--agent-line);
    background: #10191a;
    color: var(--agent-ink-muted);
    font: 9px/1.55 "SFMono-Regular", Consolas, monospace;
}
.agent-tool-status { color: var(--agent-ink-faint); }
.agent-diff-lines { border-top-color: var(--agent-line); }
.agent-diff-side.new.changed { background: rgba(73, 201, 120, .09); }
.agent-diff-side.old.changed { background: rgba(239, 83, 80, .08); }

.agent-turn-evidence {
    margin-top: 7px;
    overflow: hidden;
    border: 1px solid rgba(73, 201, 120, .24);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(24, 45, 46, .92), rgba(16, 28, 29, .96));
    color: var(--agent-ink-muted);
    font-size: 10px;
}
.agent-turn-evidence.partial,
.agent-turn-evidence.unverified { border-color: rgba(224, 180, 95, .30); }
.agent-turn-evidence-header {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    padding: 8px 9px 7px;
}
.agent-turn-evidence-header .ms-icon { color: var(--agent-green); font-size: 14px; }
.agent-turn-evidence.partial .agent-turn-evidence-header .ms-icon,
.agent-turn-evidence.unverified .agent-turn-evidence-header .ms-icon { color: #e0b45f; }
.agent-turn-evidence-count { margin-left: auto; color: var(--agent-ink-faint); white-space: nowrap; }
.agent-turn-evidence-files { display: grid; gap: 1px; margin: 0; padding: 0 7px 7px; list-style: none; }
.agent-turn-evidence-file {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    padding: 5px 6px;
    border-radius: 6px;
    background: rgba(244, 242, 236, .035);
}
.agent-turn-evidence-file > .ms-icon { color: var(--agent-green); font-size: 12px; }
.agent-turn-evidence-file > code { min-width: 0; overflow: hidden; color: var(--agent-paper); text-overflow: ellipsis; white-space: nowrap; }
.agent-turn-evidence-diff { grid-column: 2; min-width: 0; margin-top: 4px; }
.agent-turn-evidence-diff summary { color: var(--agent-green-hover); cursor: pointer; }
.agent-turn-evidence-diff pre { max-height: 240px; margin: 5px 0 0; padding: 7px; overflow: auto; border-radius: 6px; background: #0b1314; font: 9px/1.5 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; }
.agent-turn-evidence-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; padding: 7px 9px; border-top: 1px solid var(--agent-line); color: var(--agent-ink-faint); }
.agent-evidence-restore { min-height: 22px; margin-left: auto; padding: 3px 8px; border: 1px solid var(--agent-line-strong); border-radius: 5px; color: var(--agent-ink); font-size: 10px; }

.agent-task-toolbar {
    gap: 3px;
    min-height: 26px;
    margin-top: 2px;
    padding: 2px 0 0;
    border-top: 0;
    opacity: .68;
}
.agent-task-card:hover .agent-task-toolbar { opacity: 1; }
.agent-task-action {
    border-radius: 7px;
    color: var(--agent-ink-faint);
}
.agent-task-action:hover {
    border-color: transparent;
    background: rgba(244, 242, 236, .07);
    color: var(--agent-paper);
}
.agent-task-action[aria-pressed="true"] {
    border-color: transparent;
    background: rgba(73, 201, 120, .13);
    color: var(--agent-green-hover);
}

.agent-reflection-status {
    margin-top: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(73, 201, 120, .18);
    border-radius: 10px;
    background: rgba(18, 59, 64, .46);
    color: var(--agent-ink-muted);
    font-size: 10px;
}
.agent-reflection-status .ms-icon,
.agent-judge-chip .ms-icon { color: var(--agent-green); }
.agent-reflection-policy { color: var(--agent-ink-faint); font-size: 9px; }

.agent-jump-latest {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    align-self: center;
    max-width: calc(100% - 24px);
    min-height: 26px;
    margin: 5px auto 3px;
    padding: 4px 10px;
    overflow: hidden;
    border: 1px solid var(--agent-line-strong);
    border-radius: 999px;
    background: var(--agent-card);
    color: var(--agent-ink-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.agent-jump-latest[hidden] { display: none; }
.agent-jump-latest:hover { border-color: rgba(73, 201, 120, .30); color: var(--agent-paper); }
.agent-jump-latest:focus-visible { outline: 2px solid rgba(73, 201, 120, .72); outline-offset: 2px; }

.agent-next-actions {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    gap: 5px;
    padding: 4px 10px 6px;
    background: var(--agent-base);
}
.agent-next-chip {
    padding: 5px 10px;
    border-color: var(--agent-line);
    border-radius: 999px;
    background: var(--agent-raised);
    color: var(--agent-ink-muted);
    font-size: 9px;
}
.agent-next-chip:hover { border-color: rgba(73, 201, 120, .30); background: var(--agent-card); color: var(--agent-paper); }

/* One floating composer surface. */
.agent-composer {
    z-index: 5;
    margin: 0 8px 10px;
    padding: 8px 9px 7px;
    border: 1px solid var(--agent-line-strong);
    border-radius: 14px;
    background: var(--agent-raised);
}
.agent-composer.dragover { border-color: rgba(73, 201, 120, .50); background: var(--agent-card); }
.agent-input {
    min-height: 36px;
    max-height: 132px;
    padding: 3px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--agent-paper);
    font-size: 13px;
    line-height: 1.5;
    resize: none;
}
.agent-input:focus { border-color: transparent; }
.agent-input::placeholder { color: rgba(244, 242, 236, .46); }
.agent-composer-bar { gap: 6px; margin-top: 5px; }
.agent-composer-menu-btn { border-radius: 999px; }
.agent-composer-menu-btn[aria-expanded="true"] {
    border-color: transparent;
    background: rgba(73, 201, 120, .12);
    color: var(--agent-green-hover);
}
.agent-composer-menu {
    bottom: 38px;
    width: 228px;
    padding: 6px;
    border-color: var(--agent-line-strong);
    border-radius: 12px;
    background: var(--agent-card);
    box-shadow: none;
}
.agent-composer-action { min-height: 32px; border-radius: 8px; }
.agent-composer-action:hover,
.agent-composer-action:focus-visible { background: rgba(244, 242, 236, .07); color: var(--agent-paper); }
.agent-send { flex-basis: 34px; width: 34px; height: 34px; border-radius: 999px; }
.agent-send .ms-icon { font-size: 16px; }
.agent-context-badge {
    border-color: var(--agent-line);
    border-radius: 999px;
    color: var(--agent-ink-faint);
}

.agent-pinned-comments,
.agent-attachments { gap: 6px; margin-bottom: 8px; }
.agent-context { gap: 6px; margin-bottom: 8px; }
.agent-context-chip,
.agent-comment-chip {
    padding: 4px 5px 4px 8px;
    border-color: rgba(73, 201, 120, .22);
    border-radius: 999px;
    background: rgba(73, 201, 120, .07);
    color: var(--agent-ink-muted);
}
.agent-attachment { width: 52px; height: 52px; flex-basis: 52px; border-color: var(--agent-line); border-radius: 9px; }

.agent-queued,
.agent-pick-banner,
.agent-revert,
.agent-fallback {
    margin-bottom: 8px;
    padding: 7px 8px;
    border-radius: 9px;
}
.agent-queued { border-color: var(--agent-line-strong); }
.agent-pick-banner,
.agent-fallback { border-color: rgba(73, 201, 120, .24); background: rgba(73, 201, 120, .07); }
.agent-revert { border-color: rgba(242, 185, 94, .26); background: rgba(242, 185, 94, .06); }

.agent-empty {
    gap: 10px;
    min-height: 220px;
    padding: 28px 22px;
}
.agent-empty .ms-icon { color: var(--agent-green); font-size: 32px; }
.agent-empty strong { color: var(--agent-paper); font-size: 15px; letter-spacing: -.01em; }
.agent-empty span { max-width: 280px; color: var(--agent-ink-muted); font-size: 11px; line-height: 1.55; }
.agent-starters { max-width: 340px; gap: 12px; }
.agent-starter-group { gap: 7px; }
.agent-starter-group-label { color: var(--agent-ink-faint); font-size: 9px !important; letter-spacing: .11em; }
.agent-starter,
.agent-starter-template {
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--agent-line);
    border-radius: 10px;
    background: var(--agent-raised);
    color: var(--agent-ink-muted);
    font-size: 10px;
}
.agent-starter:hover,
.agent-starter-template:hover { border-color: rgba(73, 201, 120, .28); background: var(--agent-card); color: var(--agent-paper); }
/* Agent Templates intentionally reassert after the late mineral cascade above:
 * violet marks a reusable generator while the graphite/mineral surface keeps it
 * native to Mako rather than turning it into a second primary action. */
.agent-starter-group-templates .agent-starter-group-label { color: #c9b8ff; }
.agent-starter-template {
    border-color: rgba(177, 145, 255, .50);
    border-style: solid;
    background: linear-gradient(135deg, rgba(118, 82, 181, .24), rgba(27, 37, 39, .96));
    color: rgba(244, 242, 236, .88);
    box-shadow: none;
    cursor: grab;
}
.agent-starter-template:hover {
    border-color: rgba(201, 184, 255, .82);
    background: linear-gradient(135deg, rgba(137, 96, 207, .34), var(--agent-card));
    color: var(--agent-paper);
}
.agent-starter-template:active { cursor: grabbing; }
.agent-starter-group-templates.unavailable .agent-starter-group-label { opacity: .72; }
.agent-starter-template:disabled { opacity: .58; cursor: not-allowed; filter: saturate(.62); }

.agent-drawer { background: var(--agent-base); }
.agent-drawer-head { min-height: 42px; padding: 6px 10px; border-bottom-color: var(--agent-line); background: var(--agent-base); }
.agent-drawer-title { color: var(--agent-paper); font-weight: 700; letter-spacing: .10em; }
.agent-drawer-search { margin: 7px 10px; width: calc(100% - 20px); }
.agent-drawer-list { padding: 6px; }
.agent-drawer-group { color: var(--agent-ink-faint); letter-spacing: .10em; }
.agent-drawer-row { min-height: 38px; padding: 7px 8px; border-radius: 9px; }
.agent-drawer-row:hover { background: rgba(244, 242, 236, .055); }
.agent-drawer-row.active { background: var(--agent-raised); }
.agent-drawer-meta { color: var(--agent-ink-faint); }
.agent-drawer-dot.busy,
.agent-drawer-row.unread .agent-drawer-dot { background: var(--agent-green); }

.agent-modal { background: rgba(5, 10, 10, .76); }
.agent-modal-card {
    gap: 10px;
    padding: 14px;
    border-color: var(--agent-line-strong);
    border-radius: 14px;
    background: var(--agent-raised);
    box-shadow: none;
}
.agent-modal-card h3 { color: var(--agent-paper); font-size: 14px; }
.agent-permission-card {
    padding: 11px;
    border-color: rgba(242, 185, 94, .28);
    border-radius: 10px;
    background: rgba(242, 185, 94, .06);
}
.agent-permission-card.resolved {
    display: flex;
    min-height: 26px;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-color: transparent;
    background: transparent;
    color: var(--agent-ink-faint);
}
.agent-permission-card.resolved > .ms-icon { margin-right: 0; color: var(--agent-ink-faint); font-size: 13px; }
.agent-permission-card.resolved > strong {
    min-width: 0;
    overflow: hidden;
    color: var(--agent-ink-muted);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agent-permission-card.resolved > .agent-resolved {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    color: var(--agent-green-hover);
    font-size: 9px;
    white-space: nowrap;
}
.agent-permission-card.resolved > .agent-resolved.danger { color: var(--danger); }
.agent-suggestions {
    right: 10px;
    bottom: 98px;
    left: 10px;
    border-color: var(--agent-line-strong);
    border-radius: 12px;
    background: var(--agent-card);
    box-shadow: none;
}
.agent-suggestion { min-height: 34px; padding: 7px 10px; font-size: 10px; }
.agent-suggestion:hover { background: rgba(244, 242, 236, .07); color: var(--agent-paper); }

.agent-gov-checkpoints-count { display: none; }
.agent-diff-line:focus-within .agent-diff-comment { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .agent-tool-running summary .ms-icon,
    .agent-activity .ms-icon,
    .agent-node-fetch-track.indeterminate .agent-node-fetch-fill { animation: none !important; }
}

/* Splitter-driven docks stay narrow inside a wide Studio window, so viewport
   media queries alone never fire. The JS resize projection mirrors the same
   compact contract with measured panel classes. */
.agent-root.agent-narrow .agent-messages { padding: 12px 10px 16px; }
.agent-root.agent-narrow .agent-message.user { max-width: 92%; }
.agent-root.agent-narrow .agent-message-text { font-size: 13px; line-height: 1.58; }
.agent-root.agent-narrow .agent-md-h1 { font-size: 16px; }
.agent-root.agent-narrow .agent-image-compare { grid-template-columns: 1fr; }
.agent-root.agent-narrow .agent-message-image { max-height: 170px; }
.agent-root.agent-narrow .agent-next-actions { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.agent-root.agent-narrow .agent-next-chip { flex: 0 0 auto; min-width: 0; white-space: nowrap; }
.agent-root.agent-narrow .agent-composer { margin-right: 6px; margin-bottom: 8px; margin-left: 6px; }
.agent-root.agent-narrow .agent-input { min-height: 34px; }
.agent-root.agent-narrow .agent-governance-row { flex-wrap: nowrap; gap: 5px; padding: 5px 7px; }
.agent-root.agent-narrow .agent-gov-chip { padding-right: 6px; padding-left: 6px; }
.agent-root.agent-narrow .agent-gov-model { flex-basis: 74px; }
.agent-root.agent-ultranarrow .agent-provider-badge { max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-root.agent-ultranarrow .agent-gov-checkpoints-label { display: none; }
.agent-root.agent-ultranarrow .agent-gov-checkpoints-count { display: inline; }
.agent-root.agent-ultranarrow .agent-gov-checkpoints { min-width: 30px; }
.agent-root.agent-ultranarrow .agent-gov-model { flex-basis: 62px; }
.agent-root.agent-ultranarrow .agent-task-toolbar { opacity: 1; }

@media (max-width: 420px) {
    .agent-messages { padding: 14px 11px 20px; }
    .agent-message.user { max-width: 92%; }
    .agent-message-text { font-size: 13px; line-height: 1.58; }
    .agent-md-h1 { font-size: 16px; }
    .agent-image-compare { grid-template-columns: 1fr; }
    .agent-message-image { max-height: 170px; }
    .agent-next-actions { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .agent-next-chip { flex: 0 0 auto; min-width: 0; white-space: nowrap; }
    .agent-composer { margin-right: 6px; margin-bottom: 8px; margin-left: 6px; }
    .agent-input { min-height: 34px; }
    .agent-governance-row { flex-wrap: nowrap; gap: 5px; padding: 6px 7px; }
    .agent-gov-chip { padding-right: 6px; padding-left: 6px; }
    .agent-gov-model { flex-basis: 74px; }
}

@media (max-width: 340px) {
    .agent-provider-badge { max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .agent-gov-checkpoints-label { display: none; }
    .agent-gov-checkpoints-count { display: inline; }
    .agent-gov-checkpoints { min-width: 30px; }
    .agent-gov-model { flex-basis: 62px; }
    .agent-task-toolbar { opacity: 1; }
}