/* ══════════════════════════════════════════
   Git Dashboard — Panel Styles
   ══════════════════════════════════════════ */

/* ── Git Panel Container ── */
.git-panel {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

/* ── Top Bar: Repo selector + Refresh + Quick Actions ── */
.git-topbar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.git-repo-select {
    padding: var(--s-1) var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background-color: var(--bg-raised);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font);
    cursor: pointer;
    outline: none;
}
.git-repo-select:hover { border-color: var(--line-strong); transform: translateY(var(--hover-lift-sm)); }
.git-repo-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.git-refresh-btn {
    padding: var(--s-1) var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--fast), color var(--fast), border-color var(--fast), opacity var(--fast), transform var(--fast);
}
.git-refresh-btn:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.git-refresh-btn:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.git-refresh-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.git-refresh-btn.spinning .git-refresh-icon { display: inline-block; animation: spin var(--duration-dramatic) linear infinite; }

.git-branch-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    background: var(--surface-w8);
    color: var(--accent);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font-mono);
}
.git-branch-badge::before {
    content: '';
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    background: var(--accent);
}

.git-ahead-behind {
    font-size: var(--text-sm);
    color: var(--text-sub);
    display: flex;
    gap: var(--s-2);
}
.git-ahead-behind .ahead { color: var(--clr-success); }
.git-ahead-behind .behind { color: var(--clr-warning); }

/* ── Quick Actions Bar ── */
.git-actions {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.git-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font);
    cursor: pointer;
    transition: background-color var(--fast), color var(--fast), border-color var(--fast), opacity var(--fast), transform var(--fast);
    white-space: nowrap;
}
.git-action-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    border-color: var(--line-strong);
    transform: translateY(var(--hover-lift-sm));
}
.git-action-btn:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}
.git-action-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.git-action-btn.primary {
    background: var(--surface-active);
    color: var(--accent);
    border-color: var(--clr-teal-bg-xl);
}
.git-action-btn.primary:hover {
    background: var(--surface-active);
    transform: translateY(var(--hover-lift-sm));
}
.git-action-btn.danger {
    color: var(--clr-error);
}
.git-action-btn.danger:hover {
    background: var(--clr-error-bg-xs);
    border-color: var(--clr-error-bg-xl);
    transform: translateY(var(--hover-lift-sm));
}
.git-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Main Content Grid (Branches + Changes | Timeline) ── */
.git-content {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: var(--s-4);
    min-height: 0;
}

.git-left-col {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    min-width: 0;
}

.git-right-col {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    min-width: 0;
}

/* ── Section Card ── */
.git-section {
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
}

.git-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.git-section-head .count {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-pill);
    background: var(--surface-w5);
    color: var(--text-sub);
}

.git-section-body {
    max-height: 300px;
    overflow-y: auto;
}

/* ── Branch List ── */
.git-branch-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text-sub);
    cursor: pointer;
    transition: background var(--fast), transform var(--fast);
}

.git-branch-item:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.git-branch-item:active { background: var(--surface-active); }
.git-branch-item.current {
    background: var(--surface-active);
    color: var(--accent);
    font-weight: var(--weight-semibold);
}
.git-branch-item.current::before {
    content: '';
    width: var(--s-1-5);
    height: var(--s-1-5);
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.git-branch-item .branch-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.git-branch-item .branch-checkout {
    opacity: 0;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--radius-s);
    background: var(--surface-w8);
    color: var(--text-sub);
    font-size: var(--text-sm);
    border: none;
    cursor: pointer;
    transition: opacity var(--fast);
}
.git-branch-item:hover .branch-checkout { opacity: 1; transform: translateY(var(--hover-lift-sm)); }
.git-branch-item .branch-checkout:hover { background: var(--surface-active); color: var(--accent); transform: translateY(var(--hover-lift-sm)); }

.git-branch-group-label {
    padding: var(--s-1) var(--s-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    background: var(--surface-w3);
}

/* ── Changes Panel ── */
.git-change-group {
}

.git-change-group-head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
    user-select: none;
}
.git-change-group-head .chevron {
    font-size: var(--text-sm);
    transition: transform var(--fast);
    color: var(--text-sub);
}
.git-change-group-head.collapsed .chevron {
    transform: rotate(-90deg);
}

.git-change-group-head.staged { color: var(--clr-success); }
.git-change-group-head.modified { color: var(--clr-warning); }
.git-change-group-head.untracked { color: var(--text-sub); }

.git-change-list { list-style: none; margin: 0; padding: 0; }
.git-change-list.hidden { display: none; }

.git-change-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-4) var(--s-1) var(--s-5);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text-sub);
    cursor: pointer;
    transition: background var(--fast), transform var(--fast);
}

.git-change-item:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }
.git-change-item:active { background: var(--surface-active); }
.git-change-item.active { background: var(--surface-active); color: var(--accent); }

.git-change-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-4-5);
    height: var(--s-4-5);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    flex-shrink: 0;
}
.git-change-status.A { background: var(--clr-success-bg-md); color: var(--clr-success); }
.git-change-status.M { background: var(--clr-warning-bg-md); color: var(--clr-warning); }
.git-change-status.D { background: var(--clr-error-bg-md); color: var(--clr-error); }
.git-change-status.R { background: var(--clr-info-bg-md); color: var(--clr-info); }
.git-change-status.U { background: var(--surface-w5); color: var(--text-sub); }

.git-change-path {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.git-change-path .dir { color: var(--text-sub); }

/* ── Diff Viewer ── */
.git-diff-panel {
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
}

.git-diff-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    font-family: var(--font-mono);
}

.git-diff-stats {
    display: flex;
    gap: var(--s-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
.git-diff-stats .additions { color: var(--clr-success); }
.git-diff-stats .deletions { color: var(--clr-error); }

.git-diff-close {
    padding: var(--s-1) var(--s-2);
    border: none;
    border-radius: var(--radius-s);
    background: var(--surface-w5);
    color: var(--text-sub);
    font-size: var(--text-sm);
    cursor: pointer;
}
.git-diff-close:hover { background: var(--surface-w10); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.git-diff-close:active { transform: scale(var(--active-scale)); transition-duration: var(--duration-instant); }
.git-diff-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.git-diff-body {
    max-height: 600px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.git-diff-hunk-header {
    padding: var(--s-1) var(--s-4);
    background: var(--surface-hover);
    color: var(--clr-info);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    position: sticky;
    top: 0;
    z-index: var(--z-base);
}

.git-diff-line {
    display: flex;
    padding: 0 var(--s-4);
    min-height: var(--s-5-0);
    align-items: center;
}

.git-diff-line-num {
    width: var(--s-7-5);
    flex-shrink: 0;
    text-align: right;
    padding-right: var(--s-3);
    color: var(--text-sub);
    font-size: var(--text-sm);
    user-select: none;
}

.git-diff-line-content {
    flex: 1;
    white-space: pre;
    overflow-x: auto;
    padding: 0 var(--s-1);
}

.git-diff-line.add {
    background: var(--clr-success-bg-xs);
}
.git-diff-line.add .git-diff-line-content { color: var(--clr-success-light); }

.git-diff-line.remove {
    background: var(--clr-error-bg-xs);
}
.git-diff-line.remove .git-diff-line-content { color: var(--clr-error-bright); }

.git-diff-line.context {
    color: var(--text-sub);
}

.git-diff-empty {
    padding: var(--s-6);
    text-align: center;
    color: var(--text-sub);
    font-size: var(--text-sm);
}

/* ── Commit Timeline ── */
.git-timeline {
    position: relative;
    padding: var(--s-1) 0;
}

.git-commit {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    cursor: default;
    transition: background var(--fast);
    position: relative;
}

.git-commit:hover { background: var(--surface-hover); transform: translateY(var(--hover-lift-sm)); }

.git-commit-dot-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--s-4);
    flex-shrink: 0;
    position: relative;
}

.git-commit-dot {
    width: var(--s-2-5);
    height: var(--s-2-5);
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg);
    box-shadow: var(--shadow-ring-line);
    flex-shrink: 0;
    z-index: var(--z-base);
    margin-top: var(--s-1);
}
.git-commit:first-child .git-commit-dot {
    background: var(--clr-success);
    box-shadow: var(--shadow-ring-success-glow);
}

.git-commit-line-vert {
    width: 2px;
    flex: 1;
    background: var(--line);
    margin-top: var(--s-1);
}
.git-commit:last-child .git-commit-line-vert { display: none; }

.git-commit-info {
    flex: 1;
    min-width: 0;
}

.git-commit-msg {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: var(--s-1);
}

.git-commit-meta {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--text-sm);
    color: var(--text-sub);
}

.git-commit-hash {
    font-family: var(--font-mono);
    color: var(--accent);
    font-weight: var(--weight-semibold);
    cursor: pointer;
}
.git-commit-hash:hover { text-decoration: underline; transform: translateY(var(--hover-lift-sm)); }

.git-commit-author { color: var(--text-sub); }
.git-commit-date { color: var(--text-sub); }

/* ── Commit Modal ── */
.git-commit-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--backdrop-bg-strong);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn var(--motion-hover);
}

.git-commit-modal {
    width: var(--layout-xl);
    max-width: 90vw;
    background: var(--bg-raised);
    border-radius: var(--radius);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.git-commit-modal h3 {
    margin: 0;
    font-size: var(--text-reading);
    font-weight: var(--weight-bold);
    color: var(--text);
}

.git-commit-modal textarea {
    width: 100%;
    min-height: var(--s-16);
    padding: var(--s-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-sm);
    resize: vertical;
    outline: none;
}
.git-commit-modal textarea:focus { border-color: var(--accent); box-shadow: var(--shadow-focus-glow); }

.git-commit-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-2);
}

/* ── Loading / Empty States ── */
.git-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-5);
    color: var(--text-sub);
    font-size: var(--text-sm);
}
.git-loading::before {
    content: '';
    width: var(--s-3-5);
    height: var(--s-3-5);
    border: 2px solid var(--line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin var(--duration-slower) linear infinite;
}

.git-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-5) var(--s-4);
    text-align: center;
    color: var(--text-sub);
    font-size: var(--text-sm);
}
.git-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--s-9);
    height: var(--s-9);
    border-radius: 50%;
    background: var(--surface-w5);
}
.git-empty-icon svg {
    width: var(--s-5-5);
    height: var(--s-5-5);
    color: var(--text-sub);
    opacity: 0.6;
}

.git-error {
    padding: var(--s-3) var(--s-4);
    background: var(--clr-error-bg-xs);
    border-radius: var(--radius-s);
    color: var(--clr-error);
    font-size: var(--text-sm);
}

/* ── Stash Info ── */
.git-stash-info {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--clr-purple-bg-xs);
    border-radius: var(--radius-s);
    font-size: var(--text-sm);
    color: var(--clr-purple);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .git-content { grid-template-columns: 300px 1fr; gap: var(--s-3); }
    .git-topbar { padding: var(--s-2) var(--s-3); }
    .git-diff-content { font-size: var(--text-sm); }
}
@media (max-width: 960px) {
    .git-content {
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 768px) {
    .git-content {
        grid-template-columns: 1fr;
    }
    .git-topbar {
        flex-direction: column;
        align-items: stretch;
    }
    .git-actions {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--s-1);
    }
    .git-section-body {
        max-height: 240px;
    }
}

@media (max-width: 640px) {
    .git-action-btn span.action-label { display: none; }
    .git-commit-meta {
        flex-wrap: wrap;
        gap: var(--s-1);
    }
}

/* ── Branch Delete Button ── */
.branch-delete-btn {
    opacity: 0;
    padding: var(--s-1);
    border-radius: var(--radius-s);
    background: none;
    color: var(--text-sub);
    border: none;
    cursor: pointer;
    transition: opacity var(--fast), color var(--fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.git-branch-item:hover .branch-delete-btn { opacity: 1; }
.branch-delete-btn:hover { color: var(--clr-error); background: var(--clr-error-bg-xs); }

/* ── Modal Form Elements ── */
.git-modal-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-sub);
    margin-bottom: var(--s-1);
}

.git-modal-input {
    width: 100%;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    outline: none;
    margin-bottom: var(--s-3);
}
.git-modal-input:focus { border-color: var(--accent); box-shadow: var(--shadow-focus-glow); }

.git-modal-select {
    width: 100%;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    outline: none;
    margin-bottom: var(--s-3);
    cursor: pointer;
}
.git-modal-select:focus { border-color: var(--accent); box-shadow: var(--shadow-focus-glow); }

/* ── Compare Result ── */
.git-compare-result {
    margin-top: var(--s-2);
}

.git-compare-stats {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
    padding: var(--s-3);
    background: var(--surface-w3);
    border-radius: var(--radius-s);
    margin-bottom: var(--s-2);
}

.git-compare-badge {
    padding: var(--s-1) var(--s-2);
    background: var(--surface-w8);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    font-weight: var(--weight-semibold);
    color: var(--accent);
}

.git-compare-arrow {
    display: flex;
    gap: var(--s-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
.git-compare-arrow .ahead { color: var(--clr-success); }
.git-compare-arrow .behind { color: var(--clr-warning); }

.git-compare-files-head {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-sub);
    padding: var(--s-2) 0;
}

.git-compare-files {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: var(--card-min-sm);
    overflow-y: auto;
}

.git-compare-file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-1) var(--s-2);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text-sub);
}
.git-compare-file:hover { background: var(--surface-hover); }

.git-compare-file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.git-compare-file-stat {
    flex-shrink: 0;
    font-size: var(--text-sm);
    display: flex;
    gap: var(--s-1);
}
.git-compare-file-stat .additions { color: var(--clr-success); }
.git-compare-file-stat .deletions { color: var(--clr-error); }

.git-compare-equal {
    text-align: center;
    padding: var(--s-3);
    color: var(--text-sub);
    font-size: var(--text-sm);
}

/* ══════════════════════════════════════════
   Inline Style Migration: Git Panel
   ══════════════════════════════════════════ */

/* 커밋 히스토리 섹션 — flex 채움 */
.git-section--flex {
    flex: 1;
}

/* 커밋 로그 본문 — 확장된 max-height */
.git-log-body {
    max-height: 600px;
}

/* ══════════════════════════════════════════
   Git Activity Visualization
   ══════════════════════════════════════════ */

/* ── 접이식 섹션 ── */
.git-activity-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.git-activity-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font);
    cursor: pointer;
    transition: color var(--fast);
    align-self: flex-start;
}
.git-activity-toggle:hover { color: var(--text); }
.git-activity-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.git-activity-toggle .git-activity-chevron {
    transition: transform var(--fast);
}
.git-activity-toggle.collapsed .git-activity-chevron {
    transform: rotate(-90deg);
}

.git-activity-body {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-2) 0;
}

/* ── 통계 카드 5개 ── */
.git-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-3);
}

.git-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    padding: var(--s-4) var(--s-3);
    background: var(--surface);
    border-radius: var(--radius-s);
}

.git-stat-value {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text);
    font-family: var(--font-mono);
    line-height: 1;
}

.git-stat-label {
    font-size: var(--text-sm);
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Top Agent 카드 — 텍스트값이므로 폰트 크기 조정 */
.git-stat-top-agent {
    font-size: var(--text-base);
    font-family: var(--font-mono);
    max-width: var(--s-12);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--accent);
}

/* 통계 카드 클릭 인터랙션 */
.git-stat-clickable {
    cursor: pointer;
    transition: background var(--fast), transform var(--fast);
}
.git-stat-clickable:hover {
    background: var(--surface-hover);
    transform: translateY(var(--hover-lift-sm));
}
.git-stat-clickable:active {
    transform: scale(var(--active-scale));
    transition-duration: var(--duration-instant);
}

/* ── 커밋 히트맵 ── */
.git-heatmap-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.git-heatmap-header {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-medium);
}

.git-heatmap-scroll {
    display: flex;
    gap: var(--s-1);
    overflow-x: auto;
    padding-bottom: var(--s-1);
}

.git-heatmap-day-labels {
    display: flex;
    flex-direction: column;
    gap: var(--s-0);
    flex-shrink: 0;
    padding-top: 0;
}
.git-heatmap-day-labels span {
    height: var(--s-3);
    font-size: var(--text-xs);
    line-height: var(--s-3);
    color: var(--text-faint);
    text-align: right;
    width: var(--s-5);
}

.git-heatmap-grid {
    display: flex;
    gap: var(--s-0);
}

.git-heatmap-col {
    display: flex;
    flex-direction: column;
    gap: var(--s-0);
}

.git-hm-cell {
    width: var(--s-3);
    height: var(--s-3);
    border-radius: var(--radius-s);
    background: var(--surface);
    cursor: default;
    position: relative;
}
.git-hm-cell.empty {
    background: transparent;
}
.git-hm-cell.lvl-1 { background: color-mix(in srgb, var(--green) 15%, transparent); }
.git-hm-cell.lvl-2 { background: color-mix(in srgb, var(--green) 35%, transparent); }
.git-hm-cell.lvl-3 { background: color-mix(in srgb, var(--green) 60%, transparent); }
.git-hm-cell.lvl-4 { background: var(--green); }

/* 히트맵 셀 커스텀 툴팁 */
.git-hm-cell[data-tooltip] {
    position: relative;
}
.git-hm-cell[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--s-1) var(--s-2);
    background: var(--bg-overlay);
    color: var(--text);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    white-space: nowrap;
    border-radius: var(--radius-s);
    pointer-events: none;
    z-index: var(--z-tooltip, 50);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--bg) 70%, transparent);
}

/* ── 브랜치 바 차트 ── */
.git-branch-chart-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.git-branch-chart-header {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-medium);
}

.git-branch-chart {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.git-branch-chart-empty {
    font-size: var(--text-sm);
    color: var(--text-faint);
    padding: var(--s-3);
    text-align: center;
}

.git-bar-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.git-bar-label {
    flex-shrink: 0;
    width: var(--s-16);
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

.git-bar-track {
    flex: 1;
    height: var(--s-4);
    background: var(--surface);
    border-radius: var(--radius-s);
    overflow: hidden;
}

.git-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-s);
    min-width: var(--s-1);
    transition: width var(--duration-spring) ease;
}

.git-bar-count {
    flex-shrink: 0;
    width: var(--s-6);
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-family: var(--font-mono);
    text-align: right;
}

/* ── 히트맵 셀 상태 ── */
.git-hm-cell.clickable {
    cursor: pointer;
    transition: transform var(--fast), box-shadow var(--fast);
}
.git-hm-cell.clickable:hover {
    transform: scale(1.3);
    box-shadow: 0 0 4px color-mix(in srgb, var(--green) 25%, transparent);
    z-index: 1;
    position: relative;
}
.git-hm-cell.selected {
    outline: 2px solid var(--green);
    outline-offset: 1px;
    transform: scale(1.2);
    z-index: 2;
    position: relative;
}

/* ── 히트맵 상세 패널 (셀 클릭 시 인라인 표시) ── */
.git-heatmap-detail {
    background: var(--surface);
    border-radius: var(--radius-s);
    padding: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-top: var(--s-2);
    animation: fadeIn var(--duration-fast) var(--easing-smooth);
}

.git-heatmap-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
}

.git-heatmap-detail-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--s-5);
    height: var(--s-5);
    border: none;
    border-radius: var(--radius-s);
    background: none;
    color: var(--text-sub);
    cursor: pointer;
    transition: background var(--fast), color var(--fast);
}
.git-heatmap-detail-close:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.git-heatmap-detail-group {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-2);
    background: var(--surface-w3);
    border-radius: var(--radius-s);
}

.git-heatmap-detail-job {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
    cursor: pointer;
    transition: color var(--fast);
}
.git-heatmap-detail-job:hover { color: var(--accent-deep); }
.git-heatmap-detail-job svg { flex-shrink: 0; color: var(--text-sub); }

.git-heatmap-detail-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-sub);
}

.git-heatmap-detail-commit {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: var(--s-3);
}

.git-heatmap-detail-more {
    font-size: var(--text-sm);
    color: var(--text-faint);
    padding-left: var(--s-3);
}

/* ── 에이전트 배지 (히트맵 상세 내) ── */
.git-detail-agent-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--s-2);
    background: var(--surface-w8);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font-mono);
    color: var(--text-sub);
    cursor: pointer;
    transition: background var(--fast), color var(--fast);
}
.git-detail-agent-badge:hover {
    background: var(--surface-w15);
    color: var(--text);
}

/* ── 브랜치 배지 (jobId/agentId) ── */
.git-branch-badges {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    margin-left: auto;
    flex-shrink: 0;
}
.git-branch-job-badge,
.git-branch-agent-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--s-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font-mono);
    cursor: pointer;
    transition: background var(--fast), color var(--fast);
}
.git-branch-job-badge {
    background: var(--surface-w8);
    color: var(--text-sub);
}
.git-branch-job-badge:hover {
    background: var(--surface-w15);
    color: var(--accent);
}
.git-branch-agent-badge {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
}
.git-branch-agent-badge:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-deep);
}

/* ── 커밋 로그 에이전트/Job 배지 (교차 네비게이션) ── */
.git-commit-agent-badge,
.git-commit-job-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
    padding: 1px var(--s-1);
    border-radius: var(--radius-pill);
    cursor: pointer;
    vertical-align: middle;
    line-height: 1.3;
    transition: background var(--fast), color var(--fast);
}
.git-commit-agent-badge {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
}
.git-commit-agent-badge:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-deep);
}
.git-commit-job-badge {
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    color: var(--blue);
}
.git-commit-job-badge:hover {
    background: color-mix(in srgb, var(--blue) 20%, transparent);
    color: var(--blue);
}
/* 에이전트 커밋 점 시각 구분 */
.git-commit-dot.agent {
    background: var(--accent);
}

/* ── 에이전트 카드 커밋 배지 ── */
.agent-commit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--s-4-5);
    height: var(--s-4-5);
    padding: 0 var(--s-1);
    border-radius: var(--radius-pill);
    background: var(--surface-w8);
    color: var(--text-sub);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    font-family: var(--font-mono);
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
    transition: background var(--fast), color var(--fast);
}
.agent-commit-badge:hover {
    background: var(--surface-w15);
    color: var(--accent);
}

/* ── 에이전트 카드 하이라이트 펄스 ── */
@keyframes highlightPulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 3px var(--accent-glow); }
}
.highlight-pulse {
    animation: highlightPulse var(--duration-dramatic) var(--easing-smooth) 2;
}

/* ── 반응형 ── */
@media (max-width: 768px) {
    .git-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .git-bar-label {
        width: var(--s-11);
    }
    .git-heatmap-detail {
        padding: var(--s-2);
    }
}
@media (max-width: 480px) {
    .git-stats-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ══════════════════════════════════════════
   Git Flow Branch Graph
   ══════════════════════════════════════════ */

.git-flow-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.git-flow-header {
    font-size: var(--text-sm);
    color: var(--text-sub);
    font-weight: var(--weight-medium);
}

.git-flow-graph {
    background: var(--surface);
    border-radius: var(--radius-s);
    padding: var(--s-3);
    min-height: var(--card-min-sm);
}

.git-flow-scroll {
    overflow-x: auto;
    padding-bottom: var(--s-1);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.git-flow-scroll::-webkit-scrollbar { height: var(--scrollbar-w-compact); }
.git-flow-scroll::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-s); }
.git-flow-scroll::-webkit-scrollbar-track { background: var(--scrollbar-track); }

.git-flow-svg {
    min-width: max-content;
    display: block;
}

.git-flow-node {
    transition: r var(--fast), opacity var(--fast);
    cursor: default;
}
.git-flow-node:hover {
    r: 7;
    opacity: 0.85;
}

/* 브랜치 범례 */
.git-flow-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    padding-top: var(--s-2);
}

.git-flow-legend-item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-1);
    font-size: var(--text-sm);
    color: var(--text-sub);
    cursor: default;
    line-height: 1;
}

.git-flow-legend-dot {
    width: var(--s-2);
    height: var(--s-2);
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
}

.git-flow-legend-name {
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
}

.git-flow-legend-count {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-faint);
}

/* 브랜치 바 차트 — 색상 변형 */
.git-bar-fill--branch {
    background: var(--clr-info);
}

/* 클릭 가능한 바 라벨 */
.git-bar-label.clickable {
    cursor: pointer;
    transition: color var(--fast);
}
.git-bar-label.clickable:hover {
    color: var(--accent);
}

/* 기여도 차트 바 하이라이트 (에이전트 카드 → Git 역방향 네비게이션) */
.git-bar-row.highlight-pulse {
    animation: highlightPulse var(--duration-dramatic) var(--easing-smooth) 2;
    border-radius: var(--radius-s);
}

/* ── 반응형 ── */
@media (max-width: 768px) {
    .git-flow-graph {
        padding: var(--s-2);
    }
    .git-flow-legend {
        gap: var(--s-1);
    }
    .git-flow-legend-item {
        font-size: var(--text-sm);
    }
}


/* ★ Git Flow Graph — 라벨 고정 + 스크롤 영역 분리 */
.git-flow-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.git-flow-labels {
    flex-shrink: 0;
    width: var(--s-20);
    min-width: var(--s-16);
    z-index: 2;
}
.git-flow-label {
    display: flex;
    align-items: center;
    font-size: var(--text-xs);
    font-family: var(--font-mono, monospace);
}
.git-flow-label-pill {
    display: inline-block;
    padding: var(--s-0-5) var(--s-2);
    border-radius: var(--radius-s);
    font-weight: 500;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: inherit;
}

/* ★ Git Flow Graph — 커밋 상세 팝업 */
.git-flow-popup {
    position: absolute;
    z-index: 100;
    background: var(--bg-card, #1a1a2e);
    border: 1px solid var(--border, #333);
    border-radius: var(--radius, 6px);
    padding: var(--s-3, 12px);
    min-width: var(--panel-w-sm);
    max-width: var(--layout-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    font-size: var(--text-sm);
}
.git-flow-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s-1-5);
}
.git-flow-popup-hash {
    font-family: var(--font-mono, monospace);
    color: var(--accent, #2dd4bf);
    font-weight: 600;
    font-size: var(--text-sm);
}
.git-flow-popup-close {
    background: none;
    border: none;
    color: var(--text-sub, #888);
    font-size: var(--text-lg);
    cursor: pointer;
    padding: 0 var(--s-1);
    line-height: 1;
}
.git-flow-popup-close:hover { color: var(--text, #fff); }
.git-flow-popup-msg {
    color: var(--text, #eee);
    margin-bottom: var(--s-1-5);
    line-height: 1.4;
    word-break: break-word;
}
.git-flow-popup-agent,
.git-flow-popup-date,
.git-flow-popup-branch {
    color: var(--text-sub, #888);
    font-size: var(--text-xs);
    margin-top: var(--s-0-5);
}
/* 커밋 라벨 — 호버 시 강조 */
.git-flow-node-group:hover .git-flow-commit-label {
    opacity: 1 !important;
    font-weight: 600;
}
.git-flow-node-group:hover .git-flow-node {
    filter: brightness(1.3);
}
/* git-flow-graph 상대 위치 (팝업 기준) */
.git-flow-graph {
    position: relative;
}