/* Phase 10: Token tracking bar + export button styles (TOK-01, TOK-02, EXP-01, EXP-02) */

.token-bar { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 4px 12px; background: var(--color-bg-secondary, #161b22); border-top: 1px solid var(--color-border); font-size: 0.75rem; color: var(--color-text-muted); flex-shrink: 0; }

.token-count { display: inline-flex; align-items: center; gap: 4px; }

.token-count .label { color: var(--color-text-muted); }

.token-count.claude .value { color: var(--color-accent-claude, #d4a574); }

.token-count.gemini .value { color: var(--color-accent-gemini, #a3e635); }

.token-count.openai .value { color: var(--color-accent-openai, #74b9ff); }

.token-cumulative { margin-left: auto; color: var(--color-text-muted); font-size: 0.73rem; }

.export-btn { background: none; border: 1px solid var(--color-border); color: var(--color-text-muted); border-radius: 3px; padding: 2px 8px; cursor: pointer; font-size: 0.75rem; }

.export-btn:hover { border-color: var(--color-accent-claude); color: var(--color-text); }

@media print {
  .header, .sidebar-skills, .sidebar-timeline, .input-bar,
  .token-bar, .agent-tabs, .settings-panel, .history-panel,
  .files-panel { display: none !important; }
  .center-area { display: block !important; }
  .response-pane { display: block !important; height: auto !important; overflow: visible !important; page-break-after: always; }
  body { background: #fff !important; color: #000 !important; }
}