/* ===== Diff Stats Bar ===== */
.diff-stats-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 0.875rem;
    flex-wrap: wrap;
}

.diff-stat-total { font-weight: 600; }
.diff-stat-add { color: var(--color-open); font-weight: 600; }
.diff-stat-del { color: var(--color-closed); font-weight: 600; }

.diff-stats-bar .btn { margin-left: auto; }
.diff-stats-bar .btn + .btn { margin-left: 0; }

/* ===== Diff Layout (file tree + diffs) ===== */
.diff-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* ===== File Tree ===== */
.file-tree {
    position: sticky;
    top: 64px;
    width: 280px;
    min-width: 280px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
}

.file-tree-inner { padding: 4px 0; }

.file-tree-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 0.8rem;
    color: var(--fg);
    text-decoration: none;
    transition: background 0.1s;
}
.file-tree-item:hover { background: var(--bg-secondary); text-decoration: none; }
.file-tree-item.active { background: var(--bg-tertiary); font-weight: 500; }

.file-status-icon {
    font-size: 0.8rem;
    font-weight: 700;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.file-status-added { color: var(--color-open); }
.file-status-removed { color: var(--color-closed); }
.file-status-modified { color: var(--color-accent); }
.file-status-renamed { color: var(--color-merged); }

.file-tree-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-tree-stats {
    display: flex;
    gap: 4px;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.stat-add { color: var(--color-open); }
.stat-del { color: var(--color-closed); }

/* ===== Diff Files ===== */
.diff-files { flex: 1; min-width: 0; }

.diff-file {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
    scroll-margin-top: 60px;
}

.diff-file-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.diff-collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--fg-muted);
    font-size: 0.7rem;
    transition: transform 0.15s;
}
.diff-file.collapsed .diff-collapse-btn .collapse-icon { transform: rotate(-90deg); }
.diff-file.collapsed .diff-file-body { display: none; }

.diff-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.diff-file-stats { display: flex; gap: 6px; font-size: 0.8rem; font-weight: 600; }

/* ===== Diff Table ===== */
.diff-file-body { overflow-x: auto; }

.diff-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 20px;
    table-layout: fixed;
    font-variant-ligatures: contextual;
}

.diff-line-col { width: 50px; }
.diff-content-col { width: calc(100% - 100px); }

.diff-line-num {
    width: 50px;
    min-width: 50px;
    padding: 0 8px;
    text-align: right;
    color: var(--fg-subtle);
    user-select: none;
    cursor: pointer;
    vertical-align: top;
    position: sticky;
    left: 0;
    font-size: 11px;
}
.diff-line-num:hover { color: var(--color-accent); }

.diff-line-content {
    padding: 0 8px 0 4px;
    white-space: pre;
    overflow-x: visible;
    word-break: keep-all;
    tab-size: 4;
}

.diff-line-prefix {
    display: inline-block;
    width: 14px;
    text-align: center;
    user-select: none;
    color: var(--fg-subtle);
}

/* ===== Line Type Colors ===== */
.diff-add { background: var(--diff-add-bg); }
.diff-add .diff-line-num { background: var(--diff-add-bg); }
.diff-add .diff-line-content { background: var(--diff-add-bg); }

.diff-del { background: var(--diff-del-bg); }
.diff-del .diff-line-num { background: var(--diff-del-bg); }
.diff-del .diff-line-content { background: var(--diff-del-bg); }

.diff-ctx { background: var(--diff-bg, var(--bg)); }
.diff-ctx .diff-line-num { background: var(--diff-bg, var(--bg)); }

/* ===== Hunk Headers ===== */
.diff-hunk-header td {
    background: var(--diff-hunk-bg);
}

.diff-hunk-content {
    padding: 4px 12px;
    color: var(--diff-hunk-fg);
    font-style: italic;
    font-size: 11px;
}

/* ===== Binary / Empty ===== */
.diff-binary, .diff-empty {
    padding: 24px;
    text-align: center;
    color: var(--fg-muted);
    font-style: italic;
}

/* ===== Inline Comment Form (injected by JS) ===== */
.inline-comment-row td {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.inline-comment-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inline-comment-form textarea {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    min-height: 60px;
}

.inline-comment-form .form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ===== Inline Comment Display ===== */
.inline-comment-thread {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-muted);
}

.inline-comment {
    display: flex;
    gap: 8px;
    padding: 6px 0;
}
.inline-comment + .inline-comment { border-top: 1px solid var(--border-muted); }

.inline-comment-meta {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.inline-comment-meta strong { font-size: 0.8rem; }
.inline-comment-body { font-size: 0.85rem; line-height: 1.5; }

/* ===== Add Comment Button (on line hover) ===== */
.diff-line:hover .diff-line-num.diff-line-new::before {
    content: "+";
    position: absolute;
    left: 2px;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

.diff-line-num.diff-line-new { position: relative; }

/* ===== Hide Whitespace ===== */
.diff-view.hide-ws .ws-only { display: none; }

/* ===== Split Diff Mode ===== */
.diff-view.split-mode .diff-table { table-layout: fixed; }
.diff-view.split-mode .diff-line-col { width: 45px; }
.diff-view.split-mode .split-content-col { width: calc(50% - 45px); }

.split-content {
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
    padding: 0 8px 0 4px;
}

.split-row .diff-line-num { border-right: 1px solid var(--border-muted); }
.split-row td.split-content:first-of-type { border-right: 1px solid var(--border); }

.split-row .diff-del { background: var(--diff-del-bg); }
.split-row .diff-add { background: var(--diff-add-bg); }

.diff-view.split-mode .diff-hunk-header td {
    background: var(--diff-hunk-bg);
    padding: 4px 8px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .diff-layout { flex-direction: column; }

    .file-tree {
        position: static;
        width: 100%;
        min-width: 0;
        max-height: none;
        display: none;
    }
    .file-tree.visible { display: block; }

    .diff-line-col { width: 35px; }
    .diff-line-num { padding: 0 4px; font-size: 10px; min-width: 35px; width: 35px; }
    .diff-table { font-size: 11px; line-height: 18px; }


    .diff-stats-bar { font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .diff-line-num.diff-line-old { display: none; }
    .diff-line-col:first-child { width: 0; display: none; }
}

/* ===== Scrollbar styling ===== */
.diff-file-body::-webkit-scrollbar { height: 6px; }
.diff-file-body::-webkit-scrollbar-track { background: var(--bg-secondary); }
.diff-file-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.diff-file-body::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle); }

.file-tree::-webkit-scrollbar { width: 6px; }
.file-tree::-webkit-scrollbar-track { background: transparent; }
.file-tree::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Override chroma backgrounds to be transparent in diff context */
.diff-table.chroma { background-color: transparent; }
.diff-table.chroma .line { display: inline; }