/*
 * conversation-page.css — shared styles for the conversation-page layer.
 *
 * Loaded by index.html and conversation.html (the two pages that share the
 * conversation-page DOM contract; see shared/conversation-page.js). Holds the
 * selector families both pages previously duplicated inline: chat-actions
 * button variants, save/conflict/commit/changed-files modal styles,
 * .recovery-*, .file-finder-*, shortcuts modal, .message-attachment*,
 * .drop-overlay*, .conversation-title*, login error, loading spinner,
 * container layout.
 *
 * Page-specific styles stay inline in each page's <style> block
 * (index.html: header, sidebar, search, knowledge curator).
 * Base tokens/reset/modal/button primitives live in common.css;
 * message rendering lives in conversation-rendering.css.
 */
/* body override — system font stack (no DM Sans), full-height flex column */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.google-btn svg { width: 20px; height: 20px; }
.login-error {
    color: #c62828;
    margin-top: 16px;
    font-size: 0.875rem;
}
/* Toolbar button base styles live in common.css (.btn-toolbar).
   Page-specific color/variant overrides remain below. */
/* Nav Links container (pill styling lives in common.css .nav-link) */
.nav-links {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-right: 16px;
}
.help-btn { padding: 6px 10px; justify-content: center; min-width: 32px; }
/* Icon-only chat action buttons — compact, centered */
.chat-actions-right .favorite-btn,
.chat-actions-right .archive-btn,
.chat-actions-right .share-btn,
.chat-actions-right .copy-md-btn,
.chat-actions-right .save-btn,
.chat-actions-right .remove-changes-btn {
    padding: 6px 8px;
    min-width: 32px;
    justify-content: center;
    gap: 0;
}
.action-separator {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: var(--border);
    margin: 0 4px;
    vertical-align: middle;
}
/* Save button — success color variant */
.save-btn { color: #2e7d32; border-color: #1b4332; }
.save-btn:hover:not(:disabled) { border-color: #2e7d32; background: rgba(102, 187, 106, 0.1); }
.save-btn.has-changes { border-color: var(--accent); color: var(--accent); }
.save-btn.has-changes:hover:not(:disabled) { background: rgba(139, 111, 71, 0.1); }
/* Remove Changes — accent */
.remove-changes-btn { color: var(--accent); font-size: 0.8125rem; }
.remove-changes-btn:hover { border-color: var(--accent); background: rgba(139, 111, 71, 0.08); }
/* Commit list for Remove Changes */
.commit-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.commit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.commit-item:hover {
    background: var(--bg-tertiary);
}
.commit-item.selected {
    background: rgba(139, 111, 71, 0.08);
    border: 1px solid rgba(139, 111, 71, 0.2);
}
.commit-item input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}
.commit-info {
    flex: 1;
    min-width: 0;
}
.commit-message {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.commit-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.commit-files {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    margin-top: 4px;
}
/* Preview list for Remove Changes */
.preview-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.preview-item {
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
}
.preview-item-path {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.8125rem;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.preview-item-summary {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.conflict-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.conflict-option {
    justify-content: flex-start;
    text-align: left;
}
/* Share / Copy MD — accent variant */
.share-btn,
.copy-md-btn { color: var(--accent); }
.share-btn:hover:not(:disabled),
.copy-md-btn:hover:not(:disabled) { border-color: var(--accent); background: rgba(139, 111, 71, 0.08); }
/* Archive — danger variant */
.archive-btn { color: #b85c3a; }
.archive-btn:hover:not(:disabled) { border-color: #b85c3a; background: rgba(184, 92, 58, 0.08); }
/* Favorite — gold variant */
.favorite-btn.active { color: #d4a017; border-color: #d4a017; }
.favorite-btn:hover:not(:disabled) { border-color: #d4a017; background: rgba(212, 160, 23, 0.08); color: #d4a017; }
/* Forget — danger variant, curator-only */
.forget-btn { color: #b85c3a; display: none; }
.forget-btn:hover:not(:disabled) { border-color: #b85c3a; background: rgba(184, 92, 58, 0.08); }
/* Chat action bar (above messages) */
/* Conversation title in action bar */
.conversation-title-container {
    flex: 1;
    min-width: 0;
    margin: 0 8px;
}
.conversation-title {
    display: block;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}
.conversation-title:hover {
    background: rgba(0,0,0,0.04);
}
.conversation-title.hidden { display: none; }
.conversation-title-input {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 0.875rem;
    padding: 4px 8px;
    border-radius: 4px;
    outline: none;
}
.conversation-title-input:focus {
    border-color: var(--accent);
}
.conversation-title-input.hidden { display: none; }
/* Toast notification styles live in common.css */
/* .modal, .modal h2, .modal-body, .modal textarea, .modal-footer live in common.css */
/* .btn-secondary and .btn-danger-destructive live in common.css */
/* Session recovery modal */
.recovery-modal {
    max-width: 400px;
    text-align: center;
}
.recovery-modal .recovery-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}
.recovery-modal .recovery-message {
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}
.recovery-modal .spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 8px;
}
/* @keyframes spin lives in common.css */
.recovery-progress-container {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    margin-bottom: 16px;
    overflow: hidden;
}
.recovery-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #b8945e);
    border-radius: 3px;
    width: 0%;
    transition: width 0.5s ease-out;
}
.recovery-options {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.recovery-options.hidden { display: none; }
.recovery-options-hint {
    color: #b85c3a;
    font-size: 0.875rem;
    margin-bottom: 16px;
}
.recovery-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-warning {
    background: #f0a500;
    color: #2c2c2c;
}
.btn-warning:hover {
    background: #d99200;
}
/* .btn-danger-destructive lives in common.css */
.recovery-history-note {
    background: var(--bg-tertiary);
    padding: 12px;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
/* Keyboard shortcuts help modal */
.shortcuts-modal {
    max-width: 420px;
}
/* Repo file finder modal */
.file-finder-modal {
    max-width: 640px;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow: hidden;
}
.file-finder-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 14px 16px;
    font-size: 0.875rem;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
}
.file-finder-input::placeholder { color: var(--text-tertiary); }
.file-finder-status {
    padding: 6px 16px;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border);
}
.file-finder-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.file-finder-item {
    padding: 8px 16px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
}
.file-finder-item .file-finder-dir {
    color: var(--text-tertiary);
}
.file-finder-item.selected,
.file-finder-item:hover {
    background: var(--bg-tertiary);
}
/* Find Bar */
.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.shortcut-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.shortcut-item:last-child {
    border-bottom: none;
}
.shortcut-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
}
.shortcut-note {
    color: var(--text-secondary);
    opacity: 0.7;
    font-size: 0.8125rem;
}
.shortcut-keys {
    display: flex;
    gap: 4px;
    align-items: center;
}
.key {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    color: var(--accent);
    min-width: 24px;
    text-align: center;
}
.key-separator {
    color: var(--text-secondary);
    font-size: 0.75rem;
}
.shortcuts-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-align: center;
}
.conflict-warning {
    background: rgba(220, 53, 69, 0.08);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.conflict-warning svg { flex-shrink: 0; color: #c62828; align-self: flex-start; margin-top: 2px; }
.conflict-warning .conflict-details { flex: 1; }
.conflict-warning p { color: #c62828; font-size: 0.8125rem; margin: 0; }
.conflict-warning.can-auto-merge { background: rgba(255, 193, 7, 0.15); border-color: rgba(255, 193, 7, 0.3); }
.conflict-warning.can-auto-merge svg { color: #ffc107; }
.conflict-warning.can-auto-merge p { color: #ffc107; }
.conflict-file-list { 
    margin: 8px 0 0 0; 
    padding: 0 0 0 16px; 
    font-size: 0.75rem; 
    color: rgba(198, 40, 40, 0.7); 
    max-height: 120px; 
    overflow-y: auto;
    list-style-type: disc;
}
.conflict-warning.can-auto-merge .conflict-file-list { color: rgba(255, 193, 7, 0.8); }
.conflict-file-list li { margin: 2px 0; font-family: monospace; }
.conflict-help { 
    margin-top: 8px; 
    padding-top: 8px; 
    border-top: 1px solid rgba(198, 40, 40, 0.15); 
    font-size: 0.75rem;
    color: rgba(198, 40, 40, 0.6);
}
.conflict-warning.can-auto-merge .conflict-help { 
    border-top-color: rgba(255, 193, 7, 0.2);
    color: rgba(255, 193, 7, 0.7);
}
.changed-files-section {
    margin-bottom: 12px;
}
.changed-files-header {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0 0 6px 0;
}
.changed-files-list {
    max-height: 120px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.changed-file-item {
    font-size: 0.75rem;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    background: var(--bg-tertiary, rgba(255,255,255,0.05));
    padding: 3px 8px;
    border-radius: 4px;
    color: var(--text-primary, #eee);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.changed-files-loading {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    padding: 4px 0;
}
.save-result {
    text-align: center;
    padding: 20px 0;
}
.save-result.success { color: #2e7d32; }
.save-result.error { color: #c62828; }
.save-result svg { width: 48px; height: 48px; margin-bottom: 12px; }
.files-changed {
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.container {
    display: flex;
    flex: 1;
    overflow: hidden;
}
/* Chat Area */
/* Message attachments */
.message-attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.message-attachment {
    border-radius: 8px;
    overflow: hidden;
}
.message-attachment:not(.file) {
    max-width: 280px;
}
.message-attachment img {
    width: 100%;
    height: auto;
    display: block;
}
.message-attachment.file {
    background: rgba(255, 255, 255, 0.15);
    padding: 10px 14px;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    max-width: 400px;
    color: inherit;
}
.message-attachment.file .file-ext {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}
.message-attachment.file .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Attachments in assistant messages need dark text */
.message.assistant .message-attachment.file {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.message.assistant .message-attachment.file .file-ext {
    background: var(--accent);
    color: #fff;
}
.drop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(139, 111, 71, 0.06);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.drop-overlay.visible {
    opacity: 1;
}
.drop-overlay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 48px;
    background: var(--bg-secondary, #ffffff);
    border: 2px dashed var(--accent, #8b6f47);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.drop-overlay-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(139, 111, 71, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, #8b6f47);
}
.drop-overlay-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #2c2c2c);
}
.drop-overlay-hint {
    font-size: 0.8125rem;
    color: var(--text-secondary, #7a7a7a);
}

/* ── Background-activity pill (background-activity-pill.js) ──────────────
   A durable, low-key indicator that background sub-agents / a parallel turn
   are still running even when the visible reply looks finished. Fixed to the
   bottom-right of the conversation view; click the face to expand the task
   list. Theme-aware via the shared CSS vars. */
.bg-activity-pill {
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-width: min(360px, calc(100vw - 32px));
}
.bg-activity-pill.hidden { display: none; }
.bg-activity-face {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border, #e8e5e0);
    background: var(--bg-secondary, #ffffff);
    color: var(--text-primary, #2c2c2c);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.bg-activity-face:hover { border-color: var(--accent, #8b6f47); }
.bg-activity-spinner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--border, #e8e5e0);
    border-top-color: var(--accent, #8b6f47);
    animation: bg-activity-spin 0.8s linear infinite;
}
@keyframes bg-activity-spin { to { transform: rotate(360deg); } }
.bg-activity-panel {
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--border, #e8e5e0);
    background: var(--bg-secondary, #ffffff);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}
.bg-activity-task {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 6px;
    font-size: 0.8125rem;
    color: var(--text-primary, #2c2c2c);
}
.bg-activity-task.done { color: var(--text-secondary, #7a7a7a); }
.bg-activity-task-icon { flex: 0 0 auto; }
.bg-activity-task-label { word-break: break-word; }

/* In-session topic-transition navigation rail (left side: topic switches
   anchor on user messages, which are right-aligned, so the left gutter
   competes less with the content being annotated).

   The persistent gutter is a narrow dot strip; topic names are low value
   always visible and high value when engaged with, so labels are hidden by
   default and revealed only on hover/click/tap as a transient chip. This
   mirrors the Android Option A rail redesign (TopicRail.kt, PR #3505). */
.topic-rail {
    position: absolute;
    left: 0;
    width: 28px;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    display: flex;
    justify-content: center;
}
.topic-rail.has-topics {
    opacity: 1;
}
/* Reserve a narrow gutter for the dot strip; labels appear as transient chips
   to the right of the dot, overlaying the messages column so they never spill
   outside the chat area onto the sidebar. */
.chat-area.with-topic-rail .messages {
    margin-left: 28px;
}
.topic-rail-track {
    position: absolute;
    right: 7px;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--border, #e8e5e0);
    border-radius: 1px;
    pointer-events: none;
}
.topic-rail-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}
.topic-rail-marker {
    position: absolute;
    left: 16px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 200px;
    pointer-events: auto;
    z-index: 5;
    /* The marker sits in a dedicated left gutter; the dot is on the rail's
       right edge and the label extends to the right over the messages area,
       only visible on engagement. Vertical position is clamped in
       updateTopicRail so the marker never escapes the rail (= the messages
       area) top/bottom. */
}
.topic-rail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary, #7a7a7a);
    border: 2px solid var(--bg-secondary, #ffffff);
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, border-color 0.15s;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.topic-rail-label {
    display: none;
    color: var(--text-secondary, #7a7a7a);
    background: var(--bg-secondary, #ffffff);
    border: 1px solid var(--border, #e8e5e0);
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 0.75rem;
    line-height: 1.25;
    text-align: left;
    max-width: 146px;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-word;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.topic-rail-marker:hover .topic-rail-label,
.topic-rail-marker.revealed .topic-rail-label {
    display: block;
}
.topic-rail-marker:hover .topic-rail-dot,
.topic-rail-marker.active .topic-rail-dot,
.topic-rail-marker.revealed .topic-rail-dot {
    background: var(--accent, #8b6f47);
    transform: scale(1.25);
    border-color: var(--bg-secondary, #ffffff);
}
.topic-rail-marker:hover .topic-rail-label,
.topic-rail-marker.active .topic-rail-label,
.topic-rail-marker.revealed .topic-rail-label {
    color: var(--accent, #8b6f47);
    border-color: var(--accent, #8b6f47);
}