/* ============================================================
   MaiAgent Showcase · shared stylesheet
============================================================ */
:root {
  --brand: #2563eb;
  --brand-dark: #1e40af;
  --brand-soft: #eff6ff;
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  background: white;
  color: #0f172a;
  padding-left: 260px;
}

/* ============================================================
   SHOWCASE SIDEBAR (left, fixed)
============================================================ */
.sc-sidebar {
  position: fixed; left: 0; top: 0; width: 260px; height: 100vh;
  background: white; border-right: 1px solid #e8ecf1;
  display: flex; flex-direction: column;
  font-size: 14px;
  z-index: 50;
}
.sc-brand {
  height: 64px; padding: 0 20px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #f1f5f9; flex-shrink: 0;
}
.sc-brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
}
.sc-brand-text { font-size: 15px; font-weight: 700; color: #0f172a; letter-spacing: -.01em; }
.sc-brand-tag {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px;
  background: #eff6ff; color: var(--brand); margin-left: auto;
}

.sc-search {
  padding: 12px 16px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0;
}
.sc-search input {
  width: 100%; padding: 8px 12px 8px 32px; font-size: 13px;
  border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc;
  outline: none; color: #0f172a;
}
.sc-search input:focus { border-color: var(--brand); background: white; }
.sc-search-wrap { position: relative; }
.sc-search-wrap iconify-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 16px;
}

.sc-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.sc-nav-section {
  padding: 12px 20px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: #94a3b8; letter-spacing: .05em;
  display: flex; align-items: center; justify-content: space-between;
}
.sc-nav-section .count {
  background: #f1f5f9; color: #64748b; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0;
}
.sc-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; padding-left: 20px;
  color: #475569; cursor: pointer; text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s ease;
}
.sc-nav-item iconify-icon { font-size: 18px; color: #94a3b8; flex-shrink: 0; }
.sc-nav-item:hover { background: #f8fafc; color: #0f172a; }
.sc-nav-item.is-active {
  background: #eff6ff; color: var(--brand); font-weight: 600;
  border-left-color: var(--brand); padding-left: 17px;
}
.sc-nav-item.is-active iconify-icon { color: var(--brand); }
.sc-nav-item.is-disabled { color: #cbd5e1; cursor: not-allowed; }
.sc-nav-item.is-disabled iconify-icon { color: #cbd5e1; }
.sc-nav-item .sc-soon {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  background: #f1f5f9; color: #94a3b8; margin-left: auto;
}

.sc-footer {
  padding: 14px 20px; border-top: 1px solid #f1f5f9; flex-shrink: 0;
  font-size: 12px; color: #64748b;
  display: flex; align-items: center; justify-content: space-between;
}
.sc-footer a { color: var(--brand); text-decoration: none; }

/* Language switcher (above footer) */
.sc-lang-switch {
  display: flex; gap: 4px;
  padding: 10px 14px;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.sc-lang-switch button {
  flex: 1;
  padding: 5px 6px;
  font-size: 11px; font-weight: 500;
  background: white; color: #64748b;
  border: 1px solid #e2e8f0; border-radius: 6px;
  cursor: pointer; transition: all .15s ease;
}
.sc-lang-switch button:hover { color: #0f172a; border-color: #cbd5e1; }
.sc-lang-switch button.is-active {
  background: #eff6ff; color: var(--brand); border-color: var(--brand);
  font-weight: 600;
}

/* ============================================================
   Hero demo block (auto-cycling montage)
============================================================ */
.sc-hero-demo {
  max-width: 1200px;
  margin: 36px 48px 0;
  border-radius: 24px;
  overflow: hidden;
  background: white;
  border: 1px solid #e8ecf1;
  box-shadow: 0 24px 60px -16px rgba(15, 23, 42, .15);
  position: relative;
}
.hero-demo-tag {
  position: absolute; top: 18px; left: 18px;
  padding: 5px 12px; border-radius: 99px;
  background: white; border: 1px solid #e2e8f0;
  font-size: 11px; font-weight: 600; color: #2563eb;
  display: inline-flex; align-items: center; gap: 6px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
.hero-demo-tag::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px;
  border-radius: 99px; background: #ef4444;
  animation: hero-pulse-dot 1.5s ease infinite;
}
@keyframes hero-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.85); } }

.hero-demo-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
  overflow: hidden;
}
.hero-scene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 800ms ease, transform 800ms ease;
  pointer-events: none;
  padding: 20px 32px;
}
.hero-scene.is-active {
  opacity: 1; transform: scale(1); pointer-events: auto;
}

.hero-demo-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  background: white; border-top: 1px solid #f1f5f9;
  gap: 16px;
}
.hero-demo-dots { display: flex; gap: 6px; flex-shrink: 0; }
.hero-demo-dots .dot {
  width: 24px; height: 6px;
  border-radius: 99px;
  background: #e2e8f0; border: none;
  cursor: pointer;
  transition: all .35s ease;
  padding: 0;
}
.hero-demo-dots .dot.is-active {
  background: #2563eb;
  width: 40px;
}
.hero-demo-dots .dot:hover { background: #cbd5e1; }
.hero-demo-dots .dot.is-active:hover { background: #1e40af; }
.hero-demo-label {
  flex: 1;
  font-size: 14px; color: #475569;
  font-weight: 500;
  line-height: 1.5;
  text-align: right;
}
.hero-demo-label strong { color: #0f172a; }

/* Hero scene content styling */
.hero-mockup {
  background: white;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 36px -12px rgba(15,23,42,.18);
  width: 100%;
  max-width: 880px;
  display: flex;
  overflow: hidden;
}
.hero-mockup-side {
  width: 200px;
  background: #fafafa;
  border-right: 1px solid #ececf2;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.hero-mockup-main { flex: 1; padding: 16px 20px; }

@media (max-width: 1024px) {
  .sc-hero-demo { margin-left: 24px; margin-right: 24px; }
  .hero-mockup-side { display: none; }
}

/* ============================================================
   INDEX (home page)
============================================================ */
.sc-home-hero {
  padding: 64px 48px 32px;
  max-width: 1080px;
}
.sc-home-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 12px; font-weight: 600; margin-bottom: 16px;
}
.sc-home-title {
  font-size: 44px; font-weight: 800; line-height: 1.1;
  letter-spacing: -.025em; color: #0f172a; margin: 0 0 14px;
}
.sc-home-sub {
  font-size: 17px; color: #475569; line-height: 1.55; max-width: 700px;
}
.sc-home-stats {
  display: flex; gap: 32px; margin-top: 28px;
  font-size: 13px; color: #64748b;
}
.sc-home-stats b { color: #0f172a; font-size: 15px; margin-right: 4px; }
.sc-home-stats-note {
  margin-top: 14px;
  font-size: 12px; color: #94a3b8;
  font-style: italic;
}

/* Stepper title (key flow disclaimer) */
.step-flow-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #94a3b8;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.sc-filters {
  padding: 8px 48px 24px; display: flex; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid #f1f5f9;
}
.sc-filter-chip {
  padding: 6px 14px; border-radius: 999px;
  background: white; border: 1px solid #e2e8f0;
  font-size: 13px; color: #475569; cursor: pointer;
  transition: all .15s ease;
}
.sc-filter-chip:hover { border-color: #cbd5e1; }
.sc-filter-chip.is-on {
  background: #0f172a; color: white; border-color: #0f172a;
}

.sc-cards {
  padding: 32px 48px 80px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  max-width: 1200px;
}
.sc-card {
  display: block; text-decoration: none;
  border: 1px solid #e8ecf1; border-radius: 16px;
  background: white; overflow: hidden;
  transition: all .25s ease; color: inherit;
}
.sc-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 14px 32px -16px rgba(15,23,42,.18);
  transform: translateY(-2px);
}
.sc-card.is-soon { opacity: .55; cursor: default; }
.sc-card.is-soon:hover { transform: none; box-shadow: none; }

.sc-card-banner {
  height: 160px; padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.sc-card-banner.banner-data    { background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%); }
.sc-card-banner.banner-knowledge { background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%); }
.sc-card-banner.banner-tools   { background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%); }
.sc-card-banner.banner-voice   { background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%); }
.sc-card-banner.banner-meeting { background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%); }
.sc-card-banner.banner-schedule { background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%); }

.sc-card-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: white; box-shadow: 0 6px 18px -8px rgba(15,23,42,.18);
  display: flex; align-items: center; justify-content: center;
}
.sc-card-icon iconify-icon { font-size: 24px; color: var(--brand); }

.sc-card-steps {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #475569; font-weight: 500;
}
.sc-card-steps span { background: rgba(255,255,255,.7); padding: 4px 10px; border-radius: 999px; }
.sc-card-steps .arr { background: transparent; padding: 0; color: #94a3b8; }

.sc-card-body { padding: 20px 24px 24px; }
.sc-card-cat {
  font-size: 11px; font-weight: 600; color: var(--brand);
  text-transform: uppercase; letter-spacing: .05em;
}
.sc-card-title { font-size: 20px; font-weight: 700; color: #0f172a; margin: 6px 0 8px; line-height: 1.3; }
.sc-card-desc { font-size: 14px; color: #64748b; line-height: 1.55; min-height: 44px; }
.sc-card-foot {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid #f1f5f9;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
}
.sc-card-link { color: var(--brand); font-weight: 600; display: flex; align-items: center; gap: 4px; }

.sc-card-soon-tag {
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px;
  background: #f1f5f9; color: #64748b;
}

/* ============================================================
   SCENARIO PAGE (top bar + hero + stage)
============================================================ */
.sc-scenario-topbar {
  height: 56px; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  position: sticky; top: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  z-index: 20;
}
.sc-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #475569; text-decoration: none;
}
.sc-back:hover { color: #0f172a; }
.sc-topbar-actions { display: flex; gap: 8px; }
.sc-topbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; color: #475569;
  border: 1px solid #e2e8f0; border-radius: 8px; background: white;
  cursor: pointer; text-decoration: none;
}
.sc-topbar-btn:hover { background: #f8fafc; }
.sc-topbar-btn.is-primary {
  background: var(--brand); border-color: var(--brand); color: white;
}
.sc-topbar-btn.is-primary:hover { background: var(--brand-dark); }

.scenario-hero {
  padding: 56px 48px 32px; max-width: 920px;
}
.scenario-hero .eyebrow {
  display: inline-flex; padding: 4px 12px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 12px; font-weight: 600; margin-bottom: 14px;
}
.scenario-hero h2 {
  font-size: 38px; font-weight: 800; line-height: 1.15;
  letter-spacing: -.02em; color: #0f172a; margin: 0 0 12px;
}
.scenario-hero p { font-size: 16px; color: #475569; line-height: 1.6; margin: 0; }

.scenario-stage-wrap {
  padding: 20px 48px 80px;
}

/* ============================================================
   STAGE (admin window simulation)
============================================================ */
.stage-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border-radius: 20px; overflow: hidden;
  background: #e2e8f0; border: 1px solid #cbd5e1;
  box-shadow: 0 16px 40px -12px rgba(15,23,42,.18);
}
.stage-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.stage {
  width: 1280px; height: 800px; background: white;
  position: relative; transform-origin: center center;
  flex-shrink: 0; overflow: hidden;
  /* JS sets transform: scale(...) dynamically based on frame size.
     Fallback when JS hasn't run: scale to fit a typical 1100px-wide column. */
  transform: scale(0.5);
}

/* ===== Admin chrome (inside stage) ===== */
.admin-sidebar {
  position: absolute; left:0; top:0; width:200px; height:800px;
  background: white; border-right: 1px solid #e8ecf1;
  display: flex; flex-direction: column;
}
.adm-logo {
  height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.adm-logo-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.adm-logo-text { font-size: 15px; font-weight: 700; color: #0f172a; letter-spacing: -.01em; }
.adm-menu { flex: 1; overflow: hidden; padding: 12px 0; font-size: 13px; }
.adm-menu-section {
  padding: 8px 16px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: #94a3b8; letter-spacing: .04em;
}
.adm-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 16px;
  color: #475569; cursor: pointer; transition: background .15s ease;
  border-left: 3px solid transparent; padding-left: 13px;
}
.adm-menu-item iconify-icon { font-size: 17px; color: #94a3b8; }
.adm-menu-item.is-active {
  background: #eff6ff; color: var(--brand); font-weight: 600;
  border-left-color: var(--brand);
}
.adm-menu-item.is-active iconify-icon { color: var(--brand); }
.adm-trigger {
  height: 40px; border-top: 1px solid #f1f5f9;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 13px;
}

/* Two-row header: top bar (48px) + multi-tab strip (38px) = 86px total */
.admin-header {
  position: absolute; left: 200px; top: 0; right: 0; height: 86px;
  background: white; border-bottom: 1px solid #e8ecf1;
  display: flex; flex-direction: column;
}
.adm-header-bar {
  height: 48px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #f1f5f9;
}
.adm-header-left { display: flex; align-items: center; gap: 12px; }
.adm-trigger {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,.65); cursor: pointer; border-radius: 6px;
}
.adm-trigger:hover { background: #f1f5f9; }
.adm-trigger iconify-icon { font-size: 18px; }

.adm-breadcrumb {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(0,0,0,.65);
}
.adm-breadcrumb iconify-icon { font-size: 14px; color: rgba(0,0,0,.25); }
.adm-breadcrumb .crumb-current { color: rgba(0,0,0,.88); font-weight: 500; }

.adm-actions { display: flex; align-items: center; gap: 2px; color: #64748b; }

/* Search trigger (Cmd+K hint) — Ant style */
.adm-search-trigger {
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px;
  background: #f5f5f5;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  font-size: 12px; color: rgba(0,0,0,.45);
  cursor: pointer;
  margin-right: 8px;
  min-width: 200px;
  transition: border-color 200ms ease;
}
.adm-search-trigger:hover { border-color: #d9d9d9; }
.adm-search-trigger iconify-icon { color: rgba(0,0,0,.45); font-size: 14px; }
.adm-search-trigger kbd {
  margin-left: auto;
  padding: 1px 5px;
  font-size: 10px;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  color: rgba(0,0,0,.45);
}

.adm-action-btn {
  width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,.65); cursor: pointer;
  position: relative;
}
.adm-action-btn:hover { background: #f5f5f5; color: rgba(0,0,0,.88); }
.adm-action-btn iconify-icon { font-size: 16px; }
.adm-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 14px; height: 14px;
  padding: 0 3px;
  background: #ff4d4f;
  color: white;
  border-radius: 99px;
  font-size: 9px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

.adm-avatar {
  margin-left: 6px; width: 30px; height: 30px; border-radius: 9999px;
  background: linear-gradient(135deg, #f59e0b, #ef4444); color: white;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  cursor: pointer;
}

.adm-org {
  display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px;
  border-radius: 6px; background: #f5f5f5; border: 1px solid transparent;
  font-size: 12px; color: rgba(0,0,0,.65); margin-right: 8px;
  cursor: pointer; transition: all 180ms ease;
}
.adm-org:hover { border-color: #d9d9d9; background: white; }
.adm-org-mark {
  width: 22px; height: 22px; border-radius: 5px;
  background: linear-gradient(135deg, var(--brand), #1e40af);
  color: white; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

/* Multi-tab strip (Vue Vben Admin signature) */
.adm-tabs {
  height: 38px;
  display: flex; align-items: flex-end;
  padding: 4px 12px 0;
  background: #fafafa;
  gap: 3px;
  position: relative;
  overflow-x: auto;
}
.adm-tabs::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: #f0f0f0;
  pointer-events: none;
}
.adm-tab {
  height: 32px;
  padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.65);
  cursor: pointer;
  white-space: nowrap;
  transition: all 180ms ease;
  position: relative;
}
.adm-tab:hover { color: rgba(0,0,0,.88); }
.adm-tab.is-active {
  background: white;
  color: #1677ff;
  border-color: #d9d9d9;
  border-bottom-color: white;
  font-weight: 500;
  z-index: 2;
}
.adm-tab.is-active::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: #1677ff;
  border-radius: 6px 6px 0 0;
}
.adm-tab.adm-tab-affix {
  background: #f0f0f0;
  border-color: #d9d9d9;
  cursor: default;
}
.adm-tab.adm-tab-affix iconify-icon { color: rgba(0,0,0,.45); }
.adm-tab-close {
  font-size: 12px;
  color: rgba(0,0,0,.25);
  border-radius: 50%;
  padding: 1px;
  transition: all 150ms ease;
}
.adm-tab-close:hover {
  background: rgba(0,0,0,.1);
  color: rgba(0,0,0,.65);
}
.adm-tab-actions {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto;
  height: 32px;
}
.adm-tab-action {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,.45);
  cursor: pointer;
  border-radius: 4px;
}
.adm-tab-action:hover { background: rgba(0,0,0,.04); color: rgba(0,0,0,.65); }
.adm-tab-action iconify-icon { font-size: 14px; }

.admin-content {
  position: absolute; left: 200px; top: 86px; right: 0; bottom: 0;
  background: #f8fafc; overflow: hidden;
}

/* ===== Panels & stagger animation ===== */
.panel {
  position: absolute; inset: 0; opacity: 0; transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease; pointer-events: none;
  display: flex; flex-direction: column;
}
.panel.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fx { opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 500ms ease; }
.panel.is-active .fx { opacity: 1; transform: translateY(0); }
.panel.is-active .fx-d1 { transition-delay: 80ms; }
.panel.is-active .fx-d2 { transition-delay: 160ms; }
.panel.is-active .fx-d3 { transition-delay: 240ms; }
.panel.is-active .fx-d4 { transition-delay: 320ms; }
.panel.is-active .fx-d5 { transition-delay: 400ms; }
.panel.is-active .fx-d6 { transition-delay: 480ms; }
.panel.is-active .fx-d7 { transition-delay: 560ms; }
.panel.is-active .fx-d8 { transition-delay: 640ms; }
.panel.is-active .fx-d9 { transition-delay: 1900ms; }
.panel.is-active .fx-d10 { transition-delay: 2100ms; }

/* ===== Right stepper ===== */
.scenario-meta-grid {
  display: grid; gap: 56px; grid-template-columns: 1.5fr 1fr; align-items: center;
}
.step-row { display: grid; grid-template-columns: 56px 1fr; gap: 16px; }
.step-circle {
  width: 36px; height: 36px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; transition: all 400ms ease;
}
.step-pending { background: #f1f5f9; color: #94a3b8; }
.step-active  { background: var(--brand); color: white; box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.step-done    { background: var(--brand); color: white; }
.step-line { width: 2px; margin: 0 auto; height: 56px; background: #e2e8f0; transition: background 400ms ease; }
.step-line.is-done { background: var(--brand); }
.step-title { font-size: 18px; font-weight: 700; color: #94a3b8; transition: color 400ms ease; }
.step-row.is-active .step-title, .step-row.is-done .step-title { color: #0f172a; }
.step-desc {
  font-size: 14px; line-height: 1.6; color: #64748b;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 500ms ease, opacity 400ms ease, margin-top 400ms ease; margin-top: 0;
}
.step-row.is-active .step-desc { max-height: 90px; opacity: 1; margin-top: 6px; }

/* Step row interactivity — subtle scale + bg on hover hints clickability */
.step-row {
  border-radius: 12px;
  padding: 8px 12px;
  margin: 0 -12px;
  transition: background 200ms ease, transform 200ms ease;
  user-select: none;
}
.step-row:hover {
  background: #f8fafc;
  transform: translateX(2px);
}
.step-row:hover .step-circle:not(.step-active):not(.step-done) {
  background: #e0e7ff;
  color: var(--brand);
}
.step-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Replay button — text-link style, aligned with step content column */
.step-replay {
  margin: 24px 0 0 56px;
  padding: 4px 0;
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit;
  font-size: 13px; font-weight: 500;
  color: #94a3b8;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 180ms ease;
}
.step-replay span {
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 180ms ease;
}
.step-replay:hover { color: var(--brand); }
.step-replay:hover span { border-bottom-color: currentColor; }
.step-replay iconify-icon { font-size: 14px; opacity: .9; }
.step-replay:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }

/* Progress bar inside stage-frame (top edge, thin) */
.step-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255,255,255,.4);
  z-index: 20;
  pointer-events: none;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}
.step-progress-fill {
  height: 100%; width: 0;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(37,99,235,.5);
}
@keyframes step-progress-anim {
  from { width: 0; }
  to   { width: 100%; }
}

/* Pause states — both hover and sticky show indicator */
.scenario-stage-wrap.is-paused .step-progress-fill,
.scenario-stage-wrap.is-paused-sticky .step-progress-fill {
  animation-play-state: paused !important;
}
.scenario-stage-wrap.is-paused .stage-frame::after,
.scenario-stage-wrap.is-paused-sticky .stage-frame::after {
  content: '⏸ ' attr(data-paused-label);
  position: absolute; top: 12px; right: 14px;
  background: rgba(15,23,42,.78); color: white;
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  letter-spacing: .04em; z-index: 21;
  pointer-events: none;
  animation: pauseIndicatorIn 240ms ease-out;
}
/* Sticky pause: more emphatic (fully opaque, slightly larger ring) */
.scenario-stage-wrap.is-paused-sticky .stage-frame::after {
  background: rgba(15,23,42,.92);
  box-shadow: 0 4px 12px -4px rgba(15,23,42,.4);
}
@keyframes pauseIndicatorIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Subtle pause indicator on the stepper too — so users hovering the right
   column see the same signal at their cursor instead of looking far left */
.scenario-stage-wrap.is-paused .step-flow-title::after,
.scenario-stage-wrap.is-paused-sticky .step-flow-title::after {
  content: ' · ⏸';
  color: #94a3b8;
  font-weight: 500;
  margin-left: 4px;
}

/* End-of-cycle CTA — appears after first complete loop */
.stage-cta {
  position: absolute; bottom: 18px; left: 50%; transform: translate(-50%, 12px);
  z-index: 22;
  padding: 10px 18px;
  font-size: 13px; font-weight: 600;
  color: white; background: var(--brand);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(37,99,235,.45), 0 4px 8px -4px rgba(37,99,235,.3);
  opacity: 0; pointer-events: none;
  transition: opacity 400ms ease, transform 400ms ease;
}
.stage-cta.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.stage-cta:hover {
  background: #1e40af;
  transform: translate(-50%, -2px);
}

/* Reduced motion: disable all transitions and animations */
body.is-reduced-motion *,
body.is-reduced-motion *::before,
body.is-reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
body.is-reduced-motion .step-progress { display: none; }
body.is-reduced-motion .ma-cursor { display: none; }

/* Embed mode: strip outer chrome, stage fills viewport */
body.is-embed { padding-left: 0; }
body.is-embed .sc-sidebar,
body.is-embed .sc-scenario-topbar,
body.is-embed .scenario-hero { display: none !important; }
body.is-embed .scenario-stage-wrap { padding: 0; }
body.is-embed .scenario-meta-grid {
  display: block;
  gap: 0;
  grid-template-columns: 1fr;
}
body.is-embed .scenario-meta-grid > div:last-child { display: none; } /* hide stepper text */
body.is-embed .stage-frame {
  border-radius: 0; border: none; box-shadow: none;
  height: 100vh; aspect-ratio: auto;
}

/* ===== Page chrome inside content ===== */
.page-header {
  height: 64px; padding: 0 24px; background: white; border-bottom: 1px solid #e8ecf1;
  display: flex; align-items: center; justify-content: space-between;
}
.page-title { font-size: 18px; font-weight: 700; color: #0f172a; }
.page-body { padding: 24px; height: calc(100% - 64px); overflow: hidden; position: relative; }

/* ===== Reusable mockup primitives ===== */
.field-input {
  border: 1px solid #e2e8f0; background: white; border-radius: 8px;
  padding: 10px 14px; font-size: 14px; color: #0f172a;
}
.typing { position: relative; }
.typing::after {
  content: ""; display: inline-block; width: 1px; height: 14px;
  background: var(--brand); margin-left: 2px; vertical-align: text-bottom;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Typewriter caret for chat bubbles etc (skip .typing since it has its own) */
:not(.typing).is-typing::after {
  content: "▍";
  display: inline-block;
  margin-left: 1px;
  color: currentColor;
  opacity: .55;
  animation: typingCaret 0.7s steps(2) infinite;
  font-weight: 400;
}
@keyframes typingCaret { 50% { opacity: 0; } }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500;
}
.pill-green { background: #dcfce7; color: #166534; }
.pill-blue  { background: #dbeafe; color: #1e40af; }
.pill-amber { background: #fef3c7; color: #92400e; }
.pill-red   { background: #fee2e2; color: #991b1b; }
.pill-gray  { background: #f1f5f9; color: #64748b; }

.btn-primary {
  background: var(--brand); color: white; padding: 8px 16px;
  border-radius: 8px; font-size: 13px; font-weight: 500;
  border: none; cursor: pointer;
}
.btn-ghost {
  background: white; color: #475569; padding: 8px 14px;
  border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; cursor: pointer;
}

.db-card {
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px;
  background: white; display: flex; flex-direction: column; gap: 6px;
  transition: all 400ms ease; position: relative;
}
.db-card.is-on { border-color: var(--brand); box-shadow: 0 6px 20px rgba(37,99,235,.10); background: #f8fafe; }
.db-icon {
  width: 32px; height: 32px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 12px;
}

.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-track { flex: 1; height: 22px; background: #f1f5f9; border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #2563eb); width: 0; transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.panel.is-active .bar-fill { width: var(--w, 60%); }

.crawl-row {
  display: grid; grid-template-columns: 2.4fr 1fr 0.7fr 1fr 1fr; gap: 12px;
  align-items: center; padding: 14px 18px; border-bottom: 1px solid #f1f5f9; font-size: 13px;
}
.progress-line { height: 4px; background: #e2e8f0; border-radius: 999px; overflow: hidden; position: relative; }
.progress-line > span { display: block; height: 100%; background: var(--brand); width: 0; transition: width 1.4s ease; }
.panel.is-active .progress-line > span { width: var(--w, 60%); }
.indeterminate > span { width: 40% !important; animation: indet 1.4s infinite ease-in-out; }
@keyframes indet { 0% { transform: translateX(-100%);} 100% { transform: translateX(250%);} }

.check-box {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #cbd5e1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 300ms ease; flex-shrink: 0;
}
.check-box.is-on { background: var(--brand); border-color: var(--brand); color: white; font-size: 11px; }

.mcp-card {
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px;
  background: white; display: flex; flex-direction: column;
  gap: 6px; transition: all 400ms ease; position: relative;
}
.mcp-card.is-on { border-color: var(--brand); box-shadow: 0 4px 14px rgba(37,99,235,.10); }
.mcp-logo {
  width: 32px; height: 32px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 12px;
}

.tool-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; font-size: 12px;
  border: 1px solid #e2e8f0; background: white; color: #334155;
}

.chat-bubble { max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; }
.chat-user { align-self: flex-end; background: var(--brand); color: white; border-bottom-right-radius: 4px; }
.chat-bot  { align-self: flex-start; background: white; color: #0f172a; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; }

.tool-call {
  background: #0f172a; color: #cbd5e1; border-radius: 10px;
  padding: 8px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.55; white-space: pre-wrap;
}
.tool-call .ok { color: #34d399; }
.tool-call .key { color: #93c5fd; }

.grid-bg {
  background-image:
    linear-gradient(to right, rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ============================================================
   MaiGPT chrome — chat-style layout (different from admin chrome)
   Used by maigpt/* scenario pages
============================================================ */
.mg-shell {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 240px 1fr;
  background: white;
}

/* Left: conversations sidebar */
.mg-sidebar {
  background: #fafafa;
  border-right: 1px solid #ececf2;
  display: flex; flex-direction: column;
  font-size: 13px;
}
.mg-brand {
  height: 56px; padding: 0 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #ececf2;
}
.mg-brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.mg-brand-text { font-size: 14px; font-weight: 700; color: #0f172a; }
.mg-brand-tag {
  margin-left: auto;
  font-size: 10px; font-weight: 600; color: #2563eb;
  background: #eff6ff; padding: 2px 6px; border-radius: 4px;
}
.mg-new-chat {
  margin: 12px;
  padding: 9px 12px; border-radius: 10px;
  background: white; border: 1px solid #e2e8f0;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #0f172a; font-weight: 500;
  cursor: pointer; transition: background .15s;
}
.mg-new-chat:hover { background: #f8fafc; }
.mg-section-title {
  padding: 10px 16px 4px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: #94a3b8; letter-spacing: .04em;
}
.mg-conv-list { flex: 1; overflow: hidden; }
.mg-conv-item {
  margin: 1px 8px; padding: 8px 10px;
  border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #475569; cursor: pointer;
  transition: background .15s;
}
.mg-conv-item iconify-icon { font-size: 14px; color: #94a3b8; flex-shrink: 0; }
.mg-conv-item:hover { background: rgba(15,23,42,.04); }
.mg-conv-item.is-active {
  background: #eff6ff; color: #1e40af; font-weight: 500;
}
.mg-conv-item.is-active iconify-icon { color: #2563eb; }
.mg-conv-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.mg-user-row {
  border-top: 1px solid #ececf2;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.mg-user-avatar {
  width: 28px; height: 28px; border-radius: 99px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: white; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mg-user-info { flex: 1; min-width: 0; }
.mg-user-name { font-size: 13px; color: #0f172a; font-weight: 500; }
.mg-user-org { font-size: 11px; color: #64748b; }

/* Right: chat area */
.mg-main {
  display: flex; flex-direction: column;
  min-width: 0;
  position: relative;
}
.mg-topbar {
  height: 56px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #ececf2;
  background: white;
}
.mg-topbar-title {
  font-size: 14px; color: #475569;
  display: flex; align-items: center; gap: 8px;
}
.mg-topbar-actions {
  display: flex; align-items: center; gap: 6px;
}
.mg-topbar-btn {
  padding: 6px 12px; font-size: 12px;
  border-radius: 8px; border: 1px solid #e2e8f0; background: white;
  display: inline-flex; align-items: center; gap: 6px;
  color: #475569; cursor: pointer;
}
.mg-topbar-btn:hover { background: #f8fafc; }
.mg-topbar-btn.is-primary { background: #2563eb; color: white; border-color: #2563eb; }

.mg-chat {
  flex: 1; overflow: hidden;
  padding: 24px 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.mg-bubble-user {
  align-self: flex-end;
  max-width: 75%;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 18px;
  border-bottom-right-radius: 6px;
  padding: 12px 16px;
  font-size: 14px; color: #1e3a8a; line-height: 1.55;
}
.mg-bubble-bot {
  align-self: flex-start;
  max-width: 88%;
  font-size: 14px; color: #0f172a; line-height: 1.65;
}
.mg-bubble-bot .mg-thinking {
  font-size: 12px; color: #94a3b8;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}

.mg-tool-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: white; border: 1px solid #e2e8f0;
  font-size: 11px; color: #475569;
  margin: 2px 4px 2px 0;
}
.mg-tool-pill iconify-icon { font-size: 12px; }
.mg-tool-pill .ok { color: #10b981; font-size: 10px; }

.mg-source-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px;
  margin-top: 6px;
}
.mg-source-card-icon {
  width: 22px; height: 22px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 10px;
  flex-shrink: 0;
}
.mg-source-title { font-weight: 500; color: #0f172a; }
.mg-source-meta { color: #94a3b8; font-size: 11px; margin-top: 1px; }

/* Citation chip */
.mg-cite {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 4px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 10px;
  font-weight: 600;
  margin: 0 2px;
  vertical-align: text-top;
}

.mg-input-row {
  margin: 0 32px 24px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: white;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 16px -8px rgba(15,23,42,.10);
  position: relative;
}

/* Tool menu popover (sits above input row) */
.mg-tool-menu {
  position: absolute;
  bottom: calc(100% + 8px); left: 0;
  width: 420px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 40px -12px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.04);
  z-index: 12;
}
.mg-tool-menu-title {
  font-size: 11px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 8px 12px 6px;
}
.mg-tool-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 200ms ease;
}
.mg-tool-row:hover { background: #f8fafc; }
.mg-tool-row.is-active { background: #eff6ff; }
.mg-tool-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mg-tool-icon iconify-icon { font-size: 16px; }
.mg-tool-text { flex: 1; min-width: 0; }
.mg-tool-name { font-size: 13px; font-weight: 600; color: #0f172a; }
.mg-tool-desc { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.mg-toggle {
  width: 34px; height: 20px;
  background: #cbd5e1; border-radius: 999px;
  position: relative; transition: background 220ms ease;
  flex-shrink: 0;
  cursor: pointer;
}
.mg-toggle::after {
  content: ""; position: absolute;
  width: 14px; height: 14px;
  background: white; border-radius: 50%;
  top: 3px; left: 3px;
  transition: left 220ms ease;
  box-shadow: 0 1px 2px rgba(15,23,42,.2);
}
.mg-toggle.is-on { background: var(--brand); }
.mg-toggle.is-on::after { left: 17px; }

.mg-model-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 6px 12px 14px 56px;
}
.mg-model-card {
  padding: 10px 8px;
  border: 1.5px solid #e2e8f0; border-radius: 10px;
  background: white;
  cursor: pointer;
  text-align: left;
  transition: all 200ms ease;
  font-size: 11px;
}
.mg-model-card:hover { border-color: #cbd5e1; }
.mg-model-card.is-selected {
  border-color: var(--brand);
  background: #eff6ff;
}
.mg-model-vendor {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: #64748b;
  margin-bottom: 4px;
}
.mg-model-vendor iconify-icon { font-size: 12px; }
.mg-model-name {
  font-weight: 700; color: #0f172a;
  font-size: 11px; line-height: 1.2;
}
.mg-model-sub {
  font-size: 10px; color: #94a3b8;
  margin-top: 1px;
}
.mg-model-tag {
  font-size: 9px; color: #94a3b8;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #f1f5f9;
}
.mg-model-card.is-selected .mg-model-tag { color: var(--brand); border-top-color: rgba(37,99,235,.15); }

/* Active tool indicator pill (in input row) */
.mg-tool-active-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  background: #eff6ff;
  color: var(--brand);
  font-size: 11px; font-weight: 600;
}
.mg-tool-active-pill iconify-icon { font-size: 12px; }

/* Shimmer for loading image placeholder */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* ============================================================
   CANVAS — Code editor + multi-artifact tabs
============================================================ */
.mg-canvas-chat {
  width: 320px;
  border-right: 1px solid #ececf2;
  padding: 18px 20px;
  overflow: auto;
  display: flex; flex-direction: column; gap: 12px;
  flex-shrink: 0;
}
.mg-canvas-pane {
  flex: 1;
  background: #fafafa;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.mg-canvas-tabs {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px 0;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
}
.mg-canvas-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: 12px; font-weight: 500;
  color: #64748b;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: all 200ms ease;
}
.mg-canvas-tab:hover { color: #0f172a; background: rgba(255,255,255,.5); }
.mg-canvas-tab.is-active {
  color: #0f172a;
  background: white;
  border-bottom-color: var(--brand);
}
.mg-canvas-tab iconify-icon { font-size: 14px; }
.mg-canvas-tab-spacer { flex: 1; }
.mg-canvas-tool {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  font-size: 11px; font-weight: 500;
  color: #64748b;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 6px;
  transition: all 180ms ease;
}
.mg-canvas-tool:hover { color: #0f172a; background: white; }
.mg-canvas-tool.is-active {
  background: white;
  color: var(--brand);
  border-color: var(--brand);
}
.mg-canvas-tool + .mg-canvas-tool { margin-left: 4px; }
.mg-canvas-tool iconify-icon { font-size: 12px; }

.mg-canvas-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

/* Code editor side */
.mg-canvas-code {
  background: #0f172a;
  color: #cbd5e1;
  padding: 14px 16px;
  overflow: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.65;
  position: relative;
}
.mg-code-lang {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  color: #94a3b8;
  background: rgba(148,163,184,.12);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mg-code-lang iconify-icon { font-size: 11px; }
.mg-code-block {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: #cbd5e1;
}
.mg-code-block .typing { color: #cbd5e1; }
.mg-code-block .typing::after {
  background: #61dafb;
  height: 12px;
}

/* Preview side */
.mg-canvas-preview {
  background: white;
  padding: 16px 18px;
  overflow: auto;
}

/* ===== Mermaid CSS render (faux flow diagram) ===== */
.mermaid-render {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 10px 0;
  font-size: 11px;
}
.m-node {
  background: white;
  border: 1.5px solid #2563eb;
  color: #1e40af;
  border-radius: 6px;
  padding: 6px 14px;
  font-weight: 500;
  font-size: 11px;
  white-space: nowrap;
}
.m-start { background: #eff6ff; border-color: #93c5fd; }
.m-end { background: #ecfdf5; border-color: #6ee7b7; color: #047857; font-weight: 700; }
.m-decision {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #92400e;
  border-radius: 0;
  transform: rotate(45deg);
  padding: 14px 16px;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  margin: 6px 0;
}
.m-decision span { transform: rotate(-45deg); }
.m-success { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.m-arrow { width: 30px; height: 12px; transform: rotate(90deg); }
.m-arrow-merge { transform: rotate(90deg); margin-top: 2px; }
.m-branch { display: flex; gap: 24px; margin-top: 4px; }
.m-branch-row { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m-branch-label {
  font-size: 9px; color: #64748b;
  background: white; padding: 1px 6px; border-radius: 3px;
}

/* ===== React preview (rendered component) ===== */
.react-preview {
  display: flex; gap: 8px;
  padding: 12px 0 16px;
}
.rp-step {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.rp-step iconify-icon { font-size: 14px; }
.rp-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 10px; font-weight: 700;
}
.rp-done { background: #2563eb; color: white; }
.rp-active { border: 2px solid #2563eb; color: #2563eb; background: white; }
.rp-active .rp-num { background: #2563eb; color: white; }
.rp-pending { background: #f1f5f9; color: #94a3b8; }
.rp-pending .rp-num { background: #cbd5e1; color: white; }

/* ===== Other artifacts mini-grid ===== */
.mg-other-artifacts { margin-top: 8px; padding-top: 12px; border-top: 1px solid #f1f5f9; }
.mg-other-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mg-other-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 200ms ease;
}
.mg-other-card:hover { border-color: var(--brand); background: white; }
.mg-other-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mg-other-meta { flex: 1; min-width: 0; }
.mg-other-name {
  font-size: 11px; font-weight: 600; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.mg-other-mini-chart {
  display: flex; gap: 2px; align-items: flex-end;
  height: 18px;
}
.mg-other-mini-chart > div {
  flex: 1;
  background: linear-gradient(to top, #2563eb, #93c5fd);
  border-radius: 1px;
}
.mg-other-mini-table {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
.mg-other-mini-table > div {
  height: 4px;
  background: #cbd5e1;
  border-radius: 1px;
}
.mg-other-mini-table > div:nth-child(-n+3) { background: #2563eb; }

/* Export bar at bottom of canvas */
.mg-canvas-export-bar {
  position: absolute; bottom: 12px; right: 12px;
  display: flex; gap: 6px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  padding: 6px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px -4px rgba(15,23,42,.12);
}

/* ============================================================
   SWITCH-LLM — Ant Design Select look (matches real chat top bar)
============================================================ */
.mg-topbar-title-bold {
  font-size: 18px; font-weight: 700;
  color: #0f172a;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ant Design Select fake — width: 320px (w-80), 32px height, rounded 6px border */
.ant-select-fake {
  display: inline-flex; align-items: center;
  width: 320px; height: 32px;
  padding: 0 11px 0 11px;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  position: relative;
}
.ant-select-fake:hover { border-color: #4096ff; }
.ant-select-fake.is-open {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(5,145,255,.12);
}
.ant-select-selection-item {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
  font-size: 14px;
  color: rgba(0,0,0,.88);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ant-select-icon-wrap {
  width: 16px; height: 16px;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.ant-select-provider {
  font-size: 12px;
  color: rgba(0,0,0,.45);
  margin-left: auto;
  flex-shrink: 0;
}
.ant-select-arrow {
  display: inline-flex; align-items: center;
  font-size: 12px;
  color: rgba(0,0,0,.25);
  margin-left: 4px;
}
.ant-select-arrow iconify-icon { font-size: 16px; }

/* Dropdown panel — appears below the select trigger */
.ant-select-dropdown {
  position: absolute;
  top: 56px; right: 16px;
  width: 320px;
  max-height: 480px;
  background: white;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05);
  z-index: 15;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.ant-select-search {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.ant-select-search iconify-icon { color: rgba(0,0,0,.45); font-size: 14px; }
.ant-select-search input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-size: 14px;
  color: rgba(0,0,0,.88);
  font-family: inherit;
}
.ant-select-list {
  overflow: auto;
  flex: 1;
}
.ant-select-option {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  font-size: 14px;
  color: rgba(0,0,0,.88);
  cursor: pointer;
  border-radius: 4px;
  transition: background 180ms ease;
  min-height: 32px;
}
.ant-select-option:hover,
.ant-select-option.ant-select-option-active { background: #f5f5f5; }
.ant-select-option.ant-select-option-selected {
  background: #e6f4ff;
  font-weight: 600;
}
.ant-select-label {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ant-default-pill {
  padding: 1px 6px;
  font-size: 11px; font-weight: 500;
  background: #e6f4ff;
  color: #1677ff;
  border-radius: 4px;
  margin-left: 4px;
}

/* ============================================================
   SWITCH-LLM — legacy model picker styles (kept for compat)
============================================================ */
.mg-model-picker-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-size: 12px; font-weight: 600;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #0f172a;
  cursor: pointer;
  transition: all 200ms ease;
  font-family: inherit;
}
.mg-model-picker-btn:hover { border-color: #cbd5e1; background: #f8fafc; }
.mg-model-picker-btn.is-open { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.mg-model-picker-btn iconify-icon { font-size: 14px; color: #94a3b8; }

.mg-model-vendor-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.mg-model-vendor-dot.mg-mvd-sm { width: 14px; height: 14px; font-size: 8px; }

.mg-model-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
}

/* Dropdown panel */
.mg-model-dropdown {
  position: absolute;
  top: 56px; right: 16px;
  width: 320px;
  max-height: 480px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 40px -12px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.04);
  z-index: 15;
  overflow: auto;
}
.mg-model-dropdown-search {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  margin: -6px -6px 4px;
  border-radius: 12px 12px 0 0;
  background: #f8fafc;
}
.mg-model-dropdown-search iconify-icon { color: #94a3b8; font-size: 14px; }
.mg-model-dropdown-search input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-size: 12px; color: #0f172a;
  font-family: inherit;
}

.mg-model-group {
  padding: 6px 0;
}
.mg-model-group + .mg-model-group { border-top: 1px solid #f1f5f9; }
.mg-model-group-label {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-size: 10px; font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mg-model-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 180ms ease;
}
.mg-model-item:hover { background: #f8fafc; }
.mg-model-item.is-current { background: #f5f3ff; }
.mg-model-item.is-selected { background: #eff6ff; box-shadow: inset 0 0 0 1px rgba(37,99,235,.2); }
.mg-model-item-name {
  font-size: 13px; font-weight: 600; color: #0f172a;
  display: flex; align-items: center; gap: 6px;
}
.mg-model-item-tag {
  font-size: 10px; color: #94a3b8; font-weight: 500;
}
.mg-current-pill {
  font-size: 9px; font-weight: 600;
  background: var(--brand);
  color: white;
  padding: 1px 6px;
  border-radius: 99px;
  letter-spacing: .02em;
}

/* Toast that appears on switch */
.mg-switch-toast {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  background: #ecfdf5;
  color: #047857;
  border-radius: 999px;
  margin-right: 8px;
}

.mg-hint-pill {
  position: absolute;
  top: 60px; right: 16px;
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  font-size: 11px; font-weight: 600;
  background: #fef3c7;
  color: #92400e;
  border-radius: 999px;
  border: 1px solid #fbbf24;
  box-shadow: 0 4px 12px -4px rgba(251,191,36,.4);
  pointer-events: none;
}

/* ============================================================
   ANT DESIGN COMPONENTS — used across MaiGPT scenarios
============================================================ */
.ant-input-search {
  display: flex; align-items: center; gap: 6px;
  height: 32px;
  padding: 0 11px;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  transition: border-color 200ms ease;
}
.ant-input-search:hover, .ant-input-search:focus-within { border-color: #4096ff; }
.ant-input-search iconify-icon { color: rgba(0,0,0,.45); font-size: 14px; }
.ant-input-search input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-size: 14px;
  color: rgba(0,0,0,.88);
  font-family: inherit;
}

.ant-tag {
  display: inline-flex; align-items: center;
  padding: 1px 8px;
  font-size: 12px; font-weight: 400;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
}
.ant-tag-success {
  color: #389e0d;
  background: #f6ffed;
  border-color: #b7eb8f;
}
.ant-tag-warning {
  color: #d48806;
  background: #fffbe6;
  border-color: #ffe58f;
}
.ant-tag-default {
  color: rgba(0,0,0,.88);
  background: rgba(0,0,0,.02);
  border-color: #d9d9d9;
}
.ant-tag-blue {
  color: #1677ff;
  background: #e6f4ff;
  border-color: #91caff;
}

.ant-btn-primary {
  padding: 4px 15px;
  font-size: 14px; font-weight: 400;
  background: #1677ff; color: white;
  border: 1px solid #1677ff;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 180ms ease;
}
.ant-btn-primary:hover { background: #4096ff; border-color: #4096ff; }
.ant-btn-default {
  padding: 4px 15px;
  font-size: 14px; font-weight: 400;
  background: white;
  color: rgba(0,0,0,.88);
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 180ms ease;
}
.ant-btn-default:hover { color: #4096ff; border-color: #4096ff; }
.ant-btn-text {
  padding: 4px 8px;
  font-size: 14px; font-weight: 400;
  background: transparent;
  color: rgba(0,0,0,.65);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 180ms ease;
}
.ant-btn-text:hover { color: #ff4d4f; background: rgba(255,77,79,.05); }

/* Connector row (manage-my-connectors style) */
.ant-conn-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.ant-conn-row:hover {
  border-color: #91caff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.ant-conn-logo {
  width: 48px; height: 48px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  flex-shrink: 0;
}
.ant-conn-meta { flex: 1; min-width: 0; }
.ant-conn-name-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.ant-conn-name {
  font-size: 16px; font-weight: 500;
  color: rgba(0,0,0,.88);
}
.ant-conn-desc {
  font-size: 14px;
  color: rgba(0,0,0,.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ant-conn-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}

/* ============================================================
   USE-KNOWLEDGE-BASE — KB sources, search progress, citations
============================================================ */

/* Sidebar KB source list */
.mg-kb-source-list {
  padding: 0 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.mg-kb-source {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  font-size: 12px; color: #475569;
  border-radius: 6px;
}
.mg-kb-source:hover { background: #f1f5f9; }
.mg-kb-icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800;
  flex-shrink: 0;
}
.mg-kb-count {
  margin-left: auto;
  font-size: 10px; color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

/* In-chat retrieval progress */
.mg-kb-search-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
}
.mg-kb-search-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

/* Citation chip */
.mg-cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 4px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 10px;
  font-weight: 700;
  margin: 0 2px;
  vertical-align: text-top;
  cursor: pointer;
  transition: all 180ms ease;
}
.mg-cite:hover { background: #2563eb; color: white; }

/* Citation list (full source cards at the end of bot answer) */
.mg-citation-list {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  display: flex; flex-direction: column; gap: 6px;
}
.mg-citation-list-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.mg-citation-card {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 180ms ease;
}
.mg-citation-card:hover { border-color: var(--brand); background: white; }
.mg-citation-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--brand);
  color: white;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.mg-citation-meta { flex: 1; min-width: 0; }
.mg-citation-name { font-size: 12px; font-weight: 600; color: #0f172a; margin-bottom: 3px; }
.mg-citation-quote {
  font-size: 11px; color: #64748b;
  line-height: 1.55;
  font-style: italic;
  border-left: 2px solid #cbd5e1;
  padding-left: 8px;
}

/* ===== KB slide-in right panel (matches ChatKnowledgePanel.vue) ===== */
.ant-kb-panel {
  width: 340px;
  background: white;
  border-left: 1px solid #f0f0f0;
  display: flex; flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}
.ant-kb-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 8px;
  flex-shrink: 0;
}
.ant-kb-tab {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 12px 12px;
  font-size: 13px;
  color: rgba(0,0,0,.65);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}
.ant-kb-tab.is-active {
  color: #1677ff;
  border-bottom-color: #1677ff;
}
.ant-kb-tab iconify-icon { font-size: 14px; }

.ant-kb-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}
.ant-kb-toolbar-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(0,0,0,.65);
  cursor: pointer;
  font-family: inherit;
}
.ant-kb-toolbar-btn:hover { background: rgba(0,0,0,.04); border-color: #d9d9d9; }
.ant-kb-toolbar-btn iconify-icon { font-size: 14px; }

.ant-kb-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px;
  font-size: 13px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}
.ant-kb-select-all {
  display: inline-flex; align-items: center; gap: 4px;
  color: #1677ff;
  cursor: pointer;
  user-select: none;
}
.ant-kb-select-all iconify-icon { font-size: 14px; }
.ant-kb-count-text {
  font-size: 12px;
  color: rgba(0,0,0,.45);
  display: inline-flex; align-items: center; gap: 6px;
}
.ant-kb-clear {
  color: #ff7875;
  cursor: pointer;
}
.ant-kb-clear:hover { color: #ff4d4f; }

.ant-kb-tree {
  flex: 1;
  overflow: auto;
  padding: 4px;
}
.ant-kb-group { margin-bottom: 1px; }
.ant-kb-group-header {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 180ms ease;
}
.ant-kb-group-header:hover { background: #f5f5f5; }
.ant-kb-caret {
  font-size: 14px;
  color: rgba(0,0,0,.45);
  flex-shrink: 0;
}
.ant-kb-checkbox {
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: white;
}
.ant-kb-checkbox.is-checked {
  background: #1677ff;
  border-color: #1677ff;
  color: white;
}
.ant-kb-checkbox iconify-icon { font-size: 11px; }
.ant-kb-group-name {
  font-size: 13px; font-weight: 500;
  color: rgba(0,0,0,.88);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ant-kb-group-count {
  font-size: 11px; color: rgba(0,0,0,.45);
  flex-shrink: 0;
}
.ant-kb-children { padding-left: 22px; }
.ant-kb-leaf {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  font-size: 12px;
  color: rgba(0,0,0,.65);
  border-radius: 4px;
  cursor: pointer;
}
.ant-kb-leaf:hover { background: #f5f5f5; }
.ant-kb-leaf > iconify-icon { color: rgba(0,0,0,.45); font-size: 14px; flex-shrink: 0; }

/* ============================================================
   FILE UPLOAD — drop zone, file chip, parsing progress, data table
   (shared by file-qa / invoice-batch / csv-analysis)
============================================================ */
.ant-upload-zone {
  width: 100%; max-width: 540px;
  padding: 36px 28px;
  border: 2px dashed #d9d9d9;
  border-radius: 12px;
  background: #fafafa;
  text-align: center;
  cursor: pointer;
  transition: all 220ms ease;
}
.ant-upload-zone:hover, .ant-upload-zone.is-active {
  border-color: #1677ff;
  background: #f0f7ff;
}
.ant-upload-zone-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: #e6f4ff;
  color: #1677ff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-size: 28px;
}
.ant-upload-zone-title {
  font-size: 16px; font-weight: 600;
  color: rgba(0,0,0,.88);
  margin-bottom: 4px;
}
.ant-upload-zone-hint {
  font-size: 12px;
  color: rgba(0,0,0,.45);
  margin-bottom: 16px;
}
.ant-upload-types {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}
.ant-upload-types > span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 500;
  background: white; color: rgba(0,0,0,.65);
  border: 1px solid #e8e8e8;
  border-radius: 999px;
}

/* File chip — shows uploaded file in input row or chat */
.ant-file-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  font-size: 13px;
}
.ant-file-chip-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.ant-file-chip-name {
  font-weight: 500; color: rgba(0,0,0,.88);
  max-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ant-file-chip-meta { font-size: 11px; color: rgba(0,0,0,.45); }
.ant-file-chip-remove {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,.25);
  cursor: pointer;
  border-radius: 50%;
}
.ant-file-chip-remove:hover { background: rgba(0,0,0,.06); color: rgba(0,0,0,.65); }

/* Progress bar (Ant style) */
.ant-progress {
  display: flex; align-items: center; gap: 8px;
}
.ant-progress-track {
  flex: 1;
  height: 6px;
  background: rgba(0,0,0,.06);
  border-radius: 999px;
  overflow: hidden;
}
.ant-progress-fill {
  height: 100%;
  background: #1677ff;
  border-radius: 999px;
  transition: width 400ms ease;
}
.ant-progress-text { font-size: 12px; color: rgba(0,0,0,.65); font-variant-numeric: tabular-nums; }

/* Parsing checklist (shows step-by-step processing) */
.ant-parse-checklist {
  display: flex; flex-direction: column; gap: 6px;
}
.ant-parse-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: rgba(0,0,0,.65);
}
.ant-parse-step iconify-icon { font-size: 14px; }
.ant-parse-step.is-done { color: #389e0d; }
.ant-parse-step.is-doing { color: #1677ff; }
.ant-parse-step.is-pending { color: rgba(0,0,0,.35); }

/* Data table (Ant style, used by invoice-batch + csv-analysis) */
.ant-table {
  width: 100%;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
}
.ant-table-thead {
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 600;
  color: rgba(0,0,0,.88);
}
.ant-table-tr {
  display: grid;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  transition: background 180ms ease;
}
.ant-table-tr:hover { background: #fafafa; }
.ant-table-tr:last-child { border-bottom: none; }
.ant-table-th, .ant-table-td {
  padding: 8px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ant-table-td { color: rgba(0,0,0,.85); }
.ant-table-tr-anomaly { background: #fff7e6; }
.ant-table-tr-anomaly:hover { background: #ffe7ba; }

/* PDF preview pane (file-qa panel 4) */
.ant-pdf-preview {
  width: 320px;
  flex-shrink: 0;
  background: #fafafa;
  border-left: 1px solid #f0f0f0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ant-pdf-preview-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
  font-size: 12px;
  color: rgba(0,0,0,.65);
}
.ant-pdf-preview-page {
  flex: 1;
  margin: 12px;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 24px 18px;
  font-size: 10px;
  line-height: 1.6;
  color: rgba(0,0,0,.65);
  overflow: auto;
  position: relative;
}
.ant-pdf-page-num {
  position: absolute;
  top: 8px; right: 12px;
  font-size: 10px;
  color: rgba(0,0,0,.35);
}
.ant-pdf-preview-page h4 {
  font-size: 12px; font-weight: 700;
  margin: 12px 0 6px;
  color: rgba(0,0,0,.88);
}
.ant-pdf-highlight {
  background: #fff566;
  padding: 1px 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,193,7,.4);
}

/* Insight / suggestion pills */
.ant-suggest-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 12px;
}
.ant-suggest-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px;
  background: #f0f7ff;
  color: #1677ff;
  border: 1px solid #91caff;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all 180ms ease;
  font-family: inherit;
}
.ant-suggest-pill:hover { background: #e6f4ff; border-color: #1677ff; }
.ant-suggest-pill iconify-icon { font-size: 12px; }

/* Anomaly alert (used by invoice-batch + csv-analysis) */
.ant-anomaly-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 8px;
  font-size: 12px;
  color: #874d00;
}
.ant-anomaly-alert iconify-icon { font-size: 18px; color: #d48806; flex-shrink: 0; margin-top: 1px; }

/* Column profile card (csv-analysis panel 2) */
.ant-col-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ant-col-profile {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  padding: 10px;
}
.ant-col-profile-name {
  font-size: 12px; font-weight: 600;
  color: rgba(0,0,0,.88);
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ant-col-profile-type {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  background: #f5f5f5;
  color: rgba(0,0,0,.65);
  border-radius: 3px;
  margin-bottom: 4px;
}
.ant-col-profile-stats {
  font-size: 11px;
  color: rgba(0,0,0,.45);
}

/* Invoice thumbnail grid (panel 2 of invoice-batch) */
.ant-invoice-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.ant-invoice-thumb {
  aspect-ratio: 3 / 4;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 8px;
  color: rgba(0,0,0,.45);
  position: relative;
  overflow: hidden;
}
.ant-invoice-thumb-status {
  position: absolute;
  top: 2px; right: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
}
.ant-invoice-thumb-status.is-done { background: #52c41a; color: white; }
.ant-invoice-thumb-status.is-doing { background: #1677ff; color: white; }
.ant-invoice-thumb-status.is-pending { background: #d9d9d9; color: white; }
.ant-invoice-thumb-icon {
  font-size: 14px;
  color: #1677ff;
  margin-bottom: 4px;
}
.ant-invoice-thumb-row {
  width: 80%;
  height: 1.5px;
  background: rgba(0,0,0,.1);
  border-radius: 1px;
  margin: 1px 0;
}

/* Stat summary card (top right, used by invoice-batch + csv) */
.ant-stat-card {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex; gap: 18px;
}
.ant-stat-item {
  display: flex; flex-direction: column;
}
.ant-stat-value {
  font-size: 18px; font-weight: 700;
  color: rgba(0,0,0,.88);
  font-variant-numeric: tabular-nums;
}
.ant-stat-label {
  font-size: 11px; color: rgba(0,0,0,.45);
  margin-top: 2px;
}

/* Mini chart for csv analysis */
.ant-mini-chart {
  position: relative;
  width: 100%;
  height: 140px;
  background: #fafafa;
  border-radius: 6px;
  padding: 12px;
}
.ant-mini-chart-bars {
  display: flex; align-items: flex-end; gap: 4px;
  height: 100%;
}
.ant-mini-chart-bars > div {
  flex: 1;
  background: linear-gradient(to top, #1677ff, #91caff);
  border-radius: 2px 2px 0 0;
  position: relative;
}
.ant-anomaly-marker {
  position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #ff4d4f;
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(255,77,79,.4);
}

/* ============================================================
   PERMISSIONS / API KEY — settings-style admin pages
============================================================ */
.ant-page-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 24px;
  background: white;
}
.ant-page-tab {
  padding: 12px 16px;
  font-size: 14px;
  color: rgba(0,0,0,.65);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
  margin-right: 4px;
}
.ant-page-tab:hover { color: #1677ff; }
.ant-page-tab.is-active {
  color: #1677ff;
  border-bottom-color: #1677ff;
  font-weight: 500;
}

/* Modal (centered overlay) */
.ant-modal-mask {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
}
.ant-modal {
  width: 520px; max-width: 92%;
  background: white;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
  overflow: hidden;
}
.ant-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}
.ant-modal-title { font-size: 16px; font-weight: 600; color: rgba(0,0,0,.88); }
.ant-modal-close iconify-icon { font-size: 16px; color: rgba(0,0,0,.45); cursor: pointer; }
.ant-modal-body { padding: 20px; }
.ant-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
}

/* Form fields (Ant Design style) */
.ant-form-item {
  margin-bottom: 18px;
}
.ant-form-label {
  display: block;
  font-size: 14px;
  color: rgba(0,0,0,.88);
  margin-bottom: 6px;
}
.ant-form-label .ant-required { color: #ff4d4f; margin-right: 2px; }
.ant-form-input {
  width: 100%; height: 32px;
  padding: 0 11px;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px; color: rgba(0,0,0,.88);
  transition: all 200ms ease;
  font-family: inherit;
  box-sizing: border-box;
}
.ant-form-input:focus, .ant-form-input.is-focused {
  outline: none;
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(5,145,255,.12);
}
.ant-form-extra { font-size: 12px; color: rgba(0,0,0,.45); margin-top: 4px; }

/* Radio group / segmented (for scope selection) */
.ant-segmented {
  display: inline-flex;
  background: rgba(0,0,0,.04);
  border-radius: 6px;
  padding: 2px;
  gap: 0;
}
.ant-segmented-item {
  padding: 4px 12px;
  font-size: 13px;
  color: rgba(0,0,0,.65);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 180ms ease;
  font-family: inherit;
}
.ant-segmented-item:hover { color: rgba(0,0,0,.88); }
.ant-segmented-item.is-active {
  background: white;
  color: rgba(0,0,0,.88);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  font-weight: 500;
}

/* Permission matrix (checkbox grid) */
.ant-perm-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.ant-perm-matrix th, .ant-perm-matrix td {
  padding: 10px 12px;
  text-align: left;
}
.ant-perm-matrix thead th {
  background: #fafafa;
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  color: rgba(0,0,0,.88);
}
.ant-perm-matrix tbody tr:hover { background: #fafafa; }
.ant-perm-matrix tbody tr + tr td { border-top: 1px solid #f0f0f0; }
.ant-perm-matrix .ant-perm-name {
  font-weight: 500;
  color: rgba(0,0,0,.88);
}
.ant-perm-matrix .ant-perm-desc {
  font-size: 11px; color: rgba(0,0,0,.45); margin-top: 2px;
}
.ant-perm-cell { text-align: center; }
.ant-perm-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  background: white;
}
.ant-perm-check.is-checked {
  background: #1677ff;
  border-color: #1677ff;
  color: white;
}
.ant-perm-check.is-checked iconify-icon { font-size: 11px; }
.ant-perm-check.is-disabled {
  background: #f5f5f5;
  border-color: #d9d9d9;
  cursor: not-allowed;
}

/* Member avatar with name */
.ant-member {
  display: inline-flex; align-items: center; gap: 8px;
}
.ant-member-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1677ff, #4096ff);
  color: white;
  font-weight: 600; font-size: 12px;
  flex-shrink: 0;
}
.ant-member-info { display: flex; flex-direction: column; }
.ant-member-name { font-size: 13px; color: rgba(0,0,0,.88); font-weight: 500; }
.ant-member-email { font-size: 11px; color: rgba(0,0,0,.45); }

/* API Key code reveal box */
.ant-key-reveal {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: rgba(0,0,0,.88);
  word-break: break-all;
}
.ant-key-reveal-once {
  background: #fffbe6;
  border-color: #ffd591;
  color: #874d00;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 10px;
}
.ant-key-reveal-once iconify-icon { font-size: 16px; color: #d48806; flex-shrink: 0; margin-top: 1px; }

/* Code block with syntax highlight (light theme) */
.ant-code-block {
  background: #1f1f1f;
  color: #d4d4d4;
  padding: 14px 16px;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.65;
  overflow-x: auto;
  position: relative;
}
.ant-code-block .key { color: #569cd6; }
.ant-code-block .str { color: #ce9178; }
.ant-code-block .com { color: #6a9955; font-style: italic; }
.ant-code-block .num { color: #b5cea8; }
.ant-code-block-copy {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  border: 0;
  padding: 4px 8px;
  font-size: 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.ant-code-block-lang {
  position: absolute;
  top: 8px; left: 12px;
  font-size: 10px;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: inherit;
}

/* ============================================================
   DASHBOARD / CONVERSATIONS / INBOX / COPILOT — common bits
============================================================ */

/* KPI big-number cards (dashboard) */
.ant-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ant-kpi-card {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 14px 16px;
}
.ant-kpi-label {
  font-size: 12px; color: rgba(0,0,0,.45);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.ant-kpi-value {
  font-size: 24px; font-weight: 700;
  color: rgba(0,0,0,.88);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ant-kpi-delta {
  font-size: 11px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 2px;
  margin-top: 4px;
}
.ant-kpi-delta.is-up { color: #389e0d; }
.ant-kpi-delta.is-down { color: #cf1322; }

/* Line chart (svg-based, simpler than mini-chart bars) */
.ant-line-chart {
  width: 100%;
  height: 160px;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 14px 16px;
  position: relative;
}
.ant-line-chart-svg { width: 100%; height: 100%; overflow: visible; }
.ant-line-chart-fill { fill: rgba(22,119,255,.1); }
.ant-line-chart-stroke { fill: none; stroke: #1677ff; stroke-width: 2; }
.ant-line-chart-dot { fill: #1677ff; r: 3; }
.ant-line-chart-grid line { stroke: #f0f0f0; stroke-dasharray: 2 3; }

/* Donut / pie chart */
.ant-donut-legend {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px;
}
.ant-donut-legend-item {
  display: flex; align-items: center; gap: 8px;
}
.ant-donut-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Channel icon (FB / LINE / WhatsApp / Web / Email) */
.ant-channel-icon {
  width: 18px; height: 18px;
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: white;
  flex-shrink: 0;
}

/* Conversation list item (ConversationsIndex) */
.ant-conv-list {
  display: flex; flex-direction: column;
  background: white;
  border-right: 1px solid #f0f0f0;
  overflow: auto;
  flex-shrink: 0;
}
.ant-conv-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background 180ms ease;
  position: relative;
}
.ant-conv-item:hover { background: #fafafa; }
.ant-conv-item.is-active { background: #e6f4ff; }
.ant-conv-item.is-active::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: #1677ff;
}
.ant-conv-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  color: white;
  flex-shrink: 0;
  position: relative;
}
.ant-conv-avatar-channel {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 16px; height: 16px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: white;
  border: 2px solid white;
}
.ant-conv-meta {
  flex: 1; min-width: 0;
}
.ant-conv-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.ant-conv-name {
  font-size: 13px; font-weight: 600;
  color: rgba(0,0,0,.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ant-conv-time {
  font-size: 11px; color: rgba(0,0,0,.45);
  flex-shrink: 0;
}
.ant-conv-preview {
  font-size: 12px; color: rgba(0,0,0,.65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ant-conv-tags {
  display: flex; gap: 4px; margin-top: 4px;
}
.ant-conv-unread {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1677ff;
  flex-shrink: 0;
}

/* Chat thread (admin viewing conversation) */
.ant-chat-thread {
  flex: 1;
  display: flex; flex-direction: column;
  background: #fafafa;
  overflow: hidden;
}
.ant-chat-thread-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.ant-chat-thread-body {
  flex: 1;
  overflow: auto;
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.ant-msg {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
}
.ant-msg-customer {
  align-self: flex-start;
  background: white;
  border: 1px solid #f0f0f0;
  color: rgba(0,0,0,.88);
}
.ant-msg-bot {
  align-self: flex-end;
  background: #e6f4ff;
  border: 1px solid #91caff;
  color: #003a8c;
}
.ant-msg-agent {
  align-self: flex-end;
  background: #1677ff;
  color: white;
}
.ant-msg-meta {
  font-size: 10px;
  color: rgba(0,0,0,.45);
  margin-top: 2px;
  display: flex; align-items: center; gap: 4px;
}
.ant-msg-bot + .ant-msg-meta,
.ant-msg-agent + .ant-msg-meta {
  align-self: flex-end;
}
.ant-msg-customer + .ant-msg-meta {
  align-self: flex-start;
}

/* Copilot side panel */
.ant-copilot-panel {
  width: 320px;
  background: white;
  border-left: 1px solid #f0f0f0;
  display: flex; flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.ant-copilot-section {
  padding: 12px 14px;
  border-bottom: 1px solid #f5f5f5;
}
.ant-copilot-section-title {
  font-size: 11px; font-weight: 700;
  color: rgba(0,0,0,.45);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 4px;
}
.ant-copilot-section-title iconify-icon { color: #1677ff; }
.ant-copilot-suggest {
  background: #f0f7ff;
  border: 1px solid #91caff;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(0,0,0,.85);
  cursor: pointer;
  transition: all 180ms ease;
  margin-bottom: 6px;
}
.ant-copilot-suggest:hover {
  background: #e6f4ff;
  border-color: #1677ff;
}
.ant-copilot-suggest-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px;
  color: #1677ff;
  margin-bottom: 4px;
  font-weight: 600;
}

/* Channel card (multi-channel inbox setup) */
.ant-channel-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  transition: all 200ms ease;
}
.ant-channel-card:hover { border-color: #91caff; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.ant-channel-logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: white;
  font-size: 22px;
}
.ant-channel-info { flex: 1; min-width: 0; }
.ant-channel-name {
  font-size: 15px; font-weight: 500;
  color: rgba(0,0,0,.88);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.ant-channel-meta {
  font-size: 12px; color: rgba(0,0,0,.45);
}

/* QR code placeholder (for LINE setup) */
.ant-qr-box {
  width: 160px; height: 160px;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.ant-qr-box > span {
  background: #1f1f1f;
  border-radius: 1px;
  aspect-ratio: 1;
}
.ant-qr-box > span.is-empty { background: transparent; }

/* ============================================================
   BOT-CREATE / SKILLS / LIVE-TRANSCRIPT / BILLING
============================================================ */

/* Bot list card grid */
.ant-bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ant-bot-card {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: all 200ms ease;
}
.ant-bot-card:hover { border-color: #91caff; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.ant-bot-card-head {
  display: flex; align-items: flex-start; gap: 10px;
}
.ant-bot-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-size: 18px;
  flex-shrink: 0;
}
.ant-bot-info { flex: 1; min-width: 0; }
.ant-bot-name {
  font-size: 14px; font-weight: 600;
  color: rgba(0,0,0,.88);
  display: flex; align-items: center; gap: 6px;
}
.ant-bot-desc {
  font-size: 12px; color: rgba(0,0,0,.45);
  margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ant-bot-stats {
  display: flex; gap: 14px;
  font-size: 11px; color: rgba(0,0,0,.45);
  padding-top: 8px;
  border-top: 1px solid #f5f5f5;
}
.ant-bot-stats > div { display: flex; align-items: center; gap: 3px; }
.ant-bot-stats strong { color: rgba(0,0,0,.88); font-variant-numeric: tabular-nums; }

/* Stepper / wizard for bot creation */
.ant-steps {
  display: flex; align-items: center; gap: 0;
  padding: 16px 0;
}
.ant-step {
  display: flex; align-items: center; gap: 8px;
  flex: 1;
}
.ant-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  background: #f5f5f5;
  color: rgba(0,0,0,.45);
  flex-shrink: 0;
}
.ant-step-num.is-done { background: #1677ff; color: white; }
.ant-step-num.is-active { background: white; color: #1677ff; border: 2px solid #1677ff; }
.ant-step-label {
  font-size: 12px;
  color: rgba(0,0,0,.45);
}
.ant-step.is-active .ant-step-label { color: rgba(0,0,0,.88); font-weight: 500; }
.ant-step.is-done .ant-step-label { color: rgba(0,0,0,.65); }
.ant-step-line {
  flex: 1;
  height: 1px;
  background: #f0f0f0;
  margin: 0 6px;
}
.ant-step-line.is-done { background: #1677ff; }

/* Live transcription specific */
.ant-rec-pulse {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff1f0;
  color: #ff4d4f;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  position: relative;
}
.ant-rec-pulse iconify-icon { animation: rec-pulse 1.5s ease-in-out infinite; }
@keyframes rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.92); }
}
.ant-waveform {
  display: flex; align-items: center; gap: 2px;
  height: 32px;
}
.ant-waveform > span {
  width: 3px;
  background: #1677ff;
  border-radius: 1px;
  animation: wave 1.2s ease-in-out infinite;
}
@keyframes wave {
  0%, 100% { height: 8px; opacity: .5; }
  50% { height: 28px; opacity: 1; }
}

/* Transcript line */
.ant-transcript-line {
  display: flex; gap: 12px;
  padding: 8px 0;
  font-size: 13px;
}
.ant-transcript-time {
  color: rgba(0,0,0,.45);
  font-variant-numeric: tabular-nums;
  width: 50px; flex-shrink: 0;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.ant-transcript-speaker {
  color: rgba(0,0,0,.65);
  font-weight: 500;
  min-width: 60px;
}
.ant-transcript-text { flex: 1; color: rgba(0,0,0,.88); line-height: 1.55; }

/* AI insight pin (live transcript) */
.ant-insight-pin {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 99px;
  font-weight: 600;
}
.ant-insight-pin.is-decision { background: #f0f7ff; color: #1677ff; }
.ant-insight-pin.is-action { background: #f6ffed; color: #389e0d; }
.ant-insight-pin.is-question { background: #fff7e6; color: #d48806; }

/* Billing — usage bar + credit */
.ant-usage-bar {
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}
.ant-usage-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1677ff, #69b1ff);
  border-radius: 4px;
}
.ant-usage-bar-fill.is-warn { background: linear-gradient(90deg, #fa8c16, #ffa940); }
.ant-usage-bar-fill.is-critical { background: linear-gradient(90deg, #ff4d4f, #ff7875); }

.ant-plan-card {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.ant-plan-card.is-current {
  border-color: #1677ff;
  background: linear-gradient(135deg, #f0f7ff, white);
}
.ant-plan-name {
  font-size: 16px; font-weight: 600;
  color: rgba(0,0,0,.88);
}
.ant-plan-price {
  font-size: 28px; font-weight: 700;
  color: rgba(0,0,0,.88);
  font-variant-numeric: tabular-nums;
}
.ant-plan-price small {
  font-size: 12px; color: rgba(0,0,0,.45);
  font-weight: 400;
}
.ant-plan-features {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px;
  color: rgba(0,0,0,.65);
}
.ant-plan-features > div { display: flex; align-items: flex-start; gap: 6px; }
.ant-plan-features iconify-icon { color: #52c41a; font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ===== KB source picker (legacy — panel 1 centered card) ===== */
.mg-kb-picker {
  width: 480px; max-width: 90%;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 16px 40px -12px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.04);
}
.mg-kb-picker-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px;
  margin-bottom: 12px;
  color: #0f172a;
}
.mg-kb-picker-header iconify-icon { font-size: 18px; color: #7c3aed; }
.mg-kb-picker-actions {
  display: flex; gap: 6px;
  margin-bottom: 8px;
}
.mg-kb-pick-action {
  padding: 4px 12px;
  font-size: 11px; font-weight: 600;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
  transition: all 180ms ease;
}
.mg-kb-pick-action:hover { border-color: #cbd5e1; color: #0f172a; }
.mg-kb-pick-action.is-active {
  background: #eff6ff;
  color: var(--brand);
  border-color: rgba(37,99,235,.3);
}
.mg-kb-pick-list {
  display: flex; flex-direction: column;
  gap: 4px;
  margin: 8px -6px 12px;
}
.mg-kb-pick-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 180ms ease;
}
.mg-kb-pick-item:hover { background: #f8fafc; }
.mg-kb-pick-item.is-checked { background: #f5f3ff; }
.mg-kb-checkbox {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid #cbd5e1;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 180ms ease;
}
.mg-kb-pick-item.is-checked .mg-kb-checkbox {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}
.mg-kb-checkbox iconify-icon { font-size: 14px; }
.mg-kb-pick-meta { flex: 1; min-width: 0; }
.mg-kb-pick-name { font-size: 13px; font-weight: 600; color: #0f172a; }
.mg-kb-pick-desc { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.mg-kb-picker-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}
.mg-kb-pick-summary { font-size: 12px; color: #64748b; font-weight: 500; }
.mg-kb-apply {
  padding: 7px 18px;
  font-size: 12px; font-weight: 600;
}

/* ===== Compact scope bar (panel 2 — after applied) ===== */
.mg-kb-scope-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  background: #fafaff;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
  flex-wrap: wrap;
}
.mg-kb-scope-label { font-weight: 600; color: #64748b; }
.mg-kb-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: white;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}
.mg-kb-pill.is-on { border-color: rgba(37,99,235,.3); background: #eff6ff; color: var(--brand); }
.mg-kb-pill.is-off {
  opacity: .5;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.mg-kb-scope-edit {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #64748b;
  cursor: pointer;
}
.mg-kb-scope-edit:hover { color: var(--brand); }

/* Image reveal stack: shimmer placeholder shows first, generated image fades in on top */
.image-reveal-stack { width: 100%; }
.image-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #e0e7ff, #dbeafe);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.image-shimmer::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite linear;
}
.image-reveal {
  opacity: 0;
  transition: opacity 700ms ease;
}
.panel.is-active .image-reveal {
  opacity: 1;
  transition-delay: 1400ms;   /* hold the shimmer ~1.4s before revealing */
}
.mg-input-icons {
  display: flex; align-items: center; gap: 8px;
  color: #94a3b8;
}
.mg-input-icons iconify-icon { font-size: 18px; cursor: pointer; }
.mg-input-text {
  flex: 1;
  font-size: 14px; color: #94a3b8;
}
.mg-input-send {
  width: 32px; height: 32px;
  background: #cbd5e1; color: white;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms ease, transform 200ms ease;
}
.mg-input-send.is-ready { background: #2563eb; }
.mg-input-send.is-ready:hover { transform: scale(1.05); }

/* Active input row (when user is typing in it) */
.mg-input-row-active {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 4px 16px -8px rgba(15,23,42,.12);
}

/* Right panel (sources / canvas / output) — slides in */
.mg-right-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 380px;
  background: white;
  border-left: 1px solid #ececf2;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 500ms cubic-bezier(.5, .05, .35, 1);
}
.mg-right-panel.is-open { transform: translateX(0); }
.mg-right-panel-header {
  height: 56px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #ececf2;
  font-size: 13px; font-weight: 600; color: #0f172a;
}
.mg-right-panel-body { flex: 1; overflow: auto; padding: 16px 20px; }

/* Connector card (used in maigpt connectors page) */
.mg-connector-card {
  border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 14px;
  background: white;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  transition: all 300ms ease;
}
.mg-connector-card.is-on { border-color: #10b981; background: #f0fdf4; }
.mg-connector-status {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
}
.mg-connector-status.is-on { background: #dcfce7; color: #166534; }
.mg-connector-status.is-off { background: #f1f5f9; color: #94a3b8; }

/* ============================================================
   Animated cursor (MaiAgent brand-styled)
============================================================ */
.ma-cursor {
  position: absolute;
  left: -60px;
  top: 50%;
  width: 36px;
  height: 36px;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition:
    left 1500ms cubic-bezier(.5, .05, .35, 1),
    top  1500ms cubic-bezier(.5, .05, .35, 1),
    opacity 300ms ease;
  will-change: left, top, transform;
}
.ma-cursor.is-visible { opacity: 1; }

.ma-cursor svg {
  width: 100%; height: 100%;
  filter:
    drop-shadow(0 4px 10px rgba(15,23,42,.32))
    drop-shadow(0 1px 2px rgba(15,23,42,.18));
  transition: transform 300ms cubic-bezier(.4,0,.2,1);
}
.ma-cursor.is-clicking svg {
  animation: cursor-press 320ms cubic-bezier(.4,0,.2,1);
}
@keyframes cursor-press {
  0%   { transform: scale(1) rotate(0); }
  35%  { transform: scale(0.78) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Click ripple */
.ma-cursor::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 99px;
  border: 2.5px solid rgba(37, 99, 235, .55);
  background: rgba(37, 99, 235, .14);
  opacity: 0;
  pointer-events: none;
}
.ma-cursor.is-clicking::before {
  animation: cursor-ripple 580ms cubic-bezier(.2, .6, .35, 1) forwards;
}
@keyframes cursor-ripple {
  0%   { opacity: 1; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(3.2); }
}

/* Target press feedback */
.cursor-pressed {
  transition: transform 160ms cubic-bezier(.4,0,.2,1), box-shadow 160ms ease;
  transform: scale(0.97);
}

/* ============================================================
   Utilities
============================================================ */
.text-center { text-align: center; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; }
.mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; }

/* ============================================================
   MOBILE / TABLET RWD
============================================================ */

/* Hamburger toggle — only shown on small screens */
.sc-hamburger {
  display: none;
  position: fixed; top: 12px; left: 12px;
  z-index: 60;
  width: 40px; height: 40px;
  background: white; border: 1px solid #e2e8f0; border-radius: 10px;
  align-items: center; justify-content: center;
  cursor: pointer; color: #0f172a;
  box-shadow: 0 4px 12px -4px rgba(15,23,42,.15);
}
.sc-hamburger iconify-icon { font-size: 22px; }
.sc-sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 49;
}
body.is-sidebar-open .sc-sidebar-overlay { display: block; }

@media (max-width: 1024px) {
  body { padding-left: 0; }
  .sc-sidebar {
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(.4,.0,.2,1);
    box-shadow: 4px 0 24px -8px rgba(15,23,42,.18);
  }
  body.is-sidebar-open .sc-sidebar { transform: translateX(0); }
  .sc-hamburger { display: flex; }

  /* Topbar shifts right to make room for hamburger */
  .sc-scenario-topbar { padding-left: 64px; }

  /* Hero scales down */
  .sc-home-hero { padding: 80px 24px 24px; }
  .sc-home-title { font-size: 32px; }
  .sc-home-sub { font-size: 16px; }

  /* Stepper stacks below stage */
  .scenario-meta-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .scenario-stage-wrap { padding: 16px 24px 60px; }
  .scenario-hero { padding: 80px 24px 16px; }
  .scenario-hero h2 { font-size: 28px; }

  /* Hero demo block */
  .sc-hero-demo { margin: 0 16px; padding: 16px; }
  .hero-demo-frame { aspect-ratio: 16 / 10; }

  /* Cards: 2 column */
  .sc-cards { grid-template-columns: repeat(2, 1fr); padding: 16px 24px; gap: 16px; }
}

@media (max-width: 640px) {
  .sc-home-title { font-size: 26px; }
  .sc-home-stats { flex-wrap: wrap; gap: 16px; }
  .sc-home-stats > div { flex: 1; min-width: 100px; }
  .scenario-hero h2 { font-size: 22px; }
  .scenario-hero p { font-size: 14px; }

  /* Cards: 1 column */
  .sc-cards { grid-template-columns: 1fr; padding: 12px 16px; }

  /* Topbar wraps */
  .sc-scenario-topbar {
    flex-wrap: wrap; gap: 8px;
    padding: 12px 16px 12px 56px;
  }
  .sc-topbar-actions { width: 100%; }

  /* CTA pill smaller */
  .stage-cta { font-size: 12px; padding: 8px 14px; bottom: 12px; }

  /* Replay/stepper indent reduces */
  .step-replay { margin-left: 56px; }

  /* Hide hero demo dots labels — too cramped */
  .hero-demo-label { font-size: 12px; }

  /* Scenario hero eyebrow + title margin tighter */
  .scenario-hero { padding: 72px 16px 12px; }
}