/* ============================================================
   CAMUNDA WEB MODELER — AI CO-MODELER PROTOTYPE
   Design System + All Component Styles
   ============================================================ */

/* --- Design Tokens --- */
:root {
  /* Brand */
  --color-brand: #FC5D0D;
  --color-brand-hover: #E14D00;
  --color-brand-light: #FFF1E8;
  --color-brand-mid: #F8B28B;

  /* Neutrals */
  --color-bg-app: #F5F5F7;
  --color-bg-canvas: #FAFAFA;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-subtle: #F0F0F2;
  --color-bg-muted: #E8E8EC;

  /* Text */
  --color-text-primary: #111118;
  --color-text-secondary: #5A5A6E;
  --color-text-tertiary: #9898AB;
  --color-text-inverse: #FFFFFF;

  /* Border */
  --color-border-default: #E2E2E8;
  --color-border-strong: #C8C8D2;
  --color-border-focus: #FC5D0D;

  /* Semantic */
  --color-success: #1A8A52;
  --color-success-bg: #EDFBF3;
  --color-success-border: #A3E6C3;
  --color-warning: #B45309;
  --color-warning-bg: #FFFBEB;
  --color-error: #C0392B;
  --color-error-bg: #FEF2F2;
  --color-info: #1D6FA4;
  --color-info-bg: #EFF6FF;

  /* AI accent */
  --color-ai: #FC5D0D;
  --color-ai-bg: #FFF5EF;
  --color-ai-border: #FFD6C2;
  --color-ai-glow: rgba(252, 93, 13, 0.18);

  /* Canvas elements */
  --color-element-default: #FFFFFF;
  --color-element-border: #6B7280;
  --color-element-selected: #FC5D0D;
  --color-element-selected-bg: #FFF1E8;
  --color-element-hover: #374151;
  --color-element-success: #1A8A52;
  --color-element-success-bg: #EDFBF3;
  --color-token: #16A34A;
  --color-token-glow: rgba(22, 163, 74, 0.3);

  /* Ghost / suggestion */
  --color-ghost-bg: rgba(255, 255, 255, 0.6);
  --color-ghost-border: rgba(252, 93, 13, 0.35);
  --color-ghost-text: rgba(252, 93, 13, 0.7);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-ai: 0 0 0 1px var(--color-ai-border), 0 4px 16px var(--color-ai-glow);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-canvas: 1;
  --z-element: 10;
  --z-ghost: 20;
  --z-coaching: 30;
  --z-panel: 40;
  --z-toolbar: 50;
  --z-topbar: 60;
  --z-overlay: 70;
  --z-modal: 80;
  --z-toast: 90;
  --z-nav: 100;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}
button { font-family: var(--font-sans); cursor: pointer; border: none; background: none; }
input, textarea { font-family: var(--font-sans); }

/* --- Screen Management --- */
.screen { display: none; width: 100%; height: 100vh; }
.screen.active { display: flex; flex-direction: column; }

/* --- App Shell --- */
.app-shell {
  display: grid;
  grid-template-rows: 48px 40px auto 1fr auto auto;
  grid-template-areas: "topbar" "toolbar" "config-banner" "workspace" "ai-bar" "problems";
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-app);
}

/* --- Topbar --- */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-default);
  gap: var(--space-3);
  z-index: var(--z-topbar);
}
.topbar-logo { width: 24px; height: 24px; flex-shrink: 0; }
.topbar-divider { width: 1px; height: 20px; background: var(--color-border-default); }
.topbar-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.topbar-breadcrumb .diagram-name { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-2); }

/* Mode Tabs — Flow Guider */
.mode-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  background: none;
  padding: 0;
}
.mode-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px 5px 6px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-tertiary);
  cursor: pointer;
  border: 1.5px solid transparent;
  background: transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}
.mode-tab:hover {
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
}

/* Step number circle */
.mode-tab-indicator {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-muted);
  transition: all 0.25s ease;
  flex-shrink: 0;
  position: relative;
}
.mode-tab-step {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  line-height: 1;
  transition: all 0.25s ease;
}

/* Connector line between tabs */
.mode-tab-connector {
  width: 20px;
  height: 1.5px;
  background: var(--color-border-default);
  flex-shrink: 0;
  transition: background 0.3s ease;
}

/* Active tab */
.mode-tab.active {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  background: var(--color-bg-surface);
  border-color: var(--color-border-default);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.mode-tab.active .mode-tab-indicator {
  background: var(--color-brand);
}
.mode-tab.active .mode-tab-step {
  color: #fff;
}

/* Done state — green checkmark */
.mode-tab.done {
  color: var(--color-text-secondary);
}
.mode-tab.done .mode-tab-indicator {
  background: var(--color-success);
}
.mode-tab.done .mode-tab-step {
  color: #fff;
}

/* Connector turns green when left tab is done */
.mode-tab.done + .mode-tab-connector {
  background: var(--color-success);
}

/* Active tab after a done connector also gets green connector leading into it */
.mode-tab.done + .mode-tab-connector + .mode-tab.active .mode-tab-indicator {
  box-shadow: 0 0 0 3px rgba(252, 93, 13, 0.12);
}

/* Tab that is both done AND active — active wins for indicator, done checkmark stays */
.mode-tab.done.active .mode-tab-indicator {
  background: var(--color-brand);
}

/* Disabled tab (Play — cluster required) */
.mode-tab.mode-tab--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.mode-tab.mode-tab--disabled:hover {
  color: var(--color-text-tertiary);
  background: transparent;
}

/* --- Cluster Required Modal --- */
.cluster-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: cluster-fade-in 0.15s ease-out;
}
@keyframes cluster-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cluster-modal {
  position: relative;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  max-width: 480px;
  width: 90%;
  padding: var(--space-8) var(--space-8) var(--space-6);
  animation: cluster-modal-in 0.2s ease-out;
}
@keyframes cluster-modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.cluster-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  cursor: pointer; font-size: 20px;
  transition: all var(--transition-fast);
}
.cluster-modal-close:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}
.cluster-modal-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}
.cluster-modal-illustration {
  flex-shrink: 0;
  padding-top: var(--space-1);
}
.cluster-modal-content {
  flex: 1;
}
.cluster-modal-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}
.cluster-modal-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-5);
}
.cluster-modal-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  background: #1A56DB;
  color: white;
  border: 2px solid #1A56DB;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
}
.cluster-modal-cta:hover {
  background: #1648B8;
  border-color: #1648B8;
}

/* --- Toolbar --- */
.toolbar {
  grid-area: toolbar;
  display: flex; align-items: center; padding: 0 var(--space-4); gap: var(--space-2);
  background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-default);
  z-index: var(--z-toolbar);
}
.toolbar-group { display: flex; align-items: center; gap: var(--space-1); }
.toolbar-divider { width: 1px; height: 20px; background: var(--color-border-default); margin: 0 var(--space-1); }
.toolbar-spacer { flex: 1; }
/* Simplified Labels Toggle */
.simplified-toggle {
  display: flex; align-items: center; gap: var(--space-2); cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.simplified-toggle .simplified-checkbox { display: none; }
.toggle-track {
  width: 32px; height: 18px; background: var(--color-bg-muted);
  border-radius: var(--radius-full); position: relative;
  transition: background var(--transition-fast); flex-shrink: 0;
}
.toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  background: white; border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm); transition: transform var(--transition-fast);
}
.simplified-checkbox:checked ~ .toggle-track {
  background: var(--color-ai);
}
.simplified-checkbox:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(14px);
}
.toggle-label {
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-ai); white-space: nowrap;
}

/* Info Icon Button */
.info-icon-btn {
  position: absolute; width: 20px; height: 20px; border-radius: var(--radius-full);
  background: var(--color-bg-surface); border: 1.5px solid var(--color-border-default);
  color: var(--color-text-tertiary); font-size: 11px; font-weight: 600;
  font-style: italic; font-family: Georgia, serif;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: var(--z-ghost); transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm); opacity: 0.7;
}
.info-icon-btn:hover {
  opacity: 1; border-color: var(--color-ai); color: var(--color-ai);
  background: var(--color-ai-bg); transform: scale(1.15);
  box-shadow: 0 0 0 3px var(--color-ai-glow);
}
.info-icon-btn.active {
  opacity: 1; border-color: var(--color-ai); color: var(--color-text-inverse);
  background: var(--color-ai); transform: scale(1.1);
}

/* Info Popover */
.info-popover {
  position: absolute; width: 280px; background: var(--color-bg-surface);
  border: 1.5px solid var(--color-ai-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-ai); z-index: var(--z-coaching);
  animation: popover-in 200ms var(--transition-spring);
  overflow: hidden;
}
@keyframes popover-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.info-popover-header {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border-default);
}
.info-popover-title {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-text-primary); flex: 1;
}
.info-popover-badge {
  padding: 2px 8px; background: var(--color-ai-bg); border: 1px solid var(--color-ai-border);
  border-radius: var(--radius-full); font-size: 10px; color: var(--color-ai);
  font-weight: var(--weight-medium);
}
.info-popover-close {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--color-text-tertiary);
  border-radius: var(--radius-sm); cursor: pointer; font-size: 12px;
}
.info-popover-close:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.info-popover-body {
  padding: var(--space-3); font-size: var(--text-sm); line-height: 1.6;
  color: var(--color-text-secondary);
}
.info-popover-chips {
  padding: 0 var(--space-3) var(--space-2); display: flex; gap: var(--space-1); flex-wrap: wrap;
}
.info-popover-chips .chat-chip { font-size: 10px; padding: 3px 9px; }
.info-popover-input {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 var(--space-3) var(--space-3); padding: 5px var(--space-2);
  background: var(--color-bg-subtle); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg); transition: border-color var(--transition-fast);
}
.info-popover-input:focus-within {
  border-color: var(--color-brand); background: var(--color-bg-surface);
  box-shadow: 0 0 0 3px var(--color-brand-light);
}
.info-popover-input .ai-input-field { font-size: var(--text-xs); }
/* Popover arrow */
.info-popover::after {
  content: ''; position: absolute; bottom: -7px; left: 24px;
  width: 12px; height: 12px; background: var(--color-bg-surface);
  border-right: 1.5px solid var(--color-ai-border);
  border-bottom: 1.5px solid var(--color-ai-border);
  transform: rotate(45deg);
}

/* Test Button */
.btn-test {
  display: flex; align-items: center; gap: var(--space-2); padding: 7px 16px;
  background: var(--color-success); color: var(--color-text-inverse); border: none;
  border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; letter-spacing: -0.01em;
}
.btn-test::before {
  content: ''; width: 0; height: 0; border-style: solid;
  border-width: 4px 0 4px 7px; border-color: transparent transparent transparent currentColor;
}
.btn-test:hover { background: #15763F; box-shadow: 0 2px 8px rgba(26,138,82,0.3); transform: translateY(-1px); }
.btn-test:active { transform: translateY(0); box-shadow: none; }
.btn-test.disabled { background: var(--color-bg-muted); color: var(--color-text-tertiary); cursor: not-allowed; transform: none; box-shadow: none; }

/* --- Workspace --- */
.workspace { grid-area: workspace; display: flex; overflow: hidden; }
.element-palette {
  width: 60px; flex-shrink: 0; border-right: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
}
.palette-item {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto; border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--transition-fast);
}
.palette-item:hover { background: var(--color-bg-subtle); }
.palette-label {
  font-size: 9px; font-weight: var(--weight-medium); color: var(--color-text-tertiary);
  text-align: center; line-height: 1; margin-top: -2px;
}
.palette-divider {
  width: 24px; height: 1px; background: var(--color-border-default); margin: var(--space-1) auto;
}
.canvas-area {
  flex: 1; position: relative; overflow: hidden; background-color: var(--color-bg-canvas);
  background-image:
    linear-gradient(var(--color-border-default) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--color-border-default) 0.5px, transparent 0.5px);
  background-size: 20px 20px;
  background-position: -0.5px -0.5px;
  isolation: isolate;
}
/* Subtle vignette at canvas edges */
.canvas-area::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 30% 15%, rgba(124, 111, 247, 0.08), transparent 28%),
    radial-gradient(circle at 78% 82%, rgba(74, 124, 255, 0.08), transparent 22%),
    radial-gradient(ellipse at center, transparent 62%, rgba(245,245,247,0.54) 100%);
}
.bpmn-canvas { display: block; }

/* --- AI Bar --- */
.ai-bar {
  grid-area: ai-bar;
  transition: height var(--transition-spring); overflow: hidden; z-index: var(--z-panel);
}
.ai-bar.collapsed { height: 96px; }
.ai-bar.expanded { height: 280px; }

/* Collapsed */
.ai-bar-collapsed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon preview expand"
    ". input chips";
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 10px;
  padding: 12px var(--space-4);
  height: 92px;
}
.ai-icon {
  width: 28px; height: 28px; background: var(--color-ai-bg);
  border: 1px solid var(--color-ai-border); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 14px; color: var(--color-ai);
}
.ai-bar-intro {
  grid-area: icon;
  display: flex; align-items: center; flex: 0 0 auto;
}
.ai-bar-context { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-bar-context.element-selected { color: var(--color-brand); }
.ai-bar-live-region {
  grid-area: preview;
  min-width: 0;
  display: flex; align-items: center;
  padding: 0;
  height: 38px;
}
.ai-bar-preview-viewport {
  flex: 1; min-width: 0; max-height: 38px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--color-border-default) transparent;
}
.ai-bar-preview {
  display: block; max-width: 100%; padding-right: 6px; font-size: var(--text-sm); line-height: 1.25;
  color: var(--color-text-secondary); white-space: normal; overflow-wrap: anywhere;
}
.ai-bar-chips {
  grid-area: chips;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  min-width: 0; overflow: hidden; align-self: end;
}
.chip-inline {
  padding: 6px 12px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; transition: all var(--transition-fast);
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.chip-inline:hover { background: var(--color-brand-light); border-color: var(--color-brand); color: var(--color-brand); }
.ai-bar-mini-form {
  grid-area: input;
  min-width: 0; max-width: 720px; display: flex; align-items: center; gap: var(--space-2);
  height: 38px; padding: 0 6px 0 var(--space-3);
  background: var(--color-bg-subtle); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  align-self: end;
}
.ai-bar-mini-form:focus-within {
  border-color: var(--color-brand); background: var(--color-bg-surface); box-shadow: 0 0 0 3px var(--color-brand-light);
}
.ai-bar-mini-input {
  min-width: 0; width: 100%; font-size: var(--text-xs);
}
.ai-bar-mini-send {
  width: 28px; height: 28px; border-radius: var(--radius-md); font-size: 11px;
}
.ai-bar-expand {
  grid-area: expand;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-default); background: var(--color-bg-surface);
  border-radius: var(--radius-xl); color: var(--color-text-tertiary); cursor: pointer;
  flex: 0 0 auto; transition: all var(--transition-fast); font-size: 14px;
}
.ai-bar-expand:hover { background: var(--color-bg-subtle); color: var(--color-text-secondary); border-color: var(--color-ai-border); }

/* Expanded */
.ai-bar-expanded { display: none; flex-direction: column; height: 232px; }
.ai-bar.expanded .ai-bar-collapsed { display: none; }
.ai-bar.expanded .ai-bar-expanded { display: flex; }
.ai-bar-handle { height: 8px; display: flex; align-items: center; justify-content: center; cursor: ns-resize; flex-shrink: 0; }
.ai-bar-handle::after { content: ''; width: 40px; height: 3px; background: var(--color-border-default); border-radius: var(--radius-full); }
.ai-bar-header {
  display: flex; align-items: center; padding: var(--space-2) var(--space-4);
  gap: var(--space-3); border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0; height: 40px;
}
.ai-bar-header-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); flex: 1; }
.ai-bar-header-actions { display: flex; align-items: center; gap: var(--space-1); }

/* Progress dots */
.progress-dots { display: flex; align-items: center; gap: var(--space-2); }
.progress-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-bg-muted); transition: all var(--transition-base); }
.progress-dot.done { background: var(--color-success); }
.progress-dot.active { background: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-light); }
.progress-dot-label { font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* Messages */
.ai-messages {
  flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  scrollbar-width: thin; scrollbar-color: var(--color-border-default) transparent;
}
.chat-msg { display: flex; flex-direction: column; gap: var(--space-1); max-width: 100%; }
.chat-msg-ai { align-items: flex-start; }
.chat-msg-user { align-items: flex-end; }
.chat-msg-avatar {
  width: 20px; height: 20px; background: var(--color-ai-bg);
  border: 1px solid var(--color-ai-border); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--color-ai); flex-shrink: 0;
}
.chat-msg-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 2px; }
.chat-msg-name { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-ai); }
.chat-bubble { padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font-size: var(--text-sm); line-height: 1.5; max-width: 100%; }
.chat-bubble-ai { background: var(--color-ai-bg); border: 1px solid var(--color-ai-border); color: var(--color-text-primary); border-bottom-left-radius: var(--radius-sm); }
.chat-bubble-user { background: var(--color-brand); color: white; border-bottom-right-radius: var(--radius-sm); }

/* Mode shift message */
.chat-msg-mode-shift .chat-bubble-ai {
  background: linear-gradient(135deg, var(--color-ai-bg), #F0F4FF);
  border-color: var(--color-brand-mid); position: relative;
}
.chat-msg-mode-shift .chat-bubble-ai::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--color-brand); border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Mode shift bubble (inline class variant) */
.chat-bubble-mode-shift {
  background: linear-gradient(135deg, var(--color-ai-bg), #F0F4FF) !important;
  border-color: var(--color-brand-mid) !important;
  position: relative;
}
.chat-bubble-mode-shift::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-brand);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Config checklist in side panel */
.config-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-4);
}
.config-checklist-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-size: var(--text-sm);
}
.config-checklist-item:hover {
  background: var(--color-bg-subtle);
}
.config-checklist-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-warning);
  flex-shrink: 0;
}
.config-checklist-text {
  flex: 1;
  color: var(--color-text-primary);
  line-height: 1.4;
}
.config-checklist-text strong {
  font-weight: var(--weight-medium);
}
.config-checklist-action {
  font-size: var(--text-xs);
  color: var(--color-brand);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.config-checklist-item:hover .config-checklist-action {
  opacity: 1;
}

/* Input area */
.ai-input-area { padding: var(--space-2) var(--space-4) var(--space-3); border-top: 1px solid var(--color-border-default); display: flex; flex-direction: column; gap: var(--space-2); flex-shrink: 0; }
.ai-chips-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chat-chip {
  display: inline-flex; align-items: center; padding: 5px 12px;
  background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; transition: all var(--transition-fast);
}
.chat-chip:hover { background: var(--color-brand-light); border-color: var(--color-brand); color: var(--color-brand); transform: translateY(-1px); }
.ai-input-row {
  display: flex; align-items: center; gap: var(--space-2); background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-lg);
  padding: 6px var(--space-3); transition: border-color var(--transition-fast);
}
.ai-input-row:focus-within { border-color: var(--color-brand); background: var(--color-bg-surface); box-shadow: 0 0 0 3px var(--color-brand-light); }
.ai-input-field { flex: 1; border: none; background: transparent; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-primary); outline: none; }
.ai-input-field::placeholder { color: var(--color-text-tertiary); }
.ai-send-btn {
  width: 26px; height: 26px; background: var(--color-brand); border: none; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: white; font-size: 12px; transition: all var(--transition-fast); flex-shrink: 0;
}
.ai-send-btn:hover { background: var(--color-brand-hover); }

/* Context header (element selected) */
.ai-context-header {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  background: var(--color-brand-light); border-bottom: 1px solid var(--color-ai-border);
}
.ai-context-element-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-brand); }
.ai-context-badge {
  padding: 2px 8px; background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full); font-size: var(--text-xs); color: var(--color-text-secondary);
}
.ai-context-back { margin-left: auto; font-size: var(--text-xs); color: var(--color-brand); cursor: pointer; }
.ai-context-back:hover { text-decoration: underline; }

/* Config checklist */
.config-checklist { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-1); }
.config-item {
  display: flex; align-items: center; gap: var(--space-2); padding: 5px var(--space-3);
  border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast);
}
.config-item:hover { background: var(--color-bg-subtle); }
.config-item-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-warning); flex-shrink: 0; }
.config-item-text { font-size: var(--text-sm); color: var(--color-text-primary); flex: 1; }
.config-item-action { font-size: var(--text-xs); color: var(--color-brand); font-weight: var(--weight-medium); opacity: 0; transition: opacity var(--transition-fast); }
.config-item:hover .config-item-action { opacity: 1; }

/* Problems bar */
.problems-bar { grid-area: problems; height: 28px; display: flex; align-items: center; background: var(--color-bg-surface); border-top: 1px solid var(--color-border-default); }

/* --- Icon Button --- */
.icon-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--radius-md);
  color: var(--color-text-tertiary); cursor: pointer; font-size: 14px; transition: all var(--transition-fast);
}
.icon-btn:hover { background: var(--color-bg-subtle); color: var(--color-text-secondary); }

/* --- BPMN Elements --- */
.bpmn-element { cursor: pointer; transition: filter var(--transition-fast); }
.hidden { display: none; }

/* --- Generation Animation --- */
@keyframes element-appear {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
.flow-node.generating { animation: element-appear 450ms ease-out forwards; }
@keyframes draw-flow {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
.flow-connector.drawing { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-flow 500ms ease-out forwards; }
.generation-overlay {
  position: absolute; inset: 0; background: rgba(250,250,250,0.6);
  backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center;
  z-index: var(--z-overlay); transition: opacity var(--transition-slow);
}
.generation-overlay.fading { opacity: 0; pointer-events: none; }
.generation-status {
  background: var(--color-bg-surface); border: 1px solid var(--color-ai-border);
  border-radius: var(--radius-xl); padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3); box-shadow: var(--shadow-ai);
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.generation-dots { display: flex; gap: 4px; }
.generation-dot {
  width: 6px; height: 6px; background: var(--color-ai);
  border-radius: var(--radius-full); animation: dot-bounce 1.2s ease-in-out infinite;
}
.generation-dot:nth-child(2) { animation-delay: 0.2s; }
.generation-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* --- Process Token (Play) --- */
.process-token {
  animation: token-pulse 1.5s ease-in-out infinite;
}
@keyframes token-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--color-token-glow)); }
  50% { filter: drop-shadow(0 0 10px rgba(22,163,74,0.4)); }
}

/* --- Ghost suggestions: compact bubbles (diagram stays fully visible) --- */
.ghost-overlay {
  position: absolute;
  z-index: var(--z-ghost);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: min(360px, calc(100% - 24px));
  padding: 14px;
  border: 1px solid rgba(252, 93, 13, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16), 0 2px 10px rgba(252, 93, 13, 0.08);
  pointer-events: auto;
}
.ghost-overlay-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ghost-overlay-eyebrow {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.ghost-overlay-caption {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.ghost-preview {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 58px;
}
.ghost-preview-line {
  height: 2px;
  background: linear-gradient(90deg, rgba(252, 93, 13, 0.16), rgba(252, 93, 13, 0.48));
  flex: 1;
}
.ghost-preview-line--right {
  background: linear-gradient(90deg, rgba(252, 93, 13, 0.48), rgba(252, 93, 13, 0.16));
}
.ghost-preview-arrow {
  width: 26px;
  height: 26px;
  margin: 0 10px;
  border-radius: 999px;
  background: var(--color-brand);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(252, 93, 13, 0.2);
}
.ghost-preview-node {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 164px;
  max-width: 190px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1.5px dashed rgba(252, 93, 13, 0.38);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}
.ghost-preview-node--gateway {
  border-radius: 16px;
}
.ghost-preview-node-icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255, 245, 239, 0.92);
  border: 1px solid rgba(252, 93, 13, 0.2);
}
.ghost-preview-node--task .ghost-preview-node-icon::before {
  content: '';
  position: absolute;
  inset: 6px 4px;
  border-radius: 4px;
  border: 1.5px solid rgba(252, 93, 13, 0.52);
  background: rgba(255,255,255,0.96);
}
.ghost-preview-node--gateway .ghost-preview-node-icon::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  left: 6px;
  top: 6px;
  transform: rotate(45deg);
  border-radius: 2px;
  border: 1.5px solid rgba(252, 93, 13, 0.52);
  background: rgba(255,255,255,0.96);
}
.ghost-preview-node-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ghost-preview-node-title {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.2;
}
.ghost-preview-node-subtitle {
  font-size: 10px;
  color: var(--color-text-tertiary);
  line-height: 1.3;
}
.ghost-cards-grid {
  display: grid;
  gap: 8px;
}
.ghost-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(226, 226, 232, 0.9);
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,248,252,0.96) 100%);
  text-align: left;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.ghost-card:hover {
  transform: translateY(-1px);
  border-color: rgba(252, 93, 13, 0.42);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
.ghost-card--recommended {
  border-color: rgba(252, 93, 13, 0.28);
  background: linear-gradient(180deg, rgba(255, 245, 239, 0.88) 0%, rgba(255,255,255,0.98) 100%);
}
.ghost-card-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(252, 93, 13, 0.18);
  background: rgba(255, 245, 239, 0.9);
  position: relative;
}
.ghost-card-icon--task::before {
  content: '';
  position: absolute;
  inset: 9px 6px;
  border-radius: 5px;
  border: 1.6px solid var(--color-brand-mid);
  background: rgba(255, 255, 255, 0.92);
}
.ghost-card-icon--gateway::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  left: 9px;
  top: 9px;
  transform: rotate(45deg);
  border-radius: 2px;
  border: 1.6px solid var(--color-brand-mid);
  background: rgba(255, 255, 255, 0.96);
}
.ghost-card-icon--escalate::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  right: 4px;
  top: 4px;
  border-radius: var(--radius-full);
  background: #F59E0B;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
}
.ghost-card-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ghost-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ghost-card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.2;
}
.ghost-card-badge {
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: rgba(252, 93, 13, 0.1);
  color: var(--color-brand);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}
.ghost-card-desc {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}
.ghost-overlay .ghost-manual-link {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed rgba(252, 93, 13, 0.28);
  border-radius: 12px;
  background: rgba(255, 245, 239, 0.48);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--color-brand);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.ghost-overlay .ghost-manual-link:hover {
  color: var(--color-brand-hover);
  border-color: rgba(252, 93, 13, 0.45);
  background: rgba(255, 245, 239, 0.8);
  transform: translateY(-1px);
}
.ghost-overlay--inline {
  width: 290px;
  padding: 0;
  gap: 8px;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.ghost-overlay--inline .ghost-overlay-header {
  display: none;
}
.ghost-overlay--inline .ghost-preview {
  min-height: 44px;
  justify-content: flex-start;
}
.ghost-overlay--inline .ghost-preview-line--left,
.ghost-overlay--inline .ghost-preview-arrow {
  display: none;
}
.ghost-overlay--inline .ghost-preview-line--right {
  flex: 1;
  min-width: 72px;
  margin-left: 8px;
}
.ghost-overlay--inline .ghost-preview-node {
  min-width: 0;
  max-width: 168px;
  padding: 8px 9px;
  gap: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(252, 93, 13, 0.5);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}
.ghost-overlay--inline .ghost-preview-node-icon {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}
.ghost-overlay--inline .ghost-preview-node--task .ghost-preview-node-icon::before {
  inset: 5px 4px;
}
.ghost-overlay--inline .ghost-preview-node--gateway .ghost-preview-node-icon::before {
  width: 8px;
  height: 8px;
  left: 5px;
  top: 5px;
}
.ghost-overlay--inline .ghost-preview-node-title {
  font-size: 11px;
}
.ghost-overlay--inline .ghost-preview-node-subtitle {
  font-size: 9px;
}
.ghost-overlay--inline .ghost-cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 0;
  margin-top: 2px;
}
.ghost-overlay--inline .ghost-card {
  position: static;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  border-style: solid;
  border-color: rgba(252, 93, 13, 0.32);
  box-shadow: none;
}
.ghost-overlay--inline .ghost-card-icon {
  width: 18px;
  height: 18px;
  border-radius: 6px;
}
.ghost-overlay--inline .ghost-card-icon--task::before {
  inset: 4px 3px;
  border-radius: 3px;
}
.ghost-overlay--inline .ghost-card-icon--gateway::before {
  width: 6px;
  height: 6px;
  left: 5px;
  top: 5px;
}
.ghost-overlay--inline .ghost-card-copy {
  gap: 0;
}
.ghost-overlay--inline .ghost-card-title {
  font-size: 10px;
  white-space: nowrap;
}
.ghost-overlay--inline .ghost-card-badge {
  font-size: 8px;
  padding: 1px 5px;
}
.ghost-overlay--inline .ghost-card-desc {
  display: none;
}
.ghost-overlay--inline .ghost-card:hover {
  background: rgba(255, 249, 245, 0.92);
  border-color: rgba(252, 93, 13, 0.42);
  box-shadow: 0 4px 10px rgba(252, 93, 13, 0.08);
}
.ghost-overlay--inline .ghost-card--recommended {
  background: rgba(255, 249, 245, 0.94);
  border-color: rgba(252, 93, 13, 0.42);
}
.ghost-overlay--inline .ghost-manual-link {
  display: none;
}

/* --- Coaching Card --- */
.coaching-card {
  position: absolute; background: var(--color-bg-surface); border: 1.5px solid var(--color-brand);
  border-radius: var(--radius-xl); padding: var(--space-4); width: 240px;
  box-shadow: var(--shadow-lg); z-index: var(--z-coaching);
}
.coaching-card-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-2); }
.coaching-card-desc { font-size: var(--text-xs); color: var(--color-text-secondary); line-height: 1.5; margin-bottom: var(--space-3); }
.coaching-input-row { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.coaching-input {
  padding: 6px var(--space-3); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md); font-size: var(--text-sm); font-family: var(--font-sans);
  color: var(--color-text-primary); outline: none; transition: border-color var(--transition-fast);
}
.coaching-input:focus { border-color: var(--color-brand); }
.coaching-actions { display: flex; gap: var(--space-2); }
.coaching-btn-primary {
  flex: 1; padding: 7px; background: var(--color-brand); color: white; border: none;
  border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--weight-medium);
  cursor: pointer; transition: background var(--transition-fast);
}
.coaching-btn-primary:hover { background: var(--color-brand-hover); }
.coaching-btn-secondary {
  padding: 7px 12px; background: transparent; border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text-secondary); cursor: pointer;
}
.coaching-btn-secondary:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); }

/* --- Config Indicator (warning dot) --- */
.config-indicator {
  width: 8px; height: 8px; background: var(--color-warning);
  border: 2px solid white; border-radius: var(--radius-full);
  position: absolute; top: -3px; right: -3px;
}

/* ============================================================
   HOME SCREEN
   ============================================================ */
.home-screen { min-height: 100vh; background: var(--color-bg-app); display: flex; flex-direction: column; }
.home-nav {
  height: 56px; background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-default);
  display: flex; align-items: center; padding: 0 var(--space-6); gap: var(--space-4); flex-shrink: 0;
}
.home-content {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 64px var(--space-6) var(--space-12); gap: var(--space-8);
  max-width: 720px; margin: 0 auto; width: 100%;
}

/* AI prompt card */
.home-ai-card {
  width: 100%; background: var(--color-bg-surface); border: 1.5px solid var(--color-ai-border);
  border-radius: var(--radius-2xl); padding: var(--space-5); box-shadow: var(--shadow-ai);
}
.home-ai-card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.home-ai-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.home-ai-badge {
  padding: 2px 8px; background: var(--color-ai-bg); border: 1px solid var(--color-ai-border);
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-ai); margin-left: auto;
}
.home-textarea {
  width: 100%; min-height: 80px; border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans); font-size: var(--text-md); color: var(--color-text-primary);
  background: var(--color-bg-subtle); resize: none; outline: none;
  transition: all var(--transition-fast); box-sizing: border-box; line-height: 1.6;
}
.home-textarea:focus { border-color: var(--color-brand); background: var(--color-bg-surface); box-shadow: 0 0 0 3px var(--color-brand-light); }
.home-ai-footer { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.btn-generate {
  display: flex; align-items: center; gap: var(--space-2); padding: 9px 20px;
  background: var(--color-brand); color: white; border: none; border-radius: var(--radius-lg);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-generate:hover { background: var(--color-brand-hover); box-shadow: 0 2px 12px var(--color-ai-glow); transform: translateY(-1px); }
.home-examples { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.home-example-label { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.home-example-chip {
  padding: 3px 10px; background: transparent; border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-full); font-size: var(--text-xs); color: var(--color-text-secondary);
  cursor: pointer; transition: all var(--transition-fast);
}
.home-example-chip:hover { border-style: solid; border-color: var(--color-brand); color: var(--color-brand); background: var(--color-brand-light); }

/* Blueprints */
.home-section-label {
  font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary);
  text-transform: uppercase; letter-spacing: 0.06em; align-self: flex-start; width: 100%;
  display: flex; align-items: center; gap: var(--space-4);
}
.home-section-label::after { content: ''; flex: 1; height: 1px; background: var(--color-border-default); }
.blueprint-row { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: var(--space-3); width: 100%; align-items: center; }
.blueprint-card {
  background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl); padding: var(--space-4); cursor: pointer;
  transition: all var(--transition-fast);
}
.blueprint-card:hover { border-color: var(--color-brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blueprint-card-icon {
  width: 32px; height: 32px; background: var(--color-bg-subtle); border-radius: var(--radius-md);
  margin-bottom: var(--space-2); display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.blueprint-card-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); line-height: 1.3; }
.blank-diagram-link {
  font-size: var(--text-sm); color: var(--color-text-tertiary); cursor: pointer;
  text-decoration: none; align-self: flex-start; transition: color var(--transition-fast);
}
.blank-diagram-link:hover { color: var(--color-brand); }

/* Recent */
.recent-item {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl); cursor: pointer; width: 100%; transition: all var(--transition-fast);
}
.recent-item:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.recent-sample-tag {
  padding: 2px 8px; background: var(--color-warning-bg); border: 1px solid #FCD34D;
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-warning);
}

/* ============================================================
   PLAY MODE
   ============================================================ */
.play-overlay-card {
  background: var(--color-bg-surface); border-radius: var(--radius-2xl);
  padding: var(--space-8); width: 420px; text-align: center;
  box-shadow: var(--shadow-xl); z-index: var(--z-overlay); position: relative;
}
.play-decision-card {
  position: absolute; background: var(--color-bg-surface); border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-xl); padding: var(--space-5); width: 320px;
  box-shadow: var(--shadow-xl); z-index: var(--z-overlay);
}
.play-decision-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.play-decision-desc { font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: var(--space-4); line-height: 1.5; }
.play-decision-btns { display: flex; gap: var(--space-3); }
.play-path-btn {
  flex: 1; padding: 10px; border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-lg); background: var(--color-bg-surface);
  font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
  transition: all var(--transition-fast);
}
.play-path-btn:hover { border-color: var(--color-brand); color: var(--color-brand); background: var(--color-brand-light); }

/* Success Banner */
.success-banner {
  position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  background: var(--color-bg-surface); border: 1px solid var(--color-success-border);
  border-radius: var(--radius-2xl); padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-xl); width: 560px; animation: slide-up 350ms var(--transition-spring);
  z-index: var(--z-overlay);
}
@keyframes slide-up {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.success-banner-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.success-icon {
  width: 32px; height: 32px; background: var(--color-success-bg);
  border: 1.5px solid var(--color-success-border); border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center; color: var(--color-success);
  font-size: 16px; flex-shrink: 0;
}
.success-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.success-next-steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.next-step-card {
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition-fast);
}
.next-step-card:hover { border-color: var(--color-brand); background: var(--color-brand-light); }
.next-step-icon { font-size: 16px; margin-bottom: var(--space-1); }
.next-step-title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.next-step-desc { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; }

/* ============================================================
   PROTOTYPE NAV BAR
   ============================================================ */
.proto-nav-show-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: #4B5563;
}
.proto-nav-dropdown {
  position: relative;
}
.proto-nav-trigger {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: #374151; border: 1px solid #4B5563;
  border-radius: var(--radius-md);
  color: #E5E7EB; font-size: var(--text-xs);
  font-weight: var(--weight-medium); cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
}
.proto-nav-trigger:hover {
  background: #4B5563; color: #F9FAFB;
  border-color: #6B7280;
}
.proto-nav-trigger-chevron {
  transition: transform 0.2s ease;
  color: #9CA3AF;
}
.proto-nav-dropdown.open .proto-nav-trigger-chevron {
  transform: rotate(180deg);
}
.proto-nav-menu {
  display: none; flex-direction: column;
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 160px;
  background: rgba(17, 17, 24, 0.92); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg);
  padding: 6px; box-shadow: var(--shadow-xl);
  z-index: var(--z-nav);
  animation: proto-menu-in 0.15s ease-out;
}
.proto-nav-dropdown.open .proto-nav-menu {
  display: flex;
}
.proto-nav-menu-divider {
  height: 1px; background: rgba(255,255,255,0.1);
  margin: 4px 8px;
}
@keyframes proto-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.proto-nav-btn {
  padding: 7px 14px; border-radius: var(--radius-md); border: none;
  background: transparent; color: rgba(255,255,255,0.6); font-size: var(--text-xs);
  font-weight: var(--weight-medium); cursor: pointer; white-space: nowrap;
  transition: all var(--transition-fast); text-align: left;
  font-family: var(--font-sans);
}
.proto-nav-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
.proto-nav-btn.active { background: rgba(255,255,255,0.15); color: white; }

/* ============================================================
   UNIFIED CANVAS — STATE-DRIVEN ADDITIONS
   ============================================================ */

/* Play orient overlay — centered card over dimmed canvas */
.play-orient-overlay {
  position: absolute; inset: 0; z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center;
}

/* AI bar context header (element-selected state) */
.ai-context-header {
  display: flex; align-items: center; gap: var(--space-2); flex: 1;
}
.ai-context-element-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); }
.ai-context-badge {
  padding: 1px 6px; background: var(--color-brand-light); border: 1px solid var(--color-brand-mid);
  border-radius: var(--radius-sm); font-size: 10px; color: var(--color-brand); font-weight: var(--weight-medium);
}
.ai-context-back {
  margin-left: auto; font-size: var(--text-xs); color: var(--color-brand);
  cursor: pointer; font-weight: var(--weight-medium);
}
.ai-context-back:hover { text-decoration: underline; }

/* Smooth transitions for SVG state changes */
.bpmn-element [data-shape] { transition: fill 0.2s ease, stroke 0.2s ease; }
.bpmn-element { transition: opacity 0.2s ease, transform 0.15s ease; }
.bpmn-element.selected [data-shape] {
  filter: url(#shadow-selected);
}

/* --- Task Hover Effects --- */
.bpmn-element:hover [data-shape] {
  stroke: var(--color-element-hover);
}
.bpmn-element:hover .task-accent {
  opacity: 0.9;
}

/* --- Gateway Hover --- */
.bpmn-element[data-element="gateway"]:hover [data-shape] {
  stroke: var(--color-element-hover);
}

/* --- Flow label pill hover --- */
.flow-label-pill { transition: opacity 0.2s ease, transform 0.2s ease; transform-box: fill-box; transform-origin: center; }
.flow-label-pill rect {
  fill: rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 1px 3px rgba(15, 23, 42, 0.08));
}
.flow-label-pill text {
  font-size: 10px;
  letter-spacing: 0.01em;
}
.flow-label-pill:hover {
  transform: translateY(-1px);
}
.flow-label-pill:hover rect { stroke-width: 1.5; }

/* --- SVG info icon transitions --- */
.svg-info-icon,
.svg-settings-icon {
  opacity: 0;
  pointer-events: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.bpmn-element:hover .svg-info-icon,
.bpmn-element:hover .svg-settings-icon,
.bpmn-element.selected .svg-info-icon,
.bpmn-element.selected .svg-settings-icon {
  opacity: 1;
  pointer-events: auto;
}
.svg-info-icon circle,
.svg-settings-icon circle {
  fill: rgba(255, 255, 255, 0.96) !important;
  stroke: rgba(107, 114, 128, 0.28);
  stroke-width: 1;
  filter: drop-shadow(0 2px 5px rgba(15, 23, 42, 0.1));
}
.svg-info-icon .icon-hit-area,
.svg-settings-icon .icon-hit-area {
  fill: transparent !important;
  stroke: none !important;
  filter: none !important;
}
.svg-info-icon text,
.svg-settings-icon text {
  fill: var(--color-text-secondary);
}
.svg-info-icon { transform: translateY(-1px); }
.svg-info-icon:hover { transform: scale(1.15); }
.svg-info-icon:hover circle {
  stroke: rgba(252, 93, 13, 0.4);
  fill: rgba(255, 245, 239, 0.96) !important;
}

.svg-settings-icon:hover { transform: scale(1.15); }
.svg-settings-icon:hover circle {
  stroke: rgba(252, 93, 13, 0.4);
  fill: rgba(255, 245, 239, 0.96) !important;
}

/* Process token pulse */
.process-token { animation: tokenPulse 1.5s ease-in-out infinite; }
@keyframes tokenPulse {
  0%, 100% { r: 7; }
  50% { r: 9; }
}

/* --- Task type icon styling --- */
.task-type-icon { opacity: 0.85; transition: opacity 0.15s ease; }
.bpmn-element:hover .task-type-icon { opacity: 1; }

/* --- Task accent bar --- */
.task-accent { transition: opacity 0.15s ease; }

/* --- Inline append action --- */
.append-btn {
  transition: opacity var(--transition-fast);
}
.append-btn-stem {
  stroke: rgba(252, 93, 13, 0.5);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.append-btn circle {
  fill: rgba(255, 255, 255, 0.98);
  stroke: var(--color-brand);
  stroke-width: 1.5;
  filter: drop-shadow(0 6px 12px rgba(252, 93, 13, 0.22));
}
.append-btn text {
  fill: var(--color-brand);
  font-weight: 700;
}

/* ============================================================
   PROJECTS SCREEN
   ============================================================ */
#screen-projects {
  background: var(--color-bg-surface);
}

/* Projects top nav */
.projects-nav {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}
.projects-nav-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.projects-logo { flex-shrink: 0; }
.projects-nav-brand {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.projects-nav-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  text-decoration: none;
  margin-left: var(--space-4);
}
.projects-nav-link.active {
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
}
.projects-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.projects-nav-org {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}
.projects-nav-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.projects-nav-icon:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}
.projects-nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

/* Trial banner */
.projects-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  background: #FEF9EF;
  border-bottom: 1px solid #F5DEB3;
  flex-shrink: 0;
}
.projects-banner-text {
  flex: 1;
  font-size: var(--text-sm);
  color: #7A5A00;
}
.projects-banner-btn {
  padding: 5px 14px;
  border: 1px solid #D4A843;
  border-radius: var(--radius-md);
  background: transparent;
  color: #7A5A00;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.projects-banner-btn:hover {
  background: #F5DEB3;
}
.projects-banner-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #7A5A00;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}
.projects-banner-close:hover {
  background: rgba(0,0,0,0.06);
}

/* Tabs */
.projects-tabs-bar {
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}
.projects-tabs {
  display: flex;
  gap: var(--space-6);
}
.projects-tab {
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: all var(--transition-fast);
}
.projects-tab.active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}
.projects-tab:hover {
  color: var(--color-text-primary);
}

/* Filter + New project toolbar */
.projects-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  flex-shrink: 0;
}
.projects-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  width: 260px;
  color: var(--color-text-tertiary);
}
.projects-filter:focus-within {
  border-color: var(--color-brand);
  background: var(--color-bg-surface);
}
.projects-filter-input {
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  outline: none;
  flex: 1;
  font-family: var(--font-sans);
}
.projects-filter-input::placeholder {
  color: var(--color-text-tertiary);
}
.projects-new-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 16px;
  background: #0C65E3;
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.projects-new-btn:hover {
  background: #0A54C0;
  box-shadow: 0 2px 8px rgba(12,101,227,0.3);
}

/* Table */
.projects-table-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-6);
}
.projects-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.projects-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.projects-table th {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-default);
}
.projects-table th:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.projects-table th:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.projects-th-check { width: 40px; }
.projects-row {
  transition: background var(--transition-fast);
  cursor: pointer;
}
.projects-row:hover {
  background: var(--color-bg-subtle);
}
.projects-row td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  vertical-align: middle;
}
.projects-td-check { width: 40px; }
.projects-td-name {
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}
.projects-name-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.projects-td-meta {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}
.projects-td-collab {
  width: 100px;
}
.projects-td-actions {
  width: 40px;
  text-align: center;
}
.projects-avatar-stack {
  display: flex;
  align-items: center;
}
.projects-avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: var(--weight-semibold);
  color: white;
  border: 2px solid var(--color-bg-surface);
  margin-left: -6px;
}
.projects-avatar-sm:first-child {
  margin-left: 0;
}

/* ============================================================
   HOME OVERLAY (modal over projects screen)
   ============================================================ */
.home-overlay {
  position: fixed !important;
  inset: 0;
  z-index: 200;
  display: none !important;
  align-items: center;
  justify-content: center;
}
.home-overlay.active {
  display: flex !important;
}
.home-overlay-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(252, 93, 13, 0.18), transparent 35%),
    linear-gradient(180deg, rgba(17, 17, 24, 0.28), rgba(17, 17, 24, 0.52));
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.home-overlay-modal {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 248, 244, 0.96) 0%, rgba(255, 255, 255, 0.98) 16%, #FFFFFF 52%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(17, 17, 24, 0.22), 0 8px 24px rgba(17, 17, 24, 0.08);
  max-width: 1100px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  z-index: 1;
  padding: 28px 32px 32px;
}
.home-overlay-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(10px);
  opacity: 0.75;
}
.home-overlay-glow-left {
  top: -130px;
  left: -80px;
  background: radial-gradient(circle, rgba(252, 93, 13, 0.18), transparent 68%);
}
.home-overlay-glow-right {
  right: -70px;
  bottom: -140px;
  background: radial-gradient(circle, rgba(29, 111, 164, 0.14), transparent 70%);
}
.home-overlay-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(226, 226, 232, 0.9);
  background: rgba(255, 255, 255, 0.82);
  color: var(--color-text-secondary);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all var(--transition-fast);
  backdrop-filter: blur(8px);
}
.home-overlay-close:hover {
  background: rgba(255, 241, 232, 0.95);
  border-color: rgba(252, 93, 13, 0.25);
  color: var(--color-brand);
  transform: rotate(90deg);
}

/* Override home-content when inside overlay */
.home-overlay .home-content {
  padding: var(--space-2) 0 var(--space-2);
  gap: 0;
  max-width: 100%;
}

/* Camunda-style blueprint browser */
.home-content-clean {
  padding: 8px 0 0 !important;
}
.overlay-shell {
  display: block;
}
.overlay-sidebar-link {
  min-height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  text-align: left;
  background: rgba(247, 247, 249, 0.9);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.overlay-sidebar-link:hover {
  background: rgba(242, 243, 246, 0.95);
  color: var(--color-text-primary);
}
.overlay-sidebar-link.active {
  background: rgba(255, 241, 232, 0.95);
  color: var(--color-brand);
}
.overlay-main {
  min-width: 0;
  width: 100%;
}
.overlay-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.overlay-prompt-section {
  width: 100%;
  text-align: center;
  padding: 8px 8px 0;
}
.overlay-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  margin: 0 0 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 241, 232, 0.9);
  border: 1px solid rgba(252, 93, 13, 0.16);
  color: var(--color-brand);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.overlay-heading {
  max-width: 760px;
  font-size: 34px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 12px;
}
.overlay-subheading {
  max-width: 560px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.overlay-hero {
  display: block;
  margin-bottom: 18px;
}
.overlay-hero-simple {
  margin-bottom: 22px;
}
.overlay-ai-panel {
  width: 100%;
  padding: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}
.overlay-textarea-wrap {
  position: relative;
  border: 1px solid rgba(248, 173, 134, 0.98);
  border-radius: 18px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px rgba(255, 239, 231, 0.96);
  transition: all var(--transition-fast);
}
.overlay-textarea-wrap:focus-within {
  border-color: rgba(252, 150, 95, 0.98);
  box-shadow: 0 0 0 4px rgba(255, 233, 220, 0.96);
}
.overlay-textarea {
  width: 100%;
  min-height: 136px;
  padding: 18px 18px 48px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  resize: none;
  outline: none;
}
.overlay-textarea::placeholder { color: var(--color-text-tertiary); }
.overlay-inline-suggestions {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  pointer-events: none;
}
.overlay-hint-label {
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--color-text-tertiary);
}
.overlay-inline-suggestions .home-example-chip {
  pointer-events: auto;
}
.overlay-button-row {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.overlay-button-row .btn-generate {
  order: 2;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 12px;
}
.overlay-button-row .btn-blank {
  order: 1;
}
.btn-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 0;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(226, 226, 232, 0.95);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-blank:hover {
  color: var(--color-brand);
  border-color: rgba(252, 93, 13, 0.24);
  background: rgba(255, 245, 239, 0.82);
  box-shadow: 0 10px 18px rgba(17, 17, 24, 0.06);
  transform: translateY(-1px);
}

/* Text divider */
.overlay-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  margin: 12px 0 18px;
}
.overlay-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 200, 210, 0.9), transparent);
}
.overlay-divider-text {
  padding: 0 4px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.overlay-blueprint-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.overlay-blueprint-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(226, 226, 232, 0.92);
  border-radius: 18px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 8px 18px rgba(17, 17, 24, 0.04);
}
.overlay-blueprint-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.overlay-blueprint-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.overlay-blueprint-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 241, 232, 0.9);
  color: var(--color-brand);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.overlay-blueprint-author {
  font-size: 13px;
  color: var(--color-text-tertiary);
}
.overlay-blueprint-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
}
.overlay-blueprint-desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.overlay-blueprint-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.overlay-blueprint-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(226, 226, 232, 0.95);
  background: rgba(247, 247, 249, 0.95);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: var(--weight-medium);
}
.overlay-blueprint-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.overlay-primary-action,
.overlay-secondary-action {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.overlay-primary-action {
  border: 1px solid rgba(252, 93, 13, 0.16);
  background: rgba(255, 244, 236, 0.96);
  color: #C85718;
  box-shadow: 0 8px 16px rgba(17, 17, 24, 0.04);
}
.overlay-primary-action:hover {
  transform: translateY(-1px);
  background: rgba(255, 238, 227, 0.98);
  box-shadow: 0 12px 20px rgba(17, 17, 24, 0.06);
}
.overlay-secondary-action {
  border: 1px solid rgba(226, 226, 232, 0.95);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text-secondary);
}
.overlay-secondary-action:hover {
  border-color: rgba(252, 93, 13, 0.24);
  color: var(--color-brand);
}
.overlay-blueprint-preview {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 20px;
  padding: 24px 22px;
  align-content: center;
  min-height: 214px;
  border-radius: 18px;
  border: 1px solid rgba(226, 226, 232, 0.96);
  background:
    linear-gradient(rgba(242, 244, 247, 0.72) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 244, 247, 0.72) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 252, 0.98) 100%);
  background-size: 22px 22px, 22px 22px, auto;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.overlay-blueprint-preview:hover {
  transform: translateY(-2px);
  border-color: rgba(252, 93, 13, 0.24);
  box-shadow: 0 16px 30px rgba(17, 17, 24, 0.08);
}
.overlay-blueprint-preview::before,
.overlay-blueprint-preview::after {
  content: "";
  position: absolute;
  left: 64px;
  right: 64px;
  height: 2px;
  background: rgba(110, 116, 129, 0.3);
  z-index: 0;
}
.overlay-blueprint-preview::before {
  top: 77px;
}
.overlay-blueprint-preview::after {
  bottom: 74px;
}
.overlay-preview-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(151, 162, 179, 0.55);
  background: #FFFFFF;
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: var(--weight-medium);
  text-align: center;
  box-shadow: 0 4px 10px rgba(17, 17, 24, 0.04);
}
.overlay-preview-node--start,
.overlay-preview-node--end {
  border-radius: 999px;
}
.overlay-preview-node--start {
  background: #F2F9FF;
  border-color: rgba(54, 130, 198, 0.45);
}
.overlay-preview-node--user {
  background: #FFF4E8;
  border-color: rgba(252, 93, 13, 0.4);
}
.overlay-preview-node--gateway {
  background: #FFF7D6;
  border-color: rgba(185, 144, 31, 0.45);
}
.overlay-preview-node--service {
  background: #EEF8F1;
  border-color: rgba(26, 138, 82, 0.4);
}
.overlay-preview-node--end {
  background: #F5F6F8;
  border-color: rgba(110, 116, 129, 0.4);
}
.overlay-blueprint-preview--offboarding .overlay-preview-node:nth-child(4) {
  grid-column: 1;
}
.overlay-blueprint-preview--offboarding .overlay-preview-node:nth-child(5) {
  grid-column: 2;
}
.overlay-blueprint-preview--offboarding .overlay-preview-node:nth-child(6) {
  grid-column: 3;
}
.overlay-blueprint-preview--invoice .overlay-preview-node:nth-child(4) {
  grid-column: 1;
}
.overlay-blueprint-preview--invoice .overlay-preview-node:nth-child(5) {
  grid-column: 2;
}
.overlay-blueprint-preview--invoice .overlay-preview-node:nth-child(6) {
  grid-column: 3;
}
.overlay-blueprint-preview--access .overlay-preview-node:nth-child(4) {
  grid-column: 1;
}
.overlay-blueprint-preview--access .overlay-preview-node:nth-child(5) {
  grid-column: 2;
}
.overlay-blueprint-preview--access .overlay-preview-node:nth-child(6) {
  grid-column: 3;
}

@media (max-width: 980px) {
  .home-overlay-modal {
    width: calc(100% - 28px);
    padding: 24px 20px 24px;
  }
  .overlay-heading {
    font-size: 30px;
  }
  .overlay-blueprint-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .projects-table-wrap {
    padding: 0 var(--space-3);
  }
  .home-overlay {
    align-items: stretch;
  }
  .home-overlay-modal {
    width: 100%;
    max-height: none;
    border-radius: 0;
    padding: 20px 16px 24px;
  }
  .home-overlay-close {
    top: 14px;
    right: 14px;
  }
  .overlay-heading {
    font-size: 26px;
  }
  .overlay-subheading {
    font-size: 14px;
  }
  .overlay-header-row {
    flex-direction: column;
    align-items: stretch;
  }
  .overlay-textarea {
    min-height: 144px;
    padding: 20px 18px 64px;
    font-size: 16px;
  }
  .overlay-inline-suggestions {
    left: 18px;
    right: 18px;
    bottom: 14px;
  }
  .overlay-blueprint-preview {
    min-height: 188px;
    padding: 18px 14px;
    gap: 12px;
  }
  .overlay-preview-node {
    min-height: 44px;
    font-size: 11px;
  }
}

/* ============================================================
   FLOATING AI BAR (canvas screen only) — 3-state pill design
   ============================================================ */
#screen-canvas {
  position: relative;
}
#screen-canvas .app-shell {
  position: relative;
}

/* --- Container --- */
.ai-bar {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-panel);
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

/* --- FAB (icon-only state, bottom-left) --- */
.ai-fab {
  display: none;
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--color-brand) 0%, #e8520d 100%);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  box-shadow:
    0 4px 16px rgba(252, 93, 13, 0.28),
    0 1px 3px rgba(0,0,0,0.10);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ai-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(252, 93, 13, 0.36), 0 2px 6px rgba(0,0,0,0.12);
}
.ai-fab:active { transform: scale(0.97); }
.ai-fab-icon { line-height: 1; }

/* --- Pill --- */
.ai-pill {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(880px, calc(100vw - 48px));
  border-radius: 20px;
  border: 1px solid rgba(216, 220, 229, 0.6);
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.06),
    0 0 24px rgba(15, 23, 42, 0.04),
    0 0 6px rgba(15, 23, 42, 0.03);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

/* Row 1: Header — icon + context tag + spacer + close/expand */
.ai-pill-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 0 14px;
}
.ai-pill-header > .ai-icon {
  flex-shrink: 0;
}
.ai-pill-header-spacer {
  flex: 1;
}

/* Context tag — orange stroke bubble */
.ai-pill-context-tag {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: all 0.2s ease;
  border-radius: 0;
}
/* Orange pill style when a workflow element is selected */
.ai-pill-context-tag.is-element {
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--color-brand, #FC5D0D);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.ai-pill-context-tag:empty {
  display: none;
}
.ai-pill-context-tag:empty + .ai-pill-context-hint {
  display: none;
}
/* Hint text after context tag */
.ai-pill-context-hint {
  display: none;
  color: var(--color-text-tertiary, #9ca0ad);
  font-size: 11px;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.ai-bar--context .ai-pill-context-hint,
.ai-pill-context-tag.is-element + .ai-pill-context-hint {
  display: inline;
}

/* Close and expand buttons (inline in header) */
.ai-pill-expand,
.ai-pill-close {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(218, 222, 231, 0.9);
  background: transparent;
  color: #b0b4c0;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ai-pill-expand:hover,
.ai-pill-close:hover {
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  border-color: var(--color-border-default);
}

/* Back button (visible only in input state) */
.ai-pill-back {
  display: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(218, 222, 231, 0.8);
  background: transparent;
  color: #9ca0ad;
  font-size: 14px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.ai-pill-back:hover {
  color: var(--color-ai);
  border-color: rgba(252, 93, 13, 0.28);
}

/* Row 2: Body — response text or input form */
.ai-pill-body {
  padding: 8px 16px 4px 16px;
  min-width: 0;
}

/* Response text — multi-line, full width */
.ai-pill-response {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  max-height: calc(1.55em * 3);   /* 3 lines max */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(180,184,196,0.4) transparent;
}
.ai-pill-response::-webkit-scrollbar { width: 4px; }
.ai-pill-response::-webkit-scrollbar-thumb { background: rgba(180,184,196,0.4); border-radius: 2px; }
.ai-pill-response::-webkit-scrollbar-track { background: transparent; }

/* Context input row (shown in bottom when step is selected) */
.ai-pill-context {
  display: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

/* Inline form (hidden by default) */
.ai-pill-form {
  display: none;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ai-pill-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(252, 93, 13, 0.22);
  background: var(--color-bg-subtle);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--color-text-primary, #1a1d27);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-pill-input:focus {
  border-color: rgba(252, 93, 13, 0.5);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(252, 93, 13, 0.08);
}
.ai-pill-input::placeholder { color: #9ca0ad; }
.ai-pill-form .ai-send-btn,
.ai-pill-context .ai-send-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 12px;
}

/* Row 3: Bottom — chips + ask btn inline; column when input visible */
.ai-pill-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 14px 10px 16px;
  gap: 8px;
}
.ai-pill-bottom:empty { display: none; }

/* Primary ask button (pill default state only) */
.ai-pill-ask-btn {
  display: none;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-brand, #FC5D0D);
  background: #fff;
  color: var(--color-brand, #FC5D0D);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ai-pill-ask-btn:hover {
  background: rgba(252, 93, 13, 0.06);
  color: var(--color-brand, #FC5D0D);
  border-color: var(--color-brand, #FC5D0D);
}

/* --- Suggestion chips (inside pill, bottom row) --- */
.ai-pill-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.ai-pill-chips:empty { display: none; }
.ai-pill-chips .ai-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226, 226, 232, 0.95);
  background: rgba(255, 255, 255, 0.96);
  color: #5a6175;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ai-pill-chips .ai-chip:hover {
  background: #fff6f0;
  border-color: rgba(252, 93, 13, 0.32);
  color: var(--color-ai);
}

@keyframes chip-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-pill-chips.animate-in .ai-chip {
  opacity: 0;
  animation: chip-fade-in 0.25s ease-out forwards;
}
.ai-pill-chips.animate-in .ai-chip:nth-child(1) { animation-delay: 0s; }
.ai-pill-chips.animate-in .ai-chip:nth-child(2) { animation-delay: 0.06s; }
.ai-pill-chips.animate-in .ai-chip:nth-child(3) { animation-delay: 0.12s; }

/* ============================================================
   AI BAR STATE CLASSES
   ============================================================ */

/* STATE: Icon only — bottom-left */
.ai-bar--icon {
  left: 24px;
  transform: none;
}
.ai-bar--icon .ai-fab  { display: flex; align-items: center; justify-content: center; }
.ai-bar--icon .ai-pill  { display: none; }

/* STATE: Pill (default) — response visible, form hidden */
.ai-bar--pill .ai-fab            { display: none; }
.ai-bar--pill .ai-pill           { display: flex; }
.ai-bar--pill .ai-pill-form      { display: none; }
.ai-bar--pill .ai-pill-back      { display: none; }

/* STATE: Input — swap response for form, show back button */
.ai-bar--input .ai-fab               { display: none; }
.ai-bar--input .ai-pill              { display: flex; }
.ai-bar--input .ai-icon              { display: none; }
.ai-bar--input .ai-pill-back         { display: flex; }
.ai-bar--input .ai-pill-response     { display: none; }
.ai-bar--input .ai-pill-bottom       { display: none; }
.ai-bar--input .ai-pill-form         { display: flex; }

/* Pill default — show ask button, hide context input */
.ai-bar--pill .ai-pill-ask-btn        { display: inline-flex; }
.ai-bar--pill .ai-pill-context        { display: none; }
/* When user clicks "Ask or describe" — swap button for inline input */
.ai-bar--pill.ai-bar--asking .ai-pill-ask-btn  { display: none; }
.ai-bar--pill.ai-bar--asking .ai-pill-context  { display: flex; }

/* STATE: Play minimal — no actions, just status text */
.ai-bar.play-minimal .ai-pill-expand  { display: none; }
.ai-bar.play-minimal .ai-pill-close   { display: none; }
.ai-bar.play-minimal { cursor: default; }
.ai-bar.play-minimal:hover .ai-pill { background: rgba(255, 255, 255, 0.98); }
.ai-bar.play-minimal .ai-pill-bottom { display: none; }

/* ============================================================
   TYPEWRITER CURSOR
   ============================================================ */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.ai-pill-response.typing::after {
  content: '|';
  display: inline;
  color: var(--color-ai);
  font-weight: 300;
  animation: cursor-blink 0.7s step-end infinite;
  margin-left: 1px;
}

/* ============================================================
   AI BAR RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .ai-bar { bottom: 32px; }
  .ai-bar--icon { left: 16px; }
  .ai-pill { width: calc(100vw - 24px); }
  .ai-pill-header { padding: 10px 10px 0 12px; }
  .ai-pill-body { padding: 6px 12px 2px 12px; }
  .ai-pill-response { font-size: 12.5px; }
  .ai-pill-bottom { padding: 4px 10px 8px 12px; }
}

/* ============================================================
   AI SIDE PANEL
   ============================================================ */
.ai-side-panel {
  position: absolute;
  top: 88px;       /* below topbar (48px) + toolbar (40px) */
  right: 0;
  bottom: 28px;    /* above problems bar */
  width: 360px;
  background: var(--color-bg-surface);
  border-left: 1.5px solid var(--color-ai-border);
  box-shadow: -4px 0 24px rgba(0,0,0,0.08);
  z-index: var(--z-panel);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.ai-side-panel.open {
  display: flex;
  animation: side-panel-in 0.3s ease-out;
}
@keyframes side-panel-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes side-panel-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}
.ai-side-panel.closing {
  animation: side-panel-out 0.25s ease-in forwards;
}

/* Side panel header */
.ai-side-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
  height: 44px;
}
.ai-side-panel-header .ai-icon {
  width: 22px; height: 22px; font-size: 11px;
}
.ai-side-panel-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  flex: 1;
}
.ai-side-panel-close {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  cursor: pointer; font-size: 14px;
  transition: all var(--transition-fast);
}
.ai-side-panel-close:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

/* Side panel body reuses ai-messages, ai-input-area styles */
.ai-side-panel .ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}
.ai-side-panel .ai-input-area {
  border-top: 1px solid var(--color-border-default);
  padding: var(--space-2) var(--space-4) var(--space-3);
}
.ai-side-panel .ai-chips-row {
  padding: 0;
}
.ai-side-panel .progress-dots {
  margin-right: var(--space-2);
}

/* ============================================================
   CONFIG TOP BANNER
   ============================================================ */
.config-top-banner {
  grid-area: config-banner;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--space-4);
  background: #FEF3C7;
  border-bottom: 1px solid #FDE68A;
  gap: var(--space-3);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.config-top-banner[hidden] { display: none; }
.config-top-banner-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.config-top-banner-icon {
  font-size: 16px;
  color: #D97706;
  flex-shrink: 0;
}
.config-top-banner-text {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: #92400E;
}
.config-top-banner-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.config-top-banner-review-btn {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: #92400E;
  background: white;
  border: 1px solid #FDBA74;
  border-radius: var(--radius-full);
  padding: 5px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.config-top-banner-review-btn:hover {
  background: #FEF3C7;
  border-color: #D97706;
}

/* ============================================================
   SIMULATION TOP BANNER
   ============================================================ */
.sim-top-banner {
  grid-area: config-banner;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--space-4);
  background: #F0FDF4;
  border-bottom: 1px solid #86EFAC;
  gap: var(--space-3);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.sim-top-banner[hidden] { display: none; }
.sim-top-banner-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.sim-top-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  flex-shrink: 0;
  animation: sim-pulse 1.5s ease-in-out infinite;
}
@keyframes sim-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.sim-top-banner-text {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #166534;
}
.sim-top-banner-detail {
  font-size: var(--text-xs);
  color: #15803D;
  font-weight: var(--weight-normal);
}
.sim-top-banner-exit {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: #166534;
  background: white;
  border: 1px solid #86EFAC;
  border-radius: var(--radius-full);
  padding: 5px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.sim-top-banner-exit:hover {
  background: #DCFCE7;
  border-color: #22C55E;
}

/* ============================================================
   ISSUES REVIEW PANEL
   ============================================================ */
.issues-panel {
  position: absolute;
  top: 88px;
  right: 0;
  bottom: 28px;
  width: 380px;
  background: var(--color-bg-surface);
  border-left: 1.5px solid var(--color-border-default);
  box-shadow: -4px 0 24px rgba(0,0,0,0.08);
  z-index: var(--z-panel);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.issues-panel.open {
  display: flex;
  animation: side-panel-in 0.3s ease-out;
}
.issues-panel.closing {
  animation: side-panel-out 0.25s ease-in forwards;
}
.issues-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
  min-height: 48px;
}
.issues-panel-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.issues-panel-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: 18px;
  transition: all var(--transition-fast);
}
.issues-panel-close:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}
.issues-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

/* Issue item */
.issues-item {
  border-bottom: 1px solid var(--color-border-default);
  overflow: hidden;
}
.issues-item:last-child { border-bottom: none; }
.issues-item-header {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  gap: var(--space-3);
  transition: background var(--transition-fast);
}
.issues-item-header:hover {
  background: var(--color-bg-subtle);
}
.issues-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D97706;
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.issues-item-info {
  flex: 1;
  min-width: 0;
}
.issues-item-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  transition: all 0.3s ease;
}
.issues-item-node {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: 1px;
}
.issues-item-chevron {
  width: 16px;
  height: 16px;
  color: var(--color-text-tertiary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.issues-item.expanded .issues-item-chevron {
  transform: rotate(90deg);
}
.issues-item-fix-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-brand);
  background: var(--color-brand-light);
  border: 1px solid var(--color-ai-border);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.issues-item-fix-btn .ai-sparkle {
  font-size: 9px;
  line-height: 1;
}
.issues-item-fix-btn:hover {
  background: var(--color-brand);
  color: white;
  border-color: var(--color-brand);
}
.issues-item-content {
  padding: 0 var(--space-4) var(--space-3);
  padding-left: calc(var(--space-4) + 8px + var(--space-3));
  display: none;
}
.issues-item.expanded .issues-item-content {
  display: block;
}

/* Actions inside accordion */
.issues-item-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-default); }
.issues-item-details-btn { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); background: var(--color-bg-subtle); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); padding: 2px 10px; cursor: pointer; white-space: nowrap; transition: all var(--transition-fast); }
.issues-item-details-btn:hover { background: var(--color-bg-muted); color: var(--color-text-primary); }

/* Resolved state */
.issues-item.resolved .issues-item-dot {
  background: var(--color-success);
}
.issues-item.resolved .issues-item-label {
  text-decoration: line-through;
  color: var(--color-success);
}
@keyframes issue-fade-out {
  0%   { opacity: 1; max-height: 300px; }
  70%  { opacity: 1; max-height: 300px; }
  100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; }
}
.issues-item.resolved {
  animation: issue-fade-out 1.2s ease forwards;
}

/* ============================================================
   CONFIG PROPERTIES PANEL
   ============================================================ */
.config-panel {
  position: absolute;
  top: 88px;
  right: 0;
  bottom: 28px;
  width: 360px;
  background: var(--color-bg-surface);
  border-left: 1.5px solid var(--color-border-default);
  box-shadow: -4px 0 24px rgba(0,0,0,0.08);
  z-index: var(--z-panel);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.config-panel.open {
  display: flex;
  animation: side-panel-in 0.3s ease-out;
}
.config-panel.closing {
  animation: side-panel-out 0.25s ease-in forwards;
}

/* Header */
.config-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
  min-height: 52px;
}
.config-panel-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.config-panel-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: white;
  font-weight: var(--weight-semibold);
}
.config-panel-icon.tone-blue { background: #4A7CFF; }
.config-panel-icon.tone-orange { background: #FC5D0D; }
.config-panel-icon.tone-gold { background: #F59E0B; }
.config-panel-icon.tone-green { background: #1A8A52; }
.config-panel-icon.tone-gateway { background: #6B7280; }

.config-panel-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.config-panel-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: 1px;
}
.config-panel-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: 18px;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.config-panel-close:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

/* Issues banner */
.config-panel-issues {
  flex-shrink: 0;
}
.config-issue-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-warning-bg);
  border-bottom: 1px solid #FDE68A;
  padding: 8px var(--space-4);
}
.config-issue-count {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-warning);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.config-issue-fix-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-brand);
  background: white;
  border: 1px solid var(--color-ai-border);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.config-issue-fix-btn .ai-sparkle {
  font-size: 9px;
  line-height: 1;
}
.config-issue-fix-btn:hover {
  background: var(--color-brand-light);
  border-color: var(--color-brand);
}

/* Panel body */
.config-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) 0;
}

/* Collapsible sections */
.config-section {
  border-bottom: 1px solid var(--color-border-default);
}
.config-section:last-child {
  border-bottom: none;
}
.config-section-header {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  user-select: none;
  gap: var(--space-2);
  transition: background var(--transition-fast);
}
.config-section-header:hover {
  background: var(--color-bg-subtle);
}
.config-section-chevron {
  width: 16px;
  height: 16px;
  color: var(--color-text-tertiary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.config-section.collapsed .config-section-chevron {
  transform: rotate(-90deg);
}
.config-section-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  flex: 1;
}
/* Section with issue — yellow highlight */
.config-section.has-issue > .config-section-header {
  background: #FFFBEB;
}
.config-section.has-issue > .config-section-header:hover {
  background: #FEF3C7;
}
.config-section-issue-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-warning, #D97706);
  flex-shrink: 0;
}
.config-section.has-issue .config-section-ai-btn {
  opacity: 1;
}
.config-section-ai-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-ai-border);
  background: var(--color-brand-light);
  border-radius: var(--radius-md);
  color: var(--color-brand);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  opacity: 0;
}
.config-section-header:hover .config-section-ai-btn,
.config-section-ai-btn:focus {
  opacity: 1;
}
.config-section-ai-btn:hover {
  background: var(--color-brand);
  color: white;
  border-color: var(--color-brand);
}
.config-section-content {
  padding: 0 var(--space-4) var(--space-3);
}
.config-section.collapsed .config-section-content {
  display: none;
}

/* Form fields */
.config-field-group {
  margin-bottom: var(--space-3);
}
.config-field-group:last-child {
  margin-bottom: 0;
}
.config-field-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
  display: block;
}
.config-field-input,
.config-field-textarea {
  width: 100%;
  padding: 7px 10px;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}
.config-field-input:focus,
.config-field-textarea:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-ai-glow);
}
.config-field-input::placeholder,
.config-field-textarea::placeholder {
  color: var(--color-text-tertiary);
}
.config-field-textarea {
  resize: vertical;
  min-height: 64px;
}

/* AI-filled flash animation */
.config-field-input.ai-filled,
.config-field-textarea.ai-filled {
  animation: ai-fill-flash 0.8s ease;
}
@keyframes ai-fill-flash {
  0%   { box-shadow: 0 0 0 3px rgba(252, 93, 13, 0.4); border-color: var(--color-brand); }
  50%  { box-shadow: 0 0 12px 4px rgba(252, 93, 13, 0.2); border-color: var(--color-brand); }
  100% { box-shadow: none; border-color: var(--color-border-default); }
}

/* Sample data persistent indicator */
.config-field-input.sample-data,
.config-field-textarea.sample-data {
  border-style: dashed;
  border-color: rgba(252, 93, 13, 0.35);
  background: rgba(252, 93, 13, 0.03);
  color: var(--color-text-primary);
}
.config-field-input.sample-data:focus,
.config-field-textarea.sample-data:focus {
  border-style: solid;
  border-color: rgba(252, 93, 13, 0.5);
  background: #fff;
}

/* Branch group */
.config-branch-group {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.config-branch-group:last-child {
  margin-bottom: 0;
}
.config-branch-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* Toggle row */
.config-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
}
.config-toggle-label {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.config-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast);
  border: none;
  padding: 0;
}
.config-toggle-switch.active {
  background: var(--color-brand);
}
.config-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform var(--transition-fast);
}
.config-toggle-switch.active::after {
  transform: translateX(16px);
}

/* ============================================================
   FLOW GROUP — INTERACTIVE HOVER & TOOLBAR
   ============================================================ */

/* Connectors: visual only — append/settings live on shapes (Figma Jam–style) */
.flow-hit-area {
  pointer-events: none;
}
.bpmn-canvas [data-flow] {
  pointer-events: none;
}

/* Connector toolbar anchored on element */
.element-flow-toolbar rect {
  transition: filter 0.15s ease;
}
.element-flow-toolbar text {
  cursor: pointer;
  transition: fill 0.15s ease;
}
.element-flow-toolbar text:hover {
  fill: var(--color-brand);
}

/* ============================================================
   FLOW BOARD REBUILD
   ============================================================ */
.flow-workbench {
  display: block;
  height: 100%;
  background: #fcfcfe;
}

.flow-workbench--generation {
  position: relative;
}

.flow-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.flow-stage {
  position: relative;
  flex: 1;
  overflow: auto;
  padding: 8px 12px 12px;
  background-image:
    linear-gradient(rgba(17, 17, 24, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 24, 0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  background-color: #fcfcfe;
}

.flow-stage--generation {
  overflow: hidden;
  padding: 0;
}

#gen-preview-area {
  height: 100%;
}

.generation-flow-scale {
  position: relative;
  width: 1600px;
  height: 900px;
  margin: 24px 0 0 28px;
  transform: scale(0.62);
  transform-origin: top left;
}

.flow-connectors,
.flow-node-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1600px;
  height: 1200px;
}

.flow-node-layer {
  pointer-events: none;
  overflow: visible;
}

.flow-node {
  position: absolute;
  display: flex;
  align-items: center;
  border: 2px solid #111118;
  background: #fff;
  box-shadow: none;
  pointer-events: auto;
  overflow: visible;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.flow-node:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.flow-node--static {
  pointer-events: none;
}

.flow-node--static:hover {
  transform: none;
  box-shadow: none;
}

.flow-node.is-selected {
  border-color: rgba(252, 93, 13, 0.45);
  box-shadow: 0 0 0 4px rgba(255, 241, 232, 0.92), 0 18px 34px rgba(252, 93, 13, 0.12);
}

.flow-node.is-visited {
  border-color: rgba(252, 93, 13, 0.38);
  background: linear-gradient(180deg, rgba(255, 249, 245, 0.98), rgba(255, 255, 255, 0.98));
}

.flow-node-controls {
  position: absolute;
  top: -42px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

/* Show controls on node hover — extended hit area via padding trick */
.flow-node::before {
  content: '';
  position: absolute;
  inset: -48px -16px -16px -16px;
  z-index: -1;
}

.flow-node:hover > .flow-node-controls,
.flow-node.is-selected > .flow-node-controls {
  opacity: 1;
  pointer-events: auto;
}

.flow-node-control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 24, 0.12);
  background: rgba(255, 255, 255, 0.96);
  color: var(--color-text-secondary);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}

.flow-node-control-btn:hover {
  border-color: rgba(252, 93, 13, 0.3);
  color: var(--color-brand);
  transform: translateY(-1px);
}

.flow-node-control-btn--info {
  /* no special font override — uses SVG icon now */
}

/* ---- Settings: Icon Toolbar ---- */
.flow-node-toolbar {
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 24, 0.10);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  z-index: 8;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: toolbar-in 0.18s ease-out;
}

@keyframes toolbar-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.flow-node-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--color-text-secondary);
  position: relative;
  transition: background 0.12s, transform 0.12s;
}

.flow-node-toolbar-btn:hover {
  background: rgba(252, 93, 13, 0.08);
  transform: scale(1.1);
}

.flow-node-toolbar-btn:active {
  transform: scale(0.95);
}

.flow-node-toolbar-btn--danger:hover {
  background: rgba(180, 35, 24, 0.08);
}

/* Tooltip on hover */
.flow-node-toolbar-btn::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(17, 17, 24, 0.88);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

.flow-node-toolbar-btn:hover::after {
  opacity: 1;
}

/* ---- Info Card ---- */
.flow-node-infocard {
  width: 260px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(17, 17, 24, 0.08);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.12);
  z-index: var(--z-modal, 900);
  pointer-events: auto;
  animation: infocard-in 0.2s ease-out;
}

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

.flow-node-infocard-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.flow-node-infocard-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.flow-node-infocard-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-node-infocard-summary {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.flow-node-infocard-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(248, 248, 250, 0.8);
  border: 1px solid rgba(17, 17, 24, 0.05);
}

.flow-node-infocard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.flow-node-infocard-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.flow-node-infocard-value {
  font-size: 12px;
  color: var(--color-text-primary);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

.flow-node-infocard-input-wrap {
  position: relative;
  width: 100%;
}

.flow-node-infocard-input {
  width: 100%;
  height: 34px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  font-size: 11px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  outline: none;
  box-sizing: border-box;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.flow-node-infocard-input::placeholder {
  color: var(--color-text-tertiary);
  font-weight: var(--weight-regular);
}

.flow-node-infocard-input:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px rgba(252, 93, 13, 0.1);
}

.flow-node-infocard-send {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  cursor: pointer;
  transition: background 120ms ease;
  padding: 0;
}

.flow-node-infocard-send:hover {
  background: #e5530b;
}

.flow-node--task {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  padding: 16px 18px 16px;
  border-radius: 22px;
  min-height: 132px;
}

.flow-node-layout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.flow-node-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 0 0 auto;
  min-height: 0;
}

.flow-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #d7d7da;
  border: none;
  flex-shrink: 0;
}

.flow-tone--blue .flow-node-icon {
  background: #d9deec;
}

.flow-tone--green .flow-node-icon {
  background: #dbe7dd;
}

.flow-tone--gold .flow-node-icon {
  background: #e9e0d3;
}

.flow-node-icon::before,
.flow-node-icon::after {
  content: '';
  position: absolute;
}

.flow-node-icon--gear::before {
  width: 14px;
  height: 14px;
  border: 2px solid #323443;
  border-radius: 999px;
}

.flow-node-icon--gear::after {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #323443;
}

.flow-node-icon--user::before {
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #5A6F99;
}

.flow-node-icon--user::after {
  bottom: 8px;
  width: 16px;
  height: 9px;
  border-radius: 10px 10px 6px 6px;
  background: #5A6F99;
}

.flow-node-icon--mail::before {
  width: 16px;
  height: 11px;
  border: 1.6px solid #5C5C70;
  border-radius: 2px;
  background: white;
}

.flow-node-icon--mail::after {
  width: 12px;
  height: 7px;
  border-left: 1.6px solid #5C5C70;
  border-bottom: 1.6px solid #5C5C70;
  transform: rotate(-45deg);
  top: 10px;
}

.flow-node-icon--shield::before {
  width: 14px;
  height: 16px;
  background: #2C7A4B;
  clip-path: polygon(50% 0%, 90% 16%, 84% 68%, 50% 100%, 16% 68%, 10% 16%);
}

.flow-node-copy {
  min-width: 0;
}

.flow-node-copy--stacked {
  flex: 1;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 1px;
}

.flow-node-title {
  max-width: 100%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  word-break: break-word;
}

.flow-node-technical,
.flow-panel-copy {
  margin-top: 0;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
}

.flow-node-technical {
  margin-top: 6px;
  color: #b0a8a8;
  font-family: var(--font-mono);
  font-size: 10px;
}

/* Technical-only label mode (simplified OFF) */
.flow-node-title--technical {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-primary);
}

.flow-node-technical--prominent {
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
}

.flow-node-layout--technical {
  gap: 4px;
}

.flow-node-footer {
  display: flex;
  align-items: flex-end;
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
}

.flow-node-subtitle {
  margin-top: 0;
  font-size: 10px;
  line-height: 1.3;
  color: var(--color-text-secondary);
}

.flow-node-subtitle--pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #111118;
  font-size: 10px;
  font-weight: 500;
  color: #111118;
}

.flow-node--gateway {
  flex-direction: column;
  justify-content: center;
  border: none;
  background: transparent;
  box-shadow: none;
}

.flow-gateway-shape {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 0;
  border: 1.8px solid rgba(90, 90, 110, 0.44);
  background: rgba(255, 255, 255, 0.96);
  transform: rotate(45deg);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.flow-gateway-shape span {
  transform: rotate(-45deg);
  font-size: 18px;
  color: var(--color-text-secondary);
}

.flow-node--gateway.is-selected .flow-gateway-shape {
  border-color: rgba(252, 93, 13, 0.48);
  box-shadow: 0 0 0 4px rgba(255, 241, 232, 0.92), 0 18px 34px rgba(252, 93, 13, 0.12);
}

.flow-gateway-caption,
.flow-event-label {
  margin-top: 6px;
  text-align: center;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.flow-node--start,
.flow-node--end {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  box-shadow: none;
}

.flow-node--start:hover,
.flow-node--end:hover {
  transform: none;
  box-shadow: none;
}

.flow-event-svg {
  display: block;
  flex-shrink: 0;
}

.flow-node--start.is-selected,
.flow-node--end.is-selected {
  border: none;
  box-shadow: none;
}

.flow-node--start.is-selected .flow-event-svg circle:first-child,
.flow-node--end.is-selected .flow-event-svg circle:first-child {
  stroke: rgba(252, 93, 13, 0.6);
  filter: drop-shadow(0 0 6px rgba(252, 93, 13, 0.2));
}

.flow-node--start.is-visited .flow-event-svg circle:first-child,
.flow-node--end.is-visited .flow-event-svg circle:first-child {
  stroke: rgba(252, 93, 13, 0.45);
}

.flow-node-issue {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff8e8;
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #B45309;
  font-size: 12px;
  font-weight: var(--weight-semibold);
}

.flow-handle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: var(--color-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(252, 93, 13, 0.3);
  cursor: pointer;
}

.flow-handle:hover {
  background: var(--color-brand-hover, #e54e06);
  transform: scale(1.1);
}

.flow-handle--top {
  left: calc(50% - 13px);
  top: -13px;
}

.flow-handle--right {
  right: -13px;
  top: calc(50% - 13px);
}

.flow-handle--bottom {
  left: calc(50% - 13px);
  bottom: -13px;
}

.flow-handle--left {
  left: -13px;
  top: calc(50% - 13px);
}

.flow-connector {
  fill: none;
  stroke: rgba(122, 122, 139, 0.9);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.flow-connector.is-active {
  stroke: var(--color-brand);
}

.flow-connector-label rect {
  fill: rgba(255, 255, 255, 0.96);
  stroke: rgba(226, 226, 232, 0.95);
}

.flow-connector-label text {
  text-anchor: middle;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  fill: var(--color-text-secondary);
  font-family: var(--font-sans);
}

.flow-connector-label--approved rect {
  stroke: rgba(26, 138, 82, 0.45);
  fill: rgba(237, 251, 243, 0.98);
}

.flow-connector-label--approved text {
  fill: var(--color-success);
}

.flow-connector-label--rejected rect {
  stroke: rgba(192, 57, 43, 0.42);
  fill: rgba(254, 242, 242, 0.98);
}

.flow-connector-label--rejected text {
  fill: var(--color-error);
}

.flow-panel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(226, 226, 232, 0.95);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: var(--weight-semibold);
}

.flow-config-action:hover,
.flow-panel-btn:hover {
  border-color: rgba(252, 93, 13, 0.26);
  background: rgba(255, 245, 239, 0.92);
}

.flow-panel-btn--primary {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: white;
}

.flow-panel-btn--primary:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

.flow-path-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.flow-path-dot--approved { background: #1A8A52; }
.flow-path-dot--rejected { background: #F59E0B; }

.flow-play-panel {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 320px;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(226, 226, 232, 0.92);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

.flow-play-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: rgba(255, 241, 232, 0.92);
  color: var(--color-brand);
  font-size: 20px;
}

.flow-play-panel-title {
  font-size: 18px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.flow-play-panel-copy {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.flow-play-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.flow-token {
  position: absolute;
  z-index: 5;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FF945E, #FC5D0D);
  border: 2px solid white;
  box-shadow: 0 0 0 6px rgba(255, 241, 232, 0.75), 0 14px 24px rgba(252, 93, 13, 0.24);
  transition: left 420ms cubic-bezier(0.22, 1, 0.36, 1), top 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.flow-toast {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  min-width: 320px;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(17, 17, 24, 0.92);
  color: white;
  text-align: center;
  font-size: 13px;
  font-weight: var(--weight-medium);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.28);
}

/* --- Ghost node --- */
.flow-node--ghost {
  border: 2px dashed var(--color-ghost-border);
  background: var(--color-ghost-bg);
  box-shadow: 0 8px 24px rgba(252, 93, 13, 0.08);
  z-index: var(--z-ghost);
  animation: ghostFadeIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  cursor: pointer;
  pointer-events: auto;
}

.flow-node--ghost:hover {
  border-color: rgba(252, 93, 13, 0.55);
  background: rgba(255, 245, 239, 0.7);
  box-shadow: 0 12px 28px rgba(252, 93, 13, 0.14);
  transform: translateY(-2px);
}

.flow-node--ghost .flow-node-title {
  color: var(--color-ghost-text);
}

.flow-node--ghost .flow-node-technical {
  display: none;
}

.flow-node--ghost .flow-node-subtitle {
  opacity: 0.6;
}

.flow-node--ghost .flow-node-icon {
  opacity: 0.5;
}

@keyframes ghostFadeIn {
  from {
    opacity: 0;
    transform: translateX(-12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* --- Ghost connector --- */
.flow-connector--ghost {
  stroke: var(--color-ghost-border);
  stroke-dasharray: 6 4;
  opacity: 0.7;
}

/* --- Hover handle --- */
.flow-handle--hover {
  animation: hoverHandleIn 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 120ms ease, background 120ms ease;
}

@keyframes hoverHandleIn {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.flow-handle--hover:hover {
  background: var(--color-brand-hover, #e54e06);
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(252, 93, 13, 0.35);
}

/* --- Ghost suggestion pills --- */
/* Describe-step free-text input above suggestion pills */
.ghost-describe-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}

.ghost-describe-input {
  width: 100%;
  height: 34px;
  padding: 0 34px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border-default);
  background: rgba(255, 255, 255, 0.96);
  font-size: 11px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  box-sizing: border-box;
}
.ghost-describe-input::placeholder {
  color: var(--color-text-tertiary);
  font-weight: var(--weight-regular);
}
.ghost-describe-input:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px rgba(252, 93, 13, 0.1);
}

.ghost-describe-send {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  cursor: pointer;
  transition: background 120ms ease;
  padding: 0;
}

.ghost-describe-send:hover {
  background: #e5530b;
}

.ghost-suggestion-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ghost-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border-default);
  background: rgba(255, 255, 255, 0.96);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}

.ghost-pill:hover {
  border-color: rgba(252, 93, 13, 0.35);
  color: var(--color-brand);
  background: rgba(255, 245, 239, 0.9);
}

.ghost-pill--active {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-brand-light);
  font-weight: var(--weight-semibold);
  box-shadow: 0 0 0 2px rgba(252, 93, 13, 0.1);
}

/* --- Ghost panel (wraps pills + dropdown + actions) --- */
.ghost-panel {
  position: absolute;
  z-index: var(--z-ghost);
  animation: ghostFadeIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 80ms;
  pointer-events: auto;
}

/* "Show all" pill with dropdown */
.ghost-show-all-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px dashed rgba(252, 93, 13, 0.4);
  background: transparent;
  color: var(--color-brand);
  font-size: 11px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all 160ms ease;
  white-space: nowrap;
}
.ghost-show-all-btn:hover {
  border-color: var(--color-brand);
  background: rgba(255, 245, 239, 0.5);
}
.ghost-show-all-btn--active {
  border-style: solid;
  border-color: var(--color-brand);
  background: var(--color-brand-light);
}

/* --- Show-all dropdown --- */
.ghost-showall-dropdown {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: ghostFadeIn 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ghost-showall-search {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--color-border-default);
  font-size: 12px;
  color: var(--color-text-primary);
  background: transparent;
  outline: none;
}
.ghost-showall-search::placeholder {
  color: var(--color-text-tertiary);
}

.ghost-showall-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 6px 0;
}

.ghost-showall-category {
  padding: 6px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.ghost-showall-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 100ms ease;
  text-align: left;
}
.ghost-showall-item:hover {
  background: var(--color-bg-subtle);
}

.ghost-showall-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ghost-showall-dot--blue { background: #3B82F6; }
.ghost-showall-dot--orange { background: #F97316; }
.ghost-showall-dot--gold { background: #EAB308; }
.ghost-showall-dot--green { background: #22C55E; }

.ghost-showall-item-sub {
  margin-left: auto;
  font-size: 10px;
  color: var(--color-text-tertiary);
}

.ghost-showall-empty {
  padding: 16px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* --- Ghost card-border action buttons --- */
.ghost-card-actions {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: calc(var(--z-ghost) + 1);
  pointer-events: auto;
  animation: ghostFadeIn 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ghost-card-btn {
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all 140ms ease;
  line-height: 1;
}

.ghost-card-btn--save {
  padding: 5px 14px;
  background: var(--color-brand);
  color: white;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(252, 93, 13, 0.25);
}
.ghost-card-btn--save:hover {
  background: var(--color-brand-hover);
  box-shadow: 0 4px 12px rgba(252, 93, 13, 0.35);
  transform: translateY(-1px);
}

.ghost-card-btn--discard {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: var(--color-text-tertiary);
  border: 1.5px solid var(--color-border-default);
  font-size: 16px;
  font-weight: 400;
}
.ghost-card-btn--discard:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
}

/* --- Node position transitions for FLIP --- */
.flow-node-layer .flow-node {
  will-change: transform;
}

/* ─── Details / Documentation Panel ─────────────────────────── */

.btn-details {
  display: flex; align-items: center; gap: var(--space-2); padding: 6px 14px;
  background: transparent; color: var(--color-text-secondary); border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--weight-medium);
  cursor: pointer; transition: all var(--transition-fast); white-space: nowrap;
  font-family: var(--font-sans);
}
.btn-details:hover {
  background: var(--color-bg-subtle); color: var(--color-text-primary);
  border-color: var(--color-text-tertiary);
}
.btn-details:active { transform: translateY(0); }
.btn-details svg { flex-shrink: 0; }

.doc-panel {
  position: absolute;
  top: 88px;
  right: 0;
  bottom: 28px;
  width: 380px;
  background: var(--color-bg-surface);
  border-left: 1.5px solid var(--color-border-default);
  box-shadow: -4px 0 24px rgba(0,0,0,0.08);
  z-index: var(--z-panel);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.doc-panel.open {
  display: flex;
  animation: side-panel-in 0.3s ease-out;
}
.doc-panel.closing {
  animation: side-panel-out 0.25s ease-in forwards;
}

.doc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
  min-height: 52px;
}
.doc-panel-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.doc-panel-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.doc-panel-label {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  margin-bottom: 2px;
}
.doc-panel-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-panel-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: 18px;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.doc-panel-close:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.doc-panel-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}
.doc-panel-tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-tertiary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
}
.doc-panel-tab:hover {
  color: var(--color-text-secondary);
}
.doc-panel-tab.active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-text-primary);
}
.doc-panel-tab--icon {
  padding: var(--space-3) var(--space-3);
  display: flex;
  align-items: center;
}

.doc-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.doc-section {}
.doc-section-header {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  user-select: none;
  gap: var(--space-2);
  transition: background var(--transition-fast);
}
.doc-section-header:hover {
  background: var(--color-bg-subtle);
}
.doc-section-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}
.doc-section.collapsed .doc-section-chevron {
  transform: rotate(-90deg);
}
.doc-section-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}
.doc-section-content {
  padding: 0 var(--space-4) var(--space-4);
}
.doc-section.collapsed .doc-section-content {
  display: none;
}
.doc-field-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}
.doc-textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-3);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  resize: vertical;
  line-height: 1.5;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}
.doc-textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(252, 93, 13, 0.1);
}
.doc-textarea::placeholder {
  color: var(--color-text-tertiary);
}
.doc-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  color: var(--color-brand);
  background: white;
  border: 1px solid var(--color-ai-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.doc-generate-btn:hover {
  background: var(--color-brand-light);
  border-color: var(--color-brand);
}
.doc-generate-btn svg {
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .flow-workbench {
    padding: 0;
  }

  .flow-play-panel {
    left: 16px;
    right: 16px;
    width: auto;
  }
}