/* Right sidebar — mirror of the left sidebar. The shell layout
   (`flex flex-col`, bg, width, transitions, border-LEFT) is now
   Tailwind utilities on the root `<aside>` in `right-sidebar.tsx`.
   The nav rows, icons, labels and toggle use the same class constants
   from `components/sidebar/nav-classes.ts` so heights / colors /
   strokes stay aligned. Diffs vs. left sidebar:
     * border on the LEFT, not the right (Tailwind `border-l`)
     * `.right-view-host` replaces the favorites/conversations blocks
     * active nav item uses --bg-hover tint (rule below)
     * collapsed state hides view-host (instead of favorites/conversations)
*/

/* Active nav-item state (currently-showing view) is applied via
   `sidebarNavItemActiveClass` from `nav-classes.ts` in
   `right-sidebar.tsx`. The legacy `.right-sidebar .sidebar-nav-item.active`
   rule no longer matches since nav rows are class strings of Tailwind
   utilities now (no `.sidebar-nav-item` class). */

/* View host — one child visible at a time, matching data-view. */
.right-view-host {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.right-view {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
}
.right-sidebar[data-view="history"] .right-view[data-view="history"],
.right-sidebar[data-view="detail"] .right-view[data-view="detail"],
.right-sidebar[data-view="context"] .right-view[data-view="context"] {
  display: flex;
}

/* Collapsed: hide view content + nav labels (the latter is inherited
   from .sidebar.collapsed rules in 02-sidebar.css). */
.right-sidebar.collapsed .right-view-host { display: none; }

/* HEAD item sits directly in .branches-section, needs same side padding as the list */
.branches-section > .branch-item {
  margin: 0 8px 1px;
}

/* ============ Branches panel — mirrors left sidebar section style ============ */
/* `.sidebar-section-header / -title / -hint` are emitted by
   `conversations.js::renderBranchesPanel()` (build innerHTML), so the
   styling still has to live in a global stylesheet. The same classes
   used to be a generic sidebar utility but the left-sidebar version
   was migrated to `<SidebarSection />` Tailwind utilities — only the
   right-dock Branches header still consumes them. */
.sidebar-section-header {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.sidebar-section-title {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.sidebar-section-hint {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s ease-out;
}
.sidebar-section-header:hover .sidebar-section-hint { opacity: 0.75; }
.sidebar-section-header.is-collapsed .sidebar-section-hint,
.is-collapsed > .sidebar-section-header .sidebar-section-hint {
  opacity: 0.75;
}


/* Wrapper mirrors .sidebar-favorites */
.branches-section {
  flex-shrink: 0;
  padding: 16px 0 8px;
}

/* List mirrors the favorites/conversations panel in `<SidebarSection />`.
 * Cap at 4 rows so long branch lists don't push the graph view off-screen.
 * Auto-scroll-on-checkout is dampened in JS via scrollIntoView
 * with block:'nearest' — active only moves if it's actually offscreen. */
.branches-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 8px;
  max-height: calc(32px * 4 + 3px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Item mirrors .fav-item / .conv-item geometry */
.branch-item {
  padding: 6px 8px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: 20px;
  cursor: pointer;
  transition: background 75ms;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--ui-list-radius);
}
.branch-item:hover { background: var(--bg-hover); }
.branch-item.active {
  background: rgba(160, 160, 160, 0.12);
  color: var(--text-bright);
}
.branch-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.branch-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.branch-item-badge {
  font-size: 12px;
  padding: 0 6px;
  height: 18px;
  line-height: 18px;
  border-radius: 3px;
  background: rgba(160, 160, 160, 0.15);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.branch-item-tokens {
  font-size: 12px;
  font-family: var(--font-mono);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Hover-revealed action buttons (rename / delete) on each branch
   row. Wrapped in a single .branch-item-actions container so the
   two buttons can sit tight against each other (gap:2px) without
   inheriting the row's wider gap:8 between dot/name/badge. Sizing
   (22×22) and border-radius match the topbar dropdown's
   .branch-selector .branch-del so the two surfaces feel identical. */
.branch-item-actions {
  display: none;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  /* Sit 5px from the row's right edge (row padding is 8px, so pull back
     3px) so the right gap EQUALS the button's 5px top/bottom gap
     ((32px row − 22px button) / 2) — the button is then symmetrically
     inset on all three sides. Matches the conversation row's ⋮ kebab
     (`right-[5px]`). */
  margin-right: -3px;
}
.branch-item:hover .branch-item-actions {
  display: inline-flex;
}
.branch-item-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 24×24 matches the topbar branch-dropdown's inline-styled
     buttons (see conversations.js: `var BTN = 24`). The CSS
     22×22 you'll find in 05-chat.css is overridden there. */
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 75ms, color 75ms;
}
.branch-item-action svg { display: block; }
.branch-item-rename:hover {
  /* The right-dock sits on `--bg-secondary`, which itself is darker
     than `--bg-primary`. Hovering with `--bg-hover` (the *lighter*
     hover token) made the button blend into the row instead of
     standing out, so use `--bg-hover-contrast` (the deeper-than-primary
     token) — the button visibly darkens, making the affordance
     clear on the dark surface. */
  background: var(--bg-hover-contrast, rgba(0, 0, 0, 0.3));
  color: var(--text-bright);
}
.branch-item-del:hover {
  /* Subtle danger — match the app's delete convention (menu-styles /
     conv-menu): faint red tint + red icon, not a solid red fill. */
  background: color-mix(in srgb, var(--accent-red) 15%, transparent);
  color: var(--accent-red);
}
/* When hovering the row, the HEAD badge collides visually with the
   action buttons. Hide the badge during hover so the action icons
   take its spot — HEAD identity is already conveyed by the row's
   .active styling. */
.branch-item:hover .branch-item-badge { display: none; }

/* Running indicator — same visual language as the sidebar's
   .convRunning class (see web/components/sidebar/sidebar.module.css):
   a colored gradient sweep on a ::before pseudo-element so the row
   text stays unaffected. Keyframes (convRunningFlow /
   convRunningBreathe / convFinishingWipe) live in
   web/app/styles/base.css to dodge turbopack's CSS-module
   keyframe-name mangling.
   Applied by branches-panel.tsx when its task_status subscription
   reports a task targeting this branch's head_msg_id. */
.branch-item.is-running,
.branch-item.is-finishing {
  position: relative;
  isolation: isolate;
}
.branch-item.is-running::before,
.branch-item.is-finishing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-image: linear-gradient(
    100deg,
    rgba(79,  140, 255, 0.28) 0%,
    rgba(160, 107, 255, 0.32) 25%,
    rgba(62,  207, 142, 0.28) 50%,
    rgba(160, 107, 255, 0.32) 75%,
    rgba(79,  140, 255, 0.28) 100%
  );
  background-size: 200% 100%;
  background-repeat: repeat-x;
  box-shadow:
    inset 0 0 14px rgba(79,  140, 255, 0.22),
    0 0 6px rgba(160, 107, 255, 0.20);
}
.branch-item.is-running::before {
  animation:
    convRunningFlow 2.6s linear infinite,
    convRunningBreathe 1.8s ease-in-out infinite;
}
.branch-item.is-finishing::before {
  animation: convFinishingWipe 1.1s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

/* ============ History DAG view ============ */

.history-body {
  flex: 1;
  overflow: auto;
  padding: 12px 8px 32px;
  position: relative;
}
.history-empty,
.detail-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 40px 18px;
  line-height: 1.55;
}
.detail-empty span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
}

.history-svg {
  display: block;
  margin: 0 auto;
}

/* Edge colour / stroke-width are set inline per-lane in history-graph.js
   so every branch reads as its own continuous ribbon. No CSS overrides
   here beyond fill:none (belt-and-braces in case the inline drops). */
.history-edge { fill: none; }
/* Edges are double-clickable. The hit-area is a wide invisible
   sibling path under the visible stroke (see ``history-edge-hit``).
   Hovering the hit path fattens the visible stroke for feedback. */
.history-edge-hit {
  cursor: pointer;
}
.history-edge-group:hover .history-edge {
  stroke-width: 3.5;
  opacity: 1;
}
.history-edge-hit.attach-edge-hit:hover ~ .attach-edge,
.history-edge-hit.spawn-edge-hit:hover ~ .spawn-edge {
  stroke-width: 2.4;
  opacity: 1;
}

.history-node { cursor: pointer; }
.history-node circle,
.history-node polygon,
.history-node rect {
  transition: filter 0.1s ease-out;
}
.history-node:hover circle,
.history-node:hover polygon,
.history-node:hover rect {
  filter: brightness(1.2);
}
.history-node.is-head { filter: drop-shadow(0 0 4px rgba(255,255,255,0.35)); }

/* Next-message context range: nodes/edges outside the active branch
   the next chat message will carry are faded. Transition so the range
   updating after a turn reads as a soft change, not a flash. */
/* Nodes keep a solid fill regardless of context / head membership —
   sub-call nodes from nested @agentic_function calls should look the
   same as top-level nodes. Edges still dim to convey context range. */
.history-node.out-of-context { opacity: 1; }
.history-edge.out-of-context { opacity: 0.4; transition: opacity 0.2s ease; }

/* Inline row labels — message preview / function name beside each node. */
.history-label {
  font-size: 11px;
  font-family: var(--font-sans, sans-serif);
  fill: var(--text-muted);
  dominant-baseline: middle;
  pointer-events: none;
  user-select: none;
}
.history-label.on-head { fill: var(--text-secondary); }
.history-label.is-head { fill: var(--text-primary); font-weight: 600; }

/* Collapsible code subtree: fold/unfold count badge + affordance. */
.history-fold-badge {
  font-size: 9px;
  font-family: var(--font-sans, sans-serif);
  font-weight: 600;
  fill: var(--text-secondary);
  dominant-baseline: middle;
}
.history-node.is-collapsible:hover .history-fold-badge {
  fill: var(--text-primary);
}

/* DAG node tooltip — structured card with header / input / output
   blocks. Implemented in web/lib/runtime-bridge/history/tooltip.ts.
   Two visual states: default (collapsed, ~3 short lines, sits next
   to the node) and ``.expanded`` (after a 5s dwell, full schema). */
.history-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  line-height: 1.4;
  width: 240px;
  max-width: 240px;
  box-shadow: var(--shadow-popover);
  opacity: 0;
  transition: opacity 0.1s,
              width 0.18s ease,
              max-height 0.18s ease;
  z-index: 5;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.history-tooltip.expanded {
  width: 360px;
  max-width: 360px;
  max-height: 420px;
  overflow-y: auto;
  z-index: 50;
}
.history-tooltip.visible { opacity: 1; }
.history-tooltip-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.history-tooltip-kind {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.history-tooltip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.history-tooltip-chip {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.history-tooltip-block {
  margin-top: 6px;
}
.history-tooltip-block:first-of-type {
  margin-top: 0;
}
.history-tooltip-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.history-tooltip-body {
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo,
               Monaco, Consolas, monospace);
  font-size: 11px;
  background: var(--bg-secondary);
  border-radius: 4px;
  padding: 4px 6px;
  max-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.history-tooltip.expanded .history-tooltip-body {
  max-height: 240px;
  overflow-y: auto;
  display: block;
  -webkit-line-clamp: unset;
  font-size: 11.5px;
}
.history-tooltip-kv {
  display: flex;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  padding: 1px 0;
}
.history-tooltip-kv-key {
  color: var(--text-muted);
  min-width: 54px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  padding-top: 1px;
}
.history-tooltip-kv-val {
  color: var(--text-primary);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo,
               Monaco, Consolas, monospace);
  word-break: break-all;
  flex: 1;
}


/* Multi-select + merge bar inside the Branches panel.
   Per-row check chip is always there but only visible on hover OR
   when something is already selected (avoid visual noise for the
   common 1-branch case). Once two rows are selected a sticky action
   bar lights up below the list with the Merge button. */

.branch-item-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.branch-item.selected .branch-item-check {
  background: var(--accent-blue, #4f8ef7);
  border-color: var(--accent-blue, #4f8ef7);
  color: white;
}
.branch-item.base .branch-item-check {
  background: var(--accent-purple, #a06bff);
  border-color: var(--accent-purple, #a06bff);
  color: white;
}

.branches-merge-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: 4px 4px 0 4px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  font-size: 12px;
}
.branches-merge-summary {
  flex: 1;
  color: var(--text-secondary);
}
.branches-merge-btn {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--accent-blue, #4f8ef7);
  background: var(--accent-blue, #4f8ef7);
  color: white;
  font-size: 12px;
  cursor: pointer;
}
.branches-merge-btn:hover { filter: brightness(1.1); }
.branches-merge-clear {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.branches-merge-clear:hover { color: var(--text-bright); background: var(--bg-hover); }

.branches-merge-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.branches-merge-modal {
  width: 500px;
  max-width: calc(100vw - 32px);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-dialog);
}
.branches-merge-modal-title {
  font-size: 14px;
  color: var(--text-bright);
  font-weight: 500;
}
.branches-merge-modal-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.15s;
}
.branches-merge-modal-input:focus { outline: none; border-color: var(--accent-blue); }
.branches-merge-mode {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--bg-tertiary);
}
/* Attach-to dropdown picker — opens under the "Attach to ▾" button in
   the branches selection bar. Lists every branch that's NOT in the
   current selection (since attaching a branch to itself is a no-op).
   Click a branch to anchor the attach pointer there. */
.branches-attach-wrap {
  position: relative;
}
.branches-attach-picker {
  position: absolute;
  top: calc(100% + 4px);
  /* Anchor to the right edge of the button so the picker grows
     leftward inside the panel rather than overflowing into the chat
     pane on narrow right docks. */
  right: 0;
  width: max-content;
  min-width: 200px;
  max-width: 280px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-popover);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.branches-attach-picker-item {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
}
.branches-attach-picker-item:hover {
  background: var(--bg-hover);
  color: var(--text-bright);
}
.branches-attach-picker-empty {
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.branches-attach-scope {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.branches-attach-scope-btn {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
.branches-attach-scope-btn.is-active {
  background: var(--bg-hover);
  color: var(--text-bright);
}
.branches-attach-scope-select {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
  font-family: inherit;
}
.branches-merge-mode-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1.4;
}
.branches-merge-mode-row input[type="radio"] {
  margin-top: 2px;
}
.branches-merge-mode-row strong {
  color: var(--text-bright);
  font-weight: 500;
}
.branches-merge-modal-hint {
  font-size: 11px;
  color: var(--text-muted);
}
.branches-merge-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.branches-merge-cancel,
.branches-merge-go {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}
.branches-merge-cancel:hover { background: var(--bg-hover); }
.branches-merge-go {
  border-color: var(--accent-blue, #4f8ef7);
  background: var(--accent-blue, #4f8ef7);
  color: white;
}
.branches-merge-go:hover { filter: brightness(1.1); }


/* ============ Worktrees panel ============
   Mirrors `.branches-section` geometry — same outer padding, same
   list cap, same row affordances — so the two sections feel like
   one cohesive right-rail surface. Status pills are coloured per
   WorktreeStatus enum (see openprogram/worktree/types.py):
     active     → green
     committing → amber (in-flight merge)
     errored    → red
     merged     → muted grey
     discarded  → very low contrast (almost transparent)
     kept       → blue-ish (detached but alive)                    */

.worktrees-section {
  flex-shrink: 0;
  padding: 8px 0 8px;
  border-top: 1px solid var(--border);
}
.worktrees-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px;
  max-height: calc(96px * 3);   /* roughly 3 rows then scroll */
  overflow-y: auto;
  overflow-x: hidden;
}

.worktree-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  font-size: 12px;
  color: var(--text-primary);
  transition: opacity 150ms ease-out;
}
.worktree-item.is-busy { opacity: 0.6; pointer-events: none; }

.worktree-status-merged,
.worktree-status-kept { opacity: 0.7; }
.worktree-status-discarded { opacity: 0.45; }

.worktree-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.worktree-item-meta {
  font-size: 11px;
  color: var(--text-muted);
}

/* Status pill — small rounded label, colour by enum. */
.worktree-status-pill {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.worktree-status-pill-active {
  background: rgba(62, 207, 142, 0.18);
  color: #6cd9aa;
}
.worktree-status-pill-committing {
  background: rgba(224, 176, 32, 0.18);
  color: #e0c570;
}
.worktree-status-pill-errored {
  background: rgba(224, 68, 90, 0.20);
  color: #ff8094;
}
.worktree-status-pill-merged {
  background: rgba(160, 160, 160, 0.18);
  color: var(--text-secondary);
}
.worktree-status-pill-kept {
  background: rgba(79, 140, 255, 0.18);
  color: #8ab5ff;
}
.worktree-status-pill-discarded {
  background: rgba(160, 160, 160, 0.10);
  color: var(--text-muted);
}

.worktree-item-branch {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-bright);
}
.worktree-item-repo {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.worktree-item-time {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 11px;
}
.worktree-item-files {
  flex-shrink: 0;
  color: var(--text-muted);
}
.worktree-item-error {
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(224, 68, 90, 0.10);
  border: 1px solid rgba(224, 68, 90, 0.30);
  color: #ff8094;
  font-size: 11px;
  max-height: 60px;
  overflow: auto;
  white-space: pre-wrap;
}
.worktree-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.worktree-item-actions-hint {
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
}
.worktree-btn {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: background 75ms, color 75ms, border-color 75ms;
}
.worktree-btn:hover { background: var(--bg-hover); color: var(--text-bright); }
.worktree-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.worktree-btn-merge {
  border-color: var(--accent-blue, #4f8ef7);
  background: var(--accent-blue, #4f8ef7);
  color: white;
}
.worktree-btn-merge:hover { filter: brightness(1.1); }
.worktree-btn-discard:hover {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: white;
}
