/* Chat Console Styles
 * Theme colors injected via CSS custom properties on :root from Kotlin.
 * Targets web components defined in chat-components.js.
 */

/* Defaults — overridden at runtime by Kotlin */
:root {
    --sp-1: 2px;
    --sp-2: 4px;
    --sp-3: 6px;
    --sp-4: 8px;
    --sp-5: 10px;
    --sp-6: 12px;
    --sp-7: 14px;
    --sp-8: 16px;
    --sp-10: 20px;
    --r-sm: 3px;
    --r-md: 3px;
    --r-lg: 3px;
    --r-pill: 3px;
    --font-family: system-ui, sans-serif;
    --font-size: 11pt;
    --code-font-size: 10pt;
    --code-font: 'JetBrains Mono', monospace;
    --fg: rgb(187, 187, 187);
    --fg-a05: rgba(187, 187, 187, 0.05);
    --fg-a08: rgba(187, 187, 187, 0.08);
    --fg-a16: rgba(187, 187, 187, 0.16);
    --bg: rgb(43, 43, 43);
    --user: rgb(86, 156, 214);
    --user-a06: rgba(86, 156, 214, 0.06);
    --user-a08: rgba(86, 156, 214, 0.08);
    --user-a12: rgba(86, 156, 214, 0.12);
    --user-a15: rgba(86, 156, 214, 0.15);
    --user-a16: rgba(86, 156, 214, 0.16);
    --user-a18: rgba(86, 156, 214, 0.18);
    --user-a25: rgba(86, 156, 214, 0.25);
    --agent: rgb(150, 200, 150);
    --agent-a06: rgba(150, 200, 150, 0.06);
    --agent-a08: rgba(150, 200, 150, 0.08);
    --agent-a10: rgba(150, 200, 150, 0.10);
    --agent-a16: rgba(150, 200, 150, 0.16);
    --think: rgb(176, 176, 176);
    --think-a04: rgba(128, 128, 128, 0.04);
    --think-a06: rgba(128, 128, 128, 0.06);
    --think-a08: rgba(128, 128, 128, 0.08);
    --think-a10: rgba(128, 128, 128, 0.10);
    --think-a16: rgba(128, 128, 128, 0.16);
    --think-a25: rgba(128, 128, 128, 0.25);
    --think-a30: rgba(128, 128, 128, 0.30);
    --think-a35: rgba(128, 128, 128, 0.35);
    --think-a40: rgba(128, 128, 128, 0.40);
    --think-a55: rgba(128, 128, 128, 0.55);
    --tool: rgb(180, 160, 220);
    --tool-a08: rgba(180, 160, 220, 0.08);
    --tool-a16: rgba(180, 160, 220, 0.16);
    --tool-a40: rgba(180, 160, 220, 0.40);
    /* Tool kind colors — semantic:
       read/search = safe (green/blue), edit/write/move = local mutate (amber),
       delete/execute = destructive or remote (red). */
    --kind-read: rgb(120, 190, 120);
    --kind-edit: rgb(205, 155, 95);
    --kind-execute: rgb(210, 105, 105);
    --kind-destructive: rgb(210, 105, 105);
    --kind-think: rgb(170, 155, 210);
    --kind-search: rgb(110, 165, 210);
    --kind-other: rgb(160, 165, 170);
    --diff-add: rgb(63, 185, 80);
    --diff-del: rgb(248, 83, 73);
    --spin-bg: rgb(60, 60, 60);
    --code-bg: rgb(30, 30, 30);
    --tbl-border: rgb(60, 60, 60);
    --th-bg: rgb(50, 50, 50);
    --link: rgb(86, 156, 214);
    --fg-muted: rgba(187, 187, 187, 0.55);
    --tooltip-bg: rgb(60, 63, 65);
    --error: rgb(199, 34, 34);
    --error-a05: rgba(199, 34, 34, 0.05);
    --error-a06: rgba(199, 34, 34, 0.06);
    --error-a12: rgba(199, 34, 34, 0.12);
    --error-a16: rgba(199, 34, 34, 0.16);
    --shadow: rgba(128, 128, 128, 0.25);
    --sa-c0: rgb(38, 166, 154);
    --sa-c0-a06: rgba(38, 166, 154, 0.06);
    --sa-c0-a10: rgba(38, 166, 154, 0.10);
    --sa-c0-a15: rgba(38, 166, 154, 0.15);
    --sa-c1: rgb(240, 173, 78);
    --sa-c1-a06: rgba(240, 173, 78, 0.06);
    --sa-c1-a10: rgba(240, 173, 78, 0.10);
    --sa-c1-a15: rgba(240, 173, 78, 0.15);
    --sa-c2: rgb(156, 120, 216);
    --sa-c2-a06: rgba(156, 120, 216, 0.06);
    --sa-c2-a10: rgba(156, 120, 216, 0.10);
    --sa-c2-a15: rgba(156, 120, 216, 0.15);
    --sa-c3: rgb(216, 112, 147);
    --sa-c3-a06: rgba(216, 112, 147, 0.06);
    --sa-c3-a10: rgba(216, 112, 147, 0.10);
    --sa-c3-a15: rgba(216, 112, 147, 0.15);
    --sa-c4: rgb(91, 192, 222);
    --sa-c4-a06: rgba(91, 192, 222, 0.06);
    --sa-c4-a10: rgba(91, 192, 222, 0.10);
    --sa-c4-a15: rgba(91, 192, 222, 0.15);
    --sa-c5: rgb(139, 195, 74);
    --sa-c5-a06: rgba(139, 195, 74, 0.06);
    --sa-c5-a10: rgba(139, 195, 74, 0.10);
    --sa-c5-a15: rgba(139, 195, 74, 0.15);
    --sa-c6: rgb(229, 115, 115);
    --sa-c6-a06: rgba(229, 115, 115, 0.06);
    --sa-c6-a10: rgba(229, 115, 115, 0.10);
    --sa-c6-a15: rgba(229, 115, 115, 0.15);
    --sa-c7: rgb(86, 156, 214);
    --sa-c7-a06: rgba(86, 156, 214, 0.06);
    --sa-c7-a10: rgba(86, 156, 214, 0.10);
    --sa-c7-a15: rgba(86, 156, 214, 0.15);
    /* Semantic colors for tool result renderers */
    --success: #5cb85c;
    --success-bg: rgba(92, 184, 92, 0.15);
    --danger: #d9534f;
    --danger-bg: rgba(217, 83, 79, 0.15);
    --warning: #f0ad4e;
    --warning-bg: rgba(240, 173, 78, 0.15);
    --purple: #9b59b6;
    --purple-bg: rgba(155, 89, 182, 0.15);
}

html, body {
    height: 100%;
    overflow: hidden;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family), system-ui, sans-serif;
    font-size: var(--font-size);
    color: var(--fg);
    background: var(--bg);
    padding: 0;
    line-height: 1.45;
}

chat-container {
    display: block;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* Small right padding (sp-1 = 2px) so bubbles align with the input frame's
       right edge. The scrollbar still sits inside this narrow lane — this is
       the visual gap that previously made bubbles look offset from the input. */
    padding: var(--sp-4) var(--sp-2) var(--sp-4) var(--sp-4);
}

chat-container.is-scrolling #messages,
chat-container.is-scrolling #messages * {
    pointer-events: none;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--think-a35);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--think-a55);
}

/* ── User prompt ─────────────────────────────────────── */
.prompt-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: var(--sp-5) 0 var(--sp-2) 0;
}

.prompt-bubble {
    display: inline-block;
    background: var(--user-a12);
    border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
    padding: var(--sp-3) var(--sp-7);
    max-width: 94%;
    font-weight: normal;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.prompt-bubble:hover {
    background: var(--user-a18);
}

/* Flash animation used when the Prompts side-panel navigates to a prompt. */
.prompt-flash .prompt-bubble {
    animation: promptFlash 0.9s ease-out;
}

@keyframes promptFlash {
    0% {
        box-shadow: 0 0 0 0 var(--user-a25);
    }
    40% {
        box-shadow: 0 0 0 6px var(--user-a25);
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

.prompt-ctx-chip {
    color: var(--link);
    text-decoration: none;
    cursor: pointer;
}

.prompt-ctx-chip:hover {
    text-decoration: underline;
}


/* ── Agent response ──────────────────────────────────── */

.agent-row {
    display: block;
    margin: var(--sp-2) 0;
}

.agent-bubble {
    display: block;
    background: var(--agent-a06);
    border-radius: var(--r-sm) var(--r-lg) var(--r-lg) var(--r-lg);
    padding: var(--sp-4) var(--sp-8);
    max-width: 94%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Client-specific colors */
chat-message.client-copilot .agent-bubble {
    background: var(--client-copilot-bubble-bg, rgba(124, 58, 237, 0.05));
}

chat-message.client-claude .agent-bubble {
    background: var(--client-claude-bubble-bg, rgba(217, 119, 6, 0.05));
}

chat-message.client-opencode .agent-bubble {
    background: var(--client-opencode-bubble-bg, rgba(8, 145, 178, 0.05));
}

chat-message.client-junie .agent-bubble {
    background: var(--client-junie-bubble-bg, rgba(220, 38, 38, 0.05));
}

chat-message.client-kiro .agent-bubble {
    background: var(--client-kiro-bubble-bg, rgba(5, 150, 105, 0.05));
}

chat-message.client-codex .agent-bubble {
    background: var(--client-codex-bubble-bg, rgba(16, 163, 127, 0.05));
}

.agent-bubble + .agent-bubble {
    margin-top: var(--sp-4);
}

.agent-bubble:hover {
    background: var(--agent-a10);
}

.agent-bubble .streaming {
    white-space: pre-wrap;
    font-family: inherit;
}

/* ── Working indicator ───────────────────────────────── */
working-indicator {
    display: block;
    padding: var(--sp-4) var(--sp-8);
    max-width: 94%;
    border-radius: var(--r-sm) var(--r-lg) var(--r-lg) var(--r-lg);
    background: var(--agent-a06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%23888' stroke-width='2' stroke-dasharray='20 12' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 7 7' to='360 7 7' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: var(--sp-8) center;
    background-size: 14px 14px;
    padding-left: 36px;
    color: color-mix(in srgb, var(--fg) 55%, transparent);
    font-size: 0.88em;
    margin: var(--sp-2) 0;
}

working-indicator.client-copilot {
    background: var(--client-copilot-bubble-bg, rgba(124, 58, 237, 0.05));
}

working-indicator.client-claude {
    background: var(--client-claude-bubble-bg, rgba(217, 119, 6, 0.05));
}

working-indicator.client-opencode {
    background: var(--client-opencode-bubble-bg, rgba(8, 145, 178, 0.05));
}

working-indicator.client-junie {
    background: var(--client-junie-bubble-bg, rgba(220, 38, 38, 0.05));
}

working-indicator.client-kiro {
    background: var(--client-kiro-bubble-bg, rgba(5, 150, 105, 0.05));
}

working-indicator.client-codex {
    background: var(--client-codex-bubble-bg, rgba(16, 163, 127, 0.05));
}

working-indicator[hidden] {
    display: none;
}

working-indicator .working-text {
    user-select: none;
}

working-indicator .working-extend {
    margin-left: var(--sp-4);
    padding: 2px 8px;
    font-size: 0.9em;
    background: transparent;
    color: var(--user);
    border: 1px solid var(--user);
    border-radius: 3px;
    cursor: pointer;
}

working-indicator .working-extend:hover {
    background: var(--user-a16);
}

working-indicator .working-extend[hidden] {
    display: none;
}

working-indicator.working-countdown--warn {
    color: #6b4f00;
    background: rgba(107, 79, 0, 0.10);
}

working-indicator.working-countdown--danger {
    color: #8b1a1a;
    background: rgba(139, 26, 26, 0.12);
}

/* ── Thinking section ─────────────────────────────────── */
.thinking-section {
    display: block;
    padding: var(--sp-3) var(--sp-6);
    font-size: 0.88em;
    margin: var(--sp-2) 0;
    max-width: 94%;
    background: var(--think-a04);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: opacity 0.15s ease;
}

.thinking-content {
    overflow-wrap: break-word;
    color: var(--think);
}

/* ── Turn chips (meta pills) ─────────────────────────── */
.meta {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    margin-bottom: var(--sp-1);
    font-size: 0.82em;
}

/* ── Turn summary bar (horizontal rule with centered stats) ── */
.turn-summary-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin: var(--sp-4) 0 var(--sp-1) 0;
    opacity: 0.45;
}

.turn-summary-line {
    flex: 1;
    height: 1px;
    background: var(--think-a30);
}

.turn-summary-label {
    font-size: 0.75em;
    color: var(--think);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.hide-turn-stats .turn-summary-bar {
    display: none !important;
}

.meta.show {
    display: flex;
}

.ts {
    color: var(--think);
    font-size: 0.92em;
    white-space: nowrap;
    flex-shrink: 0;
    /* Timestamps always appear on their own line above chips */
    flex-basis: 100%;
    margin-top: 1px;
}

/* Hide redundant timestamps when the previous message shares the same minute */
.ts.ts-hidden {
    display: none;
}

/* User message timestamp: align right on its own line */
.prompt-row .meta .ts {
    text-align: right;
}

/* Thinking chip sits outside the strip, always visible */
.meta > thinking-chip {
    flex-shrink: 0;
}

.chip-strip {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    flex: 1;
    min-width: 0;
    cursor: grab;
}

.chip-strip::-webkit-scrollbar {
    display: none;
}

.chip-strip.dragging {
    cursor: grabbing;
}

.chip-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--think-a16);
    border-radius: var(--r-sm);
    color: var(--think);
    cursor: pointer;
    padding: 0 var(--sp-2);
    font-size: 0.95em;
    line-height: 1.4;
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
}

.chip-nav:hover {
    opacity: 1;
    color: var(--fg);
    background: var(--think-a08);
}

.chip-nav.hidden {
    display: none;
}

.chip-overflow-count {
    color: var(--think);
    font-size: 0.85em;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.6;
}

.chip-overflow-count.hidden {
    display: none;
}

.turn-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--think-a08);
    border: 1px solid var(--think-a16);
    border-radius: var(--r-sm);
    padding: 2px var(--sp-5);
    font-size: 0.88em;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.turn-chip.stats {
    background: var(--think-a06);
    border-color: var(--think-a10);
    color: var(--think);
    font-size: 0.82em;
    font-weight: normal;
    padding: 1px var(--sp-2);
    cursor: default;
    gap: var(--sp-2);
}

.diff-stat {
    display: flex;
    gap: var(--sp-2);
}

.diff-add {
    color: var(--diff-add, rgb(63, 185, 80));
}

.diff-del {
    color: var(--diff-del, rgb(248, 83, 73));
}

.chip-dimmed {
    opacity: 0.5;
}

.turn-chip:hover {
    background: var(--think-a16);
    border-color: var(--think-a25);
}

.turn-chip.tool {
    background: var(--tool-a08);
    border-color: var(--tool-a16);
    color: var(--tool);
}

.turn-chip.tool:hover {
    background: var(--tool-a16);
    border-color: var(--tool-a40);
}

/* Tool kind color overrides */
.turn-chip.kind-read {
    color: var(--kind-read);
    background: color-mix(in srgb, var(--kind-read) 10%, transparent);
    border-color: color-mix(in srgb, var(--kind-read) 22%, transparent);
}

.turn-chip.kind-edit {
    color: var(--kind-edit);
    background: color-mix(in srgb, var(--kind-edit) 10%, transparent);
    border-color: color-mix(in srgb, var(--kind-edit) 22%, transparent);
}

/* write, move share the edit (local mutate) color.
   delete is destructive — separate mapping below. */
.turn-chip.kind-write,
.turn-chip.kind-move {
    color: var(--kind-edit);
    background: color-mix(in srgb, var(--kind-edit) 10%, transparent);
    border-color: color-mix(in srgb, var(--kind-edit) 22%, transparent);
}

.turn-chip.kind-delete {
    color: var(--kind-destructive);
    background: color-mix(in srgb, var(--kind-destructive) 10%, transparent);
    border-color: color-mix(in srgb, var(--kind-destructive) 22%, transparent);
}

.turn-chip.kind-delete:hover {
    background: color-mix(in srgb, var(--kind-destructive) 18%, transparent);
    border-color: color-mix(in srgb, var(--kind-destructive) 32%, transparent);
}

.turn-chip.kind-execute {
    color: var(--kind-execute);
    background: color-mix(in srgb, var(--kind-execute) 10%, transparent);
    border-color: color-mix(in srgb, var(--kind-execute) 22%, transparent);
}

.turn-chip.kind-search {
    color: var(--kind-search);
    background: color-mix(in srgb, var(--kind-search) 10%, transparent);
    border-color: color-mix(in srgb, var(--kind-search) 22%, transparent);
}

.turn-chip.kind-think {
    color: var(--kind-think);
    background: color-mix(in srgb, var(--kind-think) 10%, transparent);
    border-color: color-mix(in srgb, var(--kind-think) 22%, transparent);
}

.turn-chip.kind-other {
    color: var(--kind-other);
    background: color-mix(in srgb, var(--kind-other) 8%, transparent);
    border-color: color-mix(in srgb, var(--kind-other) 18%, transparent);
}

.turn-chip.tool.status-denied {
    opacity: 0.75;
}

/* Pending: waiting for MCP to handle */
.turn-chip.status-pending {
    opacity: 0.8;
}

.turn-chip.kind-read:hover {
    background: color-mix(in srgb, var(--kind-read) 18%, transparent);
    border-color: color-mix(in srgb, var(--kind-read) 32%, transparent);
}

.turn-chip.kind-edit:hover {
    background: color-mix(in srgb, var(--kind-edit) 18%, transparent);
    border-color: color-mix(in srgb, var(--kind-edit) 32%, transparent);
}

.turn-chip.kind-write:hover,
.turn-chip.kind-delete:hover,
.turn-chip.kind-move:hover {
    background: color-mix(in srgb, var(--kind-edit) 18%, transparent);
    border-color: color-mix(in srgb, var(--kind-edit) 32%, transparent);
}

.turn-chip.kind-execute:hover {
    background: color-mix(in srgb, var(--kind-execute) 18%, transparent);
    border-color: color-mix(in srgb, var(--kind-execute) 32%, transparent);
}

.turn-chip.kind-search:hover {
    background: color-mix(in srgb, var(--kind-search) 18%, transparent);
    border-color: color-mix(in srgb, var(--kind-search) 32%, transparent);
}

.turn-chip.kind-think:hover {
    background: color-mix(in srgb, var(--kind-think) 18%, transparent);
    border-color: color-mix(in srgb, var(--kind-think) 32%, transparent);
}

.turn-chip.kind-other:hover {
    background: color-mix(in srgb, var(--kind-other) 16%, transparent);
    border-color: color-mix(in srgb, var(--kind-other) 28%, transparent);
}

/* ── Unified chip indicator ring ─────────────────────────────────────
   Single <span class="chip-ring"> is always in the DOM; the parent chip's
   status and kind classes drive its appearance with no DOM replacement. */
.chip-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
    border: 2px solid var(--spin-bg);
    border-top-color: currentColor;
    border-radius: 50%;
    flex-shrink: 0;
    animation: spin 0.6s linear infinite;
}

/* Success: outlined circle — all chips */
.status-complete .chip-ring,
.status-success .chip-ring,
.status-done .chip-ring {
    border-color: currentColor;
    animation: none;
}

/* Success: filled circle — AgentBridge (MCP) chips only */
.is-agentbridge-tool.status-complete .chip-ring,
.is-agentbridge-tool.status-success .chip-ring,
.is-agentbridge-tool.status-done .chip-ring {
    background: currentColor;
}

/* Failure: broken (C-shaped) outlined circle — all chips */
.status-failed .chip-ring,
.status-error .chip-ring,
.status-denied .chip-ring {
    border-color: currentColor;
    border-right-color: transparent;
    animation: none;
}

/* Failure: filled broken circle — AgentBridge (MCP) chips only */
.is-agentbridge-tool.status-failed .chip-ring,
.is-agentbridge-tool.status-error .chip-ring,
.is-agentbridge-tool.status-denied .chip-ring {
    background: currentColor;
}

/* Subagent chips show no indicator on success */
.turn-chip.subagent.status-complete .chip-ring {
    display: none;
}


thinking-chip.thinking-active .thought-bubble {
    display: inline-block;
    animation: pulse 2s ease-in-out infinite;
}

.collapsing {
    opacity: 0;
    pointer-events: none;
}

.turn-hidden {
    display: none !important;
}

/* ── Sub-agent colors ────────────────────────────────── */

.subagent-indent .agent-name {
    color: var(--sa-color, var(--think));
}

.subagent-c0 {
    --sa-color: var(--sa-c0);
    --sa-a06: var(--sa-c0-a06);
    --sa-a10: var(--sa-c0-a10);
    --sa-a15: var(--sa-c0-a15);
}

.subagent-c1 {
    --sa-color: var(--sa-c1);
    --sa-a06: var(--sa-c1-a06);
    --sa-a10: var(--sa-c1-a10);
    --sa-a15: var(--sa-c1-a15);
}

.subagent-c2 {
    --sa-color: var(--sa-c2);
    --sa-a06: var(--sa-c2-a06);
    --sa-a10: var(--sa-c2-a10);
    --sa-a15: var(--sa-c2-a15);
}

.subagent-c3 {
    --sa-color: var(--sa-c3);
    --sa-a06: var(--sa-c3-a06);
    --sa-a10: var(--sa-c3-a10);
    --sa-a15: var(--sa-c3-a15);
}

.subagent-c4 {
    --sa-color: var(--sa-c4);
    --sa-a06: var(--sa-c4-a06);
    --sa-a10: var(--sa-c4-a10);
    --sa-a15: var(--sa-c4-a15);
}

.subagent-c5 {
    --sa-color: var(--sa-c5);
    --sa-a06: var(--sa-c5-a06);
    --sa-a10: var(--sa-c5-a10);
    --sa-a15: var(--sa-c5-a15);
}

.subagent-c6 {
    --sa-color: var(--sa-c6);
    --sa-a06: var(--sa-c6-a06);
    --sa-a10: var(--sa-c6-a10);
    --sa-a15: var(--sa-c6-a15);
}

.subagent-c7 {
    --sa-color: var(--sa-c7);
    --sa-a06: var(--sa-c7-a06);
    --sa-a10: var(--sa-c7-a10);
    --sa-a15: var(--sa-c7-a15);
}

/* Sub-agent messages (top-level chat-message with indent) */
.subagent-indent {
    margin-left: var(--r-lg);
    padding: var(--sp-2) 0;
}

.subagent-prefix {
    color: var(--sa-color);
    font-weight: 600;
    font-size: 0.88em;
}

.subagent-result {
    display: block;
    background: var(--sa-a06);
    border-radius: var(--r-sm) var(--r-lg) var(--r-lg) var(--r-lg);
    padding: var(--sp-4) var(--sp-8);
    max-width: 94%;
}

.subagent-result:empty {
    display: none;
}

.subagent-result:hover {
    background: var(--sa-a10);
}

.subagent-indent .meta {
    margin-left: 0;
}

.turn-chip.subagent {
    background: var(--sa-a06);
    border-color: var(--sa-a15);
    color: var(--sa-color);
}

.turn-chip.subagent:hover {
    background: var(--sa-a10);
    border-color: var(--sa-color);
}

.turn-chip.subagent.status-complete {
    border-style: solid;
    opacity: 0.85;
}

/* ── Session separator ───────────────────────────────── */
session-divider {
    display: block;
    width: 100%;
}

.session-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    margin: var(--sp-8) 0;
    width: 100%;
    opacity: 0.6;
}

.session-sep-line {
    flex: 1;
    height: 1px;
    background: var(--think-a30);
}

.session-sep-label {
    font-size: 0.78em;
    color: var(--think);
    white-space: nowrap;
}

/* ── Placeholder ─────────────────────────────────────── */
.placeholder {
    color: var(--think);
    padding: var(--sp-10) var(--sp-6);
    text-align: center;
    white-space: pre-wrap;
    font-size: 0.95em;
}

/* ── Load more (styled as IDE action link) ──────────── */
.load-more-banner {
    text-align: center;
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
}

.load-more-banner:hover .load-more-text {
    text-decoration: underline;
}

.load-more-text {
    font-size: 0.82em;
    color: var(--link);
}

/* ── Markdown content ────────────────────────────────── */
p {
    margin: var(--sp-1) 0;
}

a {
    color: var(--link);
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

code {
    background: var(--code-bg);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-sm);
    font-family: var(--code-font);
    font-size: var(--code-font-size);
}

pre:has(code) {
    background: var(--code-bg);
    padding: var(--sp-5) var(--sp-10) var(--sp-5) var(--sp-6);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--tbl-border);
    margin: var(--sp-4) 0;
    overflow-x: auto;
    position: relative;
    line-height: 1.5;
}

pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    display: block;
}

table {
    border-collapse: collapse;
    margin: var(--sp-4) 0;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--fg-muted) transparent;
}

table::-webkit-scrollbar {
    height: 4px;
}

table::-webkit-scrollbar-thumb {
    background: var(--fg-muted);
    border-radius: 2px;
}

/* Override global ::-webkit-scrollbar-thumb:hover to keep table scrollbar muted */
table::-webkit-scrollbar-thumb:hover {
    background: var(--fg-muted);
}

table::-webkit-scrollbar-track {
    background: transparent;
}

/* Wrapper added by JS when a table is present — positions the "Open in editor" overlay */
.table-wrap {
    position: relative;
}

.table-open-btn {
    position: absolute;
    top: calc(var(--sp-4) + 2px);
    right: var(--sp-2);
    display: none;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--fg-muted);
    background: var(--bg);
    border: 1px solid var(--tbl-border);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
    z-index: 1;
}

.table-open-btn svg {
    flex-shrink: 0;
}

.table-wrap.table-overflow .table-open-btn {
    display: inline-flex;
}

.table-wrap.table-overflow:hover .table-open-btn,
.table-open-btn:focus-visible {
    opacity: 1;
}

.table-open-btn:hover {
    color: var(--fg);
    border-color: var(--fg-muted);
}

th, td {
    border: none;
    border-bottom: 1px solid var(--tbl-border);
    padding: var(--sp-3) var(--sp-6);
    text-align: left;
    white-space: nowrap;
}

th {
    background: none;
    font-weight: 600;
    color: var(--fg-muted);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--tbl-border);
}

tr:last-child td {
    border-bottom: none;
}

ul, ol {
    margin: var(--sp-3) 0;
    padding-left: 22px;
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

ul ul {
    list-style-type: circle;
}

li {
    margin: var(--sp-2) 0;
    line-height: 1.5;
}

b, strong {
    font-weight: 600;
}

/* ── Headings ────────────────────────────────────────── */

h1 {
    font-size: 1.4em;
    font-weight: 700;
    margin: var(--sp-8) 0 var(--sp-4) 0;
    padding-bottom: var(--sp-3);
    border-bottom: 2px solid var(--tbl-border);
    line-height: 1.3;
}

h2, h3, h4, h5 {
    margin: var(--sp-6) 0 var(--sp-3) 0;
    font-weight: 600;
    line-height: 1.3;
}

h2 {
    font-size: 1.25em;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--tbl-border);
}

h3 {
    font-size: 1.1em;
}

h4 {
    font-size: 1.0em;
}

h5 {
    font-size: 0.95em;
    color: var(--fg-muted);
}

/* ── Blockquotes ─────────────────────────────────────── */

blockquote {
    border-left: 3px solid var(--tbl-border);
    background: var(--fg-a08);
    margin: var(--sp-4) 0;
    padding: var(--sp-3) var(--sp-5);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--fg-muted);
}

blockquote p {
    margin: 0;
}

/* ── Horizontal rules ────────────────────────────────── */

hr {
    border: none;
    border-top: 1px solid var(--tbl-border);
    margin: var(--sp-6) 0;
}

/* ── Quick replies ───────────────────────────────────── */
.quick-replies {
    display: flex;
    flex-wrap: wrap;
    max-width: 94%;
    gap: var(--sp-3);
    margin: var(--sp-4) 0 var(--sp-2) 0;
    padding: 0 var(--sp-2);
}

.quick-reply-btn {
    display: inline-block;
    background: var(--think-a06);
    color: var(--fg);
    border: 1px solid var(--think-a25);
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-7);
    font-size: 0.88em;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    user-select: none;
}

.quick-reply-btn:hover {
    background: var(--think-a16);
    border-color: var(--think-a40);
}

.quick-reply-btn.qr-danger {
    background: color-mix(in srgb, var(--error) 10%, transparent);
    color: var(--error);
    border-color: color-mix(in srgb, var(--error) 22%, transparent);
}

.quick-reply-btn.qr-danger:hover {
    background: color-mix(in srgb, var(--error) 20%, transparent);
    border-color: var(--error);
}

.quick-reply-btn.qr-primary {
    background: color-mix(in srgb, var(--link) 12%, transparent);
    color: var(--link);
    border-color: color-mix(in srgb, var(--link) 24%, transparent);
}

.quick-reply-btn.qr-primary:hover {
    background: color-mix(in srgb, var(--link) 22%, transparent);
    border-color: var(--link);
}

.quick-reply-btn.qr-success {
    background: color-mix(in srgb, var(--agent) 10%, transparent);
    color: var(--agent);
    border-color: color-mix(in srgb, var(--agent) 22%, transparent);
}

.quick-reply-btn.qr-success:hover {
    background: color-mix(in srgb, var(--agent) 20%, transparent);
    border-color: var(--agent);
}

.quick-reply-btn.qr-warning {
    background: color-mix(in srgb, var(--sa-c1) 10%, transparent);
    color: var(--sa-c1);
    border-color: color-mix(in srgb, var(--sa-c1) 22%, transparent);
}

.quick-reply-btn.qr-warning:hover {
    background: color-mix(in srgb, var(--sa-c1) 20%, transparent);
    border-color: var(--sa-c1);
}

.quick-reply-btn.qr-dismiss {
    background: transparent;
    color: var(--fg-muted);
    border-color: transparent;
    font-size: 0.85em;
}

.quick-reply-btn.qr-dismiss:hover {
    background: var(--think-a16);
    border-color: transparent;
}

.quick-replies.disabled .quick-reply-btn {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* ── Permission request ────────────────────────────────── */

.perm-actions {
    display: flex;
    flex-wrap: wrap;
    max-width: 94%;
    gap: var(--sp-2);
    align-items: flex-start;
    margin-top: var(--sp-2);
}

.perm-deny {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
}

.perm-deny:hover {
    background: color-mix(in srgb, var(--danger) 20%, transparent) !important;
}

.perm-allow {
    color: var(--success) !important;
    border-color: var(--success) !important;
}

.perm-allow:hover {
    background: color-mix(in srgb, var(--success) 22%, transparent) !important;
}

.perm-allow-session {
    color: var(--link) !important;
    border-color: color-mix(in srgb, var(--link) 30%, transparent) !important;
}

.perm-allow-session:hover {
    background: color-mix(in srgb, var(--link) 22%, transparent) !important;
}

.perm-result {
    font-size: 0.85em;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-sm);
}

.perm-allowed {
    color: var(--success);
}

.perm-denied {
    color: var(--danger);
}

.perm-args {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: var(--sp-3);
    font-size: 0.82em;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--fg-a05);
}

.perm-arg-row {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    background: var(--bg);
}

.perm-arg-key {
    color: var(--fg-muted);
    flex-shrink: 0;
    min-width: 6em;
    font-family: var(--code-font);
    font-size: var(--code-font-size);
}

.perm-arg-val {
    color: var(--fg);
    font-family: var(--code-font);
    font-size: var(--code-font-size);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Code action buttons (copy, wrap, scratch) ───────── */

.code-lang-label {
    display: block;
    font-size: 0.75em;
    color: var(--fg-muted);
    font-family: var(--font-family);
    margin: calc(-1 * var(--sp-2)) 0 var(--sp-2) 0;
    user-select: none;
    opacity: 0.7;
}

.code-actions {
    position: sticky;
    float: right;
    top: var(--sp-2);
    right: var(--sp-2);
    z-index: 1;
    display: flex;
    gap: var(--sp-1);
    margin: 0 0 0 var(--sp-3);
    opacity: 0;
    transition: opacity 0.15s;
}

pre:hover .code-actions {
    opacity: 1;
}

pre:focus-within .code-actions {
    opacity: 1;
}

.code-action-btn {
    background: var(--code-bg);
    color: var(--fg);
    border: none;
    border-radius: var(--r-sm);
    padding: var(--sp-1);
    line-height: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.code-action-btn:hover {
    background: var(--th-bg);
}

.code-action-btn:focus-visible {
    background: var(--th-bg);
}

.code-action-btn.active {
    background: var(--th-bg);
    color: var(--agent);
}

/* Word wrap mode */
pre.word-wrap {
    overflow-x: hidden;
}

pre.word-wrap code {
    white-space: pre-wrap;
    word-break: break-all;
}

/* ── Animations ──────────────────────────────────────── */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ── Keyboard accessibility ──────────────────────────── */
.turn-chip:focus-visible, .prompt-bubble:focus-visible,
.quick-reply-btn:focus-visible, .code-action-btn:focus-visible,
.load-more-banner:focus-visible {
    outline: 2px solid var(--agent);
    outline-offset: 2px;
}

::selection {
    background: var(--user-a25);
    color: var(--fg);
}

/* (Permission request styles consolidated above in the main .perm-* block) */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Shared container pattern ────────────────────────── */
.inspection-result, .search-result, .outline-result,
.blame-result, .branch-result, .project-info,
.coverage-result, .http-result {
    border-radius: var(--r-pill);
    border: 1px solid var(--fg-a08);
    overflow: hidden;
}

/* ── Git commit result card ──────────────────────────── */
.git-commit-result {
    font-size: 0.9em;
    line-height: 1.5;
}

.git-commit-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}

.git-commit-hash {
    font-family: var(--code-font);
    font-size: 0.92em;
    font-weight: 600;
}

.git-commit-link {
    color: var(--link);
    text-decoration: none;
    cursor: pointer;
}

.git-commit-link:hover {
    text-decoration: underline;
}

.git-commit-branch {
    font-size: 0.82em;
    background: var(--fg-a08);
    border-radius: var(--r-sm);
    padding: 1px var(--sp-3);
    color: var(--think);
}

.git-commit-message {
    font-weight: 500;
    margin-bottom: var(--sp-3);
    white-space: pre-wrap;
    word-break: break-word;
}

.git-commit-stats {
    font-size: 0.85em;
    color: var(--think);
    margin-bottom: var(--sp-3);
}

.git-stat-ins {
    color: var(--success);
    font-weight: 600;
}

.git-stat-del {
    color: var(--danger);
    font-weight: 600;
}

.git-commit-files {
    border-top: 1px solid var(--fg-a08);
    padding-top: var(--sp-3);
}

.git-file-entry {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 1px 0;
    font-size: 0.88em;
}

.git-file-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--r-sm);
    font-size: 0.75em;
    font-weight: 700;
    flex-shrink: 0;
}

.git-file-add {
    background: rgba(80, 180, 80, 0.15);
    color: var(--success);
}

.git-file-del {
    background: rgba(220, 80, 80, 0.15);
    color: var(--danger);
}

.git-file-mod {
    background: rgba(86, 156, 214, 0.15);
    color: var(--link);
}

.git-file-rename {
    background: var(--warning-bg);
    color: var(--warning);
}

.git-file-path {
    font-family: var(--code-font);
    font-size: 0.92em;
    word-break: break-all;
}

/* ── Git status result ──────────────────────────────── */
.git-status-result {
    font-size: 0.9em;
    line-height: 1.5;
}

.git-status-branch {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.git-status-branch-name {
    font-weight: 600;
}

.git-status-tracking {
    font-size: 0.85em;
    color: var(--think);
}

.git-status-clean {
    color: var(--think);
    font-style: italic;
}

.git-status-section {
    margin-top: var(--sp-3);
}

.git-status-section-header {
    font-size: 0.82em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--fg-a08);
}

.git-status-staged {
    color: var(--success);
}

.git-status-unstaged {
    color: var(--link);
}

.git-status-untracked {
    color: var(--think);
}

.git-status-conflict {
    color: var(--danger);
}

.git-file-untracked {
    background: rgba(128, 128, 128, 0.15);
    color: var(--think);
}

.git-file-conflict {
    background: rgba(220, 80, 80, 0.25);
    color: var(--danger);
}

/* ── Git stage result ───────────────────────────────── */
.git-stage-result {
    font-size: 0.9em;
    line-height: 1.5;
}

.git-stage-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--success-bg);
    color: var(--success);
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    font-weight: 500;
}

.git-stage-label {
    font-weight: 500;
}

/* ── Git diff result ────────────────────────────────── */
.git-diff-result {
    font-size: 0.88em;
    line-height: 1.45;
}

.git-diff-file {
    margin-bottom: var(--sp-4);
}

.git-diff-file:last-child {
    margin-bottom: 0;
}

.git-diff-file-header {
    font-weight: 600;
    padding: 3px var(--sp-3);
    background: var(--fg-a08);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    border-bottom: 1px solid var(--fg-a08);
}

.git-diff-hunks {
    font-family: var(--code-font);
    font-size: 0.92em;
    overflow-x: auto;
}

.git-diff-hunk-header {
    color: var(--think);
    font-family: var(--code-font);
    font-size: 0.9em;
    padding: 2px var(--sp-3);
    background: var(--fg-a05);
    border-top: 1px solid var(--fg-a08);
    margin-top: var(--sp-2);
}

.git-diff-hunk-header:first-child {
    margin-top: 0;
}

.git-diff-hunk-ctx {
    color: var(--think);
    font-style: italic;
}

.git-diff-line {
    padding: 0 var(--sp-3);
    white-space: pre-wrap;
    word-break: break-all;
    font-family: var(--code-font);
}

.git-diff-add {
    background: rgba(80, 180, 80, 0.12);
    color: var(--success);
}

.git-diff-del {
    background: rgba(220, 80, 80, 0.12);
    color: var(--danger);
}

.git-diff-ctx {
    color: var(--fg);
    opacity: 0.7;
}

.git-diff-meta {
    color: var(--think);
    font-style: italic;
}

.git-diff-stat-summary {
    font-weight: 500;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--fg-a08);
}

.git-diff-stat-file {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 1px 0;
}

.git-diff-stat-count {
    font-family: var(--code-font);
    font-size: 0.9em;
    color: var(--think);
    min-width: 2ch;
    text-align: right;
}

.git-diff-stat-bar {
    font-family: var(--code-font);
    font-size: 0.9em;
}

/* ── Git log result ─────────────────────────────────── */
.git-log-result {
    font-size: 0.9em;
    line-height: 1.55;
}

.git-log-entry {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    flex-wrap: wrap;
}

.git-log-hash {
    font-family: var(--code-font);
    font-size: 0.92em;
    font-weight: 600;
    color: var(--link);
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
}

.git-log-hash:hover {
    text-decoration: underline;
}

.git-log-message {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.git-log-meta {
    font-size: 0.85em;
    color: var(--think);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Build result ───────────────────────────────────── */
.build-result {
    font-size: 0.9em;
    line-height: 1.5;
}

.build-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.build-icon {
    font-size: 1.1em;
    font-weight: 700;
}

.build-success .build-icon,
.build-success .build-status {
    color: var(--success);
}

.build-fail .build-icon,
.build-fail .build-status {
    color: var(--danger);
}

.build-abort .build-icon,
.build-abort .build-status {
    color: var(--warning);
}

.build-status {
    font-weight: 600;
}

.build-meta {
    font-size: 0.85em;
    color: var(--think);
}

.build-errors {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--danger);
}

.build-warnings {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--warning);
}

.build-messages {
    margin-top: var(--sp-3);
    border-top: 1px solid var(--fg-a08);
    padding-top: var(--sp-3);
}

.build-msg {
    font-family: var(--code-font);
    font-size: 0.88em;
    padding: 1px 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.build-msg-error {
    color: var(--danger);
}

.build-msg-warn {
    color: var(--warning);
}

.build-msg-info {
    color: var(--think);
}

/* ── Inspection / Compilation Results ────────────────────── */

/* Shared result-card header layout */
.inspection-header, .search-header, .blame-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    font-size: 0.92em;
}

.inspection-header {
    font-weight: 600;
}

.search-header {
    font-weight: 600;
    background: var(--fg-a05);
}

.blame-header {
    background: var(--fg-a05);
}

.inspection-success {
    background: var(--success-bg);
    color: var(--success);
}

.inspection-errors {
    background: var(--danger-bg);
    color: var(--danger);
}

.inspection-warnings {
    background: var(--warning-bg);
    color: var(--warning);
}

.inspection-icon, .search-icon {
    font-size: 1.1em;
}

.inspection-count, .search-count {
    font-size: 1.1em;
    font-weight: 700;
}

.search-count {
    color: var(--link);
}

.inspection-label, .search-label {
    opacity: 0.8;
}

.inspection-files, .search-files {
    padding: var(--sp-2) 0;
}

.inspection-file, .search-file {
    border-top: 1px solid var(--fg-a05);
}

.inspection-file-header, .search-file-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-6);
    background: var(--fg-a05);
}

.inspection-file-count, .search-file-count {
    font-size: 0.8em;
    color: var(--fg-muted);
    background: var(--fg-a05);
    border-radius: var(--r-md);
    padding: 1px var(--sp-3);
    min-width: 18px;
    text-align: center;
}

.inspection-file-findings {
    padding: var(--sp-1) var(--sp-6) var(--sp-2);
}

.inspection-finding {
    padding: var(--sp-1) 0;
    font-size: 0.88em;
    font-family: var(--code-font);
    white-space: pre-wrap;
    word-break: break-all;
}

.inspection-severity {
    display: inline-block;
    width: 16px;
    text-align: center;
    border-radius: var(--r-sm);
    font-size: 0.82em;
    font-weight: 700;
}

.severity-error {
    color: var(--danger);
    background: var(--danger-bg);
}

.severity-warning {
    color: var(--warning);
    background: var(--warning-bg);
}

.severity-weak {
    color: var(--think);
    background: var(--fg-a05);
}

.severity-info {
    color: var(--fg-muted);
    background: var(--fg-a05);
}

.inspection-line {
    color: var(--fg-muted);
    font-size: 0.9em;
}

.inspection-tool {
    color: var(--link);
    font-size: 0.85em;
    opacity: 0.7;
}

.inspection-desc {
    color: var(--fg);
}

/* ── Search Results ──────────────────────────────────────── */

.search-empty {
    color: var(--fg-muted);
}

.search-file-matches {
    padding: var(--sp-1) var(--sp-6) var(--sp-2);
}

.search-match {
    padding: var(--sp-1) 0;
    font-size: 0.88em;
    font-family: var(--code-font);
    white-space: pre-wrap;
    word-break: break-all;
}

.search-line {
    color: var(--fg-muted);
    font-size: 0.9em;
}

.search-badge {
    color: var(--link);
    font-size: 0.85em;
    opacity: 0.8;
}

.search-content {
    color: var(--fg);
}

/* ── Test Results (extends build-result) ─────────────────── */

.test-stats {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-6);
    flex-wrap: wrap;
}

.test-badge {
    font-size: 0.82em;
    font-weight: 600;
    padding: var(--sp-1) var(--sp-4);
    border-radius: var(--r-lg);
}

.test-passed {
    background: var(--success-bg);
    color: var(--success);
}

.test-failed, .test-errors {
    background: var(--danger-bg);
    color: var(--danger);
}

.test-skipped {
    background: var(--fg-a05);
    color: var(--fg-muted);
}

.test-name {
    font-weight: 600;
}

/* ── File Outline ────────────────────────────────────────── */

.outline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-6);
    background: var(--fg-a05);
}

.outline-entries {
    padding: var(--sp-2) var(--sp-6) var(--sp-3);
}

.outline-entry {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    font-size: 0.88em;
}

.outline-name {
    font-family: var(--code-font);
}

.outline-badge-class {
    background: rgba(86, 156, 214, 0.2);
    color: var(--link);
}

.outline-badge-interface {
    background: var(--success-bg);
    color: var(--success);
}

.outline-badge-enum {
    background: var(--warning-bg);
    color: var(--warning);
}

.outline-badge-method {
    background: var(--purple-bg);
    color: var(--purple);
}

.outline-badge-field {
    background: var(--fg-a05);
    color: var(--fg-muted);
}

/* ── Git Blame ───────────────────────────────────────────── */

.blame-count {
    font-weight: 600;
}

.blame-authors {
    color: var(--fg-muted);
}

.blame-lines {
    font-family: var(--code-font);
    font-size: 0.85em;
    overflow-x: auto;
}

.blame-line {
    display: flex;
    gap: var(--sp-4);
    padding: 1px var(--sp-6);
    white-space: pre;
}

.blame-group-start {
    border-top: 1px solid var(--fg-a05);
}

.blame-author {
    width: 100px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.blame-date {
    color: var(--fg-muted);
    flex-shrink: 0;
    width: 80px;
}

.blame-code {
    color: var(--fg);
}

/* ── Git Show (extends git-commit-result) ────────────────── */

.git-show-author {
    color: var(--fg-muted);
    font-weight: 400;
    font-size: 0.9em;
}

.git-show-date {
    color: var(--fg-muted);
    font-size: 0.85em;
    padding: 0 var(--sp-4);
}

/* ── Git Branch ──────────────────────────────────────────── */

.branch-entries {
    padding: var(--sp-2) var(--sp-6) var(--sp-3);
}

.branch-entry {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    font-size: 0.88em;
}

.branch-current {
    font-weight: 600;
}

.branch-name {
    font-family: var(--code-font);
    min-width: 120px;
}

.branch-msg {
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Project Info ────────────────────────────────────────── */

.project-info-header {
    padding: var(--sp-4) var(--sp-6);
    font-weight: 700;
    font-size: 1em;
}

.project-info-kv {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-1) var(--sp-6);
    font-size: 0.88em;
}

.project-info-key {
    color: var(--fg-muted);
    min-width: 100px;
    flex-shrink: 0;
}

.project-info-value {
    font-family: var(--code-font);
    word-break: break-all;
}

.project-info-section {
    border-top: 1px solid var(--fg-a05);
}

.project-info-item {
    padding: var(--sp-1) var(--sp-6) var(--sp-1) calc(var(--sp-6) * 2);
    font-size: 0.88em;
    font-family: var(--code-font);
}

/* ── Coverage result ─────────────────────────────────── */
.coverage-entries {
    padding: var(--sp-2) 0;
}

.coverage-entry {
    padding: var(--sp-3) var(--sp-6);
    border-top: 1px solid var(--fg-a05);
}

.coverage-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.coverage-name {
    font-family: var(--code-font);
    font-size: 0.9em;
}

.coverage-pct {
    font-weight: 700;
    font-size: 0.9em;
}

.coverage-bar {
    height: 6px;
    background: var(--fg-a08);
    border-radius: var(--r-sm);
    overflow: hidden;
    margin-bottom: 2px;
}

.coverage-bar-fill {
    height: 100%;
    border-radius: var(--r-sm);
    transition: width 0.3s ease;
}

.coverage-detail {
    font-size: 0.78em;
    color: var(--fg-muted);
    text-align: right;
}

/* ── HTTP request result ─────────────────────────────── */
.http-status {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    font-weight: 600;
}

.http-status-success {
    background: var(--success-bg);
    color: var(--success);
}

.http-status-warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.http-status-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.http-code {
    font-size: 1.1em;
    font-weight: 700;
}

.http-section {
    border-top: 1px solid var(--fg-a05);
}

.http-section-title {
    padding: var(--sp-2) var(--sp-6);
    font-size: 0.85em;
    font-weight: 600;
    color: var(--fg-muted);
    background: var(--fg-a05);
}

.http-headers {
    padding: var(--sp-2) var(--sp-6);
}

.http-header {
    display: flex;
    gap: var(--sp-4);
    padding: 1px 0;
    font-size: 0.85em;
    font-family: var(--code-font);
}

.http-header-key {
    color: var(--link);
    flex-shrink: 0;
}

.http-header-key::after {
    content: ':';
}

.http-header-value {
    color: var(--fg);
    word-break: break-all;
}

.http-body {
    margin: 0;
    padding: var(--sp-4) var(--sp-6);
    font-size: 0.85em;
    max-height: 300px;
    overflow: auto;
}

/* ── Class outline extras ────────────────────────────── */
.class-outline-inheritance {
    padding: var(--sp-1) var(--sp-6) var(--sp-3);
    font-size: 0.85em;
    font-style: italic;
    color: var(--fg-muted);
    border-bottom: 1px solid var(--fg-a05);
}

.outline-section {
    border-top: 1px solid var(--fg-a05);
}

.outline-section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-6);
    font-weight: 600;
    font-size: 0.85em;
    color: var(--fg-muted);
    background: var(--fg-a05);
}

/* ── File list (list_project_files) ─────────────────── */
.file-list-result {
    border-radius: var(--r-pill);
    border: 1px solid var(--fg-a08);
    overflow: hidden;
}

.file-list-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-6);
    border-bottom: 1px solid var(--fg-a08);
}

.file-list-count {
    font-weight: 700;
    font-size: 1.1em;
}

.file-list-label {
    color: var(--fg-muted);
    font-size: 0.9em;
}

.file-list-entries {
    padding: var(--sp-2) 0;
    max-height: 400px;
    overflow-y: auto;
}

.file-list-dir {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-6) 1px;
    margin-top: var(--sp-2);
}

.file-list-dir-name {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--fg-muted);
    font-family: var(--code-font);
}

.file-list-entry {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 1px var(--sp-6) 1px calc(var(--sp-6) * 2);
    font-size: 0.88em;
}

.file-list-tag {
    font-size: 0.75em;
    padding: 0 5px;
    border-radius: 3px;
    font-weight: 600;
    white-space: nowrap;
}

.file-tag-type {
    color: var(--fg-muted);
    background: var(--fg-a05);
}

.file-tag-test {
    color: var(--success);
    background: rgba(var(--success-rgb, 80, 161, 79), 0.12);
}

.file-tag-generated {
    color: var(--fg-muted);
    background: var(--fg-a08);
}

.file-tag-excluded {
    color: var(--warning);
    background: rgba(var(--warning-rgb, 190, 132, 46), 0.12);
}

/* ── Run command result ─────────────────────────────── */
.cmd-result {
    font-size: 0.9em;
    line-height: 1.5;
}

.cmd-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.cmd-success .build-icon,
.cmd-success .build-status {
    color: var(--success);
}

.cmd-fail .build-icon,
.cmd-fail .build-status {
    color: var(--danger);
}

.cmd-timeout .build-icon,
.cmd-timeout .build-status {
    color: var(--warning);
}

.cmd-result .tool-output {
    margin-top: var(--sp-3);
}

/* ── Go to declaration ──────────────────────────────── */
.decl-result {
    border-radius: var(--r-pill);
    border: 1px solid var(--fg-a08);
    overflow: hidden;
    font-size: 0.9em;
}

.decl-header {
    padding: var(--sp-3) var(--sp-6);
    border-bottom: 1px solid var(--fg-a08);
}

.decl-symbol {
    font-weight: 700;
    font-family: var(--code-font);
}

.decl-location {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: var(--sp-2) var(--sp-6);
    font-size: 0.9em;
}

.decl-context {
    border-top: 1px solid var(--fg-a05);
    font-family: var(--code-font);
    font-size: 0.88em;
    line-height: 1.6;
    padding: var(--sp-2) 0;
    background: var(--fg-a05);
}

.decl-line {
    display: flex;
    padding: 0 var(--sp-6);
    gap: var(--sp-4);
}

.decl-target {
    background: var(--agent-a08);
}

.decl-line-num {
    color: var(--fg-muted);
    user-select: none;
    min-width: 3ch;
    text-align: right;
    flex-shrink: 0;
}

.decl-line-code {
    white-space: pre;
    overflow-x: auto;
}

/* ── Refactor result ────────────────────────────────── */
.refactor-result {
    font-size: 0.9em;
    line-height: 1.5;
}

.refactor-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.refactor-success .build-icon,
.refactor-success .build-status {
    color: var(--success);
}

.refactor-fail .build-icon,
.refactor-fail .build-status {
    color: var(--danger);
}

.refactor-symbol {
    font-family: var(--code-font);
    font-weight: 600;
    font-size: 0.92em;
}

.refactor-detail {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    font-family: var(--code-font);
    font-size: 0.92em;
}

.refactor-old {
    text-decoration: line-through;
    color: var(--danger);
}

.refactor-arrow {
    color: var(--fg-muted);
}

.refactor-new {
    font-weight: 600;
    color: var(--success);
}

.refactor-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-2);
    font-size: 0.88em;
}

.refactor-usages {
    margin-top: var(--sp-3);
    border-top: 1px solid var(--fg-a08);
    padding-top: var(--sp-2);
}

.refactor-usage {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 1px 0;
    font-size: 0.88em;
}

/* ── Type hierarchy ─────────────────────────────────── */
.hierarchy-result {
    border-radius: var(--r-pill);
    border: 1px solid var(--fg-a08);
    overflow: hidden;
    font-size: 0.9em;
}

.hierarchy-section {
    border-top: 1px solid var(--fg-a05);
}

.hierarchy-section:first-child {
    border-top: none;
}

.hierarchy-entries {
    padding: var(--sp-1) 0;
}

.hierarchy-center {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-6);
    font-weight: 700;
    background: var(--agent-a08);
    border-top: 1px solid var(--fg-a08);
    border-bottom: 1px solid var(--fg-a08);
}

.hierarchy-entry {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-1) var(--sp-6);
    font-size: 0.92em;
}

.hierarchy-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--r-sm);
    font-size: 0.75em;
    font-weight: 700;
    flex-shrink: 0;
}

.kind-class {
    color: var(--link);
    background: rgba(var(--link-rgb, 88, 157, 246), 0.15);
}

.kind-interface {
    color: var(--success);
    background: rgba(var(--success-rgb, 80, 161, 79), 0.15);
}

.kind-enum {
    color: var(--warning);
    background: rgba(var(--warning-rgb, 190, 132, 46), 0.15);
}

.kind-annotation {
    color: var(--fg-muted);
    background: var(--fg-a08);
}

.hierarchy-name {
    font-family: var(--code-font);
}

.hierarchy-type-name {
    font-family: var(--code-font);
}

.hierarchy-location {
    margin-left: auto;
    font-size: 0.85em;
    color: var(--fg-muted);
}

/* ── Read File result ──────────────────────────────────── */
.file-read-result {
    font-size: 0.9em;
    line-height: 1.5;
}

.file-read-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
    color: var(--fg-muted);
    font-size: 0.88em;
}

.file-read-range {
    font-weight: 600;
    color: var(--fg);
}

.file-read-code {
    font-family: var(--code-font);
    font-size: var(--code-font-size);
    max-height: 300px;
    overflow-y: auto;
    background: var(--code-bg);
    border-radius: var(--r-sm);
    padding: var(--sp-2) 0;
}

.file-line {
    display: flex;
    gap: 0;
    line-height: 1.45;
    padding: 0 var(--sp-3);
}

.file-line-num {
    flex-shrink: 0;
    min-width: 3.2em;
    text-align: right;
    padding-right: var(--sp-3);
    color: var(--fg-muted);
    user-select: none;
    opacity: 0.5;
}

.file-line-code {
    white-space: pre;
    overflow-x: auto;
}

.file-read-truncated {
    text-align: center;
    padding: var(--sp-2);
    color: var(--fg-muted);
    font-size: 0.85em;
    font-style: italic;
}

.file-empty {
    color: var(--fg-muted);
    font-style: italic;
}

/* ── Write File result ─────────────────────────────────── */
.file-write-result {
    font-size: 0.9em;
    line-height: 1.5;
}

.file-write-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.file-write-success .build-icon,
.file-write-success .build-status {
    color: var(--success);
}

.file-write-detail {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-1);
    font-size: 0.88em;
}

.file-write-arrow {
    color: var(--fg-muted);
}

.file-write-delta {
    font-size: 0.85em;
    color: var(--fg-muted);
}

.file-write-warning {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    background: rgba(var(--warning-rgb, 190, 132, 46), 0.12);
    color: var(--warning);
    font-size: 0.85em;
}

.file-write-context {
    font-family: var(--code-font);
    font-size: var(--code-font-size);
    max-height: 200px;
    overflow-y: auto;
    background: var(--code-bg);
    border-radius: var(--r-sm);
    padding: var(--sp-2) 0;
    margin-top: var(--sp-2);
}

/* ── Nudge bubble ────────────────────────────────────── */
.nudge-pending message-bubble {
    position: relative;
    opacity: 0.7;
    padding-right: 1.8em;
}

.nudge-pending .nudge-label {
    color: var(--warning);
}

/* Spinner inside the nudge pending label uses warning color */
.nudge-spinner {
    border-top-color: var(--warning);
}

/* Sent nudge label (shown on session replay) */
.nudge-sent-label {
    opacity: 0.7;
}

.nudge-cancel-x {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 0.8em;
    line-height: 1;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}

.nudge-cancel-x:hover {
    opacity: 1;
    background: rgba(128, 128, 128, 0.25);
}

/* Info button for reprimand nudges — positioned to the left of the cancel button */
.nudge-info-btn {
    position: absolute;
    top: var(--sp-2);
    right: calc(var(--sp-2) + 1.5em);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}

.nudge-info-btn:hover {
    opacity: 1;
    background: rgba(128, 128, 128, 0.25);
}

.nudge-info-btn.nudge-info-open {
    opacity: 1;
    background: rgba(128, 128, 128, 0.3);
    outline: 1px solid rgba(128, 128, 128, 0.4);
}

.nudge-info-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    width: 230px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    background: var(--chip-bg);
    color: var(--fg);
    font-size: 0.8em;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 100;
    pointer-events: auto;
}

.nudge-info-btn.nudge-info-open .nudge-info-tooltip {
    display: block;
}

.nudge-settings-link {
    display: block;
    margin-top: var(--sp-1);
    color: var(--accent);
    text-decoration: none;
}

.nudge-settings-link:hover {
    text-decoration: underline;
}

/* ── Image thumbnails (pasted images below user bubble) ─────────── */
.image-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-2) 0 var(--sp-1);
}

.image-thumb {
    max-width: 160px;
    max-height: 160px;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid rgba(128, 128, 128, 0.2);
    object-fit: contain;
    display: block;
}
