/**
 * Flow Timeline Pane CSS for Konui.
 * Styles for the side panel showing flow/kontask timeline.
 *
 * Extracted from flow-timeline-pane.ts for external CSS loading.
 * Source: /konnectvol/konui/src/views/flow-timeline-pane.ts
 */

/* ==========================================================
   PERSISTENT SIDE PANEL LAYOUT (Desktop)
   When timeline is open, main content shrinks to 75%, panel takes 25%
   ========================================================== */

/* Content wrapper - flex container for content-row + bottom container */
.content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - var(--nav-height, 44px));
  height: calc(100dvh - var(--nav-height, 44px)); /* Dynamic viewport - handles mobile browser chrome */
  margin-top: var(--nav-height, 44px);
  position: relative;
  overflow: hidden; /* Default: prevent overflow for console pages */
}
/* Mobile browsers: Use dvh for dynamic viewport that adapts to browser chrome.
   Note: We tried svh (small viewport) but it calculates incorrectly on initial
   page load on some Android browsers, causing the input area to be hidden.
   dvh (dynamic viewport) correctly reflects the visible area. */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  .content-wrapper {
    height: calc(100dvh - var(--nav-height, 44px));
  }
}
/* iOS Safari: dvh also works correctly here */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    .content-wrapper {
      height: calc(100dvh - var(--nav-height, 44px));
    }
  }
}
/* PWA standalone mode: Account for safe area insets (bottom system nav, notch).
   Android Chrome PWA: env(safe-area-inset-bottom) returns 0 but gesture nav overlays ~24px.
   Use max() to ensure minimum 24px bottom space on touch devices. */
@media (display-mode: standalone) {
  .content-wrapper {
    height: calc(100dvh - var(--nav-height, 44px) - env(safe-area-inset-bottom, 0px));
  }
}
@media (display-mode: standalone) and (hover: none) and (pointer: coarse) {
  .content-wrapper {
    height: calc(100dvh - var(--nav-height, 44px) - max(env(safe-area-inset-bottom, 0px), 24px));
  }
}

/* Content row - holds main content and timeline side-by-side */
.content-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1;
  min-height: 0; /* Allow shrinking */
  overflow-x: hidden; /* Prevent horizontal scroll leak from child content */
  position: relative;
}
/* Content row stays fixed height to allow independent pane scrolling */

/* Main content area - takes full width by default */
.main-content-area {
  flex: 1;
  min-width: 0;
  height: 100%;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Clip for transitions; internal <main> handles scroll */
  opacity: 1;
  transform: none;
}

/* Allow scroll in main-content-area when NOT on console page */
.main-content-area:not(:has(> .main-content-column > main > .console-section, > main > .console-section)):not(
  :has(> .main-content-column > main > .mesh-console-container, > main > .mesh-console-container)
) {
  overflow-y: auto; /* Independent scrolling for main content pane */
  overflow-x: hidden;
  height: 100%; /* Fill available space, scroll internally */
}

/* Main element inside content wrapper */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Default: let parent handle scroll */
  height: 100%;
}
/* Non-console pages: main content scrolls within main element */
main:not(:has(> .console-section)):not(:has(> .mesh-console-container)) {
  overflow-y: auto; /* Main content scrolls independently */
  overflow-x: hidden;
  /* Ensure main respects parent flex container width */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Override padding-top when inside content-wrapper (navbar offset handled by wrapper) */
.main-content-area main:not(:has(> .console-section)):not(:has(> .mesh-console-container)) {
  padding-top: 8px; /* Just content padding, not navbar offset */
}
/* Full height main for dashboard - now inside .main-content-area */
main:has(> .console-section) {
  padding: 0 !important;
  margin: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Console has its own internal scroll */
  box-sizing: border-box;
}

/* Console slides into drawer when preview opens */
body.preview-panel-open .main-content-area {
  flex: 0; /* CRITICAL: Remove flex growth so preview can take full space */
  min-width: 0;
  opacity: 0;
  transform: translateX(-100%);
  /* Note: display:none is added via JS after animation completes */
}

/* ==========================================================
   PREVIEW TAKEOVER MODE (Wide Screens)
   When preview is open, console collapses to thin bar on left,
   preview takes over main content area.
   ========================================================== */

/* Collapsed console bar when preview is open */
.console-collapsed-bar {
  width: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #1a1a2e 0%, #0d0d15 100%);
  border-right: 1px solid #2a2b3d;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  opacity: 0;
}

/* Collapsed bar expands when preview opens - animates in from left */
body.preview-panel-open .console-collapsed-bar {
  width: 48px;
  opacity: 1;
}

.console-collapsed-bar:hover {
  background: linear-gradient(180deg, #252536 0%, #15152a 100%);
}

.console-collapsed-bar-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
  color: #7f848e;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.console-collapsed-bar-icon {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: #3b82f6;
}

/* Preview state uses resting width - now handled via CSS variables in focus-aware section */
/* Old hardcoded preview-panel-open rules removed - consolidated into CSS custom properties */

/* ==========================================================
   CONSOLE BOTTOM CONTAINER
   Status bar and input area that spans full width of screen,
   positioned below the content-row (outside timeline panel).
   ========================================================== */
.console-bottom-container {
  flex-shrink: 0;
  width: 100%;
  background: #0d0d15;
  border-top: 1px solid #2a2b3d;
  z-index: 100; /* Above timeline panel content */
}

/* Flow Timeline Pane Container - persistent side panel */
.flow-timeline-pane {
  width: 0;
  min-width: 0;
  height: 100%;
  background: #141414; /* greatVibe brand --color-bg, matches console/navbar (was #1a1a2e until 2026-04-25) */
  transition: width 0.3s ease, min-width 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid #2a2b3d; /* Subtle border matching console theme */
  flex-shrink: 0; /* Don't shrink - maintain width, let main-content-area shrink instead */
  box-shadow: none; /* Remove shadow for unified appearance */
}

/* ==========================================================
   FOCUS-AWARE TIMELINE WIDTH
   Timeline has 3 states:
   - ACTIVE (25%): Timeline is being scrolled or has focus
   - RESTING (280px): Timeline visible but not in use (default)
   - PREVIEW (280px): Kontask preview panel is open (always compact)

   Tunable parameters are defined as CSS custom properties.
   ========================================================== */

/* Tunable width parameters - CSS custom properties for easy tweaking */
:root {
  /* Active state (scrolling/focused) - percentage-based, flexible */
  --timeline-width-active: 25%;
  --timeline-min-width-active: 320px;
  --timeline-max-width-active: 400px;

  /* Resting state (visible but idle) - fixed pixels, compact */
  --timeline-width-resting: 280px;
  --timeline-min-width-resting: 240px;
  --timeline-max-width-resting: 320px;

  /* Animation timing */
  --timeline-transition-duration: 0.25s;
  --timeline-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* When timeline is open - DEFAULT is RESTING state (compact, saves space) */
body.timeline-panel-open .flow-timeline-pane {
  width: var(--timeline-width-resting);
  min-width: var(--timeline-min-width-resting);
  max-width: var(--timeline-max-width-resting);
  transition: width var(--timeline-transition-duration) var(--timeline-transition-easing), min-width var(--timeline-transition-duration) var(--timeline-transition-easing), max-width var(--timeline-transition-duration) var(--timeline-transition-easing);
}

/* ACTIVE state: Timeline being scrolled or focused - expands to full width */
body.timeline-panel-open.timeline-active .flow-timeline-pane {
  width: var(--timeline-width-active);
  min-width: var(--timeline-min-width-active);
  max-width: var(--timeline-max-width-active);
}

/* PREVIEW state always uses resting width (handled by existing preview-panel-open rules) */
/* Preview takes precedence over active - timeline stays compact when preview is open */
body.timeline-panel-open.preview-panel-open .flow-timeline-pane {
  width: var(--timeline-width-resting);
  min-width: var(--timeline-min-width-resting);
  max-width: var(--timeline-max-width-resting);
}

/* Constrain max-width on very wide screens (only in active state) */
@media (min-width: 1600px) {
  body.timeline-panel-open.timeline-active .flow-timeline-pane {
    max-width: var(--timeline-max-width-active);
  }
}

/* Timeline content - only visible when open */
.flow-timeline-pane .flow-timeline-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease 0.1s, visibility 0.2s ease 0.1s;
  position: relative; /* For absolute positioned preview panel */
  overflow: hidden; /* Contain the sliding preview */
}

body.timeline-panel-open .flow-timeline-pane .flow-timeline-inner {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================
   MOBILE OVERLAY MODE
   On mobile phones, use full-width overlay instead of side panel.
   Breakpoint lowered to 600px to support foldable devices like
   Samsung Z Fold which have wide inner displays (1812px+).
   ========================================================== */
@media (max-width: 600px) {
  /* On narrow phones, use FULL-WIDTH overlay instead of partial panel */
  .flow-timeline-pane {
    position: fixed;
    top: var(--nav-height, 44px);
    right: 0;
    width: 0;
    /* Account for bottom container (status bar + input ~140px) */
    height: calc(100vh - var(--nav-height, 44px) - var(--bottom-container-height, 140px));
    z-index: 999;
  }

  body.timeline-panel-open .flow-timeline-pane {
    width: 100%; /* Full width on narrow screens */
    min-width: 0;
    max-width: none;
  }

  /* Show overlay on narrow phones - starts BELOW navbar so button stays clickable */
  .flow-timeline-overlay {
    position: fixed;
    top: var(
      --nav-height,
      44px
    ); /* Start below navbar so button stays accessible */
    left: 0;
    right: 0;
    bottom: var(--bottom-container-height, 140px);
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 98; /* Below navbar (100) so button always works */
  }

  body.timeline-panel-open .flow-timeline-overlay {
    opacity: 1;
    visibility: visible;
  }

  /* Kontask preview also full-width on narrow screens */
  .kontask-preview-container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* Base overlay style - hidden by default on all screens */
.flow-timeline-overlay {
  display: none;
  pointer-events: none;
}

/* Wide screens (601px+): hide overlay since we use persistent panel */
@media (min-width: 601px) {
  .flow-timeline-overlay {
    display: none !important;
  }
}

/* Small tablets / large phones / foldables (601px - 900px): compact panel
   Apply focus-aware widths with responsive adjustments */
@media (min-width: 601px) and (max-width: 900px) {
  /* Override CSS variables for smaller screens */
  :root {
    --timeline-width-active: 40%;
    --timeline-min-width-active: 280px;
    --timeline-max-width-active: 360px;
    --timeline-width-resting: 220px;
    --timeline-min-width-resting: 180px;
    --timeline-max-width-resting: 260px;
  }
}

/* Tablets (901px - 1200px): medium panel */
@media (min-width: 901px) and (max-width: 1200px) {
  :root {
    --timeline-width-active: 35%;
    --timeline-min-width-active: 300px;
    --timeline-max-width-active: 420px;
    --timeline-width-resting: 260px;
    --timeline-min-width-resting: 220px;
    --timeline-max-width-resting: 300px;
  }
}

/* Integrated activity header and organization-first scope picker. */
.flow-timeline-header-minimal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 6px;
  background: transparent;
  border: 0;
  flex-shrink: 0;
}
.flow-timeline-header-title { display: inline-flex; align-items: center; gap: 9px; color: #f2f0e9; font: 600 16px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.025em; }
.flow-timeline-header-title svg { width: 21px; height: 21px; color: #e4bd6f; }
.flow-timeline-header-actions { display: flex; align-items: center; gap: 2px; }

/* Legacy Pane Header - kept for backwards compatibility */
.flow-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #252526;
  border-bottom: 1px solid #3c3c3c;
}

.flow-timeline-title {
  font-family: sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.flow-timeline-title .timeline-icon {
  font-size: 1.1rem;
}

.flow-timeline-close {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: #8c8d8a;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
  transition: background .16s ease, color .16s ease;
}
.flow-timeline-close svg { width: 17px; height: 17px; pointer-events: none; }
.flow-timeline-close:hover { background: #ffffff0a; color: #f1e4c4; }
.flow-timeline-close:focus-visible,
.flow-timeline-scope-controls button:focus-visible,
.timeline-scope-wheel:focus-visible,
.timeline-scope-search:focus-within,
.flow-timeline-load-more:focus-visible { outline: 2px solid #e4bd6f; outline-offset: 3px; }
.flow-timeline-scope-controls { position: relative; flex-shrink: 0; margin: 0 16px 4px; padding: 10px 0 14px; border-bottom: 1px solid #ffffff0c; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; z-index: 5; }
.flow-timeline-scope-controls button { font-family: inherit; cursor: pointer; }
.timeline-scope-levels { display: flex; width: fit-content; max-width: 100%; gap: 2px; padding: 3px; background: #ffffff05; border: 1px solid #ffffff06; border-radius: 24px; }
.timeline-scope-levels [role="tab"] { min-width: 54px; min-height: 30px; padding: 5px 14px; background: transparent; border: 0; border-radius: 20px; color: #999b98; font-size: 11px; font-weight: 500; line-height: 1.2; transition: color .15s ease, background .15s ease; }
.timeline-scope-levels [role="tab"]:hover { color: #ece8dc; }
.timeline-scope-levels [aria-selected="true"] { color: #edcf93; background: #e4bd6f16; box-shadow: inset 0 0 0 1px #e4bd6f13; }
.timeline-scope-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0 0; border: 0; background: transparent; text-align: left; color: #f1eee6; }
.timeline-scope-copy { min-width: 0; display: grid; gap: 5px; }
#timeline-scope-name { font-size: 20px; line-height: 1.25; font-weight: 550; letter-spacing: -.035em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#timeline-scope-context { font-size: 10px; color: #8c8e8b; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-scope-chevron { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border: 1px solid #ffffff0e; border-radius: 50%; color: #c1b699; transition: background .16s ease, transform .16s ease; }
.timeline-scope-chevron svg { width: 18px; height: 18px; }
.timeline-scope-trigger:hover .timeline-scope-chevron { background: #e4bd6f12; }
.timeline-scope-trigger[aria-expanded="true"] .timeline-scope-chevron { transform: rotate(180deg); background: #e4bd6f12; }
.timeline-scope-picker { position: absolute; z-index: 20; left: -4px; right: -4px; top: calc(100% - 3px); padding: 15px; background: #1c1c1a; border: 1px solid #cbb98930; border-radius: 18px; box-shadow: 0 18px 50px #00000080, 0 1px 0 #ffffff06 inset; }
.timeline-scope-picker[hidden], .timeline-scope-native[hidden] { display: none !important; }
.timeline-scope-picker-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; color: #e4dece; font-size: 12px; font-weight: 500; }
#timeline-scope-cancel { border: 0; background: none; color: #aaa99f; font-size: 11px; min-height: 32px; padding: 4px 0 4px 12px; }
.timeline-scope-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #ffffff0d; border-radius: 10px; background: #101110; }
.timeline-scope-search svg { width: 16px; height: 16px; flex-shrink: 0; color: #8b8e82; }
.timeline-scope-search input { display: block; min-width: 0; width: 100%; height: 38px; padding: 0; border: 0; outline: none; background: transparent; color: #ece9df; font: 400 16px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.timeline-scope-search input::placeholder { font-size: 12px; color: #74786f; }
.timeline-scope-wheel-wrap { position: relative; margin: 8px -4px; isolation: isolate; }
.timeline-scope-wheel-wrap::before { content: ""; position: absolute; pointer-events: none; z-index: -1; left: 2px; right: 2px; top: 50%; height: 44px; transform: translateY(-50%); background: #e4bd6f0b; border-top: 1px solid #e4bd6f2a; border-bottom: 1px solid #e4bd6f2a; border-radius: 8px; }
.timeline-scope-wheel { height: 176px; overflow-y: auto; overflow-x: hidden; padding: 66px 2px; box-sizing: border-box; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); }
.timeline-scope-wheel::-webkit-scrollbar { display: none; }
.timeline-scope-wheel [role="option"] { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 44px; height: 44px; width: 100%; padding: 3px 12px; box-sizing: border-box; scroll-snap-align: center; background: transparent; border: 0; color: #989b92; text-align: center; font-size: 14px; font-weight: 400; line-height: 1.25; cursor: pointer; overflow: hidden; }
.timeline-scope-wheel [role="option"] > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-scope-wheel .timeline-scope-option-context { color: #969b8f; font-size: 10px; font-weight: 400; line-height: 1.4; }
.timeline-scope-wheel [role="option"] small { color: #8a8d82; font-size: 9px; }
.timeline-scope-wheel [aria-selected="true"] { color: #f1d398; font-weight: 600; }
.timeline-scope-empty { color: #999c92; font-size: 12px; text-align: center; }
.timeline-scope-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.timeline-scope-picker-footer > span { font-size: 9px; color: #8f9288; }
#timeline-scope-apply { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 12px; background: #e9c783; border: 0; border-radius: 20px; color: #292417; font-size: 11px; font-weight: 600; }
#timeline-scope-apply svg { width: 15px; height: 15px; }
#timeline-scope-apply:disabled { opacity: .4; cursor: default; }
.flow-timeline-load-more-wrap { padding: 8px 16px 14px; }
.flow-timeline-load-more { width: 100%; display: none; min-height: 36px; padding: 8px 14px; background: #ffffff04; border: 1px solid #ffffff09; border-radius: 22px; color: #b8b8af; font: 500 11px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; transition: color .16s ease, background .16s ease; }
.flow-timeline-load-more:hover:not(:disabled) { color: #e9cc91; background: #e4bd6f09; }
.flow-timeline-load-more:disabled { cursor: wait; opacity: .6; }
@media (hover: none) {
  .flow-timeline-close { width: 40px; height: 40px; }
  .timeline-scope-levels [role="tab"] { min-height: 36px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .timeline-scope-picker { top: 2px; max-height: calc(100dvh - var(--bottom-container-height, 140px) - 120px); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 600px) and (max-height: 550px) {
  .timeline-scope-wheel { height: 132px; padding-top: 44px; padding-bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-timeline-close, .timeline-scope-chevron, .timeline-scope-levels [role="tab"], .flow-timeline-load-more { transition: none; }
}

/* Time Range Selector */
.flow-timeline-range {
  display: flex;
  gap: 4px;
  padding: 10px 16px;
  background: #252526;
  border-bottom: 1px solid #3c3c3c;
}

.range-btn {
  flex: 1;
  padding: 6px 8px;
  background: #2d2d2d;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #888;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.range-btn:hover {
  background: #3c3c3c;
  color: #ccc;
}

.range-btn.active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: #3b82f6;
  color: #fff;
  font-weight: 500;
}

/* Timeline Content */
.flow-timeline-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-top: 12px; /* No header row, use compact padding */
}

.flow-timeline-content::-webkit-scrollbar {
  width: 6px;
}

.flow-timeline-content::-webkit-scrollbar-track {
  background: #1e1e1e;
}

.flow-timeline-content::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 3px;
}

/* Timeline Line */
.timeline-container {
  position: relative;
  padding-left: 24px;
}

.timeline-line {
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 50%, #22c55e 100%);
  border-radius: 1px;
}

/* Timeline Item */
.timeline-item {
  position: relative;
  margin-bottom: 16px;
  animation: timeline-fade-in 0.15s ease;
}

.timeline-item.new-item {
  animation: timeline-slide-in 0.2s ease, timeline-announce-glow 10s ease-out;
  /* Allow glow effects to show beyond item bounds */
  overflow: visible;
  z-index: 10; /* Ensure glow renders above other items */
}

@keyframes timeline-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes timeline-slide-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glow flash to announce new items - 10 seconds (extended from 2.5s for visibility) */
@keyframes timeline-announce-glow {
  0% {
    filter: drop-shadow(0 0 0 transparent);
  }
  15% {
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.9)) drop-shadow(0 0 35px rgba(139, 92, 246, 0.6));
  }
  40% {
    filter: drop-shadow(0 0 15px rgba(34, 197, 94, 0.7)) drop-shadow(0 0 25px rgba(59, 130, 246, 0.4));
  }
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }
}

/* New item card gets an inner glow for extra emphasis */
.timeline-item.new-item .timeline-card {
  overflow: visible; /* Allow glow to show beyond card bounds */
  box-shadow: inset 0 0 30px rgba(59, 130, 246, 0.3), 0 0 20px rgba(59, 130, 246, 0.7), 0 0 40px rgba(59, 130, 246, 0.4);
  border-color: rgba(59, 130, 246, 0.8);
  animation: new-card-glow 10s ease-out forwards;
}

@keyframes new-card-glow {
  0% {
    box-shadow: inset 0 0 30px rgba(59, 130, 246, 0.3), 0 0 20px rgba(59, 130, 246, 0.7), 0 0 40px rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.8);
  }
  15% {
    box-shadow: inset 0 0 35px rgba(139, 92, 246, 0.4), 0 0 25px rgba(139, 92, 246, 0.8), 0 0 50px rgba(139, 92, 246, 0.5);
    border-color: rgba(139, 92, 246, 0.9);
  }
  40% {
    box-shadow: inset 0 0 25px rgba(34, 197, 94, 0.25), 0 0 15px rgba(34, 197, 94, 0.5), 0 0 30px rgba(59, 130, 246, 0.3);
    border-color: rgba(34, 197, 94, 0.6);
  }
  100% {
    box-shadow: none;
    border-color: inherit;
  }
}

/* Dot pulses brightly on new items */
.timeline-item.new-item .timeline-dot {
  animation: new-dot-pulse 0.8s ease-out;
}

@keyframes new-dot-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px #1e1e1e;
    transform: scale(1);
  }
  20% {
    box-shadow: 0 0 0 3px #1e1e1e, 0 0 15px currentColor, 0 0 30px currentColor;
    transform: scale(1.4);
  }
  50% {
    box-shadow: 0 0 0 3px #1e1e1e, 0 0 8px currentColor;
    transform: scale(1.1);
  }
}

.timeline-dot {
  position: absolute;
  left: -21px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px #1e1e1e;
}

/* Topic-based dot colors (Lifecycle Topics - WHAT) */
.timeline-dot.topic-requirements {
  background: #ef4444;
} /* Red */
.timeline-dot.topic-planning {
  background: #f97316;
} /* Orange */
.timeline-dot.topic-design {
  background: #a855f7;
} /* Purple */
.timeline-dot.topic-schema {
  background: #3b82f6;
} /* Blue */
.timeline-dot.topic-prototype {
  background: #f97316;
} /* Orange */
.timeline-dot.topic-feature {
  background: #22c55e;
} /* Green */
.timeline-dot.topic-bugfix {
  background: #eab308;
} /* Yellow */
.timeline-dot.topic-testing {
  background: #8b5cf6;
} /* Purple */
.timeline-dot.topic-review {
  background: #ec4899;
} /* Pink */
.timeline-dot.topic-standards {
  background: #eab308;
} /* Yellow */
.timeline-dot.topic-docs {
  background: #8b5cf6;
} /* Purple */
.timeline-dot.topic-roadmap {
  background: #3b82f6;
} /* Blue */

/* Domain-based dot colors (Tech Domains - WHERE) */
.timeline-dot.domain-frontend {
  background: #3b82f6;
} /* Blue */
.timeline-dot.domain-backend {
  background: #8b5cf6;
} /* Purple */
.timeline-dot.domain-database {
  background: #f97316;
} /* Orange */
.timeline-dot.domain-security {
  background: #ef4444;
} /* Red */
.timeline-dot.domain-identity {
  background: #8b5cf6;
} /* Purple */
.timeline-dot.domain-network {
  background: #06b6d4;
} /* Cyan */
.timeline-dot.domain-monitoring {
  background: #ef4444;
} /* Red */
.timeline-dot.domain-integration {
  background: #a855f7;
} /* Purple */
.timeline-dot.domain-platform {
  background: #f97316;
} /* Orange */
.timeline-dot.domain-support {
  background: #22c55e;
} /* Green */
.timeline-dot.domain-tooling {
  background: #8b5cf6;
} /* Purple */

/* Fallback dot color */
.timeline-dot.topic-general {
  background: #64748b;
} /* Gray */

/* Timeline Card */
.timeline-card {
  background: #2d2d2d;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 3px solid #22c55e;
  min-width: 0; /* Allow flex item to shrink below content size */
  overflow: hidden;
}

.timeline-card:hover {
  background: #363636;
  transform: translateX(2px);
}

/* ==========================================================
   NEON SELECTION EFFECT
   Temporary selection state with subtle neon glow that feels
   distinctive but natural. Uses CSS custom properties for
   dynamic color based on kontask topic/domain.
   ========================================================== */

/* Selected timeline card - neon glow selection */
.timeline-card.selected {
  /* Keep the left border as-is (topic/domain color) */
  border-left-width: 3px;
  /* Subtle background tint based on selection */
  background: linear-gradient(
    135deg,
    rgba(var(--selection-rgb, 0, 255, 128), 0.08) 0%,
    rgba(var(--selection-rgb, 0, 255, 128), 0.02) 100%
  );
  /* Gentle outer glow - NOT a full border */
  box-shadow: 0 0 20px rgba(var(--selection-rgb, 0, 255, 128), 0.25), 0 0 40px rgba(var(--selection-rgb, 0, 255, 128), 0.1);
  /* Subtle lift */
  transform: translateX(2px) translateY(-1px);
  /* Smooth transition */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-card.selected:hover {
  background: linear-gradient(
    135deg,
    rgba(var(--selection-rgb, 0, 255, 128), 0.12) 0%,
    rgba(var(--selection-rgb, 0, 255, 128), 0.04) 100%
  );
  box-shadow: 0 0 24px rgba(var(--selection-rgb, 0, 255, 128), 0.3), 0 0 48px rgba(var(--selection-rgb, 0, 255, 128), 0.15);
}

/* Selected card dot gets a subtle pulse glow */
.timeline-item.selected .timeline-dot {
  box-shadow: 0 0 0 3px #1e1e1e, 0 0 8px currentColor, 0 0 16px currentColor;
  transform: scale(1.15);
  animation: selection-pulse 1.2s ease-in-out infinite;
}

@keyframes selection-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px #1e1e1e, 0 0 8px currentColor, 0 0 16px currentColor;
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 3px #1e1e1e, 0 0 12px currentColor, 0 0 24px currentColor;
    opacity: 0.9;
  }
}

/* Selection color variants (set via JS based on topic/domain) */
.timeline-card.selected.selection-green {
  --selection-rgb: 0, 255, 128;
}
.timeline-card.selected.selection-blue {
  --selection-rgb: 0, 200, 255;
}
.timeline-card.selected.selection-purple {
  --selection-rgb: 180, 100, 255;
}
.timeline-card.selected.selection-orange {
  --selection-rgb: 255, 160, 50;
}
.timeline-card.selected.selection-pink {
  --selection-rgb: 255, 100, 180;
}
.timeline-card.selected.selection-yellow {
  --selection-rgb: 255, 220, 50;
}
.timeline-card.selected.selection-cyan {
  --selection-rgb: 0, 220, 220;
}
.timeline-card.selected.selection-red {
  --selection-rgb: 255, 80, 80;
}

/* Border colors by topic (Lifecycle Topics - WHAT) */
.timeline-card.topic-requirements {
  border-left-color: #ef4444;
}
.timeline-card.topic-planning {
  border-left-color: #f97316;
}
.timeline-card.topic-design {
  border-left-color: #a855f7;
}
.timeline-card.topic-schema {
  border-left-color: #3b82f6;
}
.timeline-card.topic-prototype {
  border-left-color: #f97316;
}
.timeline-card.topic-feature {
  border-left-color: #22c55e;
}
.timeline-card.topic-bugfix {
  border-left-color: #eab308;
}
.timeline-card.topic-testing {
  border-left-color: #8b5cf6;
}
.timeline-card.topic-review {
  border-left-color: #ec4899;
}
.timeline-card.topic-standards {
  border-left-color: #eab308;
}
.timeline-card.topic-docs {
  border-left-color: #8b5cf6;
}
.timeline-card.topic-roadmap {
  border-left-color: #3b82f6;
}

/* Border colors by domain (Tech Domains - WHERE) */
.timeline-card.domain-frontend {
  border-left-color: #3b82f6;
}
.timeline-card.domain-backend {
  border-left-color: #8b5cf6;
}
.timeline-card.domain-database {
  border-left-color: #f97316;
}
.timeline-card.domain-security {
  border-left-color: #ef4444;
}
.timeline-card.domain-identity {
  border-left-color: #8b5cf6;
}
.timeline-card.domain-network {
  border-left-color: #06b6d4;
}
.timeline-card.domain-monitoring {
  border-left-color: #ef4444;
}
.timeline-card.domain-integration {
  border-left-color: #a855f7;
}
.timeline-card.domain-platform {
  border-left-color: #f97316;
}
.timeline-card.domain-support {
  border-left-color: #22c55e;
}
.timeline-card.domain-tooling {
  border-left-color: #8b5cf6;
}

/* Fallback border color */
.timeline-card.topic-general {
  border-left-color: #64748b;
}

.timeline-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 4px;
}

.timeline-card-time {
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
}

/* Time colors by topic (Lifecycle Topics - WHAT) */
.timeline-card.topic-requirements .timeline-card-time {
  color: #ef4444;
}
.timeline-card.topic-planning .timeline-card-time {
  color: #f97316;
}
.timeline-card.topic-design .timeline-card-time {
  color: #a855f7;
}
.timeline-card.topic-schema .timeline-card-time {
  color: #3b82f6;
}
.timeline-card.topic-prototype .timeline-card-time {
  color: #f97316;
}
.timeline-card.topic-feature .timeline-card-time {
  color: #22c55e;
}
.timeline-card.topic-bugfix .timeline-card-time {
  color: #eab308;
}
.timeline-card.topic-testing .timeline-card-time {
  color: #8b5cf6;
}
.timeline-card.topic-review .timeline-card-time {
  color: #ec4899;
}
.timeline-card.topic-standards .timeline-card-time {
  color: #eab308;
}
.timeline-card.topic-docs .timeline-card-time {
  color: #8b5cf6;
}
.timeline-card.topic-roadmap .timeline-card-time {
  color: #3b82f6;
}

/* Time colors by domain (Tech Domains - WHERE) */
.timeline-card.domain-frontend .timeline-card-time {
  color: #3b82f6;
}
.timeline-card.domain-backend .timeline-card-time {
  color: #8b5cf6;
}
.timeline-card.domain-database .timeline-card-time {
  color: #f97316;
}
.timeline-card.domain-security .timeline-card-time {
  color: #ef4444;
}
.timeline-card.domain-identity .timeline-card-time {
  color: #8b5cf6;
}
.timeline-card.domain-network .timeline-card-time {
  color: #06b6d4;
}
.timeline-card.domain-monitoring .timeline-card-time {
  color: #ef4444;
}
.timeline-card.domain-integration .timeline-card-time {
  color: #a855f7;
}
.timeline-card.domain-platform .timeline-card-time {
  color: #f97316;
}
.timeline-card.domain-support .timeline-card-time {
  color: #22c55e;
}
.timeline-card.domain-tooling .timeline-card-time {
  color: #8b5cf6;
}

/* Fallback time color */
.timeline-card.topic-general .timeline-card-time {
  color: #64748b;
}

/* Right-side badge container */
.timeline-card-badge {
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.timeline-card-badge-icon {
  font-size: 0.85rem;
}

.timeline-card-badge-text {
  color: #7f848e;
}

/* Badge type colors */
.timeline-card-badge.badge-gravity {
  color: #a78bfa;
}
.timeline-card-badge.badge-gravity .timeline-card-badge-text {
  color: #a78bfa;
}

.timeline-card-badge.badge-cleanup {
  color: #f97316;
}
.timeline-card-badge.badge-cleanup .timeline-card-badge-text {
  color: #f97316;
}

.timeline-card-badge.badge-investigation {
  color: #22d3ee;
}
.timeline-card-badge.badge-investigation .timeline-card-badge-text {
  color: #22d3ee;
}

.timeline-card-badge.badge-test {
  color: #3b82f6;
}
.timeline-card-badge.badge-test .timeline-card-badge-text {
  color: #3b82f6;
}

.timeline-card-badge.badge-config {
  color: #7f848e;
}
.timeline-card-badge.badge-config .timeline-card-badge-text {
  color: #7f848e;
}

.timeline-card-badge.badge-response {
  color: #8b5cf6;
}
.timeline-card-badge.badge-response .timeline-card-badge-text {
  color: #8b5cf6;
}

.timeline-card-badge.badge-feature {
  color: #22c55e;
}
.timeline-card-badge.badge-feature .timeline-card-badge-text {
  color: #22c55e;
}

.timeline-card-badge.badge-fix {
  color: #ef4444;
}
.timeline-card-badge.badge-fix .timeline-card-badge-text {
  color: #ef4444;
}

.timeline-card-badge.badge-refactor {
  color: #eab308;
}
.timeline-card-badge.badge-refactor .timeline-card-badge-text {
  color: #eab308;
}

.timeline-card-badge.badge-docs {
  color: #60a5fa;
}
.timeline-card-badge.badge-docs .timeline-card-badge-text {
  color: #60a5fa;
}

/* Phase 6: Triggered badge - amber/gold to indicate user action spawned work */
.timeline-card-badge.badge-triggered {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 4px;
}
.timeline-card-badge.badge-triggered .timeline-card-badge-text {
  color: #f59e0b;
  font-weight: 600;
}
.timeline-card-badge.badge-triggered:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.5);
}

/* Legacy gravity style for backwards compatibility */
.timeline-card-gravity {
  font-size: 0.7rem;
  color: #7f848e;
  display: flex;
  align-items: center;
  gap: 3px;
}

.timeline-card-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 4px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.timeline-card-description {
  font-size: 0.75rem;
  color: #7f848e;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Summary Section */
.flow-timeline-summary {
  padding: 12px 16px;
  background: #252526;
  border-top: 1px solid #3c3c3c;
}

.summary-title {
  font-size: 0.75rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.summary-stat {
  text-align: center;
}

.summary-stat-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.summary-stat-label {
  font-size: 0.65rem;
  color: #7f848e;
  margin-top: 2px;
}

/* Topics Active Section */
.flow-timeline-topics {
  padding: 10px 16px;
  background: #252526;
  border-top: 1px solid #3c3c3c;
}

.topics-title {
  font-size: 0.75rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.topics-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Solid colored topic badges matching reference image */
.topic-badge {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Lifecycle Topics (WHAT) - solid colors */
.topic-badge.topic-requirements {
  background: #ef4444;
} /* Red */
.topic-badge.topic-planning {
  background: #f97316;
} /* Orange */
.topic-badge.topic-design {
  background: #a855f7;
} /* Purple */
.topic-badge.topic-schema {
  background: #3b82f6;
} /* Blue */
.topic-badge.topic-prototype {
  background: #f97316;
} /* Orange */
.topic-badge.topic-feature {
  background: #22c55e;
} /* Green */
.topic-badge.topic-bugfix {
  background: #eab308;
} /* Yellow */
.topic-badge.topic-testing {
  background: #8b5cf6;
} /* Purple */
.topic-badge.topic-review {
  background: #ec4899;
} /* Pink */
.topic-badge.topic-standards {
  background: #eab308;
} /* Yellow */
.topic-badge.topic-docs {
  background: #8b5cf6;
} /* Purple */
.topic-badge.topic-roadmap {
  background: #3b82f6;
} /* Blue */

/* Tech Domains (WHERE) - solid colors */
.topic-badge.domain-frontend {
  background: #3b82f6;
} /* Blue */
.topic-badge.domain-backend {
  background: #8b5cf6;
} /* Purple */
.topic-badge.domain-database {
  background: #f97316;
} /* Orange */
.topic-badge.domain-security {
  background: #ef4444;
} /* Red */
.topic-badge.domain-identity {
  background: #8b5cf6;
} /* Purple */
.topic-badge.domain-network {
  background: #06b6d4;
} /* Cyan */
.topic-badge.domain-monitoring {
  background: #ef4444;
} /* Red */
.topic-badge.domain-integration {
  background: #a855f7;
} /* Purple */
.topic-badge.domain-platform {
  background: #f97316;
} /* Orange */
.topic-badge.domain-support {
  background: #22c55e;
} /* Green */
.topic-badge.domain-tooling {
  background: #8b5cf6;
} /* Purple */

/* Fallback/default badge */
.topic-badge.topic-general {
  background: #64748b;
} /* Gray */

/* Legacy named badges for backwards compatibility */
.topic-badge.topic-architecture {
  background: #a855f7;
}
.topic-badge.topic-performance {
  background: #f97316;
}
.topic-badge.topic-api {
  background: #22c55e;
}
.topic-badge.topic-ui {
  background: #ec4899;
}

/* Empty State */
.timeline-empty {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.timeline-empty-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.timeline-empty-text {
  font-size: 0.85rem;
}

/* ==========================================================
   THREAD GROUPING
   Visual grouping for kontasks that are part of a debugging thread
   (linked via 'continues' edges)
   ========================================================== */

/* Thread container - groups kontasks in a thread */
.timeline-thread {
  position: relative;
  margin-bottom: 12px;
  padding-left: 8px;
  border-left: 2px solid #f97316; /* Orange for thread indicator */
}

/* Thread header - shows thread info */
.timeline-thread-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 4px;
  background: linear-gradient(
    135deg,
    rgba(249, 115, 22, 0.15),
    rgba(249, 115, 22, 0.05)
  );
  border-radius: 4px;
  font-size: 0.75rem;
  color: #f97316;
  cursor: pointer;
  transition: background 0.2s ease;
}

.timeline-thread-header:hover {
  background: linear-gradient(
    135deg,
    rgba(249, 115, 22, 0.25),
    rgba(249, 115, 22, 0.1)
  );
}

/* Thread header selected state - unique magenta/cyan gradient to distinguish from kontasks */
.timeline-thread-header.selected {
  /* Vibrant cyan-magenta gradient - clearly different from timeline card selection */
  background: linear-gradient(
    135deg,
    rgba(236, 72, 153, 0.25) 0%,
    rgba(6, 182, 212, 0.15) 50%,
    rgba(236, 72, 153, 0.08) 100%
  );
  /* Dual-tone neon glow - magenta + cyan */
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.4), 0 0 30px rgba(6, 182, 212, 0.2), inset 0 0 20px rgba(236, 72, 153, 0.05);
  /* Gradient border via outline */
  border: 1px solid rgba(236, 72, 153, 0.5);
  border-radius: 6px;
  /* Text brightens */
  color: #f472b6;
  /* Subtle lift */
  transform: translateY(-1px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-thread-header.selected:hover {
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.5), 0 0 40px rgba(6, 182, 212, 0.25), inset 0 0 25px rgba(236, 72, 153, 0.08);
}

/* Thread icon pulses when selected */
.timeline-thread-header.selected .timeline-thread-icon {
  animation: thread-pulse 1.2s ease-in-out infinite;
}

@keyframes thread-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.timeline-thread-icon {
  font-size: 0.9rem;
}

.timeline-thread-label {
  font-weight: 500;
}

.timeline-thread-count {
  color: rgba(249, 115, 22, 0.7);
  font-size: 0.7rem;
}

.timeline-thread-duration {
  margin-left: auto;
  color: rgba(249, 115, 22, 0.6);
  font-size: 0.7rem;
}

/* Thread items - slightly indented */
.timeline-thread .timeline-item {
  margin-left: 8px;
}

/* Thread items get a connecting line */
.timeline-thread .timeline-item::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 8px;
  width: 6px;
  height: 2px;
  background: rgba(249, 115, 22, 0.4);
}

/* Thread collapsed state */
.timeline-thread.collapsed .timeline-item:not(:first-child) {
  display: none;
}

.timeline-thread.collapsed .timeline-thread-header::after {
  content: "▸";
  margin-left: 4px;
}

.timeline-thread:not(.collapsed) .timeline-thread-header::after {
  content: "▾";
  margin-left: 4px;
}

/* Status badge for threads */
.thread-status {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
}

.thread-status.resolved {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.thread-status.ongoing {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.thread-status.abandoned {
  background: rgba(107, 114, 128, 0.2);
  color: #6b7280;
}

/* ==========================================================
   SYSTEM EVENT MARKERS
   Thin colored lines for system events (login, logout, restart, etc.)
   These appear when timeline is open instead of popup notifications.
   ========================================================== */

/* System event marker - thin line on the timeline */
.timeline-system-event {
  position: relative;
  margin: 8px 0;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: system-event-fade-in 0.3s ease;
}

@keyframes system-event-fade-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Thin colored line */
.system-event-line {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-left: -17px;
  box-shadow: 0 0 0 2px #1e1e1e;
}

/* Line color by severity */
.system-event-line.severity-info {
  background: #6b7280;
} /* Gray */
.system-event-line.severity-warning {
  background: #f97316;
} /* Orange */
.system-event-line.severity-error {
  background: #ef4444;
} /* Red */

/* System event text */
.system-event-text {
  font-size: 0.7rem;
  color: #7f848e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* System event timestamp */
.system-event-time {
  font-size: 0.65rem;
  color: #4b5563;
  flex-shrink: 0;
}

/* ==========================================================
   BUNDLED SYSTEM EVENTS (Phase 2)
   System events collapse into bundles after 5-second window.
   Provider events are always shown expanded (never bundled).
   ========================================================== */

/* Bundled event container - shows collapsed bundle header */
.timeline-system-bundle {
  position: relative;
  margin: 8px 0;
  padding: 4px 0;
  animation: system-event-fade-in 0.3s ease;
}

/* Bundle header row - clickable to expand/collapse */
.system-bundle-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.system-bundle-header:hover {
  background: rgba(107, 114, 128, 0.15);
}

/* Bundle dot - matches severity color */
.system-bundle-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: -17px;
  box-shadow: 0 0 0 2px #1e1e1e;
}

.system-bundle-dot.severity-info {
  background: #6b7280;
}
.system-bundle-dot.severity-warning {
  background: #f97316;
}
.system-bundle-dot.severity-error {
  background: #ef4444;
}

/* Bundle icon */
.system-bundle-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Bundle label text */
.system-bundle-label {
  font-size: 0.75rem;
  color: #9ca3af;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bundle count badge */
.system-bundle-count {
  font-size: 0.65rem;
  color: #6b7280;
  background: rgba(107, 114, 128, 0.2);
  padding: 2px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Expand/collapse chevron */
.system-bundle-chevron {
  font-size: 0.75rem;
  color: #6b7280;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.timeline-system-bundle.expanded .system-bundle-chevron {
  transform: rotate(90deg);
}

/* Bundle time range */
.system-bundle-time {
  font-size: 0.6rem;
  color: #4b5563;
  flex-shrink: 0;
}

/* Bundle children container - hidden when collapsed */
.system-bundle-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  opacity: 0;
  margin-left: 12px;
  padding-left: 8px;
  border-left: 1px solid rgba(107, 114, 128, 0.3);
}

.timeline-system-bundle.expanded .system-bundle-children {
  max-height: 500px;
  opacity: 1;
}

/* Individual event in a bundle */
.system-bundle-child {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 0.7rem;
  color: #7f848e;
}

.system-bundle-child-service {
  color: #9ca3af;
  font-weight: 500;
}

.system-bundle-child-time {
  color: #4b5563;
  margin-left: auto;
  flex-shrink: 0;
}

/* Pending bundle indicator - shown during 5-second window */
.timeline-system-bundle.pending {
  opacity: 0.85;
}

.timeline-system-bundle.pending .system-bundle-header {
  animation: bundle-pending-pulse 1.5s ease-in-out infinite;
}

@keyframes bundle-pending-pulse {
  0%, 100% {
    background: rgba(107, 114, 128, 0.05);
  }
  50% {
    background: rgba(107, 114, 128, 0.15);
  }
}

/* Collapse animation when window closes */
@keyframes bundle-collapse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.98);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.timeline-system-bundle.just-collapsed {
  animation: bundle-collapse 0.4s ease;
}

/* Provider event - always shown expanded, never bundled */
.timeline-system-event.provider-event {
  background: rgba(139, 92, 246, 0.08);
  border-radius: 4px;
  padding: 6px 8px;
  margin-left: -8px;
}

.timeline-system-event.provider-event .system-event-line {
  background: #8b5cf6;
}

.timeline-system-event.provider-event .system-event-text {
  color: #a78bfa;
}

/* Provider event icon styling */
.timeline-system-event .system-event-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ==========================================================
   SESSION EVENT CARDS
   Card-style display for session_start and related events.
   Visual parity with kontask cards, clickable to open preview.
   ========================================================== */

/* Session event card - mimics timeline-card styling */
.timeline-session-card {
  position: relative;
  margin: 12px 0;
  padding: 0;
  animation: system-event-fade-in 0.3s ease;
}

.timeline-session-card .session-card-dot {
  position: absolute;
  left: -17px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8b5cf6;
  box-shadow: 0 0 0 3px #1e1e1e, 0 0 8px rgba(139, 92, 246, 0.5);
}

.timeline-session-card .session-card-content {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.12),
    rgba(139, 92, 246, 0.06)
  );
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.timeline-session-card .session-card-content:hover {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.18),
    rgba(139, 92, 246, 0.10)
  );
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
}

.timeline-session-card .session-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.timeline-session-card .session-card-time {
  font-size: 0.75rem;
  color: #a78bfa;
  font-weight: 600;
}

.timeline-session-card .session-card-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
}

.timeline-session-card .session-card-badge-icon {
  font-size: 0.8rem;
}

.timeline-session-card .session-card-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e9e4f5;
  margin-bottom: 4px;
}

.timeline-session-card .session-card-description {
  font-size: 0.75rem;
  color: #9ca3af;
  line-height: 1.4;
}

.timeline-session-card .session-card-description .session-detail {
  color: #a78bfa;
  font-weight: 500;
}

/* Selected state for session cards */
.timeline-session-card.selected .session-card-content {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.25),
    rgba(139, 92, 246, 0.15)
  );
  border-color: #8b5cf6;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.4);
}

.timeline-session-card.selected .session-card-dot {
  box-shadow: 0 0 0 3px #1e1e1e, 0 0 12px rgba(139, 92, 246, 0.8);
}

/* Navbar Timeline Button Container - absolutely positioned at right edge of navbar */
.nav-timeline-container {
  position: absolute;
  right: calc(8px + var(--safe-area-right, 0px));
  top: calc(var(--safe-area-top, 0px) + (var(--nav-base-height, 44px) - 1px) / 2);
  transform: translateY(-50%);
  z-index: 110; /* Above everything in navbar */
  /* Ensure this container receives all pointer events */
  pointer-events: auto;
}

/* Navbar Toggle Button — visually mirrors `.hamburger-btn` on the left side
   (gold ☰ icon, no chrome). Keeps 44x44 touch target for mobile. */
.nav-timeline-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; /* Larger touch target (44px is Apple minimum) */
  height: 44px;
  min-width: 44px; /* Prevent shrinking */
  flex-shrink: 0; /* Never shrink - must stay visible */
  background: none;
  border: none;
  color: #f0c14b; /* match .hamburger-btn gold */
  cursor: pointer;
  font-size: 1.5rem; /* match .hamburger-btn */
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease, transform 0.2s ease;
  /* Touch handling - prevent 300ms delay and improve reliability */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* Ensure button itself gets pointer events */
  pointer-events: auto;
}

.nav-timeline-btn:hover {
  color: #fff;
}

/* Touch/press feedback - both :active and .touching for mobile */
.nav-timeline-btn:active,
.nav-timeline-btn.touching {
  transform: scale(0.95);
}

.nav-timeline-btn.active {
  color: #fff;
}

/* Loading State */
.timeline-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #666;
}

.timeline-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #333;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 12px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================
   KONTASK PREVIEW PANEL - TAKEOVER MODE
   On wide screens: Preview takes over the entire console space.
   Console collapses to thin bar. Timeline stays visible on right.
   User can close via: clicking collapsed bar OR clicking timeline item.
   On narrow screens: full-width overlay that replaces timeline view.
   ========================================================== */

/* Preview container - on wide screens, positioned OUTSIDE timeline pane */
.kontask-preview-container {
  flex-direction: column;
  overflow: hidden;
  background: #141414; /* greatVibe brand --color-bg (was #1a1a2e until 2026-04-25) */
  /* Animation: slides out from under timeline (right-to-left) */
  flex: 0;
  min-width: 0;
  opacity: 0;
  /* Start clipped/hidden behind timeline edge, will slide left into view */
  transform: translateX(100%);
  /* Snappy animation (0.25s) for responsive feel */
  transition: flex 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  /* NO border - use subtle gradient glow instead */
  border: none;
  /* Gradient edge glow that fades into the background */
  position: relative;
}

/* Neon glow effect - LEFT + RIGHT edges only (no top/bottom for clean lines) */
.kontask-preview-container.active {
  /* Symmetrical glow on left and right edges */
  box-shadow: /* Right edge glow (towards timeline) */ 20px 0 25px -10px rgba(var(--preview-glow-rgb, 0, 255, 128), 0.3), 40px 0 50px -20px rgba(var(--preview-glow-rgb, 0, 255, 128), 0.15), /* Left edge glow (towards screen edge) */ -20px 0 25px -10px rgba(var(--preview-glow-rgb, 0, 255, 128), 0.3), -40px 0 50px -20px rgba(var(--preview-glow-rgb, 0, 255, 128), 0.15);
  /* Subtle left + right borders */
  border: none;
  border-left: 1px solid rgba(var(--preview-glow-rgb, 0, 255, 128), 0.3);
  border-right: 1px solid rgba(var(--preview-glow-rgb, 0, 255, 128), 0.3);
  /* z-index ensures box-shadow renders above adjacent timeline pane */
  z-index: 1;
}

/* Inner glow overlay removed - external box-shadow only for cleaner look */

/* Preview glow color variants (set via JS) */
.kontask-preview-container.glow-green {
  --preview-glow-rgb: 0, 255, 128;
}
.kontask-preview-container.glow-blue {
  --preview-glow-rgb: 0, 200, 255;
}
.kontask-preview-container.glow-purple {
  --preview-glow-rgb: 180, 100, 255;
}
.kontask-preview-container.glow-orange {
  --preview-glow-rgb: 255, 160, 50;
}
.kontask-preview-container.glow-pink {
  --preview-glow-rgb: 255, 100, 180;
}
.kontask-preview-container.glow-yellow {
  --preview-glow-rgb: 255, 220, 50;
}
.kontask-preview-container.glow-cyan {
  --preview-glow-rgb: 0, 220, 220;
}
.kontask-preview-container.glow-red {
  --preview-glow-rgb: 255, 80, 80;
}

/* Wide screens (601px+): Preview is a SIBLING to timeline, not inside it */
@media (min-width: 601px) {
  .kontask-preview-container {
    /* Positioned as flex child in content-row, between collapsed bar and timeline */
    display: flex;
    /* Subtle separator line between preview and timeline */
    border-right: 1px solid rgba(42, 43, 61, 0.5);
  }

  /* Preview slides in gracefully from the right */
  .kontask-preview-container.active {
    flex: 1; /* Takes all remaining space */
    opacity: 1;
    transform: translateX(0);
  }
}

/* Narrow mobile (≤600px): Mobile preview as overlay inside timeline pane */
@media (max-width: 600px) {
  /* Hide desktop preview on mobile */
  #kontask-preview-container {
    display: none !important;
  }

  /* Show mobile preview inside timeline */
  .kontask-preview-mobile {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    transform: translateX(100%);
    /* Snappy animation (0.25s) for responsive feel */
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    display: flex !important;
    /* NO border - cleaner look */
    border: none;
    pointer-events: none; /* Disable when off-screen */
  }

  .kontask-preview-mobile.active {
    transform: translateX(0);
    width: 100%;
    pointer-events: auto; /* Enable when visible */
  }
}

/* Wide screens (601px+): Hide mobile preview, show desktop preview */
@media (min-width: 601px) {
  .kontask-preview-mobile {
    display: none !important;
  }
}

/* Preview header with back button */
.kontask-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #252526;
  border-bottom: 1px solid #3c3c3c;
  flex-shrink: 0;
}

/* Hide header on wide screens - timeline item is visible next to preview */
@media (min-width: 601px) {
  .kontask-preview-header {
    display: none; /* Hide header - not needed on wide screens */
  }
  /* Note: breadcrumb is hidden separately after its base styles (CSS order matters) */
}

.kontask-preview-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kontask-preview-back:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.kontask-preview-back-icon {
  font-size: 1rem;
}

.kontask-preview-title {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Preview breadcrumb connector - shows relationship to timeline */
.kontask-preview-breadcrumb {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.1) 0%,
    rgba(26, 26, 46, 1) 100%
  );
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.kontask-preview-breadcrumb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 8px;
  flex-shrink: 0;
}

.kontask-preview-breadcrumb-time {
  font-size: 0.75rem;
  color: #888;
  margin-right: 8px;
}

.kontask-preview-breadcrumb-type {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}

/* Wide screens: Hide breadcrumb - timeline item is visible providing context */
@media (min-width: 601px) {
  .kontask-preview-breadcrumb {
    display: none !important;
  }
}

/* Preview content area - scrollable */
.kontask-preview-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: 80px; /* Space for potential fixed footer */
}

.kontask-preview-content::-webkit-scrollbar {
  width: 6px;
}

.kontask-preview-content::-webkit-scrollbar-track {
  background: #1e1e1e;
}

.kontask-preview-content::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 3px;
}

/* Kontask card wrapper in preview */
.kontask-preview-card {
  background: #1e1e1e;
  border-radius: 8px;
  overflow: hidden;
  /* Ensure content respects container width */
  max-width: 100%;
  box-sizing: border-box;
}

/* Responsive text handling for kontask preview content */
.kontask-preview-card pre,
.kontask-preview-card code {
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
  max-width: 100%;
}

.kontask-preview-card > div {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Ensure all text in kontask cards wraps properly */
.kontask-preview-content {
  overflow-x: hidden;
}

.kontask-preview-content * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Override styles for embedded kontask output */
.kontask-preview-card .console-output-card {
  padding: 0;
  background: transparent;
}

/* Choices/action buttons at bottom of preview */
.kontask-preview-actions {
  padding: 12px;
  background: #252526;
  border-top: 1px solid #3c3c3c;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kontask-preview-action-btn {
  flex: 1;
  min-width: 120px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kontask-preview-action-btn.primary {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}

.kontask-preview-action-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.kontask-preview-action-btn.secondary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
}

.kontask-preview-action-btn.secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.kontask-preview-action-btn.tertiary {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.kontask-preview-action-btn.tertiary:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* View full page link */
.kontask-preview-fullpage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  color: #888;
  font-size: 0.75rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.kontask-preview-fullpage:hover {
  color: #3b82f6;
}

/* Loading state for preview */
.kontask-preview-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #666;
}

/* Error state for preview */
.kontask-preview-error {
  text-align: center;
  padding: 40px 20px;
  color: #ef4444;
}

.kontask-preview-error-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

/* Animation for preview content */
@keyframes preview-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kontask-preview-card {
  animation: preview-fade-in 0.3s ease 0.2s both;
}

/* Topic/domain dot colors in breadcrumb */
.kontask-preview-breadcrumb-dot.topic-requirements {
  background: #ef4444;
}
.kontask-preview-breadcrumb-dot.topic-planning {
  background: #f97316;
}
.kontask-preview-breadcrumb-dot.topic-design {
  background: #a855f7;
}
.kontask-preview-breadcrumb-dot.topic-schema {
  background: #3b82f6;
}
.kontask-preview-breadcrumb-dot.topic-feature {
  background: #22c55e;
}
.kontask-preview-breadcrumb-dot.topic-bugfix {
  background: #eab308;
}
.kontask-preview-breadcrumb-dot.topic-testing {
  background: #8b5cf6;
}
.kontask-preview-breadcrumb-dot.topic-docs {
  background: #8b5cf6;
}
.kontask-preview-breadcrumb-dot.domain-frontend {
  background: #3b82f6;
}
.kontask-preview-breadcrumb-dot.domain-backend {
  background: #8b5cf6;
}
.kontask-preview-breadcrumb-dot.domain-tooling {
  background: #8b5cf6;
}

/* Git Commit section in preview */
.preview-commit-section {
  margin-top: 16px;
  padding: 12px;
  background: #1a2e1a;
  border-radius: 8px;
  border-left: 3px solid #22c55e;
}

.preview-section-title {
  margin: 0 0 10px 0;
  font-size: 0.8rem;
  color: #4ade80;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.preview-commit-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.preview-commit-sha {
  background: #2d2d2d;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: "Monaco", "Menlo", "Consolas", monospace;
  font-size: 0.85rem;
  color: #f59e0b;
}

.preview-rollback-btn {
  background: #ef4444;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.2s ease;
}

.preview-rollback-btn:hover {
  background: #dc2626;
}

.preview-diff-btn {
  background: #3b82f6;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.2s ease;
}

.preview-diff-btn:hover {
  background: #2563eb;
}

.preview-diff-viewer {
  margin-top: 12px;
  background: #1e1e1e;
  border-radius: 6px;
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}

.preview-diff-viewer pre {
  margin: 0;
  padding: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  font-family: "Monaco", "Menlo", "Consolas", monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: #e0e0e0;
}

.preview-diff-viewer .diff-add {
  color: #98c379;
  background: rgba(152, 195, 121, 0.1);
}

.preview-diff-viewer .diff-del {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.preview-diff-viewer .diff-header {
  color: #61afef;
  font-weight: bold;
}

.preview-diff-loading {
  color: #9ca3af;
  font-size: 0.85rem;
  padding: 12px;
  text-align: center;
}

.preview-diff-error {
  color: #ef4444;
  font-size: 0.85rem;
  padding: 12px;
  background: #2d1f1f;
  border-radius: 6px;
}

/* Phase 6: Triggered Actions section in preview */
.preview-triggered-section {
  margin-top: 16px;
  padding: 12px;
  background: #2e2a1f;
  border-radius: 8px;
  border-left: 3px solid #f59e0b;
}

.preview-triggered-section .preview-section-title {
  color: #f59e0b;
}

.preview-triggered-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-triggered-item {
  background: #252218;
  padding: 10px 12px;
  border-radius: 6px;
}

.preview-triggered-choice {
  font-weight: 500;
  color: #fcd34d;
  font-size: 0.9rem;
}

.preview-triggered-meta {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 4px;
}

.preview-triggered-result {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.preview-triggered-result .result-arrow {
  color: #f59e0b;
  font-weight: bold;
}

.preview-triggered-result .result-link {
  color: #61afef;
  font-size: 0.85rem;
  text-decoration: none;
}

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

/* Quick Actions section in preview */
.preview-quick-actions {
  margin-top: 16px;
  padding: 12px;
  background: #1e1e1e;
  border-radius: 8px;
}

.preview-quick-actions .preview-section-title {
  color: #9ca3af;
}

.preview-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preview-followup-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.preview-followup-btn .btn-icon {
  font-size: 0.9rem;
}

.preview-viewturn {
  background: linear-gradient(135deg, #d9a552, #b68945);
  color: #fff;
}

.preview-viewturn:hover {
  background: linear-gradient(135deg, #e5b563, #c99a56);
}

.preview-verify {
  background: #22c55e;
  color: #fff;
}

.preview-verify:hover {
  background: #16a34a;
}

.preview-notworking {
  background: #f97316;
  color: #fff;
}

.preview-notworking:hover {
  background: #ea580c;
}

.preview-retry {
  background: #8b5cf6;
  color: #fff;
}

.preview-retry:hover {
  background: #7c3aed;
}

.preview-backlog {
  background: #3b82f6;
  color: #fff;
}

.preview-backlog:hover {
  background: #2563eb;
}

/* ==========================================================
   FLIPSIDE PANEL - TRIGGER CHAIN VIEW (Phase 7)
   CSS 3D flip animation to show trigger chain flowchart
   on the reverse side of the flow timeline panel.
   ========================================================== */

/* Perspective container - creates 3D space for flip */
.flow-timeline-inner {
  perspective: 1000px;
}

/* Flipper container - holds both sides */
.panel-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.4s ease-in-out;
}

/* Flipped state */
.panel-flipper.flipped {
  transform: rotateY(180deg);
}

/* Front and back faces */
.panel-front,
.panel-back {
  position: absolute;
  width: 100%;
  height: 100%; /* Full height - tab bar was removed */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Back face - rotated 180deg */
.panel-back {
  transform: rotateY(180deg);
  background: #1a1a2e;
  pointer-events: none; /* Disable interactions when not visible */
}

/* When flipped, enable pointer events on back and disable on front */
.panel-flipper.flipped .panel-back {
  pointer-events: auto;
}

.panel-flipper.flipped .panel-front {
  pointer-events: none;
}

/* Chain view header */
.chain-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #252526;
  border-bottom: 1px solid #3c3c3c;
  flex-shrink: 0;
}

.chain-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chain-stats {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Chain graph container */
.chain-graph {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #1e1e1e;
}

/* Empty chain state */
.empty-chain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6b7280;
  text-align: center;
  padding: 24px;
}

.empty-chain-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-chain-text {
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 200px;
  margin: 0;
}

/* vis.js tooltip override for chain view */
.chain-graph .vis-tooltip {
  background: #2d2d2d !important;
  color: #e0e0e0 !important;
  border: 1px solid #444 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  white-space: pre-line !important;
  max-width: 250px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Chain view hint toast */
.chain-hint-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(45, 45, 45, 0.95);
  color: #e0e0e0;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  animation: toast-fade-in 0.3s ease, toast-fade-out 0.3s ease 2.7s forwards;
}

@keyframes toast-fade-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes toast-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Mobile: Tab bar sticky at bottom */
@media (max-width: 600px) {
  .panel-tabs {
    position: fixed;
    bottom: var(--bottom-container-height, 140px);
    left: 0;
    right: 0;
    z-index: 1000;
  }

  .panel-front,
  .panel-back {
    /* The timeline pane already excludes the measured composer height. */
    height: 100%;
  }
}

/* Active turns: quiet status, clear task, reported details only. */
.timeline-progress-section { padding: 10px 2px 2px; }
/* 2026-09-12: Live "working" card restored to the signature blue (was a dull
   sage/olive-grey after 93d38707) and given a gentle glow pulse so an active
   turn reads as alive at a glance. */
.timeline-progress-card {
  position: relative;
  margin: 0 0 10px;
  padding: 15px;
  background: linear-gradient(145deg, #61afef1f, #c678dd12 70%);
  border: 1px solid #61afef4d;
  border-radius: 15px;
  box-shadow: 0 3px 14px #61afef1f, 0 3px 12px #00000015;
  animation: timeline-progress-glow 2.6s ease-in-out infinite;
}
@keyframes timeline-progress-glow {
  0%, 100% { box-shadow: 0 3px 14px #61afef1f, 0 3px 12px #00000015; border-color: #61afef4d; }
  50% { box-shadow: 0 3px 22px #61afef3d, 0 3px 12px #00000015; border-color: #61afef73; }
}
@keyframes timeline-progress-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #61afef26; }
  50% { box-shadow: 0 0 0 6px #61afef12; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-progress-card, .timeline-progress-dot { animation: none; }
}
.timeline-progress-header { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.timeline-progress-dot { width: 7px; height: 7px; background: #61afef; border-radius: 50%; box-shadow: 0 0 0 4px #61afef1f; flex-shrink: 0; animation: timeline-progress-dot-pulse 2.6s ease-in-out infinite; }
.timeline-progress-label { color: #61afef; font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.timeline-progress-worker { color: #858f7e; font-size: 10px; }
.timeline-progress-elapsed { margin-left: auto; color: #8d9686; font: 10px/1.3 "JetBrains Mono", Monaco, Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline-progress-prompt { font-size: 14px; font-weight: 500; letter-spacing: -.015em; color: #e6e9df; margin: 0 0 10px; line-height: 1.55; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.timeline-progress-focus { margin: 0 0 11px; font-size: 11px; color: #a8b1a0; line-height: 1.5; overflow-wrap: anywhere; }
.timeline-progress-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; padding-top: 2px; min-width: 0; }
.timeline-progress-meta .timeline-card-badge { color: #969f8e; font-size: 10px; background: transparent; border: 0; padding: 0; }
.timeline-progress-meta .timeline-card-badge-text { font-size: inherit; }
.timeline-progress-meta .progress-user { color: #a3aa97; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-progress-stats { display: flex; gap: 12px; color: #939c89; font-size: 10px; margin-top: 11px; }
.timeline-progress-stat, .progress-stat { display: inline-flex; align-items: center; gap: 5px; }
.progress-stat svg { width: 12px; height: 12px; color: #8c987e; }
.timeline-progress-card .timeline-topics:has(.timeline-topics-empty) { display: none; }
.timeline-progress-card .timeline-topics { margin-top: 13px; padding-top: 12px; border-top-color: #ffffff09; }
.timeline-progress-card .timeline-topics-heading { margin-bottom: 8px; }
.timeline-progress-card .timeline-topics-heading > span { color: #a9b59a; font-size: 9px; letter-spacing: 1px; }
.timeline-progress-card .timeline-topics-heading small { color: #89917f; font-size: 9px; }
.timeline-progress-card .timeline-topic { background: transparent; border: 0; padding: 3px 0; gap: 8px; border-radius: 0; }
.timeline-progress-card .timeline-topic-marker { width: 13px; height: 13px; font-size: 8px; margin-top: 2px; border-color: #59614e; background: transparent; }
.timeline-progress-card .timeline-topic-copy strong { font-size: 11px; font-weight: 400; color: #cbd2c0; }
.timeline-progress-card .timeline-topic-meta { font-size: 9px; color: #8f9983; }
.timeline-progress-card .timeline-topic[data-topic-phase="working"] .timeline-topic-marker { background: #61afef; border-color: #61afef; box-shadow: 0 0 0 3px #61afef1f; }
.timeline-progress-card .timeline-topics-source { margin-top: 8px; color: #7e8872; font-size: 9px; }

/* Explicit topic progress inside the existing right-rail Working card. */
.timeline-topics{margin-top:12px;padding-top:11px;border-top:1px solid #ffffff12;font:12px/1.45 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-width:0;overflow-anchor:none}.timeline-topics-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.timeline-topics-heading>span{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#f59e0b;font-weight:600}.timeline-topics-heading small{font-size:10px;color:#929eac}.timeline-topic-rail{display:grid;gap:6px}.timeline-topic{position:relative;display:flex;align-items:flex-start;gap:9px;padding:9px 10px;background:#ffffff04;border:1px solid #ffffff0a;border-radius:9px;min-width:0}.timeline-topic-marker{width:17px;height:17px;margin-top:1px;flex-shrink:0;display:grid;place-items:center;border:1px solid #778493;color:#929eac;background:#20262b;border-radius:50%;font-size:10px;line-height:1}.timeline-topic-copy{min-width:0;display:grid;gap:3px}.timeline-topic-copy strong{font-size:12px;font-weight:500;color:#d5dce5;overflow-wrap:anywhere}.timeline-topic-meta{font-size:10px;color:#9da9b7}.timeline-topic[data-topic-phase="working"]{background:#61afef0b;border-color:#61afef30}.timeline-topic[data-topic-phase="working"] .timeline-topic-marker{background:#61afef;border-color:#61afef;box-shadow:0 0 0 3px #61afef12}.timeline-topic[data-topic-phase="checking"] .timeline-topic-marker{background:#e5c07b;border-color:#e5c07b}.timeline-topic[data-topic-phase="done"] .timeline-topic-marker{background:#98c37918;border-color:#98c379;color:#98c379}.timeline-topic[data-topic-phase="blocked"] .timeline-topic-marker{background:#e06c7512;border-color:#e06c75;color:#e06c75}.timeline-topics-source,.timeline-topics-empty{font-size:10px;line-height:1.5;color:#8f9dab;margin:9px 0 0;overflow-wrap:anywhere}.timeline-topics-empty{margin:0;padding:3px 0}@media(max-width:450px){.timeline-topic{padding:8px}.timeline-topic-copy strong{font-size:12px}}