/* ═══════════════════════════════════════════════════════════════════════════
   AI Brand Voice Builder — HubSpot Module CSS
   Complete style definitions for every element in the embedded app.
   Every rule prefixed with #brand-voice-builder-root for max specificity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. RESET — isolate from HubSpot ─────────────────────────────────── */

#brand-voice-builder-root {
  position: relative;
  z-index: 1001;
  --bvb-surface: rgba(255,255,255,0.02);
  --bvb-surface-raised: rgba(255,255,255,0.05);
  --bvb-surface-overlay: rgba(255,255,255,0.08);
  --bvb-border: rgba(255,255,255,0.08);
  --bvb-text-primary: var(--text-color--light, #FEF8F1);
  --bvb-text-secondary: rgba(254,248,241,0.6);
  --bvb-text-muted: rgba(254,248,241,0.3);
  --bvb-radius-sm: 8px;
  --bvb-radius-md: 16px;
  --bvb-radius-lg: var(--border-radius, 24px);
  --bvb-transition: 200ms ease;
  --bvb-blur: 40px;

  width: 100%;
  box-sizing: border-box;
  isolation: isolate;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  font-size: var(--base_font_size, 16px);
  line-height: 1.6;
  color: var(--bvb-text-primary);
  -webkit-font-smoothing: antialiased;
}

#brand-voice-builder-root#brand-voice-builder-root *,
#brand-voice-builder-root#brand-voice-builder-root *::before,
#brand-voice-builder-root#brand-voice-builder-root *::after {
  box-sizing: border-box;
}

/* Kill ALL HubSpot focus/active outlines */
#brand-voice-builder-root#brand-voice-builder-root *:focus,
#brand-voice-builder-root#brand-voice-builder-root *:focus-visible,
#brand-voice-builder-root#brand-voice-builder-root *:focus-within,
#brand-voice-builder-root#brand-voice-builder-root *:active {
  outline: none !important;
  box-shadow: none !important;
}

#brand-voice-builder-root#brand-voice-builder-root button {
  font-family: inherit !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#brand-voice-builder-root#brand-voice-builder-root img, #brand-voice-builder-root#brand-voice-builder-root svg {
  display: inline-block !important;
  max-width: 100%;
}

#brand-voice-builder-root#brand-voice-builder-root a {
  color: var(--primary_color, #f59700) !important;
  text-decoration: none !important;
}
#brand-voice-builder-root#brand-voice-builder-root a:hover {
  text-decoration: underline !important;
}

#brand-voice-builder-root#brand-voice-builder-root ul, #brand-voice-builder-root#brand-voice-builder-root ol {
  list-style: none !important;
}

#brand-voice-builder-root#brand-voice-builder-root h1, #brand-voice-builder-root#brand-voice-builder-root h2,
#brand-voice-builder-root#brand-voice-builder-root h3, #brand-voice-builder-root#brand-voice-builder-root h4,
#brand-voice-builder-root#brand-voice-builder-root h5, #brand-voice-builder-root#brand-voice-builder-root h6 {
  font-family: inherit !important;
  color: var(--bvb-text-primary) !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

#brand-voice-builder-root#brand-voice-builder-root p {
  font-family: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--bvb-text-primary) !important;
  font-family: inherit !important;
  margin: 0 0 0.375rem 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  cursor: default !important;
}


/* ── 2. ROOT — transparent container ─────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="root"] {
  background: transparent !important;
  min-height: auto !important;
}


/* ── 3. HERO ──────────────────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="hero"] {
  background: transparent !important;
  border: none !important;
  padding: 0 0 2rem 0 !important;
  margin: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="eyebrow"] {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--secondary_color, #13a496) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin: 0 0 0.5rem 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="title"] {
  font-size: clamp(1.75rem, 3.5vw, var(--h2_size, 2.5rem)) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 0 0 0.75rem 0 !important;
  background: var(--gradient-bg--1) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="subtitle"] {
  font-size: 1rem !important;
  color: var(--bvb-text-secondary) !important;
  max-width: 560px;
  line-height: 1.65 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="company-row"] {
  margin: 0 0 2rem 0 !important;
  padding: 0 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.375rem !important;
  max-width: 360px;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="company-label"] {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--bvb-text-secondary) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="company-input"] {
  background: var(--bvb-surface) !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: var(--bvb-radius-sm) !important;
  color: var(--bvb-text-primary) !important;
  padding: 0.625rem 1rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  outline: none !important;
  width: 280px !important;
  transition: border-color var(--bvb-transition), box-shadow var(--bvb-transition);
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="company-input"]::placeholder {
  color: var(--bvb-text-muted) !important;
  font-weight: 400 !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="company-input"]:focus {
  border-color: var(--primary_color) !important;
  box-shadow: 0 0 0 3px rgba(245,151,0,0.12) !important;
}


/* ── 4. MAIN ──────────────────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="main"] {
  max-width: var(--site-container, 1140px);
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}


/* ── 5. PROGRESS TRACKER ──────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="tracker"] {
  background: var(--bvb-surface-raised) !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: var(--bvb-radius-lg) !important;
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="tracker-header"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="tracker-header"] span {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--bvb-text-secondary) !important;
  font-family: inherit !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="tracker-actions"] {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="tracker-ai-btn"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  position: relative !important;
  background: rgba(245,151,0,0.1) !important;
  border: 1px solid rgba(245,151,0,0.3) !important;
  border-radius: 80px !important;
  padding: 8px 18px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--primary_color) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: background 200ms ease, border-color 200ms ease;
  white-space: nowrap !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="tracker-ai-btn"]:hover {
  background: rgba(245,151,0,0.18) !important;
  border-color: rgba(245,151,0,0.5) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="tracker-ai-dot"] {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  background: var(--tertiary_color, #eb004f) !important;
  border-radius: 50% !important;
  border: 2px solid rgba(14,14,29,0.9) !important;
  animation: bvb-pulse 2s ease-in-out infinite !important;
}

@keyframes bvb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="tracker-pct"] {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--primary_color) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="tracker-bar"] {
  height: 6px !important;
  background: var(--bvb-border) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  margin-bottom: 1rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="tracker-fill"] {
  height: 100% !important;
  background: var(--gradient-bg--1) !important;
  border-radius: 3px !important;
  transition: width 400ms cubic-bezier(0.4,0,0.2,1);
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="tracker-dots"] {
  display: flex !important;
  gap: 0.375rem !important;
  flex-wrap: wrap !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="dot"] {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  max-width: 8px !important;
  max-height: 8px !important;
  border-radius: 50% !important;
  background: var(--bvb-border) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: background var(--bvb-transition), transform var(--bvb-transition);
  position: relative !important;
}


/* ── 6. SECTIONS CONTAINER ────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sections"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}


/* ── 7. SECTION ACCORDION ─────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="section"] {
  border: 1px solid var(--bvb-border) !important;
  border-radius: var(--bvb-radius-lg) !important;
  overflow: hidden !important;
  width: 100% !important;
  transition: border-color var(--bvb-transition);
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="section"]:hover {
  border-color: rgba(245,151,0,0.3) !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="section"]:focus,
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="section"]:focus-visible,
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="section"]:focus-within,
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="section"]:active {
  border-color: var(--bvb-border) !important;
}

/* Header — double ID for max specificity over button reset */
#brand-voice-builder-root#brand-voice-builder-root button[data-bvb="section-header"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
  padding: 1.25rem 1.5rem !important;
  margin: 0 !important;
  background: var(--bvb-surface-raised) !important;
  background-color: var(--bvb-surface-raised) !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  user-select: none !important;
  color: inherit !important;
  transition: background var(--bvb-transition);
}
#brand-voice-builder-root#brand-voice-builder-root button[data-bvb="section-header"]:hover {
  background: var(--bvb-surface-overlay) !important;
  background-color: var(--bvb-surface-overlay) !important;
}

/* Header inner layout */
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="section-header-left"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.875rem !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="section-meta"] {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Number badge */
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="section-num"] {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 50% !important;
  background: var(--bvb-surface-overlay) !important;
  border: 1px solid var(--bvb-border) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--bvb-text-secondary) !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  transition: background var(--bvb-transition), border-color var(--bvb-transition), color var(--bvb-transition);
}

/* Title */
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="section-title"] {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--bvb-text-primary) !important;
  line-height: 1.3 !important;
}

/* Description */
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="section-desc"] {
  font-size: 0.8125rem !important;
  color: var(--bvb-text-secondary) !important;
  margin-top: 0.125rem !important;
  line-height: 1.4 !important;
}

/* Chevron */
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chevron"] {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  color: var(--bvb-text-muted) !important;
  flex-shrink: 0 !important;
  transition: transform var(--bvb-transition);
}

/* Body */
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="section-body"] {
  padding: 1.5rem !important;
  background: var(--bvb-surface) !important;
  border-top: 1px solid var(--bvb-border) !important;
}


/* ── 8. BADGES ────────────────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="badges"] {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="badges"] span {
  font-size: 0.6875rem !important;
  padding: 3px 10px !important;
  border-radius: 40px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  white-space: nowrap !important;
}


/* ── 9. AI BUTTON ─────────────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="ai-btn"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--primary_color) !important;
  border: 1px solid rgba(245,151,0,0.3) !important;
  background: rgba(245,151,0,0.06) !important;
  border-radius: 40px !important;
  padding: 6px 14px !important;
  margin-bottom: 1.5rem !important;
  cursor: pointer !important;
  transition: background var(--bvb-transition), border-color var(--bvb-transition);
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="ai-btn"]:hover {
  background: rgba(245,151,0,0.12) !important;
  border-color: rgba(245,151,0,0.6) !important;
}


/* ── 10. FORM FIELDS ──────────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="field"] {
  margin-bottom: 1.25rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="hint"] {
  display: block !important;
  font-size: 0.75rem !important;
  color: var(--bvb-text-secondary) !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  margin: 0 0 0.5rem 0 !important;
  line-height: 1.5 !important;
}

/* Text inputs — use data-bvb selectors for max specificity */
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="input"],
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="textarea"],
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="select"],
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="company-input"],
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-input"],
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-url-input"],
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-text-input"],
#brand-voice-builder-root#brand-voice-builder-root input[type="text"],
#brand-voice-builder-root#brand-voice-builder-root input[type="email"],
#brand-voice-builder-root#brand-voice-builder-root input[type="tel"],
#brand-voice-builder-root#brand-voice-builder-root input[type="number"],
#brand-voice-builder-root#brand-voice-builder-root input[type="url"],
#brand-voice-builder-root#brand-voice-builder-root textarea,
#brand-voice-builder-root#brand-voice-builder-root select {
  width: 100% !important;
  background: var(--bvb-surface-raised) !important;
  background-color: var(--bvb-surface-raised) !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: var(--bvb-radius-sm) !important;
  color: var(--bvb-text-primary) !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.9375rem !important;
  font-family: inherit !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color var(--bvb-transition), box-shadow var(--bvb-transition);
  -webkit-appearance: none !important;
  appearance: none !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="input"]:focus,
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="textarea"]:focus,
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="select"]:focus,
#brand-voice-builder-root#brand-voice-builder-root input:focus,
#brand-voice-builder-root#brand-voice-builder-root textarea:focus,
#brand-voice-builder-root#brand-voice-builder-root select:focus {
  border-color: var(--primary_color) !important;
  box-shadow: 0 0 0 3px rgba(245,151,0,0.15) !important;
}
#brand-voice-builder-root#brand-voice-builder-root input::placeholder,
#brand-voice-builder-root#brand-voice-builder-root textarea::placeholder {
  color: var(--bvb-text-muted) !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="textarea"],
#brand-voice-builder-root#brand-voice-builder-root textarea {
  resize: vertical !important;
  min-height: 100px !important;
  line-height: 1.6 !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="select"],
#brand-voice-builder-root#brand-voice-builder-root select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23636375' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  padding-right: 2.5rem !important;
  cursor: pointer !important;
}


/* ── 11. CHIPS ────────────────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chip-grid"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chip"],
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chip-selected"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 5px 12px !important;
  border-radius: 40px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  border: 1px solid var(--bvb-border) !important;
  background: var(--bvb-surface-raised) !important;
  color: var(--bvb-text-secondary) !important;
  transition: background var(--bvb-transition), border-color var(--bvb-transition), color var(--bvb-transition);
  user-select: none !important;
  line-height: 1.5 !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chip"]:hover {
  border-color: rgba(245,151,0,0.5) !important;
  color: var(--bvb-text-primary) !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chip-selected"] {
  background: rgba(245,151,0,0.12) !important;
  border-color: var(--primary_color) !important;
  color: var(--primary_color) !important;
}


/* ── 12. CHECKBOXES ───────────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="checkbox-row"] {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  cursor: pointer !important;
  margin-bottom: 0.625rem !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="checkbox-row"] span {
  font-size: 0.9rem !important;
  color: var(--bvb-text-primary) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

#brand-voice-builder-root#brand-voice-builder-root input[type="checkbox"],
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="checkbox-row"] input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: 4px !important;
  background: var(--bvb-surface-raised) !important;
  background-color: var(--bvb-surface-raised) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background var(--bvb-transition), border-color var(--bvb-transition);
}
#brand-voice-builder-root#brand-voice-builder-root input[type="checkbox"]:checked,
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="checkbox-row"] input:checked {
  background: var(--secondary_color) !important;
  background-color: var(--secondary_color) !important;
  border-color: var(--secondary_color) !important;
  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='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}


/* ── 13. REPEATABLE ITEMS ─────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="repeatable-item"] {
  background: var(--bvb-surface-raised) !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: var(--bvb-radius-lg) !important;
  padding: 2rem !important;
  position: relative !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="remove-btn"] {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  background: rgba(235,0,79,0.1) !important;
  border: 1px solid rgba(235,0,79,0.2) !important;
  color: var(--tertiary_color, #eb004f) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  transition: background var(--bvb-transition);
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="remove-btn"]:hover {
  background: rgba(235,0,79,0.2) !important;
}

/* Add button — outline */
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="add-btn"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: transparent !important;
  color: var(--bvb-text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: 80px !important;
  padding: 13px 27px !important;
  margin-top: 0.5rem !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: border-color var(--bvb-transition), background var(--bvb-transition);
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="add-btn"]:hover {
  border-color: var(--primary_color) !important;
  background: rgba(245,151,0,0.08) !important;
}


/* ── 14. GRID ─────────────────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="grid2"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}


/* ── 15. AI SUGGESTION BANNER ─────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="suggestion"] {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  background: rgba(245,151,0,0.06) !important;
  border: 1px solid rgba(245,151,0,0.2) !important;
  border-radius: var(--bvb-radius-sm) !important;
  padding: 0.75rem 1rem !important;
  margin-top: 0.5rem !important;
  font-size: 0.8125rem !important;
}


/* ── 16. SAVE + ACTIONS BAR ───────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="actions"] {
  position: sticky !important;
  bottom: 0 !important;
  background: transparent !important;
  padding: 2rem 0 0.5rem !important;
  margin-top: 1.5rem !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 1rem !important;
  z-index: 10 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="save-btn"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: var(--primary_color) !important;
  color: var(--dark_color) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 80px !important;
  padding: 14px 28px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  transition: background var(--bvb-transition), transform var(--bvb-transition);
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="save-btn"]:hover {
  background: var(--primary_color-subtle, #ffbf28) !important;
  transform: translateY(-1px);
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="save-btn"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}


/* ── 17. SUCCESS BANNER ───────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="success"] {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  background: rgba(19,164,150,0.08) !important;
  border: 1px solid rgba(19,164,150,0.25) !important;
  border-radius: var(--bvb-radius-md) !important;
  padding: 1.25rem 1.5rem !important;
  margin-top: 1.5rem !important;
}


/* (Section 18 — agent panel styles are in section 25) */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="placeholder-agent-removed"] {
  display: none !important;
}


/* (Section 19 merged into section 26 below — gate-modal defined there) */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="placeholder-removed"] {
  /* placeholder — gate-modal styles are in section 26 */
  display: none;
}


/* ── 20. BADGE PILLS ──────────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="badge-complete"] {
  display: inline-block !important;
  background: rgba(19,164,150,0.15) !important;
  background-color: rgba(19,164,150,0.15) !important;
  color: var(--secondary_color) !important;
  border: 1px solid rgba(19,164,150,0.3) !important;
  font-size: 0.6875rem !important;
  padding: 3px 10px !important;
  border-radius: 40px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  outline: none !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="badge-ai"] {
  display: inline-block !important;
  background: rgba(245,151,0,0.15) !important;
  background-color: rgba(245,151,0,0.15) !important;
  color: var(--primary_color) !important;
  border: 1px solid rgba(245,151,0,0.3) !important;
  font-size: 0.6875rem !important;
  padding: 3px 10px !important;
  border-radius: 40px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  outline: none !important;
}


/* ── 21. CHIP COUNT ───────────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chip-count"] {
  font-size: 0.6875rem !important;
  color: var(--bvb-text-muted) !important;
  margin-bottom: 0.5rem !important;
  font-family: inherit !important;
}


/* ── 22. REPEATABLE LIST CONTAINER ────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="repeatable-list"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}


/* ── 23. CHECKBOX GROUP ───────────────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="checkbox-group"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.625rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="checkbox-label"] {
  font-size: 0.9rem !important;
  color: var(--bvb-text-primary) !important;
  font-weight: 400 !important;
}


/* ── 24. SUCCESS BANNER INTERNALS ─────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="success-icon"] {
  color: var(--secondary_color) !important;
  flex-shrink: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="success-content"] {
  flex: 1 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="success-title"] {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--secondary_color) !important;
  margin-bottom: 0.375rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="success-body"] {
  font-size: 0.875rem !important;
  color: var(--bvb-text-secondary) !important;
  line-height: 1.5 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="download-links"] {
  display: flex !important;
  gap: 0.75rem !important;
  margin-top: 0.875rem !important;
  flex-wrap: wrap !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="download-link"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--primary_color) !important;
  border: 1px solid rgba(245,151,0,0.3) !important;
  background: rgba(245,151,0,0.06) !important;
  border-radius: 40px !important;
  padding: 6px 14px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: background var(--bvb-transition);
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="download-link"]:hover {
  background: rgba(245,151,0,0.12) !important;
  text-decoration: none !important;
}


/* ── 25. AI AGENT PANEL — complete ────────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-overlay"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0,0,0,0.75) !important;
  z-index: 10000 !important;
  display: flex !important;
  justify-content: flex-end !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-panel"] {
  width: 50vw !important;
  max-width: 50vw !important;
  height: 100% !important;
  background: rgba(14,14,29,0.97) !important;
  background-color: rgba(14,14,29,0.97) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  backdrop-filter: blur(40px) !important;
  border-left: 1px solid var(--bvb-border) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 10001 !important;
}

/* Floating suggestions — fixed on left, breaks out of flex parent */
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-suggestions-float"] {
  position: fixed !important;
  left: 1.5rem !important;
  top: 100px !important;
  width: calc(50vw - 3rem) !important;
  min-width: 300px !important;
  max-width: calc(50vw - 3rem) !important;
  max-height: calc(100vh - 140px) !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  z-index: 10001 !important;
  padding: 1rem !important;
  background: rgba(14,14,29,0.95) !important;
  background-color: rgba(14,14,29,0.95) !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: var(--bvb-radius-lg) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-suggestions-title"] {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  padding: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-suggestions-list"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-header"] {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 1.25rem 1.5rem !important;
  border-bottom: 1px solid var(--bvb-border) !important;
  flex-shrink: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-icon"] {
  width: 32px !important;
  height: 32px !important;
  background: rgba(245,151,0,0.15) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary_color) !important;
  flex-shrink: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-meta"] {
  flex: 1 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-title"] {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--bvb-text-primary) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-section-label"] {
  font-size: 0.75rem !important;
  color: var(--bvb-text-secondary) !important;
  margin-top: 2px !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-close"] {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--bvb-radius-sm) !important;
  color: var(--bvb-text-muted) !important;
  cursor: pointer !important;
  transition: background var(--bvb-transition), color var(--bvb-transition);
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-close"]:hover {
  background: var(--bvb-surface-overlay) !important;
  color: var(--bvb-text-primary) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-messages"] {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-user"],
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-model"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-user"] {
  align-items: flex-end !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-model"] {
  align-items: flex-start !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-bubble"] {
  max-width: 90% !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  word-break: break-word !important;
  border-radius: var(--bvb-radius-md) !important;
}

/* Markdown-rendered HTML inside model bubbles */
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-bubble"] h2,
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-bubble"] h3,
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-bubble"] h4 {
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--bvb-text-primary) !important;
  margin: 0.75rem 0 0.375rem 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-bubble"] h4:first-child,
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-bubble"] h3:first-child {
  margin-top: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-bubble"] strong {
  color: var(--bvb-text-primary) !important;
  font-weight: 700 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-bubble"] ul {
  margin: 0.375rem 0 !important;
  padding-left: 1.25rem !important;
  list-style: disc !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-bubble"] li {
  margin-bottom: 0.25rem !important;
  line-height: 1.5 !important;
  display: list-item !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-user"] [data-bvb="msg-bubble"] {
  background: rgba(245,151,0,0.12) !important;
  border: 1px solid rgba(245,151,0,0.2) !important;
  color: var(--bvb-text-primary) !important;
  border-bottom-right-radius: 4px !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="msg-model"] [data-bvb="msg-bubble"] {
  background: var(--bvb-surface-overlay) !important;
  border: 1px solid var(--bvb-border) !important;
  color: var(--bvb-text-primary) !important;
  border-bottom-left-radius: 4px !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="suggestions"] {
  margin-top: 0.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="suggestion"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  font-size: 0.875rem !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.375rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-field"] {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  color: var(--bvb-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  white-space: normal !important;
  margin: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-value"] {
  color: var(--primary_color) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  word-break: break-word !important;
  white-space: normal !important;
  margin: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-rationale"] {
  color: var(--bvb-text-secondary) !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  margin: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-actions"] {
  display: flex !important;
  gap: 0.75rem !important;
  margin-top: 0.5rem !important;
  padding-top: 0.625rem !important;
  border-top: 1px solid var(--bvb-border) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-accept"] {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  padding: 8px 20px !important;
  border-radius: 40px !important;
  border: 1px solid rgba(19,164,150,0.4) !important;
  background: rgba(19,164,150,0.15) !important;
  color: var(--secondary_color) !important;
  cursor: pointer !important;
  flex: 1 !important;
  text-align: center !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-accept"]:hover {
  background: rgba(19,164,150,0.25) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-reject"] {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  border-radius: 40px !important;
  border: 1px solid var(--bvb-border) !important;
  background: transparent !important;
  color: var(--bvb-text-muted) !important;
  cursor: pointer !important;
  flex: 1 !important;
  text-align: center !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-reject"]:hover {
  color: var(--bvb-text-primary) !important;
}

/* Resolved suggestion — minimized single row */
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-resolved-applied"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.75rem !important;
  color: var(--secondary_color) !important;
  background: rgba(19,164,150,0.06) !important;
  border: 1px solid rgba(19,164,150,0.15) !important;
  border-radius: 8px !important;
  opacity: 0.7 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-resolved-skipped"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.75rem !important;
  color: var(--bvb-text-muted) !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: 8px !important;
  opacity: 0.5 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-resolved-label"] {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-resolved-value"] {
  color: var(--primary_color) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-resolved-status"] {
  flex-shrink: 0 !important;
  font-weight: 700 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-resolved-applied"] [data-bvb="sg-field"],
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="sg-resolved-skipped"] [data-bvb="sg-field"] {
  font-size: 0.75rem !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Agent input area */
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-input-area"] {
  border-top: 1px solid var(--bvb-border) !important;
  padding: 1rem !important;
  flex-shrink: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-url-row"] {
  display: flex !important;
  gap: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-url-input"] {
  flex: 1 !important;
  background: var(--bvb-surface) !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: var(--bvb-radius-sm) !important;
  color: var(--bvb-text-primary) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8125rem !important;
  font-family: inherit !important;
  outline: none !important;
  min-height: 36px !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-url-input"]::placeholder {
  color: var(--bvb-text-muted) !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-url-input"]:focus {
  border-color: var(--primary_color) !important;
  box-shadow: 0 0 0 3px rgba(245,151,0,0.12) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-url-btn"] {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: var(--bvb-radius-sm) !important;
  background: rgba(19,164,150,0.12) !important;
  border: 1px solid rgba(19,164,150,0.3) !important;
  color: var(--secondary_color) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-url-btn"]:hover {
  background: rgba(19,164,150,0.2) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-upload-row"] {
  display: flex !important;
  gap: 0.5rem !important;
  margin-bottom: 0.75rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-upload-btn"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  font-size: 0.75rem !important;
  color: var(--bvb-text-secondary) !important;
  border: 1px dashed var(--bvb-border) !important;
  background: transparent !important;
  border-radius: var(--bvb-radius-sm) !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-upload-btn"]:hover {
  border-color: var(--primary_color) !important;
  color: var(--primary_color) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-file-badge"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  font-size: 0.6875rem !important;
  background: rgba(19,164,150,0.1) !important;
  color: var(--secondary_color) !important;
  border-radius: 40px !important;
  padding: 3px 10px !important;
  max-width: 160px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-input-row"] {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: flex-end !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-text-input"] {
  flex: 1 !important;
  background: var(--bvb-surface) !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: var(--bvb-radius-sm) !important;
  color: var(--bvb-text-primary) !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.875rem !important;
  font-family: inherit !important;
  resize: none !important;
  outline: none !important;
  min-height: 44px !important;
  max-height: 120px !important;
  line-height: 1.5 !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-text-input"]::placeholder {
  color: var(--bvb-text-muted) !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-text-input"]:focus {
  border-color: var(--primary_color) !important;
  box-shadow: 0 0 0 3px rgba(245,151,0,0.12) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-send"] {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: var(--bvb-radius-sm) !important;
  background: var(--primary_color) !important;
  border: none !important;
  color: var(--dark_color) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-send"]:hover {
  background: var(--primary_color-subtle, #ffbf28) !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-send"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}


/* ── 26. EMAIL GATE MODAL — complete ──────────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-overlay"] {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.85) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 10001 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-modal"] {
  background: rgba(14,14,29,0.98) !important;
  background-color: rgba(14,14,29,0.98) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--bvb-radius-lg) !important;
  padding: 2.5rem !important;
  width: 100% !important;
  max-width: 480px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-icon"] {
  width: 48px !important;
  height: 48px !important;
  background: rgba(245,151,0,0.12) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary_color) !important;
  margin-bottom: 1.25rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-title"] {
  font-size: var(--h4_size, 1.5rem) !important;
  font-weight: 700 !important;
  color: var(--bvb-text-primary) !important;
  margin-bottom: 0.5rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-body"] {
  font-size: 0.9375rem !important;
  color: var(--bvb-text-secondary) !important;
  line-height: 1.6 !important;
  margin-bottom: 1.5rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-form"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-input"] {
  width: 100% !important;
  background: var(--bvb-surface) !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: var(--bvb-radius-sm) !important;
  color: var(--bvb-text-primary) !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.9375rem !important;
  font-family: inherit !important;
  outline: none !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-input"]::placeholder {
  color: var(--bvb-text-muted) !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-input"]:focus {
  border-color: var(--primary_color) !important;
  box-shadow: 0 0 0 3px rgba(245,151,0,0.12) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-error"] {
  font-size: 0.8125rem !important;
  color: var(--error_color) !important;
  text-align: center !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background: var(--primary_color) !important;
  color: var(--dark_color) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 80px !important;
  padding: 14px 28px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  width: 100% !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-submit"]:hover {
  background: var(--primary_color-subtle, #ffbf28) !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-submit"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-skip"] {
  font-size: 0.8125rem !important;
  color: var(--bvb-text-muted) !important;
  text-align: center !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0.25rem !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-skip"]:hover {
  color: var(--bvb-text-secondary) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-privacy"] {
  font-size: 0.75rem !important;
  color: var(--bvb-text-muted) !important;
  text-align: center !important;
  margin-top: 1rem !important;
}


/* ── 27. GATE PAGE OVERLAY — full page blur with ChatEntry on top ──────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="gate-page-overlay"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10000 !important;
  background: rgba(0,0,0,0.85) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
  overflow-y: auto !important;
}


/* ── 28. CHAT ENTRY (inside gate overlay) ──────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry"] {
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry-bubble"] {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.875rem !important;
  margin-bottom: 2rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry-avatar"] {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  background: rgba(245,151,0,0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary_color) !important;
  flex-shrink: 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry-text"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.375rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry-greeting"] {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--bvb-text-primary) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry-prompt"] {
  font-size: 0.9375rem !important;
  color: var(--bvb-text-secondary) !important;
  line-height: 1.5 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry-form"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry-input"] {
  width: 100% !important;
  background: var(--bvb-surface-raised) !important;
  background-color: var(--bvb-surface-raised) !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: var(--bvb-radius-sm) !important;
  color: var(--bvb-text-primary) !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  outline: none !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry-input"]::placeholder {
  color: var(--bvb-text-muted) !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry-input"]:focus {
  border-color: var(--primary_color) !important;
  box-shadow: 0 0 0 3px rgba(245,151,0,0.12) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry-error"] {
  font-size: 0.8125rem !important;
  color: var(--error_color) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry-submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background: var(--primary_color) !important;
  color: var(--dark_color) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 80px !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  margin-top: 0.5rem !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry-submit"]:hover {
  background: var(--primary_color-subtle, #ffbf28) !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="chat-entry-submit"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}


/* ── 28. WELCOME BANNER (known visitors) ──────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="welcome-banner"] {
  padding: 1.5rem 1.5rem 0.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0.25rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="welcome-text"] {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--bvb-text-primary) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="welcome-company"] {
  font-size: var(--h3_size, 2rem) !important;
  font-weight: 400 !important;
  color: var(--bvb-text-secondary) !important;
  line-height: 1.3 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="welcome-company"] strong {
  color: var(--primary_color) !important;
  font-weight: 700 !important;
}


/* ── 29. RESET BUTTON + CONFIRMATION MODAL ─────────────────────────────── */

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="reset-btn"] {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--bvb-text-muted) !important;
  background: transparent !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: 80px !important;
  padding: 10px 24px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: color 200ms ease, border-color 200ms ease;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="reset-btn"]:hover {
  color: var(--tertiary_color, #eb004f) !important;
  border-color: rgba(235,0,79,0.4) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="reset-overlay"] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0,0,0,0.8) !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="reset-modal"] {
  background: rgba(14,14,29,0.98) !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: var(--bvb-radius-lg) !important;
  padding: 2rem !important;
  max-width: 420px !important;
  width: 100% !important;
  text-align: center !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="reset-modal-title"] {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--bvb-text-primary) !important;
  margin: 0 0 0.75rem 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="reset-modal-body"] {
  font-size: 0.9375rem !important;
  color: var(--bvb-text-secondary) !important;
  line-height: 1.6 !important;
  margin: 0 0 1.5rem 0 !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="reset-modal-actions"] {
  display: flex !important;
  gap: 0.75rem !important;
  justify-content: center !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="reset-confirm"] {
  background: var(--tertiary_color, #eb004f) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 80px !important;
  padding: 10px 24px !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="reset-confirm"]:hover {
  background: var(--tertiary_color-subtle, #ff2877) !important;
}

#brand-voice-builder-root#brand-voice-builder-root [data-bvb="reset-cancel"] {
  background: transparent !important;
  color: var(--bvb-text-muted) !important;
  border: 1px solid var(--bvb-border) !important;
  border-radius: 80px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
#brand-voice-builder-root#brand-voice-builder-root [data-bvb="reset-cancel"]:hover {
  color: var(--bvb-text-primary) !important;
  border-color: rgba(255,255,255,0.2) !important;
}


/* ── 30. HIDE HUBSPOT CHAT WIDGET ──────────────────────────────────────── */

#hubspot-messages-iframe-container,
iframe#hubspot-conversations-iframe {
  display: none !important;
}


/* ── 28. RESPONSIVE ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  #brand-voice-builder-root#brand-voice-builder-root [data-bvb="main"] {
    padding: 1.5rem 1rem 3rem !important;
  }
  #brand-voice-builder-root#brand-voice-builder-root [data-bvb="section-header"] {
    padding: 1rem !important;
  }
  #brand-voice-builder-root#brand-voice-builder-root [data-bvb="section-body"] {
    padding: 1rem !important;
  }
  #brand-voice-builder-root#brand-voice-builder-root [data-bvb="grid2"] {
    grid-template-columns: 1fr !important;
  }
  #brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-panel"] {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  #brand-voice-builder-root#brand-voice-builder-root [data-bvb="agent-suggestions-float"] {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid var(--bvb-border) !important;
    max-height: 200px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LEAD CAPTURE MODULE — #lead-capture-root
   Standalone form for landing pages. Separate from brand-voice-builder.
   ═══════════════════════════════════════════════════════════════════════════ */

#lead-capture-root {
  --lc-surface: rgba(255,255,255,0.04);
  --lc-border: rgba(255,255,255,0.1);
  --lc-text: var(--text-color--light, #FEF8F1);
  --lc-text-dim: rgba(254,248,241,0.6);
  --lc-text-muted: rgba(254,248,241,0.3);
  --lc-primary: var(--primary_color, #f59700);
  --lc-primary-subtle: var(--primary_color-subtle, #ffbf28);
  --lc-radius: var(--border-radius, 24px);

  width: 100%;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  font-size: var(--base_font_size, 16px);
  line-height: 1.6;
  color: var(--lc-text);
  -webkit-font-smoothing: antialiased;
}

#lead-capture-root *,
#lead-capture-root *::before,
#lead-capture-root *::after {
  box-sizing: border-box;
}

#lead-capture-root *:focus,
#lead-capture-root *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Container */
#lead-capture-root#lead-capture-root [data-bvb="lc-container"] {
  max-width: 480px !important;
  margin: 0 auto !important;
  padding: 2.5rem !important;
  background: var(--lc-surface) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius) !important;
}

/* Header */
#lead-capture-root#lead-capture-root [data-bvb="lc-header"] {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 2rem !important;
}

#lead-capture-root#lead-capture-root [data-bvb="lc-icon"] {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  background: rgba(245,151,0,0.15) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--lc-primary) !important;
}

#lead-capture-root#lead-capture-root [data-bvb="lc-title"] {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--lc-text) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

#lead-capture-root#lead-capture-root [data-bvb="lc-subtitle"] {
  font-size: 0.875rem !important;
  color: var(--lc-text-dim) !important;
  margin: 0.125rem 0 0 0 !important;
}

/* Form */
#lead-capture-root#lead-capture-root [data-bvb="lc-form"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

#lead-capture-root#lead-capture-root [data-bvb="lc-field"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.375rem !important;
}

#lead-capture-root#lead-capture-root [data-bvb="lc-label"] {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--lc-text-dim) !important;
}

#lead-capture-root#lead-capture-root [data-bvb="lc-input"] {
  width: 100% !important;
  background: rgba(255,255,255,0.04) !important;
  background-color: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: 8px !important;
  color: var(--lc-text) !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
#lead-capture-root#lead-capture-root [data-bvb="lc-input"]::placeholder {
  color: var(--lc-text-muted) !important;
}
#lead-capture-root#lead-capture-root [data-bvb="lc-input"]:focus {
  border-color: var(--lc-primary) !important;
  box-shadow: 0 0 0 3px rgba(245,151,0,0.12) !important;
}

#lead-capture-root#lead-capture-root [data-bvb="lc-error"] {
  font-size: 0.8125rem !important;
  color: var(--error_color, #E03131) !important;
}

#lead-capture-root#lead-capture-root [data-bvb="lc-submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background: var(--lc-primary) !important;
  color: var(--dark_color, #0E0E1D) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 80px !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  margin-top: 0.5rem !important;
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
#lead-capture-root#lead-capture-root [data-bvb="lc-submit"]:hover {
  background: var(--lc-primary-subtle) !important;
}

#lead-capture-root#lead-capture-root [data-bvb="lc-privacy"] {
  font-size: 0.75rem !important;
  color: var(--lc-text-muted) !important;
  text-align: center !important;
  margin-top: 1.25rem !important;
}

/* Loading state */
#lead-capture-root#lead-capture-root [data-bvb="lc-loading"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3rem 2rem !important;
  gap: 1.5rem !important;
}

#lead-capture-root#lead-capture-root [data-bvb="lc-spinner"] {
  width: 40px !important;
  height: 40px !important;
  border: 3px solid var(--lc-border) !important;
  border-top-color: var(--lc-primary) !important;
  border-radius: 50% !important;
  animation: lc-spin 0.8s linear infinite !important;
}

@keyframes lc-spin {
  to { transform: rotate(360deg); }
}

#lead-capture-root#lead-capture-root [data-bvb="lc-loading-text"] {
  font-size: 1rem !important;
  color: var(--lc-text-dim) !important;
}

/* Done state */
#lead-capture-root#lead-capture-root [data-bvb="lc-done"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3rem 2rem !important;
  gap: 1rem !important;
  text-align: center !important;
}

#lead-capture-root#lead-capture-root [data-bvb="lc-done-icon"] {
  color: var(--secondary_color, #13a496) !important;
}

#lead-capture-root#lead-capture-root [data-bvb="lc-done-title"] {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--lc-text) !important;
  margin: 0 !important;
}

#lead-capture-root#lead-capture-root [data-bvb="lc-done-text"] {
  font-size: 0.9375rem !important;
  color: var(--lc-text-dim) !important;
  margin: 0 !important;
}

/* Typography resets */
#lead-capture-root#lead-capture-root h2,
#lead-capture-root#lead-capture-root h3,
#lead-capture-root#lead-capture-root p {
  font-family: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

#lead-capture-root#lead-capture-root button {
  font-family: inherit !important;
}