/* ============================================
   Rogue AI Portal — Design System
   Ported from rogueai.tech for visual consistency
   ============================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Brand Colors */
  --brand-blue: #33A1FD;
  --brand-blue-dark: #2B8AD9;
  --brand-blue-btn: #1478BD;
  --brand-blue-btn-hover: #0D6EAE;

  /* Backgrounds */
  --bg-primary: #0A0E17;
  --bg-secondary: #111827;
  --bg-tertiary: #1A2332;
  --bg-elevated: #1E293B;

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;

  /* Accents */
  --success: #10B981;
  --error: #EF4444;
  --warning: #F59E0B;
  --info: #33A1FD;

  /* Effects */
  --glow-subtle: rgba(51, 161, 253, 0.15);
  --glow-medium: rgba(51, 161, 253, 0.25);
  --glow-strong: rgba(51, 161, 253, 0.3);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  --border-active: rgba(51, 161, 253, 0.4);

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

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);

  /* Layout */
  --nav-height: 56px;
  --content-max-width: 1200px;
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Base --- */
html, body {
  height: 100%;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--brand-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--brand-blue-dark);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  line-height: 1.2;
  font-weight: 600;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

/* --- Layout: App Shell --- */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* --- Top Nav Bar --- */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  min-height: var(--nav-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
  padding: 0 var(--space-5);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo-img {
  height: 28px;
  width: auto;
}

/* --- Nav item band ---
   FIXED 2026-08-06 (LANE K). This was `position:absolute; left:50%; translateX(-50%)` with no width
   constraint, so it was removed from the flex flow entirely and grew UNDER .nav-left and
   .nav-right instead of pushing against them. Measured at 1440px as an admin (12 items): the logo
   occupied x=20–220 while the first item started at x=35 (185px overlap) and the last item ended at
   x=1405 against a .nav-right starting at x=1240 (165px overlap) — "Dashboard" and "Training" were
   illegible under the logo and "Settings" sat under the user chip. Pre-existing, not caused by the
   Settings item: hiding it still left 134px/99px of overlap.

   The fix is to put the band back IN the flow as the flexible middle child, so the two fixed-width
   siblings reserve their space first and the band can only ever use what is left. It stays visually
   centred within that space. When the items genuinely do not fit, .nav-items scrolls horizontally
   rather than sliding underneath its neighbours — a strip that scrolls is legible; one that overlaps
   is not. The ≤768px block below replaces `position` outright with the fixed drop-down panel, so
   the mobile nav is unaffected by any of this. */
.nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--space-3);
}

.nav-items {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  /* The horizontal scrollbar would otherwise eat visible height out of a 56px bar and render as a
     grey stripe across the chrome. Keyboard users still reach every item — .nav-item:focus-visible
     scrolls it into view — and pointer users can wheel/swipe the strip. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-items::-webkit-scrollbar { display: none; }

/* The active-tab underline is `bottom:-13px`, i.e. it sits OUTSIDE the item's own box. Once
   .nav-items can scroll, that overflow would be clipped and the underline would disappear on the
   active tab. Padding the strip and pulling it back keeps the underline inside the scroll box. */
.nav-items { padding-bottom: 14px; margin-bottom: -14px; }

/* The desktop tightening tier that buys width back before this strip has to scroll lives BELOW,
   just above the mobile block — it has to come AFTER the base `.nav-item` / `.nav-user-info`
   declarations to win the cascade. Putting it here (where it was first written) made it dead. */

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  position: relative;
  white-space: nowrap;
}

.nav-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.nav-item.active {
  color: var(--brand-blue);
  background: transparent;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-blue);
  border-radius: 2px 2px 0 0;
}

.nav-item-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-item-icon svg {
  width: 18px;
  height: 18px;
}

.nav-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* User button & dropdown */
.nav-user {
  position: relative;
}

.nav-user-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--transition-fast);
  font-family: var(--font-family);
}

.nav-user-btn:hover {
  background: var(--bg-tertiary);
}

.nav-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--glow-medium);
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  flex-shrink: 0;
}

.nav-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.nav-user-name {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
}

.nav-user-loc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.2;
}

.nav-user-chevron {
  display: flex;
  align-items: center;
  color: var(--text-muted);
}

.nav-user-chevron svg {
  width: 16px;
  height: 16px;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  z-index: 200;
}

.nav-dropdown-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.nav-dropdown-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.nav-dropdown-loc {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--border-default);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nav-dropdown-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Hamburger (mobile only) */
.nav-hamburger {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: 6px;
  margin-right: var(--space-2);
}

.nav-hamburger:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Main content area */
.main-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-behavior: smooth;
}

.content-body {
  padding: var(--space-8);
  flex: 1;
  max-width: var(--content-max-width);
  width: 100%;
}

/* --- Narrow-desktop tightening (LANE K, 2026-08-06) ---
   Buys width back before .nav-items has to scroll. Measured at 1440px as an admin (11 items): the
   strip needs 1288px against a 988px band between the logo and the user chip; dropping the item
   padding to 8px and the user chip's name/location text raises the band and shrinks the strip.
   Enough for the 7-item GM nav at every width; an 11-item admin nav at 1440px still scrolls, which
   is a content-density decision, not a CSS one — see the residual note below.

   ⚠️ POSITION IS LOAD-BEARING. This block must stay AFTER the base `.nav-item` and `.nav-user-info`
   declarations (~line 171 / ~line 265) and BEFORE the ≤768px block. It was first written up beside
   `.nav-center`, i.e. ABOVE both — same specificity, earlier in document order, so the base rules
   won and the whole tier was DEAD while looking perfectly correct in the file and in the CSSOM
   (matchMedia said it matched; the computed padding never changed). Verified in a real browser by
   reading getComputedStyle, not by reading the file. */
@media (min-width: 769px) and (max-width: 1500px) {
  .nav-item { padding: var(--space-2) var(--space-2); }
  .nav-user-info { display: none; }
  /* The icons are what actually decide it. Measured at 1440px, 11 admin items: padding + the user
     chip's text alone leave the strip 111px short and clip "Analytics" and "Settings"; dropping the
     18px icon and its 8px gap takes the strip from 1200px to 914px inside a 1089px band — every
     item visible with ~175px spare, i.e. room for two more before it scrolls again. A text-only nav
     below 1500px is a density trade made deliberately: an invisible nav item at the commonest
     laptop width is a usability defect, a missing decorative glyph is not. */
  .nav-item-icon { display: none; }
}

/* ⚠️ RESIDUAL, MEASURED NOT ASSUMED (LANE K, 2026-08-06): at 1440px an ADMIN has 11 nav items that
   need more strip than the band between logo and user chip provides, so the last items sit
   off-screen inside the scroll container rather than under the user chip. That is strictly better
   than the overlap it replaces — nothing is illegible and every item is still reachable by
   scrolling the strip — but it is degraded gracefully, not solved. Closing it properly means fewer
   top-level items or an overflow menu (a product decision), or scrolling the ACTIVE item into view
   on render, which needs public/js/app.js — a file this lane does not own. Both are in the report. */

/* --- Mobile Responsive (Top Nav) --- */
@media (max-width: 768px) {
  .nav-hamburger {
    display: flex;
    align-items: center;
  }

  .nav-center {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-default);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-1);
    display: none;
    transform: none;
    z-index: 99;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  .nav-center-open {
    display: flex;
  }

  .nav-items {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    /* Undo the desktop scroll-strip. This is a vertical drop-down panel, the active underline is
       hidden below, and the negative bottom margin would clip its last item. */
    overflow-x: visible;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .nav-item {
    padding: var(--space-3) var(--space-4);
  }

  .nav-item.active::after {
    display: none;
  }

  .nav-item.active {
    background: var(--glow-medium);
  }

  .nav-user-info {
    display: none;
  }

  .nav-user-chevron {
    display: none;
  }

  .content-body {
    padding: var(--space-4);
  }
}

/* --- Glass Card --- */
.card {
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition-base);
}

.card:hover {
  border-color: var(--border-hover);
}

.card-compact {
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all var(--transition-base);
  min-height: 40px;
  line-height: 1;
}

.btn-primary {
  background: var(--brand-blue-btn);
  color: white;
  box-shadow: 0 0 20px rgba(51, 161, 253, 0.15);
}
.btn-primary:hover {
  background: var(--brand-blue-btn-hover);
  box-shadow: 0 0 30px rgba(51, 161, 253, 0.25);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
}
.btn-outline:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: var(--glow-subtle);
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.btn-secondary:hover {
  background: var(--border-default);
  color: var(--text-primary);
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  min-height: 32px;
}

.btn-danger {
  background: var(--error);
  color: white;
}
.btn-danger:hover {
  background: #DC2626;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Focus visible for keyboard navigation */
.btn:focus-visible,
.form-input:focus-visible,
.form-textarea:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* --- Forms --- */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--glow-subtle);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

/* --- Status Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
}

.badge-new { background: rgba(33, 150, 243, 0.15); color: #2196F3; }
.badge-open { background: rgba(255, 152, 0, 0.15); color: #FF9800; }
.badge-in-progress { background: rgba(156, 39, 176, 0.15); color: #9C27B0; }
.badge-pending { background: rgba(96, 125, 139, 0.15); color: #607D8B; }
.badge-resolved { background: rgba(76, 175, 80, 0.15); color: #4CAF50; }
.badge-closed { background: rgba(158, 158, 158, 0.15); color: #9E9E9E; }

/* --- Tables --- */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-default);
}

td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border-default);
}

tr:hover td {
  background: var(--glow-subtle);
}

/* --- Grid Layouts --- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* --- Content Cards (Training Library) --- */
.content-card {
  background: rgba(17, 24, 39, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  cursor: pointer;
}

.content-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.content-card-thumbnail {
  aspect-ratio: 16 / 9;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.content-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-card-type-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--glow-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
}

.content-card-body {
  padding: var(--space-4);
}

.content-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.content-card-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

/* --- Video Player --- */
.video-player-wrap {
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.video-player-wrap video {
  width: 100%;
  height: 100%;
}

/* --- Ticket List --- */
.ticket-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.ticket-row:hover {
  background: var(--glow-subtle);
}

.ticket-subject {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.ticket-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --- Timeline (Ticket Comments) --- */
.timeline {
  position: relative;
  padding-left: var(--space-8);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-default);
}

.timeline-item {
  position: relative;
  padding-bottom: var(--space-6);
}

.timeline-dot {
  position: absolute;
  left: calc(-1 * var(--space-8) + 8px);
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-blue);
  border: 2px solid var(--bg-primary);
}

.timeline-content {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.timeline-author {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.timeline-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.timeline-body {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

/* --- AI Analysis Card --- */
.ai-analysis-card {
  border-color: rgba(51, 161, 253, 0.2);
  background: linear-gradient(135deg, rgba(51, 161, 253, 0.06), rgba(17, 24, 39, 0.8));
}

.ai-analysis-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ai-analysis-icon {
  display: flex;
  align-items: center;
  color: var(--brand-blue);
}

.ai-analysis-icon svg {
  width: 20px;
  height: 20px;
}

.ai-analysis-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ai-analysis-body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.ai-analysis-content {
  color: var(--text-primary);
}

.ai-analysis-loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
}

.ai-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-blue);
  animation: ai-pulse 1.5s ease-in-out infinite;
}

@keyframes ai-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.ai-analysis-error {
  color: var(--text-muted);
  font-style: italic;
}

/* --- AI Analysis Markdown Rendering --- */
.ai-analysis-content h1,
.ai-analysis-content h2,
.ai-analysis-content h3,
.ai-analysis-content h4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.ai-analysis-content h1 { font-size: var(--text-xl); }
.ai-analysis-content h2 { font-size: var(--text-lg); }
.ai-analysis-content h3 { font-size: var(--text-base); font-weight: 600; }
.ai-analysis-content h4 { font-size: var(--text-sm); font-weight: 600; }

.ai-analysis-content p {
  margin-bottom: var(--space-3);
}

.ai-analysis-content ul,
.ai-analysis-content ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
}

.ai-analysis-content li {
  margin-bottom: var(--space-1);
}

.ai-analysis-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

.ai-analysis-content hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-4) 0;
}

.md-code-block {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: var(--text-xs);
  margin: var(--space-3) 0;
}

.md-inline-code {
  background: var(--bg-tertiary);
  padding: 2px var(--space-2);
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9em;
}

.md-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: var(--text-xs);
}

.md-table th,
.md-table td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
}

.md-table th {
  background: var(--bg-tertiary);
  font-weight: 600;
  color: var(--text-primary);
}

.md-table td {
  color: var(--text-secondary);
}

/* --- Cbot Embed (AI Chat Sub-window) --- */
.cbot-embed-container {
  margin-top: 0;
}

.cbot-embed-wrap {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--space-3);
}

.cbot-embed-iframe {
  width: 100%;
  height: 500px;
  border: none;
  background: var(--bg-primary);
}

/* --- Announcements --- */
.announcement-banner {
  background: linear-gradient(135deg, rgba(51, 161, 253, 0.1), rgba(51, 161, 253, 0.05));
  border: 1px solid rgba(51, 161, 253, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.announcement-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-blue);
  margin-bottom: var(--space-1);
}

.announcement-body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* --- Empty States --- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-8);
  text-align: center;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--glow-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  margin-bottom: var(--space-5);
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.empty-state-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 400px;
}

/* --- Loading --- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-elevated) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Article Content (Marketing Guide) --- */
.article-content {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-secondary);
}

.article-content h1,
.article-content h2,
.article-content h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.article-content p {
  margin-bottom: var(--space-4);
}

.article-content ul,
.article-content ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.article-content li {
  margin-bottom: var(--space-2);
}

.article-content code {
  background: var(--bg-tertiary);
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
  font-size: var(--text-sm);
}

.article-content blockquote {
  border-left: 3px solid var(--brand-blue);
  padding-left: var(--space-4);
  margin: var(--space-4) 0;
  color: var(--text-muted);
  font-style: italic;
}

/* --- Search --- */
.search-box {
  position: relative;
}

.search-box .form-input {
  padding-left: var(--space-10);
}

.search-box-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

/* --- Category Tree (Sidebar Navigation) --- */
.category-tree {
  list-style: none;
}

.category-item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.category-item:hover {
  background: var(--glow-subtle);
  color: var(--text-primary);
}

.category-item.active {
  color: var(--brand-blue);
  background: var(--glow-medium);
}

.category-children {
  padding-left: var(--space-4);
}

/* --- Tags --- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  gap: var(--space-1);
}

.tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  min-height: 40px;
  align-items: center;
}

.tag-input input {
  flex: 1;
  min-width: 120px;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--text-sm);
}

/* --- File Upload --- */
.file-drop-zone {
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-base);
}

.file-drop-zone:hover,
.file-drop-zone.dragover {
  border-color: var(--brand-blue);
  background: var(--glow-subtle);
}

/* --- Utility --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.font-semibold { font-weight: 600; }
.hidden { display: none; }
.w-full { width: 100%; }

/* --- Sidebar Layouts (Mobile) --- */
@media (max-width: 768px) {
  .training-layout,
  .marketing-layout {
    flex-direction: column;
  }

  .training-sidebar,
  .marketing-sidebar {
    width: 100% !important;
    border-right: none !important;
    padding-right: 0 !important;
    border-bottom: 1px solid var(--border-default);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    position: static !important;
  }

  .ticket-row {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

/* --- Quick Action Cards (Dashboard) --- */
.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  transition: all var(--transition-base);
}

.quick-action-card:hover {
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(51, 161, 253, 0.1);
}

.quick-action-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--glow-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  margin-bottom: var(--space-3);
  transition: background var(--transition-base);
}

.quick-action-card:hover .quick-action-icon {
  background: var(--glow-medium);
}

.quick-action-icon svg {
  width: 24px;
  height: 24px;
}

.quick-action-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.quick-action-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

/* --- Value Summary Cards (Dashboard) --- */
.value-summary-header {
  margin-bottom: var(--space-4);
}

.value-summary-header h4 {
  font-size: var(--text-lg);
  color: var(--text-primary);
  font-weight: 600;
}

.value-summary-header p {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.value-summary-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}

.value-summary-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.value-summary-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.value-summary-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}

.value-summary-icon svg {
  width: 20px;
  height: 20px;
}

.value-summary-number {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.value-summary-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.value-summary-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: var(--space-3);
}

.value-summary-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}

/* --- Dashboard Header --- */
.dashboard-header h3 {
  font-size: var(--text-2xl);
}

/* --- Back Button Polish --- */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  text-decoration: none;
}

.btn-back:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.btn-back svg {
  width: 16px;
  height: 16px;
}

/* --- Ticket Row last-child border --- */
.ticket-row:last-child {
  border-bottom: none;
}

/* ============================================
   Template Editor (Pluto)
   ============================================ */

/* Remove padding/max-width constraints when editor is active */
.content-body:has(.template-editor) {
  padding: 0;
  max-width: none;
  width: 100%;
}

.main-content:has(.template-editor) {
  overflow: hidden;
}

.template-editor {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  overflow: hidden;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.editor-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.editor-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.editor-title {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.editor-title span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.editor-preview {
  flex: 0 0 55%;
  overflow: auto;
  border-right: 1px solid var(--border-default);
  background: #f4f4f4;
}

.editor-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.editor-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-default);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
  flex-shrink: 0;
}

.editor-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ============================================
   Editor Modals + Banners + Settings Panel
   --------------------------------------------
   Shared chrome for Pluto editor modals (rename,
   upload photo, sync warning) + the not-configured
   banner + the Template Settings panel. ALL colors
   resolve via design tokens from :root — DO NOT
   hardcode hex/rgb here. See .claude/rules/
   portal-styling.md for the full style policy.
   ============================================ */

/* Backdrop overlay shared across every editor modal. Pluto preview iframes
   are sandboxed so the email's white background is OK to render against
   this dark backdrop — only the chrome around it adopts the dark theme. */
.editor-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.editor-modal-dialog {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  width: 92vw;
  font-family: inherit;
  padding: 20px;
}
.editor-modal-dialog--sm  { max-width: 440px; }
.editor-modal-dialog--md  { max-width: 520px; }
.editor-modal-dialog--lg  { max-width: 640px; }

.editor-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.editor-modal-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}
.editor-modal-title--warn { color: var(--warning); }
.editor-modal-title--error { color: var(--error); }

.editor-modal-dismiss {
  border: none;
  background: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 1;
  padding: 0 4px;
}
.editor-modal-dismiss:hover { color: var(--text-primary); }

.editor-modal-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.editor-modal-body strong { color: var(--text-primary); }
.editor-modal-body p { margin: 0 0 12px; }
.editor-modal-body code {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.85em;
}

.editor-modal-info-block {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 8px 0 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Embed modal: the paste-ready snippet + the list of websites approved to frame the form. */
.embed-snippet {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  padding: 12px;
  margin: 0 0 8px;
  /* The snippet is one long URL — it must scroll inside its own box, never widen the modal. */
  overflow-x: auto;
  white-space: pre;
  user-select: all;
}

.embed-origin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.embed-origin-list li { color: var(--text-secondary); }
.editor-modal-info-block strong { color: var(--text-primary); }
.editor-modal-info-block .editor-modal-info-warn {
  margin-top: 8px;
  color: var(--warning);
}

.editor-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.editor-modal-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
}
.editor-modal-input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px var(--glow-subtle);
}
.editor-modal-input:disabled,
.editor-modal-input[readonly] {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  cursor: default;
}
.editor-modal-input--invalid {
  border-color: var(--error);
}

.editor-modal-status {
  margin-top: 8px;
  min-height: 1.2em;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.editor-modal-status--ok    { color: var(--success); }
.editor-modal-status--warn  { color: var(--warning); }
.editor-modal-status--error { color: var(--error); }

.editor-modal-helper {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 4px;
}

.editor-modal-link {
  color: var(--brand-blue);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.editor-modal-link:hover { color: var(--brand-blue-dark); }

/* Dropzone for file uploads */
.editor-modal-dropzone {
  border: 2px dashed var(--border-hover);
  border-radius: var(--radius-sm);
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  background: var(--bg-tertiary);
}
.editor-modal-dropzone:hover,
.editor-modal-dropzone--active {
  border-color: var(--brand-blue);
  background: var(--glow-subtle);
  color: var(--text-primary);
}
.editor-modal-dropzone--locked {
  opacity: 0.5;
  pointer-events: none;
}

/* Inline preview for selected upload */
.editor-modal-preview-img {
  max-width: 100%;
  max-height: 240px;
  display: block;
  margin: 12px auto 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
}
.editor-modal-preview-info {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
}

.editor-modal-field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Tag for "likely match" hint inside the not-configured banner */
.editor-modal-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
  background: var(--success);
  color: var(--bg-primary);
}

/* Inline-list row used by the not-configured banner. */
.editor-modal-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-default);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}
.editor-modal-list-row:hover { border-color: var(--border-hover); }
.editor-modal-list-row .editor-modal-list-name {
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}
.editor-modal-list-row .editor-modal-list-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Standalone banner (rendered inline, not as a modal) used when a session
   can't be created because the local template isn't linked to a GHL ID. */
.editor-warn-banner {
  padding: 24px;
  margin: 24px auto;
  max-width: 720px;
  background: var(--bg-elevated);
  border: 1px solid var(--warning);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}
.editor-warn-banner h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  color: var(--warning);
}
.editor-warn-banner p {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}
.editor-warn-banner code {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.85em;
}
.editor-warn-banner .editor-warn-banner-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.editor-warn-banner .editor-warn-banner-loading {
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.editor-warn-banner-footer {
  margin: 16px 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ── Template Settings Panel (collapsible row above the editor) ── */
.editor-settings-panel {
  display: none;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.9rem;
}
.editor-settings-panel--open { display: block; }
.editor-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  align-items: start;
}
.editor-settings-panel .esp-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.78rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.editor-settings-panel .esp-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.editor-settings-panel .esp-hint-icon {
  cursor: help;
  color: var(--text-secondary);
  font-weight: 400;
  margin-left: 4px;
}
.editor-settings-panel input {
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
}
.editor-settings-panel input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px var(--glow-subtle);
}
.editor-settings-panel input[readonly],
.editor-settings-panel input:disabled {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  cursor: default;
}
.editor-settings-panel .esp-foot {
  font-size: 0.72rem;
  color: var(--text-secondary);
  min-height: 1em;
}
.editor-settings-panel .esp-foot--ok    { color: var(--success); }
.editor-settings-panel .esp-foot--warn  { color: var(--warning); }
.editor-settings-panel .esp-foot--error { color: var(--error); }
.editor-settings-panel .esp-from-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}
/* "Auto-generate" button — explicit hover overrides the global
   .btn-secondary:hover (which uses a translucent white overlay that becomes
   invisible against any white-ish parent). */
.editor-settings-panel .esp-gen-btn {
  font-size: 0.72rem;
  padding: 3px 10px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.editor-settings-panel .esp-gen-btn:hover:not(:disabled) {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}
.editor-settings-panel .esp-gen-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Chat Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  max-width: 88%;
  font-size: 0.8125rem;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.chat-bubble code {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.8em;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.chat-bubble-user {
  align-self: flex-end;
  background: var(--brand-blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-bubble-assistant {
  align-self: flex-start;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

.chat-bubble-assistant strong {
  color: var(--text-primary);
}

.chat-system-message {
  text-align: center;
  padding: 6px 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.chat-change-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  color: var(--success);
  font-weight: 500;
}

.chat-change-indicator svg {
  width: 14px;
  height: 14px;
}

.chat-error-text {
  color: var(--error);
}

/* Thinking animation */
.chat-thinking {
  min-height: 36px;
  display: flex;
  align-items: center;
}

/* Immediate ack line shown next to the thinking dots (server `ack` SSE event) */
.chat-ack-text {
  color: var(--text-muted);
  font-style: italic;
  margin-right: 8px;
}

.thinking-dots {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.thinking-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: thinking-bounce 1.2s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes thinking-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* Brand-asset generation card — generate → review → approve, inline in the chat */
.chat-asset-card {
  align-self: flex-start;
  max-width: 88%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  margin-top: var(--space-1);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-md);
}

.chat-asset-head {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.chat-asset-summary {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.chat-asset-status {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.chat-asset-status--warn { color: var(--warning); }
.chat-asset-status--error { color: var(--error); }

.chat-asset-preview {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  display: block;
}

.chat-asset-preview[hidden] { display: none; }

.chat-asset-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Selectable option cards streamed into the chat by Pluto */
.chat-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-self: flex-start;
  max-width: 88%;
  margin-top: var(--space-1);
}

.chat-options-prompt {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding-left: var(--space-1);
}

.chat-option-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-3);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.chat-option-card:hover:not(:disabled) {
  background: var(--bg-elevated);
  border-color: var(--border-active);
}

.chat-option-card:disabled {
  opacity: 0.5;
  cursor: default;
}

.chat-option-card--chosen {
  border-color: var(--brand-blue);
  opacity: 1;
}

.chat-option-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.chat-option-detail {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.chat-option-preview {
  width: 100%;
  height: 120px;
  margin-top: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  pointer-events: none;
}

/* Element-picker selection chip — sits above the composer while an element is selected */
.chat-selection-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.chat-selection-chip[hidden] { display: none; }

.chat-selection-icon {
  color: var(--brand-blue);
  flex-shrink: 0;
  line-height: 1;
}

.chat-selection-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.chat-selection-clear {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.chat-selection-clear:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

/* Persistent record, in the transcript, of what a message was scoped to */
.chat-selection-sent {
  align-self: flex-end;
  max-width: 88%;
  margin-bottom: calc(var(--space-1) * -1);
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chat Input */
.chat-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--border-default);
  flex-shrink: 0;
}

.chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 4px 4px 4px 12px;
  transition: border-color 0.15s;
}

.chat-input-wrap:focus-within {
  border-color: var(--brand-blue);
}

.chat-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-family: inherit;
  resize: none;
  padding: 6px 0;
  line-height: 1.5;
  max-height: 120px;
}

.chat-input::placeholder {
  color: var(--text-muted);
}

.chat-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: var(--brand-blue);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.chat-send-btn:hover {
  background: var(--brand-blue-dark);
}

.chat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chat-send-btn svg {
  width: 16px;
  height: 16px;
}

.chat-send-btn.sending {
  opacity: 0.5;
  cursor: wait;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .template-editor {
    height: calc(100vh - 56px);
  }

  .editor-main {
    flex-direction: column;
  }

  .editor-preview {
    flex: 0 0 45%;
    border-right: none;
    border-bottom: 1px solid var(--border-default);
  }

  .editor-chat {
    flex: 1;
  }

  .editor-toolbar-left {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .editor-title {
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50vw;
  }

  .editor-journey-badge {
    display: none;
  }
}

@media (max-width: 480px) {
  .editor-preview {
    flex: 0 0 35%;
  }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Event Forms view + editor shared classes ───────────────────────────────
   Replaces all hardcoded hex/rgb literals that were inline in JS.           */

/* Tertiary button — transparent with a subtle border */
.btn-tertiary {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
}
.btn-tertiary:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

/* Tab navigation bar buttons */
.event-form-tab {
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.event-form-tab--active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
}

/* Label style for editor form fields (replaces injected <style> tag) */
.event-form-editor-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--text-muted);
}

/* Pills used on form cards and header */
.ef-deleted-pill {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
}
.ef-expires-pill {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
}

/* ── Booking Forms (design tokens only) ─────────────────────────────────────── */
.bf-scope-pill {
  background: var(--brand-blue-btn, var(--brand-blue));
  color: var(--text-primary);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bf-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
}
.bf-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.bf-tab:hover { color: var(--text-primary); }
.bf-tab.active { color: var(--text-primary); border-bottom-color: var(--brand-blue); }
/* Viewport toggle (Desktop/Mobile) inside the preview pill — active reads in brand blue (parity with
   the event-form builder), since these buttons suppress the underline that .bf-tab.active normally uses. */
.bf-viewport-tab.active { color: var(--brand-blue); }
.bf-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
/* Two-pane editor (controls left, live preview right) — parity with the event-form builder. */
.bf-editor-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) {
  .bf-editor-split { grid-template-columns: 1fr; }
}
/* Collapsible category accordions (Services & Pricing) — all collapsed by default. */
.bf-accordion {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.bf-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: transparent;
  border: none;
  padding: var(--space-4) var(--space-5);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}
.bf-accordion-header:hover { background: var(--bg-secondary); }
.bf-accordion-count { color: var(--text-muted); font-weight: 500; font-size: 0.8125rem; }
.bf-accordion-chevron {
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  font-size: 0.75rem;
}
.bf-accordion.open .bf-accordion-chevron { transform: rotate(180deg); }
.bf-accordion-content {
  padding: 0 var(--space-5) var(--space-4);
  border-top: 1px solid var(--border-default);
}
.bf-accordion-content[hidden] { display: none; }
.bf-section-title {
  margin: 0 0 var(--space-4) 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
}
.bf-field { margin-bottom: var(--space-4); }
.bf-field-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
}
.bf-field-row:last-child { border-bottom: none; }
.bf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--text-primary); cursor: pointer; min-width: 200px; }
.bf-check.bf-req { color: var(--text-muted); min-width: auto; }
.bf-lock { font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }
/* A field whose value is owned by another page (Location Settings). Deliberately NOT a disabled
   control: a greyed checkbox reads as "nobody may change this", which is false and was actively
   misleading once the Settings card shipped (LANE K, 2026-08-06). */
.bf-managed { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 0.8125rem; color: var(--text-primary); }
.bf-managed .editor-modal-helper { margin: 0; }
.bf-label-input { flex: 1; min-width: 140px; max-width: 300px; }
.bf-pricing-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.bf-pricing-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-default);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bf-pricing-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-default); color: var(--text-primary); vertical-align: middle; }
.bf-sm-input { max-width: 160px; padding: 6px 10px !important; font-size: 0.8125rem !important; }
.bf-saved { border-color: var(--success) !important; }
/* Read-only per-service booking window in the Advanced tab. Booking hours are owned by the
   Location Settings page (LANE K, 2026-08-06); this displays the effective window and links there,
   so there is exactly one writable home for the value. Same box metrics as .bf-sm-input so the
   read-only value sits on the same baseline as the editable controls beside it. */
.bf-ro-hours { display: flex; align-items: end; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 4px; }
.bf-ro-value { padding: 6px 10px; font-size: 0.8125rem; color: var(--text-primary); background: var(--bg-tertiary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); min-width: 90px; }
.bf-status { padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; text-transform: capitalize; }
/* Advanced-builder drag-drop role assignor (design tokens). */
.bf-dnd-panel { margin-bottom: var(--space-4); }
.bf-dnd-svc { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-2); }
.bf-dnd-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.bf-dnd-col { background: var(--bg-secondary); border: 1.5px dashed var(--border-default); border-radius: var(--radius-md); padding: var(--space-3); min-height: 70px; transition: border-color var(--transition-fast), background var(--transition-fast); }
.bf-dnd-col-over { border-color: var(--brand-blue); background: var(--bg-elevated); }
.bf-dnd-col-title { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--space-2); }
.bf-chip { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--bg-tertiary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 6px 10px; margin-bottom: 6px; font-size: 0.8125rem; color: var(--text-primary); cursor: grab; }
.bf-chip:hover { border-color: var(--border-hover); }
.bf-chip-dragging { opacity: 0.5; }
.bf-chip-price { color: var(--text-muted); font-size: 0.75rem; margin-left: 4px; }
.bf-chip-reset { background: transparent; border: none; color: var(--brand-blue); cursor: pointer; font-size: 0.9rem; padding: 0 2px; }

/* Status-pill backgrounds are token-equivalent rgba (15% tints of the matching token), the
   sanctioned pattern from .ef-expires-pill: --brand-blue-btn #1478BD, --success #10B981,
   --warning #F59E0B, --error #EF4444. */
.bf-status--lead { background: rgba(20,120,189,0.15); color: var(--brand-blue); }
.bf-status--booked { background: rgba(16,185,129,0.15); color: var(--success); }
.bf-status--pending { background: var(--bg-secondary); color: var(--text-muted); }
.bf-status--conflict { background: rgba(245,158,11,0.15); color: var(--warning); }
.bf-status--failed { background: rgba(239,68,68,0.15); color: var(--error); }

/* Monospace URL / slug code block */
.ef-code-block {
  font-family: monospace;
  font-size: 0.8125rem;
  color: var(--text-primary);
  text-decoration: none;
  background: var(--bg-tertiary);
  padding: 4px 10px;
  border-radius: 4px;
}

/* Field row inside the editor controls panel */
.ef-field-row {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--bg-secondary);
}

/* Submission status color modifiers */
.ef-status-ok    { color: var(--success); font-weight: 500; }
.ef-status-warn  { color: var(--warning); font-weight: 500; }
.ef-status-error { color: var(--error);   font-weight: 500; }

/* Version history source-label color modifiers */
.ef-source-create      { color: var(--success);    font-weight: 500; }
.ef-source-manual-edit { color: var(--brand-blue);  font-weight: 500; }
.ef-source-ai-edit     { color: #7e57c2;            font-weight: 500; } /* purple — no token exists */
.ef-source-rollback    { color: var(--warning);     font-weight: 500; }
.ef-source-default     { color: var(--text-muted);  font-weight: 500; }

/* AI result banners (inline, not modal) */
.ef-banner-success {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--success);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  margin-top: 12px;
}
.ef-banner-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--error);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}


/* ============================================================ */
/* Offers View — per-location Rogue CRM offer custom values      */
/* ============================================================ */

.offers-view {
  padding: var(--space-6) var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
}

.offers-header {
  margin-bottom: var(--space-6);
}

.offers-header .page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}

.offers-header .page-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  max-width: 720px;
}

.offers-loading {
  color: var(--text-muted);
  font-size: 0.95rem;
  padding: var(--space-8) 0;
  text-align: center;
}

.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: var(--space-5);
}

.offers-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--transition-fast);
}

.offers-card:hover {
  border-color: var(--border-hover);
}

.offers-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-default);
  padding-bottom: var(--space-3);
}

.offers-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.offers-card-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.offers-subblock {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.offers-subblock-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding-bottom: var(--space-1);
}

.offers-field-row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
}

.offers-field-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: help;
}

.offers-field-input {
  width: 100%;
}

.offers-field-status {
  font-size: 0.78rem;
  min-width: 50px;
  text-align: right;
}
.offers-field-status--ok { color: var(--success); }
.offers-field-status--error { color: var(--error); }

.offers-save-btn {
  min-width: 60px;
}

.offers-preview {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.offers-preview-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.offers-preview-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.offers-preview-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--text-primary);
}

.offers-preview-svc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.offers-preview-value {
  color: var(--brand-blue);
  font-weight: 600;
}

.offers-preview-label-text {
  color: var(--text-secondary);
}

.offers-preview-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  padding: 2px 8px;
  background: var(--bg-secondary);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  margin-left: auto;
}


/* ── Email chip/tag input (multi-recipient tickets) ─────────────────────────── */
/* Mirrors .form-input so it sits seamlessly among the other form fields. */
.email-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  cursor: text;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.email-chips:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--glow-subtle);
}
.email-chips--invalid {
  border-color: var(--error);
}
.email-chips--invalid:focus-within {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.email-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  background: var(--glow-medium);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-xs);
  line-height: 1.4;
  max-width: 100%;
}
.email-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.email-chip-remove:hover {
  color: var(--text-primary);
  background: var(--brand-blue-btn);
}
.email-chips-input {
  flex: 1 1 140px;
  min-width: 120px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
}
.email-chips-input::placeholder {
  color: var(--text-muted);
}
.email-chips-error {
  color: var(--error);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* ── Onboarding admin tab (onb-*) ─────────────────────────────────────────── */
.onb-head { margin-bottom: var(--space-6); }
.onb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4);
}
.onb-card { display: flex; flex-direction: column; gap: var(--space-3); }
.onb-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.onb-loc { font-size: var(--text-lg, 1.125rem); font-weight: 600; color: var(--text-primary); margin: 0; }
.onb-muted { color: var(--text-muted); font-size: var(--text-sm, 0.875rem); }
.onb-times { font-size: var(--text-xs, 0.75rem); }
.onb-error { color: var(--error); }
.onb-status-line { color: var(--text-secondary); font-size: var(--text-sm, 0.875rem); }
.onb-status-line--error { color: var(--error); }
.onb-progress-wrap { display: flex; flex-direction: column; gap: var(--space-1); }
.onb-progress-meta {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: var(--text-xs, 0.75rem);
}
.onb-progress {
  height: 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  overflow: hidden;
}
.onb-progress-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--brand-blue);
  transition: width var(--transition-slow, 0.4s ease);
}
.onb-progress-fill--waiting { background: var(--warning); }
.onb-progress-fill--error { background: var(--error); }
.onb-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  max-height: 260px;
  overflow-y: auto;
}
.onb-step-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
}
.onb-step-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--border-hover); }
.onb-step-dot--done { background: var(--success); }
.onb-step-dot--running { background: var(--brand-blue); box-shadow: var(--glow-subtle); }
.onb-step-dot--waiting { background: var(--warning); }
.onb-step-dot--error { background: var(--error); }
.onb-step-dot--skipped { background: var(--text-muted); }
.onb-step-label { flex: 1 1 auto; }
.onb-step-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.onb-step-note { color: var(--text-muted); font-size: var(--text-xs, 0.75rem); }
.onb-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: auto; }
.onb-armed { background: var(--warning); }
.badge-error { background: rgba(239, 68, 68, 0.15); color: var(--error); }

/* Onboarding pre-flight checklist modal (onb-cl-*) */
.onb-cl-progress { margin-bottom: var(--space-3); }
.onb-cl-group { margin: var(--space-4) 0 var(--space-2); }
.onb-cl-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.onb-cl-row:hover { border-color: var(--border-hover); }
.onb-cl-row--done { opacity: 0.65; }
.onb-cl-row--done .onb-cl-label { text-decoration: line-through; }
.onb-cl-check { margin-top: 3px; accent-color: var(--brand-blue); flex: 0 0 auto; }
.onb-cl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onb-cl-label { color: var(--text-primary); font-size: var(--text-sm, 0.875rem); font-weight: 500; }
.onb-cl-hint { color: var(--text-muted); font-size: var(--text-xs, 0.75rem); }
.onb-cl-auto {
  display: inline-block;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: rgba(51, 161, 253, 0.15);
  color: var(--brand-blue);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  vertical-align: middle;
}
.onb-cl-cred {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
}
.onb-cl-cred-row { display: flex; gap: var(--space-2); align-items: center; }
.onb-cl-cred-row .form-input { flex: 1 1 0; }
.onb-cl-cred-status { font-size: var(--text-xs, 0.75rem); }
.onb-cl-cred-status--ok { color: var(--success); }

/* ── Pending Booking Requests panel (public/js/views/pending-bookings.js) ─────
   Live list of online booking requests still awaiting a hand-keyed MyTime booking, shown above the
   booking-form editor. Reuses .editor-settings-panel chrome + .editor-modal-list-row rows; only the
   layout scaffolding below is new. Tokens only — see .claude/rules/portal-styling.md. */
/* Match the booking-form editor's centered 1100px column so the two read as one page. */
.pending-reqs { display: block; max-width: 1100px; margin: 0 auto; }
.pending-reqs-panel {
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.pending-reqs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 4px;
}
.pending-reqs-head .editor-modal-field-label { margin-bottom: 0; }
.pending-reqs-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pending-reqs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.pending-reqs-row { align-items: flex-start; }
.pending-reqs-main { min-width: 0; flex: 1 1 auto; }
.pending-reqs-main .editor-modal-list-meta { margin-top: 2px; }
.pending-reqs-actions {
  display: flex;
  gap: var(--space-2);
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pending-reqs-status { margin-top: var(--space-3); }
.pending-reqs-resolved { margin-top: var(--space-4); }
.pending-reqs-resolved > summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.pending-reqs-resolved > summary:hover { color: var(--text-primary); }
.pending-reqs-resolved .pending-reqs-row { margin-top: var(--space-2); }
@media (max-width: 700px) {
  .pending-reqs-row { flex-direction: column; align-items: stretch; }
  .pending-reqs-actions { justify-content: flex-start; }
}