/* ============================================================
   Agentic — State panel, events timeline, activity chart,
             tasks, changed files, event filters
   ============================================================ */

/* ── Agentic State Panel ───────────────────────────────────── */

.task-bar-resize-handle {
    width: 4px;
    cursor: col-resize;
    background: var(--border);
    flex-shrink: 0;
    transition: background 0.15s;
}

.task-bar-resize-handle:hover,
.task-bar-resize-handle.dragging {
    background: var(--accent);
}

.agentic-state {
    width: 351px;
    min-width: 230px;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    transition: width 0.2s ease, min-width 0.2s ease;
}

.agentic-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#agentic-block-top {
    flex: 2.3;
}

#agentic-block-bottom {
    flex: 1;
}

.agentic-block.collapsed {
    flex: none;
}

.agentic-block.collapsed .agentic-panel {
    display: none !important;
}

/* ── Resize Handle Between Blocks ──────────────────────────── */

.agentic-block-resize-handle {
    height: 4px;
    cursor: row-resize;
    background: var(--border);
    flex-shrink: 0;
    position: relative;
    transition: background 0.15s;
}

.agentic-block-resize-handle:hover,
.agentic-block-resize-handle.dragging {
    background: var(--accent);
}

/* ── Tabs ──────────────────────────────────────────────────── */

.agentic-state-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.agentic-tab {
    flex: 1;
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.agentic-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.agentic-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.agentic-tab .material-icons {
    font-size: 18px;
}

.agentic-tab-count:empty {
    display: none;
}

.agentic-tab-count {
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-hover);
    border-radius: 8px;
    padding: 0 5px;
    line-height: 16px;
    min-width: 16px;
    text-align: center;
}

/* ── Panels ────────────────────────────────────────────────── */

.agentic-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.agentic-panel.active {
    display: flex;
}

/* ── Collapsible Panel ─────────────────────────────────────── */

.agentic-state.collapsed {
    width: 36px !important;
    min-width: 36px !important;
}

.agentic-state.collapsed .agentic-block,
.agentic-state.collapsed .agentic-panel,
.agentic-state.collapsed .agentic-state-tabs {
    display: none;
}

.agentic-collapse-btn {
    position: absolute;
    top: 6px;
    left: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.15s;
}

.agentic-collapse-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.agentic-state.collapsed .agentic-collapse-btn svg {
    transform: rotate(180deg);
}

/* ── Event Filter Bar ──────────────────────────────────────── */

.event-filter-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.event-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    flex-shrink: 0;
}

.event-filter-char {
    font-family: 'Material Icons';
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.event-filter-chip.tool-read  .event-filter-char { color: var(--color-tool-read); }
.event-filter-chip.tool-write .event-filter-char { color: var(--color-tool-write); }
.event-filter-chip.tool-edit  .event-filter-char { color: var(--color-tool-edit); }
.event-filter-chip.tool-bash  .event-filter-char { color: var(--color-tool-bash); }
.event-filter-chip.tool-grep  .event-filter-char { color: var(--color-tool-grep); }
.event-filter-chip.tool-web   .event-filter-char { color: var(--color-tool-web); }
.event-filter-chip.tool-task  .event-filter-char { color: var(--color-tool-task); }
.event-filter-chip.tool-agent .event-filter-char { color: var(--color-tool-agent); }
.event-filter-chip.tool-status     .event-filter-char { color: var(--color-tool-status); }
.event-filter-chip.tool-goal       .event-filter-char { color: var(--color-tool-goal); }
.event-filter-chip.tool-confidence .event-filter-char { color: var(--color-tool-confidence); }
.event-filter-chip.tool-stop       .event-filter-char { color: var(--color-tool-stop); }
.event-filter-chip.tool-pulse      .event-filter-char { color: var(--color-tool-pulse); }

.event-filter-chip.filter-toggle .event-filter-char { color: var(--text-secondary); }
.event-filter-chip.filter-toggle {
    border-color: var(--border-light);
    margin-right: 2px;
}

.event-filter-chip.filter-partial {
    opacity: 0.6;
}

.event-filter-chip:hover {
    border-color: var(--border-light);
    background: var(--bg-hover);
}

.event-filter-chip.filter-hidden {
    opacity: 0.3;
}

.event-filter-chip.filter-hidden:hover {
    opacity: 0.6;
}

/* ── Filter Dropdown Button ────────────────────────────────── */

.filter-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}

.filter-dropdown-btn:hover {
    border-color: var(--border-light);
    background: var(--bg-hover);
    color: var(--text-primary);
}

.filter-dropdown-btn .event-filter-char {
    font-size: 16px;
    color: var(--text-muted);
}

.filter-btn-label {
    font-family: var(--font-sans);
    font-weight: 500;
}

.filter-btn-badge {
    font-size: 10px;
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    padding: 1px 6px;
    margin-left: 2px;
}

/* ── Filter Dropdown Panel ─────────────────────────────────── */

.filter-dropdown {
    z-index: 400;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    width: 240px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.filter-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border);
}

.filter-dropdown-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.filter-dropdown-toggle {
    font-size: 11px;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.filter-dropdown-toggle:hover {
    background: rgba(88, 166, 255, 0.1);
}

.filter-dropdown-list {
    padding: 4px 0;
    max-height: 360px;
    overflow-y: auto;
}

.filter-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 12px;
    color: var(--text-secondary);
}

.filter-dropdown-item:hover {
    background: var(--bg-hover);
}

.filter-dropdown-item .filter-item-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 14px;
    flex-shrink: 0;
}

.filter-dropdown-item.tool-read .filter-item-icon    { color: var(--color-tool-read); background: rgba(88, 166, 255, 0.1); }
.filter-dropdown-item.tool-write .filter-item-icon   { color: var(--color-tool-write); background: rgba(63, 185, 80, 0.1); }
.filter-dropdown-item.tool-edit .filter-item-icon     { color: var(--color-tool-edit); background: rgba(210, 153, 34, 0.1); }
.filter-dropdown-item.tool-bash .filter-item-icon     { color: var(--color-tool-bash); background: rgba(210, 168, 255, 0.1); }
.filter-dropdown-item.tool-grep .filter-item-icon     { color: var(--color-tool-grep); background: rgba(121, 192, 255, 0.1); }
.filter-dropdown-item.tool-web .filter-item-icon      { color: var(--color-tool-web); background: rgba(255, 166, 87, 0.1); }
.filter-dropdown-item.tool-task .filter-item-icon     { color: var(--color-tool-task); background: rgba(88, 166, 255, 0.1); }
.filter-dropdown-item.tool-agent .filter-item-icon    { color: var(--color-tool-agent); background: rgba(210, 168, 255, 0.1); }
.filter-dropdown-item.tool-status .filter-item-icon   { color: var(--color-tool-status); background: rgba(88, 166, 255, 0.15); }
.filter-dropdown-item.tool-goal .filter-item-icon     { color: var(--color-tool-goal); background: rgba(63, 185, 80, 0.15); }
.filter-dropdown-item.tool-confidence .filter-item-icon { color: var(--color-tool-confidence); background: rgba(227, 179, 65, 0.15); }
.filter-dropdown-item.tool-stop .filter-item-icon     { color: var(--color-tool-stop); background: rgba(248, 81, 73, 0.1); }
.filter-dropdown-item.tool-pulse .filter-item-icon    { color: var(--color-tool-pulse); background: rgba(188, 140, 255, 0.15); }

.filter-item-label {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}

.filter-item-count {
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 20px;
    text-align: right;
}

.filter-item-check {
    font-family: 'Material Icons';
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    color: var(--accent);
    flex-shrink: 0;
}

/* ── Filter Popup ──────────────────────────────────────────── */

.filter-popup {
    position: fixed;
    z-index: 300;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 10px 12px;
    width: 260px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

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

.filter-popup-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.filter-popup-count {
    font-size: 11px;
    color: var(--text-muted);
}

.filter-popup-status {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.filter-popup-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.filter-popup-event {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
}

.filter-popup-summary {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.filter-popup-time {
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-popup-empty {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.filter-popup-more {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: center;
}

/* ── Events Timeline ───────────────────────────────────────── */

.agentic-events-body {
    flex: 1;
    overflow-y: auto;
}

.event-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
    text-align: center;
    padding: 20px 14px;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    margin: 2px 8px;
    font-size: 12px;
    color: var(--text-secondary);
    border: 1px solid rgba(48, 54, 61, 0.4);
    border-radius: 8px;
    background: var(--bg-secondary);
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.event-item.event-type-status {
    background: rgba(88, 166, 255, 0.06);
    border-color: rgba(88, 166, 255, 0.2);
}

.event-item.event-type-goal {
    background: rgba(63, 185, 80, 0.06);
    border-color: rgba(63, 185, 80, 0.2);
}

.event-item.event-type-confidence {
    background: rgba(227, 179, 65, 0.06);
    border-color: rgba(227, 179, 65, 0.2);
}

.event-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ── Event Item Tooltips ───────────────────────────────────── */

.event-item[data-tooltip] {
    position: relative;
}

.event-item[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 10px;
    bottom: 100%;
    margin-bottom: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
    max-width: 320px;
    word-break: break-word;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* ── Event Icon ────────────────────────────────────────────── */

.event-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Material Icons';
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    border-radius: 6px;
}

.event-icon.tool-read   { color: var(--color-tool-read); background: rgba(88, 166, 255, 0.1); }
.event-icon.tool-write  { color: var(--color-tool-write); background: rgba(63, 185, 80, 0.1); }
.event-icon.tool-edit   { color: var(--color-tool-edit); background: rgba(210, 153, 34, 0.1); }
.event-icon.tool-bash   { color: var(--color-tool-bash); background: rgba(210, 168, 255, 0.1); }
.event-icon.tool-grep,
.event-icon.tool-glob   { color: var(--color-tool-grep); background: rgba(121, 192, 255, 0.1); }
.event-icon.tool-web    { color: var(--color-tool-web); background: rgba(255, 166, 87, 0.1); }
.event-icon.tool-task   { color: var(--color-tool-task); background: rgba(88, 166, 255, 0.1); }
.event-icon.tool-agent  { color: var(--color-tool-agent); background: rgba(210, 168, 255, 0.1); }
.event-icon.tool-status { color: var(--color-tool-status); background: rgba(88, 166, 255, 0.15); }
.event-icon.tool-goal   { color: var(--color-tool-goal); background: rgba(63, 185, 80, 0.15); }
.event-icon.tool-stop   { color: var(--color-tool-stop); background: rgba(248, 81, 73, 0.1); }
.event-icon.tool-notification { color: var(--color-tool-edit); background: rgba(210, 153, 34, 0.1); }
.event-icon.tool-confidence   { color: var(--color-tool-confidence); background: rgba(227, 179, 65, 0.15); }
.event-icon.tool-pulse  { color: var(--color-tool-pulse); background: rgba(188, 140, 255, 0.15); }
.event-icon.tool-default { color: var(--color-tool-default); background: rgba(72, 79, 88, 0.2); }

/* ── Activity Chart ────────────────────────────────────────── */

.activity-chart {
    padding: 10px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activity-chart:empty {
    display: none;
}

.activity-chart-bottom {
    padding: 6px 14px 10px;
}

.activity-chart-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 20px;
}

.activity-chart-label {
    font-size: 11px;
    color: var(--text-secondary);
    width: 80px;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-chart-bar-track {
    flex: 1;
    height: 14px;
    background: rgba(72, 79, 88, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

.activity-chart-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.activity-chart-count {
    font-size: 11px;
    color: var(--text-muted);
    width: 32px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Bar colors */
.activity-chart-bar.tool-read   { background: rgba(63, 185, 80, 0.6); }
.activity-chart-bar.tool-write  { background: rgba(248, 81, 73, 0.6); }
.activity-chart-bar.tool-edit   { background: rgba(210, 153, 34, 0.6); }
.activity-chart-bar.tool-bash   { background: rgba(210, 168, 255, 0.6); }
.activity-chart-bar.tool-grep   { background: rgba(121, 192, 255, 0.6); }
.activity-chart-bar.tool-web    { background: rgba(255, 166, 87, 0.6); }
.activity-chart-bar.tool-task   { background: rgba(88, 166, 255, 0.6); }
.activity-chart-bar.tool-agent  { background: rgba(210, 168, 255, 0.6); }
.activity-chart-bar.tool-status { background: rgba(88, 166, 255, 0.6); }
.activity-chart-bar.tool-goal   { background: rgba(63, 185, 80, 0.6); }
.activity-chart-bar.tool-confidence { background: rgba(227, 179, 65, 0.6); }
.activity-chart-bar.tool-stop   { background: rgba(248, 81, 73, 0.6); }
.activity-chart-bar.tool-pulse  { background: rgba(188, 140, 255, 0.6); }
.activity-chart-bar.tool-default { background: rgba(72, 79, 88, 0.4); }

.event-body {
    flex: 1;
    min-width: 0;
}

.event-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: 12px;
}

.event-time {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Tasks ─────────────────────────────────────────────────── */

.task-bar-count {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 6px;
}

.task-bar-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.task-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
    text-align: center;
    padding: 20px 14px;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: grab;
    transition: background 0.1s;
}

.task-item:hover {
    background: var(--bg-hover);
}

.task-item.dragging {
    opacity: 0.4;
}

.task-item.completed .task-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

.task-item.in-progress .task-title {
    color: var(--accent);
}

.task-spinner {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: task-spin 0.8s linear infinite;
    display: inline-block;
}

.task-checkbox {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--accent);
}

.task-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
    border-radius: 3px;
    padding: 1px 3px;
}

.task-title[contenteditable="true"] {
    background: var(--bg-tertiary);
    border: 1px solid var(--accent);
    white-space: normal;
}

.task-delete-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
}

.task-item:hover .task-delete-btn {
    opacity: 1;
}

.task-delete-btn:hover {
    color: var(--error);
}

.task-bar-input-area {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.task-bar-input-area input {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
}

.task-bar-input-area input:focus {
    border-color: var(--accent);
}

.task-bar-add-btn {
    margin: 0 !important;
    padding: 4px 10px !important;
    font-size: 14px !important;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Changed Files Panel ───────────────────────────────────── */

.changed-files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.refresh-files-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.refresh-files-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.refresh-files-btn.refreshing {
    animation: spin 1s linear infinite;
    display: inline-block;
}

.changed-files-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.changed-files-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.file-empty {
    text-align: center;
    padding: 20px 0;
    color: var(--text-muted);
    font-size: 12px;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 12px;
    border-bottom: 1px solid transparent;
    transition: background 0.1s;
    cursor: pointer;
}

.file-item:hover {
    background: var(--bg-hover);
}

.file-status-icon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.file-modified .file-status-icon { color: var(--warning); background: rgba(210, 153, 34, 0.12); }
.file-added .file-status-icon    { color: var(--success); background: rgba(63, 185, 80, 0.12); }
.file-deleted .file-status-icon  { color: var(--error); background: rgba(248, 81, 73, 0.12); }
.file-renamed .file-status-icon  { color: var(--accent); background: rgba(88, 166, 255, 0.12); }

.file-path-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.file-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-dir {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-stats {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.file-adds {
    color: var(--success);
    background: rgba(63, 185, 80, 0.12);
    padding: 1px 5px;
    border-radius: 3px;
}

.file-dels {
    color: var(--error);
    background: rgba(248, 81, 73, 0.12);
    padding: 1px 5px;
    border-radius: 3px;
}

/* ── Notes Panel (Markdown) ────────────────────────────────── */

.note-md-rendered {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    cursor: pointer;
}

.note-md-rendered:hover {
    background: var(--bg-hover);
}

.note-md-placeholder {
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
    text-align: center;
    padding: 20px 0;
}

.note-md-editor {
    flex: 1;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: none;
    border-top: 2px solid var(--accent);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    resize: none;
    outline: none;
}
