/* 30-mage-inline.css — the MaGE agent block, inline in the output.
 *
 * The agent is not a window. Its actions, its current task, its
 * approval state and its history are rendered in the conversation,
 * as ordinary output, in the QUAD language: square corners, hairline
 * borders, inset bezel, mono labels in wide tracking, copper as the
 * only accent.
 */

.mage-inline {
    width: 100%;
}

.mage-inline-card {
    border: 1px solid var(--border-2);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: var(--shadow-inset-light);
    overflow: hidden;
}

/* ── The bar ────────────────────────────────────────────────── */

.mage-inline-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-2);
    background: rgba(255, 255, 255, 0.015);
}

.mage-inline-badge {
    font: 700 9px var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-accent-bright);
    border: 1px solid var(--border-accent);
    background: rgba(204, 144, 80, 0.08);
    padding: 3px 7px;
    flex-shrink: 0;
}

.mage-inline-title {
    font: 600 12px var(--body);
    color: var(--c-ink-dim);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mage-inline-state {
    font: 700 9px var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid var(--border-2);
    color: var(--c-ink-muted);
    flex-shrink: 0;
}
.mage-inline-state--run {
    color: var(--c-accent-bright);
    border-color: var(--border-accent);
    background: rgba(204, 144, 80, 0.08);
}
.mage-inline-state--good {
    color: var(--c-good);
    border-color: rgba(92, 184, 122, 0.35);
    background: rgba(92, 184, 122, 0.08);
}
.mage-inline-state--bad {
    color: var(--c-bad);
    border-color: rgba(224, 82, 82, 0.35);
    background: rgba(224, 82, 82, 0.08);
}
.mage-inline-state--wait {
    color: var(--c-accent);
    border-color: var(--border-accent);
}

/* ── Sections ───────────────────────────────────────────────── */

.mage-inline-section {
    padding: 12px;
    border-bottom: 1px solid var(--border-2);
}
.mage-inline-section:last-child {
    border-bottom: none;
}

.mage-inline-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 700 9px var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    margin-bottom: 8px;
}
.mage-inline-label .material-symbols-rounded {
    font-size: 14px;
}
.mage-inline-label--warn {
    color: var(--c-accent);
}

/* The task section is hidden until there IS a task. */
.mage-inline-task:empty,
.mage-inline-task {
    display: block;
}
.mage-inline:not(.has-task) .mage-inline-task {
    display: none;
}

/* ── The current task ───────────────────────────────────────── */

.mage-inline-task-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.mage-inline-task-icon {
    font-size: 16px;
    color: var(--c-accent);
    flex-shrink: 0;
}
.mage-inline-task-row--success .mage-inline-task-icon {
    color: var(--c-good);
}
.mage-inline-task-row--error .mage-inline-task-icon,
.mage-inline-task-row--blocked .mage-inline-task-icon {
    color: var(--c-bad);
}
.mage-inline-task-row--paused .mage-inline-task-icon {
    color: var(--c-accent);
}

.mage-inline-task-label {
    font: 600 13px var(--body);
    color: var(--c-ink);
}

.mage-inline-task-detail {
    font: 500 10px var(--mono);
    letter-spacing: 0.06em;
    color: var(--c-ink-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    flex: 1 1 120px;
}

.mage-inline-task-idle,
.mage-inline-history-idle {
    font: 500 11px var(--body);
    color: var(--c-ink-muted);
}

/* The spinner — a rotating arc, not a dot. */
.mage-inline-task-spinner {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 1px solid var(--border-2);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    animation: mageSpin 720ms linear infinite;
    margin-left: auto;
}
.mage-inline-task-row--success .mage-inline-task-spinner,
.mage-inline-task-row--error .mage-inline-task-spinner,
.mage-inline-task-row--blocked .mage-inline-task-spinner {
    display: none;
}
@keyframes mageSpin {
    to { transform: rotate(360deg); }
}

/* ── The history ────────────────────────────────────────────── */

.mage-inline-history-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* In the focused view the history is its own scroll region, so a new
 * action row is always at the bottom and visible. The region is
 * pinned by QUAD.Focus.refresh(). */
.chat-list.is-focused .msg.is-focused-bot .mage-inline-history-body {
    max-height: 190px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-3) transparent;
}

.chat-list.is-focused .msg.is-focused-bot .mage-inline-history-body::-webkit-scrollbar {
    width: 5px;
}

.chat-list.is-focused .msg.is-focused-bot .mage-inline-history-body::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 0;
}

.mage-inline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border: 1px solid transparent;
    transition: background 150ms, border-color 150ms;
    animation: mageRowIn 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes mageRowIn {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

.mage-inline-row-icon {
    font-size: 14px;
    color: var(--c-ink-muted);
    flex-shrink: 0;
}
.mage-inline-row--success .mage-inline-row-icon { color: var(--c-good); }
.mage-inline-row--error .mage-inline-row-icon { color: var(--c-bad); }
.mage-inline-row--blocked .mage-inline-row-icon { color: var(--c-bad); }
.mage-inline-row--executing .mage-inline-row-icon { color: var(--c-accent); }
.mage-inline-row--paused .mage-inline-row-icon { color: var(--c-accent); }

.mage-inline-row-label {
    font: 600 12px var(--body);
    color: var(--c-ink-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    max-width: 60%;
}
.mage-inline-row--success .mage-inline-row-label { color: var(--c-ink); }
.mage-inline-row--error .mage-inline-row-label,
.mage-inline-row--blocked .mage-inline-row-label { color: var(--c-bad); }

.mage-inline-row-detail {
    font: 500 10px var(--mono);
    letter-spacing: 0.05em;
    color: var(--c-ink-muted);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mage-inline-row-diff {
    font: 700 10px var(--mono);
    letter-spacing: 0.08em;
    color: var(--c-good);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── The approval ───────────────────────────────────────────── */

.mage-inline-approval:empty {
    display: none;
}

.mage-inline-approval-inner {
    border: 1px solid var(--border-accent);
    background: rgba(204, 144, 80, 0.05);
    padding: 12px;
    animation: mageApprovalIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes mageApprovalIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.mage-inline-approval-name {
    font: 600 14px var(--body);
    color: var(--c-ink);
    margin-bottom: 8px;
}

.mage-inline-approval-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.mage-inline-approval-preview {
    max-height: 220px;
    overflow: auto;
    margin: 0 0 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-2);
    color: var(--c-ink-dim);
    font: 400 11px/1.55 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    white-space: pre-wrap;
    word-break: break-word;
}

.mage-inline-approval-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Reduced motion ─────────────────────────────────────────── */

body.reduced-ui .mage-inline-task-spinner,
body.reduced-ui .mage-inline-row,
body.reduced-ui .mage-inline-approval-inner {
    animation: none !important;
}