/* ==========================================================================
   ComicanaaPixel - Interactive Live Demos (Workflow Lab & Ask Pixel)
   Theme: Matte Obsidian Glass, Dark Telemetry & Glowing Amber Status
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PIXEL WORKFLOW LAB
   -------------------------------------------------------------------------- */
.workflow-lab-container {
  background: rgba(18, 22, 31, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.95), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  margin-top: var(--space-8);
}

.lab-input-selector {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lab-input-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(14, 17, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: #A6ADBB;
  transition: all var(--trans-fast);
  white-space: nowrap;
  cursor: pointer;
}

.lab-input-btn:hover {
  background: rgba(26, 31, 44, 0.95);
  color: #FFFFFF;
  border-color: rgba(230, 96, 5, 0.4);
}

.lab-input-btn.active {
  background: linear-gradient(135deg, #E66005 0%, #FF7A1A 100%);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 16px rgba(230, 96, 5, 0.4);
}

.lab-workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-8);
}

/* Lab Left Panel: Incoming Business Object */
.lab-incoming-panel {
  background: rgba(12, 15, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.lab-panel-title {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-amber);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lab-payload-card {
  background: rgba(18, 22, 32, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}

.lab-payload-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #8E98A8;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
}

.lab-payload-text {
  font-size: 0.95rem;
  color: #FFFFFF;
  line-height: 1.5;
  background: rgba(8, 10, 15, 0.9);
  padding: 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-amber);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Lab Right Panel: AI Execution & Action Ledger */
.lab-execution-panel {
  background: rgba(12, 15, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}

.lab-steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.lab-step-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: var(--font-mono);
  background: rgba(18, 22, 32, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #8E98A8;
  transition: all var(--trans-fast);
}

.lab-step-row.processing {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: #60A5FA;
}

.lab-step-row.completed {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34D399;
}

/* AI Explanation Box */
.lab-explanation-card {
  background: rgba(18, 22, 32, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: auto;
}

.lab-explanation-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-amber);
  margin-bottom: 6px;
}

.lab-explanation-body {
  font-size: 0.875rem;
  color: #A6ADBB;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   2. ASK PIXEL CONVERSATIONAL INTELLIGENCE DEMO
   -------------------------------------------------------------------------- */
.ask-pixel-container {
  background: rgba(14, 17, 24, 0.95);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.95), 0 0 32px rgba(230, 96, 5, 0.15);
  margin-top: var(--space-8);
}

.ask-pixel-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 280px;
  max-height: 380px;
  overflow-y: auto;
  padding: var(--space-4);
  background: rgba(8, 10, 15, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.chat-bubble-user {
  align-self: flex-end;
  background: rgba(230, 96, 5, 0.2);
  border: 1px solid rgba(230, 96, 5, 0.4);
  color: #FFFFFF;
  padding: 12px 18px;
  border-radius: 18px 18px 4px 18px;
  max-width: 75%;
  font-size: 0.925rem;
}

.chat-bubble-pixel {
  align-self: flex-start;
  background: rgba(22, 26, 38, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FAF8F5;
  padding: 14px 20px;
  border-radius: 18px 18px 18px 4px;
  max-width: 85%;
  font-size: 0.925rem;
  line-height: 1.55;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.ask-pixel-prompts {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.prompt-chip {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  font-size: 0.815rem;
  color: #A6ADBB;
  cursor: pointer;
  transition: all var(--trans-fast);
}

.prompt-chip:hover {
  background: rgba(230, 96, 5, 0.15);
  border-color: var(--accent-amber);
  color: #FFFFFF;
}

@media (max-width: 900px) {
  .lab-workspace-grid { grid-template-columns: 1fr; }
}