.tree {
  flex: 1;
  overflow-y: auto;
  outline: none;
  padding: 4px 0;
}

.row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--body-size);
  font-family: var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Indent provided as inline style via --depth so each level matches the
   * "tree" feel without a hardcoded class explosion. */
  padding-left: calc(8px + var(--depth, 0) * 12px);
  user-select: none;
  transition: background var(--transition-fast);
}

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

/* Roving-tabindex focus ring: visible only on keyboard focus so mouse
 * users don't see a permanent ring on the active row. The `outline-offset:
 * -1px` keeps the ring inside the row bounds so adjacent rows aren't
 * pushed by the visual stroke. */
.row:focus {
  outline: none;
}

.row:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
}

.rowSelected {
  background: var(--selected-bg);
  color: var(--text-primary);
}

.rowActive {
  background: var(--selected-bg);
  box-shadow: inset 2px 0 0 var(--accent-primary);
  color: var(--text-primary);
}

.rowDeleted .name {
  text-decoration: line-through;
  text-decoration-color: var(--diff-removed-text);
}

/* When set, --row-status-color comes from inline style on the row and
 * carries the change-status tint (yellow=Modified, green=Added,
 * red=Deleted, blue=Renamed). It governs filename, folder name, folder
 * icon, and the status badge so a row reads as a single colored unit. */
.rowStatusTinted .name,
.rowStatusTinted .icon,
.rowStatusTinted .status {
  color: var(--row-status-color);
}

.chevron {
  flex-shrink: 0;
  color: var(--text-dim);
}

.icon {
  flex-shrink: 0;
  color: var(--text-dim);
}

.rowSelected .icon,
.rowSelected .chevron,
.rowActive .icon,
.rowActive .chevron {
  color: var(--text-muted);
}

/* When a tinted row is also selected, the previous `.rowSelected .icon`
 * rule wins by source order (same specificity), which would blank the
 * status tint. Re-assert the tint with a higher-specificity selector. */
.rowSelected.rowStatusTinted .icon {
  color: var(--row-status-color);
}

.name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.renameInput {
  flex: 1;
  min-width: 0;
  height: 20px;
  padding: 1px 4px;
  border: 1px solid var(--accent-primary);
  border-radius: 3px;
  background: var(--chat-input-bg);
  color: var(--text-primary);
  font: inherit;
  outline: none;
}

.renameInput[aria-invalid="true"] {
  border-color: var(--status-stopped);
}

.status {
  width: 14px;
  flex-shrink: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.dirStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  flex-shrink: 0;
  border: 1px solid
    color-mix(in srgb, var(--row-status-color, var(--tool-task)) 30%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(
    in srgb,
    var(--row-status-color, var(--tool-task)) 12%,
    transparent
  );
  color: var(--row-status-color, var(--tool-task));
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
}

.empty {
  padding: 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: var(--body-size);
}
