/* ========================================================
   WaferPilot Chapter 02: Industrial Split-Pane Workbench
   ======================================================== */

:root {
  --wb-console-bg: #070b14;
  --wb-console-card: #0d1322;
  --wb-console-border: #1e293b;
  --wb-console-border-focus: #38bdf8;
  --wb-console-text: #f1f5f9;
  --wb-console-text-muted: #94a3b8;
  --wb-cyan: #22d3ee;
  --wb-pink: #f43f5e;
  --wb-amber: #f59e0b;
  --wb-blue: #0284c7;
}

/* Autoplay Controller Bar */
.wb-controller-bar {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 14px;
  padding: 10px 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15);
  color: #f1f5f9;
}
.wb-controller-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.wb-play-pause-btn {
  background: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  font-family: inherit;
}
.wb-play-pause-btn:hover {
  background: #0369a1;
  transform: scale(1.02);
}
.wb-progress-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wb-step-pill {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 12px;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid #334155;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 135px;
}
.wb-step-pill:hover {
  background: #283548;
  border-color: #38bdf8;
}
.wb-step-pill.is-active {
  background: rgba(2, 132, 199, 0.2);
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}
.wb-step-pill-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: #f1f5f9;
  font-family: var(--font-mono, monospace);
}
.wb-step-pill.is-active .wb-step-pill-top {
  color: #38bdf8;
}
.wb-progress-track {
  width: 100%;
  height: 3px;
  background: #0b1120;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.wb-progress-fill {
  height: 100%;
  width: 0%;
  background: #38bdf8;
  border-radius: 999px;
  transition: width 0.1s linear;
}
.wb-step-pill.is-active .wb-progress-fill {
  background: #38bdf8;
}
.wb-step-pill.is-done .wb-progress-fill {
  width: 100% !important;
  background: #22c55e;
}
.wb-controller-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-family: var(--font-mono, monospace);
  color: #94a3b8;
}
.wb-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: wbLiveGlow 1.6s infinite;
}
@keyframes wbLiveGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Split-Pane Shell */
.wb-shell {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
}

/* Top Pipeline Header */
.wb-topbar {
  background: #0b101d;
  border-bottom: 1px solid #1e293b;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: #f1f5f9;
}
.wb-pipeline-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
}
.wb-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  color: #4ade80;
  font-weight: 600;
}
.wb-pulse-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: wbPulseAnim 1.6s infinite;
}
@keyframes wbPulseAnim {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.wb-pipeline-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  flex-wrap: wrap;
}
.wb-pipe-step {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  background: #1e293b;
  color: #94a3b8;
}
.wb-pipe-step.is-done {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.wb-pipe-step.is-active {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  font-weight: 600;
  border: 1px solid rgba(56, 189, 248, 0.4);
}
.wb-pipe-arrow {
  color: #475569;
  font-size: 9px;
}

/* Main Split: Left Visual vs Right Chat */
.wb-split {
  display: grid;
  grid-template-columns: 1.28fr 0.92fr;
  min-height: 680px;
}

/* LEFT PANE: Visualization Canvas */
.wb-pane-visual {
  background: var(--wb-console-bg);
  border-right: 1px solid #1e293b;
  display: flex;
  flex-direction: column;
  position: relative;
  color: var(--wb-console-text);
}
.wb-visual-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #1e293b;
  background: #090e1a;
  padding: 8px 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.wb-tab-group {
  display: inline-flex;
  background: #0f172a;
  padding: 3px;
  border-radius: 8px;
  gap: 2px;
  border: 1px solid #1e293b;
}
.wb-canvas-tab-btn {
  border: none;
  background: none;
  padding: 6px 13px;
  font-size: 11.5px;
  font-weight: 550;
  color: #94a3b8;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.wb-canvas-tab-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}
.wb-canvas-tab-btn.is-active {
  background: #0284c7;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
}
.wb-canvas-meta-tag {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  letter-spacing: 0.3px;
}

/* Canvas Body */
.wb-canvas-body {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 530px;
  background: radial-gradient(circle at center, #0f172a 0%, #060911 100%);
}
.wb-canvas-view {
  display: none;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wb-canvas-view.is-active {
  display: flex;
}

/* VIEW 1: 300mm WAFER WITH DYNAMIC ZOOM */
.wb-wafer-viewport {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wb-wafer-carrier {
  position: relative;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: #080d19;
  border: 2px solid #334155;
  box-shadow: 0 0 35px rgba(34, 211, 238, 0.12), inset 0 0 30px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.wb-wafer-carrier.highlight-excursion {
  box-shadow: 0 0 45px rgba(244, 63, 94, 0.4), inset 0 0 25px rgba(0, 0, 0, 0.85);
  border-color: #f43f5e;
}
.wb-wafer-stage {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center center;
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.wb-wafer-stage.is-zoomed {
  transform: scale(2.55) translate(-22%, 14%);
}
.wb-wafer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}
.wb-wafer-overlay-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: all;
}
.wb-target-ring {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.wb-target-ring.is-visible {
  opacity: 1;
  animation: wbTargetPulse 1.8s infinite;
}
@keyframes wbTargetPulse {
  0% { r: 34; stroke-width: 2; opacity: 1; }
  50% { r: 44; stroke-width: 3; opacity: 0.4; }
  100% { r: 34; stroke-width: 2; opacity: 1; }
}
.wb-zoom-callout {
  position: absolute;
  top: 96px;
  right: 68px;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.5s ease 0.4s;
  pointer-events: none;
  z-index: 10;
}
.wb-wafer-stage.is-zoomed .wb-zoom-callout {
  opacity: 1;
  transform: scale(1);
}
.wb-callout-badge {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid #f43f5e;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: #f1f5f9;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}
.wb-callout-title {
  font-weight: 700;
  color: #fb7185;
  display: flex;
  align-items: center;
  gap: 4px;
}
.wb-callout-desc {
  color: #94a3b8;
  font-size: 9px;
}
.wb-wafer-notch {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  background: #475569;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 10;
}
.wb-wafer-lens-osd {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(7, 11, 20, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid #1e293b;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 15;
  white-space: nowrap;
}
.wb-lens-mag-tag {
  font-weight: 700;
}
.wb-zoom-btns {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 20;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid #1e293b;
  padding: 3px;
  border-radius: 6px;
}
.wb-zoom-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.wb-zoom-btn:hover {
  color: #f1f5f9;
  background: #1e293b;
}
.wb-zoom-btn.is-active {
  background: #0284c7;
  color: #ffffff;
}
.wb-hud-readout {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 440px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: #94a3b8;
}
.wb-hud-readout span strong {
  color: #38bdf8;
}
.wb-hud-readout .excursion-count {
  color: #f43f5e;
  font-weight: 700;
}
.wb-filters-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  flex-wrap: wrap;
}
.wb-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #0f172a;
  border: 1px solid #1e293b;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s;
}
.wb-filter-pill:hover, .wb-filter-pill.is-active {
  border-color: #38bdf8;
  color: #f1f5f9;
}
.wb-dot-coral {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 6px #f43f5e;
}
.wb-dot-cyan {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 6px #22d3ee;
}

/* VIEW 2: EDA HISTOGRAMS & SENSOR TRACES */
.wb-eda-grid {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wb-eda-card {
  background: #0d1322;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.wb-eda-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  border-bottom: 1px solid #192237;
  padding-bottom: 6px;
}
.wb-eda-card-title {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
}
.wb-eda-badge {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  padding: 2px 6px;
  border-radius: 4px;
}
.wb-badge-alert {
  background: rgba(244, 63, 94, 0.18);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.4);
}
.wb-eda-chart-svg {
  width: 100%;
  height: 120px;
  display: block;
}
.wb-eda-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #151d30;
  font-size: 10.5px;
  font-family: var(--font-mono, monospace);
  color: #94a3b8;
  flex-wrap: wrap;
  gap: 6px;
}
.wb-eda-stats strong {
  color: #f1f5f9;
}

/* VIEW 3: SEM REVIEW PATCHES */
.wb-sem-grid {
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.wb-sem-card {
  background: #0d1322;
  border: 1px solid #1e293b;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  cursor: pointer;
}
.wb-sem-card:hover, .wb-sem-card.is-focused {
  border-color: #38bdf8;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.25);
  transform: translateY(-2px);
}
.wb-sem-img-wrap {
  position: relative;
  width: 100%;
  height: 135px;
  background: #000000;
  overflow: hidden;
}
.wb-sem-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05);
}
.wb-sem-osd {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(2px);
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  font-family: var(--font-mono, monospace);
  color: #94a3b8;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.wb-sem-scale {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f1f5f9;
}
.wb-scale-ruler {
  width: 24px;
  height: 2px;
  background: #ffffff;
  position: relative;
}
.wb-scale-ruler::before, .wb-scale-ruler::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 4px;
  background: #ffffff;
  top: -1px;
}
.wb-scale-ruler::before { left: 0; }
.wb-scale-ruler::after { right: 0; }

.wb-sem-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 1px dashed rgba(244, 63, 94, 0.7);
  border-radius: 4px;
  pointer-events: none;
}
.wb-sem-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #0a0f1d;
}
.wb-sem-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wb-sem-name {
  font-size: 11.5px;
  font-weight: 600;
  color: #f1f5f9;
}
.wb-sem-conf {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  padding: 1px 5px;
  border-radius: 3px;
}
.wb-sem-meta {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: #64748b;
  display: flex;
  justify-content: space-between;
}
.wb-sem-meta span strong {
  color: #94a3b8;
}

/* Bottom Status Bar */
.wb-canvas-statusbar {
  border-top: 1px solid #1e293b;
  background: #090e1a;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #64748b;
  font-family: var(--font-mono, monospace);
  flex-wrap: wrap;
  gap: 8px;
}
.wb-statusbar-left {
  display: flex;
  gap: 16px;
}
.wb-statusbar-left span strong {
  color: #e2e8f0;
}

/* RIGHT PANE: Conversational Copilot Chat */
.wb-pane-chat {
  background: #ffffff;
  display: flex;
  flex-direction: column;
}
.wb-chat-topbar {
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}
.wb-copilot-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wb-copilot-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.wb-copilot-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wb-copilot-role {
  font-size: 11px;
  color: #64748b;
}
.wb-badge-onprem {
  font-size: 10.5px;
  font-weight: 600;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
}

/* Message Stream */
.wb-chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 485px;
}
.wb-msg-bubble {
  display: flex;
  flex-direction: column;
  max-width: 92%;
  font-size: 13px;
  line-height: 1.55;
  transition: all 0.3s ease;
}
.wb-msg-user {
  align-self: flex-end;
  background: #0284c7;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 14px 14px 2px 14px;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
}
.wb-msg-agent {
  align-self: flex-start;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  padding: 14px 16px;
  border-radius: 14px 14px 14px 2px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.wb-msg-agent.is-active-step {
  border-color: #38bdf8;
  background: #f0f9ff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}
.wb-msg-agent strong {
  color: #0f172a;
}
.wb-bullet-list {
  margin: 8px 0;
  padding-left: 18px;
}
.wb-bullet-list li {
  margin-bottom: 4px;
}

/* Action Chips */
.wb-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: #0369a1;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  margin-top: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.wb-action-chip:hover, .wb-action-chip.is-pulsing {
  background: #bae6fd;
  color: #0c4a6e;
  transform: translateX(2px);
}
.wb-action-chip.is-pulsing {
  animation: wbChipPulse 1.5s infinite;
}
@keyframes wbChipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(2, 132, 199, 0); }
}

/* Chat Input Area */
.wb-chat-input-box {
  border-top: 1px solid #e2e8f0;
  padding: 14px 18px;
  background: #fafcff;
}
.wb-quick-prompts-row {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 10px;
  padding-bottom: 2px;
}
.wb-quick-btn {
  white-space: nowrap;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.wb-quick-btn:hover {
  border-color: #0284c7;
  color: #0284c7;
  background: #f0f9ff;
}
.wb-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wb-mock-input {
  flex: 1;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: #1e293b;
  outline: none;
  font-family: inherit;
}
.wb-mock-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}
.wb-send-btn {
  background: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}
.wb-send-btn:hover {
  background: #0369a1;
}

@media (max-width: 960px) {
  .wb-split {
    grid-template-columns: 1fr;
  }
  .wb-pane-visual {
    border-right: none;
    border-bottom: 1px solid #1e293b;
  }
  .wb-progress-steps {
    overflow-x: auto;
    width: 100%;
  }
}