@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/glass.css";
@import "tokens/terminal.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/motion.css";

/* Current task-local tabs, following design/DESIGN.md. */
.terminal-header { height: 48px; flex: none; display: flex; align-items: flex-end; padding: 0 12px 0 8px; background: var(--term-header-surface); }
.terminal-tabs { flex: 1; min-width: 0; display: flex; align-items: flex-end; overflow-x: auto; scrollbar-width: none; }
.terminal-tab { flex: none; display: flex; align-items: center; gap: 8px; height: 34px; min-width: 88px; max-width: 180px; padding: 0 12px; border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0; color: var(--term-dim); font-size: 12px; cursor: default; }
.terminal-tab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal-tab:hover { background: var(--term-hover); color: var(--term-fg); }
.terminal-tab[data-selected="true"] { background: var(--term-surface); border-color: var(--term-line); color: var(--term-white); }
.close-tab, .add-tab { border: 0; background: transparent; color: var(--term-dim); padding: 0; cursor: default; border-radius: 4px; }
.close-tab { flex: none; width: 16px; height: 16px; opacity: 0; }
.terminal-tab:hover .close-tab, .terminal-tab[data-selected="true"] .close-tab { opacity: 1; }
.close-tab:hover, .add-tab:hover { background: var(--term-hover); color: var(--term-white); }
.add-tab { flex: none; width: 24px; height: 24px; margin: 0 4px 5px; font-size: 15px; }
.close-task { flex: none; align-self: center; border: 1px solid var(--term-seg-active); background: transparent; color: var(--term-fg-ui); border-radius: 6px; padding: 4px 6px 4px 10px; margin-left: 12px; font-size: 12px; }
.close-task:hover { background: var(--term-hover); }
.close-task span { margin-left: 7px; font: 10.5px var(--font-mono); color: var(--term-dim); background: var(--term-line); border-radius: 4px; padding: 0 5px; }
.terminal-meta { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 20px 2px; color: var(--term-faint-ui); font-size: 11.5px; }
.worktree-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; font-family: var(--font-mono); color: var(--term-dim); }
.push-confirm { border: 0; border-radius: 7px; padding: 7px 12px; font-size: 12.5px; background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.push-confirm span { margin-left: 8px; font: 10.5px var(--font-mono); }