* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:#ffffff; color:#1e1b4b; }

/* ═══ Login ═══════════════════════════════════════════════════════════
   ⚠️ THIS IS THE MODAL FROM THE MARKETING PAGES, not a second design.
   Alex, 2026-08-23, holding the two side by side: "the login's not right
   that you've done of the old login. It is [the modal] one that you need to
   have there." The card, the 56px mark, the Fraunces title, the cream
   fields with the purple focus ring and the pill button are lifted from
   .signup-modal in sales-goldmine.html so the app and the funnels show a
   visitor the same box.

   The rules that were here styled WHITE TEXT ON TRANSLUCENT WHITE — a dark
   theme this app stopped having — over a #fff overlay, which is why the
   sign-in screen looked like an unstyled form. Markup and JS are untouched;
   only the look changes, so the mid-session "session expired" re-auth gets
   the same box for free.
   ═══════════════════════════════════════════════════════════════════════ */
/* Tall content scrolls instead of falling off-screen. */
.login-overlay {
  position:fixed; inset:0; z-index:1000;
  background:var(--rk2-bg,#f6f4ee);
  display:none; align-items:center; justify-content:center; padding:20px;
  overflow-y:auto;
}
.login-overlay.hidden { display:none; }
.login-overlay.visible { display:flex; }

.login-box {
  width:100%; max-width:460px;
  background:var(--rk2-surface,#fff);
  border:none; border-radius:22px;
  padding:36px 38px 32px;
  box-shadow:0 40px 100px -30px rgba(42,32,48,.55);
  backdrop-filter:none;
  margin-top:auto; margin-bottom:auto;
}
.login-box .login-logo { text-align:left; margin-bottom:0; }
.login-box .login-logo img {
  width:56px !important; height:56px !important; border-radius:16px !important;
  object-fit:contain !important; background:#fff; padding:7px;
  box-shadow:0 10px 24px -8px var(--rk2-accent,#6a4cf1);
  display:block; margin-bottom:18px;
}
.login-box .login-logo h1 {
  font-family:"Fraunces",Georgia,serif; font-weight:800; font-size:28px;
  letter-spacing:-.02em; line-height:1.15; margin:0 0 8px;
  color:var(--rk2-text,#15172b);
}
.login-box .login-logo p {
  color:var(--rk2-text-2,#4d5168); font-size:14px; line-height:1.5; margin:0 0 22px;
}

.login-field { margin-bottom:14px; }
.login-field label {
  display:block; font-size:12px; font-weight:600;
  color:var(--rk2-text-2,#4d5168); margin-bottom:6px;
}
.login-box input[type="email"],
.login-box input[type="password"],
.login-box input[type="text"],
.login-field input {
  width:100%; padding:12px 14px;
  border:1.5px solid var(--rk2-border,#e8e4d8); border-radius:10px;
  background:var(--rk2-surface-3,#f1eee5);
  font-family:inherit; font-size:14.5px; color:var(--rk2-text,#15172b);
  outline:none; transition:border-color .15s, background .15s, box-shadow .15s;
}
.login-box input::placeholder { color:var(--rk2-text-3,#8a8fa6); }
.login-box input:focus,
.login-field input:focus {
  border-color:var(--rk2-accent,#6a4cf1); background:#fff;
  box-shadow:0 0 0 4px rgba(106,76,241,.12);
}

.login-box button[type="submit"],
.login-box .btn-primary,
.login-btn {
  width:100%; margin-top:4px;
  background:var(--rk2-accent,#6a4cf1); color:#fff; border:none;
  border-radius:999px; padding:14px 20px;
  font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 12px 28px -10px var(--rk2-accent,#6a4cf1);
  transition:transform .15s, background .15s;
}
/* ⚠️ The arrow is a pseudo-element on purpose. handleLogin() writes
   btn.textContent ("Signing in...", then back), which would delete a real
   <span class="arrow"> the first time anyone submits. */
.login-btn::after { content:"\2192"; transition:transform .15s; }
.login-box button[type="submit"]:hover,
.login-btn:hover {
  background:var(--rk2-accent-deep,#4a32b8); opacity:1; transform:translateY(-1px);
}
.login-btn:hover::after { transform:translateX(3px); }

.login-box a { color:var(--rk2-text-3,#8a8fa6); }
.login-box .login-links { display:flex; justify-content:space-between; margin-top:16px; font-size:13px; }
.login-box .login-links a { color:var(--rk2-text-3,#8a8fa6); }
.login-box .login-links a:hover { color:var(--rk2-text,#15172b); }
.login-box .error-msg, .login-box .success-msg { font-size:13px; padding:8px 12px; border-radius:6px; margin-top:8px; }
.login-box .error-msg { background:rgba(239,68,68,.12); color:#dc2626; }
.login-error { color:#dc3545; font-size:13px; margin-top:12px; text-align:center; display:none; }

@media (max-width:540px) {
  .login-box { padding:28px 22px 24px; }
  .login-box .login-logo h1 { font-size:22px; }
}

/* Dev toolbar */
.dev-toolbar { background:#fafafa; border-bottom:1px solid #eee; padding:6px 24px; display:flex; align-items:center; gap:8px; font-size:12px; flex-wrap:wrap; }
.dev-toolbar.hidden { display:none; }
.dev-toolbar .dev-label { font-weight:600; color:#555570; white-space:nowrap; }
.dev-toggle { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:4px; background:#fff; border:1px solid #e0e0e0; cursor:pointer; font-size:12px; white-space:nowrap; color:#555570; }
.dev-toggle:has(input:checked) { background:#f0f0f0; border-color:#9d9db5; color:#1e1b4b; }
.dev-toggle input { accent-color:#1e1b4b; margin:0; }

/* ═══ Shell tokens (Community Dashboard design v2026-05-23) ═══════════════
   Adopted from the Claude Design handoff. Drives the global shell + every
   page that opts into the new look. The legacy --rk-* tokens still exist
   for older surfaces that haven't migrated yet. */
:root {
  --rk2-bg:           #f6f4ee;
  --rk2-surface:      #ffffff;
  --rk2-surface-2:    #faf9f4;
  --rk2-surface-3:    #f1eee5;
  --rk2-border:       #e8e4d8;
  --rk2-border-soft:  #efece2;
  --rk2-border-strong:#d8d3c2;
  --rk2-text:         #15172b;
  --rk2-text-2:       #4d5168;
  --rk2-text-3:       #8a8fa6;
  --rk2-text-4:       #b3b6c4;
  --rk2-accent:       #6a4cf1;
  --rk2-accent-2:     #8b6dff;
  --rk2-accent-soft:  #efeaff;
  --rk2-accent-deep:  #4a32b8;
  --rk2-rose:         #e85a8a;
  --rk2-radius:       12px;
  --rk2-radius-lg:    18px;
  --rk2-radius-xl:    22px;
  --rk2-sidebar-w:    248px;
}

body { background: var(--rk2-bg); color: var(--rk2-text); font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.display { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.015em; }
.mono    { font-family: 'JetBrains Mono', monospace; }

/* ═══ App shell (2-col grid) ══════════════════════════════════════════ */
#appShell {
  /* sidebar + main; sidebar handles its own scroll, main is the page */
  display: grid;
  grid-template-columns: var(--rk2-sidebar-w) 1fr;
  min-height: 100vh;
}
#appShell.has-dev-toolbar { grid-template-rows: auto 1fr; grid-template-columns: var(--rk2-sidebar-w) 1fr; }
#appShell .dev-toolbar { grid-column: 1 / -1; }

/* The sidebar is hidden at ≤1100px (aside.sidebar in app-shell.css), but this
   grid kept its 2-column `var(--rk2-sidebar-w) 1fr` track template down to 768px.
   With the sidebar removed from flow, main.community-main auto-placed into the
   now-empty sidebar-width track (and ~76px when the nav was collapsed) — squeezing
   every page to ~sidebar width, one word per line, with the 1fr track blank on
   the right. Collapse the shell to a single column wherever the sidebar is hidden
   so main fills the full width. (≤768px already switches to a flex column below.) */
@media (max-width: 1100px) {
  #appShell,
  #appShell.nav-collapsed,
  #appShell.has-dev-toolbar { grid-template-columns: 1fr; }
}

/* ═══ Sidebar (full-height, brand top + nav middle + user-card bottom) ═ */
.app-sidebar {
  background: var(--rk2-surface);
  border-right: 1px solid var(--rk2-border);
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

/* Brand block at top of sidebar */
.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
  border-bottom: 1px solid var(--rk2-border-soft);
  margin-bottom: 14px;
  cursor: pointer;
}
.sb-brand-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--rk2-accent) 0%, var(--rk2-accent-2) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 4px 14px -4px rgba(106,76,241,0.5);
  flex-shrink: 0;
}
.sb-brand-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--rk2-text);
  text-transform: uppercase;
}

/* sb-top scrolls if needed, sb-bottom pins */
.sb-top    { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; }
.sb-bottom { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rk2-border-soft); }

/* User-card at sidebar bottom (replaces topbar profile menu) */
.sb-user-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  margin-top: 6px;
  border-radius: 11px;
  transition: background .12s;
  cursor: pointer;
  position: relative;
}
.sb-user-card:hover { background: var(--rk2-surface-2); }
.sb-user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b07aff 0%, #6a4cf1 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.sb-user-meta { min-width: 0; flex: 1; }
.sb-user-name { font-weight: 600; color: var(--rk2-text); font-size: 14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-user-plan { font-size: 11.5px; color: var(--rk2-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Profile menu — re-anchored above the sidebar user-card */
.profile-menu { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; min-width: 220px; background: var(--rk2-surface);
  border: 1px solid var(--rk2-border); border-radius: var(--rk2-radius);
  box-shadow: 0 12px 32px rgba(20,16,40,0.12); padding: 6px; display: none; z-index: 1000; }
.profile-menu.open { display: block; }
.profile-menu-head { padding: 9px 11px 11px; border-bottom: 1px solid var(--rk2-border-soft); margin-bottom: 5px; }
.profile-menu-name { font-size: 14px; font-weight: 600; color: var(--rk2-text); }
.profile-menu-email { font-size: 12px; color: var(--rk2-text-3); margin-top: 2px; word-break: break-all; }
.profile-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px;
  font-size: 13.5px; color: var(--rk2-text); cursor: pointer; }
.profile-menu-item:hover { background: var(--rk2-surface-2); }
.profile-menu-item i { width: 16px; text-align: center; color: var(--rk2-text-3); }

/* Launch redesign Ch3 — Account panel */
.account-wrap { max-width:560px; margin:0 auto; padding:var(--rk-space-6,24px); }
.account-card { margin-bottom:16px; }
.account-card-title { font-size:16px; font-weight:600; color:var(--rk-navy,#1e1b4b); margin-bottom:12px; }
.account-card-note { font-size:13px; color:var(--rk-slate,#6b7280); line-height:1.6; margin-bottom:14px; }
.account-card .rk-label { margin-top:12px; }
.account-msg { margin-top:12px; font-size:13px; line-height:1.5; }
.account-msg.err { color:var(--rk-error,#dc2626); }
.account-msg.ok { color:var(--rk-success,#16a34a); }

/* Launch redesign Ch1 Phase 4 — the global Dashboard */
.gd-wrap { max-width:920px; margin:0 auto; padding:var(--rk-space-6,24px); }
.gd-greeting { font-size:var(--rk-text-2xl,24px); font-weight:600; color:var(--rk-navy,#1e1b4b); margin:0 0 4px; }
.gd-sub { font-size:var(--rk-text-sm,13px); color:var(--rk-slate,#6b7280); margin:0 0 22px; }
.gd-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--rk-space-4,16px); }
.gd-card { background:#fff; border:1px solid var(--rk-gray-light,#e5e7eb); border-radius:var(--rk-radius-xl,16px);
  padding:var(--rk-space-5,20px); display:flex; flex-direction:column; }
.gd-card-head { font-size:15px; font-weight:600; color:var(--rk-navy,#1e1b4b); margin-bottom:12px; display:flex; align-items:center; gap:9px; }
.gd-card-head i { color:var(--rk-slate,#6b7280); width:18px; text-align:center; }
.gd-card-body { flex:1; }
.gd-line { font-size:13.5px; color:var(--rk-slate,#374151); line-height:1.6; }
.gd-card-btn { margin-top:14px; align-self:flex-start; }
.gd-empty { grid-column:1/-1; padding:32px; text-align:center; color:var(--rk-slate-light,#9ca3af); font-size:14px; }
.gd-skel { background:var(--rk-gray-light,#e5e7eb); border-radius:6px; animation:gd-pulse 1.3s ease-in-out infinite; }
@keyframes gd-pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
@media (max-width:768px) { .gd-grid { grid-template-columns:1fr; } }

/* ═══ Sidebar nav items (rendered by sidebar-nav.js) ════════════════════ */
.nav-section-label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rk2-text-4);
  padding: 14px 10px 6px;
  font-family: 'JetBrains Mono', monospace;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--rk2-text-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
  position: relative;
  border-left: none;
  background: transparent;
}
.nav-item:hover { background: var(--rk2-surface-2); color: var(--rk2-text); }
.nav-item.active {
  background: var(--rk2-accent-soft);
  color: var(--rk2-accent-deep);
  font-weight: 600;
  border-left: none;
}
.nav-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--rk2-text-3);
  opacity: 1;
  transition: color .12s;
}
.nav-item.active i { color: var(--rk2-accent-deep); }
.nav-item .nav-pill {
  margin-left: auto;
  background: var(--rk2-accent);
  color: #fff;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.4;
}
.nav-item.active .nav-pill { background: var(--rk2-accent-deep); }
.nav-item.nav-sub {
  padding-left: 36px;
  font-size: 13px;
  font-weight: 500;
}
.nav-divider { height: 1px; background: var(--rk2-border-soft); margin: 12px 0; }
.nav-back { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 13px; color: var(--rk2-text-3); }
.nav-back:hover { color: var(--rk2-text); }

/* ═══ Main content area + per-page topbar ═════════════════════════════ */
.main-content {
  min-width: 0;
  background: var(--rk2-bg);
  overflow-y: auto;
  padding: 28px 36px 80px;
  max-width: 1280px;
  width: 100%;
}

/* In-page topbar (breadcrumb + search + actions). Pages opt in by
   rendering a .app-topbar element; pages that don't render one stay
   on their existing layout. */
.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
}
.app-crumbs { color: var(--rk2-text-3); font-size: 13px; display: flex; gap: 8px; align-items: center; }
.app-crumbs .sep { color: var(--rk2-text-4); }
.app-crumbs .now { color: var(--rk2-text); font-weight: 500; }
.app-topbar-actions { display: flex; align-items: center; gap: 10px; }
.app-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--rk2-surface);
  border: 1px solid var(--rk2-border);
  border-radius: 10px;
  padding: 8px 12px;
  width: 280px;
  color: var(--rk2-text-3);
}
.app-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 14px; flex: 1; color: var(--rk2-text); }
.app-search input::placeholder { color: var(--rk2-text-3); }
.app-search kbd { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--rk2-text-3); background: var(--rk2-surface-3); padding: 2px 6px; border-radius: 4px; }
.app-icon-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--rk2-surface);
  border: 1px solid var(--rk2-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--rk2-text-2);
  transition: background .12s, color .12s;
  position: relative;
  cursor: pointer;
}
.app-icon-btn:hover { background: var(--rk2-surface-2); color: var(--rk2-text); }
.app-icon-btn .dot {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rk2-rose);
  border: 2px solid var(--rk2-surface);
}

/* Page header */
.page-header { margin-bottom:var(--rk-space-8); }
.page-header h1 { font-size:var(--rk-text-2xl); font-weight:var(--rk-weight-medium); margin-bottom:var(--rk-space-1); color:var(--rk-navy); }
.page-header p { font-size:var(--rk-text-base); color:var(--rk-slate); font-weight:var(--rk-weight-light); }

/* Module cards (home) — muse.ai style grid */
.module-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--rk-space-4); }
.module-card { background:var(--rk-white); border:var(--rk-border); border-radius:var(--rk-radius-xl); padding:var(--rk-space-6); cursor:pointer; transition:all var(--rk-transition); }
.module-card:hover { border-color:var(--rk-gray); box-shadow:var(--rk-shadow-md); }
.mc-icon { width:36px; height:36px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:18px; color:#1e1b4b; margin-bottom:14px; background:none; }
.module-card h3 { font-size:var(--rk-text-md); font-weight:var(--rk-weight-medium); margin-bottom:var(--rk-space-1); color:var(--rk-navy); }
.module-card p { font-size:var(--rk-text-sm); color:var(--rk-slate); line-height:var(--rk-leading-relaxed); font-weight:var(--rk-weight-light); }

/* Stats */
.stats-row { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; margin-bottom:28px; }
.stat-card { background:#fff; border:1px solid #e8e8e8; border-radius:8px; padding:20px; }
.stat-value { font-size:28px; font-weight:600; color:#1e1b4b; }
.stat-label { font-size:12px; color:#9d9db5; margin-top:4px; }

/* Inbox */
.inbox-layout { display:flex; height:calc(100vh - 220px); border:1px solid #e8e8e8; border-radius:8px; overflow:hidden; background:#fff; }
.inbox-list { width:300px; border-right:1px solid #eee; overflow-y:auto; }
.inbox-item { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid #f5f5f5; cursor:pointer; }
.inbox-item:hover { background:#fafafa; }
.inbox-item.active { background:#f5f5f5; }
.inbox-avatar { width:36px; height:36px; border-radius:50%; background:#e8e8e8; color:#555570; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; flex-shrink:0; }
.inbox-info { flex:1; min-width:0; }
.inbox-name { font-size:14px; font-weight:500; color:#1e1b4b; }
.inbox-preview { font-size:13px; color:#9d9db5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inbox-chat { flex:1; display:flex; flex-direction:column; }
.inbox-messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; }
.msg { max-width:70%; margin-bottom:12px; padding:10px 14px; border-radius:10px; font-size:14px; line-height:1.5; }
.msg.inbound { background:#f5f5f5; color:#1e1b4b; align-self:flex-start; border-bottom-left-radius:4px; }
.msg.outbound { background:var(--primary); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.msg-time { font-size:11px; color:#bbb; margin-top:4px; }
.msg.outbound .msg-time { color:rgba(255,255,255,0.5); }
.inbox-empty { display:flex; align-items:center; justify-content:center; flex:1; color:#bbb; }

/* Sections */
.section-box { background:#fff; border:1px solid #e8e8e8; border-radius:8px; padding:24px; margin-bottom:16px; }
.section-box h3 { font-size:15px; font-weight:600; margin-bottom:16px; color:#1e1b4b; }
.segment-card { display:flex; align-items:center; gap:16px; padding:14px; border:1px solid #eee; border-radius:8px; margin-bottom:8px; cursor:pointer; }
.segment-card:hover { border-color:#ccc; background:#fafafa; }
.segment-count { font-size:22px; font-weight:600; color:#1e1b4b; min-width:50px; text-align:center; }
.segment-info h4 { font-size:14px; font-weight:500; color:#1e1b4b; }
.segment-info p { font-size:12px; color:#9d9db5; }

/* Empty */
.empty-state { text-align:center; padding:60px 20px; color:#bbb; }
.empty-state i { font-size:40px; margin-bottom:16px; display:block; color:#ddd; }
.empty-state h3 { font-size:16px; color:#9d9db5; margin-bottom:8px; font-weight:500; }
/* ⚠️ `border` is deliberately NOT declared here. This rule loads AFTER
   app-shell.css (app.html: shell at line 84, this at line 117) and has the same
   specificity as `.btn-secondary`, so a `border:none` here silently strips the
   border off every secondary button in the app. That is why course-page.css,
   outreach-dashboard.css, control-centre.css and game-wizard.css each carry a
   private re-assertion of the same thing — four defences against one line.
   app-shell.css:462 already sets `border:none` on the `.btn` base, so the
   browser default is still suppressed; `.btn-secondary` (app-shell.css:474)
   then adds its 1px back, which is the intended design.
   Alex, 2026-08-09, on the games invite pane: *"there should also be a thin
   line around the border just so it's clear that these are buttons when you're
   scanning the screen."* */
.btn { padding:10px 20px; border-radius:6px; font-size:14px; font-weight:500; font-family:'Inter',sans-serif; cursor:pointer; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); }
.btn-outline { background:#fff; color:#555570; border:1px solid #e0e0e0; }
.btn-outline:hover { background:#fafafa; border-color:#ccc; color:#1e1b4b; }

/* Page visibility */
.page { display:none; }
.page.active { display:block; }

/* Voice note player */
.voice-note { margin:4px 0; }
.voice-note audio { width:100%; max-width:250px; height:32px; }
.voice-transcript { font-size:12px; color:#555570; margin-top:6px; padding:6px 10px; background:#f5f5f5; border-radius:6px; font-style:italic; }
.msg.outbound .voice-transcript { background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.8); }

/* Train AI button */
.train-btn { display:flex; align-items:center; gap:6px; margin-top:8px; padding:6px 14px; background:var(--primary); color:#fff; border:none; border-radius:20px; font-size:12px; font-weight:500; font-family:'Inter',sans-serif; cursor:pointer; transition:all 0.1s; }
.train-btn:hover { background:var(--primary-hover); }
.train-btn i { font-size:13px; }
.train-btn.trained { background:#666; }


/* Split pane messages */
.msg-split { display:flex; height:calc(100vh - 140px); }
.msg-list-pane { width:380px; min-width:320px; border-right:1px solid #e0e0e0; overflow-y:auto; flex-shrink:0; }
.msg-preview-pane { flex:1; overflow-y:auto; background:#fafafa; }
.msg-preview-pane .empty-preview { display:flex; align-items:center; justify-content:center; height:100%; color:#bbb; font-size:14px; }
.msg-row { display:flex; align-items:center; padding:14px 24px; border-bottom:1px solid #f0f0f0; cursor:pointer; transition:background 0.15s; }
.msg-row:hover { background:#fafafa; }
.msg-row.selected { background:#f0f4ff; border-left:3px solid var(--primary); }
.msg-row.reviewed .msg-badge { background:#22c55e !important; }
.msg-tab { padding:10px 20px; border:none; background:transparent; font-size:13px; font-family:Inter,sans-serif; cursor:pointer; color:#555570; border-bottom:2px solid transparent; }
.msg-tab.active { color:#1e1b4b; font-weight:500; border-bottom-color:#1e1b4b; }
.msg-full-view { position:absolute; inset:0; background:#fff; z-index:100; overflow-y:auto; }

/* Mobile: stack instead of split */
@media (max-width: 768px) {
  .msg-split { flex-direction:column; height:auto; }
  .msg-list-pane { width:100%; min-width:0; border-right:none; border-bottom:1px solid #e0e0e0; max-height:none; }
  .msg-preview-pane { display:none; }
  .msg-split.has-preview .msg-list-pane { display:none; }
  .msg-split.has-preview .msg-preview-pane { display:block; }
  .msg-row { padding:12px 16px; }

  /* Sidebar mobile: moved to main mobile block */
}



/* Brain Fullscreen */
.brain-fullscreen { position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; background:#0a0a0f; display:flex; flex-direction:column; }
.brain-fullscreen canvas { flex:1; width:100%; }
.brain-fullscreen-close { position:absolute; top:16px; right:16px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:#fff; width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; z-index:10; }
.brain-fullscreen-close:hover { background:rgba(255,255,255,0.2); }
.brain-fullscreen-title { position:absolute; top:20px; left:20px; color:rgba(255,255,255,0.6); font-size:14px; font-family:Inter,sans-serif; z-index:10; }
.brain-expand-btn { position:absolute; top:12px; right:12px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.5); width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; z-index:3; transition:all 0.15s; }
.brain-expand-btn:hover { background:rgba(255,255,255,0.2); color:#fff; }
.brain-viz-tooltip2 { position:fixed; display:none; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border-radius:10px; padding:14px 18px; max-width:320px; box-shadow:0 8px 32px rgba(0,0,0,0.3); pointer-events:none; z-index:10000; border:1px solid rgba(255,255,255,0.2); }
.brain-viz-tooltip2 .tt-cat { font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:#9d9db5; margin-bottom:2px; }
.brain-viz-tooltip2 .tt-title { font-size:14px; font-weight:600; color:#1e1b4b; margin-bottom:6px; }
.brain-viz-tooltip2 .tt-content { font-size:12px; color:#555; line-height:1.4; }
.brain-viz-tooltip2 .tt-meta { font-size:10px; color:#bbb; margin-top:6px; }

/* Brain Page Layout */
.brain-page { max-width:960px; margin:0 auto; }
.brain-hero { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:32px; }
@media (max-width:768px) { .brain-hero { grid-template-columns:1fr; } }
.brain-card { position:relative; border-radius:16px; overflow:hidden; cursor:pointer; transition:transform 0.2s, box-shadow 0.2s; background:linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%); min-height:320px; }
.brain-card:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,0.3); }
.brain-card-header { position:absolute; top:0; left:0; right:0; padding:20px 20px 0; z-index:2; }
.brain-card-title { font-size:18px; font-weight:600; color:rgba(255,255,255,0.95); margin:0 0 4px; font-family:Inter,sans-serif; }
.brain-card-subtitle { font-size:12px; color:rgba(255,255,255,0.4); font-family:Inter,sans-serif; line-height:1.4; }
.brain-card-canvas { width:100%; height:260px; }
.brain-card-stats { position:absolute; bottom:0; left:0; right:0; padding:12px 20px; display:flex; gap:16px; background:linear-gradient(transparent, rgba(0,0,0,0.6)); z-index:2; }
.brain-card-stat { font-size:11px; color:rgba(255,255,255,0.5); font-family:Inter,sans-serif; }
.brain-card-stat strong { color:rgba(255,255,255,0.85); }

.brain-expanded { display:none; }
.brain-expanded.active { display:block; }
.brain-expanded-back { display:inline-flex; align-items:center; gap:6px; padding:8px 0; margin-bottom:16px; font-size:13px; color:#9d9db5; cursor:pointer; border:none; background:none; font-family:Inter,sans-serif; }
.brain-expanded-back:hover { color:#312e81; }
.brain-expanded-viz { border-radius:16px; overflow:hidden; margin-bottom:24px; background:linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%); }
.brain-expanded-canvas { width:100%; height:460px; }

.brain-section-heading { font-size:18px; font-weight:600; color:#1e1b4b; margin:0 0 4px; }
.brain-section-sub { font-size:13px; color:#9d9db5; margin:0 0 20px; }

.integrations-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.integration-card { border:1px solid #e8e8e8; border-radius:12px; padding:20px; text-align:center; opacity:0.5; }
.integration-card-icon { font-size:28px; margin-bottom:8px; }
.integration-card-name { font-size:14px; font-weight:500; color:#312e81; margin-bottom:4px; }
.integration-card-badge { display:inline-block; font-size:10px; background:#f0f0f0; color:#9d9db5; padding:2px 8px; border-radius:10px; }

/* Brain Neural Visualization */
.brain-viz-container { position:relative; width:100%; height:460px; border-radius:16px; overflow:hidden; margin-bottom:24px; background:linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%); }
.brain-viz-canvas { width:100%; height:100%; cursor:grab; }
.brain-viz-canvas:active { cursor:grabbing; }
.brain-viz-tooltip { position:absolute; display:none; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border-radius:10px; padding:14px 18px; max-width:320px; box-shadow:0 8px 32px rgba(0,0,0,0.3); pointer-events:none; z-index:10; border:1px solid rgba(255,255,255,0.2); }
.brain-viz-tooltip .tt-cat { font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:#9d9db5; margin-bottom:2px; }
.brain-viz-tooltip .tt-title { font-size:14px; font-weight:600; color:#1e1b4b; margin-bottom:6px; }
.brain-viz-tooltip .tt-content { font-size:12px; color:#555; line-height:1.4; }
.brain-viz-tooltip .tt-meta { font-size:10px; color:#bbb; margin-top:6px; }
.brain-viz-label { position:absolute; bottom:16px; left:16px; color:rgba(255,255,255,0.3); font-size:12px; font-family:Inter,sans-serif; pointer-events:none; }
.brain-viz-stats { position:absolute; top:16px; right:16px; display:flex; gap:8px; }
.brain-viz-stat { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:6px 12px; color:rgba(255,255,255,0.6); font-size:11px; font-family:Inter,sans-serif; }
.brain-viz-stat strong { color:rgba(255,255,255,0.9); }

/* Brain Dashboard */
.brain-tabs { display:flex; gap:0; border-bottom:1px solid #e0e0e0; margin-bottom:24px; }
.brain-tab { padding:12px 20px; border:none; background:transparent; font-size:14px; font-family:Inter,sans-serif; cursor:pointer; color:#9d9db5; border-bottom:2px solid transparent; transition:all 0.15s; }
.brain-tab:hover { color:#555570; }
.brain-tab.active { color:#1e1b4b; font-weight:500; border-bottom-color:#1e1b4b; }
.brain-entry { background:#fff; border:1px solid #e0e0e0; border-radius:10px; padding:16px 20px; margin-bottom:12px; transition:box-shadow 0.15s; }
.brain-entry:hover { box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.brain-entry-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.brain-entry-category { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:#9d9db5; background:#f5f5f5; padding:2px 8px; border-radius:4px; }
.brain-entry-title { font-size:14px; font-weight:600; color:#1e1b4b; }
.brain-entry-content { font-size:13px; color:#555; line-height:1.5; }
.brain-entry-meta { display:flex; gap:12px; margin-top:8px; font-size:11px; color:#bbb; }
.brain-entry-actions { display:flex; gap:6px; margin-left:auto; }
.brain-entry-actions button { padding:4px 10px; border:1px solid #e0e0e0; background:#fff; border-radius:4px; font-size:11px; cursor:pointer; color:#555570; font-family:Inter,sans-serif; }
.brain-entry-actions button:hover { background:#f5f5f5; }
.brain-entry-actions button.delete:hover { background:#fef2f2; color:#ef4444; border-color:#fca5a5; }
.brain-empty { text-align:center; padding:40px 20px; color:#bbb; }
.brain-empty i { font-size:32px; margin-bottom:12px; display:block; }
.brain-stat { display:inline-block; padding:4px 12px; background:#f5f5f5; border-radius:6px; font-size:12px; color:#555570; margin-right:8px; margin-bottom:8px; }
.activity-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #f5f5f5; }
.activity-dot { width:8px; height:8px; border-radius:50%; margin-top:6px; flex-shrink:0; }
.activity-dot.learned { background:#22c55e; }
.activity-dot.updated { background:#3b82f6; }
.activity-dot.manual { background:var(--primary-light); }
.activity-dot.deleted { background:#ef4444; }
.activity-text { font-size:13px; color:#555; }
.activity-time { font-size:11px; color:#bbb; }
.instinct-badge { display:inline-block; padding:2px 6px; background:#fef3c7; color:#92400e; border-radius:4px; font-size:10px; font-weight:500; }

/* Universal voice component */
.voice-record-btn { width:64px; height:64px; border-radius:50%; background:var(--primary); border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:transform 0.15s, box-shadow 0.15s; box-shadow:0 4px 16px rgba(0,0,0,0.12); }
.voice-record-btn:hover { transform:scale(1.05); box-shadow:0 6px 24px rgba(0,0,0,0.18); }
.voice-record-btn:active { transform:scale(0.95); }
.voice-record-btn svg { width:24px; height:24px; }
.voice-waveform-bar { width:3px; border-radius:2px; background:#ef4444; transition:height 0.05s; }

/* Training panel */
.train-panel { background:#fafafa; border:1px solid #e0e0e0; border-radius:8px; padding:20px; margin:12px 0; max-width:100%; }
.train-panel h4 { font-size:15px; font-weight:600; margin-bottom:4px; display:flex; align-items:center; gap:8px; color:#1e1b4b; }
.train-panel h4 i { color:#1e1b4b; }
.train-panel p.train-hint { font-size:13px; color:#9d9db5; margin-bottom:14px; }

/* Voice record button */
.record-area { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.record-btn { width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; transition:all 0.2s; }
.record-btn.idle { background:var(--primary); color:#fff; }
.record-btn.recording { background:#dc3545; color:#fff; animation:pulse 1s infinite; }
.record-btn.idle:hover { background:var(--primary-hover); }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(220,53,69,0.4); } 50% { box-shadow:0 0 0 12px rgba(220,53,69,0); } }
.record-status { font-size:13px; color:#9d9db5; }
.record-status.active { color:#dc3545; font-weight:500; }
.record-playback { margin:10px 0; }
.record-playback audio { width:100%; height:36px; }

/* AI summary */
.ai-summary { background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:12px; margin:12px 0; }
.ai-summary .summary-label { font-size:11px; font-weight:600; color:#9d9db5; text-transform:uppercase; margin-bottom:6px; }
.ai-summary .summary-text { font-size:14px; line-height:1.5; color:#1e1b4b; }
.ai-summary .summary-actions { display:flex; gap:8px; margin-top:10px; }

/* Text area */
.train-text-area { width:100%; border:1px solid #e0e0e0; border-radius:6px; padding:10px 12px; font-family:'Inter',sans-serif; font-size:14px; resize:vertical; min-height:60px; outline:none; color:#1e1b4b; }
.train-text-area:focus { border-color:var(--primary); }
.train-text-area::placeholder { color:#ccc; }

/* Category pills */
.category-pills { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.cat-pill { padding:6px 14px; border:1px solid #e0e0e0; border-radius:20px; font-size:13px; cursor:pointer; background:#fff; font-family:'Inter',sans-serif; transition:all 0.1s; color:#555570; }
.cat-pill:hover { border-color:#9d9db5; color:#1e1b4b; }
.cat-pill.active { background:var(--primary); border-color:var(--primary); color:#fff; }

/* Or divider */
.or-divider { display:flex; align-items:center; gap:12px; margin:14px 0; font-size:12px; color:#ccc; }
.or-divider::before, .or-divider::after { content:''; flex:1; height:1px; background:#eee; }

/* Existing feedback */
.existing-feedback { background:#f5f5f5; border-radius:6px; padding:8px 12px; margin-top:6px; font-size:12px; border-left:3px solid #ddd; }
.existing-feedback .fb-type { font-weight:600; color:#555570; text-transform:uppercase; font-size:11px; }

/* Setup wizard */
.setup-step-dot { flex:1; padding:10px 12px; text-align:center; font-size:13px; font-weight:500; color:#bbb; background:#fafafa; border-radius:6px; cursor:pointer; transition:all 0.1s; border:1px solid #eee; }
.setup-step-dot.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.setup-step-dot.done { background:#f0f0f0; color:#555570; border-color:#ddd; }
.setup-step-dot:hover { background:#f0f0f0; }
.setup-step-dot.active:hover { background:var(--primary-hover); }
.voice-answer-area { margin-bottom:8px; }

/* ═══ MOBILE RESPONSIVE ═══ */
@media (max-width: 768px) {
  #appShell { display:flex; flex-direction:column; grid-template-columns:none; }
  .app-sidebar { width:100%; height:auto !important; max-height:none; position:static; border-right:none; border-bottom:1px solid var(--rk2-border); padding:0 8px; display:flex; flex-direction:row; overflow-x:auto; flex-shrink:0; gap:0; }
  .app-sidebar::-webkit-scrollbar { display:none; }
  .sb-brand { display:none; }
  .sb-top { flex:none; display:flex; flex-direction:row; overflow-y:visible; overflow-x:auto; padding:0 8px; align-items:center; gap:6px; min-height:48px; }
  .sb-bottom { display:none !important; }
  .nav-section-label { display:none; }
  .nav-divider { display:none; }
  .nav-item { padding:6px 12px; white-space:nowrap; font-size:13px; border-radius:999px; }
  .nav-item i { display:none; }
  .nav-item .nav-pill { display:none; }
  .nav-back { padding:6px 12px; white-space:nowrap; font-size:13px; }
  .main-content { padding:16px; }
  .app-topbar { flex-wrap:wrap; gap:10px; margin-bottom:18px; }
  .app-search { width:100%; order:2; }
  .app-topbar-actions { flex-wrap:wrap; gap:8px; }
  .page-header h1 { font-size:20px; }
  .module-grid { grid-template-columns:1fr; gap:12px; }
  .stats-row { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .inbox-layout { flex-direction:column; height:auto; min-height:60vh; }
  .inbox-list { width:100%; max-height:200px; border-right:none; border-bottom:1px solid #eee; }
  .inbox-chat { min-height:400px; }
  .msg { max-width:85%; }
  .train-panel { padding:14px; }
  .category-pills { gap:4px; }
  .cat-pill { padding:5px 10px; font-size:12px; }
  .section-box { padding:16px; }
  .dev-toolbar { padding:4px 12px; gap:4px; font-size:11px; }
  .voice-note audio { max-width:100%; }
  .inbox-list.hidden-mobile { display:none; }
  .inbox-chat.fullscreen-mobile { min-height:calc(100vh - 200px); }
}

@media (max-width: 400px) {
  .setup-step-dot { font-size:10px; padding:6px 4px; }
  .stats-row { grid-template-columns:1fr 1fr; gap:8px; }
  .main-content { padding:12px; }
}

/* Broadcast tabs */
.bc-tab { padding:10px 16px; font-size:14px; color:#9d9db5; cursor:pointer; border-bottom:2px solid transparent; transition:all 0.1s; }
.bc-tab:hover { color:#1e1b4b; }
.bc-tab.active { color:#1e1b4b; font-weight:500; border-bottom-color:#1e1b4b; }
.bc-tab-count { background:#f0f0f0; color:#9d9db5; font-size:12px; padding:1px 8px; border-radius:10px; margin-left:4px; }
.bc-tab.active .bc-tab-count { background:var(--primary); color:#fff; }

/* Broadcast steps */
.bc-step { display:flex; align-items:center; gap:8px; font-size:14px; color:#bbb; cursor:pointer; }
.bc-step.active { color:#1e1b4b; font-weight:500; }
.bc-step.done { color:#555570; }
.bc-step-num { width:24px; height:24px; border-radius:50%; border:1.5px solid #ddd; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.bc-step.active .bc-step-num { background:var(--primary); color:#fff; border-color:var(--primary); }
.bc-step.done .bc-step-num { background:#666; color:#fff; border-color:#555570; }
.bc-step-line { flex:0 0 40px; height:1px; background:#ddd; align-self:center; }
.bc-composer-step { }

/* Template cards */
.bc-template { padding:10px 16px; border:1px solid #e0e0e0; border-radius:6px; cursor:pointer; font-size:13px; color:#555570; }
.bc-template:hover { border-color:#9d9db5; color:#1e1b4b; background:#fafafa; }

/* Quill overrides */
.ql-toolbar { border-color:#e0e0e0 !important; border-radius:6px 6px 0 0 !important; }
.ql-container { border-color:#e0e0e0 !important; border-radius:0 0 6px 6px !important; font-family:'Inter',sans-serif !important; font-size:14px !important; }

.merge-tag { padding:2px 8px;border:1px solid #e0e0e0;border-radius:4px;font-size:11px;font-family:'Inter',sans-serif;cursor:pointer;background:#fff;color:#555570; }
.merge-tag:hover { border-color:#9d9db5;color:#1e1b4b;background:#fafafa; }
.contact-row:hover { background:#fafafa; }

/* Tag autocomplete */
.tag-autocomplete { position:relative; }
.tag-autocomplete input { width:100%;padding:8px;border:1px solid #e0e0e0;border-radius:6px;font-size:13px;font-family:'Inter',sans-serif;outline:none; }
.tag-autocomplete input:focus { border-color:var(--primary); }
.tag-dropdown { position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-radius:6px;margin-top:2px;max-height:200px;overflow-y:auto;z-index:200;display:none;box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.tag-dropdown.show { display:block; }
.tag-dropdown-item { padding:8px 12px;cursor:pointer;font-size:13px;color:#312e81; }
.tag-dropdown-item:hover { background:#fafafa; }
.tag-dropdown-item.create { color:#1e1b4b;font-weight:500;border-bottom:1px solid #eee; }
.tag-dropdown-item.create i { margin-right:6px; }

.toast-container { pointer-events:none; position:fixed; top:20px; right:20px; z-index:100090; display:flex; flex-direction:column; gap:8px; } /* top-most globally: above modals (.ls-enq/.ls-cmodal 100060) and the media picker (.cbmp-overlay 100080) so success/error toasts are always readable */
.toast { padding:12px 20px; background:var(--primary); color:#fff; border-radius:8px; font-size:13px; font-family:'Inter',sans-serif; box-shadow:0 4px 16px rgba(0,0,0,0.15); animation:toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards; max-width:360px; }
.toast.success { background:var(--primary); }
.toast.error { background:#dc3545; }
.toast.info { background:var(--primary-hover); }
@keyframes toastIn { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform:translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }

.sidebar-item-truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; display:inline-block; vertical-align:middle; }
.dna-section-header { cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border:1px solid #e0e0e0; border-radius:10px; margin-bottom:8px; transition:background 0.15s; }
.dna-section-header:hover { background:#fafafa; }
.dna-section-body { display:none; padding:0 20px 20px; }
.dna-section-body.open { display:block; }
.dna-section-status { font-size:11px; padding:2px 8px; border-radius:10px; }
.dna-section-status.saved { background:#e8f5e9; color:#2e7d32; }
.dna-section-status.empty { background:#f5f5f5; color:#9d9db5; }
/* ── Universal Voice Component ── */
.uv-wrap { position:relative; }
.uv-textarea { width:100%; min-height:80px; padding:12px 14px 42px; border:1px solid #e0e0e0; border-radius:10px; font-size:14px; font-family:Inter,sans-serif; resize:vertical; color:#1e1b4b; outline:none; box-sizing:border-box; transition:border-color 0.2s; }
.uv-textarea:focus { border-color:var(--primary); }
.uv-mic-btn { position:absolute; bottom:10px; right:10px; width:32px; height:32px; border-radius:50%; background:#f5f5f5; border:1px solid #e0e0e0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; color:#555570; }
.uv-mic-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.uv-mic-btn svg { width:14px; height:14px; }
.uv-overlay { position:absolute; inset:0; background:#fff; border-radius:10px; border:1px solid #e0e0e0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px; z-index:2; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.uv-overlay.recording { display:flex; border-color:#ef4444; }
.uv-overlay.transcribing { display:flex; }
.uv-bars { display:flex; align-items:center; gap:2px; height:36px; }
.uv-bars div { width:3px; background:#ef4444; border-radius:2px; transition:height 0.05s; }
.uv-timer { font-size:20px; font-weight:600; color:#1e1b4b; font-variant-numeric:tabular-nums; font-family:Inter,sans-serif; }
.uv-actions { display:flex; gap:8px; margin-top:4px; }
.uv-btn { padding:8px 18px; border-radius:8px; font-size:13px; cursor:pointer; font-family:Inter,sans-serif; border:none; transition:opacity 0.15s; }
.uv-btn:hover { opacity:0.85; }
.uv-btn-cancel { background:#f5f5f5; color:#555570; border:1px solid #e0e0e0; }
.uv-btn-stop { background:#ef4444; color:#fff; }
.uv-btn-redo { background:#f5f5f5; color:#1e1b4b; border:1px solid #e0e0e0; }
.uv-btn-accept { background:var(--primary); color:#fff; }
.uv-transcript { background:#f8f8f8; border-radius:8px; padding:12px 16px; text-align:left; max-height:120px; overflow-y:auto; width:calc(100% - 48px); margin:0 auto; }
.uv-transcript p { color:#1e1b4b; font-size:13px; line-height:1.5; margin:0; }
.uv-big-mic { width:72px; height:72px; border-radius:50%; background:var(--primary); border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:transform 0.15s, box-shadow 0.15s; box-shadow:0 4px 16px rgba(0,0,0,0.12); }
.uv-big-mic:hover { transform:scale(1.05); box-shadow:0 6px 24px rgba(0,0,0,0.18); }
.uv-big-mic:active { transform:scale(0.95); }
.uv-big-mic svg { width:24px; height:24px; stroke:white; fill:none; stroke-width:2; }
.uv-hint { color:#9d9db5; font-size:12px; margin-top:8px; }

/* Legacy compat aliases */
.voice-input-wrap { position:relative; margin-bottom:16px; }
.voice-toggle { display:none; }
.voice-recording-overlay { display:none; }
.voice-stop-btn { padding:10px 28px; background:#ef4444; color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; font-family:Inter,sans-serif; }
.voice-stop-btn:hover { background:#dc2626; }
.voice-transcribing { font-size:14px; color:#555570; display:flex; align-items:center; gap:8px; }
.voice-btn { display:none; }

    /* WhatsApp Inbox — Transcript style (Muse-inspired) */
    .wa-inbox-layout { display:flex; gap:0; height:calc(100vh - 140px); border-radius:12px; overflow:hidden; background:#fff; }
    
    /* Contact list */
    .wa-inbox-list { width:320px; border-right:1px solid #eee; overflow-y:auto; background:#fff; }
    .wa-inbox-item { display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; border-bottom:1px solid #f5f5f5; transition:background 0.15s; }
    .wa-inbox-item:hover { background:#fafafa; }
    .wa-inbox-item.active { background:#f5f5f5; border-left:3px solid var(--primary); }
    .wa-inbox-avatar { width:40px; height:40px; border-radius:50%; background:#f0f0f0; display:flex; align-items:center; justify-content:center; font-weight:600; color:#9d9db5; font-size:15px; flex-shrink:0; }
    .wa-inbox-item-info { flex:1; min-width:0; }
    .wa-inbox-item-name { font-weight:500; font-size:14px; color:#1e1b4b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .wa-inbox-item-preview { font-size:12px; color:#9d9db5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
    .wa-inbox-item-meta { text-align:right; flex-shrink:0; }
    .wa-inbox-item-time { font-size:11px; color:#bbb; }
    .wa-inbox-item-status { font-size:11px; margin-top:2px; }

    /* Thread area */
    /* Thread — light mode (default) */
    .wa-inbox-thread { flex:1; display:flex; flex-direction:column; background:#efeae2; }
    .wa-inbox-thread-header { padding:12px 16px; border-bottom:1px solid #e0e0e0; display:flex; justify-content:space-between; align-items:center; background:#f0f2f5; }
    .wa-inbox-thread-header h3 { margin:0; font-size:16px; font-weight:500; color:#111b21; }
    .wa-inbox-thread-tabs { display:flex; gap:0; border-bottom:1px solid #e0e0e0; background:#f0f2f5; }
    .wa-tab-btn { padding:10px 20px; border:none; background:transparent; color:#667781; cursor:pointer; font-size:13px; font-family:Inter,sans-serif; border-bottom:2px solid transparent; transition:all 0.15s; }
    .wa-tab-btn:hover { color:#111b21; }
    .wa-tab-btn.active { color:#111b21; font-weight:500; border-bottom-color:#00a884; }
    .wa-inbox-thread-messages { flex:1; overflow-y:auto; padding:12px 4px; background:#efeae2; }

    /* Thread — dark mode (toggle) */
    .wa-dark .wa-inbox-thread { background:#0b141a; }
    .wa-dark .wa-inbox-thread-header { border-bottom-color:#222d34; background:#202c33; }
    .wa-dark .wa-inbox-thread-header h3 { color:#e9edef; }
    .wa-dark .wa-inbox-thread-tabs { border-bottom-color:#222d34; background:#202c33; }
    .wa-dark .wa-tab-btn { color:#8696a0; }
    .wa-dark .wa-tab-btn.active { color:#e9edef; }
    .wa-dark .wa-inbox-thread-messages { background:#0b141a; }
    .wa-msg-date-divider { text-align:center; padding:20px 0 12px; }
    .wa-msg-date-divider span { color:#bbb; font-size:12px; font-weight:500; }
    .wa-transcript-line { display:flex; gap:16px; padding:8px 0; align-items:flex-start; border-bottom:1px solid transparent; transition:background 0.1s; }
    .wa-transcript-line:hover { background:#fafafa; border-radius:6px; }
    .wa-transcript-time { font-size:13px; color:#bbb; min-width:45px; padding-top:1px; font-variant-numeric:tabular-nums; flex-shrink:0; }
    .wa-transcript-speaker { font-size:13px; font-weight:600; color:#1e1b4b; min-width:60px; flex-shrink:0; }
    .wa-transcript-speaker.ai { color:#25D366; }
    .wa-transcript-text { font-size:14px; line-height:1.6; color:#312e81; flex:1; }
    .wa-transcript-voice { color:#9d9db5; font-style:italic; }

    /* Reply bar */
    .wa-inbox-reply { display:flex; gap:10px; padding:8px 12px; border-top:1px solid #e0e0e0; align-items:center; background:#f0f2f5; }
    .wa-inbox-reply input { flex:1; padding:9px 14px; border:1px solid #ccc; border-radius:8px; background:#fff; color:#111b21; font-size:14px; outline:none; font-family:Inter,sans-serif; }
    .wa-dark .wa-inbox-reply { border-top-color:#222d34; background:#202c33; }
    .wa-dark .wa-inbox-reply input { border-color:#2a3942; background:#2a3942; color:#e9edef; }
    .wa-inbox-reply input:focus { border-color:var(--primary); }
    .wa-inbox-reply button { padding:9px 18px; border-radius:8px; border:none; background:#00a884; color:#fff; font-weight:500; font-size:13px; cursor:pointer; font-family:Inter,sans-serif; }
    .wa-inbox-reply button:hover { background:var(--primary-hover); }

    @media (max-width: 768px) { 
      .wa-inbox-list { width:100%; } 
      .wa-inbox-thread { display:none; }
    }
      .wa-inbox-layout { height:calc(100vh - 120px); }
    }

.builder-tab{background:var(--surface-light,#f3f4f6);border:none;padding:8px 18px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary,#555570);border-radius:8px;font-family:Inter,sans-serif;transition:all 0.2s;margin-right:6px;}
        .builder-tab.active{color:#fff;background:var(--primary,#6c63ff);}.builder-tab:hover:not(.active){background:var(--surface-mid-light,#e5e7eb);}
        .builder-card{background:var(--rk-white);border:1px solid var(--rk-gray-light);border-radius:var(--rk-radius-xl);padding:var(--rk-space-5);cursor:pointer;transition:all var(--rk-transition);}
        .builder-card:hover{box-shadow:0 2px 8px rgba(0,0,0,0.08);}
        .builder-card-title{font-size:var(--rk-text-base);font-weight:var(--rk-weight-medium);color:var(--rk-navy);margin-bottom:var(--rk-space-1);}
        .builder-card-meta{font-size:var(--rk-text-xs);color:var(--rk-slate-light);font-weight:var(--rk-weight-light);}
        .builder-card-actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px;}
        .builder-card .dot-menu{position:relative;cursor:pointer;padding:4px 8px;font-size:18px;color:#888;}
        .builder-card .dot-menu:hover{color:#1e1b4b;}
        .builder-page-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;}
        .builder-page-thumb{height:140px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:32px;position:relative;overflow:hidden;}
        .builder-page-info{padding:12px;}
        .builder-page-info .name{font-weight:600;font-size:14px;color:#1e1b4b;margin-bottom:8px;}
        .builder-page-actions{display:flex;gap:8px;align-items:center;}
        .builder-page-actions button{background:none;border:1px solid #e0e0e0;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:12px;color:#1e1b4b;}
        .builder-page-actions button:hover{background:#f5f5f5;}
        .builder-reorder{cursor:grab;color:#ccc;margin-right:8px;}
        .builder-reorder:hover{color:#888;}
/* Builder cards */
.builder-card{background:var(--rk-white);border:1px solid var(--rk-gray-light);border-radius:var(--rk-radius-xl);padding:var(--rk-space-5);cursor:pointer;transition:all var(--rk-transition);}
.builder-card:hover{box-shadow:var(--rk-shadow-md);border-color:var(--rk-gray);}
.builder-card-title{font-weight:var(--rk-weight-medium);font-size:var(--rk-text-base);color:var(--rk-navy);}
.builder-card-meta{font-size:var(--rk-text-xs);color:var(--rk-slate-light);margin-top:var(--rk-space-1);font-weight:var(--rk-weight-light);}
.builder-card-actions{margin-top:var(--rk-space-3);display:flex;gap:var(--rk-space-2);align-items:center;}
.builder-card-actions button{border-radius:var(--rk-radius-md);font-size:var(--rk-text-xs);padding:var(--rk-space-1) var(--rk-space-3);font-weight:var(--rk-weight-light);}

/* AI Studio quick action buttons */
.ai-studio-quick {
  padding: 8px 16px;
  background: rgba(99,102,241,0.08);
  color: #4f46e5;
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: Inter, sans-serif;
  transition: all 0.2s;
}
.ai-studio-quick:hover {
  background: rgba(99,102,241,0.15);
  border-color: #6366f1;
}

/* Website manager page cards — clean layout */
.builder-page-card .builder-page-actions {
  gap: 6px !important;
}
.builder-page-card .builder-page-actions button {
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}

/* Mobile: hide full editor button, only show Quick Edit */
@media (max-width: 768px) {
  .builder-action-edit { display: none !important; }
  .builder-page-card .builder-page-thumb { height: 120px !important; }
  #builderPagesGrid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .builder-action-quickedit { flex: 1 !important; }
}

.nav-spacer { flex:1; min-height:var(--rk-space-6); }

/* Builder tabs — kit aligned (Skiv pill tabs) */
.builder-tab {
  padding: var(--rk-space-2) var(--rk-space-4) !important;
  border-radius: var(--rk-radius-md) !important;
  font-size: var(--rk-text-sm) !important;
  font-weight: var(--rk-weight-normal) !important;
  color: var(--rk-slate) !important;
  cursor: pointer;
  border: none !important;
  background: transparent !important;
  font-family: var(--rk-font) !important;
  transition: all var(--rk-transition) !important;
}
.builder-tab:hover {
  color: var(--rk-navy) !important;
}
.builder-tab.active {
  background: var(--rk-white) !important;
  color: var(--rk-navy) !important;
  font-weight: var(--rk-weight-medium) !important;
  box-shadow: var(--rk-shadow-sm) !important;
}

/* Builder page cards — kit aligned */
.builder-page-card {
  border: 1px solid var(--rk-gray-light) !important;
  border-radius: var(--rk-radius-xl) !important;
  background: var(--rk-white) !important;
  transition: all var(--rk-transition) !important;
}
.builder-page-card:hover {
  border-color: var(--rk-gray) !important;
  box-shadow: var(--rk-shadow-md) !important;
}

/* Page grid — 3 col with proper gap */
#builderPagesGrid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: var(--rk-space-4) !important;
}

/* Builder header area */
#builderTitle {
  font-size: var(--rk-text-2xl) !important;
  font-weight: var(--rk-weight-medium) !important;
  color: var(--rk-navy) !important;
}
#builderSubtitle {
  font-size: var(--rk-text-sm) !important;
  color: var(--rk-slate) !important;
  font-weight: var(--rk-weight-light) !important;
}

/* Builder tab container — match Skiv pill tab background */
#builderDetailTabs, #builderTabs {
  background: var(--rk-silicon) !important;
  border-radius: var(--rk-radius-lg) !important;
  padding: 3px !important;
}

/* Back link */
#builderBackRow a {
  font-size: var(--rk-text-sm) !important;
  color: var(--rk-slate) !important;
  font-weight: var(--rk-weight-light) !important;
}
#builderBackRow a:hover {
  color: var(--rk-navy) !important;
}





/* Sidebar layout: scrollable top, pinned bottom */
.sb-top {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--rk-space-5) 0;
}
.sb-top::-webkit-scrollbar { width: 3px; }
.sb-top::-webkit-scrollbar-thumb { background: var(--rk-gray-light); border-radius: 2px; }

.sb-bottom {
  flex-shrink: 0;
  padding: var(--rk-space-3) 0 var(--rk-space-5);
  border-top: 1px solid var(--rk-gray-light);
}


/* ═══ HAMBURGER MENU ═══ */
.hamburger-btn {
  /* Hidden on desktop; shown ≤880px where app-shell.css hides the sidebar
     and this drawer becomes the only nav. The button floats on the white
     #appShell surface, so the icon MUST be dark (was #fff = invisible
     white-on-white once the old coloured header went away — 2026-06-10). */
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 998; /* above content; below overlay(999)/drawer(1000) so it tucks behind when open */
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(15,23,43,0.12);
  font-size: 20px;
  line-height: 1;
  color: #1e1b4b;
  cursor: pointer;
  padding: 9px 11px;
}

.hamburger-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 999;
}
.hamburger-overlay.open { display: block; }

.hamburger-menu {
  position: fixed;
  top: 0; right: -280px;
  width: 280px;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  z-index: 1000;
  transition: right 0.25s ease;
  overflow-y: auto;
}
.hamburger-menu.open { right: 0; }

.hamburger-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 4px;
}

.hamburger-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 8px 0;
}

.hamburger-item {
  padding: 12px 20px;
  font-size: 14px;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hamburger-item:active { background: #f8fafc; }
.hamburger-item i { width: 18px; text-align: center; color: #64748b; font-size: 13px; }
.hamburger-item.active { color: #1e1b4b; font-weight: 600; }

/* T5 — accordion: a module header expands its submenu items inline. */
.hamburger-acc-header { justify-content: flex-start; }
.hamburger-acc-caret { margin-left: auto; font-size: 11px !important; color: #94a3b8; transition: transform .15s ease; }
.hamburger-acc.open .hamburger-acc-caret { transform: rotate(180deg); }
.hamburger-acc-panel { display: none; }
.hamburger-acc.open .hamburger-acc-panel { display: block; }
.hamburger-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 42px;
  font-size: 13.5px;
  color: #475569;
  cursor: pointer;
}
.hamburger-subitem:active { background: #f8fafc; }
.hamburger-subitem.active { color: #1e1b4b; font-weight: 600; background: #f1f5f9; }
/* The mobile half of the "Soon" shelf (A0ad.1) — same rule as .sub-item.is-soon
   in app-shell.css: no handler, so it must not look tappable either. Styled in
   both places because the hamburger is a separate renderer, and styling only
   one of the two is the "a rule applied to one of the two places it governed"
   fault this project keeps meeting. */
.hamburger-subitem.is-soon { cursor: default; opacity: .55; }
.hamburger-subitem.is-soon:active { background: none; }
.hamburger-subitem.is-soon .right-tag {
  margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 20px;
  background: #f1f5f9; color: #64748b;
}
.hamburger-subitem svg, .hamburger-subitem i, .hamburger-subitem .ico {
  width: 16px; height: 16px; flex: none; color: #64748b; font-size: 12px;
}

/* T5 (2026-06-20) — the hamburger now appears at ≤1100px, exactly where
   app-shell.css hides BOTH the sidebar and the secondary subnav, so the
   accordion drawer is the single nav for tablet-portrait + mobile (it reaches
   submenus too). Was ≤880px, which left an 881–1100px dead band with the subnav
   gone but no hamburger. >1100px keeps the desktop sidebar + subnav. */
@media (max-width: 1100px) {
  .hamburger-btn { display: block; }
  /* The corner is the hamburger's (see control-centre.css "THE TOP-RIGHT
     CORNER"). A page head with its own button on the right, such as Feed's
     "+ New post", sat under it at 390px (tester, 2026-10-02), so every page
     head keeps the same 56px clear. */
  .page-head { padding-right: 56px; }
}
@media (max-width: 880px) {
  .header-right { display: none !important; }
}

/* During onboarding the nav must not be reachable (the wizard is full-screen
   and nav targets are gated anyway). showSetup() adds .onboarding-active;
   finishOnboarding() removes it. Hides the mobile hamburger button. */
body.onboarding-active .hamburger-btn { display: none !important; }

/* ═══ HELP'S CORNER AND THE ACCOUNT MANAGER'S EDGE, KEPT CLEAR ONCE ═══
   Alex, 2026-09-27, "corner with room" (docs/projects/jev/decisions/
   2026-09-27-help-position.json). Help is the floating button in the
   bottom-right corner at every width, and the Account manager folds to a tab
   on the left edge. Instead of moving either of them screen by screen, every
   page keeps clear of both, here, for the whole app:
     · the bottom: as much room under the last row as Help takes
       (`--help-room`, set by support-widget.js where Help is mounted), so the
       last button on any page can be scrolled out from under it;
     · the left edge, where the menu is folded away (1100px and under): as
       much room as the folded tab takes (`--am-room`, set by beta-toolbar.js
       where the tab is mounted), so it never sits on a card.
   A page without Help or the tab gets no extra room: both variables are
   unset there and fall back to 0. */
#appShell #mainContent { padding-bottom: calc(var(--help-room, 0px) + 24px); }
/* ⚠️ STICKY NEVER STUCK UNDER #mainContent, and this is why (batch 8,
   2026-09-28). `.main-content` is `overflow-y: auto` but has no height, so
   it never scrolls: the DOCUMENT does. Yet `overflow: auto` still makes it
   the scroll container every `position: sticky` below it measures against,
   so a bar with `bottom: 88px` did not ride 88px above the screen's edge; it
   rode 88px above the bottom of the page's padding, sliding up over the
   content above it. Measured on the course guide's plan step at 1440: the
   bar moved 56px up onto the module list and Maya's typing box, and at rest
   it still sat under Help, because it was not pinned to the screen at all.
   `overflow-x: clip` keeps the old sideways clipping without making a scroll
   container, so the bars ride above Help as their own rules say.
   Batch 8 scoped this to the course guide and lesson editor (`.ccw`).
   BATCH 9 WIDENS IT TO EVERY SCREEN WITH A FLOATING BOTTOM BAR, keyed on the
   bar itself so a new screen that uses one of these bars is covered without
   a list of pages to keep: the Launch Studio's plan (`.approve-bar`), look
   and logo (`.lk-foot`) and photos (`.pho-foot`), the website's copy review
   (`.rc-finish`, which is also the community's content review), community
   settings (`.save-bar`) and the product editor on a phone
   (`.rk-sticky-actions`). Each bar's own rule keeps it clear of Help (the
   corner) and, where Maya is pinned beside it, stops short of Help instead
   of riding above it, as the course guide's does. Each screen was measured
   for sideways overflow before it was added: `clip` would hide what `auto`
   used to let scroll, and none of them had any.
   Not woken: screens with no floating bottom bar. Their sticky rules are
   all `top`, written for this dead state too, and they are left for their
   owners to check. */
#appShell #mainContent:has(> .page.active :is(.ccw, .rc-finish, .approve-bar, .lk-foot, .pho-foot, .rk-sticky-actions)) { overflow-x: clip; overflow-y: visible; }
/* Community settings only over 768px. Its save bar sits in the settings
   column, left of the contents list, so it ends well short of Help. On a phone
   the settings column is already wider than the screen (794px at 390, the
   access choices do not wrap), and `clip` would cut off what can at least be
   swiped to today, so there it is left as it was until that is fixed. */
@media (min-width: 769px) {
  #appShell #mainContent:has(> .page.active .save-bar) { overflow-x: clip; overflow-y: visible; }
}
@media (max-width: 1100px) {
  #appShell #mainContent { padding-left: max(12px, var(--am-room, 0px)); }
}
@media (min-width: 769px) and (max-width: 1100px) {
  #appShell #mainContent { padding-left: max(36px, var(--am-room, 0px)); }
}