/* ============== EGLE — Design Tokens (built on OWLE design language) ============== */
:root {
  /* Brand — PAI Chat teal */
  --primary: #1fc0ab;
  --primary-end: #7df0e0;
  --primary-hover: #28d7be;
  --primary-active: #15a892;
  --primary-light: #4ad8c4;
  --primary-muted-bg: #0a201d;
  --primary-subtle: rgba(31, 192, 171, 0.14);
  --primary-ring: rgba(31, 192, 171, 0.35);

  /* Backgrounds */
  --bg-deep: #000000;
  --bg-base: #18181b;
  --bg-surface: #1f1f22;
  --bg-elevated: #27272a;
  --bg-hover: #2a2a2e;
  --bg-interactive: #3f3f47;
  --bg-sidebar: #18181b;
  --bg-overlay: rgba(24, 24, 27, 0.80);
  --bg-scrim: rgba(0, 0, 0, 0.60);

  /* Shell hierarchy: sidebar+topbar (darkest) -> aux sidebar -> body (lightest) */
  --shell-bar: #000000;
  --shell-aux: #141418;
  --shell-body: #1f1f25;

  /* Borders */
  --border: #27272a;
  --border-strong: #3f3f47;
  --border-input: #4a4a51;
  --border-row: #1f1f22;
  --border-accent: rgba(31, 192, 171, 0.30);

  /* Text */
  --text-heading: #fafafa;
  --text-primary: #e5e5e5;
  --text-secondary: #d4d4d8;
  --text-tertiary: #a3a3a3;
  --text-quaternary: #71717a;
  --text-muted: #52525c;
  --text-placeholder: rgba(229, 229, 229, 0.50);
  --text-on-primary: #ffffff;

  /* Status — Success */
  --success-bg: #052e16;
  --success-fg: #4ade80;
  --success-border: #14532d;
  --success-ring: rgba(74, 222, 128, 0.22);

  /* Status — Warning */
  --warning-bg: #1c1400;
  --warning-fg: #fbbf24;
  --warning-border: #3f2e00;

  /* Status — Queue (sky blue, used for "Indexed", "Synced") */
  --queue-bg: #0f172a;
  --queue-fg: #7dd3fc;
  --queue-border: #1e293b;

  /* Status — Error */
  --error-bg: #1f0a0a;
  --error-fg: #f87171;
  --error-border: #3f1010;
  --error-ring: rgba(248, 113, 113, 0.22);

  /* Status — Purple (used for Pro / Premium) */
  --purple-bg: #1a0a3e;
  --purple-fg: #c084fc;
  --purple-border: #2e1065;

  /* Status — Info */
  --info-bg: #0c1a2e;
  --info-fg: #93c5fd;
  --info-border: #1e3a5f;

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

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Typography */
  --font-size-2xs: 10px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;

  --hero-fade-rgb: 0, 0, 0;
  --section-label: #494847;
}

/* ============== LIGHT THEME ============== */
:root[data-theme="light"] {
  --primary: #1fc0ab;
  --primary-end: #15a892;
  --primary-hover: #15a892;
  --primary-active: #0e8a78;
  --primary-light: #7df0e0;
  --primary-muted-bg: #eafaf6;
  --primary-subtle: rgba(31, 192, 171, 0.08);
  --primary-ring: rgba(31, 192, 171, 0.25);

  --bg-deep: #f0f0f2;
  --bg-base: #f7f7f8;
  --bg-surface: #ededee;
  --bg-elevated: #ffffff;
  --bg-hover: #f4f4f5;
  --bg-interactive: #e4e4e7;
  --bg-sidebar: #fafafa;
  --bg-overlay: rgba(255, 255, 255, 0.85);
  --bg-scrim: rgba(24, 24, 27, 0.40);

  /* Shell hierarchy: sidebar+topbar (darkest) -> aux sidebar -> body (lightest) */
  --shell-bar: #ebebee;
  --shell-aux: #f4f4f6;
  --shell-body: #ffffff;

  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --border-input: #d4d4d8;
  --border-row: #f4f4f5;
  --border-accent: rgba(31, 192, 171, 0.25);

  --text-heading: #09090b;
  --text-primary: #18181b;
  --text-secondary: #27272a;
  --text-tertiary: #52525c;
  --text-quaternary: #71717a;
  --text-muted: #a3a3a3;
  --text-placeholder: rgba(82, 82, 92, 0.60);
  --text-on-primary: #ffffff;

  --success-bg: #ecfdf5;
  --success-fg: #059669;
  --success-border: #a7f3d0;
  --warning-bg: #fffbeb;
  --warning-fg: #b45309;
  --warning-border: #fde68a;
  --queue-bg: #eff6ff;
  --queue-fg: #0369a1;
  --queue-border: #bfdbfe;
  --error-bg: #fef2f2;
  --error-fg: #dc2626;
  --error-border: #fecaca;
  --purple-bg: #faf5ff;
  --purple-fg: #7e22ce;
  --purple-border: #e9d5ff;
  --info-bg: #eff6ff;
  --info-fg: #1d4ed8;
  --info-border: #bfdbfe;

  --hero-fade-rgb: 250, 250, 250;
  --section-label: #a1a1aa;
}

/* ============== RESET ============== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-deep); color: var(--text-heading); }
body {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; outline: none; }
.icon { width: 24px; height: 24px; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ============== APP LAYOUT ============== */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  background: var(--bg-deep);
}

/* Logo (used in top-nav and auth) */
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-img {
  display: block;
  height: 22px;
  width: auto;
  content: url('images/logo-egle-dark.svg');
}
:root[data-theme="light"] .logo-img {
  content: url('images/logo-egle-light.svg');
}
.logo-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-end) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.logo-text {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-heading);
}

/* ============== TOP NAV (global header) ============== */
.topbar {
  position: sticky;
  top: 0;
  height: 64px;
  padding: 0 24px;
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: 24px; min-width: 0; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Top nav list */
.top-nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.top-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 36px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.top-nav-item:hover { background: var(--bg-elevated); color: var(--text-secondary); }
:root[data-theme="light"] .top-nav-item:hover { background: var(--bg-hover); }
.top-nav-item.active {
  background: var(--primary-muted-bg);
  color: var(--text-heading);
}
.top-nav-item.active svg { color: var(--primary); }
.top-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; transition: color 0.15s; }

/* Vertical divider in topbar */
.topbar-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}

/* Topbar title (used on simple pages without breadcrumbs) */
.topbar-title { display: none; }

/* Split usage pill — info segment (neutral) + Upgrade button nested inside with 2px inset */
.usage-pill {
  display: inline-flex;
  align-items: stretch;
  height: 36px;
  padding: 2px;
  gap: 2px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 9999px;
  text-decoration: none;
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.usage-pill:hover { border-color: var(--border-strong); }

.usage-pill-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 2px;
  border-radius: 9999px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.usage-pill-info:hover { background: var(--bg-elevated); }

.usage-pill-cta {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 9999px;
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-decoration: none;
  transition: filter 0.15s;
  white-space: nowrap;
}
.usage-pill-cta:hover { filter: brightness(1.1); }
.usage-pill-icon {
  position: relative;
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
}
.usage-pill-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.usage-pill-ring-bg {
  fill: none;
  stroke: var(--bg-elevated);
}
:root[data-theme="light"] .usage-pill-ring-bg { stroke: var(--bg-hover); }
.usage-pill-ring-fill {
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s ease;
}
.usage-pill-ring-fill.is-warning { stroke: var(--warning-fg); }
.usage-pill-ring-fill.is-error { stroke: var(--error-fg); }
.usage-pill-icon-glyph {
  position: relative;
  width: 11px; height: 11px;
  color: var(--primary);
  z-index: 1;
}
.usage-pill-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.usage-pill-pct {
  font-size: 11px; font-weight: 600;
  color: var(--text-heading);
}
.usage-pill-value {
  font-size: 10px;
  color: var(--text-quaternary);
}

/* Upgrade button — sits next to usage pill, matching 36px height */
.btn-upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s;
  flex-shrink: 0;
}
.btn-upgrade:hover { filter: brightness(1.1); }
.btn-upgrade svg { width: 12px; height: 12px; }

/* Breadcrumbs (used on detail pages, sit just above body) */
.breadcrumbs-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px 0;
}
.breadcrumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-quaternary);
}
.breadcrumbs a { color: var(--text-quaternary); transition: color 0.15s; }
.breadcrumbs a:hover { color: var(--text-secondary); }
.breadcrumbs-sep { color: var(--text-muted); }
.breadcrumbs-current { color: var(--text-heading); font-weight: 500; }

/* Topbar search */
.search {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 9999px;
  width: 240px; height: 36px;
  transition: border-color 0.15s, width 0.2s;
  flex-shrink: 0;
}
.search:focus-within { border-color: var(--border-strong); width: 280px; }
.search-icon { width: 14px; height: 14px; color: var(--text-quaternary); flex-shrink: 0; }
.search input {
  flex: 1; background: transparent; border: none;
  font-size: 13px; color: var(--text-primary);
  min-width: 0;
}
.search input::placeholder { color: var(--text-quaternary); }

/* Theme icon button (definition continues from above) */
}
.theme-icon-btn:hover { background: var(--bg-elevated); color: var(--text-heading); }
.theme-icon-btn svg { width: 16px; height: 16px; }
.theme-icon-btn .theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-icon-btn .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-btn .theme-icon-moon { display: block; }

/* Org picker (replaces "Acme Corp ▼") */
.org-picker-wrap { position: relative; }
.org-picker-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--text-secondary);
  font-size: 13px; font-weight: 500;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
  cursor: pointer;
}

/* ============== ACCOUNT PILL (combined org + user) ============== */
.account-pill-wrap { position: relative; flex-shrink: 0; }
.account-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 4px 12px 4px 5px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.account-pill:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}
.account-pill .org-emblem {
  width: 28px; height: 28px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-end) 100%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.account-pill .avatar {
  width: 28px; height: 28px;
  margin-left: -8px;
  border: 2px solid var(--bg-base);
  font-size: 11px;
  flex-shrink: 0;
}
.account-pill:hover .avatar { border-color: var(--bg-elevated); }
.account-pill .chev {
  width: 14px; height: 14px;
  color: var(--text-quaternary);
  margin-left: 4px;
  transition: transform 0.18s;
  flex-shrink: 0;
}
.account-pill-wrap.open .chev { transform: rotate(180deg); }

/* Account menu (large dropdown) */
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 300px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}
:root[data-theme="light"] .account-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); }
.account-pill-wrap.open .account-menu { display: flex; }

.account-menu-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-quaternary);
  text-transform: uppercase;
  padding: 8px 10px 4px;
}

.account-menu-ws-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}
.account-menu-ws-row:hover { background: var(--bg-elevated); color: var(--text-heading); }
.account-menu-ws-row.is-active { background: var(--primary-subtle); }
.account-menu-ws-row.is-active .account-menu-ws-name { color: var(--text-heading); }
.account-menu-ws-row .org-emblem {
  width: 28px; height: 28px;
  border-radius: 8px;
  font-size: 12px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-end) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}
.account-menu-ws-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-menu-ws-name {
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.2;
}
.account-menu-ws-meta {
  font-size: 11px; color: var(--text-quaternary);
  line-height: 1.2;
}
.account-menu-ws-check {
  width: 14px; height: 14px;
  color: var(--primary);
  flex-shrink: 0;
}

.account-menu-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  margin: 4px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.account-menu-user .avatar { width: 32px; height: 32px; font-size: 12px; }
.account-menu-user-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-menu-user-name { font-size: 13px; font-weight: 600; color: var(--text-heading); line-height: 1.2; }
.account-menu-user-email { font-size: 11px; color: var(--text-quaternary); line-height: 1.2; }
.org-picker-trigger:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-heading);
}
.org-picker-trigger .org-emblem {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-end) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.org-picker-trigger .chev { width: 14px; height: 14px; transition: transform 0.18s; }
.org-picker-wrap.open .org-picker-trigger .chev { transform: rotate(180deg); }

.org-picker-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}
:root[data-theme="light"] .org-picker-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); }
.org-picker-wrap.open .org-picker-menu { display: flex; }
.org-picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13px; font-weight: 500;
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
}
.org-picker-item:hover { background: var(--bg-elevated); color: var(--text-heading); }
.org-picker-item .org-emblem { width: 22px; height: 22px; }
.org-picker-item.active { background: var(--primary-subtle); color: var(--text-heading); }
.org-picker-item-meta {
  margin-left: auto;
  font-size: 11px; color: var(--text-quaternary);
}
.org-picker-divider { height: 1px; background: var(--border); margin: 4px 2px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  border-radius: 100px;
  font-size: 14px; font-weight: 500; line-height: 1;
  white-space: nowrap;
  transition: filter 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
  border: none;
}
.btn:hover { filter: brightness(1.1); }
.btn-primary { background: var(--primary); color: var(--text-on-primary); }
.btn-secondary {
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.btn-secondary:hover { filter: none; background: var(--bg-elevated); border-color: var(--border-input); color: var(--text-heading); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-heading);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.btn-ghost:hover { filter: none; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); color: var(--text-heading); }
.btn-danger { background: var(--error-fg); color: #fff; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 54px; padding: 0 8px 0 24px; font-size: 15px; font-weight: 500; gap: 10px; }
.btn-lg.btn-flat { padding: 0 26px; }
.btn-icon-left svg { width: 16px; height: 16px; }
.btn-block { width: 100%; }

/* Button-in-button — trailing circular arrow island */
.btn .btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), background 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.btn .btn-arrow svg { width: 14px; height: 14px; }
.btn-lg .btn-arrow { width: 36px; height: 36px; }
.btn-lg .btn-arrow svg { width: 15px; height: 15px; }
.btn:hover .btn-arrow { transform: translate(2px, -1px); background: rgba(255, 255, 255, 0.30); }
.btn-ghost .btn-arrow { background: rgba(255, 255, 255, 0.06); }
.btn-ghost:hover .btn-arrow { background: rgba(255, 255, 255, 0.14); }
.btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 14px 36px -18px var(--primary-ring); }
.btn-primary:hover { background: var(--primary-hover); }
.btn:active { transform: scale(0.98); }

/* Back button (used on detail pages) */
.back-btn {
  width: 32px; height: 32px;
  border-radius: 9999px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.back-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-heading); }
.back-btn svg { width: 16px; height: 16px; }

/* Icon button (32–40px circle) */
.icon-btn {
  width: 38px; height: 38px;
  border-radius: 9999px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-heading); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn-sm { width: 32px; height: 32px; }
.icon-btn-sm svg { width: 14px; height: 14px; }

/* Avatar */
.avatar {
  width: 36px; height: 36px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-end) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  outline: none;
  text-transform: uppercase;
}
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 36px; height: 36px; font-size: 12px; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.avatar:focus-visible { box-shadow: 0 0 0 2px var(--primary-ring); }
.avatar-emerald { background: linear-gradient(135deg, #34d399 0%, #059669 100%); color: #fff; }
.avatar-amber { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); color: #fff; }
.avatar-rose { background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); color: #fff; }

/* Profile dropdown (reused) */
.profile-wrap { position: relative; }
.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}
:root[data-theme="light"] .profile-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); }
.profile-wrap.open .profile-menu { display: flex; }
.profile-header {
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--border);
  margin: -2px 0 4px;
}
.profile-header-name { font-size: 14px; font-weight: 600; color: var(--text-heading); margin-bottom: 2px; }
.profile-header-email { font-size: 12px; color: var(--text-quaternary); }
.profile-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 14px; font-weight: 500;
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}
.profile-item:hover { background: var(--bg-elevated); color: var(--text-heading); }
.profile-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-quaternary); }
.profile-item:hover svg { color: var(--text-heading); }
.profile-item.is-danger { color: var(--error-fg); }
.profile-item.is-danger svg { color: var(--error-fg); }
.profile-item.is-danger:hover { background: var(--error-bg); }
.profile-divider { height: 1px; background: var(--border); margin: 4px 2px; }

/* New Chatbot dropdown — like OWLE new-job */
.new-job-wrap { position: relative; }
.new-job-trigger { gap: 6px; }
.new-job-trigger .chev { width: 14px; height: 14px; transition: transform 0.18s; }
.new-job-wrap.open .new-job-trigger .chev { transform: rotate(180deg); }
.new-job-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}
:root[data-theme="light"] .new-job-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); }
.new-job-wrap.open .new-job-menu { display: flex; }
.new-job-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
}
.new-job-item:hover { background: var(--bg-elevated); color: var(--text-heading); }
.new-job-item-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-light);
  flex-shrink: 0;
}
.new-job-item:hover .new-job-item-icon { background: var(--primary-subtle); color: var(--primary); }
.new-job-item-icon svg { width: 16px; height: 16px; }
.new-job-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.new-job-item-title { font-size: 14px; font-weight: 500; color: var(--text-heading); line-height: 1.2; }
.new-job-item-sub { font-size: 12px; color: var(--text-quaternary); line-height: 1.2; }

/* ============== MAIN ============== */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background: var(--bg-base);
  position: relative;
}
/* Inner pages (no activity sidebar) — drop the grey body background */
.main:not(:has(.body-with-side)) {
  background: var(--bg-deep);
}
/* Two-tone split layout — only on screens that have a right-side activity panel */
.main:has(.body-with-side) {
  background: var(--bg-deep);
}
.main:has(.body-with-side)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 364px;
  background: var(--bg-base);
  border-radius: 0 24px 24px 0;
  pointer-events: none;
  z-index: 0;
}
.main > * { position: relative; z-index: 1; }

/* ============== BODY ============== */
.body {
  flex: 1;
  padding: 24px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
/* Constrain inner page bodies to 1360px max — skip the dashboard which uses .body-with-side */
.body:not(:has(.body-with-side)) {
  max-width: 1360px;
  margin: 0 auto;
}

/* Card & row elevation — bumped one tier so they stay distinct on the body's bg-base surface */
.card,
.stat-card,
.bot-card,
.table-row:not(.table-row-head),
.kb-row,
.role-card,
.pm-row,
.activity-row,
.account-menu,
.profile-menu,
.new-job-menu,
.org-picker-menu {
  background: var(--bg-surface);
}

/* Strip default 1px strokes from filled cards/rows — fill alone provides separation. */
/* Components that use border for state (wizard-choice, model-card, feat-card, notice) keep theirs. */
.card,
.stat-card,
.table-row:not(.table-row-head),
.kb-row,
.role-card,
.activity-row {
  border: 0;
}
.table-row.is-link:hover,
.kb-row:hover,
.activity-row:hover {
  background: var(--bg-elevated);
}
/* Cards on bg-base hover should also step up */
a.stat-card:hover,
.bot-card:hover {
  background: var(--bg-elevated);
}

/* Two-column layout: main content + right sidebar */
.body-with-side {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
  flex: 1;
}
.body-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.body-side {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 96px);
}

/* Right activity sidebar — sits on body surface, no card chrome */
.activity-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100vh - 96px);
}
.activity-panel-head {
  padding: 18px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.activity-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.activity-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
  letter-spacing: -0.1px;
}
.activity-panel-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
}
.activity-panel-link:hover { color: var(--primary-hover); }
.activity-panel-sub {
  font-size: 12px;
  color: var(--text-quaternary);
  line-height: 1.4;
  margin: 0;
}

/* Activity filters (dropdowns) */
.activity-filters {
  display: flex;
  gap: 6px;
  padding: 8px 14px 12px;
  flex-shrink: 0;
}
.activity-filter-select { position: relative; flex: 1; min-width: 0; }
.activity-filter-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 32px;
  padding: 0 8px 0 10px;
  background: var(--bg-elevated);
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.activity-filter-trigger:hover {
  background: var(--bg-hover);
  color: var(--text-heading);
}
.activity-filter-trigger-label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-filter-trigger > svg:first-child {
  width: 12px; height: 12px;
  flex-shrink: 0;
  color: var(--text-quaternary);
}
.activity-filter-trigger-chev {
  width: 12px; height: 12px;
  color: var(--text-quaternary);
  flex-shrink: 0;
  transition: transform 0.18s;
}
.activity-filter-select.open .activity-filter-trigger-chev { transform: rotate(180deg); }
.activity-filter-select.open .activity-filter-trigger {
  background: var(--bg-hover);
  color: var(--text-heading);
}

.activity-filter-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 20;
}
:root[data-theme="light"] .activity-filter-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); }
.activity-filter-select.open .activity-filter-menu { display: flex; }
.activity-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.activity-filter-option:hover {
  background: var(--bg-hover);
  color: var(--text-heading);
}
.activity-filter-option.is-selected {
  background: var(--primary-subtle);
  color: var(--text-heading);
}
.activity-filter-option-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-quaternary);
  font-variant-numeric: tabular-nums;
}
.activity-filter-option.is-selected .activity-filter-option-count { color: var(--primary-light); }

/* Activity list inside sidebar (compact, divider-style) */
.activity-side-list {
  display: flex;
  flex-direction: column;
  padding: 4px 14px 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.activity-side-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  align-items: center;
}
:root[data-theme="light"] .activity-side-row {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.activity-side-row:last-child { border-bottom: none; }
.activity-side-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-surface) !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
}
:root[data-theme="light"] .activity-side-icon {
  background: var(--bg-surface) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.activity-side-icon svg { width: 14px; height: 14px; }
.activity-side-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.activity-side-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-heading);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-side-bot {
  font-size: 11px;
  color: var(--text-quaternary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-side-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Page header (heading + subhead + CTA row) */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 0;
  margin-bottom: 4px;
}
.page-header-left { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.page-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1;
  color: var(--text-heading);
  margin: 0;
}
.page-subtitle {
  font-size: 13px;
  color: var(--text-quaternary);
  line-height: 1.4;
  margin: 0;
}
.page-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Section heading (cards groupings) */
.section-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-quaternary);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  padding: 0 4px;
  margin: 0;
}

/* Notice banner (replaces "Basic plan: 1 of 1 chatbot slots used") */
.notice {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--primary-subtle);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-size: 13px;
}
.notice-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--primary-muted-bg);
  color: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.notice-icon svg { width: 14px; height: 14px; }
.notice strong { color: var(--text-heading); font-weight: 600; }
.notice a { color: var(--primary); font-weight: 500; }
.notice a:hover { text-decoration: underline; }
.notice-cta { margin-left: auto; flex-shrink: 0; }

/* ============== CARDS ============== */
.card {
  background: var(--bg-base);
  border: 0;
  border-radius: 24px;
  padding: 17px;
}
.card-pad-lg { padding: 24px; }
.card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-heading);
  margin: 0;
  letter-spacing: -0.1px;
}
.card-subtitle {
  font-size: 12px;
  color: var(--text-quaternary);
  margin: 4px 0 0;
  line-height: 1.4;
}
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.card-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ============== PRO UPGRADE BANNER ============== */
.pro-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 380px;
  align-items: center;
  gap: 32px;
  background:
    radial-gradient(ellipse 80% 60% at 100% 50%, rgba(74, 216, 196, 0.45), transparent 60%),
    radial-gradient(ellipse 100% 80% at 0% 100%, rgba(31, 192, 171, 0.55), transparent 70%),
    linear-gradient(135deg, #0a1f3d 0%, #0a0a0e 100%);
  border-radius: 24px;
  padding: 36px 40px;
  overflow: hidden;
  text-decoration: none;
  min-height: 240px;
  transition: transform 0.18s ease;
}
.pro-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 12px);
  pointer-events: none;
}
.pro-banner:hover {
  transform: translateY(-2px);
}
.pro-banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 480px;
}
.pro-banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.10);
  padding: 5px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.pro-banner-eyebrow svg { width: 12px; height: 12px; }
.pro-banner-title {
  font-family: 'Geist', sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.8px;
  line-height: 1.02;
  text-transform: uppercase;
}
.pro-banner-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  line-height: 1.5;
  max-width: 460px;
}
.pro-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #1fc0ab;
  padding: 0 20px;
  height: 42px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  margin-top: 4px;
  transition: filter 0.15s, transform 0.15s;
}
.pro-banner:hover .pro-banner-cta { filter: brightness(0.95); }
.pro-banner-cta svg { width: 14px; height: 14px; }
.pro-banner-cta-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(31, 192, 171, 0.12);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pro-banner-cta-icon svg { width: 10px; height: 10px; }

/* Visual side: floating mock UI elements */
.pro-banner-visual {
  position: relative;
  height: 100%;
  min-height: 200px;
  z-index: 2;
}
.pro-mock {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 12px 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
}
.pro-mock-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pro-mock-icon svg { width: 14px; height: 14px; }
.pro-mock-meta { font-size: 10px; color: rgba(255,255,255,0.55); margin-top: 2px; font-weight: 400; }
.pro-mock-text { display: flex; flex-direction: column; min-width: 0; }
.pro-mock-1 {
  top: 12px;
  right: 32px;
  transform: rotate(-3deg);
}
.pro-mock-1 .pro-mock-icon { background: rgba(74, 216, 196, 0.20); color: #4ad8c4; }
.pro-mock-2 {
  top: 90px;
  right: 140px;
  transform: rotate(2deg);
}
.pro-mock-2 .pro-mock-icon { background: rgba(94, 234, 212, 0.18); color: #5eead4; }
.pro-mock-3 {
  bottom: 16px;
  right: 0;
  transform: rotate(-1deg);
}
.pro-mock-3 .pro-mock-icon { background: rgba(192, 132, 252, 0.20); color: #c084fc; }

/* Sparkle decorations */
.pro-banner-sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  color: rgba(255, 255, 255, 0.35);
}
.pro-banner-sparkle-1 { top: 18%; right: 56%; width: 16px; height: 16px; }
.pro-banner-sparkle-2 { bottom: 28%; right: 70%; width: 12px; height: 12px; color: rgba(74, 216, 196, 0.5); }

@media (max-width: 1280px) {
  .pro-banner { grid-template-columns: 1fr; }
  .pro-banner-visual { display: none; }
}

/* ============== OVERVIEW CARD (legend + weekly chart) ============== */
.overview-card {
  padding: 0;
  overflow: hidden;
  background: #131316;
  border: none;
}
:root[data-theme="light"] .overview-card { background: #ededee; }
.overview-grid {
  display: grid;
  grid-template-columns: minmax(280px, 320px) 1fr;
}
.overview-info {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.overview-info::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(31, 192, 171, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 50% at 30% 100%, rgba(192, 132, 252, 0.08), transparent 70%);
  pointer-events: none;
  border-radius: inherit;
}
:root[data-theme="light"] .overview-info::before {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(31, 192, 171, 0.08), transparent 70%),
    radial-gradient(ellipse 60% 50% at 30% 100%, rgba(192, 132, 252, 0.05), transparent 70%);
}
.overview-info > * { position: relative; z-index: 1; }

.overview-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.overview-info-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--text-heading);
  margin: 0;
}
.overview-info-sub {
  font-size: 13px;
  color: var(--text-quaternary);
  line-height: 1.5;
  margin: 0 0 6px;
}
.overview-info-sub strong { color: var(--text-secondary); font-weight: 600; }

.overview-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.overview-legend li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
}
.overview-dot {
  width: 14px; height: 14px;
  border-radius: 5px;
  flex-shrink: 0;
}
.overview-legend strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
  letter-spacing: -0.1px;
  font-variant-numeric: tabular-nums;
}
.overview-legend-with-delta .legend-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.overview-legend-with-delta .legend-delta {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.overview-legend-with-delta .legend-delta.up { color: var(--success-fg); }
.overview-legend-with-delta .legend-delta.down { color: var(--error-fg); }

/* Horizontal legend variant — sits below chart in full-width Bot overview */
.overview-legend-horizontal {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 6px 0 0;
  margin: 0;
  border-top: 1px solid var(--border);
}
.overview-legend-horizontal li {
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0 0;
}
.overview-legend-horizontal .overview-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  margin-top: 4px;
}
.overview-legend-horizontal .legend-label-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.overview-legend-horizontal .legend-name {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.overview-legend-horizontal .legend-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.overview-legend-horizontal strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}
.overview-legend-horizontal .legend-delta {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.overview-legend-horizontal .legend-delta.up { color: var(--success-fg); }
.overview-legend-horizontal .legend-delta.down { color: var(--error-fg); }

/* Vertical-stack variant for full-width Bot overview */
.overview-card-full .overview-stack {
  display: flex;
  flex-direction: column;
}
.overview-card-full .overview-chart {
  min-height: 220px;
}

.overview-chart {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 240px;
}
.overview-chart-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.overview-chart-bars {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 12px;
  padding: 8px 8px 0;
}
.ov-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
}
.ov-day-label {
  font-size: 11px;
  color: var(--text-quaternary);
  letter-spacing: 0.3px;
}
.ov-bars-pair {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}
.ov-bar {
  width: 20px;
  height: 100%;
  border-radius: 8px;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  transition: filter 0.18s ease;
  position: relative;
}
.ov-bar-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: transparent;
  border-radius: 8px;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
}
/* All bars colored by default */
.ov-bar-seg { width: 100%; flex-shrink: 0; }
.ov-bar-seg.s-msg { background: var(--primary); }
.ov-bar-seg.s-ses { background: #fbbf24; }
.ov-bar-seg.s-tok { background: #4ad8c4; }
.ov-bar-seg.s-avg { background: #5eead4; }
.ov-day .ov-bar { filter: saturate(0.55) brightness(0.85); }
.ov-day:hover .ov-bar,
.ov-day.is-active .ov-bar { filter: saturate(1) brightness(1); }
.ov-day.is-active .ov-day-label { color: var(--text-heading); font-weight: 600; }

/* Tooltip — single shared element, positioned via JS */
.overview-chart-bars { position: relative; }
.ov-day { position: relative; cursor: pointer; }
.ov-tooltip {
  position: absolute;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 168px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.40);
  z-index: 5;
  display: none;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  transition: left 0.18s ease;
}
.ov-tooltip.is-shown { display: flex; }
:root[data-theme="light"] .ov-tooltip { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10); }
.ov-tooltip-date {
  font-size: 11px;
  color: var(--text-quaternary);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.ov-tooltip-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-tertiary);
}
.ov-tooltip-row .overview-dot { width: 10px; height: 10px; border-radius: 3px; }
.ov-tooltip-row strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1280px) {
  .overview-grid { grid-template-columns: 1fr; }
  .overview-info { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ============== STAT CARDS ============== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.stats-row-3 { grid-template-columns: repeat(3, 1fr); }
.stats-row-2 { grid-template-columns: repeat(2, 1fr); }
.stat-card {
  background: var(--bg-base);
  border: 0;
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 120px;
  transition: background 0.15s, border-color 0.15s;
}
a.stat-card { text-decoration: none; }
a.stat-card:hover { background: var(--bg-surface); border-color: var(--border-strong); }
a.stat-card:hover .stat-arrow { color: var(--text-heading); transform: translateX(2px); }
.stat-head { display: flex; align-items: center; gap: 10px; }
.stat-icon-wrap {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.stat-icon-wrap svg { width: 14px; height: 14px; }
.stat-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1;
  color: var(--text-quaternary);
  text-transform: uppercase;
}
.stat-arrow {
  margin-left: auto;
  width: 16px; height: 16px;
  color: var(--text-quaternary);
  transition: color 0.15s, transform 0.15s;
}
.stat-body { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-heading);
  letter-spacing: -0.5px;
}
.stat-delta {
  font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-quaternary);
}
.stat-delta.up { color: var(--success-fg); }
.stat-delta.down { color: var(--error-fg); }
.stat-delta svg { width: 12px; height: 12px; }
.stat-foot {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ============== BADGES ============== */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  font-size: 12px; font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border: none;
}
.badge svg { width: 11px; height: 11px; }
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-primary { background: var(--primary-subtle); color: var(--primary-light); }
.badge-success { background: var(--success-bg); color: var(--success-fg); }
.badge-warning { background: var(--warning-bg); color: var(--warning-fg); }
.badge-queue   { background: var(--queue-bg);   color: var(--queue-fg); }
.badge-error   { background: var(--error-bg);   color: var(--error-fg); }
.badge-purple  { background: var(--purple-bg);  color: var(--purple-fg); }
.badge-info    { background: var(--info-bg);    color: var(--info-fg); }
.badge-neutral { background: var(--bg-elevated); color: var(--text-tertiary); }

/* ============== TABLE — borderless wrapper, each row a card ============== */
.table-card {
  background: transparent;
  border: none;
  padding: 0;
}
.table-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 0 12px;
}
.table-head-text { display: flex; flex-direction: column; gap: 2px; }
.link-primary {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
}
.link-primary:hover { color: var(--primary-hover); }

.table { display: flex; flex-direction: column; gap: 6px; }
.table-row {
  display: grid;
  gap: 16px;
  padding: 14px 18px;
  align-items: center;
  background: var(--bg-base);
  border: 0;
  border-radius: 16px;
  transition: background 0.15s, border-color 0.15s;
}
.table-row.is-link { cursor: pointer; }
.table-row.is-link:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.table-row-head {
  cursor: default;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 18px 8px;
}
.table-row-head:hover { background: transparent; border-color: transparent; }
.table-row-head .col {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.col { font-size: 14px; color: var(--text-tertiary); line-height: 1.3; min-width: 0; }
.col-strong { color: var(--text-heading); font-weight: 500; }
.col-sub { font-size: 12px; color: var(--text-quaternary); margin-top: 2px; }
.col-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.col-actions .row-action {
  font-size: 13px; font-weight: 500;
  color: var(--text-quaternary);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  cursor: pointer;
}
.col-actions .row-action:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-heading);
}
.col-actions .row-action.is-danger { color: var(--error-fg); }
.col-actions .row-action.is-danger:hover { background: var(--error-bg); border-color: var(--error-border); color: var(--error-fg); }

/* Column variants for chat-bot rows */
.col-with-thumb { display: flex; align-items: center; gap: 12px; }
.bot-thumb {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-light);
  flex-shrink: 0;
  font-size: 18px;
}
.bot-thumb svg { width: 20px; height: 20px; }
.bot-thumb-emerald { background: rgba(52, 211, 153, 0.14); color: #34d399; }
.bot-thumb-amber { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
.bot-thumb-purple { background: rgba(192, 132, 252, 0.14); color: #c084fc; }
.bot-thumb-rose { background: rgba(251, 113, 133, 0.14); color: #fb7185; }

/* ============== FORM ============== */
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1;
}
.form-help {
  font-size: 12px;
  color: var(--text-quaternary);
  line-height: 1.4;
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.form-textarea {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
}
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-placeholder); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.form-input.is-mono, .form-textarea.is-mono { font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 13px; }

/* Toggle (switch) */
.toggle {
  position: relative;
  width: 38px; height: 22px;
  background: var(--bg-interactive);
  border-radius: 9999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle.is-on { background: var(--primary); }
.toggle.is-on::after { transform: translateX(16px); }
.toggle.is-disabled { opacity: 0.4; cursor: not-allowed; }
.toggle-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
}
.toggle-row + .toggle-row { border-top: 1px solid var(--border); }
.toggle-row-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.toggle-row-title { font-size: 14px; font-weight: 500; color: var(--text-heading); line-height: 1.2; }
.toggle-row-sub { font-size: 12px; color: var(--text-quaternary); line-height: 1.4; }
.toggle-row-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Slider */
.slider-row {
  display: flex; flex-direction: column; gap: 8px;
}
.slider-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-quaternary);
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 9999px;
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: var(--primary);
  border-radius: 50%;
  border: 3px solid var(--bg-base);
  box-shadow: 0 0 0 1px var(--primary);
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--primary);
  border-radius: 50%;
  border: 3px solid var(--bg-base);
  cursor: pointer;
}

/* Checkbox */
.checkbox-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 0;
}
.checkbox-row input { display: none; }
.check-box {
  width: 18px; height: 18px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-input);
  background: var(--bg-base);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
}
.check-box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity 0.12s; }
.checkbox-row input:checked ~ .check-box { background: var(--primary); border-color: var(--primary); }
.checkbox-row input:checked ~ .check-box svg { opacity: 1; }

/* Tabs (used on chatbot detail) — pill style */
.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 9999px;
  font-size: 13px; font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.tab:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}
.tab.active {
  color: var(--text-heading);
  background: var(--bg-elevated);
  font-weight: 600;
}
.tab.is-danger { color: var(--error-fg); }
.tab.is-danger:hover { background: var(--error-bg); color: var(--error-fg); }
.tab.is-danger.active { background: var(--error-bg); color: var(--error-fg); }

/* Tab panel */
.tab-panel { display: none; }
.tab-panel.active { display: flex; flex-direction: column; gap: 16px; }

/* Knowledge panel — flush cards (no frame around each section) */
.tab-panel[data-panel="knowledge"] > .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 8px 0 0;
}

/* ============== CHAT-BOT GRID (cards on dashboard) ============== */
.bots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.bot-card {
  background: var(--bg-elevated);
  border: none;
  border-radius: 24px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 0.18s ease, transform 0.18s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
}
.bot-card:hover {
  background: var(--bg-hover);
  transform: translateY(-2px);
}
.bot-card:active { transform: translateY(0); }
.bot-card > * { position: relative; z-index: 1; }

/* Top row: gradient thumb + status badge in corners */
.bot-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.bot-card-thumb {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-end) 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
  transition: transform 0.18s ease;
}
.bot-card:hover .bot-card-thumb { transform: scale(1.04); }
.bot-card-thumb svg { width: 26px; height: 26px; }

/* Per-bot gradient variants */
.bot-thumb-emerald {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
}
.bot-thumb-amber {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}
.bot-thumb-rose {
  background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
}

/* Info: name + type, vertical stack below thumb */
.bot-card-info { display: flex; flex-direction: column; gap: 4px; }
.bot-card-name {
  font-size: 16px; font-weight: 600;
  color: var(--text-heading);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.1px;
}
.bot-card-type {
  font-size: 12px; color: var(--text-quaternary);
  margin-top: 2px;
}
/* Stats: icon + value (compact, inline) */
.bot-card-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.bot-card-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  cursor: help;
}
.bot-card-stat-icon {
  width: 16px; height: 16px;
  color: var(--text-quaternary);
  flex-shrink: 0;
  display: inline-flex;
  transition: color 0.15s;
}
.bot-card-stat-icon svg { width: 16px; height: 16px; }
.bot-card-stat-value {
  font-size: 14px; font-weight: 600;
  color: var(--text-heading);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bot-card-stat:hover .bot-card-stat-icon { color: var(--text-secondary); }

/* Tooltip on stats — appears above on hover */
.bot-card-stat[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bg-deep);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-heading);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.40);
  z-index: 10;
  letter-spacing: 0.1px;
}
:root[data-theme="light"] .bot-card-stat[data-tooltip]::after {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}
.bot-card-stat[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--border-strong);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 10;
}
.bot-card-stat[data-tooltip]:hover::after,
.bot-card-stat[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Token usage: progress bar with inline value below */
.bot-card-usage {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: auto;
}
.bot-card-usage-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.bot-card-usage-label {
  color: var(--text-quaternary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.bot-card-usage-value {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.bot-card-progress {
  height: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  overflow: hidden;
}
:root[data-theme="light"] .bot-card-progress { background: rgba(0, 0, 0, 0.06); }
.bot-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-end) 100%);
  border-radius: 9999px;
}
.bot-card-actions {
  display: flex; gap: 8px;
}
.bot-card-actions .btn { flex: 1; }

/* Empty/locked bot card slot */
.bot-card-locked {
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  min-height: 224px;
}
.bot-card-locked-icon {
  width: 48px; height: 48px;
  border-radius: 9999px;
  background: var(--primary-subtle);
  color: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
}
.bot-card-locked-icon svg { width: 20px; height: 20px; }
.bot-card-locked-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.bot-card-locked-sub { font-size: 12px; color: var(--text-quaternary); }

/* ============== CHARTS ============== */
.chart-card { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.chart {
  display: flex;
  flex-direction: column;
  height: 260px;
}
.chart-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 0 0;
  min-height: 180px;
}
.bar-wrap {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.bar {
  width: 100%;
  background: var(--bg-elevated);
  border-radius: 6px 6px 0 0;
  position: relative;
  overflow: hidden;
  transition: filter 0.15s;
}
.bar-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--primary);
  border-radius: 6px 6px 0 0;
}
.bar-wrap:hover .bar-fill { filter: brightness(1.15); }
.bar-wrap:last-child .bar-fill { background: linear-gradient(180deg, var(--primary-end) 0%, var(--primary) 100%); }
.chart-axis {
  display: flex; justify-content: space-between;
  padding: 12px 0 0;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

/* Range pickers (segmented control) */
.range-picker {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}
.range-picker-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-quaternary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.range-picker-btn:hover { color: var(--text-secondary); }
.range-picker-btn[aria-pressed="true"] {
  background: var(--bg-base);
  color: var(--text-heading);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
:root[data-theme="light"] .range-picker-btn[aria-pressed="true"] { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }

/* Bar list (used in "By Chatbot" / "Top Questions") */
.bar-list { display: flex; flex-direction: column; gap: 14px; }
.bar-list-row { display: flex; flex-direction: column; gap: 6px; }
.bar-list-row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.bar-list-row-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-secondary);
  min-width: 0;
}
.bar-list-row-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-list-row-value {
  font-size: 13px; font-weight: 600;
  color: var(--text-heading);
}
.bar-list-row-track {
  height: 4px; width: 100%;
  background: var(--bg-elevated);
  border-radius: 9999px;
  overflow: hidden;
}
.bar-list-row-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 9999px;
}

/* Q list (top questions) */
.q-list { display: flex; flex-direction: column; gap: 4px; }
.q-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.q-row:last-child { border-bottom: none; }
.q-row-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-row-count {
  font-size: 12px; font-weight: 600;
  color: var(--text-quaternary);
  flex-shrink: 0;
}

/* Locked card overlay (Pro plan required) */
.locked-card { position: relative; overflow: hidden; }
.locked-card-content { filter: blur(8px); opacity: 0.6; pointer-events: none; user-select: none; }
.locked-overlay {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(24,24,27,0.4) 0%, rgba(24,24,27,0.85) 100%);
  border-radius: 24px;
  padding: 24px;
}
:root[data-theme="light"] .locked-overlay {
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.9) 100%);
}
.locked-icon {
  width: 44px; height: 44px;
  border-radius: 9999px;
  background: var(--primary-subtle);
  color: var(--primary-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.locked-icon svg { width: 18px; height: 18px; }
.locked-title { font-size: 14px; font-weight: 700; color: var(--text-heading); margin: 0; }
.locked-sub { font-size: 12px; color: var(--text-quaternary); max-width: 280px; line-height: 1.5; margin: 0 0 8px; }

/* ============== KNOWLEDGE BASE FILES (chatbot detail) ============== */
.kb-list { display: flex; flex-direction: column; gap: 8px; }
.kb-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-base);
  border: 0;
  border-radius: 14px;
  transition: background 0.15s, border-color 0.15s;
}
.kb-row:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.kb-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
}
.kb-icon svg { width: 18px; height: 18px; }
.kb-row-name {
  font-size: 14px; font-weight: 500;
  color: var(--text-heading);
  line-height: 1.2;
  margin-bottom: 4px;
}
.kb-row-meta {
  font-size: 11px; color: var(--text-quaternary);
  line-height: 1;
}

/* ============== EMBED CODE BOX ============== */
.code-box {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  overflow-x: auto;
  position: relative;
}
.code-box code { color: var(--primary-light); }
.code-box .code-copy {
  position: absolute;
  top: 8px; right: 8px;
}

/* ============== WIDGET PREVIEW ============== */
.widget-preview {
  background: var(--bg-elevated);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 380px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}
.widget-preview-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, var(--primary-subtle), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(192, 132, 252, 0.10), transparent 50%);
  opacity: 0.7;
}
.widget-preview-window {
  position: relative;
  width: 320px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.16);
}
:root[data-theme="light"] .widget-preview-window { box-shadow: 0 24px 48px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.06); }
.widget-preview-header {
  padding: 14px 16px;
  background: var(--primary);
  color: #fff;
}
.widget-preview-title { font-size: 14px; font-weight: 600; margin: 0; }
.widget-preview-status {
  font-size: 11px; opacity: 0.85;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
}
.widget-preview-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}
.widget-preview-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.widget-preview-msg {
  background: var(--bg-elevated);
  padding: 10px 12px;
  border-radius: 12px 12px 12px 4px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  max-width: 80%;
}
.widget-preview-chip {
  align-self: flex-end;
  background: var(--primary-subtle);
  color: var(--primary);
  padding: 8px 12px;
  border-radius: 12px 12px 4px 12px;
  font-size: 13px;
  font-weight: 500;
}
.widget-preview-input {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.widget-preview-input-field {
  flex: 1;
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  padding: 0 12px;
  font-size: 12px;
  color: var(--text-quaternary);
  display: flex; align-items: center;
}
.widget-preview-send {
  width: 32px; height: 32px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.widget-preview-send svg { width: 14px; height: 14px; }
.widget-preview-footer {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  padding: 6px 12px 10px;
}
.widget-preview-fab {
  position: absolute;
  bottom: 16px; right: 16px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 8px 16px rgba(31, 192, 171, 0.30);
}
.widget-preview-fab svg { width: 22px; height: 22px; }

/* ============== ROLES & PERMISSIONS ============== */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.role-card {
  padding: 18px;
  border-radius: 16px;
  border: 0;
  background: var(--bg-base);
  display: flex; flex-direction: column; gap: 10px;
}
.role-card.is-current {
  background: var(--primary-subtle);
  border-color: var(--border-accent);
}
.role-card-head {
  display: flex; align-items: center; gap: 10px;
}
.role-card-name {
  font-size: 14px; font-weight: 600;
  color: var(--text-heading);
}
.role-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.role-card-list li {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex; align-items: flex-start; gap: 8px;
  line-height: 1.4;
}
.role-card-list li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  margin-top: 7px;
  flex-shrink: 0;
}

/* ============== PRICING PLANS ============== */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.plan-card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.plan-card.is-featured {
  border-color: var(--primary);
  background: linear-gradient(180deg, var(--primary-subtle) 0%, var(--bg-base) 60%);
}
.plan-card-badge {
  position: absolute;
  top: -10px; left: 24px;
}
.plan-card-name {
  font-size: 18px; font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.2px;
  margin: 0;
}
.plan-card-price {
  display: flex; align-items: baseline; gap: 4px;
}
.plan-card-price-num {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -1px;
  line-height: 1;
}
.plan-card-price-unit {
  font-size: 13px;
  color: var(--text-quaternary);
}
.plan-card-tagline {
  font-size: 13px;
  color: var(--text-quaternary);
  line-height: 1.5;
}
.plan-card-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.plan-card-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.plan-card-list li.is-off { color: var(--text-muted); }
.plan-card-list li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.plan-card-list li .check-on { color: var(--success-fg); }
.plan-card-list li .check-off { color: var(--text-muted); }

/* ============== TOKEN USAGE BLOCK (billing) ============== */
.usage-block { display: flex; flex-direction: column; gap: 18px; }
.usage-row { display: flex; flex-direction: column; gap: 6px; }
.usage-row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.usage-row-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
}
.usage-row-name svg { width: 14px; height: 14px; color: var(--text-quaternary); }
.usage-row-value {
  font-size: 12px;
  color: var(--text-quaternary);
}
.usage-row-track {
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 9999px;
  overflow: hidden;
}
.usage-row-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 9999px;
}
.usage-row-fill.is-warning { background: var(--warning-fg); }
.usage-row-fill.is-error { background: var(--error-fg); }
.usage-block-total {
  display: flex; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 14px; font-weight: 600;
  color: var(--text-heading);
}

/* ============== Payment method ============== */
.pm-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.pm-icon {
  width: 44px; height: 32px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.pm-info { flex: 1; min-width: 0; }
.pm-info-name { font-size: 14px; font-weight: 500; color: var(--text-heading); margin-bottom: 4px; }
.pm-info-sub { font-size: 12px; color: var(--text-quaternary); }
.pm-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ============== DANGER ZONE BLOCK ============== */
.danger-block {
  border: 1px solid var(--error-border);
  background: var(--error-bg);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.danger-block-title { font-size: 14px; font-weight: 700; color: var(--error-fg); margin: 0; }
.danger-block-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0; }

/* ============== ACTIVITY (recent activity dot rows) ============== */
.activity-list { display: flex; flex-direction: column; gap: 4px; }
.activity-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-base);
  border: 0;
  border-radius: 14px;
  transition: background 0.15s, border-color 0.15s;
}
.activity-row:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.activity-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--primary-light);
}
.activity-icon svg { width: 16px; height: 16px; }
.activity-text-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.activity-title-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-heading);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity-meta { font-size: 12px; color: var(--text-quaternary); line-height: 1.2; }
.activity-time { font-size: 12px; color: var(--text-quaternary); white-space: nowrap; }

/* ============== NEW CHATBOT WIZARD ============== */
.wizard-main { padding-top: 4px; }
.wizard-body { padding-top: 8px; padding-bottom: 56px; }
.wizard-autosave {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-quaternary);
  padding-right: 8px;
  font-weight: 500;
}
.wizard-autosave svg { width: 14px; height: 14px; color: var(--success-fg); }

/* Layout */
.wizard-layout {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

/* Minimal top stepper */
.wizard-stepper-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 24px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.wizard-stepper-dots {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 4px 0 14px;
  margin: 0;
  position: relative;
}
.step-dot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
/* Connecting line between dots */
.step-dot:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 11px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.step-dot.is-done:not(:last-child)::after { background: var(--primary); }
.step-dot-num {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--bg-base);
  border: 1.5px solid var(--border);
  color: var(--text-quaternary);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-variant-numeric: tabular-nums;
}
.step-dot.is-active .step-dot-num {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(31, 192, 171,0.15);
  transform: scale(1.06);
}
.step-dot.is-done .step-dot-num {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-size: 0;
}
.step-dot.is-done .step-dot-num::before {
  content: '';
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(0px, -1px);
}
.step-dot-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-quaternary);
  white-space: nowrap;
  transition: color 0.2s;
}
.step-dot.is-active .step-dot-label {
  color: var(--text-heading);
  font-weight: 600;
}
.step-dot.is-done .step-dot-label { color: var(--text-tertiary); }
.step-dot:hover .step-dot-label { color: var(--text-secondary); }
.wizard-stepper-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-quaternary);
  letter-spacing: 0.2px;
  text-align: center;
}
@media (max-width: 700px) {
  .step-dot-label { display: none; }
  .step-dot:not(:last-child)::after { left: calc(50% + 12px); right: calc(-50% + 12px); }
}

/* Content */
.wizard-content {
  background: transparent;
  border: 0;
  padding: 0;
  min-height: auto;
  display: flex;
  flex-direction: column;
}
.wizard-step { display: none; flex: 1; flex-direction: column; gap: 22px; padding: 24px 0 8px; animation: wizardFadeIn 0.3s ease-out; }
.wizard-step.is-active { display: flex; }
@keyframes wizardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.wizard-step-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 4px;
}
.wizard-step-eyebrow {
  display: none;
}
.wizard-step-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--text-heading);
  margin: 0;
  line-height: 1.2;
}
.wizard-step-sub {
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
}

/* Choice cards */
.wizard-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.wizard-choice-grid-compact { gap: 12px; }
@media (max-width: 700px) {
  .wizard-choice-grid { grid-template-columns: 1fr; }
}
.wizard-choice {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 18px;
  background: var(--bg-base);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.wizard-choice:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.wizard-choice.is-selected {
  border-color: var(--primary);
  background: var(--primary-muted-bg);
}
.wizard-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wizard-choice-thumb {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.wizard-choice-thumb-sm { width: 40px; height: 40px; border-radius: 10px; }
.wizard-choice-thumb svg { width: 24px; height: 24px; }
.wizard-choice-thumb-sm svg { width: 18px; height: 18px; }
.wizard-choice-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.wizard-choice-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wizard-choice-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text-tertiary);
}
.wizard-choice-badge-pro {
  background: rgba(192,132,252,0.16);
  color: #c084fc;
}
.wizard-choice-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.wizard-choice-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 0;
  margin: 0;
}
.wizard-choice-pills li {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 9999px;
  background: var(--bg-hover);
  color: var(--text-tertiary);
}
.wizard-choice.is-selected .wizard-choice-pills li {
  background: rgba(31, 192, 171,0.12);
  color: var(--primary-light);
}
.wizard-choice-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s, transform 0.15s;
}
.wizard-choice-check svg { width: 12px; height: 12px; }
.wizard-choice.is-selected .wizard-choice-check {
  opacity: 1;
  transform: scale(1);
}

/* Pills group */
.wizard-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wizard-pill {
  position: relative;
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--bg-base);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.wizard-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wizard-pill:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.wizard-pill.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Form */
.wizard-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Model section (step 5) */
.model-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.model-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-quaternary);
}
.model-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) { .model-cards { grid-template-columns: 1fr; } }
.model-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--bg-base);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.model-card input { position: absolute; opacity: 0; pointer-events: none; }
.model-card:hover { border-color: var(--border-strong); }
.model-card.is-selected {
  border-color: var(--primary);
  background: var(--primary-muted-bg);
}
.model-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.model-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.model-card-icon svg { width: 18px; height: 18px; }
.model-card-titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.model-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.model-card-badge { font-size: 10px; padding: 2px 6px; }
.model-card-price {
  font-size: 12px;
  color: var(--text-quaternary);
  font-variant-numeric: tabular-nums;
}
.model-card-price strong {
  color: var(--text-secondary);
  font-weight: 600;
  margin-left: 2px;
}
.model-card-check {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.15s;
}
.model-card-check svg { width: 12px; height: 12px; }
.model-card.is-selected .model-card-check {
  opacity: 1;
  transform: scale(1);
}
.model-card-desc {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin: 0;
}
.model-card-specs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 0;
  margin: 0;
  border-top: 1px solid var(--border);
}
.model-card-specs li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.model-card-specs .dot {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--text-quaternary);
}
.model-card.is-selected .model-card-specs .dot { background: var(--primary); }
.model-card.is-selected .model-card-specs { border-top-color: rgba(31, 192, 171,0.2); }

/* Response creativity slider */
.creativity-section {
  padding: 18px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.creativity-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(31, 192, 171,0.1), transparent 70%);
  pointer-events: none;
}
.creativity-section > * { position: relative; z-index: 1; }
.creativity-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.creativity-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.2px;
  margin-bottom: 2px;
}
.creativity-sub {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
}
.creativity-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary-light);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
  flex-shrink: 0;
}
.creativity-slider {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}
.creativity-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--bg-hover);
  border-radius: 9999px;
  overflow: hidden;
}
.creativity-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ad8c4, #c084fc, #fb923c);
  border-radius: 9999px;
  transition: width 0.2s;
}
.creativity-stops {
  position: absolute;
  left: 6px;
  right: 6px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.creativity-stops span {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--text-quaternary);
  opacity: 0.5;
}
.creativity-input {
  position: absolute;
  inset: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  width: 100%;
  margin: 0;
}
.creativity-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: #fff;
  border: 4px solid var(--primary);
  box-shadow: 0 2px 10px rgba(31, 192, 171,0.5), 0 0 0 1px var(--primary-end);
  cursor: grab;
  transition: transform 0.1s;
  margin-top: 2px;
}
.creativity-input::-webkit-slider-thumb:hover { transform: scale(1.08); }
.creativity-input::-webkit-slider-thumb:active { cursor: grabbing; }
.creativity-input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: #fff;
  border: 4px solid var(--primary);
  box-shadow: 0 2px 10px rgba(31, 192, 171,0.5);
  cursor: grab;
}
.creativity-input:focus { outline: 0; }
.creativity-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-quaternary);
  font-weight: 500;
}
.creativity-labels span {
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.15s;
}
.creativity-labels span:hover { color: var(--text-secondary); }
.creativity-labels .is-active {
  color: var(--text-heading);
  font-weight: 700;
}

/* Advanced parameters (collapsible) */
.advanced-params {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-base);
  overflow: hidden;
}
.advanced-params-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.advanced-params-summary::-webkit-details-marker { display: none; }
.advanced-params-summary:hover { background: var(--bg-hover); }
.advanced-params-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}
.advanced-params-meta {
  font-size: 11px;
  color: var(--text-quaternary);
  margin-left: auto;
}
.advanced-params-chev {
  width: 14px;
  height: 14px;
  color: var(--text-quaternary);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.advanced-params[open] .advanced-params-chev { transform: rotate(180deg); }
.advanced-params[open] .advanced-params-summary { border-bottom: 1px solid var(--border); }
.advanced-params-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 18px;
}
@media (max-width: 600px) { .advanced-params-grid { grid-template-columns: 1fr; } }

/* Tone slider */
.tone-slider {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 4px 0;
}
.tone-slider-wrap {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}
.tone-slider-track {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 4px;
  background: var(--bg-hover);
  border-radius: 9999px;
  z-index: 0;
  overflow: hidden;
}
.tone-slider-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-end));
  border-radius: 9999px;
  transition: width 0.2s;
}
.tone-slider-ticks {
  position: absolute;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1;
}
.tone-tick {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--bg-hover);
  margin-top: -2px;
}
.tone-slider-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 24px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  margin: 0;
  padding: 0;
}
.tone-slider-input::-webkit-slider-runnable-track {
  height: 24px;
  background: transparent;
  border: 0;
}
.tone-slider-input::-moz-range-track {
  height: 24px;
  background: transparent;
  border: 0;
}
.tone-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #fff;
  border: 4px solid var(--primary);
  box-shadow: 0 2px 8px rgba(31, 192, 171,0.5), 0 0 0 1px var(--primary-end);
  margin-top: 3px;
  cursor: grab;
  transition: transform 0.1s, box-shadow 0.15s;
}
.tone-slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.tone-slider-input::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
  box-shadow: 0 2px 12px rgba(31, 192, 171,0.7), 0 0 0 1px var(--primary-end), 0 0 0 6px rgba(31, 192, 171,0.15);
}
.tone-slider-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #fff;
  border: 4px solid var(--primary);
  box-shadow: 0 2px 8px rgba(31, 192, 171,0.5), 0 0 0 1px var(--primary-end);
  cursor: grab;
  transition: transform 0.1s;
}
.tone-slider-input::-moz-range-thumb:hover {
  transform: scale(1.1);
}
.tone-slider-input:focus { outline: 0; }
.tone-slider-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(31, 192, 171,0.2), 0 2px 8px rgba(31, 192, 171,0.5), 0 0 0 1px var(--primary-end);
}
.tone-slider-labels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  font-size: 12px;
  color: var(--text-quaternary);
  font-weight: 500;
  text-align: center;
  user-select: none;
}
.tone-slider-labels span {
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.tone-slider-labels span:first-child { text-align: left; padding-left: 0; }
.tone-slider-labels span:last-child { text-align: right; padding-right: 0; }
.tone-slider-labels span:hover { color: var(--text-secondary); }
.tone-slider-labels .is-active {
  color: var(--text-heading);
  font-weight: 700;
}

/* Widget logo upload */
.logo-upload {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.logo-upload::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(31, 192, 171,0.1), transparent 70%);
  pointer-events: none;
}
.logo-upload-preview {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.logo-upload-img {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.logo-upload-img svg { width: 32px; height: 32px; opacity: 0.9; }
.logo-upload-placeholder svg { opacity: 0.6; }
.logo-upload-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.logo-upload-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.2px;
}
.logo-upload-sub {
  font-size: 12px;
  color: var(--text-quaternary);
  line-height: 1.5;
}
.logo-upload-btns {
  display: flex;
  gap: 6px;
  padding-top: 8px;
}

/* Bot avatar upload */
.avatar-upload {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.avatar-upload-preview {
  flex-shrink: 0;
}
.avatar-upload-img {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.avatar-upload-img svg { width: 32px; height: 32px; }
.avatar-upload-actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.avatar-upload-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}
.avatar-upload-sub {
  font-size: 12px;
  color: var(--text-quaternary);
  line-height: 1.45;
}
.avatar-upload-btns {
  display: flex;
  gap: 6px;
  padding-top: 6px;
}
.avatar-presets {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 10px;
}
.avatar-presets-label {
  font-size: 12px;
  color: var(--text-quaternary);
  font-weight: 500;
}
.avatar-presets-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.avatar-preset {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  position: relative;
}
.avatar-preset:hover {
  transform: scale(1.1);
}
.avatar-preset.is-selected {
  border-color: var(--text-heading);
  box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--primary);
}

/* Language dropdown */
.lang-select {
  position: relative;
  max-width: 320px;
}
.lang-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-heading);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.lang-select-trigger:hover { border-color: var(--border-strong); }
.lang-select.is-open .lang-select-trigger {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.lang-flag {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.lang-name {
  flex: 1;
  text-align: left;
}
.lang-chev {
  width: 14px;
  height: 14px;
  color: var(--text-quaternary);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.lang-select.is-open .lang-chev { transform: rotate(180deg); }

.lang-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 6px;
  margin: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 0 0 1px var(--border);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}
.lang-select.is-open .lang-select-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.1s;
}
.lang-option:hover {
  background: var(--bg-hover);
  color: var(--text-heading);
}
.lang-option .lang-name {
  flex: 1;
  font-weight: 500;
}
.lang-option .lang-meta {
  font-size: 11px;
  color: var(--text-quaternary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.lang-check {
  width: 16px;
  height: 16px;
  color: var(--primary);
  opacity: 0;
  flex-shrink: 0;
}
.lang-check svg { width: 14px; height: 14px; }
.lang-option.is-selected {
  background: var(--primary-muted-bg);
  color: var(--text-heading);
}
.lang-option.is-selected .lang-meta { color: var(--primary-light); }
.lang-option.is-selected .lang-check { opacity: 1; }
.lang-option-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
  list-style: none;
}

/* Scrollbar for dropdown */
.lang-select-menu::-webkit-scrollbar { width: 6px; }
.lang-select-menu::-webkit-scrollbar-track { background: transparent; }
.lang-select-menu::-webkit-scrollbar-thumb {
  background: var(--bg-hover);
  border-radius: 9999px;
}
.lang-select-menu::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
.wizard-form .form-input-lg {
  height: 48px;
  font-size: 15px;
}
.form-required { color: var(--error-fg); margin-left: 2px; }
.form-optional {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-quaternary);
  margin-left: 6px;
  text-transform: lowercase;
  letter-spacing: 0.2px;
}

/* Multiselect (guardrails search dropdown) */
.multiselect {
  position: relative;
}
.multiselect-trigger {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
  padding: 6px 36px 6px 10px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.multiselect-trigger:hover { border-color: var(--border-strong); }
.multiselect.is-open .multiselect-trigger {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.multiselect-chips {
  display: contents;
}
.multiselect-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border-radius: 9999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-heading);
  position: relative;
}
.multiselect-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--chip-color, var(--primary));
}
.multiselect-chip-x {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: transparent;
  border: 0;
  color: var(--text-quaternary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  transition: background 0.15s, color 0.15s;
}
.multiselect-chip-x:hover {
  background: var(--bg-hover);
  color: var(--text-heading);
}
.multiselect-chip-x svg { width: 11px; height: 11px; }
.multiselect-search {
  flex: 1;
  min-width: 100px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text-heading);
  font-size: 13px;
  font-family: inherit;
  padding: 4px 0;
}
.multiselect-search::placeholder { color: var(--text-quaternary); }
.multiselect-chev {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-quaternary);
  pointer-events: none;
  transition: transform 0.2s;
}
.multiselect.is-open .multiselect-chev {
  transform: translateY(-50%) rotate(180deg);
}

.multiselect-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 6px;
  margin: 0;
  list-style: none;
  max-height: 360px;
  overflow-y: auto;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 0 0 1px var(--border);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}
.multiselect.is-open .multiselect-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.multiselect-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.1s;
}
.multiselect-option:hover {
  background: var(--bg-hover);
}
.multiselect-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.multiselect-icon svg { width: 16px; height: 16px; }
.multiselect-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.multiselect-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}
.multiselect-sub {
  font-size: 11px;
  color: var(--text-quaternary);
  line-height: 1.4;
}
.multiselect-check {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--bg-base);
  border: 1.5px solid var(--border);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.multiselect-check svg { width: 12px; height: 12px; }
.multiselect-option.is-selected .multiselect-check {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.multiselect-option.is-selected {
  background: var(--primary-muted-bg);
}
.multiselect-empty {
  padding: 14px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-quaternary);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.multiselect-empty[hidden] { display: none; }

/* Scrollbar */
.multiselect-menu::-webkit-scrollbar { width: 6px; }
.multiselect-menu::-webkit-scrollbar-track { background: transparent; }
.multiselect-menu::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 9999px; }
.multiselect-menu::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Guardrails */
.wizard-guardrails {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .wizard-guardrails { grid-template-columns: 1fr; }
}
.wizard-guardrail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-base);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.wizard-guardrail input { position: absolute; opacity: 0; pointer-events: none; }
.wizard-guardrail:hover { border-color: var(--border-strong); }
.wizard-guardrail.is-on {
  border-color: var(--primary);
  background: var(--primary-muted-bg);
}
.wizard-guardrail-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wizard-guardrail-icon svg { width: 16px; height: 16px; }
.wizard-guardrail-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  flex: 1;
}
.wizard-guardrail-check {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.wizard-guardrail-check svg { width: 12px; height: 12px; }
.wizard-guardrail.is-on .wizard-guardrail-check {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Plan notice */
.wizard-plan-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--primary-muted-bg);
  border: 1px solid rgba(31, 192, 171,0.3);
  border-radius: 12px;
}
.wizard-plan-notice-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(31, 192, 171,0.18);
  color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wizard-plan-notice-icon svg { width: 16px; height: 16px; }
.wizard-plan-notice-text {
  font-size: 13px;
  color: var(--text-secondary);
}
.wizard-plan-notice-text strong { color: var(--text-heading); }
.wizard-plan-notice-text a {
  color: var(--primary-light);
  font-weight: 600;
}

/* Dropzone */
.wizard-dropzone {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px 32px;
  background: var(--bg-base);
  border: 1.5px dashed var(--border-strong);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.wizard-dropzone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 0% 0%, rgba(31, 192, 171,0.1), transparent 70%);
  pointer-events: none;
  opacity: 0.6;
}
.wizard-dropzone:hover {
  border-color: var(--primary);
  background: var(--primary-muted-bg);
  transform: translateY(-1px);
}
.wizard-dropzone:hover::before { opacity: 1; }
.wizard-dropzone-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--bg-hover);
  color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.wizard-dropzone-icon svg { width: 30px; height: 30px; }
.wizard-dropzone-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.wizard-dropzone-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.2px;
}
.wizard-dropzone-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.wizard-dropzone > .btn { position: relative; z-index: 1; }

/* File list */
.wizard-file-list { display: flex; flex-direction: column; gap: 8px; }
.wizard-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.wizard-file-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wizard-file-icon svg { width: 16px; height: 16px; }
.wizard-file-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wizard-file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}
.wizard-file-meta {
  font-size: 11px;
  color: var(--text-quaternary);
}

.wizard-form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
}
.wizard-form-divider::before,
.wizard-form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.wizard-form-divider span {
  font-size: 11px;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}

.wizard-url-row { display: flex; gap: 8px; }
.wizard-url-row .form-input { flex: 1; }

/* Features step — new design */
.features-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.features-summary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 100% 100%, rgba(192,132,252,0.1), transparent 70%);
  pointer-events: none;
}
.features-summary > * { position: relative; z-index: 1; }
.features-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.features-summary-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.4px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.features-summary-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-quaternary);
}
.features-summary-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
}
.features-summary-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9999px;
  background: rgba(192,132,252,0.16);
  color: #c084fc;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.features-summary-cta:hover { background: rgba(192,132,252,0.26); }

.features-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.features-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 2px;
}
.features-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
}
.features-section-label-pro {
  color: #c084fc;
}
.features-section-sub {
  display: block;
  font-size: 11px;
  color: var(--text-quaternary);
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.features-section-cta {
  font-size: 12px;
  font-weight: 600;
  color: #c084fc;
  text-decoration: none;
}
.features-section-cta:hover { text-decoration: underline; }

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px) { .features-grid { grid-template-columns: 1fr; } }

.feat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.feat-card:hover { border-color: var(--border-strong); }
.feat-card.is-on {
  border-color: rgba(31, 192, 171,0.4);
  background: var(--primary-muted-bg);
}
.feat-card.is-locked {
  opacity: 0.75;
}
.feat-card.is-locked:hover { opacity: 1; }
.feat-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feat-card-icon svg { width: 18px; height: 18px; }
.feat-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.feat-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.1px;
}
.feat-card-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.45;
}
.feat-card-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 9999px;
  background: rgba(192,132,252,0.16);
  color: #c084fc;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Features list (legacy, kept for compat) */
.wizard-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wizard-feature {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s;
}
.wizard-feature:hover { border-color: var(--border-strong); }
.wizard-feature.is-locked { opacity: 0.7; }
.wizard-feature.is-locked:hover { opacity: 1; }
.wizard-feature-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.wizard-feature-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
}
.wizard-feature-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.wizard-feature-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Widget step split */
.wizard-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .wizard-split { grid-template-columns: 1fr; }
}
.wizard-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wizard-color-swatch {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 2px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
}

/* Live preview */
.wizard-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 24px;
}
.wizard-preview-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-quaternary);
}
.wizard-preview-frame {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  min-height: 380px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.wizard-preview-widget {
  width: 100%;
  max-width: 320px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
}
.wizard-preview-head {
  padding: 12px 14px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wizard-preview-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wizard-preview-head-text > span:first-child {
  font-size: 13px;
  font-weight: 600;
}
.wizard-preview-head-status {
  font-size: 10px;
  opacity: 0.75;
}
.wizard-preview-head-close {
  background: none;
  border: 0;
  color: #fff;
  opacity: 0.7;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.wizard-preview-body {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
}
.wizard-preview-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.wizard-preview-avatar {
  width: 24px;
  height: 24px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wizard-preview-bubble {
  padding: 8px 10px;
  background: var(--bg-hover);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-heading);
  max-width: 220px;
}
.wizard-preview-starters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}
.wizard-preview-starters button {
  text-align: left;
  padding: 8px 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
  cursor: pointer;
}
.wizard-preview-starters button:hover {
  background: var(--bg-elevated);
}
.wizard-preview-input {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-base);
}
.wizard-preview-input > span {
  flex: 1;
  font-size: 12px;
  color: var(--text-quaternary);
}
.wizard-preview-input button {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.wizard-preview-input button svg { width: 14px; height: 14px; }

/* Review cards */
.wizard-review {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 700px) {
  .wizard-review { grid-template-columns: 1fr; }
}
.wizard-review-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.wizard-review-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wizard-review-step {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-quaternary);
  padding: 2px 6px;
  background: var(--bg-hover);
  border-radius: 5px;
}
.wizard-review-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
  flex: 1;
}
.wizard-review-edit {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-light);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.wizard-review-edit:hover { background: var(--bg-hover); }
.wizard-review-body {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.wizard-review-body strong { color: var(--text-heading); font-weight: 600; }

.wizard-launch-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(31, 192, 171,0.16), rgba(74, 216, 196,0.08));
  border: 1px solid rgba(31, 192, 171,0.3);
  border-radius: 14px;
  margin-top: 4px;
}
.wizard-launch-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wizard-launch-icon svg { width: 22px; height: 22px; }
.wizard-launch-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wizard-launch-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
}
.wizard-launch-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* Footer */
.wizard-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0 4px;
  margin-top: 14px;
  border-top: 1px solid var(--border);
}
.wizard-foot-progress {
  display: none;
}
.wizard-foot-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Old stepper (kept for backward compat) */
.stepper {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 8px;
}
.step {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-quaternary);
}
.step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  background: var(--bg-base);
  color: var(--text-quaternary);
}
.step.is-active .step-num { background: var(--primary); border-color: var(--primary); color: #fff; }
.step.is-active { color: var(--text-heading); font-weight: 500; }
.step.is-done .step-num { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
.step.is-done { color: var(--text-tertiary); }
.step-bar {
  flex: 1; height: 1px;
  background: var(--border);
  max-width: 40px;
}

/* Two-column layout (chatbot detail body) */
.split {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 16px;
  align-items: start;
}

/* ============== FAB ============== */
.fab {
  position: fixed;
  bottom: 32px; right: 32px;
  width: 48px; height: 48px;
  border-radius: 9999px;
  background: var(--primary);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.25), 0 8px 10px -6px rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  z-index: 50;
  transition: transform 0.15s;
  border: none;
  cursor: pointer;
}
.fab:hover { transform: translateY(-2px); }
.fab svg { width: 20px; height: 20px; }

/* ============== MOBILE NAV DRAWER (slides down from header) ============== */
.menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 9999px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
}
.menu-btn:hover { background: var(--bg-elevated); color: var(--text-heading); }

.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  z-index: 9;
  padding: 16px;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.18s, opacity 0.18s;
  pointer-events: none;
}
.mobile-nav-drawer.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav-drawer .top-nav-item {
  width: 100%;
  height: 44px;
  justify-content: flex-start;
  padding: 0 14px;
  border-radius: 12px;
}
.mobile-nav-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

/* ============== ANALYTICS TAB LAYOUT ============== */
/* Token usage merged into overview-card (right side) */
.overview-token {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(31, 192, 171,0.06), transparent 60%);
  position: relative;
}
.overview-token-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.overview-token-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.overview-token-delta {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.overview-token-delta.up { background: var(--success-bg); color: var(--success-fg); }
.overview-token-delta.down { background: var(--error-bg); color: var(--error-fg); }
.overview-token-hero {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.overview-token-meta {
  font-size: 12px;
  color: var(--text-quaternary);
}
.overview-token-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.overview-token-breakdown-bar {
  display: flex;
  height: 6px;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--bg-hover);
  gap: 2px;
}
.overview-token-breakdown-input { background: var(--primary); height: 100%; }
.overview-token-breakdown-output { background: #4ad8c4; height: 100%; }
.overview-token-breakdown-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.overview-token-breakdown-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.overview-token-breakdown-item strong {
  color: var(--text-heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.overview-token-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}
.overview-token-name {
  font-weight: 500;
}

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .kpi-strip { grid-template-columns: 1fr; }
}
.kpi-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s;
}
.kpi-tile:hover { border-color: var(--border-strong); }
.kpi-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(31, 192, 171,0.08), transparent 70%);
  pointer-events: none;
}
.kpi-tile > * { position: relative; z-index: 1; }
.kpi-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kpi-tile-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-tile-icon svg { width: 14px; height: 14px; }
.kpi-tile-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  flex: 1;
  min-width: 0;
}
.kpi-tile-delta {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}
.kpi-tile-delta.up {
  background: var(--success-bg);
  color: var(--success-fg);
}
.kpi-tile-delta.down {
  background: var(--error-bg);
  color: var(--error-fg);
}
.kpi-tile-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.8px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.kpi-tile-meta {
  font-size: 11px;
  color: var(--text-quaternary);
  font-weight: 500;
}

.overview-mini-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 12px 22px 22px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.overview-mini-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.overview-mini-legend-item .overview-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .analytics-grid { grid-template-columns: 1fr; }
}
.analytics-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ============== DONUT CHART (chatbot detail outcomes) ============== */
.donut-chart {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.donut-chart svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.donut-chart svg circle {
  fill: none;
  stroke-width: 4;
}
.donut-track { stroke: var(--bg-hover); }
.donut-fill {
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s;
}
.donut-fill.is-success { stroke: var(--success-fg); }
.donut-fill.is-purple { stroke: #c084fc; }
.donut-fill.is-muted { stroke: var(--text-muted); }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.donut-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}

.outcomes-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: stretch;
}
.outcomes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: center;
}
/* Horizontal outcomes layout — 3 donut columns side by side */
.outcomes-card-horizontal .outcomes-list {
  flex-direction: row;
  gap: 0;
  justify-content: stretch;
  align-items: stretch;
}
.outcomes-card-horizontal .outcome-row {
  flex: 1;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 18px 12px 14px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border);
}
.outcomes-card-horizontal .outcome-row:first-child {
  border-left: 0;
}

.outcomes-card-horizontal .outcome-text {
  align-items: center;
  text-align: center;
  gap: 2px;
}
.outcomes-card-horizontal .outcome-label {
  font-size: 12px;
  font-weight: 600;
}
.outcomes-card-horizontal .outcome-meta {
  font-size: 11px;
  color: var(--text-tertiary);
}

.outcomes-card-horizontal .donut-chart {
  width: 78px;
  height: 78px;
}
.outcomes-card-horizontal .donut-chart svg circle {
  stroke-width: 3;
}
.outcomes-card-horizontal .donut-pct {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.outcome-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.outcome-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.outcome-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}
.outcome-meta {
  font-size: 11px;
  color: var(--text-quaternary);
}
.outcome-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

/* ============== TOKEN USAGE CARD ============== */
.token-usage-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Hero metric */
.token-hero {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.token-hero-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.token-hero-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -1px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.token-hero-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}
.token-hero-delta svg { width: 12px; height: 12px; }
.token-hero-delta.up {
  color: var(--success-fg);
  background: var(--success-bg);
}
.token-hero-delta.down {
  color: var(--error-fg);
  background: var(--error-bg);
}
.token-hero-label {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Progress */
.token-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.token-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}
.token-progress-head-label {
  color: var(--text-secondary);
  font-weight: 600;
}
.token-progress-head-value {
  color: var(--text-quaternary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.token-progress-track {
  height: 8px;
  background: var(--bg-hover);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}
.token-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-end));
  border-radius: 9999px;
  transition: width 0.4s;
}

/* Breakdown — input vs output */
.token-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.token-breakdown-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.token-breakdown-title {
  font-size: 12px;
  color: var(--text-quaternary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.token-breakdown-bar {
  display: flex;
  height: 8px;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--bg-hover);
  gap: 2px;
}
.token-breakdown-bar-input {
  background: var(--primary);
  height: 100%;
}
.token-breakdown-bar-output {
  background: #4ad8c4;
  height: 100%;
}
.token-breakdown-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.token-breakdown-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.token-breakdown-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 5px;
}
.token-breakdown-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.token-breakdown-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.token-breakdown-value {
  font-size: 16px;
  color: var(--text-heading);
  font-weight: 700;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}
.token-breakdown-value .muted {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-quaternary);
  margin-left: 2px;
  letter-spacing: 0;
}

/* Insights row */
.token-insights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.token-insight {
  display: flex;
  align-items: center;
  gap: 12px;
}
.token-insight-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.token-insight-icon svg { width: 16px; height: 16px; }
.token-insight-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.token-insight-label {
  font-size: 11px;
  color: var(--text-quaternary);
  font-weight: 500;
}
.token-insight-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}
.token-insight-value .muted {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-quaternary);
}

/* Persona card — adopts wizard pattern */
.persona-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ============== BOT DETAIL HEADER (chatbot detail) ============== */
.bot-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 4px;
}
.bot-detail-thumb {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1fc0ab 0%, #7df0e0 100%);
}
.bot-detail-thumb.bot-thumb-emerald {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
}
.bot-detail-thumb svg { width: 28px; height: 28px; }
.bot-detail-info {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bot-detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bot-detail-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-heading);
  margin: 0;
  line-height: 1.2;
}
.bot-detail-meta {
  font-size: 13px;
  color: var(--text-quaternary);
}
.bot-detail-usage {
  margin-left: 4px;
  height: 32px;
}
.bot-detail-usage .usage-pill-info {
  padding: 0 12px 0 2px;
  gap: 6px;
}
.bot-detail-usage .usage-pill-icon {
  width: 24px; height: 24px;
}
.bot-detail-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ============== CHAT HISTORY (chatbot detail) ============== */
.chat-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: stretch;
}
.chat-list-panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  min-height: 620px;
  max-height: 760px;
}
.chat-list-head {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-list-search {
  position: relative;
  display: flex;
  align-items: center;
}
.chat-list-search svg {
  position: absolute;
  left: 12px;
  width: 14px;
  height: 14px;
  color: var(--text-quaternary);
  pointer-events: none;
}
.chat-list-search input {
  flex: 1;
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 7px 12px 7px 32px;
  font-size: 12px;
  color: var(--text-primary);
  outline: none;
  transition: border-color .15s, background .15s;
}
.chat-list-search input:focus {
  border-color: var(--primary);
  background: var(--bg-elevated);
}
.chat-list-search input::placeholder { color: var(--text-quaternary); }

/* Chat filter dropdown */
.chat-filter-select {
  position: relative;
}
.chat-filter-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-heading);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.chat-filter-trigger:hover { border-color: var(--border-strong); }
.chat-filter-select.is-open .chat-filter-trigger {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
}
.chat-filter-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.chat-filter-dot.is-all { background: var(--primary); }
.chat-filter-dot.is-active { background: var(--success-fg); }
.chat-filter-dot.is-escalated { background: #c084fc; }
.chat-filter-dot.is-resolved { background: var(--text-quaternary); }
.chat-filter-name {
  flex: 1;
  text-align: left;
  color: var(--text-heading);
  font-weight: 600;
}
.chat-filter-trigger-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--bg-hover);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.chat-filter-chev {
  width: 14px;
  height: 14px;
  color: var(--text-quaternary);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.chat-filter-select.is-open .chat-filter-chev { transform: rotate(180deg); }

.chat-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 6px;
  margin: 0;
  list-style: none;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 0 0 1px var(--border);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}
.chat-filter-select.is-open .chat-filter-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.chat-filter-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.1s;
}
.chat-filter-option:hover { background: var(--bg-hover); color: var(--text-heading); }
.chat-filter-option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chat-filter-option-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  line-height: 1.3;
}
.chat-filter-option-meta {
  font-size: 11px;
  color: var(--text-quaternary);
  line-height: 1.3;
}
.chat-filter-option-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: 9999px;
  background: var(--bg-base);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.chat-filter-check {
  width: 18px;
  height: 18px;
  color: var(--primary);
  opacity: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-filter-check svg { width: 14px; height: 14px; }
.chat-filter-option.is-selected {
  background: var(--primary-muted-bg);
}
.chat-filter-option.is-selected .chat-filter-option-count {
  background: var(--primary);
  color: #fff;
}
.chat-filter-option.is-selected .chat-filter-check { opacity: 1; }
.chat-filter-dot {
  flex-shrink: 0;
  margin-left: 2px;
}

/* Legacy chip styles kept for fallback */
.chat-list-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chat-filter-chip {
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  border-radius: 9999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
}
.chat-filter-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.chat-filter-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.chat-filter-chip-count {
  background: rgba(255,255,255,0.18);
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 600;
}
.chat-filter-chip:not(.is-active) .chat-filter-chip-count {
  background: var(--bg-hover);
  color: var(--text-tertiary);
}

.chat-list-items {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.chat-list-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
  align-items: flex-start;
  text-decoration: none;
}
.chat-list-item:hover {
  background: var(--bg-hover);
}
.chat-list-item.is-active {
  background: var(--primary-subtle);
  border-left: 2px solid var(--primary);
  padding-left: 12px;
}
.chat-list-item-avatar {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
}
.chat-list-item-avatar.is-online::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--success-fg);
  border: 2px solid var(--bg-elevated);
  border-radius: 9999px;
}
.chat-list-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-list-item-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.chat-list-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.chat-list-item-preview {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.chat-list-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.chat-list-item-time {
  font-size: 11px;
  color: var(--text-quaternary);
  white-space: nowrap;
}
.chat-list-item-badge {
  background: var(--primary);
  color: #fff;
  border-radius: 9999px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}
.chat-list-item-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.chat-list-item-tag.is-escalated {
  background: rgba(192,132,252,0.14);
  color: #c084fc;
}
.chat-list-item-tag.is-active {
  background: var(--success-bg);
  color: var(--success-fg);
}
.chat-list-item-tag.is-resolved {
  background: var(--bg-hover);
  color: var(--text-quaternary);
}
.chat-list-item-tag.is-handoff {
  background: rgba(74, 216, 196,0.14);
  color: #4ad8c4;
}

/* === Chat detail panel === */
.chat-detail-panel {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  min-height: 620px;
  max-height: 760px;
  position: relative;
  transition: max-height 0.25s, min-height 0.25s;
}
/* Expanded mode — chat takes the full body area, but topbar + chat-list stay visible */
.chat-layout.is-expanded {
  position: fixed;
  top: 64px;            /* below topbar */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 16px;
  background: var(--bg-deep);
  gap: 16px;
  max-height: none;
  margin: 0;
  border-radius: 0;
}
.chat-layout.is-expanded .chat-list-panel {
  max-height: none;
  height: 100%;
}
.chat-layout.is-expanded .chat-detail-panel {
  max-height: none;
  height: 100%;
}
.chat-detail-panel.is-expanded {
  /* legacy state — only used when no parent layout to expand */
  max-height: none;
  min-height: 100%;
}
.chat-detail-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.chat-detail-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.chat-detail-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.chat-detail-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-detail-header-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-detail-header-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chat-detail-header-meta-sep { color: var(--text-muted); }
.chat-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.chat-detail-header-icon-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 9999px;
}
.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text-heading);
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn-sm { width: 26px; height: 26px; }
.icon-btn-sm svg { width: 13px; height: 13px; }

/* Expand/collapse icons */
.icon-collapse { display: none; }
.chat-detail-panel.is-expanded [data-chat-expand] .icon-expand { display: none; }
.chat-detail-panel.is-expanded [data-chat-expand] .icon-collapse { display: block; }

/* AI Summary panel (slides in from right) */
.chat-summary-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  background: var(--bg-base);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 5;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
  box-shadow: -12px 0 32px rgba(0,0,0,0.3);
}
.chat-detail-panel.is-summary-open .chat-summary-panel {
  transform: translateX(0);
}
.chat-detail-panel.is-summary-open .chat-summary-btn {
  background: var(--primary-muted-bg);
  color: var(--primary-light);
}
.chat-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.chat-summary-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--primary-light);
}
.chat-summary-section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-summary-section:last-of-type { border-bottom: 0; }
.chat-summary-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-quaternary);
}
.chat-summary-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}
.chat-summary-text strong { color: var(--text-heading); font-weight: 600; }

.chat-summary-mood {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-summary-mood-bar {
  height: 6px;
  background: var(--bg-hover);
  border-radius: 9999px;
  overflow: hidden;
}
.chat-summary-mood-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--error-fg), #fbbf24, var(--success-fg));
  border-radius: 9999px;
}
.chat-summary-mood-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-quaternary);
}
.chat-summary-mood-value {
  color: var(--success-fg);
  font-weight: 600;
}

.chat-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}
.chat-summary-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
}

.chat-summary-actions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-summary-actions li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.chat-summary-actions li:hover {
  border-color: var(--primary);
  background: var(--primary-muted-bg);
  color: var(--text-heading);
}
.chat-summary-action-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-summary-action-icon svg { width: 14px; height: 14px; }

.chat-summary-foot {
  margin-top: auto;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.chat-summary-foot-meta {
  font-size: 11px;
  color: var(--text-quaternary);
}

/* Hide summary panel on small screens — full-width takeover */
@media (max-width: 700px) {
  .chat-summary-panel { width: 100%; }
}

.chat-detail-thread {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-base);
}
.chat-day-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.chat-day-divider::before,
.chat-day-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.chat-day-divider span {
  font-size: 11px;
  color: var(--text-quaternary);
  font-weight: 500;
}
.chat-system-msg {
  align-self: center;
  background: rgba(192,132,252,0.10);
  border: 1px solid rgba(192,132,252,0.24);
  color: #c084fc;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chat-system-msg svg { width: 12px; height: 12px; }

.chat-msg {
  display: flex;
  gap: 10px;
  max-width: 78%;
}
.chat-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  margin-top: auto;
}
.chat-msg-avatar.is-bot {
  background: linear-gradient(135deg, #34d399, #059669);
  color: #fff;
}
.chat-msg-avatar.is-user {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
.chat-msg-avatar.is-agent {
  background: linear-gradient(135deg, #1fc0ab, #7df0e0);
}
.chat-msg-avatar svg { width: 16px; height: 16px; }
.chat-msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.chat-msg-bubble {
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  word-wrap: break-word;
}
.chat-msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-quaternary);
  padding: 0 4px;
}
.chat-msg-meta strong { color: var(--text-tertiary); font-weight: 600; }

.chat-msg.is-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-msg.is-user .chat-msg-bubble {
  background: var(--primary-subtle);
  color: var(--text-primary);
  border-color: rgba(31, 192, 171,0.24);
  border-radius: 14px 14px 4px 14px;
}
.chat-msg.is-user .chat-msg-meta { justify-content: flex-end; }

.chat-msg.is-agent .chat-msg-bubble {
  background: rgba(31, 192, 171,0.10);
  border-color: rgba(31, 192, 171,0.24);
  border-radius: 14px 14px 14px 4px;
}

.chat-detail-actions {
  border-top: 1px solid var(--border);
  padding: 12px 18px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--bg-elevated);
}
.chat-detail-input-wrap {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 8px 14px;
  min-width: 200px;
}
.chat-detail-input-wrap input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 13px;
  color: var(--text-primary);
}
.chat-detail-input-wrap input::placeholder { color: var(--text-quaternary); }

/* ============== TEAM PANEL (chatbot detail) ============== */
.team-stats-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 4px 0 8px;
}
.team-stat {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  position: relative;
}
.team-stat:first-child { padding-left: 4px; }
.team-stat:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}
.team-stat-label {
  order: 2;
  font-size: 11px;
  color: var(--text-quaternary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.team-stat-label svg { display: none; }
.team-stat-value {
  order: 1;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.4px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.team-stat-foot {
  order: 3;
  font-size: 11px;
  color: var(--text-quaternary);
  font-weight: 500;
}

@media (max-width: 900px) {
  .team-stats-row { flex-wrap: wrap; }
  .team-stat { flex: 0 0 calc(50% - 0px); padding-left: 4px; padding-right: 4px; }
  .team-stat:not(:first-child)::before { display: none; }
}

.team-member-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.7fr 0.6fr 110px;
  gap: 12px;
  padding: 14px 16px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.team-member-row:last-child { border-bottom: 0; }
.team-member-row:hover { background: var(--bg-hover); }
.team-member-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.team-member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}
.team-member-avatar.is-online::after,
.team-member-avatar.is-away::after,
.team-member-avatar.is-offline::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border: 2px solid var(--bg-elevated);
  border-radius: 9999px;
}
.team-member-avatar.is-online::after { background: var(--success-fg); }
.team-member-avatar.is-away::after { background: #fbbf24; }
.team-member-avatar.is-offline::after { background: var(--text-muted); }

.team-member-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-member-email {
  font-size: 11px;
  color: var(--text-quaternary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-member-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.status-dot-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.status-dot-row::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 9999px;
}
.status-dot-row.is-online { color: var(--success-fg); }
.status-dot-row.is-online::before { background: var(--success-fg); }
.status-dot-row.is-away { color: #fbbf24; }
.status-dot-row.is-away::before { background: #fbbf24; }
.status-dot-row.is-offline { color: var(--text-quaternary); }
.status-dot-row.is-offline::before { background: var(--text-muted); }

.team-member-stat {
  font-size: 13px;
  color: var(--text-heading);
  font-weight: 600;
}
.team-member-stat-sub {
  font-size: 11px;
  color: var(--text-quaternary);
}

/* ============== SCROLLBAR ============== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ============== RESPONSIVE ============== */
@media (max-width: 1440px) {
  .top-nav-item { padding: 0 12px; }
}

@media (max-width: 1280px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .bots-grid { grid-template-columns: repeat(2, 1fr); }
  .plans-grid { grid-template-columns: 1fr; }
  .roles-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .search { width: 200px; }
  .top-nav-item span { display: none; }
  .top-nav-item { padding: 0; width: 36px; height: 36px; justify-content: center; }
  .top-nav-item svg { width: 18px; height: 18px; }
  .body-with-side { grid-template-columns: 1fr 300px; }
  .main::before { right: 324px; }
}

@media (max-width: 1200px) {
  .chat-layout { grid-template-columns: 320px 1fr; }
  .team-stats-row { grid-template-columns: repeat(2, 1fr); }
  .team-member-row { grid-template-columns: 1.6fr 0.9fr 0.6fr 110px; }
  .team-member-row .team-member-col-tickets { display: none; }
}

@media (max-width: 1100px) {
  .body-with-side { grid-template-columns: 1fr; }
  .body-side { position: static; max-height: none; }
  .activity-panel { max-height: none; }
  .main::before { display: none; }
  .main:has(.body-with-side) { background: var(--bg-base); }
}

@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .top-nav-list { display: none; }
  .topbar-divider { display: none; }
  .search { display: none; }
  .usage-pill { display: none; }
  .org-picker-trigger span:not(.org-emblem) { display: none; }
  .org-picker-trigger { padding: 0 8px; }
  .topbar { padding: 0 16px; gap: 8px; }
  .mobile-nav-drawer { display: flex; }
  .body { padding: 16px 16px 96px; }
  .stats-row { grid-template-columns: 1fr; }
  .bots-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .table-row { grid-template-columns: 1fr !important; gap: 8px; padding: 14px; }
  .table-row-head { display: none; }
  .col-actions { justify-content: flex-start; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header-right { justify-content: flex-start; }
  .breadcrumbs-bar { padding: 12px 16px 0; }
  .chat-layout { grid-template-columns: 1fr; }
  .chat-list-panel { max-height: 320px; min-height: 280px; }
  .chat-detail-panel { min-height: 480px; }
  .team-stats-row { grid-template-columns: 1fr; }
  .team-member-row { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .team-member-row .team-member-col-status,
  .team-member-row .team-member-col-tickets,
  .team-member-row .team-member-col-actions { justify-content: flex-start; }
}

/* ============== ASSISTANT-DETAIL SPECIFIC ============== */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.radio-group-row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.radio-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-base);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 13px;
  color: var(--text-primary);
  user-select: none;
}
.radio-row:hover { border-color: var(--border-strong); }
.radio-row.is-selected {
  border-color: var(--primary);
  background: var(--primary-muted-bg);
  color: var(--text-heading);
}
.radio-row input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  flex-shrink: 0;
  margin: 0;
  position: relative;
  transition: border-color 0.15s;
}
.radio-row.is-selected input[type="radio"] {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 3px var(--bg-base);
}

.integration-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.integration-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-base);
  border-radius: 12px;
}
.integration-row-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.integration-row-icon svg { width: 20px; height: 20px; }
.integration-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.integration-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
}
.integration-row-meta {
  font-size: 12px;
  color: var(--text-quaternary);
}
.integration-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.multiselect-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.multiselect-chip-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
}
.multiselect-chip svg {
  width: 12px; height: 12px;
  opacity: 0.6;
  cursor: pointer;
}
.multiselect-chip svg:hover { opacity: 1; }

/* ============== TOAST ============== */
.toast-stack {
  position: fixed;
  left: 50%;
  top: 84px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
  pointer-events: none;
}
.toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  max-width: 360px;
}
.toast.is-shown { opacity: 1; transform: translateY(0); }
.toast.is-success { border-color: rgba(74,222,128,0.32); }
.toast.is-success .toast-icon { color: var(--success-fg); background: rgba(74,222,128,0.14); }
.toast.is-error { border-color: rgba(244,63,94,0.32); }
.toast.is-error .toast-icon { color: var(--error-fg); background: rgba(244,63,94,0.14); }
.toast-icon {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 192, 171,0.14);
  color: var(--primary-light);
  flex-shrink: 0;
}
.toast-icon svg { width: 12px; height: 12px; }
.toast-text { min-width: 0; }
.toast-title { font-weight: 600; color: var(--text-heading); }
.toast-body { color: var(--text-tertiary); font-size: 12px; }

/* ============== CONFIRM DIALOG ============== */
.confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.15s;
}
.confirm-backdrop.is-shown { opacity: 1; }
.confirm-dialog {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.confirm-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(244,63,94,0.14);
  color: var(--error-fg);
  margin-bottom: 14px;
}
.confirm-icon svg { width: 20px; height: 20px; }
.confirm-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 6px;
}
.confirm-body {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0 0 18px;
  line-height: 1.5;
}
.confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Missing hover states for interactive-looking rows */
.q-row { cursor: pointer; transition: background 0.15s; }
.q-row:hover { background: var(--bg-elevated); }

.outcome-row { cursor: default; transition: background 0.15s; }

.role-card { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.role-card:not(.is-current):hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}

.legend-stat { transition: opacity 0.15s; }
.overview-legend li:hover .legend-stat { opacity: 0.85; }

/* Split-button dropdown for "New chatbot / assistant" */
.split-btn-wrap {
  position: relative;
  display: inline-flex;
}
.split-btn-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.split-btn-wrap.is-open .split-btn-menu { display: flex; }
.split-btn-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
}
.split-btn-item:hover { background: var(--bg-base); }
.split-btn-item-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.split-btn-item-icon svg { width: 16px; height: 16px; }
.split-btn-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.split-btn-item-title { font-size: 13px; font-weight: 600; color: var(--text-heading); }
.split-btn-item-sub { font-size: 11px; color: var(--text-quaternary); line-height: 1.4; }

/* ============== FILTER POPOVER ============== */
.filter-popover-wrap {
  position: relative;
  display: inline-flex;
}
.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}
.filter-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  display: none;
  flex-direction: column;
  gap: 14px;
  z-index: 100;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.filter-popover-wrap.is-open .filter-popover { display: flex; }
.filter-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.filter-popover-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}
.filter-popover-head .link-primary { font-size: 12px; }
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filter-group-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-chip {
  padding: 5px 10px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.filter-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-heading);
}
.filter-chip.is-active {
  background: var(--primary-muted-bg);
  border-color: var(--primary);
  color: var(--primary-light);
}
.filter-popover-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.filter-popover-count {
  font-size: 12px;
  color: var(--text-quaternary);
}
.bots-empty {
  grid-column: 1 / -1;
  padding: 32px 24px;
  text-align: center;
  color: var(--text-quaternary);
  font-size: 13px;
  background: var(--bg-surface);
  border-radius: 16px;
}

/* ============== DATE RANGE PICKER ============== */
.daterange-wrap { position: relative; display: inline-flex; }
.daterange-popover {
  position: fixed;
  display: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  z-index: 1500;
  overflow: hidden;
  width: 660px;
  max-width: calc(100vw - 32px);
  flex-direction: row;
}
.daterange-wrap.is-open .daterange-popover,
.daterange-popover.is-open { display: flex; }

.daterange-presets {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-base);
  border-right: 1px solid var(--border);
  width: 160px;
  flex-shrink: 0;
}
.daterange-presets li { margin: 0; }
.daterange-preset {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.daterange-preset:hover { background: var(--bg-elevated); color: var(--text-heading); }
.daterange-preset.is-active {
  background: var(--primary-muted-bg);
  color: var(--primary-light);
  font-weight: 500;
}

.daterange-cal-wrap {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.daterange-cal-nav {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 8px;
}
.daterange-cal-months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}
.daterange-nav-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.daterange-nav-btn:hover { background: var(--bg-base); color: var(--text-heading); border-color: var(--border-strong); }
.daterange-nav-btn svg { width: 14px; height: 14px; }

.daterange-cals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.daterange-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 12px;
}
.daterange-cal-head {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 0;
}
.daterange-day {
  position: relative;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  background: transparent;
  border: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: background 0.1s, color 0.1s;
}
.daterange-day.is-out { color: var(--text-quaternary); opacity: 0.45; }
.daterange-day:hover:not(:disabled) { background: var(--bg-base); }
.daterange-day.is-in-range {
  background: var(--primary-muted-bg);
  border-radius: 0;
  color: var(--text-heading);
}
.daterange-day.is-range-start,
.daterange-day.is-range-end {
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  z-index: 1;
}
.daterange-day.is-range-start { border-radius: 6px 0 0 6px; }
.daterange-day.is-range-end { border-radius: 0 6px 6px 0; }
.daterange-day.is-range-start.is-range-end { border-radius: 6px; }
.daterange-day.is-today:not(.is-range-start):not(.is-range-end) {
  outline: 1px solid var(--border-strong);
}

.daterange-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.daterange-input {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}
.daterange-input:focus { border-color: var(--primary); }

/* ============== MODAL ============== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 20px;
  opacity: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.15s;
}
.modal-backdrop[hidden] { display: none !important; }
.modal-backdrop.is-shown { opacity: 1; }
.modal-dialog {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  transform: translateY(10px);
  transition: transform 0.2s;
}
.modal-backdrop.is-shown .modal-dialog { transform: translateY(0); }
.modal-dialog-md { max-width: 560px; }
.modal-dialog-lg { max-width: 720px; }
.modal-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 14px;
}
.modal-head-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-head-icon svg { width: 20px; height: 20px; }
.modal-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.modal-title { font-size: 16px; font-weight: 700; color: var(--text-heading); margin: 0; }
.modal-subtitle { font-size: 13px; color: var(--text-tertiary); margin: 0; line-height: 1.5; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--text-quaternary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: var(--bg-elevated); color: var(--text-heading); }
.modal-close svg { width: 16px; height: 16px; }
.modal-body {
  padding: 4px 22px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
}

/* Invite role rows (radio-like cards) */
.invite-role-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.invite-role-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.invite-role-row:hover { border-color: var(--border-strong); }
.invite-role-row.is-selected {
  border-color: var(--primary);
  background: var(--primary-muted-bg);
}
.invite-role-row input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.invite-role-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.invite-role-name { font-size: 13px; font-weight: 600; color: var(--text-heading); }
.invite-role-sub { font-size: 11px; color: var(--text-quaternary); line-height: 1.4; }
.invite-role-check {
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.invite-role-row.is-selected .invite-role-check {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.invite-role-check svg { width: 12px; height: 12px; }

/* Invite row list (per-row email + role) */
.invite-row-head {
  display: grid;
  grid-template-columns: 1fr 160px 32px;
  gap: 8px;
  margin-bottom: 6px;
  padding: 0 2px;
}
.invite-row-head-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.invite-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.invite-row {
  display: grid;
  grid-template-columns: 1fr 160px 32px;
  gap: 8px;
  align-items: center;
}
.invite-row .invite-row-email,
.invite-row .invite-row-role {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.invite-row .invite-row-email:focus,
.invite-row .invite-row-role:focus { border-color: var(--primary); }
.invite-row.is-invalid .invite-row-email { border-color: var(--error-fg); }
.invite-row .invite-row-role {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
.invite-row-remove {
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  color: var(--text-quaternary);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.invite-row-remove:hover { background: var(--bg-elevated); color: var(--error-fg); }
.invite-row-remove svg { width: 14px; height: 14px; }

/* Invite link block */
.invite-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
}
.invite-link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.invite-link-title { font-size: 12px; font-weight: 600; color: var(--text-heading); }
.invite-link-sub { font-size: 11px; color: var(--text-quaternary); line-height: 1.4; }

/* ============== MEMBER DETAIL PAGE ============== */
.member-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.member-detail-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.avatar-xl {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  font-size: 20px;
  font-weight: 700;
}
.member-detail-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.member-detail-title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.member-detail-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
  letter-spacing: -0.3px;
}
.member-detail-meta {
  font-size: 13px;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.member-detail-meta-sep { color: var(--text-quaternary); }
.member-detail-meta strong { color: var(--text-secondary); font-weight: 500; }
.member-detail-actions { display: inline-flex; gap: 8px; align-items: center; flex-shrink: 0; }

.member-detail-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  align-items: start;
}
.member-detail-side { display: flex; flex-direction: column; gap: 16px; }

.member-perms {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.member-perm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 4px 0;
}
.member-perm svg { width: 14px; height: 14px; flex-shrink: 0; }
.member-perm.is-allowed { color: var(--text-primary); }
.member-perm.is-allowed svg { color: var(--success-fg); }
.member-perm.is-denied { color: var(--text-quaternary); }
.member-perm.is-denied svg { color: var(--error-fg); opacity: 0.7; }

.member-bots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.member-bot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border-radius: 12px;
}
.member-bot-thumb {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.member-bot-thumb svg { width: 18px; height: 18px; }
.member-bot-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.member-bot-name { font-size: 13px; font-weight: 600; color: var(--text-heading); }
.member-bot-sub { font-size: 11px; color: var(--text-quaternary); }

.member-sessions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.member-session {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border-radius: 12px;
}
.member-session-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg-base);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.member-session-icon svg { width: 16px; height: 16px; }
.member-session-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.member-session-name { font-size: 13px; font-weight: 600; color: var(--text-heading); }
.member-session-meta { font-size: 11px; color: var(--text-quaternary); }

@media (max-width: 1100px) {
  .member-detail-grid { grid-template-columns: 1fr; }
  .member-detail-header { flex-direction: column; align-items: flex-start; }
  .member-detail-actions { width: 100%; }
}

/* ============== APP SIDEBAR LAYOUT (alt dashboard) ============== */
.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  background: var(--shell-body);
}
.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 248px;
  flex-shrink: 0;
  background: var(--shell-bar);
  border-right: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 16px;
  overflow-y: auto;
}
.app-sidebar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 12px;
  flex-shrink: 0;
}

/* Workspace switcher at top of sidebar */
.app-sidebar-ws-wrap {
  position: relative;
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  flex-shrink: 0;
}
.app-sidebar-ws {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.app-sidebar-ws:hover { background: var(--bg-base); border-color: var(--border); }
.app-sidebar-ws-wrap.open .app-sidebar-ws { border-color: var(--border-strong); }
.app-sidebar-ws .org-emblem {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-end, #7df0e0) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.app-sidebar-ws-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.app-sidebar-ws-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-sidebar-ws-meta {
  font-size: 11px;
  color: var(--text-quaternary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-sidebar-ws-chev {
  flex-shrink: 0;
  color: var(--text-quaternary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-sidebar-ws-chev svg { width: 14px; height: 14px; }
.app-sidebar-ws-wrap.open .app-sidebar-ws-chev { color: var(--text-secondary); }
.app-sidebar-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.app-sidebar-logo img { height: 22px; }
.app-sidebar-workspace {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s;
  min-width: 0;
}
.app-sidebar-workspace:hover { background: var(--bg-elevated); color: var(--text-heading); }
.app-sidebar-workspace span:nth-child(2) { flex: 1; text-align: left; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar-workspace svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.5; }

.app-sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  min-height: 0;
}
.app-sidebar-section { display: flex; flex-direction: column; gap: 2px; }
.app-sidebar-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-quaternary);
  padding: 6px 10px;
}
.app-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  background: transparent;
  border: 0;
  text-align: left;
  width: 100%;
}
.app-sidebar-item:hover { background: var(--bg-elevated); color: var(--text-heading); }
.app-sidebar-item.is-active {
  background: var(--primary-muted-bg);
  color: var(--primary-light);
}
.app-sidebar-item-icon {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.85;
}
.app-sidebar-item-icon svg { width: 18px; height: 18px; }
.app-sidebar-item.is-active .app-sidebar-item-icon { opacity: 1; }
.app-sidebar-item-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar-count {
  background: var(--bg-elevated);
  color: var(--text-quaternary);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.app-sidebar-item.is-active .app-sidebar-count { background: rgba(31, 192, 171,0.24); color: var(--primary-light); }

.app-sidebar-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 28px;
  margin-top: 2px;
}
.app-sidebar-sub a {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 400;
  border-radius: 6px;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.app-sidebar-sub a:hover { background: var(--bg-elevated); color: var(--text-heading); }

.app-sidebar-bots {
  padding-left: 8px;
  gap: 2px;
}
.app-sidebar-bot {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 8px !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  border-radius: 7px !important;
}
.app-sidebar-bot-thumb {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-sidebar-bot-thumb svg {
  width: 12px;
  height: 12px;
  color: #fff;
}
.app-sidebar-bot-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.app-sidebar-sub a.app-sidebar-bot.is-active {
  background: var(--primary-muted-bg);
  color: var(--primary-light) !important;
}

.app-sidebar-foot {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.app-sidebar-user-wrap {
  margin-top: 8px;
  position: relative;
}
.app-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: 10px;
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
  font: inherit;
  color: inherit;
}
.app-sidebar-user:hover { background: var(--bg-base); border-color: var(--border); }
.app-sidebar-user-wrap.open .app-sidebar-user { border-color: var(--border-strong); }
.app-sidebar-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.app-sidebar-user-name { font-size: 12px; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar-user-meta { font-size: 10px; color: var(--text-quaternary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar-user-chev {
  color: var(--text-quaternary);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}
.app-sidebar-user-chev svg { width: 14px; height: 14px; }
.app-sidebar-user-wrap.open .app-sidebar-user-chev { transform: rotate(180deg); color: var(--text-secondary); }

/* Main content area in alt shell */
.app-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.app-content-topbar {
  height: 56px;
  min-height: 56px;
  flex-shrink: 0;
  padding: 0 24px;
  background: var(--shell-bar);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.app-content-topbar-left { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.app-content-topbar-title { font-size: 15px; font-weight: 700; color: var(--text-heading); }
.app-content-topbar-meta { font-size: 12px; color: var(--text-quaternary); }
.app-content-topbar-right { display: inline-flex; align-items: center; gap: 8px; }
.app-content-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background: var(--shell-body);
  position: relative;
  padding: 0;
  border-top-left-radius: 20px;
}
/* When body wraps a detail-shell, the detail-nav supplies its own rounded
   corner — drop body's own radius so the shell-bar can't peek through the
   matching radii. */
.app-content-body:has(.detail-shell) {
  border-top-left-radius: 0;
}
.app-content-topbar { border-bottom: 0 !important; }
.app-content { background: var(--shell-bar); }
/* When the app-content-body acts as the dashboard surface (no internal .body),
   it gets default padding via inner wrappers (.body, .breadcrumbs-bar, etc.). */
.app-content-body > .stats-row,
.app-content-body > .form-row,
.app-content-body > .card,
.app-content-body > .grid {
  margin-left: 24px;
  margin-right: 24px;
}
.app-content-body > .stats-row:first-child,
.app-content-body > .form-row:first-child,
.app-content-body > .card:first-child,
.app-content-body > .grid:first-child {
  margin-top: 24px;
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar { position: relative; height: auto; }
}

/* ============== DETAIL SHELL (second-layer sidebar for bot pages) ============== */
.detail-shell {
  display: grid;
  grid-template-columns: 216px 1fr;
  gap: 0;
  align-items: flex-start;
  flex: 1;
  width: 100%;
  background: var(--shell-body);
}
.detail-nav {
  position: sticky;
  top: 56px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  background: var(--shell-aux);
  border-right: 1px solid var(--border);
  align-self: stretch;
  min-height: calc(100vh - 56px);
  border-top-left-radius: 20px;
}
.detail-nav-label { display: none; }
.detail-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-decoration: none;
}
.detail-nav-item svg { display: none; }
.detail-nav-item:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.detail-nav-item.is-active,
.detail-nav-item.active {
  background: var(--primary-muted-bg);
  color: var(--primary-light);
  font-weight: 600;
}
.detail-nav-item.is-danger {
  color: var(--danger-fg);
}
.detail-nav-item.is-danger:hover { background: rgba(239,68,68,0.08); }
.detail-nav-item.is-danger.is-active,
.detail-nav-item.is-danger.active {
  background: rgba(239,68,68,0.12);
  color: var(--danger-fg);
}
.detail-nav-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 6px;
}
.detail-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--shell-body);
  border-top-left-radius: 20px;
}
.detail-main > .bot-detail-header {
  margin: 0 0 8px;
}
.detail-main #tabPanels { display: contents; }
.detail-main .tab-panel { display: none; flex-direction: column; gap: 16px; }
.detail-main .tab-panel.active { display: flex; }

@media (max-width: 1100px) {
  .detail-shell { grid-template-columns: 184px 1fr; gap: 18px; }
}
@media (max-width: 900px) {
  .detail-shell { grid-template-columns: 1fr; padding: 0 16px 16px; }
  .detail-nav {
    position: relative;
    top: auto;
    flex-direction: row;
    overflow-x: auto;
    flex-wrap: nowrap;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    min-height: 0;
    align-self: auto;
  }
  .detail-nav-label { display: none; }
  .detail-nav-item { flex-shrink: 0; }
}

/* ============== GUIDANCE TAB ============== */
.guidance-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guidance-group {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.guidance-group:last-child { border-bottom: 0; padding-bottom: 0; }
.guidance-group:first-child { padding-top: 4px; }
.guidance-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.guidance-group-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-subtle);
  color: var(--primary-light);
  flex-shrink: 0;
}
.guidance-group-icon svg { width: 15px; height: 15px; }
.guidance-group-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
}
.guidance-rules {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.guidance-rule {
  display: flex;
  align-items: center;
  gap: 8px;
}
.guidance-rule-input { flex: 1; min-width: 0; }
.guidance-rule-del {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-quaternary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.guidance-rule-del svg { width: 16px; height: 16px; }
.guidance-rule-del:hover {
  background: var(--error-bg);
  color: var(--error-fg);
  border-color: var(--error-border);
}
.guidance-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.guidance-suggest-label {
  font-size: 12px;
  color: var(--text-quaternary);
  margin-right: 2px;
}
.guidance-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.guidance-chip::before {
  content: "+";
  font-size: 13px;
  line-height: 1;
  color: var(--text-quaternary);
  transition: color 0.15s;
}
.guidance-chip:hover {
  background: var(--primary-subtle);
  border-color: var(--primary);
  border-style: solid;
  color: var(--primary-light);
}
.guidance-chip:hover::before { color: var(--primary-light); }
.guidance-chip.is-used {
  opacity: 0.4;
  pointer-events: none;
}
.guidance-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-light);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.guidance-add-btn svg { width: 16px; height: 16px; }
.guidance-add-btn:hover { background: var(--primary-subtle); }

/* ============== CONVERSATIONS PAGE ============== */
.convos-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--border);
}
.convos-bot-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.convos-bot-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.convos-bot-pill:hover { background: var(--bg-elevated); color: var(--text-heading); border-color: var(--border-strong); }
.convos-bot-pill.is-active {
  background: var(--primary-muted-bg);
  color: var(--primary-light);
  border-color: rgba(31, 192, 171,0.35);
}
.convos-bot-pill-icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.convos-bot-pill-count {
  font-size: 11px;
  color: var(--text-quaternary);
  background: var(--bg-elevated);
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
}
.convos-bot-pill.is-active .convos-bot-pill-count { background: rgba(31, 192, 171,0.18); color: var(--primary-light); }

.convos-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 0;
}

/* Bot indicator dot on user avatar */
.chat-list-item-avatar {
  position: relative;
}
.chat-bot-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--shell-body);
  flex-shrink: 0;
}
.chat-list-item.is-active .chat-bot-dot { border-color: var(--primary-muted-bg); }

.chat-list-item-bot {
  color: var(--text-tertiary);
  font-weight: 600;
}

.chat-detail-header-bot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ============== ASSISTANT TEST CHAT ============== */
.test-chat {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 !important;
  overflow: hidden;
  position: fixed;
  top: 80px;
  right: 24px;
  bottom: 24px;
  width: clamp(360px, 38vw, 560px);
  z-index: 50;
}
/* Reserve space on the Persona panel so form doesn't slide under the fixed chat */
.tab-panel[data-panel="persona"] .split {
  grid-template-columns: 1fr;
  padding-right: clamp(384px, calc(38vw + 24px), 584px);
}
/* Also reserve space at body level so the tabs strip + header don't slide under */
.body:has(.tab-panel[data-panel="persona"].active) > .bot-detail-header {
  padding-right: clamp(384px, calc(38vw + 24px), 584px);
}
.body:has(.tab-panel[data-panel="persona"].active) > .tabs {
  max-width: calc(100% - clamp(384px, calc(38vw + 24px), 584px));
}
.test-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.test-chat-head-left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.test-chat-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.test-chat-avatar svg { width: 18px; height: 18px; }
.test-chat-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.test-chat-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
}
.test-chat-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-quaternary);
}
.test-chat-status-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--success-fg);
  box-shadow: 0 0 6px rgba(74,222,128,0.6);
}
.test-chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.test-chat-msg {
  display: flex;
  gap: 10px;
  max-width: 90%;
}
.test-chat-msg.is-user {
  flex-direction: row-reverse;
  align-self: flex-end;
}
.test-chat-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  margin-top: auto;
}
.test-chat-msg.is-user .test-chat-msg-avatar {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
.test-chat-msg-avatar svg { width: 14px; height: 14px; }
.test-chat-msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: calc(100% - 38px);
}
.test-chat-msg-bubble {
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  word-wrap: break-word;
  white-space: pre-wrap;
}
.test-chat-msg.is-user .test-chat-msg-bubble {
  background: var(--primary-subtle);
  color: var(--text-primary);
  border-color: rgba(31, 192, 171,0.24);
  border-radius: 14px 14px 4px 14px;
}
.test-chat-msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-quaternary);
  padding: 0 4px;
}
.test-chat-msg.is-user .test-chat-msg-meta { justify-content: flex-end; }
.test-chat-msg-meta-name { color: var(--text-tertiary); font-weight: 600; }
.test-chat-msg-bubble.is-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
}
.test-chat-msg-bubble.is-typing span {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--text-tertiary);
  animation: dotPulse 1.4s infinite ease-in-out;
}
.test-chat-msg-bubble.is-typing span:nth-child(2) { animation-delay: 0.2s; }
.test-chat-msg-bubble.is-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
.test-chat-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 18px 12px;
}
.test-chat-starter {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.test-chat-starter:hover {
  border-color: var(--primary);
  color: var(--text-heading);
}
.test-chat-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.test-chat-textarea {
  flex: 1;
  resize: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  max-height: 140px;
  overflow-y: auto;
  outline: none;
  transition: border-color 0.15s;
}
.test-chat-textarea:focus { border-color: var(--primary); }
.test-chat-send {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, opacity 0.15s;
}
.test-chat-send:hover { background: var(--primary-end, var(--primary)); }
.test-chat-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.test-chat-send svg { width: 16px; height: 16px; }
.test-chat-foot {
  padding: 0 18px 14px;
  font-size: 11px;
  color: var(--text-quaternary);
}
.test-chat-starters:empty,
.test-chat-starters[hidden] { display: none; }