/* ============================================================
   Output — Live output, capture blocks, syntax highlighting,
            xterm container
   ============================================================ */

/* ── Loading Skeleton ──────────────────────────────────────── */

.loading-skeleton {
    position: relative;
}

.loading-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient(
        110deg,
        var(--bg-primary) 30%,
        var(--bg-secondary) 50%,
        var(--bg-primary) 70%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Live Body ─────────────────────────────────────────────── */

.live-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

/* Layout swap disabled for now — may revisit later
.live-body.layout-team .live-left-column {
    order: 2;
}
.live-body.layout-team .agentic-state {
    order: 1;
}
*/

.live-left-column {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--bg-primary);
}

/* ── Bottom Preview Pane ──────────────────────────────────── */

.preview-pane-resize-handle {
    height: 1px;
    cursor: row-resize;
    background: var(--border);
    flex-shrink: 0;
    position: relative;
}

.preview-pane-resize-handle:hover,
.preview-pane-resize-handle.dragging {
    background: var(--accent);
}

.preview-pane-resize-handle::before {
    content: '';
    position: absolute;
    inset: -4px 0;
}

.preview-pane {
    height: 280px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    border-top: 1px solid var(--border);
}

body.panel-dragging .preview-pane {
    contain: strict;
    transition: none;
}

.preview-tabbar {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}

.preview-tabbar .preview-tabs {
    flex: 1;
    min-width: 0;
    border-bottom: 0;
}

.preview-dock-btn {
    background: none;
    border: none;
    border-left: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 8px;
    display: flex;
    align-items: center;
}

.preview-dock-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

/* The maximise toggle (#4931): 44px wide, and 44px high where the pointer is a finger; the bar keeps its height with a mouse */
.preview-max-btn { min-width: 44px; justify-content: center; }
.preview-max-btn[hidden] { display: none; }
@media (pointer: coarse) { .preview-max-btn, .preview-dock-btn { min-height: 44px; } }
.preview-column-resize-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Maximised: the column takes the whole centre, Chat is hidden behind it, the width it had is still on it (inline) and comes back with the class gone */
.live-body.preview-maximised .live-left-column { display: none; }
.live-body.preview-maximised .preview-column-resize-handle { display: none !important; }
.live-body.preview-maximised .preview-column { flex: 1 1 auto; width: auto !important; min-width: 0; }

/* Docked as a full-height column between the terminal and the side panel */
.preview-column {
    width: 480px;
    min-width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
}

.preview-pane.docked-column {
    height: auto;
    flex: 1;
    min-height: 0;
    border-top: 0;
}

@media (max-width: 767px) {
    .preview-dock-btn:not(.preview-max-btn):not(.preview-full-back) { display: none; }
}

/* A phone's preview, full screen (#5173): the pane leaves the sheet's lower half for a fixed layer over the page, inside the safe-area insets; the tab bar, the toolbar and the body stack in it and
   the body scrolls. The side panel it sits in is lifted above the top bar while it is open (z-index 90: under the dialogs, 100 and up). */
.preview-full-back { display: none; }
@media (max-width: 767px) {
    .preview-pane.preview-phone-full {
        position: fixed; inset: 0; z-index: 90; height: auto; min-height: 0; width: auto; max-width: none; border-top: 0;
        padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        box-sizing: border-box; background: var(--bg-primary);
    }
    .preview-pane.preview-phone-full .preview-full-back { display: flex; min-height: 44px; min-width: 44px; justify-content: center; border-left: 0; border-right: 1px solid var(--border); color: var(--text-primary); }
    .preview-pane.preview-phone-full .preview-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
    body:has(.preview-pane.preview-phone-full) .agentic-state.mobile-panel-overlay { z-index: 90; }
}

.preview-tabs {
    display: flex;
    align-items: stretch;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
    height: 32px;
}

.preview-tabs::-webkit-scrollbar { display: none; }

.preview-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    font-size: 0.75rem;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    cursor: pointer;
    border-right: 1px solid var(--border);
    white-space: nowrap;
    user-select: none;
    transition: background 0.1s;
    min-width: 0;
}

.preview-tab:hover {
    background: var(--bg-hover);
}

.preview-tab.active {
    color: var(--text-primary);
    background: var(--bg-primary);
}

.preview-tab.preview .preview-tab-name {
    font-style: italic;
}

.preview-tab-icon {
    font-size: 0.6875rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.preview-tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.preview-tab-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
    padding: 0 2px;
    border-radius: var(--radius-xs);
    opacity: 0;
    transition: opacity 0.1s, color 0.1s;
    flex-shrink: 0;
}

.preview-tab:hover .preview-tab-close,
.preview-tab.active .preview-tab-close {
    opacity: 1;
}

.preview-tab-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.preview-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.preview-toolbar:empty { display: none; }

.preview-toolbar-path {
    flex: 1;
    min-width: 0;
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
    text-align: left;
}

.preview-pane-cm {
    height: 100%;
}

/* The document and its comments (#5311): a row; the panel is a bottom sheet over the document when the pane is narrower than 720 px (the container query in artifact-comments.css). */
.preview-main {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    min-width: 0;
    position: relative;
    container: pv / inline-size;
}

.preview-body {
    flex: 1;
    min-width: 0;
    overflow: auto;
    background: var(--bg-primary);
    min-height: 0;
}

.preview-pane-loading,
.preview-pane-error {
    padding: 16px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: var(--font-sans);
}

.preview-pane-error {
    color: var(--error);
}

.preview-pane-markdown {
    overflow-y: auto;
    font-size: 0.875rem;
}

.preview-pane-code {
    margin: 0;
    padding: 12px 16px;
    overflow: auto;
    font-size: 0.75rem;
    line-height: 1.5;
    font-family: var(--font-mono);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.preview-pane-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

/* ── Terminal Header Bar ───────────────────────────────────── */

.terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    height: 36px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.terminal-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.terminal-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
}

/* Same state table as the agent rows (render.js SESSION_STATES) */
.terminal-status-dot.working   { background: var(--success); }
.terminal-status-dot.waiting   { background: var(--warning); }
.terminal-status-dot.stuck     { background: var(--error); }
.terminal-status-dot.your-turn { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-primary); }
.terminal-status-dot.sleeping,
.terminal-status-dot.ended,
.terminal-status-dot.done      { background: var(--text-muted); opacity: 0.7; }
.terminal-status-dot.stale,
.terminal-status-dot.task-idle { background: var(--text-muted); } /* never yellow (#3227) */

.terminal-session-label {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-left: 4px;
}

.terminal-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.terminal-header-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}

.terminal-header-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}
/* #4344: the header's glyph buttons grow with the text: their drawn icons (svg width/height attributes are 14 and 16) are in rem */
.terminal-header-btn svg { width: 0.875rem; height: 0.875rem; }
.top-bar-btn svg { width: 1rem; height: 1rem; }

/* ── Output Scroll ─────────────────────────────────────────── */

.output-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.output-scroll .line {
    padding: 1px 0;
}

.output-scroll .line.status-line {
    color: var(--accent);
    font-weight: 600;
}

.output-scroll .line.summary-line {
    color: var(--warning);
    font-weight: 600;
}

.capture-text {
    color: var(--text-secondary);
}

/* Editor / terminal library loading or failed to load (#3083, vendor_loader.js) */
.vendor-load-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: var(--font-sans);
}

.vendor-load-notice.vendor-load-error {
    color: var(--error);
}

/* ── xterm.js Container ────────────────────────────────────── */

.xterm-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    /* More room under the last line than around the rest: the terminal ends a little above the bar, so the last line and the cursor
       never sit on an edge (#4044). The fit reads this padding, so the rows still match what is visible. */
    padding: 4px 4px 10px;
    background: var(--bg-primary);
}

.xterm-container .xterm {
    height: 100%;
}

.xterm-container .xterm .xterm-viewport {
    scrollbar-width: none;
}

.xterm-container .xterm-viewport::-webkit-scrollbar {
    display: none;
}

/* Prevent last-column clipping at fractional zoom levels (e.g. 120%).
   xterm's DOM renderer computes letter-spacing from two measurements that
   disagree at non-integer zoom, accumulating ~1/64px per character — over
   130 columns the row text overflows the row's clip box. The 4px padding
   matches the container's own padding and absorbs the drift. */
.xterm-container .xterm .xterm-rows > div {
    box-sizing: content-box;
    padding-right: 4px;
}

/* During panel drags, freeze the xterm container's layout so the browser
   skips re-rendering the terminal canvas on every frame. */
body.panel-dragging .xterm-container {
    contain: strict;
}

.xterm-container.xterm-focused {
    outline: 1px solid var(--accent-primary);
    outline-offset: -1px;
    border-radius: var(--radius-sm);
}

/* The slim bar that finishes the Terminal view (#4044): state at the left, size, then the typing hint at the right. */
.terminal-statusbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    min-height: 26px;
    padding: 0 12px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: content-box;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm, 11px);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
}
.terminal-statusbar-state { display: inline-flex; align-items: center; gap: 6px; }
.terminal-statusbar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.terminal-statusbar[data-state="connected"] .terminal-statusbar-dot { background: var(--success); }
.terminal-statusbar[data-state="reconnecting"] .terminal-statusbar-dot,
.terminal-statusbar[data-state="restarting"] .terminal-statusbar-dot,
.terminal-statusbar[data-state="connecting"] .terminal-statusbar-dot { background: var(--warning); }
.terminal-statusbar[data-state="ended"] .terminal-statusbar-dot { background: var(--error); }
.terminal-statusbar-size { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.xterm-focus-hint {
    margin-left: auto;
    color: var(--text-muted);
    opacity: 0.85;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.2s;
}
.terminal-statusbar.terminal-statusbar-focused .xterm-focus-hint {
    opacity: 0.45;
}

.selection-pause-badge {
    position: absolute;
    top: 8px;
    right: 12px;
    background: var(--warning);
    color: var(--bg-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-ml);
    pointer-events: none;
    opacity: 0.9;
    z-index: 10;
}

.xterm-disconnected-badge {
    position: absolute;
    top: 8px;
    left: 12px;
    background: var(--danger);
    color: var(--text-on-accent);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-ml);
    pointer-events: none;
    opacity: 0.9;
    z-index: 10;
    display: none;
}

.session-ended-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-primary) 94%, transparent); /* near-solid: the chat's empty-state text must not show through the words (#4481, UX) */
    z-index: 10;
    border-radius: var(--radius-md);
}

.session-ended-content {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.session-ended-content p {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--text-secondary);
}

.restart-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: skeleton-shimmer-spin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes skeleton-shimmer-spin {
    to { transform: rotate(360deg); }
}

/* ── Capture Blocks ────────────────────────────────────────── */

.capture-block {
    border-radius: var(--radius-md);
    padding: 8px 12px;
    margin-bottom: 12px;
    border-left: 3px solid transparent;
}

.capture-block-text {
    background: var(--capture-text-bg);
    border-left-color: var(--border);
}

.capture-block-tool {
    background: var(--capture-tool-bg);
    border-left-color: var(--accent-dim);
}

.capture-block-user {
    background: var(--capture-user-bg);
    border-left-color: var(--badge-claude);
}

.capture-block-pulse {
    background: var(--capture-pulse-bg);
    border-left-color: var(--success);
}

.capture-block-status {
    background: transparent;
    border-left-color: transparent;
    padding: 4px 12px;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.6875rem;
}

.capture-block-statusbar {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 6px 12px;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.6875rem;
}

.capture-line {
    white-space: pre;
    min-height: 1.4em;
}

.capture-separator {
    color: var(--success);
}

.capture-user-input {
    color: var(--capture-user-color);
    font-weight: 500;
}

.capture-tool-header {
    color: var(--accent);
    font-weight: 600;
}

.capture-tool-result {
    color: var(--text-muted);
}

.capture-code {
    background: var(--capture-code-bg);
    border-radius: 2px;
}

.capture-diff-add {
    background: var(--diff-add-bg);
    border-radius: 2px;
    color: var(--diff-add-color);
}

.capture-diff-del {
    background: var(--diff-del-bg);
    border-radius: 2px;
    color: var(--diff-del-color);
    text-decoration: line-through;
    text-decoration-color: rgba(var(--fx-red-rgb), 0.4);
}

.capture-diff-summary {
    color: var(--accent);
    font-weight: 600;
}

.sh-diff-gutter-add {
    color: var(--diff-add-color);
    font-weight: 700;
    user-select: none;
}

.sh-diff-gutter-del {
    color: var(--diff-del-color);
    font-weight: 700;
    user-select: none;
}

/* ── Syntax Highlighting ───────────────────────────────────── */

.sh-gutter {
    color: var(--text-muted);
    user-select: none;
}

.sh-keyword   { color: var(--sh-keyword); }
.sh-string    { color: var(--sh-string); }
.sh-comment   { color: var(--sh-comment); font-style: italic; }
.sh-number    { color: var(--sh-number); }
.sh-builtin   { color: var(--sh-builtin); }
.sh-decorator { color: var(--sh-decorator); }

/* ── Drop Overlay (image drag-and-drop) ────────────────────── */

.drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--fx-indigo-rgb), 0.12);
    border: 2px dashed var(--accent);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
}

.drop-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 600;
}

.drop-overlay-content svg {
    opacity: 0.8;
}

/* ── Image Attachments Bar ─────────────────────────────────── */

.image-attachments {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-tertiary);
}

.image-attachment {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 4px 8px 4px 4px;
    max-width: 220px;
}

.image-attachment img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.image-attachment-name {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.image-attachment-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
}

.image-attachment-remove:hover {
    color: var(--danger);
}

/* Reading width for rendered markdown, closer to the VS Code preview */
.preview-pane-markdown {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 32px 48px;
    line-height: 1.7;
    overflow-wrap: break-word;
}
.preview-pane-markdown h1,
.preview-pane-markdown h2 {
    margin: 1.6em 0 0.6em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--border);
    line-height: 1.25;
}
.preview-pane-markdown h1 { font-size: 1.9em; margin-top: 0; }
.preview-pane-markdown h2 { font-size: 1.45em; }
.preview-pane-markdown h3 { font-size: 1.2em; margin: 1.4em 0 0.5em; }
.preview-pane-markdown h4,
.preview-pane-markdown h5 { margin: 1.2em 0 0.4em; }
.preview-pane-markdown p,
.preview-pane-markdown ul,
.preview-pane-markdown ol,
.preview-pane-markdown blockquote,
.preview-pane-markdown pre,
.preview-pane-markdown table { margin: 0 0 1em; }
.preview-pane-markdown ul,
.preview-pane-markdown ol { padding-left: 2em; }
.preview-pane-markdown li { margin: 0.25em 0; }
.preview-pane-markdown li > ul,
.preview-pane-markdown li > ol { margin: 0.25em 0 0; }
.preview-pane-markdown blockquote {
    padding: 0 1em;
    color: var(--text-secondary);
    border-left: 3px solid var(--border);
}
.preview-pane-markdown code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
}
.preview-pane-markdown pre {
    padding: 12px 14px;
    overflow-x: auto;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
}
.preview-pane-markdown pre code { padding: 0; background: none; }
.preview-pane-markdown table { border-collapse: collapse; display: block; overflow-x: auto; }
.preview-pane-markdown th,
.preview-pane-markdown td { padding: 6px 12px; border: 1px solid var(--border); }
.preview-pane-markdown th { background: var(--bg-tertiary); }
.preview-pane-markdown hr { border: 0; border-top: 1px solid var(--border); margin: 1.5em 0; }
.preview-pane-markdown img { max-width: 100%; }

/* Current folder in the terminal header bar */
.terminal-folder {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-secondary);
}
.terminal-folder[hidden] { display: none; }
.terminal-folder svg { flex-shrink: 0; }
.terminal-folder-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 32vw;
}
@media (max-width: 767px) { .terminal-folder { display: none; } }

/* Chat/Terminal toggle sits at the left of the header, before the agent name */
.terminal-header > .live-view-toggle { flex-shrink: 0; margin-right: 10px; }
.terminal-header-actions .terminal-branch,
.terminal-header-actions .terminal-folder { margin-right: 8px; }

/* A window that does not set the pane's size (a viewer, View mode, a phone) renders the xterm at
   the pane's own size (#3422): scroll to see a pane wider or taller than the window. */
.xterm-container.xterm-follow-pane {
    overflow: auto;
}
.xterm-container.xterm-follow-pane .xterm {
    height: auto;
    width: max-content;
}
/* Fit to width (#3455): terminal view only; pressed while the font is scaled to fit. */
.capture-wrapper.chat-mode .terminal-fit-width-btn { display: none; }
/* 44x44 on touch screens: beats the header's own min-height (popout.css). */
@media (pointer: coarse) { .terminal-header-actions .terminal-header-btn.terminal-fit-width-btn { min-width: 44px; min-height: 44px; justify-content: center; } }