/* Glitch effects - must come before tailwind import */
@import './styles/glitch-effects.css';

/* Performance mode — toggled via .perf-mode class on <html> */
@import './styles/perf-mode.css';

@import "tailwindcss";

@plugin "@tailwindcss/typography";

/* ===== Tailwind v4 Theme Configuration ===== */
@theme {
  /* Font families */
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Fira Code', Menlo, Consolas, monospace;

  /* Colors: surface */
  --color-surface-canvas: rgb(var(--surface-canvas-rgb));
  --color-surface-elevated: rgb(var(--surface-elevated-rgb));
  --color-surface-border: rgb(var(--surface-border-rgb));

  /* Colors: accent */
  --color-accent-primary: rgb(var(--accent-primary-rgb));
  --color-accent-secondary: rgb(var(--accent-secondary-rgb));
  --color-accent-tertiary: rgb(var(--accent-tertiary-rgb));

  /* Colors: status */
  --color-status-success: rgb(var(--status-success-rgb));
  --color-status-warning: rgb(var(--status-warning-rgb));

  /* Colors: ui text */
  --color-ui-primary: rgb(var(--ui-text-primary-rgb));
  --color-ui-secondary: rgb(var(--ui-text-secondary-rgb));
  --color-ui-muted: rgb(var(--ui-text-muted-rgb));

  /* Box shadows */
  --shadow-glow-primary: 0 0 10px rgba(var(--accent-primary-rgb), 0.5);
  --shadow-glow-secondary: 0 0 10px rgba(var(--accent-secondary-rgb), 0.5);
  --shadow-glow-tertiary: 0 0 10px rgba(var(--accent-tertiary-rgb), 0.5);
  --shadow-glow-success: 0 0 10px rgba(var(--status-success-rgb), 0.5);

  /* Background images */
  --background-image-grid-pattern: linear-gradient(rgba(var(--accent-primary-rgb), 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-primary-rgb), 0.1) 1px, transparent 1px);

  /* Animations */
  --animate-accent-pulse: accent-pulse 2s ease-in-out infinite;
  --animate-slide-in-right: slide-in-right 0.3s ease-out;
  --animate-slide-in-left: slide-in-left 0.3s ease-out;
  --animate-slide-down: slide-down 0.25s ease-out;
  --animate-slide-up: slide-up 0.2s ease-in;
  --animate-fade-in: fade-in 0.5s ease-out;
  --animate-fade-in-up: fade-in-up 0.5s ease-out;
  --animate-scale-in: scale-in 0.15s ease-out;

  /* Keyframes */
  @keyframes accent-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(var(--accent-primary-rgb), 0.5); }
    50% { box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.8); }
  }
  @keyframes slide-in-right {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
  }
  @keyframes slide-in-left {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
  }
  @keyframes slide-down {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }
  @keyframes slide-up {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100%); opacity: 0; }
  }
  @keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  @keyframes scale-in {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
}

/* ===== Root CSS Variables ===== */
/* Default :root vars live in <style id="theme-vars"> in index.html so they  */
/* are available to the CSS engine before this stylesheet loads. The inline   */
/* script in index.html swaps them with cached theme vars from localStorage, */
/* eliminating any flash between the default and selected theme.             */

@layer base {
  /* Kill browser-native form element styling (white background, inset shadow)
     so themed components never flash with user-agent defaults before React
     applies its inline styles. */
  input, textarea, select {
    background: transparent;
    box-shadow: none;
  }

  body {
    @apply bg-surface-canvas text-ui-primary;
    font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image:
      radial-gradient(circle at 20% 50%, rgba(var(--accent-primary-rgb), 0.03) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(var(--accent-secondary-rgb), 0.03) 0%, transparent 50%);
  }

  body.modal-open {
    overscroll-behavior: contain;
    overflow: hidden;
  }

  /* Monospace elements use JetBrains Mono */
  code, kbd, pre, samp {
    font-family: var(--font-mono);
  }
}


@layer utilities {
  /* Safe area inset for mobile devices with notch/home-indicator */
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .glow-border-primary {
    border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
    box-shadow: 0 0 10px rgba(var(--accent-primary-rgb), 0.2);
  }

  .glow-text-primary {
    color: rgb(var(--accent-primary-rgb));
    text-shadow: 0 0 10px rgba(var(--accent-primary-rgb), 0.5);
  }

  /* Mode-aware utilities */
  .border-mode {
    border-color: rgba(var(--mode-rgb), 0.3);
  }

  .border-mode-strong {
    border-color: rgba(var(--mode-rgb), 0.6);
  }

  .shadow-mode {
    box-shadow: 0 0 10px rgba(var(--mode-rgb), 0.3);
  }

  .bg-mode-subtle {
    background-color: rgba(var(--mode-rgb), 0.05);
  }
}

/* ===== Diff Container (@pierre/diffs) ===== */

.event-diff-container {
  @apply rounded-md overflow-hidden;
  background: rgba(var(--surface-elevated-rgb), 0.8);
  --diffs-font-size: 13px;
  --diffs-line-height: 20px;
}

.event-diff-container.diff-mobile {
  --diffs-font-size: 11px;
  --diffs-line-height: 16px;
}

.event-diff-container .diff-header {
  background: rgba(var(--accent-primary-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.3);
}

.event-diff-container .diff-line-added {
  background: rgba(var(--status-success-rgb), 0.1);
  border-left: 2px solid rgb(var(--status-success-rgb));
}

.event-diff-container .diff-line-removed {
  background: rgba(var(--accent-secondary-rgb), 0.1);
  border-left: 2px solid rgb(var(--accent-secondary-rgb));
}

.event-diff-container .diff-line-selected {
  background: rgba(var(--accent-primary-rgb), 0.2);
  box-shadow: inset 0 0 10px rgba(var(--accent-primary-rgb), 0.3);
}

/* ===== File Mention Links ===== */

.file-mention {
  @apply text-accent-primary transition-all duration-200;
  text-shadow: 0 0 5px rgba(var(--accent-primary-rgb), 0.3);
}

.file-mention:hover {
  @apply text-accent-secondary;
  text-shadow: 0 0 8px rgba(var(--accent-secondary-rgb), 0.5);
}

.file-mention:hover .file-mention-path {
  @apply underline decoration-accent-secondary;
}

.file-mention-path {
  @apply decoration-accent-primary underline-offset-2;
}

/* ===== Delegation Connector ===== */

.delegation-container {
  position: relative;
  padding-left: 16px;
}

.delegation-connector {
  position: absolute;
  left: 0;
  top: -8px;
  bottom: 0;
  width: 3px;
  background: var(--connector-color, rgb(var(--accent-tertiary-rgb)));
  border-radius: 2px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.delegation-connector.active {
  opacity: 1;
  animation: connector-pulse 1.5s ease-in-out infinite;
}

@keyframes connector-pulse {
  0%, 100% {
    opacity: 0.5;
    box-shadow: 0 0 4px var(--connector-color, rgb(var(--accent-tertiary-rgb)));
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 12px var(--connector-color, rgb(var(--accent-tertiary-rgb)));
  }
}

.delegation-container:hover .delegation-connector {
  opacity: 0.8;
}

.delegation-connector-active {
  animation: dash-flow 0.5s linear infinite;
}

@keyframes dash-flow {
  from { stroke-dashoffset: 8; }
  to { stroke-dashoffset: 0; }
}

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

.modal-backdrop {
  @apply fixed inset-0 z-50 flex items-center justify-center;
  background: rgba(var(--surface-canvas-rgb), 0.8);
  backdrop-filter: blur(4px);
}

.modal-content {
  @apply relative bg-surface-elevated border border-surface-border rounded-lg;
  box-shadow: 0 0 40px rgba(var(--accent-primary-rgb), 0.2);
  max-height: 85vh;
  max-width: 90vw;
}

/* ===== Accordion ===== */

.accordion-header {
  @apply flex items-center gap-3 px-4 py-2.5 text-left w-full;
  @apply transition-colors duration-200;
  @apply bg-surface-elevated/40 hover:bg-surface-elevated/60;
}

.accordion-header[data-expanded="true"] {
  @apply bg-surface-elevated/80;
}

.accordion-content {
  @apply overflow-hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}

.accordion-content[data-expanded="true"] {
  max-height: 500px;
}

/* ===== Tool Summary Card ===== */

.tool-summary-card {
  @apply flex items-center gap-2 px-3 py-1.5 rounded-md cursor-pointer;
  @apply transition-all duration-200;
  @apply bg-surface-elevated/60 border border-surface-border/50;
}

.tool-summary-card:hover {
  @apply bg-surface-elevated border-accent-primary/40;
  box-shadow: 0 0 10px rgba(var(--accent-primary-rgb), 0.15);
}

.tool-summary-card.delegate {
  border-left-width: 2px;
  border-left-color: rgb(var(--accent-tertiary-rgb));
}

.tool-summary-card.failed {
  border-left-width: 2px;
  border-left-color: rgb(var(--status-warning-rgb));
}

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

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(var(--surface-canvas-rgb), 0.35);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-primary-rgb), 0.3);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-primary-rgb), 0.5);
}

/* ===== Turn Card & Message Content ===== */

.turn-card {
  @apply mb-6;
}

.user-message {
  @apply mb-3;
}

.message-content {
  @apply text-sm leading-relaxed;
}

.message-content p:first-child { margin-top: 0; }
.message-content p:last-child { margin-bottom: 0; }

.message-content ul,
.message-content ol {
  @apply my-2;
}

.message-content li {
  @apply leading-relaxed;
}

.message-content pre {
  @apply my-3;
}

.message-content code {
  font-size: 0.9em;
}

.message-content h1,
.message-content h2,
.message-content h3 {
  @apply font-semibold;
}

.message-content h1:first-child,
.message-content h2:first-child,
.message-content h3:first-child {
  margin-top: 0;
}

/* ===== Session Timeline ===== */

.session-timeline {
  @apply sticky top-0 z-40 bg-surface-canvas/95;
  @apply border-b border-surface-border/50;
  @apply px-4 py-3;
  box-shadow: 0 2px 12px rgba(var(--surface-canvas-rgb), 0.6);
}

.timeline-track {
  @apply flex items-center gap-1 overflow-x-auto pb-2;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-primary-rgb), 0.3) transparent;
}

.timeline-turn-spacer {
  width: 12px;
  flex-shrink: 0;
}

.timeline-dot {
  @apply relative rounded-full flex-shrink-0;
  @apply transition-all duration-200;
  @apply border-0 p-0 bg-current;
  cursor: pointer;
  outline: none;
}

.timeline-dot-large  { width: 8px; height: 8px; }
.timeline-dot-medium { width: 6px; height: 6px; }
.timeline-dot-small  { width: 5px; height: 5px; }
.timeline-dot-tiny   { width: 3px; height: 3px; }

.timeline-dot-accent-primary   { color: rgb(var(--accent-primary-rgb)); }
.timeline-dot-accent-secondary { color: rgb(var(--accent-secondary-rgb)); }
.timeline-dot-accent-tertiary  { color: rgb(var(--accent-tertiary-rgb)); }
.timeline-dot-status-warning   { color: rgb(var(--status-warning-rgb)); }
.timeline-dot-status-success   { color: rgb(var(--status-success-rgb)); }

.timeline-dot:hover {
  transform: scale(1.4);
  filter: drop-shadow(0 0 4px currentColor);
}

.timeline-dot.active {
  transform: scale(1.5);
  animation: timeline-pulse 2s ease-in-out infinite;
}

@keyframes timeline-pulse {
  0%, 100% { filter: drop-shadow(0 0 3px currentColor); }
  50% { filter: drop-shadow(0 0 8px currentColor); }
}

.timeline-dot.hovered {
  transform: scale(1.2);
  filter: drop-shadow(0 0 3px currentColor);
}

.timeline-dot:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ===== Syntax Highlighter (Shiki) ===== */

.highlighted-code-container {
  background: rgb(var(--code-bg-rgb)) !important;
}

.highlighted-code-container pre {
  background: rgb(var(--code-bg-rgb)) !important;
  margin: 0;
  padding: 1rem;
}

.highlighted-code-container code {
  background: transparent !important;
}

/* ===== Pinned User Message ===== */

.pinned-user-bar-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0 8px;
  display: flex;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

.pinned-user-bar-container.pinned-visible {
  opacity: 1;
  pointer-events: auto;
}

.pinned-user-bar {
  width: 100%;
  max-width: 72rem;
  min-height: 44px;
  background: rgba(var(--surface-elevated-rgb), 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(var(--accent-secondary-rgb), 0.2);
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 12px;
}

.pinned-user-bar-text {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: rgb(var(--ui-text-secondary-rgb));
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pinned-user-bar-jump {
  font-size: 12px;
  color: rgb(var(--accent-secondary-rgb));
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.pinned-user-bar-jump:hover {
  color: rgb(var(--accent-primary-rgb));
}

/* ===== cmdk (Model Picker) ===== */

[cmdk-group][hidden] {
  display: none;
}

[cmdk-item][data-selected="true"] .cmdk-chevron {
  opacity: 1;
}

/* ===== Session Picker ===== */

.session-filter-input {
  position: relative;
}

.session-filter-input:focus {
  box-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.3);
}

.session-group-header {
  position: relative;
}

.session-group-header:hover {
  box-shadow: 0 0 5px rgba(var(--accent-primary-rgb), 0.1);
}

@keyframes session-card-entrance {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.session-card {
  position: relative;
  overflow: hidden;
}

.session-card:hover {
  box-shadow: 0 0 5px rgba(var(--accent-primary-rgb), 0.12);
}

.session-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--accent-primary-rgb)), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.session-card:hover::before {
  opacity: 1;
  animation: border-trace 1.5s ease-in-out infinite;
}

@keyframes border-trace {
  0% { left: -100%; }
  100% { left: 100%; }
}
