/* 
========================================================================
   STYLE.CSS - PREMIUM DARK GLASSMORPHIC DESIGN SYSTEM
   Provides state-of-the-art UI styling, responsive layouts,
   glowing accents, and custom micro-animations for the playground.
========================================================================
*/

/* --- Google Fonts Integration --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* --- Design Tokens & Variables --- */
:root {
  /* Color Palette */
  --bg-deep: #08090d;
  --bg-surface: rgba(17, 19, 28, 0.7);
  --bg-card: rgba(28, 30, 43, 0.55);
  --border-color: rgba(255, 255, 255, 0.15); /* Increased contrast from 0.08 */
  --border-glow: rgba(139, 92, 246, 0.2);
  
  /* Brand/Accent Gradients */
  --primary: #8b5cf6;
  --primary-hover: #a78bfa;
  --accent-cyan: #06b6d4;
  --accent-pink: #ec4899;
  --grad-primary: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  --grad-surface: linear-gradient(145deg, rgba(20, 22, 32, 0.6) 0%, rgba(10, 11, 17, 0.75) 100%);
  --grad-glow: radial-gradient(circle at top right, rgba(139, 92, 246, 0.15) 0%, transparent 60%);

  /* UI Feedback States */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Theme Text & Component Colors (Dark Mode Defaults) (F-36) */
  --text-main: #f1f5f9;
  --text-muted: #cbd5e1; /* Increased contrast from #94a3b8 */
  --text-brand: linear-gradient(to right, #fff, #cbd5e1);
  --header-bg: rgba(10, 11, 18, 0.4);
  --sidebar-border: rgba(255, 255, 255, 0.18);
  --avatar-bg: rgba(255, 255, 255, 0.03);
  --popover-bg: rgba(10, 11, 18, 0.96);
  --popover-border: rgba(139, 92, 246, 0.2);
  --popover-color: #f1f5f9;
  --suggestion-card-bg: rgba(139, 92, 246, 0.05);
  --suggestion-card-border: rgba(139, 92, 246, 0.15);
  --user-bubble-bg: rgba(139, 92, 246, 0.15);
  --user-bubble-border: rgba(139, 92, 246, 0.25);
  --assistant-bubble-bg: rgba(255, 255, 255, 0.03);
  --assistant-bubble-border: var(--border-color);
  --pre-bg: rgba(0, 0, 0, 0.4);
  --pre-border: var(--border-color);
  --pre-color: #f1f5f9;
  --pill-bg: rgba(255, 255, 255, 0.02);
  --pill-border: rgba(255, 255, 255, 0.06);
  --input-bg: rgba(10, 11, 18, 0.6);
  --input-bg-focus: rgba(10, 11, 18, 0.85);
  --input-color: #ffffff;
  --input-panel-bg: rgba(10, 11, 18, 0.6);
  --modal-bg: rgba(28, 30, 43, 0.9);
  --scrollbar-thumb: rgba(139, 92, 246, 0.5); /* Increased contrast from 0.3 */
  --scrollbar-track: rgba(255, 255, 255, 0.02);

  /* AI Refinery context bar variables (Dark Mode) */
  --agent-context-bar-bg: rgba(0, 0, 0, 0.2);
  --agent-pill-bg: rgba(255, 255, 255, 0.02);
  --agent-pill-border: rgba(255, 255, 255, 0.08);
  --agent-bubble-context-bg: rgba(0, 0, 0, 0.25);
  --agent-bubble-context-border: rgba(255, 255, 255, 0.05);

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Layout Constants */
  --sidebar-width: 360px;
  --border-radius-lg: 20px;
  --border-radius-md: 12px;
  --border-radius-sm: 8px;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 
                    0 1px 1px 0 rgba(255, 255, 255, 0.05) inset;
  --shadow-sidebar: 5px 0 30px rgba(0, 0, 0, 0.25);
}

/* --- Light Mode Design System overrides (F-36) --- */
html[data-theme="light"] {
  /* Color Palette Overrides */
  --bg-deep: #e2e8f0; /* Darker slate background for better card contrast in light mode */
  --bg-surface: rgba(255, 255, 255, 0.75); /* clear glassmorphic surface */
  --bg-card: rgba(255, 255, 255, 0.65);
  --border-color: rgba(0, 0, 0, 0.16); /* Increased contrast from 0.08 */
  --border-glow: rgba(139, 92, 246, 0.15);

  /* Brand/Accent Gradients Overrides */
  --primary: #6d28d9; /* darker violet for better text contrast in light mode */
  --primary-hover: #5b21b6;
  --accent-cyan: #0891b2;
  --accent-pink: #db2777;
  --grad-primary: linear-gradient(135deg, #6d28d9 0%, #0891b2 100%);
  --grad-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(243, 244, 246, 0.9) 100%);
  --grad-glow: radial-gradient(circle at top right, rgba(109, 40, 217, 0.08) 0%, transparent 60%);

  --shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, 0.08), 
                    0 1px 1px 0 rgba(255, 255, 255, 1) inset;
  --shadow-sidebar: 5px 0 30px rgba(0, 0, 0, 0.06);

  /* Theme Text & Component Color Overrides */
  --text-main: #0f172a; /* Darker slate-900 for text contrast */
  --text-muted: #334155; /* Darker slate-700 for labels/secondary text */
  --text-brand: linear-gradient(to right, #0f172a, #475569);
  --header-bg: rgba(255, 255, 255, 0.4);
  --sidebar-border: rgba(0, 0, 0, 0.16);
  --avatar-bg: rgba(0, 0, 0, 0.03);
  --popover-bg: rgba(255, 255, 255, 0.98);
  --popover-border: rgba(0, 0, 0, 0.1);
  --popover-color: #0f172a;
  --suggestion-card-bg: rgba(109, 40, 217, 0.05);
  --suggestion-card-border: rgba(109, 40, 217, 0.15);
  --user-bubble-bg: rgba(109, 40, 217, 0.08);
  --user-bubble-border: rgba(109, 40, 217, 0.18);
  --assistant-bubble-bg: rgba(255, 255, 255, 0.8);
  --assistant-bubble-border: rgba(0, 0, 0, 0.12);
  --pre-bg: rgba(0, 0, 0, 0.03);
  --pre-border: rgba(0, 0, 0, 0.12);
  --pre-color: #0f172a;
  --pill-bg: rgba(0, 0, 0, 0.02);
  --pill-border: rgba(0, 0, 0, 0.1);
  --input-bg: #f1f5f9; /* Slate-100 for input background contrast */
  --input-bg-focus: #ffffff; /* White active input state */
  --input-color: #0f172a;
  --input-panel-bg: rgba(255, 255, 255, 0.55);
  --modal-bg: rgba(255, 255, 255, 0.98);
  --scrollbar-thumb: rgba(109, 40, 217, 0.5); /* Increased contrast from 0.3 */
  --scrollbar-track: rgba(0, 0, 0, 0.02);

  /* AI Refinery context bar variables (Light Mode) */
  --agent-context-bar-bg: rgba(0, 0, 0, 0.03);
  --agent-pill-bg: rgba(0, 0, 0, 0.03);
  --agent-pill-border: rgba(0, 0, 0, 0.08);
  --agent-bubble-context-bg: rgba(0, 0, 0, 0.02);
  --agent-bubble-context-border: rgba(0, 0, 0, 0.06);
}

/* --- Base Resets & Global Styles --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

body {
  background-color: var(--bg-deep);
  background-image: var(--grad-glow);
  background-attachment: fixed;
  color: var(--text-main);
  font-family: var(--font-body);
  height: 100vh;
  overflow: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --- Layout Grid --- */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.workspace-layout-wrapper {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* --- Sidebar Configuration --- */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 10;
  overflow-y: auto;
  box-shadow: var(--shadow-sidebar);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, border-right 0.3s ease;
}

@media(min-width: 1025px) {
  /* Compressed sidebar width on desktop views */
  .sidebar.collapsed {
    width: 72px !important;
    border-right: 1px solid var(--border-color) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .sidebar.collapsed .brand h1 {
    display: none !important;
  }

  .sidebar.collapsed .sidebar-header {
    padding: 16px 0;
    display: flex;
    justify-content: center;
  }

  .sidebar.collapsed .brand {
    justify-content: center;
    gap: 0;
  }

  .sidebar.collapsed .sidebar-content {
    padding: 16px 8px;
    gap: 16px;
    align-items: center;
  }

  .sidebar.collapsed .btn-generate {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .sidebar.collapsed .btn-generate .btn-text {
    display: none !important;
  }

  .sidebar.collapsed .btn-generate svg {
    margin-right: 0 !important;
  }

  .sidebar.collapsed .tracker-search-bar {
    display: none !important;
  }

  .sidebar.collapsed .tracker-tasks-list {
    align-items: center;
    width: 100%;
    gap: 12px;
  }

  .sidebar.collapsed .tracker-task-item {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    align-items: center !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .sidebar.collapsed .tracker-task-item-content {
    display: none !important;
  }
}

@media(max-width: 1024px) {
  /* Completely hide sidebar on mobile views */
  .sidebar.collapsed {
    width: 0 !important;
    border-right: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Base styles for Task Item layout and initials Avatar */
.tracker-task-item-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
  min-width: 0;
}

.task-item-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.tracker-task-item.active .task-item-avatar {
  background: var(--grad-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

.sidebar-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 32px;
  height: 32px;
  background: var(--grad-primary);
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

.brand-logo svg {
  fill: #fff;
}

.brand h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  background: var(--text-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-version {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(139, 92, 246, 0.12);
  color: var(--primary-hover);
  border: 1px solid rgba(139, 92, 246, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  align-self: center;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-left: 2px;
  flex-shrink: 0;
}


.sidebar-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-grow: 1;
}

/* --- Collapsible Panel Styling --- */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.panel:hover {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.panel-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  transition: var(--transition-smooth);
}

.panel.open .panel-header {
  border-bottom-color: var(--border-color);
  background: rgba(255, 255, 255, 0.02);
}

.panel-toggle-icon {
  transition: transform 0.3s ease;
}

.panel.open .panel-toggle-icon {
  transform: rotate(180deg);
}

.panel-body {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.panel.open .panel-body {
  padding: 16px;
  max-height: 1000px;
  transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
}

/* --- Form Elements --- */
.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.input-container {
  position: relative;
  display: flex;
  align-items: center;
}

input[type="text"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--input-color);
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition-smooth);
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
  background: var(--input-bg-focus);
}

.btn-toggle-visibility {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-toggle-visibility:hover {
  color: #94a3b8;
}

/* --- Parameter Sliders & Toggles --- */
.slider-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

input[type="range"] {
  flex-grow: 1;
  height: 4px;
  background: #334155;
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  transition: background 0.15s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--primary-hover);
}

.slider-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-cyan);
  width: 32px;
  text-align: right;
}

/* --- Main Workspace Layout --- */
.main-workspace {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  min-width: 0; /* min-width: 0 prevents child elements from stretching the main workspace container horizontally */
}

/* --- Top Header Navigation & Controls --- */
.header-nav {
  position: relative;
  z-index: 50;
  height: 70px;
  border-bottom: 1px solid var(--border-color);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 32px;
  flex-shrink: 0;
}

/* --- Tab Switches --- */
.tab-list {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  padding: 4px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
}

.tab-btn {
  padding: 8px 18px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-btn svg {
  fill: currentColor;
}

.tab-btn:hover {
  color: #fff;
}

.tab-btn.active {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

/* --- Key Status Monitor & Database Connection Monitor --- */
.key-status-indicator,
.db-status-indicator,
.gcp-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  padding: 6px 14px;
  border-radius: 50px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 8px rgba(100, 116, 139, 0.4);
  transition: all 0.3s ease;
}

.status-dot.active {
  background: var(--color-success);
  box-shadow: 0 0 8px var(--color-success);
}

.status-dot.error {
  background: var(--color-error);
  box-shadow: 0 0 8px var(--color-error);
}

.status-dot.connecting {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
  animation: pulse-dot 1.5s infinite ease-in-out;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

/* --- Message Storage Badges --- */
.msg-storage-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  font-weight: 600;
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.msg-storage-badge.local {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.msg-storage-badge.cloud {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.msg-storage-badge.syncing {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
  animation: pulse-badge 1.5s infinite ease-in-out;
}

@keyframes pulse-badge {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}

/* --- Playground Panels --- */
.workspace-body {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.playground-content {
  flex-grow: 1;
  min-width: 0;
  padding: 12px 0 12px 12px;
  overflow-y: auto;
  position: relative;
}

.tab-panel {
  display: none;
  height: 100%;
}

.tab-panel.active {
  display: block;
}

/* --- Image Generation Workspace --- */
.image-gen-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 32px;
  height: 100%;
}

.gen-controls-card {
  position: relative;
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-premium);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Maximize prompt input textarea to fill the workspace card */
.prompt-textarea {
  flex-grow: 1;
  min-height: 350px; /* Increased from 250px to occupy more workspace area */
  height: auto;
  resize: none;
}

/* Override inline display: block to maintain flex layout for minimal pills */
.minimal-setting-pill.chat-only-setting[style*="display: block"],
.minimal-setting-pill.image-only-setting[style*="display: block"] {
  display: flex !important;
}


.btn-generate {
  background: var(--grad-primary);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: var(--border-radius-md);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-generate:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(139, 92, 246, 0.6);
}

.btn-generate:active {
  transform: translateY(1px);
}

/* Fallback Notice */
.fallback-notice {
  padding: 20px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--border-radius-md);
  color: #f59e0b;
  font-size: 0.85rem;
}

/* --- Image Generation Results Canvas --- */
.gen-results-card {
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-premium);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  min-height: 450px;
  overflow: hidden;
}

.empty-canvas-state {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--text-muted);
  max-width: 320px;
  margin: auto;
}

.empty-canvas-state svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Container holding the output rendering components. Enabled vertical auto-scrolling 
   to ensure that when multiple visual assets or tall aspect ratios are generated, 
   they do not get clipped by the parent .gen-results-card's overflow:hidden boundary. */
.canvas-image-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
  align-items: center;
  overflow-y: auto;
}

.render-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  width: 100%;
  max-width: 100%;
  flex-grow: 1;
}

.render-img-wrapper {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  aspect-ratio: 1/1;
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

.render-img-wrapper.ar-16-9 { aspect-ratio: 16/9; }
.render-img-wrapper.ar-4-3 { aspect-ratio: 4/3; }
.render-img-wrapper.ar-3-4 { aspect-ratio: 3/4; }
.render-img-wrapper.ar-9-16 { aspect-ratio: 9/16; }

.render-img-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}

.render-img-wrapper img:hover {
  transform: scale(1.03);
  filter: brightness(1.08);
}

.render-overlay-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  padding: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.render-img-wrapper:hover .render-overlay-controls {
  opacity: 1;
}

.action-icon-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.action-icon-btn:hover {
  background: var(--primary);
  border-color: var(--primary-hover);
}

/* --- Unified Playground split-screen layout --- */
.playground-grid {
  display: grid;
  grid-template-columns: var(--playground-left-width, 1.2fr) auto var(--playground-right-width, 1.8fr);
  gap: 0;
  height: 100%;
}

.playground-controls-card {
  position: relative;
  background: var(--bg-surface);
  /* Optimized: Removed backdrop-filter to prevent scrolling rasterization stutters (F-15 / Performance) */
  border: 1px solid var(--sidebar-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-premium);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100vh - 202px);
  font-size: 0.8rem;
  /* Exhaustive Comment: Setup container queries to track dynamic width resizing of the control panel
     so we can handle responsive minimal settings bar layout wrapping independently of viewport bounds. */
  container-type: inline-size;
  container-name: controls-card;
}

.playground-outputs-card {
  background: var(--bg-surface);
  /* Optimized: Removed backdrop-filter to prevent scrolling rasterization stutters (F-15 / Performance) */
  border: 1px solid var(--sidebar-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-premium);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  min-height: 450px;
  overflow: hidden;
  height: calc(100vh - 202px);
  font-size: 0.8rem;
}

/* --- Multimodal Q&A Chat Workspace --- */
.chat-workspace {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 20px;
  height: 100%;
}

.chat-history-container {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 20px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-align: center;
  height: 100%;
  gap: 16px;
}

.message-bubble {
  max-width: 80%;
  padding: 16px 20px;
  border-radius: var(--border-radius-md);
  font-size: 0.85rem;
  line-height: 1.6;
}

.message-bubble.user {
  background: var(--user-bubble-bg);
  border: 1px solid var(--user-bubble-border);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: var(--border-radius-md);
}

.message-bubble.assistant {
  background: var(--assistant-bubble-bg);
  border: 1px solid var(--assistant-bubble-border);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: var(--border-radius-md);
}

.chat-timeline-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-cyan, #06b6d4);
  margin: 24px 0;
  width: 100%;
  flex-shrink: 0;
}

.chat-timeline-divider::before,
.chat-timeline-divider::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.25) 50%, transparent);
}

.chat-timeline-divider:empty::after {
  display: none;
}


.msg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 8px;
  width: 100%;
}

/* Sleek hover-reveal copy button in message headers */
.msg-copy-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  margin-left: 12px;
  opacity: 0;
}

.message-bubble:hover .msg-copy-btn,
.agent-msg-bubble:hover .msg-copy-btn,
.agent-bubble-wrapper:hover .msg-copy-btn,
.timeline-chat-header:hover .msg-copy-btn {
  opacity: 0.7;
}

.message-bubble:hover .msg-copy-btn:hover,
.agent-msg-bubble:hover .msg-copy-btn:hover,
.agent-bubble-wrapper:hover .msg-copy-btn:hover,
.timeline-chat-header:hover .msg-copy-btn:hover {
  opacity: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.msg-copy-btn:active {
  transform: scale(0.9);
}

/* Ensure copy button is visible on mobile and touch devices where hover is not present */
@media (max-width: 768px) {
  .msg-copy-btn {
    opacity: 0.6;
  }
}

.msg-header.user {
  color: var(--primary-hover);
}

.msg-header.assistant {
  color: var(--accent-cyan);
}

.msg-attachments {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.msg-attachment-preview {
  width: 80px;
  height: 80px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  object-fit: cover;
}

.msg-body {
  font-size: 0.95rem;
  word-wrap: break-word;
}

.msg-body pre {
  background: var(--pre-bg);
  padding: 12px;
  border-radius: var(--border-radius-sm);
  margin-top: 8px;
  overflow-x: auto;
  font-family: monospace;
  font-size: 0.85rem;
  border: 1px solid var(--pre-border);
  color: var(--pre-color);
}

/* --- Chat Input Box & Image Uploader --- */
.chat-input-panel {
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-premium);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attachment-preview-bar {
  display: none;
  gap: 12px;
  padding: 8px;
  background: var(--agent-context-bar-bg, rgba(0, 0, 0, 0.2));
  border-radius: var(--border-radius-sm);
  flex-wrap: wrap;
}

.attachment-preview-bar.has-items {
  display: flex;
}

/* Dedicated styling for attachment preview bar inside the drag-and-drop container */
.drag-drop-box .attachment-preview-bar {
  box-sizing: border-box;
  z-index: 15;
  background: transparent;
  border: none;
  flex-wrap: nowrap; /* Prevent vertical wrapping of thumbnails (F-09) */
  overflow-x: auto; /* Support horizontal scrolling if many files are attached (F-09) */
  max-width: 100%;
}

.paste-btn-container {
  margin-top: 8px;
  width: 100%; /* Stretch to fill container by default in vertical column layout (F-09) */
}

/* Layout adjustments when attachments are active to keep container extremely compact and side-by-side */
.drag-drop-box:has(.attachment-preview-bar.has-items) {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  gap: 12px;
}

/* Hide helper icon and instructions inside uploader box when attachments are active to conserve space */
.drag-drop-box:has(.attachment-preview-bar.has-items) .upload-icon,
.drag-drop-box:has(.attachment-preview-bar.has-items) .upload-text {
  display: none;
}

.drag-drop-box:has(.attachment-preview-bar.has-items) .paste-btn-container {
  margin-top: 0;
  width: auto;
  justify-content: flex-start;
  flex-shrink: 0;
}

.drag-drop-box:has(.attachment-preview-bar.has-items) .attachment-preview-bar {
  margin-top: 0;
  width: auto;
  justify-content: flex-end;
  flex-grow: 1;
}

.attachment-thumbnail {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--primary);
}

.attachment-thumbnail img {
  display: block; /* Fix inline layout bug and enforce 100% width/height constraints (F-09) */
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.attachment-remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-error);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-file-icon {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  transition: var(--transition-smooth);
}

.attachment-file-icon.audio {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(6, 182, 212, 0.15));
  border: 1px solid rgba(139, 92, 246, 0.4);
}

.attachment-file-icon.video {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(236, 72, 153, 0.4);
}

.attachment-file-icon.pdf {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(245, 158, 11, 0.15));
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.attachment-file-icon.text {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15));
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.attachment-file-icon.generic {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.15), rgba(148, 163, 184, 0.15));
  border: 1px solid rgba(100, 116, 139, 0.4);
}

.attachment-file-icon .file-icon-wrapper {
  color: #fff;
  opacity: 0.85;
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-thumbnail:hover .file-icon-wrapper {
  transform: scale(1.1);
  opacity: 1;
}

.attachment-file-icon .file-extension-badge {
  position: absolute;
  bottom: 4px;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-attachment-file-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  color: #cbd5e1;
  font-size: 0.85rem;
  transition: var(--transition-smooth);
  max-width: 240px;
  overflow: hidden;
  margin-top: 4px;
  margin-bottom: 4px;
}

.msg-attachment-file-box:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary);
  color: #fff;
}

.msg-attachment-file-box .file-box-icon {
  font-size: 1.1rem;
}

.msg-attachment-file-box .file-box-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-input-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.chat-prompt-textarea {
  flex-grow: 1;
  height: 50px;
  resize: none;
  padding-top: 13px;
  padding-bottom: 13px;
}

.action-btn-secondary {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-color);
  color: #cbd5e1;
  width: 38px;
  height: 38px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.action-btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.15);
}

.btn-attach-image:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.2) !important;
}


.btn-send {
  background: var(--grad-primary);
  color: #fff;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
}

.btn-send:active {
  transform: translateY(1px);
}



/* --- Glassmorphic Error/Diagnostics Modal --- */
/* 
   The .modal-backdrop style includes visibility: hidden when closed.
   This prevents the invisible overlay (including its backdrop-filter layer)
   from intercepting touch gestures, mousewheels, and scroll-up events on 
   browsers like macOS Safari and Chrome, while allowing smooth transitions.
*/
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(4, 5, 8, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden; /* Prevent event interception and layout rendering when closed */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Transition visibility to coordinate display toggle */
}

/* Make backdrop active and capture clicks when open */
.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible; /* Restore visibility to permit interaction and display modal */
}

.modal-container {
  background: rgba(28, 30, 43, 0.9);
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(239, 68, 68, 0.2);
  border-radius: var(--border-radius-lg);
  width: 90%;
  max-width: 520px;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.modal-container-standard {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.2);
}

.modal-lg {
  max-width: 600px;
}

.modal-scrollable {
  max-height: 85vh;
  overflow-y: auto;
}

.modal-backdrop.open .modal-container {
  transform: translateY(0);
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.modal-header-icon {
  color: var(--color-error);
}

.modal-header h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
}

.modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.error-main-desc {
  font-size: 0.95rem;
  color: #f1f5f9;
  font-weight: 500;
}

.error-tech-details {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-color);
  padding: 12px;
  border-radius: var(--border-radius-sm);
  font-family: monospace;
  font-size: 0.8rem;
  color: #ef4444;
  word-break: break-all;
  max-height: 150px;
  overflow-y: auto;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.btn-modal-close {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-color);
  color: #cbd5e1;
  padding: 10px 20px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  transition: var(--transition-smooth);
}

.btn-modal-close:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* --- Micro-Animations / Shimmer --- */
.shimmer-loading {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}

.shimmer-loading::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 20%,
    rgba(255, 255, 255, 0.1) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.8s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.rotating-spinner {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* --- Responsive Adaptability --- */
@media(max-width: 1024px) {
  .image-gen-grid, .playground-grid {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    width: var(--sidebar-width) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .agent-drawer {
    position: absolute;
    top: 70px;
    right: 0;
    bottom: 0;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-left: 1px solid var(--border-color) !important;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 15;
  }
  .agent-drawer.open {
    transform: translateX(0);
    width: 100% !important;
  }
  /* Version history cards use single column flex layouts natively on all viewports */
}

/* --- Prompt Tracker Layout & Styling --- */
.prompt-tracker-workspace {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  height: 100%;
}

.tracker-sidebar-card {
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-premium);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: calc(100vh - 202px);
  max-height: calc(100vh - 202px);
  font-size: 0.8rem;
}

.tracker-search-bar input {
  background: rgba(0, 0, 0, 0.25);
  border-color: var(--border-color);
}

.tracker-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex-grow: 1;
}

.tracker-task-item {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.tracker-task-item:hover {
  background: rgba(139, 92, 246, 0.04);
  border-color: rgba(139, 92, 246, 0.2);
}

.tracker-task-item.active {
  background: rgba(139, 92, 246, 0.08);
  border-color: var(--primary);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);
}

.tracker-task-item-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tracker-task-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
}

.tracker-details-card {
  background: var(--bg-surface);
  /* Optimized: Removed backdrop-filter to prevent scrolling rasterization stutters (F-15 / Performance) */
  border: 1px solid var(--sidebar-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-premium);
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  height: calc(100vh - 202px);
  max-height: calc(100vh - 202px);
  overflow: hidden;
  font-size: 0.8rem;
}

.tracker-details-card .empty-canvas-state {
  padding: 28px;
  margin: auto;
}

.tracker-details-card .tracker-details-content {
  padding: 28px;
  overflow-y: auto;
  flex-grow: 1;
}

.tracker-details-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tracker-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
}

.tracker-details-header h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  background: var(--text-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tracker-details-header span {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: block;
  margin-top: 4px;
}

/* --- Timeline Layout --- 
   Adjusted to reserve 80px on the left for the dynamic SVG Git Graph lines and node columns.
   Removed the static vertical border-left line since the SVG paths will render connections. */
.tracker-timeline {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  padding-left: 80px; /* Allocate space on the left for the SVG tracks */
  border-left: none;  /* Removed static border - lines are drawn dynamically by SVG */
  margin-left: 0;
  padding-top: 8px;
}

/* --- Timeline Item Card Styling --- 
   Added an active state style to visually distinguish the currently loaded/restored
   version in the playground, with a glowing primary border and a subtle background tint. */
/* --- Timeline Item Card Styling --- 
   Configured as a clean, single-column vertical flex layout to support
   the streamlined prompt diff timeline view, stacking header, changes, and diffs. */
.timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 18px;
  transition: var(--transition-smooth);
}

.timeline-item:hover {
  border-color: rgba(139, 92, 246, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.timeline-item.active {
  border-color: var(--primary); /* Highlight border color for restored version */
  background: rgba(139, 92, 246, 0.04); /* Soft transparent purple glow background */
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.1); /* Subtle neon drop shadow */
}

/* --- Timeline Column Panels --- 
   Left panel contains version description, parameter settings, diff toggles, and restored prompt card.
   Right panel holds captured visual images grid or text message outputs. */
.timeline-item-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0; /* Prevents long string overflow inside flex container */
}

.timeline-item-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0; /* Prevents layout distortion from wide outputs */
}

/* Empty output placeholder container styles */
.timeline-empty-output-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.01);
  border: 1.5px dashed var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 24px;
  height: 100%;
  text-align: center;
  min-height: 120px;
}


/* --- Timeline Item Dot --- 
   Hide default static circular dots within the tracker timeline layout,
   as we are overlaying high-fidelity interactive SVG nodes instead. */
.tracker-timeline .timeline-item-dot {
  display: none;
}

.timeline-item-dot {
  position: absolute;
  left: -35px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #334155;
  border: 2px solid var(--bg-deep);
  box-shadow: 0 0 0 3px var(--bg-deep);
  transition: var(--transition-smooth);
}

.timeline-item:hover .timeline-item-dot {
  background: var(--primary-hover);
  box-shadow: 0 0 8px var(--primary-hover);
}

.timeline-item:first-child .timeline-item-dot {
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary), 0 0 0 3px var(--bg-deep);
}


.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 8px;
  font-weight: 500;
  grid-column: span 2; /* Force header to span both grid columns */
}

.timeline-version-badge {
  font-weight: 700;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

.timeline-workspace-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.timeline-workspace-badge.image {
  background: rgba(139, 92, 246, 0.15);
  color: var(--primary-hover);
}

.timeline-workspace-badge.chat {
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent-cyan);
}

.timeline-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  font-size: 0.8rem;
  color: #94a3b8;
  background: rgba(0,0,0,0.1);
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.02);
}

.timeline-meta-row strong {
  color: #f1f5f9;
}

/* Restyled prompt container to replicate the look and feel of the main page input textareas
   while retaining compatibility with rich inline HTML word-level difference highlights. */
.timeline-prompt-card {
  width: 100%;
  min-height: 120px;
  max-height: 350px;
  overflow-y: auto;
  padding: 12px 16px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  outline: none;
  white-space: pre-wrap; /* Preserves whitespaces, tabs, and linebreaks in prompt text */
  word-break: break-word;
}

/* --- Inline Diff Highlighting --- */
.diff-added {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
  border-bottom: 1px solid rgba(16, 185, 129, 0.3);
}

.diff-removed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  text-decoration: line-through;
  padding: 2px 4px;
  border-radius: 3px;
  opacity: 0.85;
  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
}

/* --- Output Thumbnails and Previews --- */
.timeline-output-preview {
  margin-top: 8px;
}

.timeline-output-preview h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

.timeline-image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.timeline-img-wrapper {
  width: 100px;
  height: 100px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.timeline-img-wrapper:hover {
  border-color: var(--primary);
}

.timeline-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Restyled chat response box to display text responses in full format
   with matching typography and larger scroll heights. */
.timeline-chat-response {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 16px;
  font-size: 0.9rem;
  line-height: 1.6;
  max-height: 400px; /* Allow long chat text to display fully without tight overflow */
  overflow-y: auto;
  color: #e2e8f0;
}

/* Switch styling for show changes toggle */
.diff-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.switch-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.switch-input {
  display: none;
}

.switch-slider {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background-color: #334155;
  border-radius: 20px;
  transition: .3s;
  cursor: pointer;
}

.switch-slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: .3s;
}

.switch-input:checked + .switch-slider {
  background-color: var(--primary);
}

.switch-input:checked + .switch-slider::before {
  transform: translateX(16px);
}


.video-split-upload-wrapper {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 4px;
}

.video-split-upload-wrapper .split-box {
  flex: 1;
  margin: 0;
  min-width: 0;
  padding: 6px;
  height: 112px;
}

.video-split-upload-wrapper .split-box .upload-text {
  font-size: 0.65rem;
  font-weight: 600;
  margin-top: 4px;
}

.video-split-upload-wrapper .split-box .attachment-preview-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-card);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
}

.video-split-upload-wrapper .split-box:has(.attachment-preview-bar.has-items) .upload-icon,
.video-split-upload-wrapper .split-box:has(.attachment-preview-bar.has-items) .upload-text,
.video-split-upload-wrapper .split-box:has(.attachment-preview-bar.has-items) .btn-paste-split {
  display: none !important;
}

.video-split-upload-wrapper .split-box:has(.attachment-preview-bar.has-items) .attachment-preview-bar {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  overflow-y: auto;
}

/* Glassmorphic Paste Button for Split Columns */
.btn-paste-split {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.20);
  border-radius: var(--border-radius-sm);
  color: var(--primary-hover);
  padding: 3px 6px;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  margin-top: 4px;
}

.btn-paste-split:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.35);
  color: #fff;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.15);
  transform: translateY(-0.5px);
}

.btn-paste-split:active {
  transform: translateY(0);
}

/* --- Dedicated Drag and Drop Visual Boxes (Feature F-09 Refactored) --- */
.drag-drop-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px; /* Reduced from 10px to save space */
  padding: 10px 14px; /* Reduced from 18px to save space */
  background: rgba(255, 255, 255, 0.01);
  border: 1.5px dashed var(--border-color);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #94a3b8;
  text-align: center;
  margin-top: 4px; /* Reduced from 10px */
  margin-bottom: 4px; /* Reduced from 10px */
  height: 112px; /* Lock box height to a constant 112px (F-09) */
  flex-shrink: 0; /* Prevent vertical stretching/shrinking within flex layouts (F-09) */
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.drag-drop-box:hover {
  background: rgba(139, 92, 246, 0.03);
  border-color: var(--primary);
  color: #cbd5e1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.drag-drop-box.drag-active {
  background: rgba(139, 92, 246, 0.08);
  border-color: var(--primary-hover);
  color: #fff;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.2), inset 0 0 10px rgba(139, 92, 246, 0.1);
  transform: scale(1.01);
}

/* Glassmorphic Clipboard Paste Button Styling (Feature F-34) */
.btn-paste-clipboard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: var(--border-radius-sm);
  color: var(--primary-hover);
  padding: 6px 12px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

/* Hover and active states for premium glassmorphic response */
.btn-paste-clipboard:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.4);
  color: #fff;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.15);
  transform: translateY(-1px);
}

.btn-paste-clipboard:active {
  transform: translateY(0);
}

/* Active paste glow keyframe animation to flash the upload box container */
.drag-drop-box.pasted-pulse {
  animation: pasted-glow 0.8s ease-out;
}

@keyframes pasted-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
    border-color: var(--primary-hover);
    background: rgba(139, 92, 246, 0.25);
  }
  100% {
    box-shadow: 0 0 0 15px rgba(139, 92, 246, 0);
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.01);
  }
}

.drag-drop-box svg {
  color: var(--text-muted);
  transition: all 0.3s ease;
  pointer-events: none;
}

.drag-drop-box:hover svg,
.drag-drop-box.drag-active svg {
  color: var(--primary);
  animation: bounce-slow 2s infinite ease-in-out;
}

.drag-drop-box span {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  pointer-events: none;
}

.drag-drop-box span strong {
  color: var(--primary-hover);
}

/* Compact layout for Chat Tab visual uploader box */
.chat-upload-box {
  padding: 10px 16px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 8px;
}

@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Settings Gear micro-animations */
#btnToggleSettings svg {
  transition: transform 0.5s ease, color 0.3s ease;
}

#btnToggleSettings:hover svg {
  transform: rotate(90deg);
  color: var(--primary-hover);
}

.sidebar-content {
  max-height: calc(100vh - 100px);
}

/* --- Minimal Settings Bar (Above Prompt Input) ---
   Reformatted from boxy pills into a single unified glassmorphic capsule.
   This removes individual pill borders and backgrounds, grouping them into a clean toolbar. */
.minimal-settings-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  margin-bottom: 12px;
  animation: fadeIn 0.4s ease;
  z-index: 10;
}

/* Logical grouping of settings controls */
.settings-bar-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.settings-bar-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
}

/* Exhaustive Comment: Container query responsive adaptations.
   - Under 530px container width: Hides the vertical divider line as parameter pills wrap.
   - Under 380px container width: Allows the groups themselves to wrap internally to prevent overflow. */
@container controls-card (max-width: 530px) {
  .settings-bar-divider {
    display: none !important;
  }
}

@container controls-card (max-width: 380px) {
  .settings-bar-group {
    flex-wrap: wrap !important;
  }
}

/* Individual setting row items acting as status indicators */
.minimal-setting-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  border-radius: var(--border-radius-sm);
  padding: 4px 8px;
  font-size: 0.72rem;
  font-family: var(--font-body);
  color: var(--text-muted);
  font-weight: 500;
  transition: var(--transition-smooth);
}

/* Light up the entire metadata group on hover to indicate interactivity */
.minimal-setting-pill:hover,
.minimal-setting-pill.open {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* Styling for premium micro-icons inside settings status bar */
.pill-icon {
  color: var(--text-muted);
  opacity: 0.8;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.minimal-setting-pill:hover .pill-icon,
.minimal-setting-pill.open .pill-icon {
  color: var(--primary-hover);
  opacity: 1;
}

/* Category labels hidden in minimal view to reduce space (F-10 Optimization) */
.pill-label {
  display: none !important;
}

.minimal-setting-pill:hover .pill-label,
.minimal-setting-pill.open .pill-label {
  color: var(--primary-hover);
}

/* Highlight active values with accent colors for clear visual contrast */
.chat-only-setting .custom-select-val,
#minTempVal,
#minTokensVal {
  color: var(--primary-hover) !important;
  font-weight: 600;
}

.image-only-setting .custom-select-val {
  color: var(--accent-cyan) !important;
  font-weight: 600;
}

.minimal-setting-pill:not(.chat-only-setting):not(.image-only-setting) .custom-select-val {
  color: var(--text-main);
  font-weight: 600;
}

/* Prevent right-side dropdown menus from clipping outside controls card boundaries */
.settings-bar-group:last-of-type .custom-select-menu,
.settings-bar-group:last-of-type .custom-popover-menu {
  left: auto;
  right: 0;
}

/* --- Custom Select Visual Components (v3.5.3) --- */

.custom-select-wrapper {
  position: relative;
  display: inline-block;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #cbd5e1;
  font-weight: 600;
  padding: 0 2px;
  transition: var(--transition-smooth);
}

.custom-select-val {
  max-width: 100px; /* Increased from 70px */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}

/* Custom value widths for specific settings to optimize display grid */
.custom-select-wrapper[data-select-id="minApiModel"] .custom-select-val,
.custom-select-wrapper[data-select-id="apiModel"] .custom-select-val {
  max-width: 220px; /* Increased from 125px to prevent truncation of model names */
}

.custom-select-wrapper[data-select-id="minApiProvider"] .custom-select-val,
.custom-select-wrapper[data-select-id="apiProvider"] .custom-select-val {
  max-width: 140px; /* Increased from 75px to fit "Google Gemini" fully */
}

.custom-select-chevron {
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.custom-select-wrapper:hover .custom-select-trigger {
  color: #fff;
}

.custom-select-wrapper.open .custom-select-chevron {
  transform: rotate(180deg);
  color: #fff;
}

.custom-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 1000;
  padding: 6px 0;
  background: var(--popover-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--popover-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-premium), 0 0 15px rgba(139, 92, 246, 0.05);
  
  /* Slide down + fade transition */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-select-wrapper.open .custom-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.custom-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.custom-select-item:hover {
  background: rgba(139, 92, 246, 0.12);
  color: var(--text-main);
}

.custom-select-item.active {
  color: var(--primary);
  background: rgba(139, 92, 246, 0.1);
  font-weight: 700;
  border-left: 2px solid var(--primary);
  padding-left: 12px;
}

/* Option speed badges */
.opt-badge {
  font-size: 0.58rem;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-left: 8px;
}

.opt-badge.fast {
  background: rgba(6, 182, 212, 0.12);
  color: var(--accent-cyan);
  border: 1px solid rgba(6, 182, 212, 0.2);
}

.opt-badge.quality {
  background: rgba(139, 92, 246, 0.12);
  color: var(--primary-hover);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Aspect Ratio Visual Selector Options */
.ratio-box-preview {
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  display: inline-block;
  transition: all 0.2s ease;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
}

.custom-select-item:hover .ratio-box-preview,
.custom-select-item.active .ratio-box-preview {
  border-color: var(--primary);
  box-shadow: 0 0 6px var(--border-glow);
}

.ratio-1-1 { width: 14px; height: 14px; }
.ratio-16-9 { width: 22px; height: 12.5px; }
.ratio-9-16 { width: 12.5px; height: 22px; }
.ratio-4-3 { width: 18px; height: 13.5px; }
.ratio-3-4 { width: 13.5px; height: 18px; }

/* Inline Aspect Ratio preview badge inside trigger button */
.ratio-box-preview-inline {
  width: 9px;
  height: 9px;
  border: 1.2px solid rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  background: rgba(255, 255, 255, 0.02);
}

.ratio-box-preview-inline.ratio-1-1 { width: 7px; height: 7px; }
.ratio-box-preview-inline.ratio-16-9 { width: 11px; height: 6px; }
.ratio-box-preview-inline.ratio-9-16 { width: 6px; height: 11px; }
.ratio-box-preview-inline.ratio-4-3 { width: 9px; height: 7px; }
.ratio-box-preview-inline.ratio-3-4 { width: 7px; height: 9px; }

.custom-select-wrapper.aspect-ratio-select .custom-select-item {
  gap: 12px;
  justify-content: flex-start;
}

/* --- Inline parameter sliders popover dropdown (v3.5.3) --- */

.custom-popover-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  padding: 14px;
  background: var(--popover-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--popover-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-premium), 0 0 15px rgba(139, 92, 246, 0.05);
  z-index: 1000;
  
  /* Transition state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.minimal-setting-pill.open .custom-popover-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.popover-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
}

.popover-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.popover-desc {
  font-size: 0.66rem;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

.popover-presets {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.preset-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--border-radius-sm);
  color: #cbd5e1;
  padding: 4px 8px;
  font-size: 0.66rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.preset-btn:hover {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.25);
  color: #fff;
}

/* Custom premium styling for range sliders */
.slider-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-group input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  outline: none;
  margin: 0;
}

.slider-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 0 6px var(--border-glow);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.slider-group input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: var(--primary-hover);
}

.slider-val {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-cyan);
  min-width: 24px;
  text-align: right;
}

.slider-group input[type="range"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.slider-group input[type="range"]:disabled::-webkit-slider-thumb {
  background: #64748b;
  border-color: #475569;
  cursor: not-allowed;
  box-shadow: none;
}

/* --- Main Settings Modal Split Layout (v3.5.3) --- */

.settings-modal-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 400px;
  align-items: stretch;
}

.settings-tabs-sidebar {
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding-right: 14px;
  flex-shrink: 0;
}

.settings-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  text-align: left;
  transition: var(--transition-smooth);
}

.settings-tab-btn svg {
  color: #64748b;
  transition: var(--transition-smooth);
}

.settings-tab-btn:hover {
  background: rgba(255, 255, 255, 0.02);
  color: #fff;
}

.settings-tab-btn:hover svg {
  color: #fff;
}

.settings-tab-btn.active {
  background: rgba(139, 92, 246, 0.08);
  color: var(--primary-hover);
  border-left: 3px solid var(--primary);
  padding-left: 9px;
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

.settings-tab-btn.active svg {
  color: var(--primary-hover);
}

.settings-tabs-content {
  flex-grow: 1;
  padding-left: 14px;
  overflow-y: auto;
}

.settings-panel-content {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.settings-panel-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.settings-panel-content .panel-body {
  padding: 0;
  border: none;
  background: transparent;
  /* Exhaustive Comment: Explicitly override global .panel-body max-height and overflow
     styles (which are set to 0 and hidden for collapsible panels) so the settings tab
     options render fully and don't get clipped. */
  max-height: none;
  overflow: visible;
}

/* Custom visual styling overrides for main keys modal save button */
.settings-panel-content .btn-generate {
  margin-top: 12px;
  padding: 8px 14px;
  font-size: 0.82rem;
}

.minimal-config-btn {
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition-smooth);
  margin-left: auto;
}

.minimal-config-btn:hover {
  color: var(--primary-hover);
  background: rgba(255, 255, 255, 0.05);
  transform: rotate(45deg);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Response Metadata Styles (F-12 refinement) --- 
   Positions cost, token, and performance data at the top of the bubble 
   with a clean bottom border separation. */
.msg-response-metadata {
  margin-bottom: 8px;
  font-size: 0.72rem;
  color: #64748b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-weight: 500;
  align-items: center;
}

/* Exhaustive Comment: Hide the manual hardcoded pipe spans in the HTML to avoid awkward wrapping.
   We then use CSS pseudo-elements to inject custom vertical dividers that stay anchored next
   to their preceding labels and wrap gracefully on narrow screen layouts. */
.msg-response-metadata > span:nth-child(even) {
  display: none !important;
}

.msg-response-metadata > span:nth-child(odd):not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  background: currentColor;
  opacity: 0.15;
  margin-left: 12px;
  flex-shrink: 0;
}

.msg-response-metadata strong {
  color: var(--accent-cyan);
}

.msg-response-metadata span:first-child strong {
  display: inline-block;
  min-width: 52px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.image-meta-header {
  display: flex;
  gap: 12px;
  font-size: 0.82rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  padding: 6px 14px;
  border-radius: 50px;
  align-self: flex-start;
  margin-bottom: 16px;
  font-weight: 500;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease;
}

/* ========================================================================
   AI PROMPT & OUTPUT ANALYSIS AGENT DRAWER STYLES
   ======================================================================== */

.agent-drawer {
  position: relative;
  width: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--bg-surface);
  /* Optimized: Removed backdrop-filter to prevent scrolling rasterization stutters (F-15 / Performance) */
  border: none;
  border-radius: var(--border-radius-lg);
  z-index: 15;
  display: flex;
  flex-direction: column;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  box-shadow: var(--shadow-premium);
  flex-shrink: 0;
  height: calc(100vh - 202px);
  margin: 12px 0;
  overflow: hidden;
  font-size: 0.8rem;
}

.agent-drawer.open {
  width: var(--agent-drawer-width, 420px);
  margin: 12px 12px 12px 0;
  border: 1px solid var(--sidebar-border);
  opacity: 1;
  pointer-events: auto;
}

/* pulsing status indicator for header navbar toggle button */
.agent-pulse-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  background-color: var(--accent-cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: agentPulseGlow 2s infinite;
}

@keyframes agentPulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(6, 182, 212, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0);
  }
}


/* message container and bubble lists */
.agent-message-list {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agent-version-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-cyan, #06b6d4);
  margin: 20px 0 8px 0;
  width: 100%;
  flex-shrink: 0;
}

.agent-version-header::before,
.agent-version-header::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.25) 50%, transparent);
}


.agent-msg-bubble {
  max-width: 85%;
  min-width: 0;
  padding: 16px 20px;
  border-radius: var(--border-radius-md);
  font-size: 0.85rem;
  line-height: 1.6;
  word-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
}

.agent-msg-bubble.new-message {
  animation: fadeIn 0.25s ease-out;
}

.agent-msg-bubble.user {
  background: var(--user-bubble-bg);
  border: 1px solid var(--user-bubble-border);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: var(--border-radius-md);
}

.agent-msg-bubble.user.agent-triggered {
  background: rgba(6, 182, 212, 0.08); /* Soft glassmorphic cyan/teal tint */
  border: 1px solid rgba(6, 182, 212, 0.2); /* Soft cyan border */
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.03);
}

.agent-msg-bubble.assistant {
  background: var(--assistant-bubble-bg);
  border: 1px solid var(--assistant-bubble-border);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: var(--border-radius-md);
}

.agent-msg-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  width: 100%;
}

.agent-msg-meta.user {
  color: var(--primary-hover);
}

.agent-msg-meta.user.agent-triggered {
  color: var(--accent-cyan); /* Match cyan theme instead of purple/violet */
}

.agent-msg-meta.assistant {
  color: var(--accent-cyan);
}

.msg-header.user.agent-triggered {
  color: var(--accent-cyan) !important;
}

.agent-msg-body {
  word-wrap: break-word;
}

.agent-msg-body p {
  margin-bottom: 8px;
}

.agent-msg-body p:last-child {
  margin-bottom: 0;
}

.agent-msg-body code {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.agent-msg-body pre {
  background: var(--pre-bg);
  padding: 12px;
  border-radius: var(--border-radius-sm);
  margin-top: 8px;
  margin-bottom: 8px;
  overflow-x: auto;
  font-family: monospace;
  font-size: 0.8rem;
  border: 1px solid var(--pre-border);
  color: var(--pre-color);
}

/* one-click apply refined prompt button */
.apply-prompt-btn {
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.25);
  color: var(--accent-cyan);
  padding: 8px 14px;
  border-radius: var(--border-radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-smooth);
}

.apply-prompt-btn:hover {
  background: var(--accent-cyan);
  color: #000000;
  border-color: var(--accent-cyan);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
}

.apply-prompt-btn svg {
  fill: currentColor;
}

/* Suggested refined prompt container card (violet-themed premium box) */
.refined-prompt-card {
  background: rgba(139, 92, 246, 0.05); /* Light glassmorphic violet tint */
  border: 1px solid rgba(139, 92, 246, 0.2); /* Soft violet border */
  border-radius: var(--border-radius-md);
  padding: 14px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Drop shadow for depth */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Header style for Suggested Refined Prompt box */
.refined-prompt-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c084fc; /* Violet label accent */
}

/* Content block displaying the raw suggested prompt text */
.refined-prompt-card-body {
  font-size: 0.8rem;
  color: var(--text-main);
  line-height: 1.5;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  padding: 10px 12px;
  border-radius: var(--border-radius-sm);
  font-family: var(--font-body);
  white-space: pre-wrap; /* Preserve formatting and newlines */
  word-break: break-word;
}

/* Actions panel containing Apply and Copy buttons */
.refined-prompt-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

/* Premium copy prompt action button inside card */
.btn-refined-copy {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 8px 12px;
  border-radius: var(--border-radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-smooth);
}

/* Highlight style when hovering copy button */
.btn-refined-copy:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}

/* submit panel styling (renamed from input panel to align with playground) */
.agent-submit-panel {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  background: var(--input-panel-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.agent-prompt-input {
  flex-grow: 1;
  height: 36px;
  padding: 8px 12px;
  font-size: 0.85rem;
  line-height: 1.4;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: var(--input-bg, rgba(0, 0, 0, 0.2));
  color: var(--text-main);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.agent-prompt-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* Small send button next to the input text box */
.btn-send-agent-small {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-primary);
  border: none;
  border-radius: var(--border-radius-md);
  color: #ffffff;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 10px rgba(139, 92, 246, 0.25);
  flex-shrink: 0;
}

.btn-send-agent-small:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(139, 92, 246, 0.4);
}

.btn-send-agent-small:active {
  transform: translateY(1px);
}

/* warning state for key requirement */
.agent-warning-box {
  padding: 16px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: var(--border-radius-md);
  color: var(--color-error);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
  margin: 16px;
}

/* Sidebar Task Item Actions Hover State */
.tracker-task-item-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tracker-task-item:hover .tracker-task-item-actions {
  opacity: 1;
}

.task-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: #94a3b8;
  border-radius: var(--border-radius-sm);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  padding: 0;
}

.task-action-btn:hover {
  background: rgba(139, 92, 246, 0.15);
  color: var(--primary-hover);
  border-color: rgba(139, 92, 246, 0.3);
}

.task-action-btn.delete:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

/* --- Premium Custom Floating Tooltips --- */
.custom-tooltip {
  position: absolute;
  background: rgba(10, 11, 18, 0.9);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  padding: 6px 12px;
  border-radius: var(--border-radius-sm);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: pre-wrap;
  max-width: 240px;
  width: max-content;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.15s;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.15);
  z-index: 99999;
  transform: scale(0.95);
}

.custom-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* --- Horizontal Git Graph Timeline Bar --- */
.horizontal-git-graph-bar {
  height: 96px;
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  padding: 0 24px;
  margin: 12px 12px 0 12px;
  flex-shrink: 0;
  gap: 16px;
  z-index: 5;
  box-shadow: var(--shadow-premium);
  min-width: 0; /* Prevents child items from stretching the bar horizontally */
  width: calc(100% - 24px); /* Constrains width relative to parent margin box */
  box-sizing: border-box; /* Includes padding and borders in width calculation */
}

.git-graph-bar-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: #94a3b8;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  cursor: help;
}

.git-graph-bar-label svg {
  color: var(--primary-hover);
}

.git-graph-bar-divider {
  width: 1px;
  height: 24px;
  background: var(--border-color);
  flex-shrink: 0;
}

.git-graph-scroll-wrapper {
  flex-grow: 1;
  min-width: 0; /* min-width: 0 prevents content sizing from stretching the flexbox container horizontally */
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  display: flex;
  align-items: center;
  scroll-behavior: smooth; /* Enables native smooth scrolling during horizontal alignment and node selection transitions */
}

/* Custom premium scrollbar for horizontal timeline */
.git-graph-scroll-wrapper::-webkit-scrollbar {
  height: 3px;
}

.git-graph-scroll-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.git-graph-scroll-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

.git-graph-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.3);
}

.empty-graph-text {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 0.8rem;
  width: 100%;
  justify-content: center;
}

.empty-graph-icon {
  width: 14px;
  height: 14px;
  color: #475569;
}

#horizontalGitGraphSvg {
  flex-shrink: 0;
}

/* SVG commit nodes animations & transitions */
#horizontalGitGraphSvg circle {
  transition: r 0.2s cubic-bezier(0.4, 0, 0.2, 1), fill 0.2s ease, stroke 0.2s ease;
}

#horizontalGitGraphSvg circle:hover {
  r: 7.5px !important;
}

/* --- Premium Info Icon Styling --- */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: help;
  font-size: 0.72rem;
  margin-left: 6px;
  transition: var(--transition-smooth);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1;
  vertical-align: middle;
}

.info-icon:hover {
  color: var(--primary-hover);
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.35);
}

/* --- In-Webapp Toast Notification & Custom Confirmation Modal Styles (F-17) --- */

/* Fixed overlay container positioning at the bottom-left to stack toasts cleanly (relocated to prevent blocking the right-hand AI Agent Drawer and its context panel) */
.toast-container {
  position: fixed;
  bottom: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
  pointer-events: none; /* Let clicks pass through empty spaces between toasts */
}

/* Individual Toast Styling - Sleek slate glassmorphism design */
.toast {
  pointer-events: auto; /* Re-enable pointer events for the toast card and its close button */
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 420px;
  padding: 14px 18px;
  background: rgba(15, 23, 42, 0.85); /* Premium dark slate backdrop */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--border-radius-md);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 
              0 0 0 1px rgba(255, 255, 255, 0.08),
              0 1px 1px 0 rgba(255, 255, 255, 0.05) inset;
  color: #e2e8f0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

/* Slide and Fade In State */
.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Slide and Fade Out State */
.toast.hide {
  transform: translateY(10px) scale(0.95);
  opacity: 0;
}

/* Left Accent borders representing feedback status */
.toast.success {
  border-left: 4px solid var(--color-success);
}
.toast.error {
  border-left: 4px solid var(--color-error);
}
.toast.warning {
  border-left: 4px solid var(--color-warning);
}
.toast.info {
  border-left: 4px solid var(--accent-cyan);
}

/* SVG Icon Colors matching state colors */
.toast-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast.success .toast-icon { color: var(--color-success); }
.toast.error .toast-icon { color: var(--color-error); }
.toast.warning .toast-icon { color: var(--color-warning); }
.toast.info .toast-icon { color: var(--accent-cyan); }

/* Text Message block */
.toast-message {
  flex-grow: 1;
  padding-right: 8px;
  word-wrap: break-word;
}

/* Toast Manual Dismiss Button */
.toast-close-btn {
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}
.toast-close-btn:hover {
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.05);
}

/* --- Version Timeline Change Summary Row Styling (F-11 / F-08) --- 
   Creates a horizontal, glassmorphic status block with a solid purple left accent border
   to display rule-calculated run differentials inline on each version history card. */
.timeline-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  padding: 8px 14px;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-left: 3px solid var(--primary);
  border-radius: var(--border-radius-sm);
  margin-top: 6px;
  margin-bottom: 6px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fadeIn 0.4s ease;
}

/* Accentuated label text for change summary titles */
.summary-label {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--primary-hover);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Styled text for change summaries */
.summary-text {
  font-family: var(--font-body);
  font-weight: 500;
  color: #cbd5e1;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* High-contrast active state styling for currently restored version cards */
.timeline-item.active .timeline-summary-row {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
}
/* --- Interactive JSON Visualizer (F-19) --- */
.json-visualizer-card {
  margin-top: 14px;
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  font-family: var(--font-body);
}

.json-visualizer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(139, 92, 246, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.json-visualizer-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--primary-hover);
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.json-visualizer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.json-visualizer-search {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-sm);
  padding: 4px 8px;
  font-size: 0.75rem;
  color: #cbd5e1;
  outline: none;
  width: 140px;
  transition: var(--transition-smooth);
}

.json-visualizer-search:focus {
  border-color: var(--primary);
  width: 180px;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
}

.json-visualizer-content {
  font-family: 'Fira Code', 'Courier New', Courier, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #cbd5e1;
  padding: 16px;
  max-height: 350px;
  overflow-y: auto;
  text-align: left;
}

.json-details {
  margin-left: 14px;
}

.json-details[open] {
  margin-bottom: 4px;
}

.json-summary {
  cursor: pointer;
  outline: none;
  user-select: none;
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.2s ease;
}

.json-summary::marker,
.json-summary::-webkit-details-marker {
  display: none;
}

.json-summary:hover {
  background: rgba(255, 255, 255, 0.05);
}

.json-summary-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #64748b;
  transition: transform 0.2s ease;
  margin-right: 2px;
}

.json-details[open] > .json-summary > .json-summary-icon {
  transform: rotate(90deg);
}

.json-key {
  color: #a78bfa; /* Light purple for keys */
  font-weight: 600;
}

.json-val-string {
  color: #34d399; /* Emerald green for strings */
}

.json-val-number {
  color: #fbbf24; /* Amber yellow for numbers */
}

.json-val-boolean {
  color: #f472b6; /* Pink for booleans */
  font-weight: bold;
}

.json-val-null {
  color: #94a3b8; /* Slate gray for nulls */
  font-style: italic;
}

.json-type-preview {
  color: #64748b;
  font-size: 0.75rem;
  margin-left: 4px;
}

.json-index {
  color: #64748b;
  margin-right: 4px;
}

.json-primitive-row {
  margin-left: 14px;
  padding: 2px 4px;
  display: flex;
  align-items: center;
}

.json-primitive-row:hover {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}

/* 
========================================================================
   GLOBAL GLASSMORPHIC CUSTOM SCROLLBARS (F-22)
   Customizes the appearance of all scrollable elements in the app
   to match the modern dark glassmorphic UI.
========================================================================
*/

/* Target all elements universally to ensure consistent scrolling design */
* {
  /* Faint purple thumb color, matching our primary branding color --primary */
  --scrollbar-thumb: rgba(139, 92, 246, 0.2);
  /* Fully transparent track background to preserve glassmorphic backgrounds */
  --scrollbar-track: transparent;
  
  /* Apply standard CSS properties for modern scrollbar colors */
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  /* Force scrollers to be thin and non-intrusive */
  scrollbar-width: thin;
}

/* Brighten the scrollbar thumb color on hover to indicate interactive state */
*:hover {
  --scrollbar-thumb: rgba(139, 92, 246, 0.4);
}

/* Progressive enhancement: style legacy WebKit/Blink (Safari, Chrome) scrollers */
/* Wrapped in supports rule to prevent overlaps or layout bugs in compliant browsers */
@supports not (scrollbar-color: auto) {
  /* Configure base dimensions of the scrollbar tracks and thumbs */
  *::-webkit-scrollbar {
    width: 6px; /* Vertical scrollbar width */
    height: 6px; /* Horizontal scrollbar height */
  }
  
  /* Style the scrollbar background track */
  *::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 10px; /* Fully rounded track for smooth aesthetics */
  }
  
  /* Style the draggable thumb segment */
  *::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 10px; /* Fully rounded corners for pill look */
    border: 1px solid transparent; /* Acts as padding to shrink the thumb */
    background-clip: padding-box; /* Clips background to content-box inside border */
  }
  
  /* Change the legacy thumb background on hover */
  *::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.4);
  }
}

/* 
========================================================================
   WORKSPACE INTERACTIVE RESIZER GUTTERS (F-21)
   Provides modern drag-splitters with glassmorphic glow highlights.
========================================================================
*/

.resize-gutter {
  position: relative;
  width: 12px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, opacity 0.2s ease;
  user-select: none;
  z-index: 10;
}

.resize-gutter::after {
  content: '';
  width: 2px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.resize-gutter:hover::after,
.resize-gutter.dragging::after {
  width: 4px;
  height: 100%;
  background: var(--grad-primary);
  box-shadow: 0 0 12px var(--primary-hover);
}

.resize-gutter:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Bypass transitions during active mouse drags to prevent pointer lag */
.sidebar.resizing,
.agent-drawer.resizing {
  transition: none !important;
}

/* Conditionally display gutters depending on panel visibility status */
.sidebar.collapsed + .sidebar-gutter {
  display: none;
}

.workspace-body:has(#agentDrawer:not(.open)) .agent-gutter {
  display: none;
}

/* Hide gutters on tablet/mobile screens (below 1024px) */
@media(max-width: 1024px) {
  .resize-gutter {
    display: none !important;
  }
}

/* --- Collapsible User Prompts (F-23) --- */
.collapsible-prompt-wrapper {
  position: relative;
  max-height: none; /* Expand naturally to avoid browser layout reflow issues */
  overflow: hidden; /* Prevent text overflow and ensure bubble container wraps it */
}

.collapsible-prompt-wrapper.collapsed {
  max-height: 4.8em; /* approx 3 lines of text based on 1.6 line-height */
}

.collapsible-prompt-wrapper.collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  /* Refactored: replaced hardcoded rgba(139, 92, 246, 0.15) with the design token var(--user-bubble-bg)
     to support seamless blending in both dark and light modes. */
  background: linear-gradient(to bottom, transparent, var(--user-bubble-bg));
  pointer-events: none;
}

.prompt-expand-btn {
  background: none;
  border: none;
  color: var(--primary-hover);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0 0 0;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: color 0.2s ease;
  font-family: var(--font-body);
}

.prompt-expand-btn:hover {
  color: var(--primary);
}

/* 
========================================================================
   WORKSPACE HIGH-DENSITY TYPOGRAPHY RULES (F-21 refinement)
   Reduces inputs, headers, textareas, and chat bubbles font sizes.
========================================================================
*/

.playground-controls-card input,
.playground-controls-card select,
.playground-controls-card textarea,
.agent-drawer input,
.agent-drawer select,
.agent-drawer textarea,
.tracker-details-card input,
.tracker-details-card select,
.tracker-details-card textarea {
  font-size: 0.72rem;
}

.playground-controls-card label,
.agent-drawer label,
.tracker-details-card label {
  font-size: 0.72rem;
}

.playground-controls-card .panel-header h3,
.playground-outputs-card .panel-header h3,
.agent-drawer .panel-header h3 {
  margin: 0 0 2px 0;
  padding: 0;
  font-size: 0.95rem !important;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.playground-controls-card .panel-header p,
.playground-outputs-card .panel-header p,
.agent-drawer .panel-header p {
  margin: 0;
  padding: 0;
  font-size: 0.65rem !important;
  color: #64748b;
}

.tracker-details-card h2 {
  font-size: 0.95rem !important;
}

.tracker-details-card {
  font-size: 0.78rem;
}

.playground-controls-card .btn-generate {
  font-size: 0.85rem !important;
}

.msg-body,
.agent-msg-bubble {
  font-size: 0.78rem;
}

.msg-body pre,
.agent-msg-body code,
.agent-msg-body pre {
  font-size: 0.7rem;
}

.msg-header,
.agent-msg-meta {
  font-size: 0.72rem;
}

/* --- AI Analysis Agent Live Context & Chat Bubble Styles --- */
.agent-context-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--agent-pill-bg, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--agent-pill-border, rgba(255, 255, 255, 0.08));
  padding: 3px 8px;
  border-radius: 12px;
  color: var(--text-muted);
}
.agent-context-pill.has-data {
  border-color: rgba(6, 182, 212, 0.25);
  background: rgba(6, 182, 212, 0.04);
  color: var(--text-main);
}
.agent-context-pill.clickable {
  cursor: pointer;
  transition: all var(--transition-fast);
}
.agent-context-pill.clickable:hover {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.5);
  color: var(--primary-hover);
}
.agent-bubble-context {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--agent-bubble-context-bg, rgba(0, 0, 0, 0.25));
  border: 1px solid var(--agent-bubble-context-border, rgba(255, 255, 255, 0.05));
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  color: var(--text-muted);
  width: 100%;
}
.agent-bubble-context-header {
  font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.agent-bubble-context-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agent-bubble-context-body .context-item {
  color: #cbd5e1;
}
.agent-bubble-context-body .context-item strong {
  color: #94a3b8;
}

/* Context Chips & Preview Layout (v3.2.2) */
.context-chip-wrapper {
  position: relative;
  display: inline-block;
}
.context-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  font-size: 0.72rem;
  color: #cbd5e1;
  user-select: none;
  transition: all var(--transition-fast);
}
.context-chip.clickable {
  cursor: pointer;
}
.context-chip.clickable:hover,
.context-chip-wrapper:hover .context-chip.clickable {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(6, 182, 212, 0.4);
  color: #fff;
}
.context-chip-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--popover-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  width: 280px;
  max-height: 185px;
  overflow-y: auto;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  transform: translateY(4px);
  z-index: 100;
}
.context-chip-popup::-webkit-scrollbar {
  width: 4px;
}
.context-chip-popup::-webkit-scrollbar-track {
  background: transparent;
}
.context-chip-popup::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}
.context-chip-popup::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
}
.context-chip-wrapper:hover .context-chip-popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.context-popup-text {
  margin: 0;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 0.72rem;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text-main);
  line-height: 1.4;
}

/* --- Request Configuration Inspector (F-24) --- */
.msg-config-container {
  display: none;
  margin-top: 12px;
  background: var(--pre-bg);
  border: 1px solid var(--pre-border);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  font-family: 'Fira Code', 'Courier New', Courier, monospace;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--pre-color);
  overflow-x: auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.msg-request-metadata {
  margin-bottom: 8px;
  font-size: 0.72rem;
  color: #94a3b8;
  border-bottom: 1px solid rgba(167, 139, 250, 0.15);
  padding-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-weight: 500;
  align-items: center;
}

/* Exhaustive Comment: Hide the manual hardcoded pipe spans in the HTML to avoid awkward wrapping.
   We then use CSS pseudo-elements to inject custom vertical dividers that stay anchored next
   to their preceding labels and wrap gracefully on narrow screen layouts. */
.msg-request-metadata > span:nth-child(even) {
  display: none !important;
}

.msg-request-metadata > span:nth-child(odd):not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  background: currentColor;
  opacity: 0.15;
  margin-left: 12px;
  flex-shrink: 0;
}

.msg-request-metadata strong {
  color: var(--primary-hover);
}

/* Toggled State: morph bubble content to raw payload */
.message-bubble.show-code .msg-body,
.message-bubble.show-code .msg-attachments,
.message-bubble.show-code .render-image-grid,
.message-bubble.show-code .prompt-expand-btn,
.message-bubble.show-code .msg-response-metadata,
.message-bubble.show-code .msg-request-metadata {
  display: none !important;
}

.message-bubble.show-code .msg-config-container {
  display: block !important;
  margin-top: 0;
  background: transparent;
  border: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.msg-config-container pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.msg-config-btn svg {
  transition: transform 0.2s ease;
}

.msg-config-btn.active svg {
  transform: rotate(90deg);
  color: var(--primary-hover);
}

.msg-config-btn.active {
  opacity: 1 !important;
}

/* --- Scoped Panel Layout Adjustments (Controls, Outputs, Agent drawer) --- */
.playground-controls-card .panel-header,
.playground-outputs-card .panel-header,
.agent-drawer .panel-header {
  height: 64px;
  box-sizing: border-box;
  padding: 12px 20px;
  border-bottom: 1px solid var(--sidebar-border);
  cursor: default;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}

.playground-controls-card .panel-header > div,
.playground-outputs-card .panel-header > div,
.agent-drawer .panel-header > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Standardized Panel Header Version Badges */
.panel-header-version-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-pink);
  background: rgba(236, 72, 153, 0.1);
  border: 1px solid rgba(236, 72, 153, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}

.playground-controls-card .panel-body,
.playground-outputs-card .panel-body,
.agent-drawer .panel-body {
  /* Exhaustive Comment: Explicitly override global panel-body styles to keep
     playground cards and agent drawers expanded and scrollable vertically. */
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
  max-height: none !important;
  height: auto;
}

/* ========================================================================
   F-25: LANDING & HOME PAGE STYLES
   Adds custom styles for the premium glassmorphic onboarding landing page,
   glowing background elements, teaser workspace mockup, and animations.
   ======================================================================== */

.landing-container {
  display: block; /* Shown by default */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  overflow: visible;
  background-color: var(--bg-deep);
  background-image: radial-gradient(circle at 50% 10%, rgba(139, 92, 246, 0.15) 0%, transparent 60%);
  color: #f1f5f9;
  font-family: var(--font-body);
  z-index: 100;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* State Transitions between Landing Page and Workspace */
.landing-container.fade-out {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

.app-container {
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1);
  opacity: 1;
}

.app-container.fade-in {
  display: flex !important;
  animation: appFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes appFadeIn {
  from {
    opacity: 0;
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Background glows */
.lp-bg-glow-1 {
  position: absolute;
  top: 15%;
  left: 10%;
  width: 35vw;
  height: 35vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.lp-bg-glow-2 {
  position: absolute;
  top: 45%;
  right: 5%;
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.07) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.lp-content-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Navbar */
.lp-navbar {
  height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 40px;
}

/* Hero Section */
.lp-hero {
  text-align: center;
  max-width: 800px;
  margin: 40px auto 60px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  animation: lpFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lpFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lp-badge {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  padding: 6px 16px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-hover);
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
}

.lp-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 30%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lp-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: #94a3b8;
  line-height: 1.6;
  max-width: 650px;
}

.lp-hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.lp-hero-btn-primary {
  padding: 14px 28px !important;
  font-size: 1.05rem !important;
}

.lp-hero-btn-secondary {
  padding: 14px 28px !important;
  font-size: 1.05rem !important;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  color: #cbd5e1;
  border-radius: var(--border-radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.lp-hero-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: translateY(-2px);
}

/* Teaser Mockup Section */
.lp-teaser-section {
  width: 100%;
  margin-bottom: 80px;
  perspective: 1000px;
  animation: lpFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  opacity: 0;
}

.lp-mockup-frame {
  background: rgba(10, 11, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 
              0 0 1px 1px rgba(139, 92, 246, 0.15) inset;
  overflow: hidden;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  transform: rotateX(5deg);
  transition: transform 0.5s ease, border-color 0.5s ease;
}

.lp-mockup-frame:hover {
  transform: rotateX(0deg) translateY(-5px);
  border-color: rgba(139, 92, 246, 0.3);
}

.lp-mockup-header {
  height: 44px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 16px;
  position: relative;
}

.lp-mockup-dots {
  display: flex;
  gap: 6px;
  position: absolute;
  left: 16px;
}

.lp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.lp-dot.red { background: #ef4444; opacity: 0.7; }
.lp-dot.yellow { background: #f59e0b; opacity: 0.7; }
.lp-dot.green { background: #10b981; opacity: 0.7; }

.lp-mockup-tab {
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  padding: 6px 16px;
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
  display: flex;
  align-items: center;
  color: #fff;
}

.lp-mockup-body {
  padding: 16px;
  height: 380px;
}

.lp-mockup-layout {
  display: grid;
  grid-template-columns: 80px 1fr 200px;
  gap: 16px;
  height: 100%;
}

/* Mockup Sidebar */
.lp-mockup-sidebar {
  border-right: 1px solid var(--border-color);
  padding-right: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-mockup-item {
  height: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.lp-mockup-item.active {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
}

/* Mockup Workspace */
.lp-mockup-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-mockup-input {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 14px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-mockup-minimal-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.lp-mockup-pill {
  font-size: 0.65rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  padding: 4px 8px;
  border-radius: 20px;
  color: #cbd5e1;
}

.lp-mockup-text-line {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}

.lp-mockup-output {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 14px;
  height: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mockup Refinery */
.lp-mockup-refinery {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-mockup-refinery-header {
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-heading);
  display: flex;
  align-items: center;
  color: var(--primary-hover);
  margin-bottom: 4px;
}

/* Features Grid */
.lp-features {
  margin-bottom: 80px;
  animation: lpFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  opacity: 0;
}

.lp-section-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: #f1f5f9;
}

.lp-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.lp-feature-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              border-color 0.3s ease, 
              box-shadow 0.3s ease;
  cursor: default;
}

.lp-feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 
              0 0 1px 1px rgba(139, 92, 246, 0.1) inset;
}

.lp-feature-icon {
  width: 48px;
  height: 48px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--border-radius-md);
  color: var(--primary-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-feature-card h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.lp-feature-card p {
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.5;
}

/* Footer */
.lp-footer {
  margin-top: auto;
  padding: 40px 0;
  border-top: 1px solid var(--border-color);
  text-align: center;
  font-size: 0.85rem;
  color: #64748b;
}

/* Responsive layout adjustments */
@media(max-width: 768px) {
  .lp-mockup-layout {
    grid-template-columns: 1fr;
  }
  .lp-mockup-sidebar, .lp-mockup-refinery {
    display: none;
  }
  .lp-hero-actions-wrapper {
    width: 100%;
    max-width: 320px;
  }
}

/* --- Google Authentication User Dropdown & Profile Styling (F-27) --- */
.user-profile-menu-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-btn {
  background: transparent;
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 50%;
  padding: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.avatar-btn:hover {
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
  transform: scale(1.05);
}

.avatar-btn img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--bg-deep);
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 240px;
  background: var(--popover-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--popover-border);
  border-radius: var(--border-radius-md);
  padding: 16px;
  box-shadow: var(--shadow-premium);
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: 12px;
  transform: translateY(-10px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transform-origin: top right;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-dropdown.open {
  display: flex;
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.profile-dropdown-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}

.profile-email {
  font-size: 0.75rem;
  color: #94a3b8;
  word-break: break-all;
}

.profile-dropdown-divider {
  height: 1px;
  background: var(--border-color);
  width: 100%;
}

.profile-dropdown-item {
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  color: #cbd5e1;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-smooth);
}

.profile-dropdown-item:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.2);
}

.profile-dropdown-item svg {
  transition: transform 0.2s ease;
}

.profile-dropdown-item:hover svg {
  transform: translateX(2px);
}

/* --- Task Branching UI Styling (F-11 Enhancement) --- */
.timeline-branch-tag {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(139, 92, 246, 0.12);
  color: var(--primary-hover);
  border: 1px solid rgba(139, 92, 246, 0.25);
  padding: 2px 8px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.timeline-branch-tag:hover {
  background: rgba(139, 92, 246, 0.22);
  border-color: var(--primary);
  color: #fff;
  transform: scale(1.02);
}

.timeline-branch-tag svg {
  color: var(--primary-hover);
  transition: transform 0.2s ease;
}

.timeline-branch-tag:hover svg {
  transform: rotate(15deg);
}

/* Light mode overrides for secondary header action buttons to improve contrast */
html[data-theme="light"] .action-btn-secondary {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  color: #475569;
}

html[data-theme="light"] .action-btn-secondary:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #0f172a;
  border-color: rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Feature F-41: Multimodal Outputs (Audio Cards & Inline Image Outputs)
   ========================================================================== */

/* Exhaustive Comment: Styled inline card for spoken TTS audio playback in chat bubble */
.msg-inline-audio-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-md);
  padding: 12px;
  margin-top: 12px;
  max-width: 320px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: border-color var(--transition-smooth);
}

.msg-inline-audio-card:hover {
  border-color: var(--primary);
}

.msg-inline-audio-card .audio-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
}

.msg-inline-audio-card .audio-card-header .audio-icon {
  color: var(--primary-hover);
  font-size: 1.1rem;
}

.msg-inline-audio-card audio {
  width: 100%;
  height: 36px;
  outline: none;
  border-radius: 4px;
}

/* Light mode support for the audio card */
html[data-theme="light"] .msg-inline-audio-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .msg-inline-audio-card .audio-card-header {
  color: #475569;
}

/* Exhaustive Comment: Styled inline image tag returned as part of multimodal generation content parts */
.msg-inline-image {
  display: block;
  max-width: 100%;
  max-height: 280px;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 12px;
  cursor: pointer;
  object-fit: contain;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease;
}

.msg-inline-image:hover {
  transform: scale(1.02);
  border-color: var(--primary);
}

html[data-theme="light"] .msg-inline-image {
  border-color: rgba(0, 0, 0, 0.1);
}

/* Light mode overrides for interactive hover states to prevent white-on-white text */
html[data-theme="light"] .tab-btn:hover {
  color: var(--primary);
}
html[data-theme="light"] .custom-select-wrapper:hover .custom-select-trigger {
  color: var(--text-main);
}
html[data-theme="light"] .custom-select-wrapper.open .custom-select-chevron {
  color: var(--primary);
}
html[data-theme="light"] .message-bubble:hover .msg-copy-btn:hover,
html[data-theme="light"] .agent-msg-bubble:hover .msg-copy-btn:hover,
html[data-theme="light"] .agent-bubble-wrapper:hover .msg-copy-btn:hover,
html[data-theme="light"] .timeline-chat-header:hover .msg-copy-btn:hover {
  color: var(--primary);
  background: rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .timeline-branch-tag:hover {
  color: var(--primary);
  background: rgba(139, 92, 246, 0.15);
}
html[data-theme="light"] .btn-toggle-visibility:hover {
  color: var(--primary);
}

/* --- Modern Glassmorphic Toggle Switch (F-43) ---
   Aligns a subtle text label and sliding switch container horizontally.
*/
.modern-toggle-container {
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

/* Label styling inside the modern toggle container */
.modern-toggle-container .toggle-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color var(--transition-smooth);
}

/* The parent switch wrapper specifying the pill dimensions */
.modern-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}

/* Hide default checkbox element from the DOM view */
.modern-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The sliding background track */
.modern-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 20px;
}

/* The sliding circular knob inside the track */
.modern-switch .slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-muted);
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Glow highlight for checked/active toggle state */
.modern-switch input:checked + .slider {
  background-color: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.4);
}

/* Shift knob position and apply primary color and box shadow on active */
.modern-switch input:checked + .slider:before {
  transform: translateX(14px);
  background-color: var(--primary-hover);
  box-shadow: 0 0 8px var(--primary);
}

/* --- Light Mode overrides for the sliding toggle (F-36) --- */
html[data-theme="light"] .modern-switch .slider {
  background-color: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .modern-switch .slider:before {
  background-color: #64748b;
}

html[data-theme="light"] .modern-switch input:checked + .slider {
  background-color: rgba(109, 40, 217, 0.15);
  border-color: rgba(109, 40, 217, 0.3);
}

html[data-theme="light"] .modern-switch input:checked + .slider:before {
  background-color: var(--primary);
  box-shadow: 0 0 6px var(--primary);
}


/* --- Monospace Raw Code Block Container (F-43) ---
   Displays raw text verbatim in a monospace, scrollable block.
*/
.raw-code-block {
  font-family: var(--font-mono, 'Fira Code', 'Courier New', monospace);
  font-size: 0.8rem;
  line-height: 1.5;
  background: var(--pre-bg);
  border: 1px solid var(--pre-border);
  padding: 12px;
  border-radius: var(--border-radius-sm);
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--pre-color);
  margin: 10px 0 0 0;
  max-height: 500px;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

/* --- Resizing Performance Optimization (AP4) ---
   Disables layout transitions and expensive backdrop-filters globally
   while the user is actively resizing panel layouts to maximize frame rate.
*/
body.resizing * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}

/* --- Refinery Prompt Card Diff Toggles --- */
.diff-toggle-group {
  display: flex;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-sm);
  padding: 2px;
  gap: 2px;
}

.diff-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  outline: none;
}

.diff-toggle-btn:hover {
  color: var(--text-main);
}

.diff-toggle-btn.active {
  background: rgba(139, 92, 246, 0.25);
  color: #c084fc;
}

/* Light mode overrides for diff toggles */
html[data-theme="light"] .diff-toggle-group {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .diff-toggle-btn.active {
  background: rgba(139, 92, 246, 0.15);
  color: #7c3aed;
}

/* --- Multi-select Dropdown Checkbox and Message Bubble Tab Bar --- */
.dropdown-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: all 0.2s ease;
  margin-right: 8px;
  position: relative;
  flex-shrink: 0;
}

.dropdown-checkbox:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.dropdown-checkbox:checked::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  position: absolute;
  top: 1px;
  left: 4px;
}

/* Tab bar inside unified message bubbles */
.msg-bubble-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 6px;
}

.msg-tab-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: var(--border-radius-sm);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.msg-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
}

.msg-tab-btn.active {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: var(--primary) !important;
  color: #c084fc !important;
}

html[data-theme="light"] .msg-tab-btn.active {
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: var(--primary) !important;
  color: #7c3aed !important;
}

/* --- Analysis Panel Context Split Panels (Inputs & Output) --- */
.agent-live-context-bar {
  display: flex;
  flex-direction: column;
  gap: 4px !important;
  padding: 10px 14px !important;
  background: rgba(255, 255, 255, 0.01) !important;
  border: 1px dashed var(--border-color) !important;
  border-radius: var(--border-radius-md) !important;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.agent-live-context-bar:hover {
  background: rgba(139, 92, 246, 0.03) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-0.5px);
}

.agent-context-main-title {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

.agent-context-link {
  font-family: var(--font-heading);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.agent-context-link:hover {
  color: var(--accent-pink) !important;
  text-decoration: underline;
}

.agent-context-subpanel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.agent-context-subpanel-title {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-left: 2px solid var(--accent-cyan);
  padding-left: 6px;
  line-height: 1;
}

.agent-context-subpanel.output .agent-context-subpanel-title {
  color: var(--accent-green, #10b981);
  border-left-color: var(--accent-green, #10b981);
}

.agent-context-subpanel-content {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Compact variant for sidebar attachment thumbnails */
.attachment-thumbnail.compact {
  width: 40px;
  height: 40px;
}

/* File extension badge layout tweaks for compact mode */
.attachment-thumbnail.compact .file-extension-badge {
  font-size: 6px !important;
  bottom: 2px !important;
  padding: 0.5px 2px !important;
}

/* Tiny variant for live context bar */
.attachment-thumbnail.tiny {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border-radius: 4px !important;
}

.attachment-thumbnail.tiny .file-extension-badge {
  font-size: 5px !important;
  bottom: 1px !important;
  padding: 0.5px 1.5px !important;
}

.attachment-thumbnail.tiny .attachment-role-badge {
  font-size: 5px !important;
  top: 1px !important;
  left: 1px !important;
  padding: 0.5px 1.5px !important;
}

/* Video Split Uploader overlay role badge */
.attachment-role-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 6px;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.75);
  color: var(--accent-cyan);
  padding: 1px 3px;
  border-radius: 2px;
  pointer-events: none;
  border: 1px solid rgba(6, 182, 212, 0.4);
  z-index: 5;
  letter-spacing: 0.02em;
}

/* Light mode overrides for split sub-panels */
html[data-theme="light"] .agent-live-context-bar {
  background: rgba(241, 245, 249, 0.5) !important;
}

html[data-theme="light"] .agent-context-subpanel-title {
  color: #0891b2; /* Cyan dark for light mode */
  border-left-color: #0891b2;
}

html[data-theme="light"] .agent-context-subpanel.output .agent-context-subpanel-title {
  color: #059669; /* Green dark for light mode */
  border-left-color: #059669;
}

/* ========================================================================
   SCROLL PERFORMANCE OPTIMIZATIONS
   ======================================================================== */

/* 
   Exhaustive Comment: We disable backdrop-filter blur shaders on layout cards and elements 
   that contain or are placed inside scrollable contexts. 
   This prevents the browser from executing expensive blur repaints on every scroll frame,
   drastically reducing scroll latency and GPU load.
*/
.sidebar,
.playground-controls-card,
.playground-outputs-card,
.chat-history-container,
.gen-controls-card,
.gen-results-card,
.tracker-sidebar-card,
.tracker-details-card,
.agent-drawer,
.agent-submit-panel,
.timeline-summary-row,
.refined-prompt-card,
.json-visualizer-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 
   Exhaustive Comment: We slightly increase opacity of surfaces to maintain a premium solid-glass 
   aesthetic without requiring real-time transparency blur backdrop blending.
*/
:root {
  --bg-surface: rgba(17, 19, 28, 0.95);
  --bg-card: rgba(28, 30, 43, 0.88);
}

html[data-theme="light"] {
  --bg-surface: rgba(255, 255, 255, 0.98);
  --bg-card: rgba(248, 250, 252, 0.95);
}

/* Tiny toggle switch inside the submit button */
.agent-btn-switch {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.agent-btn-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.agent-btn-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: .3s;
  border-radius: 16px;
}

.agent-btn-slider:before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.agent-btn-switch input:checked + .agent-btn-slider {
  background-color: var(--accent-cyan, #06b6d4);
  border-color: rgba(6, 182, 212, 0.5);
}

.agent-btn-switch input:checked + .agent-btn-slider:before {
  transform: translateX(12px);
}

/* --- Deleting Nodes Action Button Styles ---
   Exhaustive Comment: Styles the delete version history node button with a warning red visual accent.
   Uses a semi-transparent red border and color, and transitions to a soft red background glow on hover
   to match the premium glassmorphic dark/light UI design systems. */
.btn-modal-close.btn-delete-node {
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #ef4444 !important;
}

.btn-modal-close.btn-delete-node:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
}

/* --- Analysis Agent API Request Inspector (F-24) ---
   Exhaustive Comment: Handles toggling the visibility of message contents vs. the raw JSON payload code block
   in the analysis agent chat drawer. When .show-code is toggled on .agent-msg-bubble:
   1. The normal text body is hidden.
   2. The attached context wrapper is hidden.
   3. The suggested prompt card is hidden.
   4. The pre-formatted code block container (.msg-config-container) is displayed inside the bubble card. */
.agent-msg-bubble.show-code .agent-msg-body,
.agent-msg-bubble.show-code .agent-bubble-context,
.agent-msg-bubble.show-code .refined-prompt-card {
  display: none !important;
}

.agent-msg-bubble.show-code .msg-config-container {
  display: block !important;
  background: var(--pre-bg);
  border: 1px solid var(--pre-border);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  margin-top: 10px;
  font-family: 'Fira Code', 'Courier New', Courier, monospace;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--pre-color);
  overflow-x: auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Exclusive Disclosures Accordion Parameter Groups */
.exclusive-disclosure-accordion {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.param-disclosure {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.param-disclosure:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.disclosure-header::-webkit-details-marker {
  display: none;
}

.disclosure-header {
  list-style: none;
  outline: none;
}

.disclosure-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.disclosure-header:hover .chevron-icon {
  color: #fff !important;
}

/* Rotate Chevron when details element is open */
.param-disclosure[open] .chevron-icon {
  transform: rotate(180deg);
  color: var(--primary) !important;
}

/* Scrollable configuration panels inside disclosure content */
.disclosure-content::-webkit-scrollbar {
  width: 6px;
}

.disclosure-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.disclosure-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.disclosure-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Sub-headers inside parameter configuration sections */
.settings-sub-header {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary, #8b5cf6);
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
  margin-bottom: 4px;
}

/* Section column container for parameter tuning & output formats */
.param-section-column {
  min-width: 0; /* Prevents overflow inside flex/grid layouts */
  transition: all 0.3s ease;
}

/* 
   Exhaustive Comment: Theme-specific overrides to enforce high contrast and WCAG AA 
   legibility standards. Adjusts placeholders, selector triggers, and status badge 
   opacities/colors specifically under light-mode configurations.
*/

/* Standardize placeholders to respect theme muted text tokens */
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.65;
}

/* Light mode adjustments for components */
html[data-theme="light"] .custom-select-trigger {
  color: var(--text-muted) !important;
}

html[data-theme="light"] .custom-select-trigger:hover,
html[data-theme="light"] .custom-select-wrapper.open .custom-select-trigger {
  color: var(--text-main) !important;
}

/* Fix storage badges visibility in light mode */
html[data-theme="light"] .msg-storage-badge.local {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.65) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .msg-storage-badge.cloud {
  background: rgba(4, 120, 87, 0.08) !important;
  color: #047857 !important; /* Darker green (emerald-700) for contrast on white */
  border: 1px solid rgba(4, 120, 87, 0.2) !important;
}

html[data-theme="light"] .msg-storage-badge.syncing {
  background: rgba(194, 65, 12, 0.08) !important;
  color: #c2410c !important; /* Darker orange (orange-700) for contrast on white */
  border: 1px solid rgba(194, 65, 12, 0.2) !important;
}

/* Sub-header border color adjustment for light mode */
html[data-theme="light"] .settings-sub-header {
  border-bottom-color: rgba(0, 0, 0, 0.12) !important;
}