/* Workflow Engine UI - Global Styles */

/* ============================================
   CLAUDE COMMS III - Q PALETTE & T TOKENS
   Quake-inspired brand identity system
   ============================================ */
:root {
  /* Q Palette - Color System (source: brandkit.jsx) */
  --q-void0: #060504;
  --q-void1: #0c0a07;
  --q-stone0: #16120d;
  --q-stone1: #1e1813;
  --q-stone2: #28211a;
  --q-stone3: #342a20;
  --q-copper0: #5c3a1e;
  --q-copper1: #7a4e28;
  --q-copper2: #946232;
  --q-copper3: #b07840;
  --q-torch: #d4a030;
  --q-torch-hot: #e8b840;
  --q-lava0: #8c2814;
  --q-lava1: #c43818;
  --q-slime0: #2c5418;
  --q-slime1: #3c7420;
  --q-teleport: #5c3c7c;
  --q-teleport-bright: #7c58a0;
  --q-blood: #7c1c10;
  --q-bone0: #6c6454;
  --q-bone1: #908474;
  --q-bone2: #b4a890;
  --q-bone3: #d0c4a8;
  --q-bone4: #e4dcc4;
  --q-iron0: #3c3830;
  --q-iron1: #504c40;
  --q-iron2: #686050;

  /* Q Palette - Pre-computed Alpha Variants (hex alpha notation) */
  --q-stone0-40: #16120d66;   /* 40% - grid lines */
  --q-stone0-30: #16120d4d;   /* 30% - horizontal grid */
  --q-copper1-06: #7a4e280f;  /* 6% - scanline tint */
  --q-iron1-33: #504c4054;    /* 33% - rivet highlight */
  --q-iron1-44: #504c4070;    /* 44% - top border tint */
  --q-copper0-30: #5c3a1e4d;  /* 30% - highlights */
  --q-copper1-20: #7a4e2833;  /* 20% - medium texture */
  --q-copper0-15: #5c3a1e26;  /* 15% - raised texture */
  --q-torch-33: #d4a03054;    /* 33% - hover glow */
  --q-torch-22: #d4a03038;    /* 22% - text shadow */
  --q-slime0-08: #2c541814;   /* 8% - running inset */
  --q-slime0-10: #2c54181a;   /* 10% - running glow */
  --q-slime1-44: #3c742070;   /* 44% - glow bar */
  --q-slime1-88: #3c7420e0;   /* 88% - health bar gradient */
  --q-lava0-08: #8c281414;    /* 8% - failed inset */
  --q-lava0-10: #8c28141a;    /* 10% - failed glow */
  --q-lava1-44: #c4381870;    /* 44% - glow bar */
  --q-copper1-44: #7a4e2870;  /* 44% - default glow bar */
  --q-copper1-88: #7a4e28e0;  /* 88% - tokens bar gradient */
  --q-copper2-88: #946232e0;  /* 88% - button border top */
  --q-copper3-44: #b0784070;  /* 44% - button text shadow */
  --q-copper1-08: #7a4e2814;  /* 8% - copper glow inset */
  --q-copper1-10: #7a4e281a;  /* 10% - copper glow outer */
  --q-torch-08: #d4a03014;    /* 8% - torch glow inset */
  --q-torch-10: #d4a0301a;    /* 10% - torch glow outer */

  /* Additional WP-7 alpha variants */
  --q-torch-hot-33: #e8b84054;  /* 33% - torch hot glow */
  --q-bone0-12: #6c64541f;      /* 12% - bone background */
  --q-copper3-12: #b078401f;    /* 12% - copper light bg */
  --q-copper3-33: #b0784054;    /* 33% - copper border */

  /* Teleport alpha variants - for running/warp states */
  --q-teleport-08: #5c3c7c14;       /* 8% - teleport glow inset */
  --q-teleport-10: #5c3c7c1a;       /* 10% - teleport glow outer */
  --q-teleport-44: #5c3c7c70;       /* 44% - teleport glow bar */
  --q-teleport-bright-44: #7c58a070; /* 44% - teleport bright glow */
  --q-teleport-bright-88: #7c58a0e0; /* 88% - teleport bright gradient */

  /* T Tokens - Border tokens */
  --t-border-radius: 0;
  --t-border-width-standard: 1px;
  --t-border-width-depth: 2px;

  /* T Tokens - Spacing tokens (4px base grid) */
  --t-space-unit: 4px;
  --t-space-xs: 4px;
  --t-space-sm: 8px;
  --t-space-md: 12px;
  --t-space-lg: 16px;
  --t-space-xl: 20px;
  --t-space-xxl: 24px;
  --t-space-section: 72px;

  /* T Tokens - Typography tokens */
  --t-type-size-hero: 36px;
  --t-type-size-title: 24px;
  --t-type-size-heading: 16px;
  --t-type-size-subheading: 14px;
  --t-type-size-body: 14px;
  --t-type-size-body-small: 13px;
  --t-type-size-label: 10px;
  --t-type-size-label-small: 9px;
  --t-type-size-badge: 8px;
  --t-type-size-micro: 7px;
  --t-type-size-stat: 28px;
  --t-type-size-stat-medium: 20px;
  --t-type-size-stat-small: 12px;
  --t-type-size-console: 11px;
  --t-type-size-console-command: 15px;

  --t-type-tracking-tight: 1px;
  --t-type-tracking-normal: 2px;
  --t-type-tracking-wide: 3px;
  --t-type-tracking-xwide: 4px;
  --t-type-tracking-hero: 6px;

  --t-type-leading-tight: 1;
  --t-type-leading-snug: 1.2;
  --t-type-leading-normal: 1.5;
  --t-type-leading-relaxed: 1.7;
  --t-type-leading-loose: 1.8;
  --t-type-leading-console-line: 1.9;

  /* T Tokens - Animation tokens */
  --t-anim-transition-fast: 0.1s;
  --t-anim-transition-normal: 0.15s;
  --t-anim-transition-slow: 0.2s;
  --t-anim-meter-duration: 0.5s;
  --t-anim-pulse-duration: 2.5s;
  --t-anim-cursor-duration: 1s;
  --t-anim-hover-lift: -1px;
  --t-anim-press-depth: 1px;

  /* T Tokens - Effects tokens */
  --t-fx-grain-opacity: 0.7;
  --t-fx-glow-sm: 6px;
  --t-fx-glow-md: 12px;
  --t-fx-glow-lg: 20px;
  --t-fx-glow-xl: 30px;
  --t-fx-surface-grid-size: 64px;
  --t-fx-rivet-size: 2px;
  --t-fx-rivet-offset: 8px;

  /* T Tokens - Button tokens */
  --t-button-px-sm: 10px;
  --t-button-py-sm: 5px;
  --t-button-fs-sm: 10px;
  --t-button-px-md: 16px;
  --t-button-py-md: 8px;
  --t-button-fs-md: 12px;
  --t-button-px-lg: 24px;
  --t-button-py-lg: 12px;
  --t-button-fs-lg: 14px;
  --t-button-disabled-opacity: 0.4;

  /* T Tokens - Bar tokens */
  --t-bar-height-health: 6px;
  --t-bar-height-meter: 10px;

  /* Font Stack Custom Properties */
  --font-display: 'Silkscreen', monospace;
  --font-console: 'IBM Plex Mono', monospace;
  --font-body: 'Chakra Petch', sans-serif;

  /* Semantic Color Mappings */
  --color-success: var(--q-slime1);
  --color-success-dark: var(--q-slime0);
  --color-danger: var(--q-lava1);
  --color-danger-dark: var(--q-lava0);
  --color-warning: var(--q-torch);
  --color-info: var(--q-copper3);
  --color-highlight: var(--q-torch-hot);
  --color-special: var(--q-teleport-bright);
}

/* Accessibility - Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   WP-2: SURFACE PRIMITIVES
   Copper textures, riveted panels, and glow utilities
   ============================================ */

/* Copper Texture Surface - 64px grid overlay pattern */
.copper-texture {
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 63px,
      var(--q-stone0-40) 63px, var(--q-stone0-40) 64px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 63px,
      var(--q-stone0-30) 63px, var(--q-stone0-30) 64px),
    linear-gradient(180deg, var(--copper-highlight, transparent), transparent 2px),
    linear-gradient(135deg, var(--copper-bg, var(--q-stone1)) 0%, var(--q-void1) 100%);
  border: var(--t-border-width-standard) solid var(--copper-border, var(--q-stone3));
  border-top-color: var(--q-iron1-44);
  border-radius: var(--t-border-radius);
}

/* Copper Texture Variants */
.copper-texture--dark {
  --copper-bg: var(--q-stone1);
  --copper-border: var(--q-stone3);
  --copper-highlight: var(--q-copper0-30);
}

.copper-texture--medium {
  --copper-bg: var(--q-stone2);
  --copper-border: var(--q-iron0);
  --copper-highlight: var(--q-copper1-20);
}

.copper-texture--raised {
  --copper-bg: var(--q-stone3);
  --copper-border: var(--q-iron1);
  --copper-highlight: var(--q-copper0-15);
}

/* Riveted Panel Surface - 4 corner rivets (2px dots at 8px offset) */
.riveted-panel {
  background:
    radial-gradient(circle at 8px 8px, var(--q-iron0) 2px, transparent 2px),
    radial-gradient(circle at calc(100% - 8px) 8px, var(--q-iron0) 2px, transparent 2px),
    radial-gradient(circle at 8px calc(100% - 8px), var(--q-iron0) 2px, transparent 2px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), var(--q-iron0) 2px, transparent 2px),
    linear-gradient(180deg, var(--q-stone2) 0%, var(--q-stone1) 100%);
  border: var(--t-border-width-standard) solid var(--q-stone3);
  border-top-color: var(--q-iron1-33);
  border-bottom: 2px solid var(--q-void0);
  border-radius: var(--t-border-radius);
}

/* Glow Utility Classes - Status-based panel glows */
.glow--slime {
  box-shadow: inset 0 0 30px var(--q-slime0-08), 0 0 20px var(--q-slime0-10);
}

.glow--lava {
  box-shadow: inset 0 0 30px var(--q-lava0-08), 0 0 20px var(--q-lava0-10);
}

.glow--copper {
  box-shadow: inset 0 0 30px var(--q-copper1-08), 0 0 20px var(--q-copper1-10);
}

.glow--torch {
  box-shadow: inset 0 0 30px var(--q-torch-08), 0 0 20px var(--q-torch-10);
}

/* CSS Reset/Normalize */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  height: 100vh;
  overflow: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-color: var(--q-void1);
  color: var(--q-bone2);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Root element */
#root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Animations */
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.5; }
  100% { transform: scale(0.95); opacity: 1; }
}

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

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

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pulse-animation {
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.spin-animation {
  animation: spin 1s linear infinite;
}

.fade-in {
  animation: fade-in 0.2s ease-out;
}

.slide-down {
  animation: slide-down 0.2s ease-out;
}

.slide-up {
  animation: slide-up 0.2s ease-out;
}

/* Job chain connector */
.job-chain-connector {
  position: relative;
}

.job-chain-connector::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 2px;
  height: 12px;
  background: #374151; /* gray-700 */
}

.job-chain-connector:last-child::after {
  display: none;
}

/* Scrollbar styling - Q Palette */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--q-void0);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--q-stone3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--q-iron1);
}

/* Firefox scrollbar - Q Palette */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--q-stone3) var(--q-void0);
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(
    90deg,
    #374151 25%,
    #4b5563 50%,
    #374151 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Focus styles */
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Button base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
  border: none;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-primary {
  background-color: #3b82f6;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #2563eb;
}

.btn-secondary {
  background-color: #374151;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #4b5563;
}

/* Card base */
.card {
  background-color: #1f2937;
  border: 1px solid #374151;
  border-radius: 0.75rem;
  overflow: hidden;
}

.card-hover:hover {
  border-color: #4b5563;
}

/* Truncate with ellipsis */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Collapsible transition */
.collapsible-content {
  overflow: hidden;
  transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
}

.collapsible-content.collapsed {
  max-height: 0;
  opacity: 0;
}

.collapsible-content.expanded {
  opacity: 1;
}

/* Chevron rotation */
.chevron {
  transition: transform 0.2s ease;
}

.chevron.rotated {
  transform: rotate(180deg);
}

/* Status indicator dot */
.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
}

/* JSON viewer */
.json-viewer {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.json-key {
  color: #93c5fd; /* blue-300 */
}

.json-string {
  color: #86efac; /* green-300 */
  white-space: pre-wrap;
}

.json-number {
  color: #fde68a; /* amber-200 */
}

.json-boolean {
  color: #c4b5fd; /* violet-300 */
}

.json-null {
  color: #9ca3af; /* gray-400 */
}

/* Sidebar layout */
.sidebar {
  width: clamp(12rem, 20vw, 18rem);
  min-width: 12rem;
  max-width: 18rem;
  flex-shrink: 0;
  overflow-y: auto;
  background-color: #111827; /* gray-900 */
  border-right: 1px solid #374151;
}

/* Collapsible sidebar */
.sidebar-collapsible {
  transition: width 0.2s ease-out, min-width 0.2s ease-out;
  overflow: hidden;
}

.sidebar-expanded {
  width: clamp(12rem, 20vw, 18rem);
  min-width: 12rem;
  max-width: 18rem;
}

.sidebar-collapsed {
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  max-width: 3.5rem !important;
}

/* Sidebar collapse button */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.sidebar-collapse-btn:hover {
  background-color: rgba(55, 65, 81, 0.8);
}

.sidebar-collapse-btn:focus {
  outline: none;
}

.sidebar-collapse-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.sidebar-collapse-btn svg {
  transition: transform 0.2s ease;
}

/* Collapsed sidebar namespace icon buttons */
.sidebar-collapsed button[title] {
  transition: background-color 0.15s ease;
}

/* Main content area */
.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #111827;
  min-width: 0;
}

/* Sidebar branding header */
.sidebar-branding {
  flex-shrink: 0;
  background-color: rgba(31, 41, 55, 0.5);
  border-bottom: 1px solid #374151;
}

/* Layout container */
.app-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
  }
}

/* Input styles */
.input {
  width: 100%;
  background-color: #374151;
  border: 1px solid #4b5563;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: white;
  transition: border-color 0.15s ease;
}

.input::placeholder {
  color: #9ca3af;
}

.input:focus {
  outline: none;
  border-color: #3b82f6;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  color: #4b5563;
  margin-bottom: 1rem;
}

/* Tooltip */
.tooltip {
  position: relative;
}

.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  background-color: #1f2937;
  border: 1px solid #374151;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 100;
}

.tooltip:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

/* Chat Panel Styles */
.chat-panel {
  display: flex;
  height: 100%;
  min-width: 0;
}

.chat-sidebar {
  width: clamp(14rem, 22vw, 18rem);
  min-width: 14rem;
  max-width: 18rem;
  flex-shrink: 0;
}

/* WP-3: Collapsible threads pane */
.threads-pane {
  position: relative;
  transition: width 0.3s ease-in-out;
}

.threads-pane-expanded {
  width: clamp(14rem, 20vw, 18rem);
  min-width: 14rem;
  max-width: 18rem;
}

.threads-pane-collapsed {
  width: 3rem;
  min-width: 3rem;
  max-width: 3rem;
}

.threads-pane-collapsed-content {
  width: 3rem;
}

.threads-pane-expanded-content {
  width: 100%;
}

/* When inside the threads pane, reset sidebar width to fill container */
.threads-pane .chat-sidebar {
  width: 100%;
  min-width: unset;
  max-width: unset;
  border-right: none;
}

.chat-header {
  flex-shrink: 0;
}

.chat-input-container {
  flex-shrink: 0;
}

/* Chat message animations */
@keyframes message-appear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-bubble {
  animation: message-appear 0.2s ease-out;
}

/* Typing indicator animation */
@keyframes bounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* Mode toggle styles */
.mode-toggle {
  user-select: none;
}

/* Thread item hover effect */
.thread-item:hover {
  background-color: rgba(55, 65, 81, 0.5);
}

.thread-item.selected {
  background-color: rgba(59, 130, 246, 0.2);
  border-left: 2px solid #3b82f6;
}

/* WP-6: Q palette thread item styling */
.thread-item-q {
  background-color: transparent;
  transition: background-color var(--t-anim-transition-fast);
}

/* Copper texture hover state for thread items */
.thread-item-q:hover {
  background-color: var(--q-copper1-08);
}

/* Selected thread uses torch accent (applied via inline styles) */
.thread-item-q:focus-visible {
  outline: 2px solid var(--q-torch);
  outline-offset: -2px;
}

/* Chat input textarea focus state */
.chat-input-container textarea:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Chat input collapse/expand toggle */
.chat-input-collapse-toggle:hover {
  color: var(--q-bone3);
  background: var(--q-stone2);
}

/* Chat input enter safety toggle */
.chat-input-safety-toggle:hover {
  color: var(--q-copper3);
  border-color: var(--q-copper1);
}

/* Smooth scroll for message list */
.message-list {
  scroll-behavior: smooth;
}

/* Code block in messages */
.message-code-block {
  background-color: #1f2937;
  border-radius: 0.5rem;
  padding: 0.75rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
}

/* Tab navigation styles */
.tab-navigation {
  user-select: none;
}

.tab-button {
  position: relative;
}

.tab-button::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.tab-button.active::after {
  background-color: #3b82f6;
}

/* Guardian Mode Styles */

/* PM message styling - distinct from user/assistant */
.pm-message {
  position: relative;
}

.pm-message::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  /* Q palette torch/copper gradient - maps amber to brandkit */
  background: linear-gradient(180deg, var(--q-torch) 0%, var(--q-copper1) 100%);
  border-radius: 2px;
}

/* ============================================
   Markdown content styles (marked output)
   Q palette: void bg for code, bone text, copper links
   ============================================ */

/* Constrain message bubble chain so pre/table scroll instead of pushing width */
.message-content-wrapper {
  overflow: hidden;
}
.message-column {
  overflow: hidden;
  max-width: 100%;
}
.message-bubble {
  overflow: hidden;
  max-width: 100%;
}

/* Reset marked output defaults */
.markdown-content > *:first-child {
  margin-top: 0;
}
.markdown-content > *:last-child {
  margin-bottom: 0;
}

/* Paragraphs */
.markdown-content p {
  margin: 0.4em 0;
}

/* Headings - inherit color from bubble so user/assistant both work */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-family: var(--font-display);
  letter-spacing: 1px;
  color: inherit;
  margin: 0.8em 0 0.3em;
  line-height: 1.3;
}
.markdown-content h1 { font-size: 1.3em; }
.markdown-content h2 { font-size: 1.15em; }
.markdown-content h3 { font-size: 1.05em; }
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 { font-size: 1em; }

/* Bold / italic - inherit color from bubble */
.markdown-content strong {
  font-weight: 600;
  color: inherit;
}
.markdown-content em {
  font-style: italic;
}

/* Links */
.markdown-content a {
  color: var(--q-copper2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.markdown-content a:hover {
  color: var(--q-copper3);
}

/* Inline code */
.markdown-content code {
  font-family: var(--font-console);
  font-size: 0.88em;
  background: var(--q-void1);
  padding: 1px 5px;
  border: 1px solid var(--q-stone3);
  word-break: break-all;
}

/* Code blocks */
.markdown-content pre {
  margin: 0.6em 0;
  padding: 12px;
  background: var(--q-void0);
  border: 1px solid var(--q-stone3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.markdown-content pre code {
  font-family: var(--font-console);
  font-size: 0.85em;
  color: var(--q-bone1);
  background: none;
  padding: 0;
  border: none;
  white-space: pre;
}

/* Scrollbar for code blocks */
.markdown-content pre::-webkit-scrollbar {
  height: 6px;
}
.markdown-content pre::-webkit-scrollbar-track {
  background: var(--q-void1);
}
.markdown-content pre::-webkit-scrollbar-thumb {
  background: var(--q-stone3);
}

/* Unordered lists */
.markdown-content ul {
  margin: 0.4em 0;
  padding-left: 1.4em;
  list-style-type: disc;
}
.markdown-content ul ul {
  list-style-type: circle;
  margin: 0.1em 0;
}

/* Ordered lists */
.markdown-content ol {
  margin: 0.4em 0;
  padding-left: 1.4em;
  list-style-type: decimal;
}

/* List items */
.markdown-content li {
  margin: 0.15em 0;
}
.markdown-content li > p {
  margin: 0.15em 0;
}

/* Blockquotes */
.markdown-content blockquote {
  margin: 0.5em 0;
  padding: 0.4em 0.8em;
  border-left: 3px solid var(--q-copper1);
  background: color-mix(in srgb, var(--q-copper0) 15%, transparent);
  color: var(--q-bone1);
}
.markdown-content blockquote p {
  margin: 0.2em 0;
}

/* Horizontal rules */
.markdown-content hr {
  border: none;
  border-top: 1px solid var(--q-stone3);
  margin: 0.8em 0;
}

/* Tables */
.markdown-content table {
  border-collapse: collapse;
  margin: 0.5em 0;
  font-size: 0.9em;
  overflow-x: auto;
  display: block;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.markdown-content table::-webkit-scrollbar {
  height: 6px;
}
.markdown-content table::-webkit-scrollbar-track {
  background: var(--q-void1);
}
.markdown-content table::-webkit-scrollbar-thumb {
  background: var(--q-stone3);
}
.markdown-content th,
.markdown-content td {
  padding: 4px 8px;
  border: 1px solid var(--q-stone3);
  text-align: left;
}
.markdown-content th {
  background: var(--q-stone2);
  font-family: var(--font-display);
  font-size: 0.85em;
  letter-spacing: 1px;
  color: var(--q-bone2);
}
.markdown-content td {
  background: var(--q-void1);
}

/* Task lists (GFM) */
.markdown-content input[type="checkbox"] {
  margin-right: 0.4em;
  accent-color: var(--q-slime1);
}

/* Images - constrain within bubble */
.markdown-content img {
  max-width: 100%;
  height: auto;
}

/* User message overrides (dark text on copper gradient) */
.markdown-user code {
  background: rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 0, 0, 0.2);
  color: inherit;
}
.markdown-user pre {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.15);
}
.markdown-user pre code {
  color: inherit;
}
.markdown-user a {
  color: var(--q-void0);
  font-weight: 500;
}
.markdown-user blockquote {
  border-left-color: rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.1);
  color: inherit;
}
.markdown-user th {
  background: rgba(0, 0, 0, 0.15);
  color: inherit;
}
.markdown-user td {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}
.markdown-user th {
  border-color: rgba(0, 0, 0, 0.15);
}

/* Guardian mode thread indicator */
.guardian-thread {
  position: relative;
}

.guardian-thread::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.guardian-thread.uncertain::after {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.guardian-thread.misaligned::after {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
  animation: pulse-alert 2s ease-in-out infinite;
}

@keyframes pulse-alert {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

/* Alignment status badge */
.alignment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.alignment-badge.aligned {
  background-color: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.alignment-badge.uncertain {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.alignment-badge.misaligned {
  background-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Guardian mode header indicator */
.guardian-mode-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, transparent 100%);
  border-left: 3px solid #10b981;
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.875rem;
  color: #34d399;
}

.guardian-mode-indicator svg {
  width: 1rem;
  height: 1rem;
}

/* PM report card styling */
.pm-report-card {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.1) 0%, rgba(146, 64, 14, 0.1) 100%);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 0.75rem;
  padding: 1rem;
  margin: 0.5rem 0;
}

.pm-report-card .report-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fbbf24;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* Traffic light response styling */
.traffic-light-response {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  padding: 0.5rem;
}

.traffic-light-response.with-rationale {
  flex-direction: column;
  gap: 0.5rem;
}

.traffic-light-response .rationale {
  font-size: 0.875rem;
  color: #9ca3af;
  text-align: center;
  max-width: 400px;
}

/* Assignment Pane - responsive width (50% of chat area on desktop) */
.assignment-pane {
  flex: 1 1 clamp(20rem, 40vw, 32rem);
  min-width: 20rem;
  max-width: 40rem;
}

.assignment-pane.collapsed {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
}

.assignment-pane-inner {
  width: clamp(20rem, 40vw, 32rem);
  min-width: 20rem;
  max-width: 40rem;
}

/* Thread sidebar in ChatPanel - responsive width */
.thread-sidebar {
  width: clamp(14rem, 20vw, 18rem);
  min-width: 14rem;
  max-width: 18rem;
  flex-shrink: 0;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
  .sidebar {
    width: clamp(10rem, 18vw, 14rem);
    min-width: 10rem;
  }

  .chat-sidebar {
    width: clamp(12rem, 20vw, 16rem);
    min-width: 12rem;
  }

  .assignment-pane {
    flex: 1 1 clamp(16rem, 35vw, 28rem);
    min-width: 16rem;
    max-width: 28rem;
  }

  .assignment-pane-inner {
    width: clamp(16rem, 35vw, 28rem);
    min-width: 16rem;
    max-width: 28rem;
  }

  .threads-pane-expanded {
    width: clamp(12rem, 18vw, 16rem);
    min-width: 12rem;
    max-width: 16rem;
  }
}

@media (max-width: 1024px) {
  .sidebar {
    width: clamp(9rem, 16vw, 12rem);
    min-width: 9rem;
  }

  .chat-sidebar {
    width: clamp(10rem, 18vw, 14rem);
    min-width: 10rem;
  }

  .assignment-pane {
    flex: 1 1 clamp(14rem, 30vw, 24rem);
    min-width: 14rem;
    max-width: 24rem;
  }

  .assignment-pane-inner {
    width: clamp(14rem, 30vw, 24rem);
    min-width: 14rem;
    max-width: 24rem;
  }

  .thread-sidebar {
    width: clamp(10rem, 18vw, 14rem);
    min-width: 10rem;
  }

  .threads-pane-expanded {
    width: clamp(10rem, 16vw, 14rem);
    min-width: 10rem;
    max-width: 14rem;
  }
}

@media (max-width: 900px) {
  .sidebar {
    width: clamp(8rem, 14vw, 10rem);
    min-width: 8rem;
  }

  .chat-sidebar {
    width: clamp(8rem, 16vw, 12rem);
    min-width: 8rem;
  }

  .assignment-pane {
    flex: 1 1 clamp(12rem, 28vw, 20rem);
    min-width: 12rem;
    max-width: 20rem;
  }

  .assignment-pane-inner {
    width: clamp(12rem, 28vw, 20rem);
    min-width: 12rem;
    max-width: 20rem;
  }

  .thread-sidebar {
    width: clamp(8rem, 16vw, 12rem);
    min-width: 8rem;
  }

  .threads-pane-expanded {
    width: clamp(8rem, 14vw, 12rem);
    min-width: 8rem;
    max-width: 12rem;
  }

  .sidebar-expanded {
    width: clamp(8rem, 14vw, 10rem);
    min-width: 8rem;
  }
}

/* Ensure collapsed sidebar maintains fixed width at all screen sizes - must be last */
.sidebar.sidebar-collapsed {
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  max-width: 3.5rem !important;
}

/* ============================================
   Provider Logo Styles - WP-1 UI Polish
   D1: Provider logos replace StatusDot+shortId
   D2: Status via glow effects
   ============================================ */

/* Base provider logo container - transparent with glow behind logo */
.provider-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  /* No border-radius or background - glow halos the SVG logo directly */
  border-radius: 50%;
  transition: filter 0.2s ease, opacity 0.2s ease;
  flex-shrink: 0;
  position: relative;
}

/* Provider logo image - sized to fit container with transparent background */
.provider-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Ensure transparent backgrounds render correctly */
  background: transparent;
}

/* Glow effect behind logo using pseudo-element */
.provider-logo::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  z-index: -1;
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

/* D2: Status glow effects - applied via pseudo-element for halo effect */

/* Pending: muted/dimmed appearance */
.job-glow-pending {
  opacity: 0.5;
  filter: grayscale(30%);
}

.job-glow-pending::before {
  opacity: 0;
}

/* Running: pulsing glow with provider color */
.job-glow-running::before {
  animation: job-pulse-glow 2s ease-in-out infinite;
}

/* Complete: green glow */
.job-glow-complete::before {
  box-shadow: 0 0 8px 3px rgba(34, 197, 94, 0.6),
              0 0 16px 6px rgba(34, 197, 94, 0.3);
}

/* Failed: red glow */
.job-glow-failed::before {
  box-shadow: 0 0 8px 3px rgba(239, 68, 68, 0.6),
              0 0 16px 6px rgba(239, 68, 68, 0.3);
}

/* Default running pulse animation (purple) */
@keyframes job-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 6px 2px rgba(147, 51, 234, 0.5);
  }
  50% {
    box-shadow: 0 0 14px 6px rgba(147, 51, 234, 0.7),
                0 0 24px 10px rgba(147, 51, 234, 0.35);
  }
}

/* Provider-specific running glows - Claude/Anthropic (orange) */
.text-orange-400.job-glow-running::before {
  animation-name: job-pulse-glow-orange;
}

/* Provider-specific running glows - Codex/OpenAI (green) */
.text-green-400.job-glow-running::before {
  animation-name: job-pulse-glow-green;
}

/* Provider-specific running glows - Gemini/Google (blue) */
.text-blue-400.job-glow-running::before {
  animation-name: job-pulse-glow-blue;
}

@keyframes job-pulse-glow-orange {
  0%, 100% {
    box-shadow: 0 0 6px 2px rgba(251, 146, 60, 0.5);
  }
  50% {
    box-shadow: 0 0 14px 6px rgba(251, 146, 60, 0.7),
                0 0 24px 10px rgba(251, 146, 60, 0.35);
  }
}

@keyframes job-pulse-glow-green {
  0%, 100% {
    box-shadow: 0 0 6px 2px rgba(74, 222, 128, 0.5);
  }
  50% {
    box-shadow: 0 0 14px 6px rgba(74, 222, 128, 0.7),
                0 0 24px 10px rgba(74, 222, 128, 0.35);
  }
}

@keyframes job-pulse-glow-blue {
  0%, 100% {
    box-shadow: 0 0 6px 2px rgba(96, 165, 250, 0.5);
  }
  50% {
    box-shadow: 0 0 14px 6px rgba(96, 165, 250, 0.7),
                0 0 24px 10px rgba(96, 165, 250, 0.35);
  }
}

/* JobNode base styles */
.job-node {
  position: relative;
}

/* ============================================
   WP-5: Responsive Breakpoints
   Desktop (>1440px), Laptop (1024-1440px),
   Tablet (768-1024px), Mobile (<768px)
   ============================================ */

/* CSS Custom Properties for breakpoint-aware theming */
:root {
  /* Breakpoint values (for reference, actual breakpoints use @media) */
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
  --bp-laptop: 1440px;

  /* Sidebar/pane widths at different breakpoints */
  --sidebar-width-desktop: clamp(14rem, 18vw, 20rem);
  --sidebar-width-laptop: clamp(12rem, 20vw, 18rem);
  --sidebar-width-tablet: clamp(10rem, 16vw, 14rem);

  --threads-width-desktop: clamp(16rem, 18vw, 20rem);
  --threads-width-laptop: clamp(14rem, 20vw, 18rem);
  --threads-width-tablet: clamp(10rem, 16vw, 14rem);

  --assignment-width-desktop: clamp(24rem, 45vw, 40rem);
  --assignment-width-laptop: clamp(20rem, 40vw, 32rem);
  --assignment-width-tablet: clamp(16rem, 35vw, 24rem);
}

/* ============================================
   Desktop breakpoint (>1440px) - Full spacious layout
   ============================================ */
@media (min-width: 1441px) {
  .sidebar {
    width: var(--sidebar-width-desktop);
    min-width: 14rem;
    max-width: 20rem;
  }

  .sidebar-expanded {
    width: var(--sidebar-width-desktop);
    min-width: 14rem;
    max-width: 20rem;
  }

  .threads-pane-expanded {
    width: var(--threads-width-desktop);
    min-width: 16rem;
    max-width: 20rem;
  }

  .chat-sidebar {
    width: var(--threads-width-desktop);
    min-width: 16rem;
    max-width: 20rem;
  }

  .assignment-pane {
    flex: 1 1 var(--assignment-width-desktop);
    min-width: 24rem;
    max-width: 40rem;
  }

  .assignment-pane-inner {
    width: var(--assignment-width-desktop);
    min-width: 24rem;
    max-width: 40rem;
  }

  .thread-sidebar {
    width: var(--threads-width-desktop);
    min-width: 16rem;
    max-width: 20rem;
  }
}

/* ============================================
   Laptop breakpoint (1024-1440px) - Default comfortable layout
   Already defined in base styles via clamp()
   ============================================ */

/* ============================================
   Tablet breakpoint (768-1024px)
   Auto-collapse namespaces pane, compact widths
   ============================================ */
@media (max-width: 1024px) and (min-width: 768px) {
  /* Mark body as tablet mode for JS detection */
  body {
    --responsive-mode: 'tablet';
  }

  /* Tighter sidebar dimensions */
  .sidebar {
    width: var(--sidebar-width-tablet);
    min-width: 10rem;
    max-width: 14rem;
  }

  .sidebar-expanded {
    width: var(--sidebar-width-tablet);
    min-width: 10rem;
    max-width: 14rem;
  }

  /* Threads pane - more compact */
  .threads-pane-expanded {
    width: var(--threads-width-tablet);
    min-width: 10rem;
    max-width: 14rem;
  }

  .chat-sidebar {
    width: var(--threads-width-tablet);
    min-width: 10rem;
    max-width: 14rem;
  }

  /* Assignment pane - flexible width for 50% chat area */
  .assignment-pane {
    flex: 1 1 var(--assignment-width-tablet);
    min-width: 16rem;
    max-width: 24rem;
  }

  .assignment-pane-inner {
    width: var(--assignment-width-tablet);
    min-width: 16rem;
    max-width: 24rem;
  }

  .thread-sidebar {
    width: var(--threads-width-tablet);
    min-width: 10rem;
    max-width: 14rem;
  }

  /* Reduce padding and font sizes slightly */
  .sidebar-branding h1 {
    font-size: 1rem;
  }

  .empty-state {
    padding: 2rem;
  }

  .empty-state-icon {
    width: 3rem;
    height: 3rem;
  }

  /* Slightly compact job cards on tablet */
  .job-node {
    min-width: 155px !important;
  }

  .job-node__header {
    padding: 6px 10px 5px !important;
  }

  .job-node__stats {
    padding: 3px 10px 6px !important;
  }

  .job-node__footer {
    padding: 4px 10px !important;
  }

  .job-node__stat-value {
    font-size: 16px !important;
  }

  .job-node__type {
    font-size: 12px !important;
  }
}

/* ============================================
   Mobile breakpoint (<768px)
   Drawer-based navigation, stacked layout
   ============================================ */
@media (max-width: 767px) {
  /* Mark body as mobile mode for JS detection */
  body {
    --responsive-mode: 'mobile';
  }

  /* App layout switches to column for stacking */
  .app-layout {
    flex-direction: column;
  }

  /* Main sidebar becomes a drawer overlay (already defined at 768px) */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 80vw !important;
    max-width: 20rem !important;
    min-width: 16rem !important;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
  }

  .sidebar.sidebar-mobile-open {
    transform: translateX(0);
  }

  /* Override collapsed state on mobile - drawers are either open or closed */
  .sidebar.sidebar-collapsed {
    width: 80vw !important;
    max-width: 20rem !important;
    min-width: 16rem !important;
    transform: translateX(-100%);
  }

  .sidebar.sidebar-collapsed.sidebar-mobile-open {
    transform: translateX(0);
  }

  /* Overlay backdrop for drawer */
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
  }

  /* Chat panel adjustments */
  .chat-panel {
    flex-direction: column;
  }

  /* Threads pane becomes a drawer from the left */
  .threads-pane {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 80vw !important;
    max-width: 18rem !important;
    min-width: 14rem !important;
    z-index: 45;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
  }

  .threads-pane.threads-mobile-open {
    transform: translateX(0);
  }

  /* Override collapsed state for mobile threads */
  .threads-pane-collapsed {
    width: 80vw !important;
    max-width: 18rem !important;
    min-width: 14rem !important;
    transform: translateX(-100%);
  }

  .threads-pane-collapsed.threads-mobile-open {
    transform: translateX(0);
  }

  .threads-pane-expanded {
    width: 80vw !important;
    max-width: 18rem !important;
    min-width: 14rem !important;
  }

  /* Threads overlay */
  .threads-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 44;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .threads-overlay.visible {
    opacity: 1;
    visibility: visible;
  }

  /* Assignment pane becomes a full-width drawer from the right */
  .assignment-pane {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw !important;
    max-width: none !important;
    min-width: unset !important;
    z-index: 45;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
  }

  .assignment-pane:not(.collapsed) {
    transform: translateX(0);
  }

  .assignment-pane-inner {
    width: 100%;
    min-width: unset;
    max-width: unset;
  }

  /* Assignment overlay */
  .assignment-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 44;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .assignment-overlay.visible {
    opacity: 1;
    visibility: visible;
  }

  /* Mobile header bar for triggering drawers */
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--q-stone1);
    border-bottom: 1px solid var(--q-stone3);
    flex-shrink: 0;
    z-index: 30;
  }

  .mobile-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0;
    background: transparent;
    border: none;
    color: var(--q-bone0);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .mobile-header-btn:hover {
    background-color: var(--q-stone2);
    color: var(--q-bone3);
  }

  .mobile-header-btn svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .mobile-header-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    color: var(--q-bone3);
    letter-spacing: 2px;
    text-align: center;
    flex: 1;
  }

  /* Chat view takes full width on mobile */
  .chat-view-mobile {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Reduce empty state padding on mobile */
  .empty-state {
    padding: 1.5rem;
  }

  .empty-state-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.75rem;
  }

  /* Compact message bubbles */
  .message-bubble {
    max-width: 90%;
  }

  /* Full-width chat input on mobile */
  .chat-input-container {
    padding: 0.75rem;
  }

  /* Job chain vertical by default, more compact */
  .job-chain-container {
    padding: 0.5rem;
  }

  /* Compact job cards on mobile */
  .job-node {
    min-width: 130px !important;
  }

  .job-node__header {
    padding: 5px 8px 4px !important;
    gap: 6px !important;
  }

  .job-node__stats {
    padding: 2px 8px 4px !important;
    gap: 2px !important;
  }

  .job-node__footer {
    padding: 3px 8px !important;
  }

  /* Smaller provider logos on mobile */
  .job-node .provider-logo-glow img {
    width: 18px !important;
    height: 18px !important;
  }

  /* Compact type badge */
  .job-node__type {
    font-size: 11px !important;
    letter-spacing: 1px !important;
  }

  /* Reduce FRAGS/DMG stat values */
  .job-node__stat-value {
    font-size: 14px !important;
  }

  /* Compact status rune in job cards */
  .job-status-rune {
    padding: 2px 5px !important;
    font-size: 7px !important;
    gap: 3px !important;
  }

  /* Thinner health/armor bars */
  .job-chain-container {
    --t-bar-height-health: 4px;
  }

  /* Assignment rollup stats: stack label above value on mobile */
  .rollup-stat {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1px !important;
  }
  .rollup-stat__label {
    font-size: 7px !important;
  }
  .rollup-stat__value {
    font-size: 12px !important;
  }
  .assignment-rollup {
    justify-content: space-evenly !important;
    gap: 0 !important;
    padding: 4px 8px !important;
  }

  /* Tooltip positioning adjustments for mobile */
  .tooltip-content {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
  }

  /* Hide message avatars on mobile - messages use margin to indicate sender */
  .message-avatar {
    display: none !important;
  }

  /* Widen message content when avatars hidden */
  .message-content-wrapper {
    max-width: 92% !important;
    gap: 0 !important;
  }

  /* Hide desktop ChatHeader on mobile (content is in MobileChatHeader) */
  .chat-header {
    display: none !important;
  }

  /* Fix scrollbar: prevent main-content from creating its own scrollbar */
  .main-content {
    overflow: hidden;
  }

  /* Mobile chat header - comprehensive header for chat view */
  .mobile-chat-header {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    background-color: var(--q-stone1);
    border-bottom: 1px solid var(--q-stone3);
    flex-shrink: 0;
    z-index: 30;
    min-height: 44px;
  }

  .mobile-chat-header .mobile-header-btn {
    padding: 6px;
    border-radius: 0;
  }

  .mobile-chat-header .mobile-header-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* ============================================
   Utility classes for responsive visibility
   ============================================ */
.hide-mobile {
  display: block;
}

.show-mobile {
  display: none;
}

@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  .show-mobile-flex {
    display: flex !important;
  }

  .show-mobile-inline-flex {
    display: inline-flex !important;
  }
}

.hide-tablet {
  display: block;
}

.show-tablet {
  display: none;
}

@media (max-width: 1024px) and (min-width: 768px) {
  .hide-tablet {
    display: none !important;
  }

  .show-tablet {
    display: block !important;
  }

  .show-tablet-flex {
    display: flex !important;
  }
}

/* ============================================
   Focus trap utility for accessibility
   Collapsed content should not be focusable
   ============================================ */
.collapsed [tabindex],
.collapsed button,
.collapsed a,
.collapsed input,
.collapsed textarea,
.collapsed select,
.sidebar-collapsed [tabindex]:not(.sidebar-collapse-btn),
.sidebar-collapsed button:not(.sidebar-collapse-btn):not([title]),
.sidebar-collapsed a,
.sidebar-collapsed input,
.threads-pane-collapsed [tabindex]:not([class*="toggle"]),
.threads-pane-collapsed button:not([class*="toggle"]):not([title]),
.threads-pane-collapsed a,
.threads-pane-collapsed input {
  visibility: hidden;
}

/* Allow interactive elements when visible */
.sidebar-collapsed button[title] {
  visibility: visible;
}

.sidebar-collapsed .sidebar-collapse-btn,
.threads-pane-collapsed button.threads-toggle,
.threads-pane-collapsed .threads-toggle {
  visibility: visible;
}

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Running border pulse animation */
@keyframes running-border-pulse {
  0%, 100% { 
    border-color: rgba(168, 85, 247, 1);
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4);
  }
  50% { 
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0);
  }
}

.running-border-pulse {
  animation: running-border-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================
   WP-3: EFFECTS LAYER
   Grain overlay, scanline sweep, torch flicker, fullbright pulse
   ============================================ */

/* Torch flicker - organic flame-like opacity variation */
@keyframes torch-flicker {
  0%, 90%, 100% {
    opacity: 1;
  }
  91% {
    opacity: 1;
  }
  92% {
    opacity: 0.85;
  }
  93% {
    opacity: 1;
  }
  96% {
    opacity: 0.92;
  }
  97% {
    opacity: 1;
  }
}

/* Torch flicker (camelCase variant for JS inline styles - per brandkit.jsx) */
@keyframes torchFlicker {
  0%, 100% { opacity: 1; }
  91% { opacity: 1; }
  92% { opacity: 0.85; }
  93% { opacity: 1; }
  96% { opacity: 0.92; }
  97% { opacity: 1; }
}

/* Fullbright pulse - status indicator glow cycling */
@keyframes fullbright-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Cursor blink - console cursor animation */
@keyframes cursor-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Scanline movement - vertical sweep */
@keyframes scanline-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100vh);
  }
}

/* Utility class for torch flicker effect */
.torch-flicker {
  animation: torch-flicker 6s infinite;
}

/* Utility class for fullbright pulse effect */
.fullbright-pulse {
  animation: fullbright-pulse 2.5s ease-in-out infinite;
}

/* Utility class for cursor blink */
.cursor-blink {
  animation: cursor-blink 1s step-end infinite;
}

/* Grain overlay positioning - fixed fullscreen */
.grain-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--t-fx-grain-opacity, 0.7);
  mix-blend-mode: overlay;
}

/* Scanline sweep - animated horizontal line */
.scanline-sweep {
  position: fixed;
  left: 0;
  right: 0;
  height: 1px;
  top: 0;
  background: linear-gradient(90deg,
    transparent 5%,
    var(--q-copper1-06) 30%,
    var(--q-copper1-06) 70%,
    transparent 95%);
  z-index: 9998;
  pointer-events: none;
  animation: scanline-move 5s linear infinite;
  will-change: transform;
}

/* Mobile: Disable effects for performance */
@media (max-width: 767px) {
  .grain-overlay {
    display: none;
  }

  .scanline-sweep {
    display: none;
  }
}

/* Reduced motion: Disable all effect animations and hide overlays */
@media (prefers-reduced-motion: reduce) {
  .torch-flicker {
    animation: none;
  }

  .fullbright-pulse {
    animation: none;
    opacity: 1;
  }

  .cursor-blink {
    animation: none;
    opacity: 1;
  }

  .grain-overlay {
    display: none;
  }

  .scanline-sweep {
    animation: none;
    display: none;
  }
}

/* ============================================
   WP-4: SHARED COMPONENT STYLES
   StatusRune, QButton, RuneInput patterns
   ============================================ */

/* StatusRune - Fullbright status indicator pattern */
.status-rune {
  font-family: var(--font-display);
  font-size: var(--t-type-size-badge);
  letter-spacing: var(--t-type-tracking-normal);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--t-space-xs) + 1px);
  padding: calc(var(--t-space-xs) - 1px) var(--t-space-sm);
}

.status-rune--active,
.status-rune--running {
  color: var(--q-slime1);
  background: rgba(60, 116, 32, 0.12);
  border: 1px solid rgba(60, 116, 32, 0.33);
}

.status-rune--pending,
.status-rune--idle {
  color: var(--q-torch);
  background: rgba(212, 160, 48, 0.12);
  border: 1px solid rgba(212, 160, 48, 0.33);
}

.status-rune--blocked,
.status-rune--failed,
.status-rune--error {
  color: var(--q-lava1);
  background: rgba(196, 56, 24, 0.12);
  border: 1px solid rgba(196, 56, 24, 0.33);
}

.status-rune--complete {
  color: var(--q-slime1);
  background: rgba(60, 116, 32, 0.12);
  border: 1px solid rgba(60, 116, 32, 0.33);
}

.status-rune--offline,
.status-rune--unknown {
  color: var(--q-iron1);
  background: rgba(80, 76, 64, 0.12);
  border: 1px solid rgba(80, 76, 64, 0.33);
}

.status-rune--warp {
  color: var(--q-teleport-bright);
  background: rgba(124, 88, 160, 0.12);
  border: 1px solid rgba(124, 88, 160, 0.33);
}

/* Fullbright dot - glowing status indicator */
.fullbright-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor, 0 0 14px currentColor;
}

.fullbright-dot--sm {
  width: 5px;
  height: 5px;
  box-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
}

.fullbright-dot--lg {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 9px currentColor, 0 0 18px currentColor;
}

/* QButton styles - Quake-inspired button patterns */
.q-btn {
  font-family: var(--font-display);
  letter-spacing: var(--t-type-tracking-normal);
  text-transform: uppercase;
  border-radius: var(--t-border-radius);
  cursor: pointer;
  transition: all var(--t-anim-transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.q-btn--sm {
  padding: var(--t-button-py-sm) var(--t-button-px-sm);
  font-size: var(--t-button-fs-sm);
}

.q-btn--md {
  padding: var(--t-button-py-md) var(--t-button-px-md);
  font-size: var(--t-button-fs-md);
}

.q-btn--lg {
  padding: var(--t-button-py-lg) var(--t-button-px-lg);
  font-size: var(--t-button-fs-lg);
}

.q-btn--primary {
  background: linear-gradient(180deg, var(--q-copper1), var(--q-copper0));
  border: var(--t-border-width-standard) solid var(--q-copper2);
  border-top-color: var(--q-copper2-88);
  border-bottom: var(--t-border-width-depth) solid var(--q-void0);
  color: var(--q-void0);
  text-shadow: 0 1px 0 var(--q-copper3-44);
}

.q-btn--primary:hover {
  background: linear-gradient(180deg, var(--q-copper2), var(--q-copper1));
  box-shadow: 0 0 var(--t-fx-glow-md) var(--q-torch-33);
}

.q-btn--primary:active {
  transform: translateY(var(--t-anim-press-depth));
}

.q-btn--runic {
  background: linear-gradient(180deg, var(--q-stone2), var(--q-stone1));
  border: var(--t-border-width-standard) solid var(--q-iron1);
  border-bottom: var(--t-border-width-depth) solid var(--q-void0);
  color: var(--q-bone2);
}

.q-btn--runic:hover {
  background: linear-gradient(180deg, var(--q-stone3), var(--q-stone2));
}

.q-btn--lava {
  background: linear-gradient(180deg, var(--q-lava0), var(--q-blood));
  border: var(--t-border-width-standard) solid var(--q-lava1);
  border-bottom: var(--t-border-width-depth) solid var(--q-void0);
  color: var(--q-bone4);
  text-shadow: 0 1px 2px rgba(6, 5, 4, 0.53);
}

.q-btn--lava:hover {
  background: linear-gradient(180deg, var(--q-lava1), var(--q-lava0));
  box-shadow: 0 0 var(--t-fx-glow-md) var(--q-lava1-44);
}

.q-btn--slime {
  background: linear-gradient(180deg, var(--q-slime0), #1c3c10);
  border: var(--t-border-width-standard) solid var(--q-slime1);
  border-bottom: var(--t-border-width-depth) solid var(--q-void0);
  color: var(--q-bone4);
  text-shadow: 0 1px 2px rgba(6, 5, 4, 0.53);
}

.q-btn--slime:hover {
  background: linear-gradient(180deg, var(--q-slime1), var(--q-slime0));
  box-shadow: 0 0 calc(var(--t-fx-glow-md) - 2px) rgba(60, 116, 32, 0.33);
}

.q-btn--teleport {
  background: linear-gradient(180deg, var(--q-teleport), #3c2858);
  border: var(--t-border-width-standard) solid var(--q-teleport-bright);
  border-bottom: var(--t-border-width-depth) solid var(--q-void0);
  color: var(--q-bone4);
}

.q-btn--teleport:hover {
  background: linear-gradient(180deg, var(--q-teleport-bright), var(--q-teleport));
  box-shadow: 0 0 calc(var(--t-fx-glow-md) + 2px) rgba(92, 60, 124, 0.44);
}

.q-btn--ghost {
  background: transparent;
  border: var(--t-border-width-standard) solid transparent;
  color: var(--q-bone1);
}

.q-btn--ghost:hover {
  background: rgba(40, 33, 26, 0.53);
  border-color: var(--q-iron0);
}

.q-btn:disabled {
  background: var(--q-stone2);
  border-color: var(--q-stone3);
  color: var(--q-bone0);
  cursor: not-allowed;
  opacity: var(--t-button-disabled-opacity);
  box-shadow: none;
  transform: none;
}

/* Skeleton loading - Q palette */
.skeleton-q {
  background: linear-gradient(
    90deg,
    var(--q-stone1) 25%,
    var(--q-stone2) 50%,
    var(--q-stone1) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* JSON Viewer - Q palette syntax highlighting */
.json-viewer-q {
  font-family: var(--font-console);
  font-size: var(--t-type-size-console);
  line-height: var(--t-type-leading-console-line);
  white-space: pre-wrap;
  word-break: break-word;
  background-color: var(--q-void1);
  border: var(--t-border-width-standard) solid var(--q-stone3);
  border-radius: var(--t-border-radius);
}

.json-key-q { color: var(--q-copper3); }
.json-string-q { color: var(--q-slime1); }
.json-number-q { color: var(--q-torch); }
.json-boolean-q { color: var(--q-teleport-bright); }
.json-null-q { color: var(--q-bone0); }

/* EmptyState - Q palette */
.empty-state-q {
  color: var(--q-bone0);
}

.empty-state-q .empty-state-icon {
  color: var(--q-bone0);
}

.empty-state-q .empty-state-title {
  color: var(--q-bone3);
}

.empty-state-q .empty-state-description {
  color: var(--q-bone0);
}

/* ErrorBoundary - Q palette lava/danger theme */
.error-boundary-q {
  background-color: var(--q-stone1);
  border: var(--t-border-width-standard) solid var(--q-lava1-44);
  border-radius: var(--t-border-radius);
}

.error-boundary-q .error-icon {
  color: var(--q-lava1);
}

.error-boundary-q .error-title {
  color: var(--q-lava1);
}

.error-boundary-q .error-message {
  color: var(--q-bone1);
}

.error-boundary-q .error-details {
  background-color: var(--q-void1);
  border: var(--t-border-width-standard) solid var(--q-stone3);
  color: var(--q-bone0);
}

.error-boundary-q .error-details summary {
  color: var(--q-bone0);
}

.error-boundary-q .error-details summary:hover {
  color: var(--q-bone1);
}

/* Timestamp - Q palette bone colors */
.timestamp-q {
  color: var(--q-bone1);
}

.timestamp-q--muted {
  color: var(--q-bone0);
}

.timestamp-q .timestamp-secondary {
  color: var(--q-bone0);
}

/* Tooltip - Q palette */
.tooltip-q .tooltip-content {
  background-color: var(--q-stone1);
  border: var(--t-border-width-standard) solid var(--q-stone3);
  color: var(--q-bone2);
}

/* ============================================
   WP-5: NAMESPACE COMPONENT STYLES
   Sidebar, cards, search, metrics
   ============================================ */

/* RuneInput - Styled text input with copper focus glow */
.rune-input {
  width: 100%;
  padding: calc(var(--t-space-sm) + 1px) var(--t-space-md);
  font-family: var(--font-console);
  font-size: var(--t-type-size-stat-small);
  color: var(--q-bone3);
  background: var(--q-void1);
  border: var(--t-border-width-standard) solid var(--q-stone3);
  border-bottom: var(--t-border-width-depth) solid var(--q-void0);
  border-radius: var(--t-border-radius);
  outline: none;
  transition: all var(--t-anim-transition-normal);
  box-sizing: border-box;
}

.rune-input:focus {
  border-color: var(--q-copper1);
  border-bottom-color: var(--q-copper0);
  box-shadow: 0 0 var(--t-fx-glow-md) rgba(122, 78, 40, 0.09), inset 0 0 var(--t-fx-glow-lg) rgba(92, 58, 30, 0.05);
}

.rune-input::placeholder {
  color: var(--q-bone0);
  opacity: 0.6;
}

/* Sidebar container with copper texture */
.sidebar-q {
  background: var(--q-stone0);
}

/* Branded sidebar header */
.sidebar-header-q {
  background: linear-gradient(180deg, var(--q-stone1) 0%, var(--q-stone0) 100%);
  border-bottom: var(--t-border-width-standard) solid var(--q-stone3);
  position: relative;
}

.sidebar-header-q::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--q-copper1-44), var(--q-copper0-30), transparent);
}

/* "Workflow Engine" title */
.sidebar-title-q {
  font-family: var(--font-display);
  font-size: var(--t-type-size-heading);
  color: var(--q-torch);
  letter-spacing: var(--t-type-tracking-wide);
  text-shadow: 0 0 var(--t-fx-glow-lg) rgba(212, 160, 48, 0.22);
  text-transform: uppercase;
  margin: 0;
}

/* Namespace card styling */
.namespace-card-q {
  transition: background-color var(--t-anim-transition-fast);
}

.namespace-card-q:hover {
  background-color: var(--q-stone1);
}

.namespace-card-q--selected {
  background-color: var(--q-stone2);
  border-left: var(--t-border-width-depth) solid var(--q-torch);
}

.namespace-card-q--selected:hover {
  background-color: var(--q-stone2);
}

/* Status count badges */
.count-badge-q {
  font-family: var(--font-display);
  font-size: var(--t-type-size-badge);
  letter-spacing: var(--t-type-tracking-tight);
  padding: 2px 6px;
  border-radius: var(--t-border-radius);
}

.count-badge-q--pending {
  background: rgba(212, 160, 48, 0.2);
  color: var(--q-torch);
}

.count-badge-q--active {
  background: rgba(60, 116, 32, 0.2);
  color: var(--q-slime1);
}

.count-badge-q--blocked {
  background: rgba(196, 56, 24, 0.2);
  color: var(--q-lava1);
}

.count-badge-q--complete {
  background: rgba(44, 84, 24, 0.2);
  color: var(--q-slime1);
}

/* Metric cards in namespace header */
.metric-card-q {
  background-color: var(--q-stone1);
  border: var(--t-border-width-standard) solid var(--q-stone3);
  border-radius: var(--t-border-radius);
  padding: var(--t-space-md);
  text-align: center;
  min-width: 80px;
}

.metric-card-q--pending {
  border-color: rgba(212, 160, 48, 0.33);
}

.metric-card-q--active {
  border-color: var(--q-slime1-44);
}

.metric-card-q--blocked {
  border-color: var(--q-lava1-44);
}

.metric-card-q--complete {
  border-color: var(--q-slime1-44);
}

.metric-card-q .metric-value {
  font-family: var(--font-display);
  font-size: var(--t-type-size-stat-medium);
  line-height: var(--t-type-leading-tight);
}

.metric-card-q .metric-label {
  font-family: var(--font-console);
  font-size: var(--t-type-size-label-small);
  color: var(--q-bone0);
  text-transform: capitalize;
}

/* Collapse toggle button */
.collapse-btn-q {
  padding: var(--t-space-xs);
  color: var(--q-bone0);
  background: transparent;
  border: none;
  border-radius: var(--t-border-radius);
  cursor: pointer;
  transition: all var(--t-anim-transition-fast);
}

.collapse-btn-q:hover {
  color: var(--q-copper3);
  background: var(--q-stone2);
}

/* ============================================
   WP-6: CHAT HEADER COMPONENT STYLES
   Title editing, status badges, action buttons
   ============================================ */

/* ChatHeader edit button */
.chat-header-edit-btn:hover {
  color: var(--q-copper2);
  background: var(--q-stone2);
}

/* ChatHeader save button (check icon) */
.chat-header-save-btn:hover {
  color: var(--q-slime1);
  background: var(--q-stone2);
}

/* ChatHeader cancel button (X icon) */
.chat-header-cancel-btn:hover {
  color: var(--q-bone1);
  background: var(--q-stone2);
}

/* ChatHeader details toggle button */
.chat-header-details-btn:hover {
  color: var(--q-bone1);
  background: var(--q-stone2);
}

/* ChatHeader title input focus state */
.chat-header input:focus {
  border-color: var(--q-copper1);
}

/* ============================================
   WP-8: CHAT PANEL COMPONENT STYLES
   Threads pane toggle, new chat button hover states
   ============================================ */

/* ChatPanel collapse/expand button - Q palette hover */
.chat-panel-collapse-btn:hover {
  color: var(--q-bone3);
  background: var(--q-stone2);
}

/* ChatPanel new chat button - Q palette copper hover */
.chat-panel-new-btn:hover {
  background-color: rgba(122, 78, 40, 0.25); /* copper1 at 25% */
  color: var(--q-copper3);
}

/* ============================================
   WP-7: JOB COMPONENTS - AgentHUD Card Styling
   JobNode, JobChain connectors, HUD meters
   ============================================ */

/* JobNode HUD base - Riveted panel with 4 corner rivets */
.job-node-hud {
  background:
    radial-gradient(circle at 8px 8px, var(--q-iron0) 2px, transparent 2px),
    radial-gradient(circle at calc(100% - 8px) 8px, var(--q-iron0) 2px, transparent 2px),
    radial-gradient(circle at 8px calc(100% - 8px), var(--q-iron0) 2px, transparent 2px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), var(--q-iron0) 2px, transparent 2px),
    linear-gradient(180deg, var(--q-stone2), var(--q-stone1));
  border: var(--t-border-width-standard) solid var(--q-stone3);
  border-top-color: var(--q-iron1-33);
  border-bottom: var(--t-border-width-depth) solid var(--q-void0);
  border-radius: var(--t-border-radius);
  padding: 0;
  overflow: hidden;
  transition: all var(--t-anim-transition-slow);
  cursor: pointer;
}

.job-node-hud:hover {
  border-color: var(--q-iron1);
  transform: translateY(var(--t-anim-hover-lift));
}

/* Status glow bar at top of JobNode */
.job-node-hud__glow-bar {
  height: 3px;
  background: linear-gradient(90deg,
    transparent,
    var(--job-glow-color, var(--q-copper1-44)),
    transparent);
}

/* JobNode status modifiers */
.job-node-hud--pending {
  --job-glow-color: var(--q-iron1-44);
  opacity: 0.7;
}

.job-node-hud--running {
  --job-glow-color: var(--q-slime1-44);
  box-shadow:
    inset 0 0 30px var(--q-slime0-08),
    0 0 20px var(--q-slime0-10);
  animation: job-node-pulse 2.5s ease-in-out infinite;
}

.job-node-hud--complete {
  --job-glow-color: var(--q-slime1-44);
}

.job-node-hud--failed,
.job-node-hud--blocked {
  --job-glow-color: var(--q-lava1-44);
  box-shadow:
    inset 0 0 30px var(--q-lava0-08),
    0 0 20px var(--q-lava0-10);
}

/* JobNode selected state */
.job-node-hud--selected {
  box-shadow:
    0 0 0 2px var(--q-copper3),
    0 0 12px var(--q-copper1-44);
}

/* JobNode pulse animation for running state */
@keyframes job-node-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 30px var(--q-slime0-08),
      0 0 20px var(--q-slime0-10);
  }
  50% {
    box-shadow:
      inset 0 0 40px var(--q-slime0-10),
      0 0 30px var(--q-slime1-44);
  }
}

/* HUD meter - health bar style for tool/token counts */
.hud-meter {
  height: var(--t-bar-height-health);
  background: var(--q-void1);
  border: var(--t-border-width-standard) solid var(--q-stone3);
  border-radius: var(--t-border-radius);
  position: relative;
  overflow: hidden;
}

.hud-meter--mini {
  height: 4px;
}

.hud-meter__fill {
  height: 100%;
  transition: width var(--t-anim-meter-duration) ease;
  box-shadow: 0 0 var(--t-fx-glow-sm) currentColor;
}

.hud-meter--health .hud-meter__fill {
  background: linear-gradient(90deg, var(--q-slime1-88), var(--q-slime1));
  color: var(--q-slime1);
}

.hud-meter--tokens .hud-meter__fill {
  background: linear-gradient(90deg, var(--q-copper1-88), var(--q-copper3));
  color: var(--q-copper3);
}

.hud-meter--tools .hud-meter__fill {
  background: linear-gradient(90deg, var(--q-teleport), var(--q-teleport-bright));
  color: var(--q-teleport-bright);
}

/* Provider logo glow wrapper */
.provider-logo-glow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.provider-logo-glow::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--t-anim-transition-normal);
}

.provider-logo-glow--running::before {
  opacity: 1;
  background: radial-gradient(circle, var(--q-slime0-10), transparent 70%);
  animation: provider-glow-pulse 2s ease-in-out infinite;
}

.provider-logo-glow--complete::before {
  opacity: 0.6;
  background: radial-gradient(circle, var(--q-slime0-08), transparent 70%);
}

.provider-logo-glow--failed::before {
  opacity: 1;
  background: radial-gradient(circle, var(--q-lava0-10), transparent 70%);
}

.provider-logo-glow--pending {
  opacity: 0.5;
  filter: grayscale(30%);
}

@keyframes provider-glow-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

/* JobChain container styling */
.job-chain-container {
  background-color: var(--q-stone1);
  border: var(--t-border-width-standard) solid var(--q-stone3);
  border-radius: var(--t-border-radius);
}

/* Job node content area */
.job-node-hud__content {
  padding: var(--t-space-sm) var(--t-space-md);
}

/* Job type badge - Q palette colors */
.job-type-badge {
  font-family: var(--font-display);
  font-size: var(--t-type-size-label);
  letter-spacing: var(--t-type-tracking-normal);
  text-transform: uppercase;
}

.job-type-badge--plan { color: var(--q-teleport-bright); }
.job-type-badge--implement { color: var(--q-copper2); }
.job-type-badge--review { color: var(--q-torch); }
.job-type-badge--uat { color: var(--q-slime1); }
.job-type-badge--document { color: var(--q-copper3); }
.job-type-badge--pm { color: var(--q-torch-hot); }

/* Harness badge - provider colors */
.harness-badge {
  font-family: var(--font-console);
  font-size: var(--t-type-size-label-small);
  letter-spacing: var(--t-type-tracking-tight);
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--t-border-radius);
}

.harness-badge--claude {
  background-color: rgba(176, 120, 64, 0.12);
  color: var(--q-copper3);
  border: 1px solid rgba(176, 120, 64, 0.33);
}

.harness-badge--codex {
  background-color: rgba(60, 116, 32, 0.12);
  color: var(--q-slime1);
  border: 1px solid rgba(60, 116, 32, 0.33);
}

.harness-badge--gemini {
  background-color: rgba(124, 88, 160, 0.12);
  color: var(--q-teleport-bright);
  border: 1px solid rgba(124, 88, 160, 0.33);
}

.harness-badge--unknown {
  background-color: rgba(80, 76, 64, 0.12);
  color: var(--q-iron1);
  border: 1px solid rgba(80, 76, 64, 0.33);
}

/* HUD stat display */
.hud-stat {
  font-family: var(--font-display);
}

.hud-stat__label {
  font-size: var(--t-type-size-badge);
  color: var(--q-bone0);
  letter-spacing: var(--t-type-tracking-tight);
  text-transform: uppercase;
}

.hud-stat__value {
  font-size: var(--t-type-size-stat-small);
  color: var(--q-bone2);
}

.hud-stat__value--highlight {
  color: var(--q-torch);
  text-shadow: 0 0 var(--t-fx-glow-sm) var(--q-torch-33);
}

/* Chain connectors - iron/stone colors */
.chain-connector {
  background-color: var(--q-iron1);
}

.chain-connector__arrow {
  color: var(--q-iron1);
}

/* Job detail modal */
.job-detail-modal {
  background:
    linear-gradient(180deg, rgba(40, 33, 26, 0.3), transparent 2px),
    linear-gradient(135deg, var(--q-stone2) 0%, var(--q-stone1) 100%);
  border: var(--t-border-width-standard) solid var(--q-stone3);
  border-top-color: var(--q-iron1-44);
  border-bottom: var(--t-border-width-depth) solid var(--q-void0);
  border-radius: var(--t-border-radius);
}

.job-detail-modal__header {
  border-bottom: var(--t-border-width-standard) solid var(--q-stone3);
  background: linear-gradient(180deg, rgba(92, 58, 30, 0.1), transparent);
}

.job-detail-modal__footer {
  background-color: var(--q-stone1);
  border-top: var(--t-border-width-standard) solid var(--q-stone3);
}

/* Job card styles */
.job-card-q {
  background:
    radial-gradient(circle at 8px 8px, var(--q-iron0) 2px, transparent 2px),
    radial-gradient(circle at calc(100% - 8px) 8px, var(--q-iron0) 2px, transparent 2px),
    radial-gradient(circle at 8px calc(100% - 8px), var(--q-iron0) 2px, transparent 2px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), var(--q-iron0) 2px, transparent 2px),
    linear-gradient(180deg, var(--q-stone2), var(--q-stone1));
  border: var(--t-border-width-standard) solid var(--q-stone3);
  border-top-color: var(--q-iron1-33);
  border-bottom: var(--t-border-width-depth) solid var(--q-void0);
  border-radius: var(--t-border-radius);
  transition: all var(--t-anim-transition-normal);
}

.job-card-q:hover {
  background:
    radial-gradient(circle at 8px 8px, var(--q-iron0) 2px, transparent 2px),
    radial-gradient(circle at calc(100% - 8px) 8px, var(--q-iron0) 2px, transparent 2px),
    radial-gradient(circle at 8px calc(100% - 8px), var(--q-iron0) 2px, transparent 2px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), var(--q-iron0) 2px, transparent 2px),
    linear-gradient(180deg, var(--q-stone3), var(--q-stone2));
}

.job-card-q--selected {
  border-color: var(--q-torch);
  box-shadow: 0 0 var(--t-fx-glow-md) var(--q-torch-33);
}

/* Running job pulse animation */
@keyframes job-running-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 30px var(--q-slime0-08),
      0 0 20px var(--q-slime0-10);
  }
  50% {
    box-shadow:
      inset 0 0 40px var(--q-slime0-10),
      0 0 30px var(--q-slime1-44);
  }
}

/* Chain summary stats */
.chain-stats {
  font-family: var(--font-console);
  font-size: var(--t-type-size-label);
  color: var(--q-bone0);
}

.chain-stats__complete { color: var(--q-slime1); }
.chain-stats__running { color: var(--q-teleport-bright); }
.chain-stats__pending { color: var(--q-torch); }
.chain-stats__failed { color: var(--q-lava1); }

/* ============================================
   WP-2: FULLBRIGHT & STATUS RUNE PATTERNS
   From brandkit.jsx - glowing indicators and status badges
   ============================================ */

/* --- KEYFRAME ANIMATIONS --- */

/* Fullbright pulse animation - fbPulse */
@keyframes fbPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Torch flicker animation - torchFlicker (6s duration) */
@keyframes torchFlicker {
  0%, 100% { opacity: 1; }
  91% { opacity: 1; }
  92% { opacity: 0.85; }
  93% { opacity: 1; }
  96% { opacity: 0.92; }
  97% { opacity: 1; }
}

/* --- FULLBRIGHT DOT --- */
/* Glowing indicator dot with radial gradient and box-shadow glow layers */

.fullbright-dot {
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Size variants - sm (5px), md (7px), lg (10px) */
.fullbright-dot--sm {
  width: 5px;
  height: 5px;
}

.fullbright-dot--md {
  width: 7px;
  height: 7px;
}

.fullbright-dot--lg {
  width: 10px;
  height: 10px;
}

/* Color variants with radial gradient and glow layers */
/* fbMultiplier: [1, 2] - first glow at 1x size, second at 2x size */

/* Slime/Success fullbright */
.fullbright-dot--slime {
  background: radial-gradient(circle, var(--q-slime1), var(--q-slime1-88));
  box-shadow:
    0 0 5px var(--q-slime1-88),
    0 0 10px var(--q-slime1-44);
}
.fullbright-dot--sm.fullbright-dot--slime {
  box-shadow: 0 0 5px var(--q-slime1-88), 0 0 10px var(--q-slime1-44);
}
.fullbright-dot--lg.fullbright-dot--slime {
  box-shadow: 0 0 10px var(--q-slime1-88), 0 0 20px var(--q-slime1-44);
}

/* Torch/Warning fullbright */
.fullbright-dot--torch {
  background: radial-gradient(circle, var(--q-torch), var(--q-torch-hot-33));
  box-shadow:
    0 0 7px var(--q-torch-hot-33),
    0 0 14px var(--q-torch-22);
}
.fullbright-dot--sm.fullbright-dot--torch {
  box-shadow: 0 0 5px var(--q-torch-hot-33), 0 0 10px var(--q-torch-22);
}
.fullbright-dot--lg.fullbright-dot--torch {
  box-shadow: 0 0 10px var(--q-torch-hot-33), 0 0 20px var(--q-torch-22);
}

/* Lava/Danger fullbright */
.fullbright-dot--lava {
  background: radial-gradient(circle, var(--q-lava1), var(--q-lava1-44));
  box-shadow:
    0 0 7px var(--q-lava1-44),
    0 0 14px var(--q-lava0-10);
}
.fullbright-dot--sm.fullbright-dot--lava {
  box-shadow: 0 0 5px var(--q-lava1-44), 0 0 10px var(--q-lava0-10);
}
.fullbright-dot--lg.fullbright-dot--lava {
  box-shadow: 0 0 10px var(--q-lava1-44), 0 0 20px var(--q-lava0-10);
}

/* Iron/Offline fullbright (muted, no glow) */
.fullbright-dot--iron {
  background: radial-gradient(circle, var(--q-iron1), var(--q-iron0));
  box-shadow: none;
}

/* Teleport/Special fullbright */
.fullbright-dot--teleport {
  background: radial-gradient(circle, var(--q-teleport-bright), var(--q-teleport));
  box-shadow:
    0 0 7px rgba(124, 88, 160, 0.53),
    0 0 14px rgba(92, 60, 124, 0.27);
}
.fullbright-dot--sm.fullbright-dot--teleport {
  box-shadow: 0 0 5px rgba(124, 88, 160, 0.53), 0 0 10px rgba(92, 60, 124, 0.27);
}
.fullbright-dot--lg.fullbright-dot--teleport {
  box-shadow: 0 0 10px rgba(124, 88, 160, 0.53), 0 0 20px rgba(92, 60, 124, 0.27);
}

/* Pulse animation modifier */
.fullbright-dot--pulse {
  animation: fbPulse var(--t-anim-pulse-duration) ease-in-out infinite;
}

/* --- STATUS RUNE --- */
/* Badge-style status indicator with Fullbright dot and label */

.status-rune {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: var(--t-type-size-badge);
  letter-spacing: var(--t-type-tracking-normal);
  text-transform: uppercase;
  padding: 3px var(--t-space-sm);
  border-width: var(--t-border-width-standard);
  border-style: solid;
  border-radius: var(--t-border-radius);
}

/* Status variants - active (success/slime) */
.status-rune--active {
  color: var(--q-slime1);
  background-color: rgba(60, 116, 32, 0.07);
  border-color: rgba(60, 116, 32, 0.2);
}

/* Status variants - idle (warning/torch) */
.status-rune--idle {
  color: var(--q-torch);
  background-color: rgba(212, 160, 48, 0.07);
  border-color: rgba(212, 160, 48, 0.2);
}

/* Status variants - error (danger/lava) */
.status-rune--error {
  color: var(--q-lava1);
  background-color: rgba(196, 56, 24, 0.07);
  border-color: rgba(196, 56, 24, 0.2);
}

/* Status variants - offline (iron) */
.status-rune--offline {
  color: var(--q-iron1);
  background-color: rgba(80, 76, 64, 0.07);
  border-color: rgba(80, 76, 64, 0.2);
}

/* Status variants - warp/special (teleport) */
.status-rune--warp {
  color: var(--q-teleport-bright);
  background-color: rgba(124, 88, 160, 0.07);
  border-color: rgba(124, 88, 160, 0.2);
}

/* Torch flicker utility class for header text */
.torch-flicker {
  animation: torchFlicker 6s ease-in-out infinite;
}