/* ═══════════════════════════════════════════════════════════════
   playbooks.css — Playbooks tab
   ───────────────────────────────────────────────────────────────
   Selectors that ONLY render in the Playbooks tab.
   Includes the markdown content renderer families (.dash-pb-wa-*,
   .dash-pb-ig-*, .dash-pb-sms-*, .dash-pb-email-*, .dash-pb-rzp-*,
   .dash-pb-botflow-*, .dash-pb-step-desc *, .dash-pb-callout,
   .dash-pb-scenario, .dash-pb-video).
   Excludes .dash-pb-icon--xs/--sm/--md/--lg utility classes (shared,
   stays in dashboard.css per Phase 5h).
   Extracted from dashboard.css in Phase 3.5 (2026-05-30).
   Loaded AFTER dashboard.css; shared chrome lives there.
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   PLAYBOOKS — Industry-segmented setup guides
   3-tier IA: industry browse → industry detail → playbook detail
   ═══════════════════════════════════════════════════════════════ */

.dash-pb-root { max-width: 1000px; margin: 0 auto; overflow-wrap: anywhere; min-width: 0; }

/* ── Shared breadcrumb ──────────────────────────────────────── */
.dash-pb-breadcrumb {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--text-muted);
  margin-bottom: 0.85rem; flex-wrap: wrap;
}
.dash-pb-breadcrumb a {
  color: var(--text-muted); cursor: pointer;
  transition: color 0.15s; text-decoration: none;
}
.dash-pb-breadcrumb a:hover { color: var(--accent-green, var(--accent-green)); }
.dash-pb-breadcrumb .sep { color: var(--text-tertiary, #4a5264); }
.dash-pb-breadcrumb .current { color: var(--text-primary); }

/* ══════════════════════════════════════════════════════════════ */
/* TIER 1 — Industry browse                                        */
/* ══════════════════════════════════════════════════════════════ */

/* Phase 5h — .dash-pb-intro retired in favour of .dash-snapshot-hero--single
   wrapper (.dash-pb2-hero) for the Playbooks landing strip. */

/* Search bar + market filter pills */
.dash-pb-toolbar {
  display: flex; flex-direction: column; gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.dash-pb-search-wrap {
  position: relative;
  display: flex; align-items: center;
}
.dash-pb-search-icon {
  position: absolute; left: 0.85rem;
  color: var(--text-muted); pointer-events: none;
}
.dash-pb-search {
  width: 100%;
  padding: 0.7rem 0.85rem 0.7rem 2.35rem;
  background: var(--bg-surface, #141720);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s;
}
.dash-pb-search:focus {
  border-color: rgba(37,211,102,0.35);
}
.dash-pb-search::placeholder { color: var(--text-muted); }

.dash-pb-market-filter {
  display: flex; gap: 0.4rem;
  flex-wrap: wrap;
}
.dash-pb-market-dropdown { display: none; }
.dash-pb-market-dropdown select {
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: var(--bg-surface, #141720);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}
.dash-pb-market-dropdown select:focus { border-color: rgba(37,211,102,0.35); }

/* Phase 5h — .dash-pb-market-pill / .dash-pb-market-tag / .dash-pb-no-results
   retired. Market filter buttons now use .dash-ch2-pill (unified pill system)
   plus .dash-pb2-filter for cursor + flag spacing. Card chips use
   .dash-ch2-pill --neutral via .dash-pb2-market. Empty + no-results states
   use .dash-pb2-empty-tile (Phase 5e onboarding-tile pattern). */

/* Market pill containers — chips on cards + hero */
.dash-pb-markets {
  display: inline-flex; gap: 0.3rem; flex-wrap: wrap;
  margin-top: 0.4rem;
}

.dash-pb-industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 0.9rem;
}

.dash-pb-industry-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.35rem 1.25rem 1.15rem 1.25rem;
  background: var(--bg-card, #181b23);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-xl, 1rem);
  cursor: pointer; overflow: hidden;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.dash-pb-industry-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--pb-accent, var(--accent-green));
  opacity: 0.6; transition: opacity 0.2s, width 0.2s;
}
.dash-pb-industry-card:hover {
  border-color: rgba(255,255,255,0.14);
  background: var(--bg-card-hover, #1e222c);
  transform: translateY(-1px);
}
.dash-pb-industry-card:hover::before { opacity: 1; width: 4px; }

.dash-pb-industry-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: color-mix(in srgb, var(--pb-accent, var(--accent-green)) 12%, transparent);
  color: var(--pb-accent, var(--accent-green));
  margin-bottom: 0.75rem;
}
.dash-pb-industry-card h3 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text-primary);
  margin: 0 0 0.35rem 0; line-height: 1.3;
}
.dash-pb-industry-card p {
  font-size: 0.82rem; color: var(--text-secondary);
  line-height: 1.5; margin: 0 0 0.85rem 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dash-pb-industry-count {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; font-weight: 600; color: var(--pb-accent, var(--accent-green));
  margin-top: auto;
}

/* Phase 5h — .dash-pb-empty-state retired in favour of .dash-pb2-empty-tile
   (icon + heading + one-line copy + optional CTA), matching the Phase 5e
   onboarding-tile pattern used across other dashboard tabs. */

/* ══════════════════════════════════════════════════════════════ */
/* TIER 2 — Industry detail + playbook list                        */
/* ══════════════════════════════════════════════════════════════ */

/* Phase 5h — .dash-pb-ind-hero retired in favour of
   .dash-snapshot-hero--single.dash-snapshot-hero--icon (.dash-pb2-hero--industry
   modifier), so the industry chrome matches the unified hero shell used by
   Subscription / Account / E-Commerce. Accent-color CSS variable (--pb-accent)
   still drives the left rail + icon tint via .dash-pb2-hero--industry. */

/* Playbook cards list */
.dash-pb-list { display: flex; flex-direction: column; gap: 0.6rem; }

.dash-pb-card {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--bg-card, #181b23);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 12px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.dash-pb-card:hover {
  border-color: rgba(37,211,102,0.3);
  background: rgba(37,211,102,0.03);
  transform: translateX(2px);
}
.dash-pb-card-body { flex: 1; min-width: 0; }
.dash-pb-card-meta {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.35rem; flex-wrap: wrap;
}
.dash-pb-card h4 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1rem; font-weight: 600;
  letter-spacing: -0.005em; color: var(--text-primary);
  margin: 0 0 0.25rem 0; line-height: 1.35;
}
.dash-pb-card p {
  font-size: 0.82rem; color: var(--text-secondary);
  line-height: 1.5; margin: 0;
}
.dash-pb-card-arrow {
  color: var(--text-muted); transition: transform 0.2s, color 0.2s;
  flex-shrink: 0; align-self: center;
}
.dash-pb-card:hover .dash-pb-card-arrow {
  color: var(--accent-green, var(--accent-green)); transform: translateX(3px);
}

/* Difficulty badge */
.dash-pb-diff {
  display: inline-block; font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.2rem 0.5rem; border-radius: 4px;
}
.dash-pb-diff--beginner     { background: rgba(37,211,102,0.12); color: var(--accent-green); }
.dash-pb-diff--intermediate { background: rgba(245,158,11,0.12); color: #f59e0b; }
.dash-pb-diff--advanced     { background: rgba(239,68,68,0.12);  color: #ef4444; }

.dash-pb-time {
  font-size: 0.72rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════ */
/* TIER 3 — Playbook detail (migrate.html-style scenario cards)    */
/* ══════════════════════════════════════════════════════════════ */

.dash-pb-detail { max-width: 820px; }

.dash-pb-detail-hero {
  margin-bottom: 1.5rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}
.dash-pb-detail-hero-meta {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.85rem; flex-wrap: wrap;
}
.dash-pb-detail-hero h1 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-primary); margin: 0 0 0.5rem 0; line-height: 1.2;
}
.dash-pb-detail-hero .subtitle {
  font-size: 1rem; color: var(--text-secondary);
  line-height: 1.5; margin: 0;
}

/* "What you'll build" box */
.dash-pb-build {
  background: rgba(37,211,102,0.05);
  border: 1px solid rgba(37,211,102,0.15);
  border-radius: 12px; padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
}
.dash-pb-build-label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-green, var(--accent-green)); margin-bottom: 0.5rem;
}
.dash-pb-build p {
  font-size: 0.88rem; color: var(--text-secondary);
  line-height: 1.55; margin: 0;
}

/* Requirements checklist */
.dash-pb-reqs {
  background: var(--bg-surface, #141720);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.dash-pb-reqs h4 {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin: 0 0 0.65rem 0;
}
.dash-pb-reqs-list { list-style: none; padding: 0; margin: 0; }
.dash-pb-reqs-list li {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0; font-size: 0.85rem; color: var(--text-secondary);
}
.dash-pb-reqs-list li i { flex-shrink: 0; }
.dash-pb-reqs-list li.met i { color: var(--accent-green, var(--accent-green)); }
.dash-pb-reqs-list li.unmet i { color: var(--text-tertiary, #4a5264); }

/* Scenario cards (steps) */
.dash-pb-scenario {
  background: var(--bg-card, #181b23);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 14px; padding: 1.5rem;
  margin-bottom: 1rem;
  border-left: 4px solid var(--glass-border);
  overflow: hidden;
  overflow-wrap: anywhere;
}
.dash-pb-scenario--green  { border-left-color: var(--accent-green, var(--accent-green)); }
.dash-pb-scenario--amber  { border-left-color: #f59e0b; }
.dash-pb-scenario--blue   { border-left-color: #3b82f6; }
.dash-pb-scenario--purple { border-left-color: #a78bfa; }
.dash-pb-scenario--red    { border-left-color: #ef4444; }

.dash-pb-step-header {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.dash-pb-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(37,211,102,0.12); color: var(--accent-green, var(--accent-green));
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 0.85rem; font-weight: 700;
}
.dash-pb-step-title {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.05rem; font-weight: 600;
  color: var(--text-primary); line-height: 1.3;
}
.dash-pb-step-desc {
  font-size: 0.88rem; color: var(--text-secondary);
  line-height: 1.6; margin: 0 0 0.85rem 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
.dash-pb-step-desc p { margin: 0 0 0.55rem 0; }
.dash-pb-step-desc p:last-child { margin-bottom: 0; }
.dash-pb-step-desc a {
  color: var(--accent-green, var(--accent-green));
  text-decoration: underline; text-underline-offset: 2px;
}
.dash-pb-step-desc code {
  background: var(--bg-surface, #141720);
  padding: 0.12rem 0.4rem; border-radius: 4px;
  font-size: 0.85em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-primary);
}
.dash-pb-step-desc ol, .dash-pb-step-desc ul {
  padding-left: 1.25rem; margin: 0.4rem 0;
}
.dash-pb-step-desc li { margin: 0.25rem 0; }

/* Callouts — 4 variants (info, success, warning, danger) */
.dash-pb-callout {
  padding: 0.75rem 1rem; border-radius: 8px;
  font-size: 0.85rem; line-height: 1.55;
  margin: 0.85rem 0; border: 1px solid;
}
.dash-pb-callout strong { font-weight: 700; }
.dash-pb-callout--info    { background: rgba(59,130,246,0.06);  border-color: rgba(59,130,246,0.18);  color: var(--text-secondary); }
.dash-pb-callout--info strong    { color: #3b82f6; }
.dash-pb-callout--success { background: rgba(37,211,102,0.06);  border-color: rgba(37,211,102,0.18);  color: var(--text-secondary); }
.dash-pb-callout--success strong { color: var(--accent-green, var(--accent-green)); }
.dash-pb-callout--warning { background: rgba(245,158,11,0.06);  border-color: rgba(245,158,11,0.18);  color: var(--text-secondary); }
.dash-pb-callout--warning strong { color: #f59e0b; }
.dash-pb-callout--danger  { background: rgba(239,68,68,0.06);   border-color: rgba(239,68,68,0.18);   color: var(--text-secondary); }
.dash-pb-callout--danger strong  { color: #ef4444; }

/* YouTube video embed (16:9 responsive) */
.dash-pb-video {
  position: relative; width: 100%; padding-top: 56.25%;
  background: #000; border-radius: 10px; overflow: hidden;
  margin: 0.85rem 0;
}
.dash-pb-video iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: 0;
}

/* Clone URL card — prominent CTA */
.dash-pb-clone {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, rgba(37,211,102,0.08), rgba(16,185,129,0.04));
  border: 1px solid rgba(37,211,102,0.25);
  border-radius: 12px; margin: 0.85rem 0;
}
.dash-pb-clone-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  background: rgba(37,211,102,0.15); color: var(--accent-green, var(--accent-green));
}
.dash-pb-clone-body { flex: 1; min-width: 0; }
.dash-pb-clone-title {
  font-size: 0.8rem; font-weight: 700; color: var(--text-primary);
  margin: 0 0 0.15rem 0;
}
.dash-pb-clone-desc {
  font-size: 0.75rem; color: var(--text-muted); margin: 0; line-height: 1.4;
}
.dash-pb-clone-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.dash-pb-clone-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.45rem 0.75rem; border-radius: 6px;
  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  background: rgba(37,211,102,0.12); border: 1px solid rgba(37,211,102,0.25);
  color: var(--accent-green, var(--accent-green)); cursor: pointer;
  transition: all 0.15s;
}
.dash-pb-clone-btn:hover {
  background: var(--accent-green, var(--accent-green)); color: #000; border-color: var(--accent-green, var(--accent-green));
}
.dash-pb-clone-btn.placeholder { opacity: 0.5; cursor: not-allowed; }
.dash-pb-clone-btn.placeholder:hover {
  background: rgba(37,211,102,0.12); color: var(--accent-green, var(--accent-green));
}

/* After-setup outcomes */
.dash-pb-outcomes {
  margin-top: 1.5rem; padding: 1.15rem 1.25rem;
  background: rgba(37,211,102,0.04);
  border: 1px solid rgba(37,211,102,0.15);
  border-radius: 12px;
}
.dash-pb-outcomes h4 {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-green, var(--accent-green));
  margin: 0 0 0.6rem 0;
}
.dash-pb-outcomes ul { list-style: none; padding: 0; margin: 0; }
.dash-pb-outcomes li {
  position: relative; padding: 0.3rem 0 0.3rem 1.4rem;
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5;
}
.dash-pb-outcomes li::before {
  content: '✓'; position: absolute; left: 0; top: 0.3rem;
  color: var(--accent-green, var(--accent-green)); font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   PLAYBOOKS — Markdown content rendering (step descriptions)
   ═══════════════════════════════════════════════════════════════ */

/* Headings inside step content */
.dash-pb-step-desc .dash-pb-h1,
.dash-pb-step-desc .dash-pb-h2,
.dash-pb-step-desc .dash-pb-h3,
.dash-pb-step-desc .dash-pb-h4,
.dash-pb-step-desc .dash-pb-h5,
.dash-pb-step-desc .dash-pb-h6 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.35;
  margin: 1.1rem 0 0.5rem 0;
}
.dash-pb-step-desc .dash-pb-h1 { font-size: 1.25rem; }
.dash-pb-step-desc .dash-pb-h2 { font-size: 1.1rem; }
.dash-pb-step-desc .dash-pb-h3 { font-size: 1rem; }
.dash-pb-step-desc .dash-pb-h4 { font-size: 0.92rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.dash-pb-step-desc .dash-pb-h5 { font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); }
.dash-pb-step-desc .dash-pb-h6 { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.dash-pb-step-desc > *:first-child { margin-top: 0; }

/* Strikethrough */
.dash-pb-step-desc del {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* Inline code */
.dash-pb-code-inline {
  background: var(--bg-surface, #141720);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82em;
  color: var(--accent-green, var(--accent-green));
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Fenced code blocks */
.dash-pb-code-block {
  position: relative;
  background: var(--bg-dark, #0f1117);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 0.85rem 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-primary);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.dash-pb-code-block::-webkit-scrollbar { height: 6px; }
.dash-pb-code-block::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.dash-pb-code-block code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}
.dash-pb-code-block[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-family: var(--font-sans);
}

/* Blockquote */
.dash-pb-blockquote {
  border-left: 3px solid var(--accent-green, var(--accent-green));
  background: rgba(37,211,102,0.04);
  padding: 0.7rem 1rem;
  margin: 0.85rem 0;
  border-radius: 0 8px 8px 0;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ═════════════════════════════════════════════════════════
   WhatsApp Message Template Preview (:::wa-template blocks)
   Realistic dark-theme WA bubble with media, body, buttons
   ═════════════════════════════════════════════════════════ */
.dash-pb-wa-msg {
  max-width: 360px;
  background: #202C33;
  border-radius: 8px;
  overflow: hidden;
  margin: 1.1rem 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.2px;
  line-height: 1.42;
  color: #E9EDEF;
  box-shadow:
    0 1px 0.5px rgba(0,0,0,0.13),
    0 6px 16px -6px rgba(0,0,0,0.4);
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  /* WhatsApp chat wallpaper feel — subtle gradient border */
  border: 1px solid rgba(134,150,160,0.08);
}
.dash-pb-wa-msg:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0.5px rgba(0,0,0,0.13),
    0 10px 24px -8px rgba(0,0,0,0.5);
}

/* Sender strip (optional) */
.dash-pb-wa-sender {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(134,150,160,0.08);
}
.dash-pb-wa-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-pb-wa-name { font-size: 13px; font-weight: 600; color: #E9EDEF; }
.dash-pb-wa-verified { width: 14px; height: 14px; flex-shrink: 0; }

/* Media header (image/video placeholder) */
.dash-pb-wa-msg .dash-pb-wa-media {
  aspect-ratio: 1.78 / 1;
  background:
    linear-gradient(135deg, #2A3942 0%, #1F2C34 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 10px, transparent 10px, transparent 20px);
  margin: 3px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #54656F;
  position: relative;
}
.dash-pb-wa-msg .dash-pb-wa-media svg { width: 38px; height: 38px; opacity: 0.55; }
.dash-pb-wa-msg .dash-pb-wa-media[data-type="video"] svg { width: 52px; height: 52px; opacity: 0.75; }

/* Body */
.dash-pb-wa-body {
  padding: 6px 9px 4px 9px;
}
.dash-pb-wa-text {
  color: #E9EDEF;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  font-size: 14.2px;
  line-height: 1.42;
}
.dash-pb-wa-text strong { font-weight: 600; color: #E9EDEF; }
.dash-pb-wa-text em { font-style: italic; color: #E9EDEF; opacity: 0.95; }
.dash-pb-wa-text del { text-decoration: line-through; opacity: 0.7; }
.dash-pb-wa-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.88em;
  color: #E9EDEF;
}

/* Footer disclaimer (e.g., "Reply STOP to unsubscribe") */
.dash-pb-wa-footer {
  margin-top: 6px;
  font-size: 12.5px;
  color: #8696A0;
  line-height: 1.4;
}

/* Timestamp + delivery ticks row */
.dash-pb-wa-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
  margin-right: 2px;
  min-height: 15px;
}
.dash-pb-wa-time {
  font-size: 11px;
  color: #8696A0;
  line-height: 1;
}
.dash-pb-wa-ticks {
  width: 16px;
  height: 15px;
  flex-shrink: 0;
}

/* Buttons (CTA / Quick Reply) */
.dash-pb-wa-buttons {
  border-top: 1px solid rgba(134,150,160,0.15);
  margin-top: 3px;
}
.dash-pb-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  color: #53BDEB;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: default;
  border-top: 1px solid rgba(134,150,160,0.15);
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}
.dash-pb-wa-btn:first-child { border-top: none; }
.dash-pb-wa-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
}
.dash-pb-wa-btn:hover {
  background: rgba(83,189,235,0.08);
  color: #7BD1F0;
}
.dash-pb-wa-btn[data-type="reply"] {
  color: #53BDEB;
}
.dash-pb-wa-btn[data-type="cta"],
.dash-pb-wa-btn[data-type="link"] {
  color: #53BDEB;
}
.dash-pb-wa-btn[data-type="call"] {
  color: #53BDEB;
}
.dash-pb-wa-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════
   WhatsApp Carousel Cards (inside :::wa-template blocks)
   Horizontal scrollable card strip — mimics native carousel
   ═════════════════════════════════════════════════════════ */
.dash-pb-wa-carousel {
  margin-top: 6px;
  margin-left: -2px;
  margin-right: -2px;
  position: relative;
}
.dash-pb-wa-carousel-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.dash-pb-wa-carousel-track::-webkit-scrollbar {
  height: 4px;
}
.dash-pb-wa-carousel-track::-webkit-scrollbar-track {
  background: transparent;
}
.dash-pb-wa-carousel-track::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
}
.dash-pb-wa-carousel-card {
  flex: 0 0 164px;
  scroll-snap-align: start;
  background: #1a2332;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease;
}
.dash-pb-wa-carousel-card:hover {
  border-color: rgba(37,211,102,0.25);
}
.dash-pb-wa-carousel-img {
  height: 96px;
  background: linear-gradient(135deg, rgba(37,211,102,0.08) 0%, rgba(108,92,231,0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dash-pb-wa-carousel-img span {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.02em;
}
.dash-pb-wa-carousel-img svg {
  width: 28px;
  height: 28px;
  color: rgba(255,255,255,0.12);
}
.dash-pb-wa-carousel-body {
  padding: 10px 10px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dash-pb-wa-carousel-title {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dash-pb-wa-carousel-desc {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dash-pb-wa-carousel-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: #53BDEB;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dash-pb-wa-carousel-cta:hover {
  background: rgba(83,189,235,0.06);
}
.dash-pb-wa-carousel-cta svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════
   Bot Flow Diagram (:::bot-flow blocks)
   Vertical node-by-node visual builder representation
   ═════════════════════════════════════════════════════════ */
.dash-pb-botflow {
  margin: 1.3rem 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.2rem;
  position: relative;
}
.dash-pb-botflow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    radial-gradient(circle at 12px 12px, rgba(255,255,255,0.04) 1px, transparent 1.5px) 0 0 / 16px 16px;
  opacity: 0.5;
  pointer-events: none;
}
.dash-pb-botflow-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 0.85rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  position: relative;
}
.dash-pb-botflow-header svg { width: 14px; height: 14px; opacity: 0.7; }
.dash-pb-botflow-nodes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: relative;
}

/* Individual node card */
.dash-pb-botflow-node {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid var(--node-tint, var(--accent-green));
  border-radius: 8px;
  padding: 10px 12px;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  position: relative;
}
.dash-pb-botflow-node:hover {
  background: rgba(255,255,255,0.04);
  border-left-color: var(--node-tint, var(--accent-green));
  transform: translateX(2px);
}
.dash-pb-botflow-node-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--node-tint, var(--accent-green)) 14%, transparent);
  color: var(--node-tint, var(--accent-green));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-pb-botflow-node-icon svg { width: 16px; height: 16px; }
.dash-pb-botflow-node-body { flex: 1; min-width: 0; }
.dash-pb-botflow-node-type {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--node-tint, var(--accent-green));
  margin-bottom: 2px;
}
.dash-pb-botflow-node-text {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.dash-pb-botflow-node-text strong { font-weight: 600; }
.dash-pb-botflow-node-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82em;
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-primary);
}
.dash-pb-botflow-node-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  margin-top: 7px;
}
.dash-pb-botflow-opt {
  font-size: 0.74rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--node-tint, var(--accent-green)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--node-tint, var(--accent-green)) 22%, transparent);
  color: color-mix(in srgb, var(--node-tint, var(--accent-green)) 92%, #ffffff 30%);
  font-weight: 500;
  line-height: 1.2;
}

/* Connector arrow between nodes */
.dash-pb-botflow-connector {
  width: 2px;
  height: 20px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 100%);
  position: relative;
}
.dash-pb-botflow-connector::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255,255,255,0.22);
}

/* ── Bot Flow: CONDITION branching ────────────────────────────────── */

/* The condition node gets a fork indicator icon */
.dash-pb-botflow-node--condition {
  position: relative;
}
.dash-pb-botflow-fork-icon {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  opacity: 0.5;
  color: var(--node-tint, #F97316);
}
.dash-pb-botflow-fork-icon svg {
  width: 100%;
  height: 100%;
}

/* Branch container — side by side columns */
.dash-pb-botflow-branches {
  display: grid;
  grid-template-columns: repeat(var(--branch-count, 2), minmax(140px, 1fr));
  gap: 8px;
  margin: 4px 0;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
  padding-bottom: 4px;
}
.dash-pb-botflow-branches::-webkit-scrollbar { height: 4px; }
.dash-pb-botflow-branches::-webkit-scrollbar-track { background: transparent; }
.dash-pb-botflow-branches::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
/* Top fork lines connecting condition to branches */
.dash-pb-botflow-branches::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 1px;
}

/* Individual branch column */
.dash-pb-botflow-branch {
  border-left: 3px solid var(--branch-color, var(--accent-emerald));
  border-radius: 0 8px 8px 0;
  background: rgba(255,255,255,0.02);
  padding: 8px 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
/* Vertical connector from top fork line down to branch */
.dash-pb-botflow-branch::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -2px;
  width: 2px;
  height: 8px;
  background: var(--branch-color, var(--accent-emerald));
}

/* Branch label (e.g., "Branch A - YES") */
.dash-pb-botflow-branch-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 2px;
}

/* Nodes inside branches inherit smaller sizing */
.dash-pb-botflow-branch .dash-pb-botflow-node {
  padding: 7px 8px;
  gap: 8px;
  border-radius: 8px;
}
.dash-pb-botflow-branch .dash-pb-botflow-node-icon {
  width: 26px;
  height: 26px;
}
.dash-pb-botflow-branch .dash-pb-botflow-node-type {
  font-size: 9px;
}
.dash-pb-botflow-branch .dash-pb-botflow-node-text {
  font-size: 12px;
  line-height: 1.4;
}
.dash-pb-botflow-branch .dash-pb-botflow-node-opts {
  gap: 3px;
}
.dash-pb-botflow-branch .dash-pb-botflow-opt {
  font-size: 10px;
  padding: 2px 6px;
}

/* Plain text step inside a branch (non-typed line) */
.dash-pb-botflow-branch-step {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary, #9ca3af);
  padding: 5px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}
.dash-pb-botflow-branch-step strong { color: var(--text-primary, #e5e7eb); font-weight: 600; }

/* Connector inside a branch — uses branch color */
.dash-pb-botflow-connector--branch {
  background: linear-gradient(180deg, var(--branch-color, var(--accent-emerald)) 0%, transparent 100%) !important;
  height: 14px;
  opacity: 0.3;
}
.dash-pb-botflow-connector--branch::after {
  border-top-color: var(--branch-color, var(--accent-emerald)) !important;
  opacity: 0.4;
}

/* Horizontal rule */
.dash-pb-hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 1.5rem 0;
  height: 0;
}

/* Images */
.dash-pb-img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 0.85rem 0;
  display: block;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Tables */
.dash-pb-table-wrap {
  overflow-x: auto;
  margin: 0.85rem 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.dash-pb-table-wrap::-webkit-scrollbar { height: 6px; }
.dash-pb-table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

.dash-pb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  background: var(--bg-surface, #141720);
}
.dash-pb-table thead tr {
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dash-pb-table th {
  padding: 0.6rem 0.85rem;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}
.dash-pb-table td {
  padding: 0.6rem 0.85rem;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: top;
  line-height: 1.5;
}
.dash-pb-table tbody tr:last-child td { border-bottom: none; }
.dash-pb-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.dash-pb-table td strong { color: var(--text-primary); }

/* Task lists (checkboxes) */
.dash-pb-tasklist {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}
.dash-pb-tasklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.dash-pb-tasklist li.done {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.2);
}
.dash-pb-tasklist .dash-pb-check {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
  margin-top: 0.1rem;
  color: var(--text-muted);
}
.dash-pb-tasklist li.done .dash-pb-check { color: var(--accent-green, var(--accent-green)); }

/* Make step-desc lists consistent */
.dash-pb-step-desc ol,
.dash-pb-step-desc ul:not(.dash-pb-tasklist) {
  padding-left: 1.25rem;
  margin: 0.5rem 0;
}
.dash-pb-step-desc ol li,
.dash-pb-step-desc ul:not(.dash-pb-tasklist) li {
  margin: 0.3rem 0;
  line-height: 1.55;
}
.dash-pb-step-desc strong { color: var(--text-primary); font-weight: 600; }

/* ── Instagram Template Renderer (:::ig-template) ───────────────────────── */

.dash-pb-ig-wrap {
  max-width: 380px;
  margin: 1.25rem 0;
  border-radius: 18px;
  background: #000;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

/* Header bar */
.dash-pb-ig-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: #111;
}

.dash-pb-ig-logo {
  flex-shrink: 0;
}
.dash-pb-ig-logo svg {
  width: 20px;
  height: 20px;
  display: block;
}

.dash-pb-ig-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Avatar ring (gradient) */
.dash-pb-ig-avatar-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-pb-ig-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #222;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

/* Username + verified tick */
.dash-pb-ig-uname {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.dash-pb-ig-tick {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── DM mode ── */
.dash-pb-ig-dm-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.dash-pb-ig-dm-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-pb-ig-dm-sublabel {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}
.dash-pb-ig-dm-thread {
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-pb-ig-dm-row {
  display: flex;
}
.dash-pb-ig-dm-row.sent {
  justify-content: flex-end;
}
.dash-pb-ig-dm-bubble {
  max-width: 80%;
  padding: 10px 13px;
  border-radius: 22px;
  position: relative;
}
.dash-pb-ig-dm-bubble.sent {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  border-bottom-right-radius: 6px;
}
.dash-pb-ig-dm-text {
  font-size: 14px;
  line-height: 1.45;
  color: #fff;
}
.dash-pb-ig-dm-text strong { font-weight: 700; }
.dash-pb-ig-dm-time {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
  text-align: right;
}

/* ── Comment mode ── */
.dash-pb-ig-comment-thread {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-pb-ig-post-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.dash-pb-ig-post-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255,255,255,0.3);
}
.dash-pb-ig-post-thumb svg {
  width: 22px;
  height: 22px;
}
.dash-pb-ig-post-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-pb-ig-post-label {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}
.dash-pb-ig-comment-reply {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.dash-pb-ig-comment-bubble {
  flex: 1;
  background: #1a1a1a;
  border-radius: 14px;
  padding: 9px 12px;
}
.dash-pb-ig-comment-body {
  font-size: 14px;
  line-height: 1.45;
  color: #e0e0e0;
}
.dash-pb-ig-comment-body strong { font-weight: 700; color: #fff; }
.dash-pb-ig-time {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  display: block;
  margin-top: 4px;
}

/* Quick-reply chips (both modes) */
.dash-pb-ig-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 14px 14px;
}
.dash-pb-ig-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.25);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  cursor: default;
  transition: border-color 0.15s;
  background: rgba(255,255,255,0.04);
}
.dash-pb-ig-chip:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.08);
}

/* ── SMS Template Renderer (:::sms-template) ─────────────────────────────── */

.dash-pb-sms-wrap {
  max-width: 340px;
  margin: 1.25rem 0;
  border-radius: 16px;
  background: #1c1c1e;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  font-size: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}

.dash-pb-sms-header {
  background: #2c2c2e;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-pb-sms-sender-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-pb-sms-sender-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3a3a3c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #8e8e93;
}
.dash-pb-sms-sender-icon svg { width: 16px; height: 16px; }
.dash-pb-sms-sender-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-pb-sms-sender-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}
.dash-pb-sms-network {
  font-size: 11px;
  color: #8e8e93;
}

.dash-pb-sms-thread {
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.dash-pb-sms-bubble {
  background: #3a3a3c;
  border-radius: 16px 16px 16px 4px;
  padding: 10px 13px;
  max-width: 90%;
}
.dash-pb-sms-text {
  font-size: 14px;
  line-height: 1.45;
  color: #e5e5ea;
}
.dash-pb-sms-text strong { font-weight: 600; color: #fff; }
.dash-pb-sms-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 5px;
}
.dash-pb-sms-time {
  font-size: 10px;
  color: #8e8e93;
}
.dash-pb-sms-status {
  display: flex;
  align-items: center;
}
.dash-pb-sms-dlt-note {
  font-size: 10px;
  color: #F59E0B;
  background: rgba(245,158,11,0.08);
  padding: 5px 14px 8px;
  border-top: 1px solid rgba(245,158,11,0.15);
  text-align: center;
}

/* ── Email Template Renderer (:::email-template) ─────────────────────────── */

.dash-pb-email-wrap {
  max-width: 480px;
  margin: 1.25rem 0;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  color: #202124;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* Mac-style chrome bar */
.dash-pb-email-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f1f3f4;
  border-bottom: 1px solid #e0e0e0;
}
.dash-pb-email-chrome-dots {
  display: flex;
  gap: 5px;
}
.dash-pb-email-chrome-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
}
.dash-pb-email-chrome-dots span:nth-child(1) { background: #ef4444; }
.dash-pb-email-chrome-dots span:nth-child(2) { background: #f59e0b; }
.dash-pb-email-chrome-dots span:nth-child(3) { background: var(--accent-emerald); }
.dash-pb-email-chrome-bar {
  flex: 1;
  font-size: 11px;
  color: #5f6368;
  text-align: center;
}

.dash-pb-email-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid #f1f3f4;
}
.dash-pb-email-subject {
  font-size: 16px;
  font-weight: 700;
  color: #202124;
  margin-bottom: 4px;
  line-height: 1.35;
}
.dash-pb-email-preview {
  font-size: 12px;
  color: #5f6368;
  margin-bottom: 10px;
}
.dash-pb-email-from-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-pb-email-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #4285F4;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-pb-email-from-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.dash-pb-email-from-name {
  font-size: 13px;
  font-weight: 600;
  color: #202124;
}
.dash-pb-email-from-addr {
  font-size: 11px;
  color: #5f6368;
}
.dash-pb-email-time {
  font-size: 11px;
  color: #5f6368;
  flex-shrink: 0;
}

.dash-pb-email-body {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #202124;
}
.dash-pb-email-body p {
  margin: 0 0 10px;
}
.dash-pb-email-body p:last-child { margin-bottom: 0; }
.dash-pb-email-body strong { font-weight: 600; }
.dash-pb-email-body em { font-style: italic; }

.dash-pb-email-footer {
  font-size: 10px;
  color: #9aa0a6;
  text-align: center;
  padding: 8px 16px 10px;
  background: #f8f9fa;
  border-top: 1px solid #f1f3f4;
}
.dash-pb-email-footer strong { color: #5f6368; }

/* ── Razorpay Payment Link Card (:::razorpay-flow) ──────────────────────��── */

.dash-pb-rzp-wrap {
  max-width: 360px;
  margin: 1.25rem 0;
  border-radius: 16px;
  background: #0d0d0d;
  border: 1px solid rgba(82,143,240,0.25);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: #fff;
  box-shadow: 0 8px 32px rgba(82,143,240,0.15);
}

.dash-pb-rzp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 10px;
  background: #111;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-pb-rzp-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.dash-pb-rzp-brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.dash-pb-rzp-brand-name {
  font-size: 13px;
  font-weight: 700;
  color: #528FF0;
  letter-spacing: -0.01em;
}
.dash-pb-rzp-brand-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dash-pb-rzp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.dash-pb-rzp-amount-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 18px 16px 6px;
}
.dash-pb-rzp-amount {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.dash-pb-rzp-currency {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}

.dash-pb-rzp-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  padding: 0 16px 12px;
  line-height: 1.4;
}

.dash-pb-rzp-items {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-pb-rzp-item-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.dash-pb-rzp-item-val {
  font-weight: 600;
  color: #fff;
}

.dash-pb-rzp-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
}
.dash-pb-rzp-meta-item {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.05);
  padding: 3px 9px;
  border-radius: 6px;
}

.dash-pb-rzp-pay-btn {
  margin: 12px 16px;
  background: #528FF0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  padding: 13px 16px;
  border-radius: 10px;
  cursor: default;
  letter-spacing: -0.01em;
  transition: background 0.15s;
}
.dash-pb-rzp-pay-btn:hover { background: #3d7de8; }

.dash-pb-rzp-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  padding: 0 16px 14px;
  text-align: center;
}

.dash-pb-rzp-paid-banner {
  margin: 12px 16px;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  color: var(--accent-emerald);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 10px 14px;
  border-radius: 10px;
}
.dash-pb2-icon-sm { width: 16px; height: 16px; }

/* ── Browse hero — Playbooks landing strip.
   Subtler gradient than the default (which leans WhatsApp green); we want
   this to read as a quiet section header, not a billing dashboard. */
.dash-pb2-hero {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.dash-pb2-hero-meta {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #5c6577);
}

/* ── Industry hero — per-industry accent via --pb-accent CSS var. */
.dash-pb2-hero--industry {
  border-left: 4px solid var(--pb-accent, var(--accent-green));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pb-accent, var(--accent-green)) 8%, transparent),
    rgba(255,255,255,0.02));
}
.dash-pb2-hero-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
  background: color-mix(in srgb, var(--pb-accent, var(--accent-green)) 14%, transparent);
  color: var(--pb-accent, var(--accent-green));
}

/* ── Filter pills — extends .dash-ch2-pill for the toolbar buttons.
   .dash-ch2-pill is non-interactive by default; the .dash-pb2-filter
   modifier adds cursor + hover/active polish for the <button> usage. */
.dash-pb2-filter {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  border-width: 1px;
  border-style: solid;
  font-family: inherit;
  padding: 4px 10px;
}
.dash-pb2-filter:hover {
  color: var(--text-primary, #e8ecf1);
}
.dash-pb2-filter.is-active {
  /* .dash-ch2-pill--info already sets blue color/bg/border; keep the
     active-state cue stronger via a slightly heavier border. */
  border-color: rgba(96,165,250,0.42);
}
.dash-pb2-filter-flag {
  font-size: 0.95rem; line-height: 1;
}

/* ── Market chips on cards — extends .dash-ch2-pill --neutral.
   The neutral pill is uppercase by default which is exactly what we want
   for ISO codes (IN, US, BR, UK …). Just bump the flag character. */
.dash-pb2-market-flag {
  font-size: 0.8rem; line-height: 1;
}

/* ── Detail meta-row — level + time pills.
   .dash-pb2-meta-pill inherits .dash-ch2-pill --neutral. The level pill
   uses .dash-pb2-level with a per-difficulty hue. */
.dash-pb2-meta-pill {
  display: inline-flex; align-items: center; gap: 4px;
  text-transform: none; letter-spacing: 0;
}
.dash-pb2-level {
  text-transform: capitalize;
  letter-spacing: 0;
  font-weight: 600;
}
.dash-pb2-level--beginner   { color: var(--color-success, #25D366); background: var(--color-success-bg, rgba(37,211,102,0.12)); border-color: rgba(37,211,102,0.22); }
.dash-pb2-level--intermediate { color: var(--color-warning, #F59E0B); background: var(--color-warning-bg, rgba(245,158,11,0.12)); border-color: rgba(245,158,11,0.22); }
.dash-pb2-level--advanced   { color: var(--color-error, #EF4444);   background: var(--color-error-bg,   rgba(239,68,68,0.12)); border-color: rgba(239,68,68,0.22); }

/* ── Card meta separator — quiet dot between time + industry. */
.dash-pb2-sep { color: var(--text-muted, #5c6577); }

/* ── Onboarding tile — Phase 5e pattern applied to Playbooks.
   Matches the visual rhythm of .dash-empty (icon + heading + copy + CTA)
   but is shaped to live inline inside the playbook root, not as a
   page-level shell. */
.dash-pb2-empty-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--glass-bg, rgba(255,255,255,0.03));
  border: 1px dashed var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-xl, 1rem);
  color: var(--text-secondary, #8b95a5);
  gap: 0.5rem;
}
.dash-pb2-empty-tile i {
  color: var(--text-muted, #5c6577);
  margin-bottom: 0.25rem;
}
.dash-pb2-empty-tile h3 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary, #e8ecf1);
  margin: 0;
}
.dash-pb2-empty-tile p {
  font-size: 0.85rem;
  color: var(--text-secondary, #8b95a5);
  line-height: 1.5;
  margin: 0;
  max-width: 360px;
}
.dash-pb2-empty-tile-cta {
  margin-top: 0.6rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
}
/* Loading-variant spins the loader icon. */
.dash-pb2-empty-tile--loading i[data-lucide="loader"] {
  animation: dash-pb2-spin 1s linear infinite;
}