/* ============================================================
   CHAT PANEL
   ============================================================ */


#chat-panel {
    --chat-pad: 6px;
    width: var(--chat-w);
    min-width: 280px;
    background: var(--chrome-gradient);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: 0;
    overflow: hidden;
}

#chat-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px calc(var(--chat-pad) + 7px) 6px calc(var(--chat-pad) + 4px);
    flex-shrink: 0;
}

#thread-switcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

#thread-label {
    font: 600 14px var(--sans);
    color: var(--t1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* ---- Messages ---- */
#chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Chat empty extends the shared .empty-state primitive — fills available height. */
.chat-empty {
    flex: 1;
    justify-content: center;
    padding: 32px 20px;
}

.chat-empty-icon { opacity: 0.3; }

.msg {}
.msg.user { margin-left: 28px; }
.msg.user .msg-body {
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    padding: 10px 14px;
    border-radius: var(--radius) var(--radius) 4px var(--radius);
    font-size: var(--fs-base);
    color: var(--t1);
    line-height: 1.55;
}
.msg.assistant .msg-body {
    font-size: var(--fs-base);
    color: var(--t1);
    line-height: 1.7;
}
.msg.assistant .msg-body p { margin-bottom: 10px; }
.msg.assistant .msg-body p:last-child { margin-bottom: 0; }
.msg.assistant .msg-body strong { color: var(--t1); font-weight: 600; }
.msg.assistant .msg-body em { color: var(--t2); font-style: italic; }
.msg.system .msg-body {
    font-size: var(--fs-sm);
    color: var(--red);
    padding: 6px 0;
}

/* ---- Tool steps (grouped) ---- */
.tool-group {
    margin: 4px 0;
    background: var(--chrome-bg2);
    border-left: 2px solid var(--chrome-border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 4px 0;
}
.tool-step { display: block; }
.tool-step-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    font-size: var(--fs-sm);
    cursor: pointer;
    color: var(--t3);
    border-radius: var(--radius-sm);
    transition: background var(--dur), color var(--dur);
}
.tool-step-head:hover { background: var(--chrome-hover); color: var(--t2); }

/* Icon — shows spinner while running, tool icon when done, X when failed */
.tool-step-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--t3); }
.tool-step-head:hover .tool-step-icon { color: var(--t2); }
.tool-spinner { color: var(--accent); animation: spin 1.2s linear infinite; }
/* @keyframes spin lives in components.css */
.tool-step.failed .tool-fail { color: var(--red); }

/* Label */
.tool-step-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 450;
}
.tool-step.done .tool-step-label { color: var(--t2); }
.tool-step.running .tool-step-label { color: var(--t2); }

/* Chevron */
.tool-step-chevron {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--t3);
    opacity: 0.6;
    transform: rotate(90deg);
    transition: opacity var(--dur), transform var(--dur);
}
.tool-step.collapsed .tool-step-chevron { opacity: 0; transform: rotate(0deg); }
.tool-step-head:hover .tool-step-chevron { opacity: 0.6; }
.tool-step.collapsed:hover .tool-step-chevron { opacity: 0.6; transform: rotate(0deg); }

/* No-detail — compact status line, not interactive */
.tool-step.no-detail .tool-step-chevron { display: none; }
.tool-step.no-detail .tool-step-head {
    cursor: default;
    padding: 1px 6px;
}
.tool-step.no-detail .tool-step-head:hover { background: none; }

/* Detail panel — visible by default, collapsed hides */
.tool-step-detail {
    padding: 6px 8px 8px 36px;
    font: var(--fs-xs)/1.55 var(--sans);
    color: var(--t3);
    overflow-y: auto;
}
.tool-step.collapsed .tool-step-detail { display: none; }
.tool-step-detail:empty { display: none; }

/* Detail rows */
.td-row {
    display: flex; gap: 8px; padding: 2px 0;
    font-size: var(--fs-xs); line-height: 1.4;
}
.td-label {
    color: var(--t3); flex-shrink: 0;
    min-width: 56px; font-weight: 500;
}
.td-value {
    color: var(--t2); word-break: break-word;
}
.td-divider {
    height: 1px; background: var(--chrome-border);
    margin: 5px 0;
}
.td-block { padding: 3px 0; }
.td-block .td-label { display: block; margin-bottom: 2px; }
.td-blockval {
    color: var(--t2); font-size: var(--fs-xs); line-height: 1.5;
    white-space: pre-wrap; word-break: break-word;
    overflow-y: auto;
    padding: 4px 8px;
    background: var(--chrome-surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--chrome-border);
}

/* Search results in detail */
.td-result {
    padding: 4px 0;
    border-bottom: 1px solid var(--chrome-border);
}
.td-result:last-child { border-bottom: none; }
.td-result-title {
    font-size: var(--fs-xs); color: var(--t2);
    font-weight: 500;
}
.td-result-snippet {
    font-size: var(--fs-xs); color: var(--t3);
    margin-top: 1px; line-height: 1.4;
}
.td-result-title.td-verified { color: var(--green); }
.td-result-title.td-unverified { color: var(--red); }

/* Plan tasks in detail */
.td-task {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 0; font-size: var(--fs-xs); color: var(--t2);
}
.td-task-icon { width: 12px; text-align: center; flex-shrink: 0; }
.td-task.done { color: var(--t3); }
.td-task.done .td-task-icon { color: var(--t2); }
.td-task.running .td-task-icon { color: var(--accent); }

/* Section list in read_sections tool detail */
.td-sec-list { padding: 2px 0; }
.td-sec {
    padding: 1px 0;
    font-size: var(--fs-xs);
    color: var(--t2);
}

.td-error .td-value { color: var(--red); }
.td-error .td-label { color: var(--red); }

/* Warning row — amber/ochre, distinct from red error */
.td-warn .td-label { color: var(--warning); }
.td-warn .td-value { color: var(--warning); }

/* Search/academic result enhancements */
.td-result-link {
    color: var(--t1);
    text-decoration: none;
    border-bottom: 1px dashed var(--chrome-border);
}
.td-result-link:hover { color: var(--accent-text); border-bottom-color: var(--accent-text); }
.td-result-meta {
    font-size: 10.5px; color: var(--t3);
    margin-top: 1px;
}
.td-result-quote {
    margin: 4px 0 0; padding: 3px 8px;
    border-left: 2px solid var(--chrome-border);
    color: var(--t2); font-style: italic;
    font-size: var(--fs-xs); line-height: 1.5;
}

/* Tool action area in card head (right of label, left of chevron) */
.tool-step-actions {
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0; margin-left: auto;
}
.tool-step-actions:empty { display: none; }
.tool-retry {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 1px solid var(--chrome-border);
    color: var(--t3);
    padding: 1px 6px; font: 500 10.5px var(--sans);
    border-radius: var(--radius-sm); cursor: pointer;
    transition: color var(--dur), background var(--dur), border-color var(--dur);
}
.tool-retry:hover {
    color: var(--accent-text);
    background: var(--accent-dim);
    border-color: var(--accent-border);
}

/* Clickable tool-step label (links to created entity) */
.tool-step-label-link { cursor: pointer; }
.tool-step-label-link:hover { color: var(--accent-text); text-decoration: underline; }

/* Image thumbnail preview in figure tool details */
.td-thumb {
    max-width: 80px; max-height: 80px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--chrome-border);
    object-fit: cover;
}
.td-eq-preview { font-size: var(--fs-sm); color: var(--t1); padding: 4px 0; }
.td-table-preview { font-size: var(--fs-xs); color: var(--t2); overflow-x: auto; }
.td-table-preview table { border-collapse: collapse; }
.td-table-preview th, .td-table-preview td {
    border: 1px solid var(--chrome-border); padding: 2px 6px;
}

/* Truncated text "Show more" */
.td-truncate { position: relative; }
.td-trunc-toggle, .td-more-btn {
    display: inline-block; margin-top: 4px;
    background: none; border: none; padding: 0;
    color: var(--accent-text); cursor: pointer;
    font: 500 11px var(--sans);
}
.td-trunc-toggle:hover, .td-more-btn:hover {
    text-decoration: underline;
}

/* grep_document match chip */
.td-grep { padding: 3px 0; }
.td-grep-label {
    display: block; font-size: var(--fs-xs); color: var(--t2); font-weight: 500;
}
.td-grep-label.chip-link { cursor: pointer; }
.td-grep-label.chip-link:hover { color: var(--accent-text); }
.td-grep-snippet {
    font-size: var(--fs-xs); color: var(--t3);
    margin-top: 1px; line-height: 1.4;
    font-style: italic;
}

/* "+N more" expander wrapper */
.td-more-wrap { padding: 2px 0; }
.td-more.hidden { display: none; }

/* Undo cue for delete_section */
.td-undo .td-value a { color: var(--accent-text); text-decoration: none; }
.td-undo .td-value a:hover { text-decoration: underline; }

/* Highlight flash on history sidebar entry — used by Undo cue */
.rev-flash {
    animation: rev-flash 1.6s ease-out;
}
@keyframes rev-flash {
    0%, 100% { background: transparent; }
    20%, 60% { background: var(--accent-dim); }
}

/* Change steps sit flush inside tool groups (same as tool-step) */
.tool-group > .change-step { margin: 0; }

/* ---- Plan (sticky above chat messages) ---- */
.plan-card {
    padding: 6px 10px;
    border-bottom: 1px solid var(--chrome-border);
    background: var(--chrome-bg);
    flex-shrink: 0;
}
.plan-step {
    display: flex; align-items: center;
    gap: 7px; padding: 2px 0; font-size: var(--fs-sm); color: var(--t3);
}
.plan-icon { width: 14px; text-align: center; flex-shrink: 0; font-size: var(--fs-xs); }
.plan-step.pending .plan-icon { color: var(--t3); }
.plan-step.running .plan-icon { color: var(--accent); }
.plan-step.running { color: var(--t2); }
.plan-step.done    .plan-icon { color: var(--t2); }
.plan-step.failed  .plan-icon { color: var(--red); }

/* ---- Change step (tool-step pattern for pending changes) ---- */
.change-step .change-step-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}
.change-step .btn-accept-sm,
.change-step .btn-reject-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    color: var(--t3);
    font-size: 0;
    transition: color var(--dur), background var(--dur), border-color var(--dur);
}
.change-step .btn-accept-sm:hover {
    color: var(--green);
    background: var(--green-bg);
    border-color: var(--green-border);
}
.change-step .btn-reject-sm:hover {
    color: var(--red);
    background: var(--red-bg);
    border-color: var(--red-border);
}
.change-step.change-accepted .tool-step-icon { color: var(--green); }
.change-step.change-accepted .tool-step-label { color: var(--t3); }
.change-step.change-rejected { opacity: 0.5; }
.change-step.change-rejected .tool-step-label { color: var(--t3); }
/* Hide actions after accept/reject */
.change-step.change-accepted .change-step-actions,
.change-step.change-rejected .change-step-actions { display: none; }
/* Diff box inside change-step detail */
.change-step .tool-step-detail .diff-box {
    margin-top: 6px;
}
/* Origin pill: 'Manual' (green) vs 'AI' (accent gold). One pill per card,
   no extra clutter — sits between the label and the action buttons. */
.change-origin-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    border: 1px solid transparent;
}
.change-origin-pill.change-origin-user {
    color: var(--green);
    background: var(--green-bg);
    border-color: var(--green-border);
}
.change-origin-pill.change-origin-agent {
    color: var(--accent);
    background: var(--chrome-hover);
    border-color: var(--chrome-border);
}

/* ---- Chips ---- */
.chip-section {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--t3);
    font: 450 11px var(--sans);
    padding: 2px 4px;
    cursor: pointer; transition: color var(--dur);
}
.chip-section:hover { color: var(--t2); }
.chip-source {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--t3);
    font: 450 11px var(--sans);
    padding: 2px 4px; cursor: pointer;
}

/* ---- Chat input ---- */
#chat-input-area {
    padding: 8px var(--chat-pad) 10px;
    border-top: 1px solid var(--chrome-border);
    flex-shrink: 0;
}

#chat-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius-lg);
    padding: 6px 8px 6px 16px;
    transition: border-color var(--dur);
}
#chat-input-wrap:focus-within { border-color: var(--accent-border); }

#chat-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--t1);
    font: 13px/1.55 var(--sans);
    padding: 6px 0;
    resize: none;
    outline: none;
    max-height: 140px;
}
#chat-input::placeholder { color: var(--t3); }

.btn-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--radius);
    border: none;
    background: var(--accent);
    color: var(--btn-text);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--dur), transform 80ms;
}
.btn-send:hover { background: var(--accent-hover); }
.btn-send:active { transform: scale(0.95); }
.btn-send:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-send.is-stopping { background: var(--red); color: var(--btn-text); }
.btn-send.is-stopping:hover { background: var(--red-hover); }
.btn-send.is-stopping-pending { opacity: 0.5; pointer-events: none; }

/* Markdown rendering in chat */
.msg-body pre.md-pre {
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    overflow-x: auto;
    font-size: var(--fs-sm);
    line-height: 1.55;
    margin: 8px 0;
}
.msg-body pre.md-pre code { background: none; padding: 0; font-size: inherit; }
.msg-body code.md-code {
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    font-size: var(--fs-xs);
}
.msg-body ul, .msg-body ol {
    margin: 8px 0;
    padding-left: 18px;
}
.msg-body ul { list-style: none; }
.msg-body ul > li { position: relative; padding-left: 4px; }
.msg-body ul > li::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--t3);
}
.msg-body ol { padding-left: 22px; }
.msg-body ol > li::marker { color: var(--t3); font-size: var(--fs-sm); font-weight: 500; }
.msg-body li {
    margin: 4px 0;
    line-height: 1.6;
    padding-left: 2px;
}
.msg-body li + li { margin-top: 6px; }
.msg-body h3 {
    margin: 14px 0 6px;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--t1);
    letter-spacing: -0.01em;
}
.msg-body h4 {
    margin: 12px 0 4px;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--t1);
}
.msg-body h5 {
    margin: 10px 0 4px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.msg-body h3:first-child, .msg-body h4:first-child, .msg-body h5:first-child { margin-top: 2px; }
.msg-body a {
    color: var(--accent-text);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-border);
    transition: border-color var(--dur);
}
.msg-body a:hover { border-bottom-color: var(--accent-text); }

/* Clickable section/figure/table/equation links from [sec:ID], [fig:ID], etc. */
.sec-link, .fig-link {
    color: var(--accent-text);
    cursor: pointer;
    font-weight: 500;
    border-bottom: 1px dotted var(--accent-border);
    transition: border-color var(--dur), color var(--dur);
}
.sec-link:hover, .fig-link:hover { border-bottom-style: solid; border-bottom-color: var(--accent-text); }

/* Horizontal rule in chat messages */
.msg-body hr {
    border: none;
    height: 1px;
    background: var(--chrome-border);
    margin: 12px 0;
}

/* Nested lists */
.msg-body li > ul, .msg-body li > ol { margin: 4px 0 2px; }

.streaming-dot {
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: blink 1s ease-in-out infinite;
    margin-left: 3px;
    vertical-align: middle;
}
@keyframes blink { 0%,100% { opacity: 0.2; } 50% { opacity: 1; } }

.thinking-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--t3);
    font: 12px/1.4 var(--sans);
}
.thinking-indicator .thinking-dots {
    display: flex;
    gap: 3px;
}
.thinking-indicator .thinking-dots span {
    width: 4px; height: 4px;
    background: var(--accent);
    border-radius: 50%;
    animation: thinking-bounce 1.4s ease-in-out infinite;
}
.thinking-indicator .thinking-dots span:nth-child(2) { animation-delay: 0.16s; }
.thinking-indicator .thinking-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes thinking-bounce {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* ---- Status trail (frozen thinking steps) ---- */
.status-trail {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 12px;
    color: var(--t3);
    font: var(--fs-xs)/1.4 var(--sans);
}
.status-trail svg { flex-shrink: 0; opacity: 0.5; }

/* ============================================================
   CHAT ACCENT MESSAGE (stop indicator, not a real message)
   ============================================================ */

.chat-accent {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    margin: 4px 0;
}
.chat-accent span {
    font: 500 11px var(--sans);
    color: var(--t3);
    background: var(--chrome-surface);
    border: 1px solid var(--chrome-border);
    border-radius: 12px;
    padding: 3px 14px;
    letter-spacing: 0.01em;
}

/* ---- Legacy chat-change (kept for landing mockup compat) ---- */
.chat-change { background: var(--chrome-surface); border: 1px solid var(--chrome-border); border-radius: var(--radius); padding: 10px 12px; margin: 4px 0; cursor: pointer; }
.chat-change-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.chat-change-section { font: 500 12px var(--sans); color: var(--t1); }
.chat-change-summary { font-size: var(--fs-xs); color: var(--t2); margin-bottom: 8px; line-height: 1.5; }
.chat-change-actions { display: flex; gap: 4px; }