/**
 * OpenCode Replay - Main Stylesheet
 * Clean, professional design for session transcripts
 */

/* ============================================================================
   CSS Variables / Theme - LIGHT MODE (Default)
   ============================================================================ */

:root {
  /* Color scheme declaration */
  color-scheme: light dark;

  /* Colors */
  --color-bg: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #f1f3f5;
  --color-text: #212529;
  --color-text-secondary: #6c757d;
  --color-text-muted: #adb5bd;
  --color-border: #dee2e6;
  --color-border-light: #e9ecef;

  /* Message backgrounds */
  --user-bg: #e3f2fd;
  --user-border: #90caf9;
  --assistant-bg: #f5f5f5;
  --assistant-border: #e0e0e0;
  --tool-bg: #fff8e1;
  --tool-border: #ffecb3;
  --error-bg: #ffebee;
  --error-border: #ffcdd2;
  --reasoning-bg: #fff3e0;
  --reasoning-border: #ffe0b2;

  /* Tool-specific colors */
  --bash-bg: #f3e5f5;
  --bash-border: #ce93d8;
  --read-bg: #e8eaf6;
  --read-border: #9fa8da;
  --write-bg: #e8f5e9;
  --write-border: #a5d6a7;
  --edit-bg: #fff3e0;
  --edit-border: #ffcc80;

  /* Status colors */
  --color-success: #28a745;
  --color-error: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;

  /* Code */
  --code-bg: #f6f8fa;
  --code-border: #e1e4e8;
  --code-text: #24292e;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-lg: 18px;
  --line-height: 1.6;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Scrollbar */
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb: #c1c1c1;

  /* Container */
  --container-max-width: 900px;
}

/* ============================================================================
   DARK MODE - Automatic (OS Preference)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    
    /* Core Colors */
    --color-bg: #0d1117;
    --color-bg-secondary: #161b22;
    --color-bg-tertiary: #21262d;
    --color-text: #e6edf3;
    --color-text-secondary: #8b949e;
    --color-text-muted: #6e7681;
    --color-border: #30363d;
    --color-border-light: #21262d;

    /* Message backgrounds */
    --user-bg: #1c3a5e;
    --user-border: #2d5a8b;
    --assistant-bg: #21262d;
    --assistant-border: #30363d;
    --tool-bg: #2d2006;
    --tool-border: #4a3c1a;
    --error-bg: #3d1418;
    --error-border: #5c2125;
    --reasoning-bg: #2d2006;
    --reasoning-border: #4a3c1a;

    /* Tool-specific colors */
    --bash-bg: #2a1f35;
    --bash-border: #4a3860;
    --read-bg: #1a2340;
    --read-border: #2d3a5a;
    --write-bg: #1a2e1a;
    --write-border: #2d4a2d;
    --edit-bg: #2d2006;
    --edit-border: #4a3c1a;

    /* Status colors */
    --color-success: #3fb950;
    --color-error: #f85149;
    --color-warning: #d29922;
    --color-info: #58a6ff;

    /* Code */
    --code-bg: #161b22;
    --code-border: #30363d;
    --code-text: #e6edf3;

    /* Shadows - darker for dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);

    /* Scrollbar */
    --scrollbar-track: #21262d;
    --scrollbar-thumb: #484f58;
  }
}

/* ============================================================================
   DARK MODE - Manual Override via data-theme attribute
   ============================================================================ */

:root[data-theme="dark"] {
  color-scheme: dark;
  
  /* Core Colors */
  --color-bg: #0d1117;
  --color-bg-secondary: #161b22;
  --color-bg-tertiary: #21262d;
  --color-text: #e6edf3;
  --color-text-secondary: #8b949e;
  --color-text-muted: #6e7681;
  --color-border: #30363d;
  --color-border-light: #21262d;

  /* Message backgrounds */
  --user-bg: #1c3a5e;
  --user-border: #2d5a8b;
  --assistant-bg: #21262d;
  --assistant-border: #30363d;
  --tool-bg: #2d2006;
  --tool-border: #4a3c1a;
  --error-bg: #3d1418;
  --error-border: #5c2125;
  --reasoning-bg: #2d2006;
  --reasoning-border: #4a3c1a;

  /* Tool-specific colors */
  --bash-bg: #2a1f35;
  --bash-border: #4a3860;
  --read-bg: #1a2340;
  --read-border: #2d3a5a;
  --write-bg: #1a2e1a;
  --write-border: #2d4a2d;
  --edit-bg: #2d2006;
  --edit-border: #4a3c1a;

  /* Status colors */
  --color-success: #3fb950;
  --color-error: #f85149;
  --color-warning: #d29922;
  --color-info: #58a6ff;

  /* Code */
  --code-bg: #161b22;
  --code-border: #30363d;
  --code-text: #e6edf3;

  /* Shadows - darker for dark mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);

  /* Scrollbar */
  --scrollbar-track: #21262d;
  --scrollbar-thumb: #484f58;
}

/* Force light mode when explicitly set */
:root[data-theme="light"] {
  color-scheme: light;
  /* All light mode values are already the default in :root */
}

/* ============================================================================
   Reset & Base Styles
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  line-height: var(--line-height);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-bg);
}

a {
  color: var(--color-info);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  font-weight: 600;
  line-height: 1.3;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

p {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px 6px;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-sm);
}

pre {
  margin: 0;
  padding: var(--spacing-md);
  overflow-x: auto;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-md);
}

pre code {
  padding: 0;
  background: none;
  border: none;
  font-size: var(--font-size-sm);
}

/* ============================================================================
   Container & Layout
   ============================================================================ */

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-lg);
}

/* ============================================================================
   Page Header
   ============================================================================ */

.page-header {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
  margin-bottom: var(--spacing-sm);
}

.page-header .subtitle {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}

/* Breadcrumbs */
.breadcrumbs {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.breadcrumb-item {
  color: var(--color-text-secondary);
}

.breadcrumb-item.current {
  color: var(--color-text);
}

.breadcrumb-separator {
  margin: 0 var(--spacing-sm);
  color: var(--color-text-muted);
}

/* Search trigger */
.search-container {
  margin-top: var(--spacing-md);
}

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  transition: border-color 0.2s;
}

.search-trigger:hover {
  border-color: var(--color-text-muted);
}

.search-trigger kbd {
  padding: 2px 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
}

/* ============================================================================
   Page Footer
   ============================================================================ */

.page-footer {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ============================================================================
   Session Cards (Index Page)
   ============================================================================ */

.session-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.session-card {
  display: block;
  padding: var(--spacing-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow 0.2s, border-color 0.2s;
  text-decoration: none;
  color: inherit;
}

.session-card:hover {
  border-color: var(--color-text-muted);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.session-card .session-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

.session-card .session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

.session-card .session-summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.session-card .session-stats {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.session-card .stat-additions {
  color: var(--color-success);
}

.session-card .stat-deletions {
  color: var(--color-error);
}

/* ============================================================================
   Messages
   ============================================================================ */

.messages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.message {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.message-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}

.message-role {
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
}

.message-time {
  color: var(--color-text-secondary);
}

.message-model {
  color: var(--color-text-muted);
  margin-left: auto;
}

.message-content {
  padding: var(--spacing-md);
}

.message-stats {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* User message */
.message-user {
  background: var(--user-bg);
  border: 1px solid var(--user-border);
}

.message-user .message-role {
  color: #1565c0;
}

/* Assistant message */
.message-assistant {
  background: var(--assistant-bg);
  border: 1px solid var(--assistant-border);
}

.message-assistant .message-role {
  color: #424242;
}

/* ============================================================================
   Tool Calls
   ============================================================================ */

.tool-call {
  margin: var(--spacing-md) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--font-size-sm);
}

.tool-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  user-select: none;
}

.tool-header:hover {
  filter: brightness(0.98);
}

.tool-icon {
  font-size: var(--font-size-lg);
}

.tool-name {
  font-weight: 600;
}

.tool-title {
  color: var(--color-text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-toggle {
  padding: 2px 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.tool-body {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tool-body.collapsed {
  display: none;
}

.tool-input,
.tool-output {
  padding: var(--spacing-md);
}

.tool-input {
  background: rgba(255, 255, 255, 0.5);
}

.tool-output {
  background: rgba(0, 0, 0, 0.02);
}

/* Tool-specific styling */
.tool-bash {
  background: var(--bash-bg);
  border: 1px solid var(--bash-border);
}

.tool-read {
  background: var(--read-bg);
  border: 1px solid var(--read-border);
}

.tool-write {
  background: var(--write-bg);
  border: 1px solid var(--write-border);
}

.tool-edit {
  background: var(--edit-bg);
  border: 1px solid var(--edit-border);
}

.tool-glob,
.tool-grep {
  background: var(--read-bg);
  border: 1px solid var(--read-border);
}

.tool-task {
  background: var(--tool-bg);
  border: 1px solid var(--tool-border);
}

/* Tool status indicators */
.tool-call[data-status="error"] {
  background: var(--error-bg);
  border-color: var(--error-border);
}

.tool-call[data-status="running"] {
  opacity: 0.8;
}

/* Command styling for bash */
.tool-command {
  font-family: var(--font-mono);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.bash-command {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background: rgba(0, 0, 0, 0.08);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bash-description {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-left: var(--spacing-sm);
}

.bash-workdir {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.bash-output {
  padding: var(--spacing-md);
  background: #1e1e1e;
  max-height: 400px;
  overflow: auto;
}

.bash-output pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.bash-output code {
  color: #d4d4d4;
  font-size: var(--font-size-sm);
  background: transparent;
  border: none;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.bash-error {
  padding: var(--spacing-md);
  background: var(--error-bg);
  border-top: 1px solid var(--error-border);
}

.bash-error pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.bash-error code {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  background: transparent;
  border: none;
  padding: 0;
}

/* Read tool styling */
.read-file-path {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.read-full-path {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.read-range {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.read-lines {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.read-content {
  padding: var(--spacing-md);
  background: var(--code-bg);
  max-height: 500px;
  overflow: auto;
}

.read-content pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.read-content code {
  font-size: var(--font-size-sm);
  background: transparent;
  border: none;
  padding: 0;
  white-space: pre;
}

.read-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--error-bg);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

.read-error .error-icon {
  font-size: var(--font-size-lg);
}

/* Write tool styling */
.write-file-path {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.write-full-path {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.write-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

.write-badge.badge-success {
  background: #e8f5e9;
  color: var(--color-success);
}

.write-badge.badge-error {
  background: var(--error-bg);
  color: var(--color-error);
}

.write-lines,
.write-chars {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.write-content {
  padding: var(--spacing-md);
  background: var(--code-bg);
  max-height: 500px;
  overflow: auto;
}

.write-content pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.write-content code {
  font-size: var(--font-size-sm);
  background: transparent;
  border: none;
  padding: 0;
  white-space: pre;
}

.write-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--error-bg);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

.write-error .error-icon {
  font-size: var(--font-size-lg);
}

/* Edit tool styling */
.edit-file-path {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.edit-full-path {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.edit-replace-all {
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: #fff3e0;
  color: #e65100;
}

.edit-stats {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

.edit-old-lines {
  color: var(--color-error);
}

.edit-arrow {
  color: var(--color-text-muted);
}

.edit-new-lines {
  color: var(--color-success);
}

.edit-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-border);
}

.edit-diff .diff-old,
.edit-diff .diff-new {
  padding: var(--spacing-md);
  background: var(--color-bg);
  overflow: auto;
  max-height: 400px;
}

.edit-diff .diff-old {
  background: #fff5f5;
}

.edit-diff .diff-new {
  background: #f0fff4;
}

.edit-diff .diff-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}

.edit-diff .diff-old .diff-label {
  color: var(--color-error);
}

.edit-diff .diff-new .diff-label {
  color: var(--color-success);
}

.edit-diff pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.edit-diff code {
  font-size: var(--font-size-sm);
  background: transparent;
  border: none;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.edit-diff code.diff-removed {
  background: transparent;
}

.edit-diff code.diff-added {
  background: transparent;
}

/* Long diff styling */
.edit-diff-long {
  padding: var(--spacing-md);
}

.edit-diff-long .diff-section {
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.edit-diff-long .diff-section:last-child {
  margin-bottom: 0;
}

.edit-diff-long .diff-label {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.edit-diff-long .diff-old-section .diff-label {
  color: var(--color-error);
  background: #fff5f5;
}

.edit-diff-long .diff-new-section .diff-label {
  color: var(--color-success);
  background: #f0fff4;
}

.edit-diff-long pre {
  margin: 0;
  padding: var(--spacing-md);
  background: var(--code-bg);
  border: none;
  border-radius: 0;
  max-height: 400px;
  overflow: auto;
}

.edit-diff-long code {
  font-size: var(--font-size-sm);
  background: transparent;
  border: none;
  padding: 0;
}

.edit-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--error-bg);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

.edit-error .error-icon {
  font-size: var(--font-size-lg);
}

/* Responsive: stack diff on mobile */
@media (max-width: 768px) {
  .edit-diff {
    grid-template-columns: 1fr;
  }
}

/* Glob tool styling */
.glob-pattern {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.glob-path {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glob-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.glob-file-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 400px;
  overflow-y: auto;
}

.glob-file-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.glob-file-item:last-child {
  border-bottom: none;
}

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

.glob-file-icon {
  flex-shrink: 0;
}

.glob-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glob-no-matches {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.glob-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--error-bg);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

/* Grep tool styling */
.grep-pattern {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.grep-include {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-info);
  background: #e3f2fd;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.grep-path {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grep-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.grep-matches {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 400px;
  overflow-y: auto;
}

.grep-match {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.grep-match:last-child {
  border-bottom: none;
}

.grep-match:hover {
  background: var(--color-bg-secondary);
}

.grep-match-file {
  color: var(--color-info);
  flex-shrink: 0;
}

.grep-match-line {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.grep-match-content {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.grep-no-matches {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.grep-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--error-bg);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

/* Task tool styling */
.task-agent-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.task-description {
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-command {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-sm);
}

.task-command-label {
  color: var(--color-text-muted);
}

.task-command code {
  font-size: var(--font-size-sm);
}

.task-prompt,
.task-result {
  border-bottom: 1px solid var(--color-border-light);
}

.task-prompt:last-child,
.task-result:last-child {
  border-bottom: none;
}

.task-prompt-label,
.task-result-label {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.task-prompt-label:hover,
.task-result-label:hover {
  background: var(--color-border-light);
}

.task-prompt pre,
.task-result pre {
  margin: 0;
  padding: var(--spacing-md);
  background: var(--code-bg);
  border: none;
  border-radius: 0;
  max-height: 400px;
  overflow: auto;
}

.task-prompt code,
.task-result code {
  font-size: var(--font-size-sm);
  background: transparent;
  border: none;
  padding: 0;
  white-space: pre-wrap;
}

.task-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--error-bg);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

/* TodoWrite tool styling */
.tool-todowrite {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
}

.todo-summary {
  font-weight: 600;
  color: var(--color-text);
}

.todo-stats {
  display: flex;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xs);
  flex: 1;
}

.todo-stat-progress {
  color: var(--color-info);
}

.todo-stat-pending {
  color: var(--color-text-muted);
}

.todo-stat-cancelled {
  color: var(--color-error);
}

.tool-todowrite .todo-list {
  padding: var(--spacing-md);
}

.todo-empty {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.todo-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--error-bg);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

/* WebFetch tool styling */
.tool-webfetch {
  background: #e0f7fa;
  border: 1px solid #80deea;
}

.webfetch-url {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-info);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webfetch-url:hover {
  text-decoration: underline;
}

.webfetch-format {
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-text-secondary);
}

.webfetch-size {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.webfetch-content {
  padding: var(--spacing-md);
  background: var(--code-bg);
  max-height: 500px;
  overflow: auto;
}

.webfetch-content pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.webfetch-content code {
  font-size: var(--font-size-sm);
  background: transparent;
  border: none;
  padding: 0;
  white-space: pre-wrap;
}

.webfetch-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--error-bg);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

/* Generic tool styling (fallback for unknown tools) */
.tool-generic {
  background: var(--tool-bg);
  border: 1px solid var(--tool-border);
}

.tool-input-label,
.tool-output-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.tool-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--error-bg);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

.tool-error .error-icon {
  font-size: var(--font-size-lg);
}

/* Batch tool styling */
.tool-batch {
  background: #fafafa;
  border: 1px solid #e0e0e0;
}

.batch-title {
  font-weight: 600;
}

.batch-summary {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-tool-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--color-border-light);
}

.batch-tool-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-sm);
}

.batch-tool-item:last-child {
  border-bottom: none;
}

.batch-tool-item:hover {
  background: var(--color-bg-secondary);
}

.batch-tool-index {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.batch-tool-icon {
  flex-shrink: 0;
}

.batch-tool-name {
  font-weight: 500;
  flex-shrink: 0;
}

.batch-tool-info {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.batch-empty {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.batch-output {
  border-top: 1px solid var(--color-border-light);
}

.batch-output-label {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.batch-output pre {
  margin: 0;
  padding: var(--spacing-md);
  background: var(--code-bg);
  border: none;
  border-radius: 0;
  max-height: 400px;
  overflow: auto;
}

.batch-output code {
  font-size: var(--font-size-sm);
  background: transparent;
  border: none;
  padding: 0;
}

.batch-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--error-bg);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

/* File path styling */
.tool-file {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* ============================================================================
   Diff View (for edit tool)
   ============================================================================ */

.tool-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-border);
}

.diff-old,
.diff-new {
  padding: var(--spacing-md);
  background: var(--color-bg);
}

.diff-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}

.diff-old .diff-label {
  color: var(--color-error);
}

.diff-new .diff-label {
  color: var(--color-success);
}

.diff-removed {
  background: #ffeef0;
}

.diff-added {
  background: #e6ffed;
}

/* ============================================================================
   Todo List (for todowrite tool)
   ============================================================================ */

.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-status {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.todo-completed .todo-status {
  color: var(--color-success);
}

.todo-in-progress .todo-status {
  color: var(--color-info);
}

.todo-pending .todo-status {
  color: var(--color-text-muted);
}

.todo-cancelled .todo-status {
  color: var(--color-error);
}

.todo-content {
  flex: 1;
}

.todo-completed .todo-content {
  text-decoration: line-through;
  color: var(--color-text-secondary);
}

.todo-priority {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
}

.priority-high {
  background: #ffebee;
  color: var(--color-error);
}

.priority-medium {
  background: #fff8e1;
  color: #f57c00;
}

.priority-low {
  background: #e8f5e9;
  color: var(--color-success);
}

/* ============================================================================
   Reasoning (Extended Thinking)
   ============================================================================ */

.reasoning {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--reasoning-bg);
  border: 1px solid var(--reasoning-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.reasoning-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: #e65100;
}

.reasoning-content {
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ============================================================================
   Pagination
   ============================================================================ */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.pagination a,
.pagination span {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.pagination a:hover {
  background: var(--color-bg-secondary);
  text-decoration: none;
}

.pagination .current {
  background: var(--color-info);
  color: white;
  border-color: var(--color-info);
}

.pagination .disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.pagination-ellipsis {
  border: none;
  padding: var(--spacing-sm) var(--spacing-xs);
  color: var(--color-text-secondary);
  cursor: default;
}

/* ============================================================================
   Timeline (Session Overview)
   ============================================================================ */

.session-timeline {
  position: relative;
  padding-left: var(--spacing-xl);
}

.session-timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

.timeline-entry {
  position: relative;
  margin-bottom: var(--spacing-lg);
}

.timeline-marker {
  position: absolute;
  left: calc(-1 * var(--spacing-xl) + 2px);
  width: 18px;
  height: 18px;
  background: var(--color-info);
  border-radius: 50%;
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-content {
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.timeline-content a {
  display: block;
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
}

.timeline-stats {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ============================================================================
   Git Commit Cards
   ============================================================================ */

.commit-cards {
  margin-top: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.commit-card {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: linear-gradient(135deg, #fff8e1, #ffe0b2);
  border: 1px solid #ffcc80;
  border-radius: var(--radius-md);
  border-left: 3px solid #ff9800;
}

.commit-icon {
  flex-shrink: 0;
  color: #e65100;
  margin-top: 2px;
}

.commit-icon svg {
  display: block;
}

.commit-content {
  flex: 1;
  min-width: 0;
}

.commit-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.commit-hash {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #e65100;
  text-decoration: none;
}

.commit-hash:hover {
  text-decoration: underline;
}

a.commit-hash {
  color: #bf360c;
}

a.commit-hash:hover {
  color: #e65100;
}

.commit-branch {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: 1px 6px;
  background: rgba(255, 152, 0, 0.2);
  border-radius: var(--radius-sm);
  color: #e65100;
}

.commit-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.commit-message {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  word-break: break-word;
}

/* Dark mode for commit cards */
:root[data-theme="dark"] .commit-card {
  background: linear-gradient(135deg, #3d2800, #2d1a00);
  border-color: #5d3a00;
}

:root[data-theme="dark"] .commit-icon {
  color: #ffb74d;
}

:root[data-theme="dark"] .commit-hash {
  color: #ffb74d;
}

:root[data-theme="dark"] a.commit-hash {
  color: #ffa726;
}

:root[data-theme="dark"] a.commit-hash:hover {
  color: #ffb74d;
}

:root[data-theme="dark"] .commit-branch {
  background: rgba(255, 167, 38, 0.2);
  color: #ffb74d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .commit-card {
    background: linear-gradient(135deg, #3d2800, #2d1a00);
    border-color: #5d3a00;
  }

  :root:not([data-theme="light"]) .commit-icon {
    color: #ffb74d;
  }

  :root:not([data-theme="light"]) .commit-hash {
    color: #ffb74d;
  }

  :root:not([data-theme="light"]) a.commit-hash {
    color: #ffa726;
  }

  :root:not([data-theme="light"]) a.commit-hash:hover {
    color: #ffb74d;
  }

  :root:not([data-theme="light"]) .commit-branch {
    background: rgba(255, 167, 38, 0.2);
    color: #ffb74d;
  }
}

/* ============================================================================
   Stats & Badges
   ============================================================================ */

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

.badge-success {
  background: #e8f5e9;
  color: var(--color-success);
}

.badge-error {
  background: #ffebee;
  color: var(--color-error);
}

.badge-info {
  background: #e3f2fd;
  color: var(--color-info);
}

/* ============================================================================
   Search Modal
   ============================================================================ */

/* Dialog element reset */
.search-modal {
  padding: 0;
  border: none;
  background: transparent;
  max-width: none;
  max-height: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.search-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.search-modal[open] {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.search-modal-content {
  width: 90%;
  max-width: 700px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.search-modal-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--spacing-sm);
}

.search-input-icon {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
}

.search-modal-header input {
  flex: 1;
  padding: var(--spacing-sm);
  border: none;
  font-size: var(--font-size-lg);
  background: transparent;
  color: var(--color-text);
  outline: none;
}

.search-modal-header input::placeholder {
  color: var(--color-text-muted);
}

.search-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background-color 0.15s, border-color 0.15s;
}

.search-modal-close:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-text-muted);
}

.search-status {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-bg-secondary);
}

.search-results {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.search-result {
  display: block;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}

.search-result:hover {
  background: var(--color-bg-secondary);
  text-decoration: none;
}

.search-result:last-child {
  border-bottom: none;
}

.search-result-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.search-result-role {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-result-role-user {
  background: var(--user-bg);
  color: #1565c0;
}

.search-result-role-assistant {
  background: var(--assistant-bg);
  color: #424242;
}

.search-result-role-session {
  background: var(--color-info);
  color: white;
}

.search-result-page {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.search-result-title {
  font-weight: 500;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text);
}

.search-result-preview {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.5;
}

/* Search highlight */
.search-result mark,
mark {
  background: #fff59d;
  color: inherit;
  padding: 1px 2px;
  border-radius: 2px;
}

.search-no-results {
  padding: var(--spacing-xl);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* ============================================================================
   Responsive Design
   ============================================================================ */

@media (max-width: 768px) {
  :root {
    --container-max-width: 100%;
  }

  .container {
    padding: var(--spacing-md);
  }

  .tool-diff {
    grid-template-columns: 1fr;
  }

  .search-modal[open] {
    padding-top: var(--spacing-md);
    align-items: flex-start;
  }

  .search-modal-content {
    width: calc(100% - var(--spacing-md) * 2);
    max-height: calc(100vh - var(--spacing-xl));
  }
  
  .search-trigger kbd {
    display: none;
  }
}

/* ============================================================================
   Theme Toggle Button
   ============================================================================ */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: 
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.theme-toggle:hover {
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Icon visibility - light mode shows moon, dark mode shows sun */
.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* Auto dark mode icon states */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: block;
  }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: none;
  }
}

/* ============================================================================
   Header Layout - Updated for Theme Toggle
   ============================================================================ */

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* ============================================================================
   Dark Mode Element Overrides
   ============================================================================ */

/* User message role color */
:root[data-theme="dark"] .message-user .message-role {
  color: #58a6ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .message-user .message-role {
    color: #58a6ff;
  }
}

/* Assistant message role color */
:root[data-theme="dark"] .message-assistant .message-role {
  color: #8b949e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .message-assistant .message-role {
    color: #8b949e;
  }
}

/* Bash output - keep dark in both modes, but adjust */
:root[data-theme="dark"] .bash-output {
  background: #0d1117;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bash-output {
    background: #0d1117;
  }
}

/* Edit diff colors */
:root[data-theme="dark"] .edit-diff .diff-old,
:root[data-theme="dark"] .diff-old {
  background: #3d1418;
}

:root[data-theme="dark"] .edit-diff .diff-new,
:root[data-theme="dark"] .diff-new {
  background: #1a2e1a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .edit-diff .diff-old,
  :root:not([data-theme="light"]) .diff-old {
    background: #3d1418;
  }
  :root:not([data-theme="light"]) .edit-diff .diff-new,
  :root:not([data-theme="light"]) .diff-new {
    background: #1a2e1a;
  }
}

/* Edit diff long styling */
:root[data-theme="dark"] .edit-diff-long .diff-old-section .diff-label {
  background: #3d1418;
}

:root[data-theme="dark"] .edit-diff-long .diff-new-section .diff-label {
  background: #1a2e1a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .edit-diff-long .diff-old-section .diff-label {
    background: #3d1418;
  }
  :root:not([data-theme="light"]) .edit-diff-long .diff-new-section .diff-label {
    background: #1a2e1a;
  }
}

/* Diff removed/added backgrounds */
:root[data-theme="dark"] .diff-removed {
  background: #3d1418;
}

:root[data-theme="dark"] .diff-added {
  background: #1a2e1a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .diff-removed {
    background: #3d1418;
  }
  :root:not([data-theme="light"]) .diff-added {
    background: #1a2e1a;
  }
}

/* Priority badges */
:root[data-theme="dark"] .priority-high {
  background: #5c2125;
  color: #f85149;
}

:root[data-theme="dark"] .priority-medium {
  background: #3d2e06;
  color: #d29922;
}

:root[data-theme="dark"] .priority-low {
  background: #1a2e1a;
  color: #3fb950;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .priority-high {
    background: #5c2125;
    color: #f85149;
  }
  :root:not([data-theme="light"]) .priority-medium {
    background: #3d2e06;
    color: #d29922;
  }
  :root:not([data-theme="light"]) .priority-low {
    background: #1a2e1a;
    color: #3fb950;
  }
}

/* Search modal */
:root[data-theme="dark"] .search-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"] .search-modal-content {
  background: var(--color-bg-secondary);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .search-result-role-user {
  color: #58a6ff;
}

:root[data-theme="dark"] .search-result-role-assistant {
  color: #8b949e;
}

:root[data-theme="dark"] mark,
:root[data-theme="dark"] .search-result mark {
  background: #634c00;
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .search-modal::backdrop {
    background: rgba(0, 0, 0, 0.7);
  }
  :root:not([data-theme="light"]) .search-modal-content {
    background: var(--color-bg-secondary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }
  :root:not([data-theme="light"]) .search-result-role-user {
    color: #58a6ff;
  }
  :root:not([data-theme="light"]) .search-result-role-assistant {
    color: #8b949e;
  }
  :root:not([data-theme="light"]) mark,
  :root:not([data-theme="light"]) .search-result mark {
    background: #634c00;
    color: #fff;
  }
}

/* Session card hover */
:root[data-theme="dark"] .session-card:hover {
  border-color: #484f58;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .session-card:hover {
    border-color: #484f58;
  }
}

/* WebFetch tool */
:root[data-theme="dark"] .tool-webfetch {
  background: #0a2540;
  border-color: #1a4060;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool-webfetch {
    background: #0a2540;
    border-color: #1a4060;
  }
}

/* TodoWrite tool */
:root[data-theme="dark"] .tool-todowrite {
  background: #21262d;
  border-color: #30363d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool-todowrite {
    background: #21262d;
    border-color: #30363d;
  }
}

/* Batch tool */
:root[data-theme="dark"] .tool-batch {
  background: #161b22;
  border-color: #30363d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool-batch {
    background: #161b22;
    border-color: #30363d;
  }
}

/* Edit replace all badge */
:root[data-theme="dark"] .edit-replace-all {
  background: #3d2e06;
  color: #d29922;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .edit-replace-all {
    background: #3d2e06;
    color: #d29922;
  }
}

/* Write badge success */
:root[data-theme="dark"] .write-badge.badge-success {
  background: #1a2e1a;
  color: #3fb950;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .write-badge.badge-success {
    background: #1a2e1a;
    color: #3fb950;
  }
}

/* Grep include badge */
:root[data-theme="dark"] .grep-include {
  background: #1a3a5c;
  color: #58a6ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .grep-include {
    background: #1a3a5c;
    color: #58a6ff;
  }
}

/* Badges */
:root[data-theme="dark"] .badge-success {
  background: #1a2e1a;
  color: #3fb950;
}

:root[data-theme="dark"] .badge-error {
  background: #3d1418;
  color: #f85149;
}

:root[data-theme="dark"] .badge-info {
  background: #1a3a5c;
  color: #58a6ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-success {
    background: #1a2e1a;
    color: #3fb950;
  }
  :root:not([data-theme="light"]) .badge-error {
    background: #3d1418;
    color: #f85149;
  }
  :root:not([data-theme="light"]) .badge-info {
    background: #1a3a5c;
    color: #58a6ff;
  }
}

/* Reasoning header color */
:root[data-theme="dark"] .reasoning-header {
  color: #d29922;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reasoning-header {
    color: #d29922;
  }
}

/* Tool input/output backgrounds */
:root[data-theme="dark"] .tool-input {
  background: rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .tool-output {
  background: rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool-input {
    background: rgba(0, 0, 0, 0.2);
  }
  :root:not([data-theme="light"]) .tool-output {
    background: rgba(0, 0, 0, 0.1);
  }
}

/* Message stats border */
:root[data-theme="dark"] .message-stats {
  border-top-color: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .message-stats {
    border-top-color: rgba(255, 255, 255, 0.1);
  }
}

/* Tool body border */
:root[data-theme="dark"] .tool-body {
  border-top-color: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool-body {
    border-top-color: rgba(255, 255, 255, 0.1);
  }
}

/* ============================================================================
   Theme Transitions
   ============================================================================ */

body,
.container,
.message,
.tool-call,
.session-card,
pre,
code,
.page-header,
.page-footer,
.search-modal-content,
.theme-toggle {
  transition: 
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================================
   Scrollbar Styling
   ============================================================================ */

/* Webkit scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ============================================================================
   Part Type Renderers - Phase 5
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Text Parts - Enhanced with Prism.js support
   ---------------------------------------------------------------------------- */

.part-text {
  line-height: 1.7;
}

.part-text p:last-child {
  margin-bottom: 0;
}

/* Prism.js code block container */
.part-text pre[class*="language-"] {
  margin: var(--spacing-md) 0;
  border-radius: var(--radius-md);
  position: relative;
}

/* Language label for code blocks */
.code-block-wrapper {
  position: relative;
  margin: var(--spacing-md) 0;
}

.code-block-wrapper .code-language {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-family: var(--font-sans);
  background: var(--color-bg-tertiary);
  border-bottom-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.code-block-wrapper pre {
  margin: 0;
}

/* ----------------------------------------------------------------------------
   Reasoning Parts - Enhanced with collapsible and timing
   ---------------------------------------------------------------------------- */

.reasoning {
  margin: var(--spacing-md) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.reasoning-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--reasoning-bg);
  border: 1px solid var(--reasoning-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  cursor: pointer;
  user-select: none;
}

.reasoning-header:hover {
  filter: brightness(0.98);
}

.reasoning-icon {
  font-size: var(--font-size-lg);
}

.reasoning-label {
  font-weight: 600;
  color: #e65100;
}

.reasoning-duration {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

.reasoning-toggle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: 2px 6px;
}

.reasoning-content {
  padding: var(--spacing-md);
  background: var(--reasoning-bg);
  border: 1px solid var(--reasoning-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  color: var(--color-text-secondary);
  font-style: italic;
  white-space: pre-wrap;
  max-height: 500px;
  overflow-y: auto;
}

.reasoning-content.collapsed {
  display: none;
}

/* ----------------------------------------------------------------------------
   File Parts - Enhanced with image preview
   ---------------------------------------------------------------------------- */

.part-file {
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: var(--spacing-md) 0;
}

.file-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.file-icon {
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-meta {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.file-mime {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}

.file-size {
  color: var(--color-text-muted);
}

.file-preview {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.file-preview img {
  max-width: 100%;
  max-height: 400px;
  border-radius: var(--radius-sm);
}

.file-preview-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-info);
}

.file-preview-link:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------------------------
   Snapshot Parts - Undo/Redo markers
   ---------------------------------------------------------------------------- */

.part-snapshot {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: linear-gradient(90deg, var(--color-bg-secondary), transparent);
  border-left: 3px solid var(--color-info);
  margin: var(--spacing-md) 0;
  font-size: var(--font-size-sm);
}

.snapshot-icon {
  font-size: var(--font-size-lg);
  color: var(--color-info);
}

.snapshot-label {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.snapshot-id {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------------------------
   Patch Parts - File changes checkpoint
   ---------------------------------------------------------------------------- */

.part-patch {
  margin: var(--spacing-md) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.patch-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-light);
}

.patch-icon {
  font-size: var(--font-size-lg);
  color: var(--color-success);
}

.patch-label {
  font-weight: 500;
  color: var(--color-text);
}

.patch-hash {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-left: auto;
}

.patch-file-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.patch-files {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}

.patch-file-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--color-border-light);
}

.patch-file-item:last-child {
  border-bottom: none;
}

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

.patch-file-icon {
  color: var(--color-success);
}

/* ----------------------------------------------------------------------------
   Agent Parts - Sub-agent invocations
   ---------------------------------------------------------------------------- */

.part-agent {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: linear-gradient(90deg, #e8f5e9, transparent);
  border-left: 3px solid var(--color-success);
  margin: var(--spacing-md) 0;
  font-size: var(--font-size-sm);
}

.agent-icon {
  font-size: var(--font-size-lg);
}

.agent-label {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.agent-name-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-success);
  color: white;
}

.agent-source {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: auto;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   Compaction Parts - Context compaction markers
   ---------------------------------------------------------------------------- */

.part-compaction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  margin: var(--spacing-lg) 0;
  position: relative;
}

.part-compaction::before,
.part-compaction::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

.compaction-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.compaction-icon {
  font-size: var(--font-size-sm);
}

.compaction-type {
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   Subtask Parts - Task metadata
   ---------------------------------------------------------------------------- */

.part-subtask {
  margin: var(--spacing-md) 0;
  border: 1px solid var(--tool-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--tool-bg);
}

.subtask-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(0, 0, 0, 0.02);
}

.subtask-icon {
  font-size: var(--font-size-lg);
}

.subtask-label {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.subtask-agent-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.subtask-description {
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subtask-body {
  border-top: 1px solid var(--color-border-light);
}

.subtask-command {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  font-size: var(--font-size-sm);
}

.subtask-command-label {
  color: var(--color-text-muted);
}

.subtask-prompt {
  padding: var(--spacing-md);
}

.subtask-prompt-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.subtask-prompt-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

/* ----------------------------------------------------------------------------
   Retry Parts - Error and retry markers
   ---------------------------------------------------------------------------- */

.part-retry {
  margin: var(--spacing-md) 0;
  border: 1px solid var(--error-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--error-bg);
}

.retry-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
}

.retry-icon {
  font-size: var(--font-size-lg);
  color: var(--color-warning);
}

.retry-label {
  font-weight: 600;
  color: var(--color-warning);
}

.retry-attempt {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-warning);
  color: white;
}

.retry-error {
  padding: var(--spacing-md);
  border-top: 1px solid var(--error-border);
}

.retry-error-name {
  font-weight: 600;
  color: var(--color-error);
  margin-bottom: var(--spacing-xs);
}

.retry-error-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
}

.retry-error-code {
  margin-top: var(--spacing-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* ----------------------------------------------------------------------------
   Generic Part Fallback
   ---------------------------------------------------------------------------- */

.part-generic {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  margin: var(--spacing-md) 0;
  font-size: var(--font-size-sm);
}

.part-type {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

/* ============================================================================
   Phase 5 - Dark Mode Overrides
   ============================================================================ */

/* Reasoning */
:root[data-theme="dark"] .reasoning-label {
  color: #d29922;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reasoning-label {
    color: #d29922;
  }
}

/* Agent part */
:root[data-theme="dark"] .part-agent {
  background: linear-gradient(90deg, #1a2e1a, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .part-agent {
    background: linear-gradient(90deg, #1a2e1a, transparent);
  }
}

/* Snapshot part */
:root[data-theme="dark"] .part-snapshot {
  background: linear-gradient(90deg, #1a3a5c, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .part-snapshot {
    background: linear-gradient(90deg, #1a3a5c, transparent);
  }
}

/* Subtask agent badges - same as task tool */
.subtask-agent-badge.agent-general {
  background: var(--color-info);
  color: white;
}

.subtask-agent-badge.agent-explore {
  background: #9c27b0;
  color: white;
}

.subtask-agent-badge.agent-reviewer {
  background: #ff9800;
  color: white;
}

.subtask-agent-badge.agent-docs {
  background: var(--color-success);
  color: white;
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
  .search-container,
  .search-modal,
  .pagination,
  .theme-toggle,
  .header-actions {
    display: none;
  }

  .container {
    max-width: 100%;
  }

  .tool-body.collapsed {
    display: block;
  }
}