/* ============================================
   APUNKAI v0.1.0 — SINGLE-SOURCE THEME SYSTEM
   Beta release — Mobile-first, Cross-device
   ============================================ */

/* ── 1. RESET ────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* ARCH-01: Scroll hardening — html+body never scroll; panels do.
   dvh prevents iOS Safari chrome resize bounce. */
html { color-scheme: light dark; scroll-behavior: smooth; height: 100dvh; overflow: hidden; }
/* [FIX-THEMECHECKBOX-01, 2026-07-30] `color-scheme: light dark` above tells the browser
   "render native controls per OS preference" — so on a device with a dark OS/browser
   preference, native inputs (checkboxes, date/time pickers, scrollbars) render with the
   BROWSER'S dark UA styling — solid dark box, etc. — even while our own [data-theme="light"]
   is active and everything else on the page is light. That's the confirmed root cause of the
   "dark spots" on checkboxes (chores table, notes cards) reported in light theme: the checkbox
   itself isn't reading our theme at all, it's reading the OS's. Fix: once a theme is actually
   selected, pin color-scheme to that theme specifically so native controls follow OUR theme,
   not the OS's. The un-scoped `light dark` above stays as the pre-theme-load fallback only
   (matches the existing `:root:not([data-theme])` fallback pattern below, ~line 6353) — do not
   remove it, just don't let it win once a real theme is set. Single owner: this is the only
   `color-scheme` declaration outside that pre-load fallback; do not add another. */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }

/* ── 2. THEME TOKENS ─────────────────────── */
:root {
  /* Brand */
  --primary:        #2563eb;
  --primary-rgb:    37, 99, 235;
  --primary-hover:  #1d4ed8;
  /* [FIX-BRANDTEXT-01, 2026-08-05, founder directive: "always use the navy blue theme for apunkai
     brand text always across all flows including share links etc."]
     --brand-text is the ONE token for the "ApunkAI" wordmark and brand-name mentions. It exists
     separately from --primary on purpose, and BRAND_SSOT.md's Color section already states the
     rule: brand mentions → navy family; buttons/links/interactive → --primary. Collapsing the two
     is what caused the drift this fixes — the wordmark had five different values across the app
     (--primary here, plain body white on the share-link pages, grey on the staff portal, and a
     three-colour gradient on admin-login that contradicted this very file's own "NO gradient on
     text" rule a few hundred lines below).
     Value note: #60a5fa (blue-400) is not a new invention — it is the value the dashboard wordmark
     and about/privacy/terms/product-docs were already using. Pure navy (#16213e) is unreadable on
     this dark background, which is exactly the case BRAND_SSOT.md's --navy-light row covers; this
     is the dark-mode member of the navy family, with the deeper blue below for light mode. */
  --brand-text:     #60a5fa;
  --navy:           #16213e;
  --navy-light:     #2a3a63;
  --success:        #10b981;
  --warning:        #f59e0b;
  --error:          #ef4444;
  --info:           #3b82f6;
  --danger:         #dc2626;

  /* Spacing */
  --spacing-xs: 4px;  --spacing-sm: 8px;
  --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px;

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

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);

  /* Transition */
  --transition: all 0.2s ease;

  /* Surface overlays */
  --surface-overlay:    rgba(15, 23, 42, 0.92);
  --surface-overlay-hv: rgba(15, 23, 42, 0.95);

  /* Chips */
  --chip-bg:     var(--bg-tertiary);
  --chip-border: var(--border);
  --chip-color:  var(--text-primary);

  /* Hints */
  --hint-bg:         rgba(31, 41, 55, 0.5);
  --hint-title-color: #818cf8;
  --hint-text-color:  var(--text-secondary);
}
/* ── Cursor consistency — all interactive elements show pointer cursor ──────── */
button:not([disabled]),
[role="button"],
[onclick],
.apk-cal-day,
.apk-cal-week-col-hdr,
.apk-cal-event-card,
.apk-cal-tab,
.apk-cal-nav-btn,
#apk-cal-today-btn,
.apk-chip,
.apk-cal-chip,
.nav-item,
.hss-pill,
.bot-action-card,
.suggestion-btn,
label[for],
summary,
a[href] { cursor: pointer; }

[disabled],
button[disabled] { cursor: not-allowed; }


/* ── 3. DARK THEME (default) ─────────────── */
[data-theme="dark"], :root {
  --bg-primary:     #0f172a;
  --bg-primary-rgb: 15,23,42;
  --bg-secondary: #1e293b;
  --bg-tertiary:  #334155;
  --bg-hover:     #475569;
  /* [FIX-BGCARD-UNDEFINED-01] Was used at 4 live call sites (this file + app-agentic-os.css)
     but never actually defined anywhere in the CSS — every one of those resolved to
     transparent, falling through to whatever dark ancestor sat behind it, REGARDLESS of theme.
     That's the confirmed root cause of the disambiguation card ("About your home...") staying
     dark navy in light theme. Aliased to --bg-secondary (already correctly per-theme) rather
     than a new hardcoded value, so every existing var(--bg-card) usage now resolves correctly
     without needing to hunt down and edit each call site individually. */
  --bg-card: var(--bg-secondary);
  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary:  #94a3b8;
  --border:       #334155;
  --border-light: #475569;
}

/* ── 4. LIGHT THEME ──────────────────────── */
[data-theme="light"], .light-theme {
  --bg-primary:     #f8fafc;
  --bg-primary-rgb: 248,250,252;
  /* [FIX-THEME-01] was pure #ffffff -- a very subtle off-white reduces glare/eye-strain on
     bright screens without meaningfully affecting text contrast (still >15:1 against
     --text-primary). Common "harsh light theme" complaint; safe, reversible values-only change. */
  --bg-secondary: #fdfdfe;
  --bg-tertiary:  #f1f5f9;
  --bg-hover:     #e2e8f0;
  /* [FIX-BGCARD-UNDEFINED-01] See the matching dark-theme definition above — same alias, so
     this resolves correctly in light theme too instead of staying stuck on the dark value. */
  --bg-card: var(--bg-secondary);
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-tertiary:  #64748b;
  --border:       #e2e8f0;
  --border-light: #cbd5e1;
  --surface-overlay:    rgba(248, 250, 252, 0.92);
  --surface-overlay-hv: rgba(248, 250, 252, 0.95);
  --hint-bg:          rgba(241, 245, 249, 0.8);
  --hint-title-color: var(--primary);
  --hint-text-color:  var(--text-secondary);
}

/* ── 5. SYSTEM PREFERENCE FALLBACK ──────── */

/* ── 6. BASE BODY ────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── 7. ANIMATIONS (single definitions) ─── */
@keyframes spin      { to { transform: rotate(360deg); } }

/* [FIX-r80] Base .spinner — bare `.spinner` elements had NO size/border/animation (only
   #serving-overlay .spinner and .apk-view-spinner .spinner were styled), so a standalone
   <div class="spinner"> was invisible ("blue spinner missing"). Define the brand-blue spinner. */
.spinner {
  display: inline-block;
  width: 24px; height: 24px;
  border: 3px solid rgba(37, 99, 235, 0.2);
  border-top-color: var(--primary, #2563eb);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
  vertical-align: middle;
}
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
/* CRITICAL: fadeIn is opacity-ONLY — no transform. Firefox creates a new
   containing block for position:fixed children inside any animated transform
   context. Keeping fadeIn transform-free ensures #apk-agentic-panel (fixed,
   z-index:10000) is never trapped inside a .view-panel animation frame.      */
/* NOTE: fadeIn is intentionally opacity-only. Any transform in a keyframe
   creates a new stacking/containing context in Firefox, which traps
   position:fixed children (agentic panel, modals) inside the animated
   element instead of the viewport. Do NOT add transform here. */
@keyframes pulse     { 0%,100% { box-shadow: 0 4px 12px rgba(37,99,235,0.4); } 50% { box-shadow: 0 4px 20px rgba(37,99,235,0.6); } }
@keyframes namaste-bow { 0%,100% { transform:rotate(0deg); } 50% { transform:rotate(-10deg); } }
@keyframes messageSlideIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes modalSlideIn { from { opacity:0; transform:scale(0.95) translateY(-20px); } to { opacity:1; transform:scale(1) translateY(0); } }

/* ── Validation shake — triggered on Next when step is invalid ── */
@keyframes apkShake {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-6px); }
  35%     { transform: translateX(6px); }
  55%     { transform: translateX(-4px); }
  75%     { transform: translateX(4px); }
}
@keyframes apkShakeIn {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:translateX(0); }
}
.apk-shake { animation: apkShake 0.38s ease; }

/* ── Wizard step error banner ── */
.apk-step-error {
  display: none;
  margin: 0 16px 8px;
  padding: 9px 14px;
  border-radius: 8px;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.35);
  color: #ef4444;
  font-size: 13px;
  font-weight: 600;
  align-items: center;
  gap: 8px;
  animation: apkShakeIn .28s ease;
}
.apk-step-error .material-symbols-outlined { font-size: 16px; flex-shrink: 0; }

/* ── 8. MATERIAL ICONS FIX ───────────────── */
.material-symbols-outlined {
  background: transparent;
  background-color: transparent;
  -webkit-text-fill-color: inherit !important;
}

/* ── 9. UTILITIES ────────────────────────── */
.mr-2 { margin-right: 8px; }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.text-secondary { color: var(--text-secondary); }
.stat-icon-large { font-size: 20px; line-height: 1; }  /* shrunk — use hss-icon for home */
.icon-primary { color: var(--primary); }
.icon-warning { color: var(--warning); }
.icon-success { color: var(--success); }
.icon-info    { color: var(--info); }
.help-icon    { color: #FCD34D; }
.insights-grid { padding: var(--spacing-lg); }
.btn-block { width: 100%; justify-content: center; }



/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   All display:none initial states live here.
   JS toggles .is-hidden via classList — never touches style.display directly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden state — JS removes this to show */
.is-hidden { display: none !important; }

/* Skip link — off-screen, visible on focus */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--primary);
  color: #fff;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* Loading screen */
.loading-text {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
}

/* Icon size utilities */
.icon-sm   { font-size: 16px; }
.icon-md   { font-size: 18px; }
.icon-lg   { font-size: 22px; }
.icon-xl   { font-size: 28px; }
.icon-muted   { color: var(--text-tertiary); }
.icon-primary { color: var(--primary); }

/* Status icon colours */
.hss-warning { color: var(--warning); }
.hss-error   { color: var(--error); }
.hss-success { color: var(--success); }
.hss-primary { color: var(--primary); }

/* Nav group accordion */
.nav-group-chevron {
  transition: transform 0.2s ease;
}
.nav-group-chevron.is-open {
  transform: rotate(180deg);
}
.nav-group-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.nav-group-items.is-open {
  max-height: 500px;
  overflow: visible;
}

/* Data source filter stacking */
.data-source-group { position: relative; z-index: 200; }
#data-source        { position: relative; z-index: 201; }

/* Icon button (bare, no chrome) */
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Filter row layout */
.filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

/* Form helpers */
.flex-grow    { flex: 1; min-width: 160px; }
.input-narrow { max-width: 160px; }
.mb-md        { margin-bottom: var(--spacing-md); }
.mb-0         { margin-bottom: 0; }
.form-group--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Modal size modifiers */
.modal-sm { max-width: 360px; }
.modal-md { max-width: 480px; }
.modal-body--center {
  text-align: center;
  padding: var(--spacing-xl);
}

/* Upgrade modal typography */
.upgrade-desc  { color: var(--text-secondary); font-size: 15px; line-height: 1.7; }
.upgrade-price { display: block; font-size: 22px; color: var(--primary); margin: var(--spacing-md) 0; }
.upgrade-note  { font-size: 12px; color: var(--text-tertiary); margin-bottom: var(--spacing-lg); }

/* Conversation spacing */
.conversation-container { margin-top: var(--spacing-md); }


/* ══════════════════════════════════════
   HEADER
   ══════════════════════════════════════ */
.header {
  position: fixed; top: 0; left: 0; right: 0; height: 64px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--spacing-lg);
  z-index: 1000;
  box-shadow: var(--shadow-md);
}
.header-left  { display:flex; align-items:center; gap:var(--spacing-md); flex-shrink:0; min-width:0; }
.header-right { display:flex; align-items:center; gap:4px; flex-shrink:0; overflow:visible; }
/* header-filters: flex:1 fills the space between left and right */
.header-filters { display:flex; align-items:center; gap:var(--spacing-md); flex:1; min-width:0; max-width:340px; overflow:visible; transition: opacity 0.2s ease, visibility 0.2s ease; }
.header-filters select { min-width: 120px; max-width: 160px; }

.logo-btn      { background:transparent; border:none; outline:none; cursor:pointer; padding:4px 6px; border-radius:0; box-shadow:none; transition:opacity .18s; }
.logo-btn:hover { background:transparent !important; opacity:.88; }
.logo-btn:focus { outline:none !important; box-shadow:none !important; }
.logo-container{ display:flex; flex-direction:row; align-items:center; gap:8px; padding:0; }
.logo-icon  {
  width: 36px;
  height: 36px;
  fill: currentColor;
  vertical-align: middle;
  transition: fill 0.3s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.logo-btn:hover .logo-icon { transform: scale(1.05); }

.logo-text     { display:flex; flex-direction:column; gap:1px; }
.logo          { font-size:21px; font-weight:800; margin:0; letter-spacing:-0.5px; line-height:1.1; }
.tagline       { font-size: 11px; color:var(--text-secondary); margin:0; font-weight:500; letter-spacing:0.2px; opacity:.8; }
/* [FIX-BETATAG-01] Small, unobtrusive "still in beta" signal next to the brand — a private-beta
   product shouldn't read as a finished, general-release app in its own header. */
.apk-beta-tag  {
  display:inline-block; vertical-align:middle; margin-left:6px;
  font-size: 11px; font-weight:800; letter-spacing:.4px; line-height:1;
  padding:3px 5px; border-radius:5px; color:var(--primary);
  background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.35);
}
/* [FIX-TMCLASS-01, founder request 2026-07-24] `.apk-tm` (™ mark on the "ApunkAI" wordmark) moved
   to a single shared file, linked from every surface (dashboard, onboarding, about/privacy/terms,
   admin-login) instead of being redefined per page — see src/shared/apk-tm-badge.css for the
   rule itself and the full rationale (was two drifting copies, inconsistent sizing per context,
   a fragile position-hack that put the mark at the bottom of the text in some places). index.html
   links that file directly; do not re-add a local `.apk-tm` block here or anywhere else. */
/* [FEATURE-GATEUI-01, item 2] Tier-icon badge on paid-only feature rows (Connectors, etc.) —
   the icons' own inline styles (see _getChaiTierIcons, app.js) already handle their internal
   layout; this just gives the wrapping badge a bit of breathing room next to the feature name. */
.apk-gate-badge { display:inline-flex; vertical-align:middle; margin-left:6px; }

/* Robot icon (Material Symbols) */
.robot-icon    {
  color: var(--primary);
  font-size: 36px;
  transition: var(--transition);
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(37,99,235,.35));
}
[data-theme="light"] .robot-icon { filter: none; }
.logo-btn:hover .robot-icon { color: var(--primary-hover); transform: scale(1.06); }

/* apk-logo-svg: the actual <img> in index.html */
.apk-logo-svg {
  width: 38px;      /* Slightly smaller — more proportional to text */
  height: 38px;
  flex-shrink: 0;
  /* Clean display — let the SVG colors speak, no heavy glow */
  filter: none;
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
  border-radius: 8px;          /* Subtle rounded corners on the icon */
  /* [FIX-LOGOHALO-01, 2026-09-04, founder: "our logo has a weird white bg around it in light
     theme"] Same root cause/fix as about.html's .hero-logo-col img -- the SVG's own corners are
     transparent by design, invisible against dark chrome but a white halo against light. */
  background: #0d4c7b;
}
/* Hover: gentle scale + blue shadow (not purple) */
.logo-btn:hover .apk-logo-svg {
  transform: scale(1.07);
  filter: drop-shadow(0 2px 10px rgba(59,130,246,.45));
}
/* Light theme: keep clean, add faint shadow for depth */
[data-theme="light"] .apk-logo-svg {
  filter: drop-shadow(0 1px 4px rgba(29,78,216,.2));
}

/* Mobile: keep logo readable but compact */
.namaste-hands { font-size:24px; animation:namaste-bow 2s ease-in-out infinite;width: 60px;
  height: auto;
  margin-top: -8px; }

/* ══════════════════════════════════════════════════════════════
   APUNKAI BRAND WORDMARK — Single-color, theme-agnostic
   Design rationale:
     Gradients on text = dated (2015–2020 aesthetic).
     Best-in-class apps (Notion, Linear, Claude, Vercel) use a
     SINGLE BOLD COLOR for the wordmark and let the icon carry
     the personality.

   Color choice: #3b82f6 (blue-500) on dark bg / #1d4ed8 (blue-700) on light.
   This is a confident royal blue — tech-forward, trustworthy, Indian-brand
   friendly (same blue family as Jio, HDFC, Zepto). Avoids the generic
   purple/indigo that every AI startup uses.

   The logo SVG icon provides the visual interest — the wordmark stays
   clean, readable, and instant to recognize.
   ══════════════════════════════════════════════════════════════ */
.apunkai-wordmark,
.app-name, .brand-name, .apunkai-logo-text, #apunkai-brand-text,
.logo, h1.logo, .logo.apunkai, .apk-brand {
  /* Single color — NO gradient */
  /* [FIX-BRANDTEXT-01] Was the hardcoded #60a5fa. Same value, now via the --brand-text token
     declared in :root, so the founder's "navy blue theme for brand text across all flows" is one
     edit rather than a hunt across nine files. */
  color: var(--brand-text);          /* blue-400 family: readable on dark bg */
  background: none;
  -webkit-text-fill-color: unset;    /* undo any inherited gradient */
  background-clip: unset;
  font-weight: 800;
  letter-spacing: -0.5px;
}
/* Light theme: deeper blue for contrast on white/light bg */
[data-theme="light"] .logo,
[data-theme="light"] .apunkai-wordmark,
[data-theme="light"] .app-name,
[data-theme="light"] .apk-brand {
  /* [FIX-BRANDTEXT-01] Light theme overrides the token itself below; this rule stays as the
     explicit fallback for any surface that sets .logo/.apk-brand without inheriting :root. */
  color: var(--brand-text);          /* → #1d4ed8 (blue-700) in light theme, set just below */
  background: none;
  -webkit-text-fill-color: unset;
}
/* Logo icon: visible in dark + light themes */
.app-logo-icon {
  filter: none;
  transition: filter .2s ease;
}

.filter-group, .data-source-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-tertiary);
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  height: 34px;
}
.filter-group:hover, .data-source-group:hover {
  border-color: var(--primary);
  background: var(--bg-secondary);
}
.filter-select, .data-source-select {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  outline: none;
  min-width: 80px;
  font-family: inherit;
}

/* ── Auth state ───────────────────────────────────────────────────────────── */
/* show/hide controlled by JS + body.authenticated */
#user-name, #user-role { font-size:13px; }

/* Score chip — paid non-admin */
.score-chip {
  display:flex; align-items:center; gap:6px;
  background:var(--bg-tertiary); padding:5px 10px;
  border-radius:20px; border:1px solid var(--border);
  cursor:pointer; transition:var(--transition); flex-shrink:0;
}
.score-chip:hover { border-color:var(--primary); }
.score-value { color:var(--primary); font-size:14px; font-weight:700; }

/* ── Avatar dropdown ──────────────────────────────────────────────────────── */
.avatar-menu { position:relative; flex-shrink:0; }

.avatar-btn {
  display:flex; align-items:center; gap:8px;
  background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:24px; padding:5px 10px 5px 6px;
  cursor:pointer; transition:background .15s, border-color .15s;
  color:var(--text-primary); min-width:0;
}
.avatar-btn:hover { background:var(--bg-tertiary); border-color:var(--border-light); }
.avatar-btn[aria-expanded="true"] { border-color:var(--primary); }

.avatar-icon { font-size:28px; color:var(--primary); flex-shrink:0; }
.avatar-meta { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.user-name   { font-size:13px; font-weight:600; color:var(--text-primary); white-space:nowrap; max-width:90px; overflow:hidden; text-overflow:ellipsis; }
.user-role   { font-size: 11px; color:var(--text-tertiary); text-transform:uppercase; font-weight:600; letter-spacing:.4px; }
.avatar-chevron { font-size:18px; color:var(--text-tertiary); transition:transform .2s; flex-shrink:0; }
.avatar-btn[aria-expanded="true"] .avatar-chevron { transform:rotate(180deg); }

/* Dropdown panel */
.avatar-dropdown {
  position:absolute; top:calc(100% + 6px); right:0;
  background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:12px; min-width:180px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  overflow:hidden; z-index:500;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.avatar-menu.open .avatar-dropdown {
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}

.avatar-dd-item {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 14px;
  background:none; border:none; cursor:pointer;
  font-size:13px; font-weight:500; font-family:inherit;
  color:var(--text-primary); text-align:left;
  transition:background .12s;
}
.avatar-dd-item:hover { background:var(--bg-tertiary); }
.avatar-dd-item .material-symbols-outlined { font-size:18px; color:var(--text-secondary); }
.avatar-dd-admin .material-symbols-outlined { color:#10b981; }
.avatar-dd-admin { color:#10b981; }
.avatar-dd-logout { color:var(--error); }
.avatar-dd-logout .material-symbols-outlined { color:var(--error); }
.avatar-dd-divider { height:1px; background:var(--border); margin:4px 0; }

/* Hide avatar-meta text on very narrow headers, show just icon */


/* ══════════════════════════════════════
   SIDEBAR + NAV
   ══════════════════════════════════════ */
.sidebar {
  position:fixed; top:64px; left:0;
  width:52px; /* collapsed default */
  height:calc(100dvh - 64px);
  background:var(--bg-secondary);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  z-index:100;
  /* overflow:visible so .nav-menu (flex:1) can scroll — overflow:hidden clips children */
  overflow:visible;
  transition:width .22s cubic-bezier(.4,0,.2,1);
}
/* When collapsed to icon-rail, clip horizontally only */
body:not(.sidebar-open) .sidebar { overflow-x:hidden; overflow-y:visible; }
/* Expanded state — toggled by JS adding .expanded to .sidebar */
.sidebar.expanded { width:180px; }

/* Collapse toggle button at top of sidebar */
.nav-collapse-btn {
  display:flex; align-items:center; justify-content:center;
  width:52px; height:48px; flex-shrink:0;
  background:none; border:none; cursor:pointer;
  color:var(--text-tertiary);
  transition:color .15s, background .15s;
  border-bottom:1px solid var(--border);
}
.nav-collapse-btn:hover { color:var(--text-primary); background:var(--bg-tertiary); }
.nav-collapse-btn .material-symbols-outlined { font-size:20px; }

.nav-menu {
  display:flex; flex-direction:column; flex:1;
  overflow-y:auto; overflow-x:hidden;
  padding:4px 0;
  /* Ensure scrollbar appears within the sidebar bounds */
  height:0; /* flex:1 + height:0 = fills available height and scrolls */
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}

.nav-btn {
  display:flex; flex-direction:row; align-items:center; gap:10px;
  padding:11px 14px; color:var(--text-tertiary);
  background:transparent; border:none; cursor:pointer;
  transition:background .15s, color .15s; position:relative;
  border-left:3px solid transparent; white-space:nowrap;
  min-height:44px; width:100%; text-align:left;
}
.nav-btn:hover  { background:var(--bg-tertiary); color:var(--text-primary); }
.nav-btn.active { color:var(--primary); background:rgba(99,102,241,.08); border-left-color:var(--primary); }
.nav-icon       { font-size:20px; flex-shrink:0; }
.nav-label {
  font-size:13px; font-weight:500;
  color: inherit;   /* always inherit from .nav-btn — never invisible */
  display:none;     /* shown by JS setProperty when sidebar opens */
  overflow:hidden; white-space:nowrap;
  transition:opacity .15s;
}

/* Show labels when sidebar is expanded */
.sidebar.expanded .nav-label { display:inline; opacity:1; }

/* Tooltip on collapsed nav items */
.sidebar:not(.expanded) .nav-btn { position:relative; }
/* Nav tooltip: ONLY on desktop when nav is collapsed to icon-only rail (body.nav-collapsed)
   Never show when labels are visible — avoids duplicate text */
body.nav-collapsed .sidebar .nav-btn::after {
  content: attr(aria-label);
  position:absolute; left:calc(62px + 8px); top:50%; transform:translateY(-50%);
  background:var(--bg-secondary); color:var(--text-primary);
  font-size:12px; font-weight:500; padding:5px 10px;
  border-radius:8px; border:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .12s;
  z-index:400;
}
body.nav-collapsed .sidebar .nav-btn:hover::after { opacity:1; }

/* Nav badge — singular definition */
.nav-badge {
  position:absolute; top:8px; right:8px;
  background:var(--error); color:white;
  font-size: 11px; font-weight:700;
  padding:2px 5px; border-radius:10px;
  min-width:16px; text-align:center;
}
.nav-badge.hidden { display:none; }

.nav-badge:not(.hidden) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════
   MAIN CONTENT + VIEWS
   ══════════════════════════════════════ */
.main-content {
  position:relative;
  margin:64px 0 0 0;  /* No default left margin — set by media queries */
  padding:var(--spacing-xl);
  min-height:calc(100dvh - 64px);
  transition:margin-left .22s cubic-bezier(.4,0,.2,1);
}
/* When sidebar expanded, push content right */
body.nav-expanded .main-content { margin-left:180px; }
/* Command bar follows same offset */
body.nav-expanded .command-bar { left:calc(180px + 12px); }
.view-panel { display:none; position:relative; min-height:400px; }
.view-panel.active { display:block !important; animation:fadeIn 0.3s ease; opacity:1; }

/* FIX: view-header layout — prevent title from bleeding into action buttons.
 * Left side: shrinks to 0 if needed (title is supplementary).
 * Right side: wraps cleanly to next line on very narrow screens.
 * This fixes the "Notes/Select all" overlap in screenshot #3.
 */
.view-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--spacing-xl); flex-wrap:wrap; gap:var(--spacing-md);
}
.view-header-left {
  display:flex;align-items:center;gap:8px;
  min-width:0;flex-shrink:1;overflow:hidden;
}
.view-header-left h2 {
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.view-header-right {
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  flex-shrink:0;
}
/* Ensure search inputs in headers don't force overflow */
.view-header-right input.form-control,
.view-header-right .search-input {
  min-width:80px;max-width:180px;flex:1 1 80px;
}
.view-header h2 {
  font-size: clamp(18px, 4vw, 28px);
  font-weight: 900;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.view-header h3 {
  font-size: 20px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: var(--spacing-sm);
}


/* ══════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════ */
.btn-primary {
  background:var(--primary); color:white; border:none;
  padding:12px 20px; min-height:44px; border-radius:var(--radius-md);
  font-size:14px; font-weight:600; cursor:pointer;
  transition:var(--transition);
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover    { background:var(--primary-hover); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; filter:grayscale(1); }

.btn-secondary {
  background:var(--bg-tertiary); color:var(--text-primary);
  border:1px solid var(--border);
  padding:12px 20px; min-height:44px; border-radius:var(--radius-md);
  font-size:14px; font-weight:600; cursor:pointer;
  transition:var(--transition);
  display:inline-flex; align-items:center; gap:8px;
}
.btn-secondary:hover { background:var(--bg-hover); border-color:var(--border-light); }

.btn-icon {
  background:transparent; border:none; color:var(--text-secondary);
  font-size:20px; cursor:pointer; padding:10px 12px;
  border-radius:var(--radius-md); transition:var(--transition);
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-icon:hover { background:var(--bg-hover); color:var(--text-primary); }
.btn-success { color:var(--success); }
.btn-danger  { color:var(--error); }
.btn-warning { color:var(--warning); }

.btn-sm {
  padding:8px 14px; font-size:13px; min-height:36px;
  border-radius:var(--radius-md);
}


/* ══════════════════════════════════════
   FORMS
   ══════════════════════════════════════ */
.form-group { margin-bottom:16px; }
.form-group:last-child { margin-bottom:0; }
.form-group label {
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--text-secondary);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px;
}
.form-group input,
.form-group select,
.form-group textarea,
.form-control {
  width:100%; background:var(--bg-tertiary);
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:12px 16px; color:var(--text-primary);
  font-size:14px; font-family:inherit; transition:var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,235,0.1);
}
.form-control.is-valid   { border-color:var(--success) !important; background-color:rgba(16,185,129,0.05) !important; }
.form-control.is-invalid { border-color:var(--error) !important;   background-color:rgba(239,68,68,0.05) !important; }


/* ══════════════════════════════════════
   MODALS — single definition
   ══════════════════════════════════════ */
/* ============ MODALS ============ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    /* [FIX-BLURPREFIX-01, this session] was missing this pair — the comment above this block
       already claims this matches .apk-confirm-overlay (app-agentic-os.css) "exactly", but that
       overlay carries both backdrop-filter and -webkit-backdrop-filter and this one only had the
       first, so Safari/iOS rendered every generic .modal with no blur at all. */
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000; /* [r100] inline-modal layer — above generic 9999 overlays (upgrade/
                       sheets/tour), below Smart Import (13000) + auth pickers (14000) +
                       ApkMiniModal (13500). Fixes "inline modal opens behind an overlay". */
    padding: var(--spacing-lg);
}

.modal.active {
    display: flex;
    align-items: center;      /* [r128] vertical center — was missing from base rule */
    justify-content: center;  /* [r128] horizontal center */
}

.modal-content {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 600px;
  max-height: 92dvh;     /* use dvh for mobile — excludes browser chrome */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  animation: modalSlideIn 0.25s ease;
  position: relative;
}

.modal-large .modal-content { max-width: 900px; }
.modal-md    .modal-content { max-width: 700px; }

@keyframes modalSlideIn {
  from { opacity:0; transform:translateY(16px) scale(0.98); }
  to   { opacity:1; transform:translateY(0)    scale(1);    }
}

/* Compact header — smaller font, tighter padding */
.modal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 8px 14px;          /* was 12px 18px */
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--bg-secondary);
  min-height: 44px;
}

.modal-header h3 {
  font-size: 15px;             /* was 20px */
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.modal-header h3 .material-symbols-outlined { font-size: 17px; }

/* Body: all remaining space, always scrollable */
.modal-body {
  flex: 1;
  min-height: 0; /* CRITICAL: Forces Firefox to respect max-height of parent. Without
                   this, Firefox flex children expand past the modal boundary,
                   pushing the footer off screen. Single line fix. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 16px;           /* was var(--spacing-lg) ≈ 20px */
  position: relative;
}

/* Compact footer - always sticky, always visible */
.modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 8px 14px;            /* was 10px 18px */
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  min-height: 52px;
}

/* [r102] Mobile modals are CENTERED in the viewport (was a bottom-sheet via flex-end).
   Product decision: every inline + global modal opens dead-center on all viewports, never
   docked to the bottom. Comfortable gutter, rounded on all sides, and sized to clear the
   bottom-nav (56px) + safe area so the footer/CTA is always reachable. */
@media (max-width: 640px) {
  .modal { align-items: center; justify-content: center; padding: var(--spacing-md); }
  .modal-content {
    width: 100%;
    max-width: 460px;
    border-radius: var(--radius-xl);
    margin: 0 auto;
    /* Fit within the viewport above the bottom-nav + safe area, with breathing room */
    max-height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px) - 32px);
    max-height: calc(100vh - 88px); /* fallback for browsers without dvh */
  }
  /* Ensure modal body scrolls and doesn't push footer off */
  .modal-content .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }
  /* Specific modal body overrides for add-chore/reminder */
  #add-chore-modal .modal-body,
  #add-reminder-modal .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }
}

/* [FIX-DEADCOMMENT-02, v0.2.0, 2026-08-30, Round BE] Pre-existing bug, not introduced this
   session -- found while sweeping every stylesheet for the same class of bug as
   FIX-DEADCOMMENT-01 (about.html). This section header was missing its opening marker,
   leaving "DATA TABLES + FILTER BAR" plus the decorative line and its own closing marker as
   raw text with no opener to pair with -- which would fold straight into .data-table's own
   selector as one long invalid prelude and drop the entire rule. Restored the opening marker;
   no content removed. */
/* ══════════════════════════════════════
   DATA TABLES + FILTER BAR
   ══════════════════════════════════════ */
.data-table {
  background:var(--bg-secondary); border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-md);
  position:relative; min-height:300px;
}
.table-header {
  background:var(--bg-tertiary); border-bottom:2px solid var(--border-light);
  display:grid; grid-template-columns:2fr 1.5fr 1fr 1fr 1fr;
  gap:var(--spacing-md); padding:16px 20px; align-items:center;
}
.table-header div {
  font-size:12px; font-weight:700; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:0.5px;
  display:flex; align-items:center; gap:6px;
}
/* Sort handled by JS-injected .tbl-thead with .sortable-col — see below */

.table-body { display:flex; flex-direction:column; }
.table-row {
  display:grid; grid-template-columns:2fr 1.5fr 1fr 1fr 1fr;
  gap:var(--spacing-md); padding:16px 20px;
  border-bottom:1px solid var(--border);
  transition:var(--transition); align-items:center;
}
.table-row:hover      { background:var(--bg-tertiary); }
.table-row:last-child { border-bottom:none; }
.table-row.overdue    { border-left:3px solid var(--error); }

.col-task, .col-person, .col-date, .col-status, .col-actions {
  display:flex; align-items:center; gap:8px;
}
.task-icon { color:var(--primary); font-size:18px; }
.task-desc { font-size:12px; color:var(--text-tertiary); }
.overdue-text { color:var(--error); }
/* ══════════════════════════════════════
   ALERTS
   ══════════════════════════════════════ */
.alert      { padding:1rem; border-radius:var(--radius-md); display:flex; align-items:center; gap:0.75rem; }
.alert-info { background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.3); color:#3b82f6; }


/* ══════════════════════════════════════
   STAT CARDS (Dashboard)
   ══════════════════════════════════════ */
/* ── Home Stat Strip (compact pill row) ── */
/* RCA-1 FIX: default hidden — JS adds .populated to reveal via grid */
.home-stat-strip {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.home-stat-strip.populated {
  display: grid;
}
.hss-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 6px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  min-width: 0;
}
.hss-pill:hover { border-color: var(--primary); background: var(--bg-tertiary); }
.hss-icon { font-size: 18px; line-height: 1; }
.hss-val  { font-size: 20px; font-weight: 800; color: var(--text-primary); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hss-lbl  { font-size: 11px; color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }

/* Legacy stat-grid kept for other views (insights etc) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}
.stat-card {
  background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--spacing-md);
  transition:var(--transition); cursor:pointer; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center;
}
.stat-card:hover { border-color:var(--border-light); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stat-value { font-size:28px; font-weight:900; color:var(--primary); margin-bottom:4px; }
.stat-label { font-size:11px; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }


/* ══════════════════════════════════════
   CONVERSATION / BOT
   ══════════════════════════════════════ */
.conversation-container {
  /* No background/border on home — chat flows naturally without a container box */
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
}
.conversation-header {
  display:flex; align-items:center; gap:var(--spacing-sm);
  padding-bottom:var(--spacing-md); border-bottom:1px solid var(--border);
  margin-bottom:var(--spacing-md);
}
.conversation-header h2 { font-size:20px; font-weight:700; margin:0; }
/* Chat messages: fluid height — grows with content, no fixed clipping box.
   Scroll is on the outer .view-panel (the whole page scrolls), not here.
   On mobile the view-panel itself is overflow-y:auto so this just expands. */
.conversation-messages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  min-height: 80px;
  padding: var(--spacing-sm);
  /* FIX: Right padding keeps messages clear of #apk-side-rail (36px wide) */
  padding-right: calc(44px + var(--spacing-sm));
  /* Desktop/tablet: generous buffer above command bar */
  padding-bottom: 100px;
  scroll-behavior: smooth;
  touch-action: pan-y;
}

/* Tablet/Desktop: clear fixed command bar only */
/* Mobile: clear command-bar (sits at ~64px above bottom-nav) + bottom-nav + buffer */
.bot-message, .user-message {
  display:flex; gap:var(--spacing-sm); align-items:flex-start;
  animation:messageSlideIn 0.3s ease;
}
.user-message     { flex-direction:row-reverse; }
.bot-avatar       { font-size:32px; flex-shrink:0; color:var(--primary); }
.user-avatar      { font-size:32px; flex-shrink:0; color:var(--text-secondary); }
.message-content  {
  background:var(--bg-tertiary); padding:12px 16px;
  border-radius:var(--radius-lg); max-width:70%;
  font-size:14px; line-height:1.6;
}
.user-message .message-content { background:var(--primary); color:white; }
.message-content p              { margin:0 0 8px; }
.message-content p:last-child   { margin-bottom:0; }
.message-content ul             { margin:8px 0; padding-left:20px; }
.message-content li             { font-size:13px; margin-bottom:4px; }
.message-content strong         { font-weight:700; }
.message-actions                { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

.nav-link {
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  color:var(--text-primary); padding:6px 12px; border-radius:20px;
  font-size:13px; cursor:pointer; margin:4px 2px;
  transition:var(--transition); display:inline-block; text-decoration:none;
}
.nav-link:hover { background:rgba(255,255,255,0.2); transform:translateY(-1px); }


.spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(37,99,235,0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}



/* ══════════════════════════════════════
   COMMAND BAR — floating, Claude/Gemini style
   ══════════════════════════════════════ */
.command-bar {
  position:fixed; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); left:calc(var(--nav-w) + 12px); right:12px;
  background:var(--bg-card, var(--bg-secondary));
  border:1.5px solid var(--border);
  border-radius:18px;
  padding:8px 10px;
  z-index:300; /* above bottom-nav(200) but below header(1000) */
  box-shadow:0 4px 24px rgba(0,0,0,0.25), 0 1px 6px rgba(0,0,0,0.15);
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  transition:box-shadow .15s;
}
/* [FIX-LANGPOS-01, 2026-07-18, item 3; corrected 2026-07-18 round 2] Top-right corner placement
   for the prompt-language dropdown, matching the researched market convention for locale
   switchers (JetBrains/Tesla-style top-right corner) — see apk-lang-dropdown.js's mount-point
   comment. #command-bar is already `position:fixed`, so it's the containing block for this
   without any extra wrapper.
   CONFIRMED regression from the first attempt (screenshot evidence): `top:-14px` only pokes the
   ~24px-tall button half above the bar's edge — the other half still visually overlapped the
   input row underneath it, exactly the "blocks the bar" report. The button's own rendered
   height (padding 4px top/bottom + ~16px line content) is ~24px; -14px cleared barely half of
   that. Needs to clear the FULL button height plus a visible gap, not half of it. */
/* [FIX-LANGPOS-02, floating top-right variant — retired this pass] Founder feedback across two
   rounds: right:14px crowded the send button/FAB corner; shifting it left (right:58px) still
   read as "takes too much space" floating above the bar. Rather than a third position tweak on
   the same floating approach, moved back inline into .command-input-row (see index.html) as a
   compact icon button matching mic-btn/attach-btn's own sizing — no longer a floating element
   at all. `.apk-lang-slot--top-right` no longer has any live caller (grepped clean) but is kept,
   commented, rather than deleted outright, in case a future surface genuinely wants the floating
   corner treatment again. */
.apk-lang-slot--top-right {
  position:absolute; bottom:100%; margin-bottom:8px; right:58px; z-index:301;
}
.apk-lang-slot--top-right .apk-lang-dd-btn {
  background:var(--bg-card, var(--bg-secondary));
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
/* [FIX-LANGPOS-03, retired this pass] Was inline in the command-input-row, same 38px footprint
   as mic-btn/cmd-attach-btn — still claimed its own row slot, which is exactly what "takes too
   much text-box space" (repeated founder feedback) meant. No live caller now (grepped clean);
   kept commented per the same pattern as .apk-lang-slot--top-right above, in case a future
   surface wants a full-size inline icon button again. */
.apk-lang-slot--inline {
  display: inline-flex; flex: 0 0 auto;
}
/* [FIX-LANGPOS-04, this pass] Live variant — a small corner badge anchored to the mic button,
   zero extra row width. .apk-mic-wrap is the positioning context (plain span, not the button
   itself — see index.html comment on why this can't nest inside <button id="mic-btn">). Actual
   button/glyph sizing for this corner context lives in apk-lang-dropdown.js's own injected
   styles (.apk-lang-slot--corner .apk-lang-dd-btn) — single owner of that component's CSS. */
/* [FIX-CMDBAR2LAYER-01, 2026-07-19 — retired this pass] No live caller in index.html as of the
   2-layer command bar redesign — the lang slot moved into .apk-lang-slot--bottombar, a plain
   sibling in .cmd-bottom-layer, so it no longer needs a corner-overlay positioning context
   anchored to the mic button. Kept (not deleted) per this file's existing convention, in case a
   future single-row surface needs the corner-badge treatment again. */
.apk-mic-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  /* [FIX-LANGPOS-05] Clearance for the corner badge below — without this, the badge's rightward
     protrusion (see .apk-lang-slot--corner) landed in the 6px flex-gap to #chat-send-btn and
     visually overlapped the send button, confirmed via screenshot. This margin, plus pulling the
     badge's right offset to near-zero below, keeps it fully clear of the neighboring button. */
  margin-right: 8px;
}
.apk-lang-slot--corner {
  position: absolute;
  /* [FIX-LANGPOS-05] Was top:-6px; right:-6px — at 18px badge size that protruded ~15px past the
     mic button's right edge (38px wide wrap), far exceeding the 6px row gap to #chat-send-btn and
     landing on top of it (screenshot evidence). right:-2px keeps the badge anchored to the mic
     icon's own upper-right corner without spilling into the next control's space. */
  top: -6px;
  right: -2px;
  z-index: 2;
}
/* [FIX-ATTACHCHIP-LAYOUT-01] Root cause of "attached file doesn't show up anywhere": .command-bar
   is a single-row flex container. #apk-attach-chips is a direct-child sibling of .command-input-row
   inserted BEFORE it in the markup, intended to render as its own row above the input. Without
   flex-wrap, it instead became just another flex ITEM squeezed to the left of the input group,
   which has flex:1 1 auto and claims all remaining space — so the chip row rendered at near-zero
   width, structurally present in the DOM (which is why 3 prior JS traces all read "correct") but
   visually broken. flex-wrap:wrap on the parent + order/basis on the chip row (below) forces it
   onto its own full-width line, pushing .command-input-row to wrap onto the line after it. Both
   are the ONLY direct children of .command-bar, so nothing else is affected. */
#apk-attach-chips {
  order: -1;
  flex: 1 0 100%;
}
.command-bar:focus-within {
  border-color:var(--primary);
  box-shadow:0 4px 28px rgba(124,58,237,0.18), 0 1px 8px rgba(0,0,0,0.2);
}

/* ── Command bar internals: make the bot input span the FULL bar width ──────────
   These three classes previously had NO css and rendered as default block divs,
   so the input group never filled the bar (the "narrow box" bug). Modern layout:
   the input group is the flex:1 hero; contextual chips shrink to their content
   and disappear entirely when empty so they never steal the input's width. */
.command-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}
/* [FIX-CMDBAR2LAYER-01, 2026-07-19] .command-input-group is now a 2-layer COLUMN: top layer is
   just the text input (.cmd-top-layer), bottom layer is the action-icon strip
   (.cmd-bottom-layer) — Claude's own prompt-bar pattern, requested explicitly so the lang
   selector has real room next to mic instead of another corner-badge offset tweak. */
.command-input-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  flex: 1 1 auto;     /* HERO: takes all remaining width */
  min-width: 0;       /* allow the input to shrink/grow correctly */
}
.cmd-top-layer {
  display: flex;
  align-items: center;
  width: 100%;
}
.cmd-bottom-layer {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  /* [FIX-CMDBARCLIP-01, Round Z7, founder console log: "[ApunkAI Adaptive] ... Command bar:
     CLIPPED off-screen"] This row holds a growing set of fixed-width 38px icons (attach, mic,
     lang, and now the Round Z6 sparkle/page-assist button) with no wrap or overflow handling —
     at narrower widths (the founder's own 1512x768 landscape report) the icon count no longer
     fits and the row pushes past the command bar's right edge instead of shrinking. Scope this
     row to scroll horizontally instead of clipping, same hidden-scrollbar pattern already used
     by #suggestion-chips/#nav-container/.header-filters/.settings-tabs elsewhere in this file —
     so a crowded bar scrolls its icons rather than spilling off-screen. */
  overflow-x: auto;
  scrollbar-width: none;
}
.cmd-bottom-layer::-webkit-scrollbar { display: none; }
.cmd-bottom-spacer { flex: 1 1 auto; }
/* Lang selector's normal slot in the bottom icon row — a plain inline flex item, same 38px
   rhythm as attach/mic (not the retired .apk-lang-slot--corner absolute-overlay approach, which
   only existed because the lang icon had no dedicated row to live in before this pass). */
.apk-lang-slot--bottombar {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
}
.command-input-group .command-input {
  flex: 1 1 auto;
  min-width: 0;       /* prevents the input from overflowing the bar (clip fix) */
}
/* Contextual side chips: page-level signals, NOT bot controls. Shrink to content;
   collapse to zero when empty (aria-hidden) so they never crowd the input. */
.apk-qmb-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.apk-qmb-side:empty,
.apk-qmb-side[aria-hidden="true"]:empty {
  display: none;
}
/* Attach / mic / send: fixed square targets, never grow */
.cmd-attach-btn, .mic-btn {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 12px;
  color: var(--text-secondary); cursor: pointer; transition: var(--transition);
}
.cmd-attach-btn:hover, .mic-btn:hover { background: rgba(124,58,237,.15); color: var(--primary); }

/* [FIX-VOICELANG-01] Persistent prompt-language toggle — always visible (never a hidden menu),
   so the current prompt language is never a guess. Sized to sit naturally between the text
   input and the mic button without disturbing their existing fixed 38px square rhythm. */
.apk-lang-toggle {
  flex: 0 0 auto;
  min-width: 34px; height: 30px;
  padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: .2px;
  cursor: pointer; transition: var(--transition); align-self: center;
}
.apk-lang-toggle:hover { background: rgba(124,58,237,.15); color: var(--primary); border-color: var(--primary); }
.apk-lang-toggle:active { transform: scale(0.96); }

.voice-btn, .send-btn {
  background:transparent; border:none;
  color:var(--text-secondary); width:38px; height:38px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--transition); flex-shrink:0;
}
.voice-btn:hover { background:rgba(124,58,237,.15); color:var(--primary); }
.send-btn { background:var(--primary); color:#fff; border-radius:10px; }
.send-btn:hover { background:var(--primary-hover, #6d28d9); }
.send-btn:disabled { opacity:.4; cursor:not-allowed; }
.command-input {
  flex:1; background:transparent; border:none;
  color:var(--text-primary); font-size:14px; font-family:inherit;
  padding:8px 4px; resize:none; outline:none; line-height:1.5;
  min-height:22px; max-height:140px; overflow-y:auto;
  transition:height .12s ease;
  align-self:center;
}
.command-bar.expanding .command-input { align-self:flex-end; }

/* PMF-001: Non-home compact command bar */
.apk-cmd-compact {
  padding-block: 5px !important;
  border-radius: 14px !important;
  opacity: 0.92;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important;
  transition: opacity .2s, border-radius .2s, padding .2s;
}
.apk-cmd-compact .command-input { font-size: 13px !important; min-height: 18px !important; }
.apk-cmd-compact:focus-within { opacity: 1; border-color: var(--primary) !important; }

.command-input::placeholder{ color:var(--text-tertiary); }

/* ── Message-level feedback (👍/👎 on bot responses) ── */
.feedback-container {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.feedback-text {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.feedback-buttons {
  display: flex;
  gap: 6px;
}
.feedback-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-tertiary);
  cursor: pointer;
  font-size: 15px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feedback-btn:hover { transform: scale(1.12); }
.thumbs-up:hover   { border-color: #10b981; background: rgba(16,185,129,.1); }
.thumbs-down:hover { border-color: #ef4444; background: rgba(239,68,68,.1); }

/* ══════════════════════════════════════
   GRIDS — Staff / Planner / Family
   ══════════════════════════════════════ */
.staff-grid,
.planner-grid,
.template-grid,
.planner-category-grid,
.family-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--spacing-lg); margin-bottom:var(--spacing-xl);
}
.family-grid { grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); margin-top:24px; gap:20px; }

/* Planner step 1 — 2-col grid */
.planner-categories {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:16px; margin-top:16px;
}

/* Unified card */
.family-card, .chore-card, .staff-card, .dashboard-card {
  background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--spacing-md);
  display:flex; flex-direction:column; gap:12px;
  transition:transform 0.2s, border-color 0.2s; box-shadow:var(--shadow-sm);
}
.family-card:hover, .chore-card:hover {
  border-color:var(--primary); transform:translateY(-3px); box-shadow:var(--shadow-lg);
}

.family-avatar {
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), #7c3aed);
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:24px; font-weight:700;
}
.family-role { color:var(--text-secondary); font-size:14px; margin-top:4px; }


/* ══════════════════════════════════════
   CATEGORY / TEMPLATE CARDS
   ══════════════════════════════════════ */
.category-card, .template-card {
  background:var(--bg-secondary); border:2px solid var(--border);
  border-radius:12px; padding:20px 12px;
  text-align:center; cursor:pointer; transition:all 0.2s;
  min-height:100px; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.category-card:hover, .template-card:hover {
  border-color:var(--primary); transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(37,99,235,0.2);
  background:rgba(37,99,235,0.05);
}
.category-card .material-symbols-outlined {
  font-size:36px; color:var(--primary); display:block; margin-bottom:8px;
}
.category-name, .template-name { font-size:0.95rem; font-weight:600; color:var(--text-primary); margin:0; }
.category-icon  { font-size:3rem; color:var(--primary); display:block; margin-bottom:0.5rem; }
.template-count { font-size:0.8rem; color:var(--text-tertiary); }


/* ══════════════════════════════════════
   PLANNER ITEMS EDITOR
   ══════════════════════════════════════ */
.items-editor       { display:flex; flex-direction:column; gap:0.75rem; margin:1rem 0; }
.item-row           { display:flex; gap:0.5rem; align-items:center; }
.item-row input     { flex:1; }
.review-section     { background:var(--bg-tertiary); border:1px solid var(--border); border-radius:12px; padding:1.25rem; margin-bottom:1.5rem; }
.review-row         { display:flex; justify-content:space-between; padding:0.75rem 0; border-bottom:1px solid var(--border); }
.review-row:last-child { border-bottom:none; }
.planner-progress   { font-size:0.85rem; color:var(--text-secondary); font-weight:600; }
.planner-actions    { display:flex; gap:1rem; }

.planner-card       { background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--spacing-lg); transition:var(--transition); }
.planner-card:hover { border-color:var(--primary); box-shadow:var(--shadow-md); }
.planner-day        { font-size:12px; color:var(--text-tertiary); text-transform:uppercase; font-weight:600; margin-bottom:4px; }
.planner-content h4 { font-size:15px; font-weight:600; color:var(--text-primary); }
.plan-meta          { display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.plan-date          { font-size:12px; }
.plan-actions       { display:flex; gap:6px; margin-top:12px; }


/* ══════════════════════════════════════
   STAFF
   ══════════════════════════════════════ */
.staff-header   { display:flex; align-items:flex-start; gap:var(--spacing-md); margin-bottom:var(--spacing-md); }
.staff-avatar   { font-size:48px; color:var(--primary); }
.staff-info h4  { font-size:16px; font-weight:700; margin-bottom:4px; color:var(--text-primary); }
.staff-role     { font-size:13px; color:var(--text-secondary); text-transform:capitalize; }
.staff-availability { display:inline-block; padding:4px 10px; border-radius:12px; font-size:11px; font-weight:700; text-transform:capitalize; margin-top:8px; }
.staff-availability.today       { background:rgba(16,185,129,0.15); color:#10b981; }
.staff-availability.week        { background:rgba(251,191,36,0.15);  color:#fbbf24; }
.staff-availability.unavailable { background:rgba(239,68,68,0.15);   color:#ef4444; }

.detail-row, .staff-details .detail-row {
  display:flex; align-items:center; gap:var(--spacing-sm);
  padding:6px 0; font-size:13px;
}
.detail-row .material-symbols-outlined { font-size:18px; color:var(--text-tertiary); }

/* Staff entry (househelp) */
.staff-tasks-container { display:flex; flex-direction:column; gap:var(--spacing-xl); }
.task-section          { background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--spacing-lg); }
.task-section-title    { font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:var(--spacing-md); display:flex; align-items:center; gap:var(--spacing-sm); }
.staff-task-list       { display:flex; flex-direction:column; gap:var(--spacing-md); }
.staff-task-card       { background:var(--bg-tertiary); border:2px solid var(--border); border-radius:var(--radius-md); padding:var(--spacing-lg); transition:var(--transition); }
.staff-task-card:hover     { border-color:var(--primary); box-shadow:var(--shadow-md); }
.staff-task-card.completed { opacity:0.6; border-color:var(--success); }
.task-header           { display:flex; align-items:center; gap:var(--spacing-sm); margin-bottom:var(--spacing-md); }
.task-icon             { font-size:28px; color:var(--primary); }
.staff-task-card.completed .task-icon { color:var(--success); }
.task-title            { font-size:16px; font-weight:600; color:var(--text-primary); margin:0; flex:1; }
.task-details          { display:flex; flex-direction:column; gap:var(--spacing-sm); margin-bottom:var(--spacing-md); color:var(--text-secondary); font-size:14px; }
.task-date             { display:flex; align-items:center; gap:var(--spacing-sm); }

.day-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.day-chip {
  padding: 6px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.day-chip.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}


/* ══════════════════════════════════════
   SCORE MODAL
   ══════════════════════════════════════ */
.score-breakdown { display:flex; flex-direction:column; gap:1.5rem; }
.score-hero      { display:flex; justify-content:center; padding:1rem 0; text-align:center; margin-bottom:24px; }
.score-circle    {
  width:140px; height:140px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0 auto 12px;
  background:linear-gradient(135deg, rgba(16,185,129,0.1), rgba(37,99,235,0.1));
  border:8px solid var(--primary); box-shadow:0 0 20px rgba(37,99,235,0.3);
}
.score-circle.excellent  { border-color:var(--success); box-shadow:0 0 20px rgba(16,185,129,0.3); }
.score-circle.needs-work { border-color:var(--warning); box-shadow:0 0 20px rgba(245,158,11,0.3); }
.score-big { font-size:48px; font-weight:900; color:var(--primary); line-height:1; }
.score-circle.excellent .score-big { color:var(--success); }
/* scoped .score-label to avoid conflict with header .score-chip .score-label */
.score-hero .score-label, .score-breakdown .score-label {
  font-size:14px; color:var(--text-secondary); margin-top:4px;
}
.score-metrics {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:1rem;
}
.metric-card  { background:var(--bg-tertiary); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem; display:flex; align-items:center; gap:1rem; }
.metric-icon  { font-size:32px; color:var(--primary); }
.metric-value { font-size:20px; font-weight:700; color:var(--text-primary); }
.detail-value.positive { color:var(--success); font-weight:600; }
.detail-value.negative { color:var(--error);   font-weight:600; }

.savings-card  { display:flex; align-items:center; gap:16px; padding:16px; background:var(--bg-secondary); border-radius:12px; margin-bottom:12px; }
.savings-icon  { font-size:40px; color:var(--primary); }
.savings-value { font-size:24px; font-weight:700; color:var(--text-primary); }
.savings-label { font-size:13px; color:var(--text-secondary); margin-top:2px; }


/* ══════════════════════════════════════
   SETTINGS MODAL — SWIPE ENGINE
   ══════════════════════════════════════ */
.settings-grid  { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--spacing-xl); margin-bottom:var(--spacing-lg); }
.setting-card   { background:var(--bg-tertiary); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--spacing-xl); margin-bottom:var(--spacing-lg); }
.setting-card h4 { font-size:16px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:var(--spacing-sm); margin-bottom:var(--spacing-lg); border-bottom:1px solid var(--border-light); padding-bottom:var(--spacing-md); }
.setting-toggle { display:flex; align-items:center; gap:var(--spacing-md); margin-top:var(--spacing-md); }
.setting-toggle input[type="checkbox"] { width:18px; height:18px; accent-color:var(--primary); }

#settings-swiper { position:relative; height:360px; overflow:hidden; }
#settings-content { position:relative; min-height:400px; }

/* Single swipe card definition */
.swipe-card {
  position:absolute; top:0; left:0; width:100%;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(30px);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background:var(--bg-secondary); z-index:1;
}
.swipe-card.active {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(0); z-index:2; position:relative;
}
.swipe-card.prev { transform:translateX(-100%); }
.swipe-card.next { transform:translateX(100%); }

/* Single swipe-dot definition */
.swipe-dots, .swipe-indicators {
  display:flex; justify-content:center; gap:8px;
  padding:1rem 0; margin:0;
}
.swipe-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--text-secondary); opacity:0.3;
  cursor:pointer; transition:all 0.2s;
}
.swipe-dot.active {
  background:var(--primary); opacity:1;
  transform:scale(1.3); width:24px; border-radius:6px;
}

.settings-nav, .swipe-nav {
  display:flex; justify-content:space-between;
  padding:0 16px 16px; align-items:center;
}
/* Single swipe-arrow definition */
.swipe-arrow, .nav-arrow {
  width:44px; height:44px; border-radius:50%;
  background:var(--bg-secondary); border:2px solid var(--border);
  color:var(--text-primary); font-size:24px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; opacity:1; z-index:10;
}
.swipe-arrow:hover:not(:disabled), .nav-arrow:hover:not(:disabled) { background:var(--primary); color:white; border-color:var(--primary); }
.swipe-arrow:disabled, .nav-arrow:disabled { opacity:0.3; cursor:not-allowed; }
.swipe-arrow.prev, .nav-prev { transform:rotate(180deg); }
#settings-prev { left:-22px; }
#settings-next { right:-22px; }

.theme-option { display:flex; align-items:center; gap:12px; padding:12px 16px; border:2px solid var(--border); border-radius:12px; cursor:pointer; transition:all 0.2s; font-size:14px; }
.theme-option:hover  { border-color:var(--primary); background:var(--bg-secondary); }
.theme-option.active { border-color:var(--primary); background:var(--primary); color:white; }
.theme-option input  { display:none; }

/* Ensure ALL modal close buttons clickable */
.js-modal-close,
.modal .btn-icon[data-action],
.modal-header button {
  cursor: pointer;
  z-index: 10;
}

.modal-header button:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* [FIX-THEMEDICONS-01 / item 9] Real, brand-tinted close-button style — was: many modal close
   (✕) buttons across the app used a flat, generic grey circle (background:var(--bg-tertiary),
   color:var(--text-secondary)), which reads as an unstyled/default browser control rather than
   part of this product. Opt-in class; existing inline-styled buttons can adopt it without a
   markup rewrite, and it's the one to reach for on any new close/dismiss button going forward. */
.apk-modal-close-btn {
  background: rgba(99, 102, 241, .12) !important;
  color: var(--primary, #6366f1) !important;
  border: none !important;
  transition: background .15s, transform .15s;
}
.apk-modal-close-btn:hover {
  background: rgba(99, 102, 241, .22) !important;
  transform: scale(1.05);
}
/* ══════════════════════════════════════
   SPINNERS + LOADING
   ══════════════════════════════════════ */
.page-spinner {
  /* [FIX-SPINNER-01] Was position:absolute; inset:0 — centers within the nearest positioned
     ancestor, which is correct when that ancestor already fills the viewport, but wrong the
     moment this spinner is injected into a smaller panel/section (a settings sub-page, a
     modal body that hasn't reached full height yet, etc.) — it would center within that
     smaller box, visibly off-center relative to the actual screen. position:fixed always
     centers on the real viewport regardless of which container calls showPageSpinner(),
     which is the one universal behavior asked for across every "serving" state in the app. */
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:12px;
  background:var(--surface-overlay); z-index:9500; border-radius:0;
}
.page-spinner .spinner-border {
  width:40px; height:40px;
  border:4px solid rgba(37,99,235,0.15); border-top-color:#2563eb;
  border-radius:50%; animation:spin 0.72s linear infinite;
}
.page-spinner .spinner-text { font-size:13px; color:var(--text-secondary); font-weight:500; margin-top:8px; }

#serving-overlay, #auth-loading-overlay {
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  flex-direction:column; gap:16px;
  background:var(--surface-overlay-hv); z-index:9999;
}
#serving-overlay.active, #auth-loading-overlay.active { display:flex; }
#serving-overlay .spinner {
  width:48px; height:48px;
  border:5px solid rgba(37,99,235,0.2); border-top-color:var(--primary);
  border-radius:50%; animation:spin 0.8s linear infinite;
}
#serving-overlay .serving-text { font-size:14px; color:var(--text-primary); font-weight:600; }


/* ══════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════ */
.toast-container {
  position:fixed; top:80px; right:var(--spacing-lg);
  z-index:3000; display:flex; flex-direction:column;
  gap:var(--spacing-sm); pointer-events:none;
}
.toast {
  background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:16px 20px;
  box-shadow:var(--shadow-xl); min-width:300px;
  display:flex; align-items:center; gap:var(--spacing-sm);
  opacity:0; transform:translateX(400px);
  transition:all 0.3s ease; pointer-events:auto;
}
.toast.show   { opacity:1; transform:translateX(0); }
.toast.success{ border-left:4px solid var(--success); }
.toast.error  { border-left:4px solid var(--error); }
.toast.warning{ border-left:4px solid var(--warning); }
.toast.info   { border-left:4px solid var(--info); }


/* ══════════════════════════════════════
   FAB SPEED-DIAL GROUP
   Single source of truth. All floating
   action buttons live in #fab-group.
   Position: bottom-right, above chat bar.
   ══════════════════════════════════════ */

/* Container */
#fab-group, .fab-group {
  position: fixed;
  /* Landscape: use env() safe area + sit above the command bar (64px) with extra gap */
  bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 12px);
  right: max(16px, env(safe-area-inset-right, 16px));
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
  z-index: 1001;
  pointer-events: none; /* children re-enable */
}
#fab-group > *, .fab-group > * { pointer-events: auto; }

/* Feedback FAB — LEFT side, bottom-left, always above command bar & bottom nav */
/* #apk-feedback-fab removed — feedback now in unified #apk-smart-fab panel */
/* Belt-and-suspenders: hide if somehow still in DOM */
#apk-feedback-fab,
#apk-feedback-btn,
#apk-feedback-panel ~ #apk-feedback-fab {
  display: none;
  pointer-events: none;
}

/* ══════════════════════════════════════
   DOT-MENU FAB — minimal ghost trigger
   ══════════════════════════════════════ */
/* dot-fab replaced by #apk-smart-fab — hidden on all devices */
.dot-fab,
#dot-fab,
#dot-fab-backdrop,
.dot-fab-trigger,
.dot-fab-item {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Trigger — subtle ghost button */
.dot-fab-trigger {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  flex-shrink: 0;
}
.dot-fab-trigger:hover,
.dot-fab.open .dot-fab-trigger {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  color: var(--text-primary);
}
.dot-fab-trigger:active { transform: scale(.92); }
.dot-fab-dots { font-size: 18px; transition: transform .2s ease; }
.dot-fab.open .dot-fab-dots { transform: rotate(90deg); }

/* Menu items — icon-only pills, no loud colors */
.dot-fab-item {
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px 0 9px; height: 34px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px; font-weight: 500; font-family: inherit;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transform: translateY(4px) scale(0.95);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .18s ease, opacity .18s ease, visibility .18s;
}
.dot-fab.open .dot-fab-item {
  transform: translateY(0) scale(1);
  opacity: 1; visibility: visible; pointer-events: auto;
}
.dot-fab-item:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.dot-fab-item .material-symbols-outlined { font-size: 15px; }

/* Stagger delays */
.dot-fab-feedback { transition-delay: .03s; }
.dot-fab-stats    { transition-delay: .06s; }
.dot-fab-tips     { transition-delay: .09s; }

/* Label */
.dot-fab-label { font-size: 12px; font-weight: 500; }

/* Backdrop */
#dot-fab-backdrop {
  display: none;
  position: fixed; inset: 0;
  z-index: 1000; background: transparent;
}
.dot-fab.open ~ #dot-fab-backdrop { display: block; }

/* Landscape: move above input bar */

/* Hide FAB when sidebar is visible (tablet+) — nav covers all these actions */


/* ══════════════════════════════════════
   SAMPLE COMMANDS SLIDER — single def
   ══════════════════════════════════════ */
.slider-toggle {
  /* Slot into fab-group — no longer a standalone fixed element */
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary); color: white; border: none;
  box-shadow: 0 3px 10px rgba(37,99,235,.4);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.slider-toggle:hover { transform: scale(1.08); box-shadow: 0 5px 16px rgba(37,99,235,.5); }

.sample-commands-slider, .quick-actions-slider {
  position: fixed;
  bottom: 156px; /* above chat bar + fab row */
  right: 16px;
  width: min(320px, calc(100vw - 32px));
  max-height: min(400px, 60dvh);
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  z-index: 1002;
  transform: translateX(calc(100% + 20px)); opacity: 0;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease;
  overflow: hidden;
}
.sample-commands-slider.visible,
.quick-actions-slider.visible {
  transform: translateX(0); opacity: 1;
}

.slider-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.slider-header h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.slider-close {
  background: transparent; border: none; color: var(--text-secondary);
  cursor: pointer; padding: 4px; border-radius: var(--radius-sm);
  font-size: 20px; display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.slider-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.slider-content { padding: 12px; max-height: calc(min(400px,60dvh) - 50px); overflow-y: auto; }

.command-sample {
  padding: 11px 12px; margin-bottom: 6px;
  background: var(--bg-tertiary); border-radius: var(--radius-md);
  cursor: pointer; transition: var(--transition);
  border: 1px solid transparent;
}
.command-sample:last-child  { margin-bottom: 0; }
.command-sample:hover       { background: var(--bg-hover); border-color: var(--primary); transform: translateX(-3px); }
.command-sample-text        { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.command-sample-icon        { color: var(--primary); font-size: 18px; }
.command-sample-desc        { font-size: 11px; color: var(--text-tertiary); margin-left: 26px; }

.quick-stats-mini { display:flex; flex-direction:column; gap:12px; padding:16px; border-bottom:1px solid var(--border); }
.quick-stats-mini span { display:flex; justify-content:space-between; font-size:13px; color:var(--text-secondary); }
.quick-stats-mini strong { color:var(--text-primary); font-weight:700; font-size:18px; }
.quick-summary-btn {
  background:var(--bg-tertiary); border:1px solid var(--border);
  color:var(--text-secondary); padding:8px; border-radius:var(--radius-md);
  cursor:pointer; transition:var(--transition);
  display:flex; align-items:center; justify-content:center; margin-left:auto;
}
.quick-summary-btn:hover { background:var(--primary); color:white; border-color:var(--primary); }
.quick-actions { padding:16px; display:flex; flex-direction:column; gap:8px; }


/* ══════════════════════════════════════
   AI SUGGESTIONS
   ══════════════════════════════════════ */
.ai-suggestions-card {
  background:linear-gradient(135deg, rgba(79,70,229,0.05), rgba(16,185,129,0.05));
  border:2px solid rgba(79,70,229,0.2); border-radius:16px;
  padding:20px; margin:12px 0;
}
.suggestions-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px; margin:16px 0;
}
/* Suggestion chips — compact horizontal pill row */
#suggestion-chips {
  display: flex;
  gap: 6px;
  margin: 6px 0 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
#suggestion-chips::-webkit-scrollbar { display: none; }
.suggestion-chip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
}
.suggestion-chip:hover, .suggestion-chip:active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.chip-icon     { font-size: 13px; line-height: 1; }
.chip-text     { font-size: 12px; font-weight: 500; line-height: 1; }
.chip-category { display: none; } /* hidden in pill mode */

.help-hints { margin-top:16px; padding:12px; background:var(--hint-bg); border-radius:8px; font-size:13px; }
.help-title { font-weight:700; margin-bottom:8px; color:var(--hint-title-color); }
.help-item  { margin:6px 0; line-height:1.5; color:var(--hint-text-color); }
.help-item strong { font-weight:600; }


/* ══════════════════════════════════════
   AI PREVIEW / QUERY CARDS
   ══════════════════════════════════════ */
.ai-preview-card, .ai-query-card {
  background:var(--bg-tertiary); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:14px 16px; color:var(--text-primary);
}
.ai-preview-header, .ai-query-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ai-preview-header .material-symbols-outlined,
.ai-query-header  .material-symbols-outlined { font-size:24px; color:var(--primary); }
.ai-preview-title     { font-size:14px; font-weight:700; }
.ai-preview-subtitle  { font-size:12px; color:var(--text-secondary); }
.ai-preview-list      { background:var(--bg-secondary); border-radius:var(--radius-md); padding:8px 10px; margin-bottom:10px; }
.ai-preview-row       { display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid var(--border-light); }
.ai-preview-row:last-child { border-bottom:none; }
.ai-preview-qty       { min-width:36px; text-align:center; font-weight:600; font-size:13px; background:rgba(37,99,235,0.1); border-radius:999px; color:var(--primary); }
.ai-preview-item      { flex:1; font-size:13px; }
.ai-preview-tag       { font-size:11px; padding:2px 8px; border-radius:999px; background:rgba(148,163,184,0.15); color:var(--text-secondary); }
.ai-preview-meta      { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:11px; color:var(--text-secondary); margin-bottom:10px; }
.ai-preview-meta strong { color:var(--text-primary); }
.ai-preview-actions   { display:flex; gap:8px; margin-top:4px; }
.ai-preview-more      { color:var(--text-secondary); font-size:14px; text-align:center; padding:8px; }

.ai-query-stats   { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:10px 0; }
.ai-stat          { background:var(--bg-secondary); border-radius:var(--radius-md); padding:8px; text-align:center; }
.ai-stat-value    { font-size:18px; font-weight:700; color:var(--primary); }
.ai-stat-label    { font-size:11px; color:var(--text-secondary); }
.ai-query-list    { border-top:1px solid var(--border-light); margin-top:8px; padding-top:8px; }
.ai-task-row      { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; }
.ai-task-title    { flex:1; margin-right:8px; }
.ai-task-assignee { color:var(--text-secondary); font-size:12px; }


/* ══════════════════════════════════════
   SIGNAL CARDS
   ══════════════════════════════════════ */
.signal-card { background:var(--bg-tertiary); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--spacing-lg); margin-bottom:var(--spacing-md); display:flex; gap:var(--spacing-md); align-items:flex-start; }
.signal-icon { font-size:24px; flex-shrink:0; }
.signal-content .signal-title   { font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.signal-content .signal-message { font-size:13px; color:var(--text-secondary); }


/* ══════════════════════════════════════
   NOTES / NOTICEBOARD
   ══════════════════════════════════════ */
.note-card-list {
  background:var(--bg-secondary); border-radius:12px;
  border-left:4px solid var(--primary);
  padding:16px; margin-bottom:12px; position:relative;
}
.note-content { font-size:15px; color:var(--text-primary); line-height:1.5; }
.note-meta    { font-size:11px; color:var(--text-tertiary); margin-top:8px; }
.note-actions { position:absolute; top:12px; right:12px; display:flex; gap:6px; }
.notes-container { padding-top:8px; }


/* ══════════════════════════════════════
   ROLE-BASED VISIBILITY
   ══════════════════════════════════════ */
/* ── STAFF LOCKED — Issue #7 ────────────────────────────────────────────
   When body.staff-locked is set, ALL navigation chrome is hidden.
   Staff see ONLY their view-staff panel + no nav.                       */
body.staff-locked .sidebar,
body.staff-locked #nav-container,
body.staff-locked .bottom-nav,
body.staff-locked .stats-fab,
body.staff-locked .help-fab,
body.staff-locked .header-filters,
body.staff-locked .score-chip,
body.staff-locked .quick-actions-slider,
body.staff-locked .nav-hamburger,
body.staff-locked [data-view]:not(#view-staff) { display: none !important; }

body.staff-locked .main-content { margin-left: 0 !important; padding: 0 !important; }
body.staff-locked #view-staff   { display: flex !important; flex-direction: column; }

/* ── BOT PHASE PILL — Issue #6 ──────────────────────────────────────── */
#bot-phase-pill {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-tertiary);
  opacity: 0.4;
  transition: opacity 0.2s, color 0.2s;
  padding: 3px 0;
  display: inline-block;
  user-select: none;
}

/* ── INPUT SHAKE — Issue #6 (botPhase guard feedback) ───────────────── */
@keyframes input-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.input-shake { animation: input-shake 0.38s ease; }

.househelp-mode .header-filters,
.househelp-mode .score-chip,
.househelp-mode .conversation-container,
.househelp-mode .stats-fab,
.househelp-mode .help-fab,
.househelp-mode .quick-actions-slider,
.househelp-mode .sample-commands-slider { display:none; }
.househelp-mode .btn-primary,
.househelp-mode .btn-danger { display:none; }


/* ══════════════════════════════════════
   LOGIN MODAL
   ══════════════════════════════════════ */
/* ══════════════════════════════════════
   LOGIN MODAL — re-login for expired sessions
   ══════════════════════════════════════ */
/* [FIX-LIGHTTHEME-01 / light-theme audit] Was hardcoded to a fixed dark-navy palette
   ("strong contrast — visible on both light and dark backdrops", per the prior comment) —
   but a session-expiry re-login prompt can appear at any moment during normal use, and forcing
   it dark regardless of the page's theme is exactly the kind of "random dark spot" reported in
   light theme. Themed like every other modal now (var(--bg-secondary)/var(--text-primary)/
   var(--border)); the accent border/focus ring keeps its own blue identity (not theme-dependent,
   matches the "this needs your attention" intent) via var(--primary) instead of a hardcoded sky
   blue that didn't match the rest of the app's accent color anyway. */
.login-lock-modal .modal-content {
  max-width: 440px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  box-shadow: 0 0 0 1px rgba(37,99,235,0.12), 0 24px 64px rgba(0,0,0,0.35);
}
.login-lock-modal .modal-header h3 {
  color: var(--text-primary);
}
.login-lock-modal .modal-body {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.login-lock-modal .form-control {
  background: var(--bg-primary);
  border-color: var(--border);
  color: var(--text-primary);
}
.login-lock-modal .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
  outline: none;
}
.login-lock-modal label {
  color: var(--text-secondary);
}


/* ══════════════════════════════════════
   RESPONSIVE — TABLET / MOBILE
   ══════════════════════════════════════ */

/* Assigne styling */
.ai-preview-assignee {
  margin: 12px 0;
  padding: 8px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.ai-preview-assignee label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: block;
}

.assignee-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  -webkit-appearance: none;
  appearance: none;
}
.assignee-select:hover { border-color: var(--primary); background: var(--bg-tertiary); }
.assignee-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.assignee-select option { background: var(--bg-secondary); color: var(--text-primary); }

/* v0.0.1 Insights Grid */
.insights-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--spacing-lg); padding:var(--spacing-xl) 0;
}
.metric-card {
  background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--spacing-xl);
  text-align:center; transition:var(--transition);
}
.metric-card:hover { border-color:var(--primary); transform:translateY(-2px); }
.metric-value { font-size:2.25em; font-weight:800; color:var(--primary); margin-bottom:var(--spacing-sm); }
.metric-label { font-size:0.875rem; color:var(--text-secondary); font-weight:600; }

/* Insights Charting System */
.insight-chart-bar {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
  padding: 8px 0;
}

.chart-pillar {
  flex: 1;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
}

.insight-card .metric {
  font-size: 24px;
  font-weight: 700;
  color: var(--success);
}


/* Planner Step 2 */
.items-editor { display:flex; flex-direction:column; gap:1rem; margin:1rem 0; }
.item-row { display:flex; gap:0.75rem; align-items:center; }
.planner-actions { display:flex; gap:1rem; justify-content:space-between; margin-top:2rem; }

/* Bot styles — conversation-messages defined above; no override needed here */
.bot-message { display: flex; gap: var(--spacing-sm); align-items: flex-start; animation: messageSlideIn 0.3s ease; }
.user-message { display: flex; gap: var(--spacing-sm); align-items: flex-start; flex-direction: row-reverse; animation: messageSlideIn 0.3s ease; }
.bot-avatar, .user-avatar { font-size: 32px; flex-shrink: 0; }
.bot-avatar { color: var(--primary); }
.user-avatar { color: var(--text-secondary); }
.message-content { background: var(--bg-tertiary); padding: 12px 16px; border-radius: var(--radius-lg); max-width: 70%; font-size: 14px; line-height: 1.6; }
.user-message .message-content { background: var(--primary); color: white; }
@keyframes messageSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* .thinking-indicator — merged above */
.spinner-small { width: 16px; height: 16px; border: 2px solid rgba(37,99,235,0.2); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; }

/* PMF-003: Micro-feedback bar (replaces thumb up/down) */
.apk-msg-feedback { display:flex; align-items:center; gap:6px; margin-top:10px; padding-top:8px; border-top:1px solid var(--border); flex-wrap:wrap; }
/* [v0.1.0] Compact feedback — 28px icon circles, no labels, no viewport cost */
.apk-mf-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:1px solid var(--border); background:transparent; cursor:pointer; color:var(--text-tertiary); font-family:inherit; transition:all .15s; -webkit-tap-highlight-color:transparent; padding:0; flex-shrink:0; }
.apk-mf-btn .material-symbols-outlined { font-size:14px; pointer-events:none; }
.apk-mf-btn:hover  { background:var(--bg-tertiary); }
.apk-mf-btn:active { transform:scale(.9); }
.apk-mf-yes:hover  { border-color:#10b981; color:#10b981; background:rgba(16,185,129,.1); }
.apk-mf-no:hover   { border-color:#ef4444; color:#ef4444; background:rgba(239,68,68,.1); }
.apk-mf-ref:hover  { display:none; }
.apk-mf-hint       { display:none; }
.apk-mf-confirmed  { font-size:11px; color:var(--text-tertiary); }
.message-feedback  { display:flex; align-items:center; gap:4px; margin-top:4px; padding-top:0; border-top:none; }
.apk-fb-compact    { display:inline-flex; align-items:center; gap:4px; margin-top:4px; }
.feedback-confirmed { font-size:11px; color:var(--text-tertiary); }

.insight-card { background: var(--bg-tertiary); border-radius: var(--radius-lg); padding: 16px; }
.insight-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.insight-header h3 { margin: 0; font-size: 16px; font-weight: 700; }
.insight-group { margin-bottom: 12px; }
.insight-group h5 { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; text-transform: capitalize; }
.insight-items { display: flex; flex-wrap: wrap; gap: 8px; }
.insight-item { background: rgba(37,99,235,0.1); padding: 4px 8px; border-radius: 12px; font-size: 13px; }
.assignee-strip { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--bg-secondary); border-radius: var(--radius-md); margin: 12px 0; font-size: 13px; }
.confirm-plan { justify-content: center; }

.bot-action-area {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  display: flex;
  gap: 8px;
}

.action-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.1s;
}

.action-btn:active { transform: scale(0.95); }
.action-btn.loading { opacity: 0.7; pointer-events: none; }
.bot-action-card {
    animation: fadeIn 0.3s ease-out;
}

.bot-response-text {
    margin-bottom: 8px;
}

.badge-sm {
    border: 1px solid var(--border);
    color: var(--text-main);
}

.due-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--text-secondary);
}


/* ═══════════════════════════════════════════════════════════════════
   ASYMMETRIC CHAT LAYOUT — PMF-READY
   User: right-aligned, solid primary bubble
   Bot:  left-aligned, glassmorphism bubble
   Max-width: 85% — enforces visual gutter on mobile portrait
   ═══════════════════════════════════════════════════════════════════ */
.message {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  animation: messageSlideIn 0.22s ease;
  /* No full-row background — bubbles carry their own */
  padding: 0 12px;
  background: none;
  border-radius: 0;
}

/* User bubble: right-aligned, primary background */
.message.user,
.message-user {
  align-self: flex-end;
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 0;
  width: auto;
  background: none;
}
.message.user .message-content,
.message-user .message-content {
  align-self: flex-end;
  background: var(--primary, #2563eb) !important;
  color: #fff !important;
  border-radius: 18px 18px 4px 18px !important;
  max-width: 85% !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  word-break: break-word !important;
  position: relative !important;
  flex: none !important;
}

/* Bot bubble: left-aligned, glassmorphism */
.message.bot,
.message-bot {
  align-self: flex-start;
  flex-direction: row;
  justify-content: flex-start;
  margin-right: auto;
  margin-left: 0;
  width: auto;
  background: none;
}
.message.bot .message-content,
.message-bot .message-content {
  align-self: flex-start;
  background: rgba(30, 41, 59, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-radius: 18px 18px 18px 4px !important;
  border: 1px solid var(--border, #334155) !important;
  max-width: 85% !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  word-break: break-word !important;
  position: relative !important;
  flex: none !important;
}

.message-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  margin-top: 2px;
}

.message.user .message-icon,
.message-user .message-icon {
  background: var(--primary);
  color: white;
}

.message.bot .message-icon,
.message-bot .message-icon {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* Conversation container: flex column so bubbles stack correctly */
#conversation-messages,
.conversation-messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 16px 4px !important;
}

/* Action buttons sit below bot bubble, not floating */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TABLE SYSTEM — Chores + Reminders
   ============================================================ */

/* Shared filter bar */
.table-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.tbl-filter-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
  position: relative;
}
/* Show a subtle chevron after the select value */
.tbl-filter-pill:has(select)::after {
  content: '';
  display: inline-block;
  width: 8px; height: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  flex-shrink: 0;
  pointer-events: none;
}

.tbl-filter-pill label {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: default;
}

.tbl-filter-pill select {
  background: transparent;
  background-image: none;
  border: none;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  padding: 0 4px;
  cursor: pointer;
  outline: none;
  max-width: 130px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.tbl-clear-btn {
  margin-left: auto;
  padding: 4px 14px;
  font-size: 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.tbl-clear-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Shared table header row */
.tbl-thead {
  display: grid;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-top: 10px;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
}

/* [FIX-GRIDSSOT-01 / item 4] Column widths now come from --chores-grid-cols /
   --reminders-grid-cols (app-agentic-os.css §0 tokens) — the single place both the header and
   the matching #<table>-tbody .table-row read from, so they cannot drift apart again. */
.tbl-thead-chores {
  grid-template-columns: var(--chores-grid-cols);
}

.tbl-thead-reminders {
  grid-template-columns: var(--reminders-grid-cols);
}

.tbl-thead .col-actions-hdr {
  text-align: right;
}

/* Table body rows */
#chores-tbody .table-row,
#reminders-tbody .table-row {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  align-items: center;
  transition: background 0.15s;
  cursor: pointer;
}
/* [FIX-GRIDSSOT-01 / item 4] Per-table column widths, split out of the shared block above so
   each table can reference its own SSOT token (--chores-grid-cols / --reminders-grid-cols,
   app-agentic-os.css §0) instead of both sharing one hardcoded value that only happened to be
   correct for Reminders. This is the ONE place each table's row grid is defined — matches
   .tbl-thead-chores / .tbl-thead-reminders exactly, always. */
#chores-tbody .table-row    { grid-template-columns: var(--chores-grid-cols); }
#reminders-tbody .table-row { grid-template-columns: var(--reminders-grid-cols); }

/* Zebra striping — consistent across all ApunkAI grids */
#chores-tbody .table-row:nth-child(even),
#reminders-tbody .table-row:nth-child(even) {
  background: var(--bg-secondary);
}
#chores-tbody .table-row:nth-child(odd),
#reminders-tbody .table-row:nth-child(odd) {
  background: var(--bg-primary);
}

/* [FIX-GRIDSSOT-01 / item 4] REMOVED the dead #chores-tbody .table-row grid-template-columns
   override that used to live here (a 7-column guess, "for the no-checkbox-shown edge case" per
   its own comment — incorrect premise, the checkbox column uses visibility:hidden, not
   display:none, so its grid track is never actually removed). It never took effect anyway
   (later-defined var(--chores-grid-cols) rule always won the cascade tie) but left a second,
   contradictory "source of truth" in the file for the next person to trip over. Column widths
   for both tables now live in exactly one place — see --chores-grid-cols / --reminders-grid-cols
   in app-agentic-os.css §0 and the two rules right above the zebra-striping block. */

#chores-tbody .table-row:hover,
#reminders-tbody .table-row:hover {
  background: var(--bg-hover, rgba(99,102,241,.08)) !important;
}

#chores-tbody .table-row.overdue,
#reminders-tbody .table-row.overdue {
  border-left: 3px solid var(--error);
}

/* Cell: Task/Reminder title */
.cell-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cell-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cell-title-icon {
  font-size: 15px;
  flex-shrink: 0;
}

/* [FIX-GRIDSSOT-01 / item 4] Was nowrap + ellipsis — long titles/names/subtitles got silently
   truncated with no way to see the rest short of opening the row. Wrap up to 2 lines instead
   (still bounded, still clean — doesn't blow out row height unpredictably) and only fall back to
   ellipsis on a 3rd line, so information is lost only in the genuinely rare very-long case
   instead of by default. */
.cell-title-text {
  font-weight: 500;
  font-size: 14px;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cell-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 21px;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Cell: Assignee / Person */
.cell-assignee {
  font-size: 13px;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--text-secondary);
}

/* [FIX-GRIDSSOT-01 / item 4] Header stays centered above the same column's row content, always
   — one rule pair instead of per-table hand-tuned alignment. Checkbox column stays centered by
   default (already small/square); the title/content column (2nd track) stays LEFT-aligned since
   centering multi-line prose reads worse, not better — every other data column (assignee, due,
   category, created, status) is centered in both header and row per the founder's explicit
   request; Actions stays right-aligned (existing .col-actions-hdr rule, matched below). */
.tbl-thead > div:not(:first-child):not(:nth-child(2)):not(.col-actions-hdr),
#chores-tbody .table-row > div:not(.tbl-check-cell):not(.cell-title):not(.col-actions),
#reminders-tbody .reminder-row > div:not(.tbl-check-cell):not(.cell-title):not(.col-actions) {
  text-align: center;
  justify-content: center;
}

/* Cell: Due date */
.cell-due {
  font-size: 13px;
  white-space: nowrap;
  color: var(--text-secondary);
}

.cell-due.is-overdue {
  color: var(--error);
  font-weight: 600;
}

/* Cell: Created date */
.cell-created {
  font-size: 12px;
  white-space: nowrap;
  color: var(--text-tertiary);
}

/* Cell: Type badge */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cell: Status badge */
.status-badge {
  display: inline-block;
  min-width: 64px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.status-badge.overdue {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.status-badge.completed {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

/* [FEATURE-VERIFYLABEL-01, r247] "Done" (unverified, teal -- distinct from pending/overdue/
   blocked/active/completed so it reads as its own state, not a variant of an existing one) vs
   "Verified" (reuses the same strong green as .completed -- verified IS the true completed
   state; a plain "Done" is provisional until someone confirms it). */
.status-badge.done-unverified {
  background: rgba(20, 184, 166, 0.15);
  color: #14b8a6;
}
.status-badge.verified {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.status-badge.verified::before {
  content: "✓ ";
}

.status-badge.active {
  background: rgba(37, 99, 235, 0.15);
  color: #3b82f6;
}

/* [FEATURE-BLOCKEDSTATE-01, O2 "The Chase", Round A4] Distinct from overdue (red) — blocked is a
   known, named wait ("waiting on: Ravi"), not a slip. Violet keeps it visually separate from
   every other status color already in use here. */
.status-badge.blocked {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

/* [FIX-LIGHTTHEME-01, r253] Same badges, darkened text for legibility on the light card
   background -- see the --success/--warning/--error/--info override above this file's
   [data-theme="light"] block for why the base hexes above aren't enough on their own. */
[data-theme="light"] .status-badge.pending             { color: #b45309; }
[data-theme="light"] .status-badge.overdue             { color: #b91c1c; }
[data-theme="light"] .status-badge.completed,
[data-theme="light"] .status-badge.verified            { color: #047857; }
[data-theme="light"] .status-badge.done-unverified      { color: #0f766e; }
[data-theme="light"] .status-badge.active               { color: #1d4ed8; }
[data-theme="light"] .status-badge.blocked              { color: #6d28d9; }
[data-theme="light"] .type-badge.grocery                { color: #047857; }
[data-theme="light"] .type-badge.chore,
[data-theme="light"] .type-badge.appointment            { color: #1d4ed8; }
[data-theme="light"] .type-badge.bill                   { color: #b45309; }
[data-theme="light"] .type-badge.reminder,
[data-theme="light"] .type-badge.medicine               { color: #7e22ce; }
[data-theme="light"] .type-badge.note                   { color: #4338ca; }
[data-theme="light"] .type-badge.maintenance            { color: #b91c1c; }

/* Cell: Actions */
.col-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.col-actions .btn-icon {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.col-actions .btn-icon .material-symbols-outlined { font-size: 16px; }
.col-actions .btn-icon:active { transform: scale(0.9); }

/* Semantic default colors */
.col-actions .btn-icon.btn-success {
  color: rgba(16,185,129,0.6);
}
.col-actions .btn-icon.btn-warning {
  color: rgba(245,158,11,0.65);
}
.col-actions .btn-icon.btn-danger {
  color: rgba(239,68,68,0.55);
}
/* Default for unclassed icons (edit etc) */
.col-actions .btn-icon:not(.btn-success):not(.btn-danger):not(.btn-warning) {
  color: var(--text-tertiary);
}

/* Hover: full color + bg */
.col-actions .btn-icon.btn-success:hover {
  background: rgba(16,185,129,0.15);
  color: #10b981;
  border-color: rgba(16,185,129,0.3);
}
.col-actions .btn-icon.btn-warning:hover {
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
  border-color: rgba(245,158,11,0.3);
}
.col-actions .btn-icon.btn-danger:hover {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
}
.col-actions .btn-icon:not(.btn-success):not(.btn-danger):not(.btn-warning):hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Priority icon colors */
.pri-color-error    { color: var(--error); }
.pri-color-warning  { color: var(--warning); }
.pri-color-info     { color: var(--info); }
.pri-color-success  { color: var(--success); }
.pri-color-muted    { color: var(--text-tertiary); }

/* Empty state for tables */
.tbl-empty {
  padding: 64px 20px;
  text-align: center;
  color: var(--text-tertiary);
}

.tbl-empty .material-symbols-outlined {
  font-size: 56px;
  opacity: 0.25;
  display: block;
  margin-bottom: 12px;
}

.tbl-empty h4 {
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--text-secondary);
}

.tbl-empty p {
  font-size: 13px;
  margin: 0 0 20px;
}

/* ============================================================
   MODAL — Fix bloated header/footer
   ============================================================ */
/* .modal-content flex — merged into base above */

/* .modal-header — defined above */

/* .modal-header h3 — defined above */

/* .modal-body — defined above */

/* .modal-footer — merged above */

/* ============================================================
   ENTITY PAGES — Staff & Family
   ============================================================ */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.view-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.view-header-left h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.view-count-badge {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

/* view-header-right canonical definition is in the MAIN CONTENT section above */

.search-input {
  width: 160px;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 8px;
}

/* Stats row */
.entity-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.entity-stat-card {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--border);
}

.entity-stat-card.warning  { border-color: rgba(245,158,11,0.3); }
.entity-stat-card.purple   { border-color: rgba(139,92,246,0.3); }
.entity-stat-card.success  { border-color: rgba(16,185,129,0.3); }
.entity-stat-card.info     { border-color: rgba(59,130,246,0.3); }

.entity-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.entity-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Card grid */
.entity-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
/* Mobile: single column so staff card action row is always fully reachable */
@media (max-width: 640px) {
  .entity-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    /* Clear the 36px side-rail so card content is never obscured */
    padding-right: 44px;
  }
}

.entity-card {
  background: var(--bg-secondary);
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.entity-card:active { transform: scale(.99); }

.entity-card:hover { border-color: var(--primary); }
.entity-card.hidden { display: none; }

.entity-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.entity-avatar {
  font-size: 32px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 50%;
}

.entity-card-info {
  flex: 1;
  min-width: 0;
}

.entity-card-info h4 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-role-badge {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: capitalize;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
}

.status-dot.active { background: #10b981; }

.entity-card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.entity-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.entity-detail .material-symbols-outlined {
  font-size: 15px;
  color: var(--text-tertiary);
}

.entity-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
}

/* Empty state for entity pages */
.entity-empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-tertiary);
}

.entity-empty-state .material-symbols-outlined {
  font-size: 64px;
  opacity: 0.25;
  display: block;
  margin-bottom: 16px;
}

.entity-empty-state h3 {
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--text-secondary);
}

.entity-empty-state p {
  font-size: 14px;
  margin: 0 0 24px;
}

/* ══════════════════════════════════════
   NOTES — Card Grid
   ══════════════════════════════════════ */
/* [FIX-NOTECARD-01] This used to be TWO separate .notes-card-grid definitions — this one, and a
   second "Notes grid — consistent gap" block far below (search removed; see that comment's old
   location) that silently won the cascade since it loaded later, dropping this block's 240px
   column minimum down to 160px with no one intending that. A THIRD rule, `.notes-grid` (singular,
   no "-card-"), sat in a responsive breakpoint block and never matched anything at all — the real
   element is `class="notes-card-grid" id="notes-grid"` (app.js, renderNotesView), so that
   rule's intended tablet/desktop column behavior silently never fired. All three are consolidated
   into this one definition, which is now the single owner, with the responsive breakpoints folded
   in against the CORRECT class name. */
.notes-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 4px;
}
@media (min-width: 641px) and (max-width: 800px) {
  .notes-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 801px) {
  .notes-card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

.note-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s, transform 0.2s;
  position: relative;
  /* [FIX-NOTECARD-01] Fixed card size so the grid stays uniform and a long note can never grow
     tall enough to overlap whatever's below the viewport fold — content that doesn't fit is
     clamped in .note-card-body below, not left to blow out card height. */
  height: 210px;
  overflow: hidden;
}

.note-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.note-card.hidden { display: none; }

.note-card-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  /* [FIX-NOTECARD-01] overflow-wrap is the modern standard property (word-break is the legacy
     alias) — belt-and-suspenders so a single long unbroken token (a URL with no spaces, say)
     always wraps inside the fixed card width above instead of overflowing it horizontally. */
  overflow-wrap: anywhere;
  flex: 1;
  min-height: 0;
  /* Clamp to the ~5 lines that actually fit in the 210px card above (16px padding × 2 + 12px
     gap + ~39px footer leaves ~117px for body text at line-height 1.6 / 14px). Longer notes get
     a trailing ellipsis; the existing Edit action already opens the full text for reading/editing. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.note-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border);
  padding-top: 10px;
  /* [FIX-NOTECARD-01] Footer (author/time/actions) must never get squeezed by a long clamped
     body — pin it to its natural height at the bottom of the fixed-height card. */
  flex-shrink: 0;
}

.note-author {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.note-author .material-symbols-outlined { font-size: 13px; }

.note-time { white-space: nowrap; }

/* ══════════════════════════════════════
   BOT — Thinking Indicator
   ══════════════════════════════════════ */
.thinking-msg .message-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 10px 16px;
  min-width: 160px;
}

/* .thinking-indicator — merged above */

.thinking-text {
  animation: pulse-text 1.2s ease-in-out infinite;
  color: var(--text-secondary);
  font-style: italic;
}

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

/* ══════════════════════════════════════
   TABLE — Compact headers (override)
   ══════════════════════════════════════ */
/* .modal-header padding — merged into base above */

/* .modal-header h3 — defined above */

/* .modal-footer padding — merged below */

/* Sortable column header */
.sortable-col {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}

.sortable-col:hover { color: var(--text-primary); }

.sort-icon {
  font-size: 14px;
  color: var(--text-tertiary);
  transition: color 0.15s;
}

.sortable-col.sorted .sort-icon,
.sortable-col:hover .sort-icon { color: var(--primary); }
/* ── GUIDED TOUR ─────────────────────────────────────────────────────────── */
.tour-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 9990;
}
/* [FIX-TOURFBZ-01, r163] The tour sat BELOW every dialog.
   9991 (overlay) and 9999 (tooltip) are both under the canonical `.modal` tier of 10000
   (CLAUDE.md), so the moment any modal was open the tour's spotlight and its tooltip rendered
   BEHIND it — and modalManager's FIX-r103 escalation made it worse, because that sets an INLINE
   z-index on the modal which a static stylesheet value can never win against.
   A tour EXPLAINS the surface underneath it, so it belongs above everything it can point at —
   above Smart Import (13000) — but below auth-blocking pickers (14000): a mic-permission prompt
   must still win, because nothing can proceed until the user answers it. */
#tour-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-explain, 13500);
  pointer-events: none;
}
.tour-tooltip {
  position: fixed;
  /* [FIX-TOURFBZ-01] Sits just above its own spotlight overlay. */
  z-index: calc(var(--z-explain, 13500) + 10);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px 16px;
  min-width: 300px;
  max-width: 340px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  pointer-events: all;
}
.tour-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.tour-step-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary);
  text-transform: uppercase;
}
.tour-skip {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.2s;
}
.tour-skip:hover { color: var(--text-primary); }
.tour-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.tour-text {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.tour-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.tour-dots {
  display: flex;
  gap: 6px;
}
.tour-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s;
}
.tour-dot.active { background: var(--primary); }
.tour-highlight {
  outline: 3px solid var(--primary) !important;
  outline-offset: 3px !important;
  border-radius: var(--radius-md) !important;
  z-index: 9992 !important;
  position: relative !important;
}


/* ════════════════════════════════════════════════════════════
   v0.0.2 ADDITIONS — replaces all inline styles from app.js
   ════════════════════════════════════════════════════════════ */

/* ── Badges ─────────────────────────────────────────────── */
.ap-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; font-size: 11px; font-weight: 700; line-height: 1;
}
.ap-badge--count { background: var(--error);   color: #fff; }
.ap-badge--info  { background: var(--info);    color: #fff; }
.ap-badge--ok    { background: var(--success); color: #fff; }
.ap-badge--warn  { background: var(--warning); color: #fff; }

/* type-badge colour modifiers (base .type-badge already in TABLE SYSTEM) */
.type-badge.grocery     { background: rgba(16,185,129,.12); color: #10b981; }
.type-badge.chore       { background: rgba(59,130,246,.12); color: #60a5fa; }
.type-badge.bill        { background: rgba(245,158,11,.12); color: #f59e0b; }
.type-badge.reminder    { background: rgba(168,85,247,.12); color: #a855f7; }
.type-badge.note        { background: rgba(99,102,241,.12); color: #818cf8; }
.type-badge.maintenance { background: rgba(239,68,68,.12);  color: #ef4444; }
.type-badge.medicine    { background: rgba(168,85,247,.12); color: #a855f7; }
.type-badge.appointment { background: rgba(59,130,246,.12); color: #60a5fa; }

/* ── Info tooltip icon ──────────────────────────────────── */
.ap-info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(148,163,184,.2); color: var(--text-tertiary);
  font-size: 11px; font-weight: 700; cursor: help; margin-left: 4px;
  flex-shrink: 0; transition: background .15s; user-select: none;
}
.ap-info-icon:hover { background: rgba(59,130,246,.2); color: var(--info); }

/* ── Bot feedback row ───────────────────────────────────── */
.bot-feedback {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.bot-feedback .fb-label { font-size: 11px; color: var(--text-tertiary); }
.fb-btn {
  border-radius: var(--radius-sm); padding: 4px 10px;
  font-size: 12px; cursor: pointer; transition: var(--transition); line-height: 1;
}
.fb-btn.fb-yes {
  background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3);
  color: var(--success);
}
.fb-btn.fb-yes:hover { background: rgba(16,185,129,.2); }
.fb-btn.fb-no {
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
  color: var(--error);
}
.fb-btn.fb-no:hover  { background: rgba(239,68,68,.2); }
.fb-confirmed { font-size: 11px; color: var(--success); margin-left: auto; }

/* ── Form validation ────────────────────────────────────── */
.field-error-msg {
  display: block; margin-top: 3px;
  font-size: 11px; color: var(--error);
}
.input-error { border-color: var(--error) !important; }

/* ── Phone check status (onboarding) ───────────────────── */
.phone-check-status { min-height: 16px; margin-top: 4px; font-size: 11px; }

/* ── Filter bar select (tbl-filter-pill > select replacement) */
.tbl-filter-select {
  background: var(--bg-secondary); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 6px 24px 6px 10px; font-size: 12px; font-family: inherit;
  cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  transition: var(--transition);
}
.tbl-filter-select:focus,
.tbl-filter-select:hover { border-color: var(--primary); }

/* ── Header score button ────────────────────────────────── */
.header-smart-score-btn {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  padding: 6px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--bg-secondary);
  cursor: pointer; transition: var(--transition);
}
.header-smart-score-btn:hover { background: var(--bg-hover); }

/* ── Score sub-label (tiny text beneath score number) ───── */
.score-sublabel {
  font-size: 11px; color: var(--text-tertiary);
  position: absolute; bottom: -2px; right: -4px;
  text-transform: uppercase; letter-spacing: .3px;
}

/* ── SR-only (accessibility visually hidden) ────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Badge wrapper (icon + badge overlay) ───────────────── */
.badge-wrapper {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center;
}

/* ── Slide panel overlay ────────────────────────────────── */
.slide-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 800;
}
.slide-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(400px, 92vw);
  background: var(--bg-secondary); border-left: 1px solid var(--border);
  z-index: 801; overflow-y: auto; padding: var(--spacing-lg);
  display: flex; flex-direction: column; gap: var(--spacing-md);
}

/* ── Signal chip (corner notification) ──────────────────── */
.signal-chip {
  position: fixed; top: 80px; right: 16px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px 14px;
  box-shadow: var(--shadow-lg); z-index: 600;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; max-width: 280px;
  animation: fadeIn .3s ease;
}

/* ── Bar chart helpers (smart-score widget) ───────────────── */
.bar-chart-col {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px; flex: 1;
}
.bar-chart-track {
  height: 80px; width: 100%; max-width: 24px;
  background: var(--bg-tertiary); border-radius: 4px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.bar-chart-fill {
  width: 100%; background: var(--primary);
  border-radius: 4px 4px 0 0; transition: height .4s ease;
}
.bar-chart-label { font-size: 11px; color: var(--text-secondary); }
.bar-chart-val   { font-size: 11px; font-weight: 600; color: var(--text-primary); }

/* ── Follow-up chip row ─────────────────────────────────── */
.followup-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 0 6px; max-width: 520px;
}
.followup-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-secondary); color: var(--text-primary);
  cursor: pointer; transition: all .15s ease;
  font-weight: 500; white-space: nowrap;
  min-height: 34px;                  /* comfortable tap target */
  -webkit-tap-highlight-color: transparent;
}
.followup-chip:hover, .followup-chip:active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(99,102,241,.08);
  transform: translateY(-1px);
}
.followup-chip .material-symbols-outlined { font-size: 14px !important; }

/* ── Schedule day-picker (staff modal) ──────────────────── */
.schedule-day-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.schedule-day-btn {
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-secondary); color: var(--text-secondary);
  cursor: pointer; font-size: 12px; transition: var(--transition);
}
.schedule-day-btn.selected,
.schedule-day-btn:hover {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* ── Chat bubble helpers (used in bot response HTML) ────── */
.chat-bubble-user {
  max-width: 75%; background: var(--primary); color: #fff;
  padding: 10px 14px; border-radius: var(--radius-lg);
}
.chat-bubble-bot {
  max-width: 75%; background: var(--bg-secondary);
  padding: 10px 14px; border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/* ── Upgrade modal overlay ──────────────────────────────── */
.upgrade-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.upgrade-card {
  background: var(--bg-primary); border-radius: 20px;
  padding: 28px 24px; max-width: 380px; width: 90%;
  position: relative;
}

/* ── Nav spacer (pushes bottom items down) ──────────────── */
.nav-spacer {
  margin-top: auto; padding: 8px 6px 6px;
  border-top: 1px solid var(--border-light);
}

/* ── Settings upgrade promo: compact, non-blocking ──────── */
/* The promo badge inside settings sidebar must not push connector/profile tabs
   off screen. It's decorative — keep it minimal. */
#settings-nav [style*="border-dashed"], #settings-nav [style*="border: 1px"] {
  padding: 8px 6px;
}
#settings-nav [style*="border-dashed"] div,
#settings-nav [style*="rgba(124,58,237"] div {
  font-size: 11px;
  margin-bottom: 2px;
}

/* ── Toast top-center variant (used in onboarding) ──────── */
.toast-container-top {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column;
  gap: 8px; width: 90%; max-width: 400px; pointer-events: none;
}
.toast-item {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 8px; color: #fff;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  opacity: 0; transform: translateY(-16px);
  transition: all .3s ease; pointer-events: auto;
}
.toast-item--success { background: var(--success); }
.toast-item--error   { background: var(--error);   }
.toast-item--warning { background: var(--warning); }
.toast-item--info    { background: var(--info);    }

/* ── Stat mini-cards (smart score widget grid) ───────────── */
.score-mini-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 16px;
}
.score-mini-card {
  background: var(--bg-tertiary); border-radius: 10px;
  padding: 10px; text-align: center;
}
.score-mini-val {
  font-size: 18px; font-weight: 700;
}
.score-mini-label {
  font-size: 11px; color: var(--text-secondary);
}

/* ── Staff / entity role avatar ─────────────────────────── */
.entity-avatar-initials {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.entity-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.entity-status-dot.active   { background: var(--success); }
.entity-status-dot.inactive { background: var(--text-tertiary); }

/* ── Hint box (command bar tips) ───────────────────────── */
.hint-box {
  background: var(--bg-tertiary); padding: 15px;
  border-radius: 12px; margin: 12px 0;
}
.hint-row {
  display: flex; align-items: flex-start; gap: 8px;
}
.hint-icon { color: #f59e0b; font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.hint-title { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.hint-desc  { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.hint-dismiss {
  margin-top: 5px; font-size: 11px; color: #f59e0b;
  background: none; border: none; padding: 0; cursor: pointer;
}

/* ── Utility classes (replaces inline styles from app.js) ── */

/* Text helpers */
.text-xs-secondary   { font-size: 11px; color: var(--text-secondary); }
.text-sm-secondary   { font-size: 11px; color: var(--text-secondary); }
.text-md-secondary   { font-size: 13px; color: var(--text-secondary); }
.text-base-secondary { font-size: 14px; color: var(--text-secondary); }
.text-strong         { font-weight: 600; color: var(--text-primary); }

/* Icon helpers */
.icon-inline      { font-size: 18px; vertical-align: middle; }
.icon-md-primary  { font-size: 18px; color: var(--primary); }
.icon-xl-primary  { font-size: 40px; color: var(--primary); }
.icon-empty-state { font-size: 64px; color: var(--text-tertiary); opacity: .5; }
.icon-empty-error { font-size: 64px; color: var(--error); opacity: .3; }

/* Flex helpers */
.d-flex          { display: flex; }
.d-flex-center   { display: flex; align-items: center; }
.d-flex-between  { display: flex; align-items: center; justify-content: space-between; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.mb-12  { margin-bottom: 12px; }
.mb-16  { margin-bottom: 16px; }
.mb-20  { margin-bottom: 20px; }
.mb-24  { margin-bottom: 24px; }
.mt-12  { margin-top: 12px; }

/* Card helpers */
.card-plain    { background: var(--bg-secondary); padding: 20px; border-radius: 12px; }
.card-bordered { background: var(--bg-secondary); padding: 20px; border-radius: 12px; border: 1px solid var(--border); }
.card-widget   { background: var(--bg-secondary); border-radius: 16px; border: 1px solid var(--border); padding: 16px; margin: 0 16px 16px; }
.stat-mini-card { background: var(--bg-tertiary); border-radius: 10px; padding: 10px; text-align: center; }

/* Grid helpers */
.grid-auto-280 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

/* Section title */
.section-title       { font-size: 14px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.section-title-plain { font-size: 14px; font-weight: 600; margin-bottom: 12px; }

/* Input helpers */
.input-flex   { flex: 1; font-size: 12px; padding: 6px; }
.input-inline {
  flex: 1; font-size: 12px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-tertiary); color: var(--text-primary);
}

/* Action rows */
.action-row        { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.action-row-simple { display: flex; gap: 8px; margin-top: 12px; }

/* Chat avatars */
.chat-avatar        { padding: 6px; border-radius: 50%; font-size: 22px; }
.chat-avatar--bot   { background: var(--bg-tertiary); color: var(--primary); }
.chat-avatar--user  { background: var(--primary); color: #fff; }

/* Bot card header bar */
.bot-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
}

/* View controls (Staff/Family filter row) */
.view-controls-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

/* Action button in bot card */
.btn-action {
  font-size: 13px; padding: 7px 16px;
  display: flex; align-items: center; gap: 4px;
}


/* ══════════════════════════════════════
   EXTRACTED FROM JS — v0.0.2
   All inline styles moved here.
   ══════════════════════════════════════ */

/* ── Skip-to-main link (a11y) ────────── */
#skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: #fff;
  padding: 8px 16px;
  z-index: 99999;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}
#skip-to-main:focus { top: 0; }

/* ── Planner suggest chips ───────────── */
.planner-suggest-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.planner-suggest-chip:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.planner-suggest-chip .material-symbols-outlined {
  font-size: 15px;
  color: var(--primary);
  transition: color 0.15s;
}
.planner-suggest-chip:hover .material-symbols-outlined { color: #fff; }

/* ── Signal chip (overdue alert) ─────── */
#signal-chip {
  position: fixed;
  top: 80px;
  right: 16px;
  background: var(--bg-secondary);
  border: 1px solid rgba(245,158,11,0.4);
  border-left: 3px solid #f59e0b;
  border-radius: 12px;
  padding: 10px 14px;
  max-width: 260px;
  z-index: 8888;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transform: translateX(calc(100% + 20px));
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
}
#signal-chip.visible { transform: translateX(0); }

.signal-chip-inner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.signal-chip-icon {
  color: #f59e0b;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.signal-chip-body { flex: 1; min-width: 0; }
.signal-chip-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.signal-chip-time {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.signal-chip-cta {
  margin-top: 5px;
  font-size: 11px;
  color: #f59e0b;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.signal-chip-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  font-family: inherit;
}

/* ── Slider drawer (right-side panel) ── */
.slider-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 199;
  backdrop-filter: blur(2px);
  transition: opacity 0.25s ease;
  opacity: 0;
}
.slider-backdrop.visible { opacity: 1; }

.slider-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0,0,0,0.3);
  z-index: 200;
  overflow-y: auto;
  padding: 20px 16px 32px;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.slider-panel.visible { transform: translateX(0); }

/* ── Nav badge info icon ─────────────── */
.badge-info {
  font-size: 11px;
  color: var(--text-tertiary);
  position: absolute;
  bottom: -2px;
  right: -4px;
  cursor: default;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.nav-btn:hover .badge-info { opacity: 0.7; }

/* ── Live nav badge (.nb-live) ────────── */
.nb-live {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  background: #ef4444;
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
  transition: transform 0.15s ease;
}
.nb-live.visible {
  display: flex;
}

/* ── Score chip color states ──────────── */
.score-val-good    { color: #10b981; }
.score-val-ok      { color: #f59e0b; }
.score-val-poor    { color: #ef4444; }

/* ── Phone input validity states ─────── */
.form-control.phone-valid,
input.phone-valid {
  border-color: var(--success);
  background: rgba(16,185,129,0.08);
}
.form-control.phone-invalid,
input.phone-invalid {
  border-color: var(--error);
  background: rgba(239,68,68,0.07);
}

/* ── Header filter hide/show state ────── */
.header-filters.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Chat message renderer (renderChat / conversation) ─── */
.message-user {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
.message-bot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
.msg-bubble-user {
  max-width: 75%;
  background: var(--primary);
  color: #fff;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  font-size: 14px;
  line-height: 1.5;
}
.msg-bubble-bot {
  max-width: 75%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  font-size: 14px;
  line-height: 1.5;
}
.msg-bubble-bot-html {
  flex: 1;
  min-width: 0;
}
.msg-icon-user {
  background: var(--primary);
  color: #fff;
  padding: 6px;
  border-radius: 50%;
  font-size: 18px;
  flex-shrink: 0;
}
.msg-icon-bot {
  background: var(--bg-tertiary);
  color: var(--primary);
  padding: 6px;
  border-radius: 50%;
  font-size: 18px;
  flex-shrink: 0;
}

/* ── Upgrade banner ────────────────────── */
.upgrade-banner {
  background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(124,58,237,0.08));
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* ── Nav upgrade section ──────────────── */
.nav-upgrade-btn {
  margin-top: auto;
  padding: 12px 8px 8px;
  border-top: 1px solid var(--border);
}
.nav-upgrade-pro {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(16,185,129,0.1);
  border-radius: 10px;
  font-size: 12px;
  color: #10b981;
  font-weight: 600;
}
.nav-upgrade-pro .material-symbols-outlined { font-size: 16px; }

.nav-upgrade-cta {
  width: 100%;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
}
.nav-upgrade-cta .material-symbols-outlined { font-size: 16px; }

/* ── Nav badge icon wrapper ───────────── */
.nav-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Auth-state guards: hide chrome until .authenticated is set ─────────────
   Prevents flash of nav/profile before session is verified.
   Uses opacity+pointer-events so layout doesn't shift.               ──────── */
.sidebar, #nav-main, #main-content, #app-header .user-profile {
  transition: opacity 0.2s ease;
}
body:not(.authenticated) .sidebar,
body:not(.authenticated) #nav-main,
body:not(.authenticated) #main-content,
body:not(.authenticated) #app-header .user-profile {
  opacity: 0;
  pointer-events: none;
}
body.authenticated .sidebar,
body.authenticated #nav-main,
body.authenticated #main-content,
body.authenticated #app-header .user-profile {
  opacity: 1;
  pointer-events: auto;
}

/* ── Spinner hard-off when .active is absent ────────────────────────────────── */
#auth-loading-overlay:not(.active) { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   APUNKAI RESPONSIVE SHELL — Mobile-first, adapts to tablet/desktop
   ══════════════════════════════════════════════════════════════════ */

/* ── View Panels ─────────────────────────────────────────────── */
.view-panel {
  display: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Uses --apk-chrome-bottom (defined in :root above).
     body.show-bn overrides it to include nav height on mobile.
     One variable controls padding for every view — no more scattered overrides. */
  padding-bottom: var(--apk-chrome-bottom);
}
.view-panel.active {
  display: block !important;
  animation: fadeIn 0.22s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   NAV RESPONSIVE v2 — data-nav attribute architecture
   ─────────────────────────────────────────────────────────────────────────
   JS sets ONE attribute: body[data-nav="mobile|tablet|desktop"]
   CSS reads that attribute — no class wars, no inline-style conflicts,
   works identically across Chrome, Firefox, Safari, Samsung Browser.

   Layout modes:
     mobile  → #bottom-nav visible, #nav-container hidden
     tablet  → #nav-container 44px icon rail (fixed), #bottom-nav hidden
               body[data-sidebar="open"] → 224px overlay panel + backdrop
     desktop → #nav-container 52px icon rail (fixed), #bottom-nav hidden
               body[data-sidebar="open"] → 240px pushes main content
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Scrollbar suppression (all browsers) ──────────────────────────────── */
#nav-container { scrollbar-width: none; }
#nav-container::-webkit-scrollbar { display: none; }

/* ── Shared nav-container base ─────────────────────────────────────────── */
#nav-container {
  position:       fixed;
  top:            var(--hdr-h, 56px);
  left:           0;
  bottom:         0;
  display:        flex;
  flex-direction: column;
  background:     var(--bg-secondary);
  border-right:   1px solid var(--border);
  overflow:       hidden;
  z-index:        200;
  transition:     width .22s cubic-bezier(.4,0,.2,1),
                  transform .22s cubic-bezier(.4,0,.2,1);
}

/* ── .nav-label: CSS-only visibility, no inline style ──────────────────── */
/* Default: hidden (icon-rail mode). JS MUST NOT set inline style on these. */
.nav-label {
  font-size:   13px;
  font-weight: 500;
  color:       inherit;
  display:     none;
  overflow:    hidden;
  white-space: nowrap;
  opacity:     0;
  transition:  opacity .15s;
}

/* ─────────────────── MOBILE ─────────────────── */
/* body[data-nav="mobile"]: hide sidebar, show bottom bar */
body[data-nav="mobile"] #nav-container {
  transform:      translateX(-100%);
  visibility:     hidden;
  pointer-events: none;
  width:          240px; /* pre-sized for hamburger overlay */
}
/* Hamburger overlay on mobile — slides in, full-height */
body[data-nav="mobile"][data-sidebar="open"] #nav-container {
  transform:      translateX(0);
  visibility:     visible;
  pointer-events: auto;
  box-shadow:     4px 0 24px rgba(0,0,0,.45);
  z-index:        600;
  overflow-y:     auto;
  width:          240px;
}
body[data-nav="mobile"][data-sidebar="open"] .nav-label {
  display: inline;
  opacity: 1;
}
body[data-nav="mobile"] #bottom-nav {
  display:    flex !important;
  visibility: visible !important;
}
body[data-nav="mobile"] #apk-main,
body[data-nav="mobile"] .main-content { margin-left: 0; }
body[data-nav="mobile"] #apk-chat-bar,
body[data-nav="mobile"] .command-bar,
body[data-nav="mobile"] #command-bar {
  left:   0;
  right:  0;
  border-radius: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(var(--bg-primary-rgb, 15,18,30), 0.85);
  border-top: 1px solid var(--border);
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding-left: 12px;
  padding-right: 12px;
}

/* ─────────────────── TABLET ─────────────────── */
/* body[data-nav="tablet"]: 44px icon rail, expands as overlay on hamburger */
body[data-nav="tablet"] #nav-container {
  width:          44px;
  min-width:      44px;
  transform:      translateX(0);
  visibility:     visible;
  pointer-events: auto;
}
body[data-nav="tablet"][data-sidebar="open"] #nav-container {
  width:     224px;
  min-width: 224px;
  z-index:   600;
  box-shadow: 4px 0 24px rgba(0,0,0,.4);
  overflow-y: auto;
}
body[data-nav="tablet"][data-sidebar="open"] .nav-label {
  display: inline;
  opacity: 1;
}
body[data-nav="tablet"] #bottom-nav { display: none !important; }
body[data-nav="tablet"] #apk-main,
body[data-nav="tablet"] .main-content { margin-left: 44px; }
body[data-nav="tablet"] #apk-chat-bar,
body[data-nav="tablet"] .command-bar,
body[data-nav="tablet"] #command-bar {
  left:   calc(44px + 12px);
  right:  12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(var(--bg-primary-rgb, 15,18,30), 0.85);
}
body[data-nav="tablet"] .nav-btn::after {
  /* Icon tooltip on tablet collapsed rail */
  content:         attr(aria-label);
  position:        absolute;
  left:            calc(44px + 8px);
  top:             50%;
  transform:       translateY(-50%);
  background:      var(--bg-secondary);
  color:           var(--text-primary);
  font-size:       12px;
  font-weight:     500;
  padding:         5px 10px;
  border-radius:   8px;
  border:          1px solid var(--border);
  box-shadow:      0 2px 8px rgba(0,0,0,.25);
  white-space:     nowrap;
  pointer-events:  none;
  opacity:         0;
  transition:      opacity .12s;
  z-index:         400;
}
body[data-nav="tablet"] .nav-btn:hover::after { opacity: 1; }
body[data-nav="tablet"][data-sidebar="open"] .nav-btn::after { display: none; }

/* ─────────────────── DESKTOP ─────────────────── */
/* body[data-nav="desktop"]: 52px icon rail, pushes content when expanded */
body[data-nav="desktop"] #nav-container {
  width:          52px;
  min-width:      52px;
  transform:      translateX(0);
  visibility:     visible;
  pointer-events: auto;
}
body[data-nav="desktop"][data-sidebar="open"] #nav-container {
  width:          240px;
  min-width:      240px;
  overflow-y:     auto;
  box-shadow:     2px 0 12px rgba(0,0,0,.15);
}
body[data-nav="desktop"][data-sidebar="open"] .nav-label {
  display: inline;
  opacity: 1;
}
body[data-nav="desktop"][data-sidebar="open"] #apk-main,
body[data-nav="desktop"][data-sidebar="open"] .main-content { margin-left: 240px; }
body[data-nav="desktop"][data-sidebar="open"] #apk-chat-bar,
body[data-nav="desktop"][data-sidebar="open"] .command-bar,
body[data-nav="desktop"][data-sidebar="open"] #command-bar { left: calc(240px + 12px); }
body[data-nav="desktop"] #bottom-nav { display: none !important; }
body[data-nav="desktop"] #apk-main,
body[data-nav="desktop"] .main-content { margin-left: 52px; }
body[data-nav="desktop"] #apk-chat-bar,
body[data-nav="desktop"] .command-bar,
body[data-nav="desktop"] #command-bar {
  left:  calc(52px + 12px);
  right: calc(12px + 32px);
}
body[data-nav="desktop"] .nav-btn::after {
  content:        attr(aria-label);
  position:       absolute;
  left:           calc(52px + 8px);
  top:            50%;
  transform:      translateY(-50%);
  background:     var(--bg-secondary);
  color:          var(--text-primary);
  font-size:      12px;
  font-weight:    500;
  padding:        5px 10px;
  border-radius:  8px;
  border:         1px solid var(--border);
  box-shadow:     0 2px 8px rgba(0,0,0,.25);
  white-space:    nowrap;
  pointer-events: none;
  opacity:        0;
  transition:     opacity .12s;
  z-index:        400;
}
body[data-nav="desktop"] .nav-btn:hover::after { opacity: 1; }
body[data-nav="desktop"][data-sidebar="open"] .nav-btn::after { display: none; }

/* ── Sidebar backdrop (mobile + tablet overlay) ─────────────────────────── */
body[data-sidebar="open"]::before {
  content:         '';
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.4);
  z-index:         199;
  pointer-events:  auto;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── Fallback: no data-nav set yet (loading) ────────────────────────────── */
body:not([data-nav]) #nav-container { display: none !important; }

/* Mention highlight */
.mention-active { background: var(--bg-tertiary, rgba(255,255,255,.08)) !important; }

/* ── Bottom nav bar (mobile) ─────────────────────────────────── */
/* #bottom-nav canonical block is at the BOTTOM NAV (mobile only) section below */

/* ── MOBILE Z-STACK (≤640px) ─────────────────────────────────
   Layer order (bottom to top):
     #bottom-nav  z-2100  h=56px+safe-area
     .command-bar z-2050  sits just above bottom-nav
     content      scrolls under both
   ─────────────────────────────────────────────────────────── */

/* ── TABLET (641px – 1024px) ─────────────────────────────────── */

/* ── DESKTOP (>1024px) — icon rail by default, expands on sidebar-open ── */

/* ── bottom-nav display: controlled ONLY by JS (renderNavigation + autoLogin)
   CSS rules here caused specificity wars across browsers/themes.
   JS uses el.style.setProperty('display','flex','important') which always wins.
   Default from canonical block (#bottom-nav { display:none }) is the baseline. ── */

/* ── More menu (mobile overflow nav) ────────────────────────── */
#apk-more-menu {
  animation: slideUp 0.22s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Home welcome card stats ─────────────────────────────────── */
.home-stat-card {
  transition: transform 0.15s ease;
  cursor: default;
}
.home-stat-card:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════════════════════════
   CROSS-BROWSER & PWA COMPATIBILITY — v0.0.1
   Fixes for Chrome tablet, Firefox, Safari, Samsung Browser
   ═══════════════════════════════════════════════════════════════ */

/* ── dvh/svh fallbacks for browsers without dynamic viewport ── */
:root {
  --vh: 1vh; /* Updated via JS: document.documentElement.style.setProperty('--vh', window.innerHeight/100 + 'px') */
  /*
   * --apk-chrome-bottom: total fixed chrome height at viewport bottom.
   * Single source of truth for padding-bottom on ALL scrollable content.
   * Prevents last cards from hiding behind bottom-nav + command-bar stack.
   * Default (tablet/desktop): command-bar ~64px + safe-area + 40px buffer.
   * Override via body.show-bn for mobile where nav is also visible.
   */
  --apk-chrome-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 40px);
}

/* Mobile with bottom-nav visible: full nav+bar stack height */
body.show-bn {
  --apk-chrome-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 60px + 48px);
}

/* ── Safe area insets (iPhone notch, Android gesture bar) ────── */
/* NOTE: body padding-bottom removed — bottom-nav is fixed, content
   padding is handled per view-panel. */

/* ── Tap highlight removal (all browsers) ────────────────────── */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
input, textarea, select, button {
  -webkit-tap-highlight-color: transparent;
}

/* ── Scrollbar cross-browser ─────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ── Modal max-height fallback (Chrome tablet fix) ───────────── */
.modal-content {
  max-height: min(90vh, 90dvh);
  max-height: min(90svh, 90dvh);
}

/* ── Input zoom prevention (iOS/Chrome mobile) ───────────────── */
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
select,
textarea {
  font-size: max(16px, 1em); /* prevents auto-zoom on focus in iOS */
}

/* ── Button press states (all touch devices) ─────────────────── */
button:active:not(:disabled),
.btn:active:not(:disabled),
.nav-btn:active,
.modal-close:active {
  transform: scale(0.96);
  transition: transform 0.08s ease;
}

/* ── Chrome tablet: settings modal layout fix ────────────────── */

/* ── Rotating animation (used by sync buttons) ───────────────── */
@keyframes rotating {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.rotating { display: inline-block; animation: rotating 0.7s linear infinite; }

/* ── Touch-friendly minimum tap targets (WCAG 2.5.5) ─────────── */
button,
.nav-btn,
.btn,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
}
/* Exception: icon-only small buttons */
.btn-icon,
.dot-fab-trigger {
  min-height: 36px;
  min-width: 36px;
}

/* ── Prevent content shift on modal open ─────────────────────── */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ── OpenTelemetry / perf observer toast (hidden UI hook) ─────── */
#apk-perf-badge {
  position: fixed; bottom: 4px; left: 4px; z-index: 9999;
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
  background: rgba(0,0,0,.6); color: #10b981;
  font-family: monospace; display: none;
  pointer-events: none;
}
body.debug-perf #apk-perf-badge { display: block; }


/* ═══════════════════════════════════════════════════════════════
   APUNKAI v0.0.3 — MODERN NAV SYSTEM

   Philosophy (inspired by Claude app, Notion, Linear):
   ─ Mobile  (≤640px):  Bottom tab bar — thumb-reachable, 5 primary tabs
   ─ Tablet  (641–1024px): Icon rail (52px) — tap logo/hamburger to expand
                           overlay. Clean, no clutter, content-first.
   ─ Desktop (≥1025px): Full sidebar (180px) with labels, collapsible.

   FAB on mobile: single ⚡ compose shortcut above chat bar.
   FAB on tablet+: REMOVED — sidebar/rail handles all navigation.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar: refined icon-rail for tablet ───────────────────── */
/* Ensure nav items are always row-layout (icons left, label right) */
.nav-btn {
  flex-direction: row;
}

/* Tablet icon rail: 52px wide, no labels visible unless .expanded */

/* Bottom tab bar: frosted glass — already applied in canonical block above */

/* Bottom nav tab items */
.bottom-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  padding: 6px 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: color .15s ease;
  min-height: 52px;
  position: relative;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.bottom-tab .material-symbols-outlined {
  font-size: 22px;
  transition: transform .15s ease;
}
.bottom-tab.active {
  color: var(--primary);
}
.bottom-tab.active .material-symbols-outlined {
  transform: scale(1.1);
}
/* Active indicator pill above icon */
.bottom-tab.active::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--primary);
  border-radius: 0 0 3px 3px;
}
.bottom-tab:active .material-symbols-outlined {
  transform: scale(0.88);
}
/* Badge on bottom tabs */
.bottom-tab-badge {
  position: absolute;
  top: 5px;
  right: calc(50% - 18px);
  background: var(--error);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
  line-height: 1.4;
}

/* ── Stat cards: refined, more visual hierarchy ──────────────── */
/* Home stat strip accent borders (kept for any legacy stat-card usage) */
.stat-card[data-type="pending"]  { border-top: 2px solid var(--warning); }
.stat-card[data-type="done"]     { border-top: 2px solid var(--success); }
.stat-card[data-type="overdue"]  { border-top: 2px solid var(--error); }
.stat-card[data-type="score"]    { border-top: 2px solid var(--primary); }

/* ── Header: tighter on tablet ───────────────────────────────── */

/* ── Sidebar expand button: visible on tablet, hidden on desktop ─ */
.sidebar-expand-btn {
  display: none;
}

/* ── Smooth page transitions ─────────────────────────────────── */
.view-panel.active {
  animation: apkPageIn .2s cubic-bezier(.4,0,.2,1) both;
}
@keyframes apkPageIn { 
  /* FIX: Removed transform to prevent stacking context bugs on mobile */
  from { opacity: 0; } 
  to { opacity: 1; } 
}


/* ── Loading skeleton (perceived performance) ────────────────── */
@keyframes apkSkeleton {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 25%,
    var(--bg-hover)    50%,
    var(--bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: apkSkeleton 1.4s ease infinite;
  border-radius: var(--radius-md);
}

/* ── Notification panel: refined position ────────────────────── */
#apk-notif-panel {
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 0 1px var(--border);
}

/* ── Command bar: pill shape on mobile ───────────────────────── */

/* ── Ensure planner/staff grids don't collapse on tablet ─────── */

/* ── dot-fab: only on mobile ─────────────────────────────────── */
/* (already has this, but reinforce with higher specificity) */

/* ═══════════════════════════════════════════════════════════════
   HTTPS + PROD READINESS NOTES (server-side, not CSS — reminder)
   ─ render.com / Railway / Fly.io provision TLS automatically
   ─ Set APUNKAI_ENV=production + BUILD_HASH=$COMMIT_SHA in env vars
   ─ HSTS header already in server.js for prod (Strict-Transport-Security)
   ─ When macOS: use 'node --import tsx server/server.js' or compile first
   ═══════════════════════════════════════════════════════════════ */


/* ================================================================
   APUNKAI v0.0.1 — UNIFIED CROSS-BROWSER LAYOUT PATCH
   Single source of truth. Replaces all previous patch sections.
   ================================================================

   FIXES:
   1. HAMBURGER (Chrome): visibility+width trick instead of display:none/flex.
      Chrome loses the media-query display:flex when an earlier
      block also has display:none at same specificity.
      Solution: display:inline-flex always; hide with visibility:hidden + width:0.

   2. NAV LABELS (Firefox): JS navBtnHTML (sidebar mode) no longer injects
      style= on .nav-label. Inline style= beats in FF.
      CSS (#nav-container ID) is sole authority.

   3. SETTINGS MODAL height chain:
      - .modal-lg .modal-content: explicit height (not just max-height)
      - #settings-modal .modal-body: overflow:hidden + height:100%
      - #settings-shell: flex row, height:100%
      - #settings-nav: flex-column, overflow:hidden (NOT align-self:flex-start)
      - Nav items in flex:1 scroll child; badge in flex-shrink:0 below = always visible

   4. body.view-{name} set in switchView for CSS scoping
   ================================================================ */


/* ── CSS Custom Properties ──────────────────────────────────────── */
/* [FIX-HDRSSOT-01 / whitespace-top-home] --hdr-h used to be declared HERE (56px) AND again in
   app-agentic-os.css (52px, ":root — single source of truth"). Load order (app.css THEN
   app-agentic-os.css) meant the 52px value silently won everywhere via var(--hdr-h), while every
   consumer that assumed 56px (incl. the fixed home top-bar in app-agentic-os.js, hardcoded to
   top:60px/padding-top:56px on desktop) drifted out of sync with the real 52px header — the
   mismatch was the extra blank gap reported at the top of the home view. app-agentic-os.css
   already declares itself the token SSOT, so --hdr-h now lives there ONLY. Do not redeclare it
   here — see app-agentic-os.css §0 DESIGN TOKENS. */
:root {
  --nav-w:   0px;
  /* Always clear Android gesture bar / iOS home indicator */
  --cmd-pb: calc(12px + env(safe-area-inset-bottom, 0px));
  --cmd-pr: 12px;
}
body.sidebar-open  { --nav-w: 220px; }
body.nav-expanded  { --nav-w: 200px; }


/* ── HEADER ─────────────────────────────────────────────────────── */
.header, .app-header, #app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--hdr-h);
  min-height: var(--hdr-h);
  max-height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 1000;
  overflow: visible;  /* allow source filter dropdown to escape */
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,.18);
}
.header-left, .app-header__left, #header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}
.header-right, .app-header__right, #header-right {
  display: flex; align-items: center;
  gap: 4px; flex-shrink: 0;
  overflow: visible; flex-wrap: nowrap;
  max-height: calc(var(--hdr-h) - 8px);
  max-width: none;
}
/* Logout is always rightmost, never clipped */
.header-right > #auth-toggle { order: 99; flex-shrink: 0 !important; }


/* ── HAMBURGER — Universal sidebar toggle (Chrome + Firefox + desktop) ── */
/*
 * DESIGN DECISION (v0.0.1):
 * Chrome Android tablet reports >1024px CSS viewport (desktop mode).
 * Firefox tablet reports ~700-900px (mobile/tablet mode).
 * Same physical device, different reported widths — both need a toggle.
 *
 * Solution: show hamburger at ALL widths ≥641px as a sidebar collapse toggle.
 * - Mobile (≤640px): bottom-nav replaces sidebar; hamburger still hidden
 * - Tablet/Desktop (≥641px): always show hamburger as collapse/expand control
 *   This matches Notion, Gmail, and modern dashboard conventions.
 */
.nav-hamburger {
  display: none;           /* hidden on mobile (≤640px) */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent !important;
  transition: background .15s, color .15s;
}
/* Show hamburger on ALL non-mobile widths including desktop Chrome */
.nav-hamburger:hover, .nav-hamburger:focus-visible {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  outline: none !important;
}
.nav-hamburger:active { transform: scale(0.93) !important; }
.nav-hamburger .material-symbols-outlined { font-size: 22px !important; }


/* ── SIDEBAR ────────────────────────────────────────────────────── */
#nav-container {
  /* Base: tablet/desktop always visible. Mobile @media overrides. */
  position: fixed;
  top: var(--hdr-h);
  left: 0;
  height: calc(100dvh - var(--hdr-h));
  height: calc(100vh  - var(--hdr-h));
  height: calc(100dvh - var(--hdr-h));
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 200;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: width .22s cubic-bezier(.4,0,.2,1),
              transform .25s cubic-bezier(.4,0,.2,1);
}
/* Nav breakpoint overrides consolidated into the NAV RESPONSIVE block above. */

/* android-chrome-tablet: All devices with icon-rail (>640px) now get
   52px from the consolidated nav rules above. This class is kept for
   backwards compat but the explicit overrides are no longer needed. */

@-moz-document url-prefix() {
  #nav-container { height: calc(100vh - var(--hdr-h)) !important; }
}


/* Nav label visibility: controlled by consolidated NAV RESPONSIVE rules above.
   Labels show when body.sidebar-open is set; hidden otherwise on tablet/desktop. */


/* ── SIDEBAR OVERLAY BACKDROP ───────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 590;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px);
}
body.sidebar-open .sidebar-overlay { display: block !important; }


/* ── APP SHELL — layout container (PMF14 ARCH-01) ────────────────────── */
/* Shell sits below fixed header; fills remaining viewport height. */
.app-shell, #app-shell {
  display: flex;
  flex-direction: row;                /* sidebar | main-content side-by-side */
  height: calc(100dvh - var(--hdr-h));
  margin-top: var(--hdr-h);
  overflow: hidden;                   /* children scroll independently */
  position: relative;
}

/* ── MAIN CONTENT ───────────────────────────────────────────────── */
/* ARCH-01 SCROLL FIX (PMF14): height must be bounded so overflow-y:auto triggers.
   min-height was causing infinite expansion; content scrolled the page instead of the panel.
   Layout: html+body overflow:hidden → app-shell fills viewport → main-content scrolls. */
.main-content, #apk-main, #main-content {
  margin-top: 0;                              /* app-shell handles top offset */
  margin-left: var(--nav-w);
  height: 100%;                               /* fill app-shell flex child */
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  padding-bottom: var(--apk-chrome-bottom);
  transition: margin-left .22s cubic-bezier(.4,0,.2,1);
  position: relative;
  scroll-behavior: smooth;
}
body.nav-expanded .main-content,
body.nav-expanded #apk-main { margin-left: 200px; }
@-moz-document url-prefix() {
  .main-content, #apk-main, #main-content {
    height: 100%;
    max-height: 100%;
  }
}


/* ── COMMAND BAR ────────────────────────────────────────────────── */
.command-bar, #command-bar, #apk-chat-bar, .chat-bar {
  position: fixed;
  bottom: var(--cmd-pb);
  left: calc(var(--nav-w) + var(--cmd-pr));
  right: var(--cmd-pr);
  z-index: 400;
  transition: left .22s cubic-bezier(.4,0,.2,1);
}
body.nav-expanded .command-bar,
body.nav-expanded #apk-chat-bar { left: calc(200px + var(--cmd-pr)); }


/* ── BOTTOM NAV (mobile only) — canonical rule block ─────────────
   All display logic is here. No other block should set display on
   #bottom-nav. Tablet+desktop handled by rules above/below.      */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  display: none;
  justify-content: space-around;
  align-items: flex-start; /* Align to top to keep icons visible above safe area */
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) 0;
  z-index: 5000; /* Ensure it is above FAB backdrops (usually 1000-2000) */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Ensure nav items have enough space */
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  background: none;
  border: none;
  padding: 4px 0;
  transition: color 0.2s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


/* ── show-bottom-nav: JS adds this class to body when user is authenticated on mobile ──
   Specificity 0-2-0 + beats every other rule.
   Placed LAST so cascade order also wins.
   This is the ONLY rule that shows the bottom nav. ── */
body.show-bn #bottom-nav {
  display: flex;
}


/* ── VIEW PANELS ────────────────────────────────────────────────── */
.view-panel { display: none !important; min-height: 300px !important; }
.view-panel.active { display: block !important; animation: apkPageIn .28s ease; }
@keyframes apkPageIn {
  /* opacity-only: never use transform in view-panel animations.
     transform creates a stacking context -> position:fixed children
     get contained by the animated view-panel, not the viewport. */
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── STAT GRID ──────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}


/* ── HOME ATTENTION BAR — removed (had no click handler, arrow did nothing) ── */
.home-attention-bar { display: none; }

/* ── HOME STAT GRID — always visible on ALL screen sizes ─────────────────── */
#home-stat-row {
  display: grid;
  margin-bottom: 14px;
  animation: apkPageIn .2s ease both;
}


/* ── HEADER FILTERS: hide on home ───────────────────────────────── */
body.view-home .header-filters {
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  overflow: hidden !important;
}


/* ── SUGGESTION CHIPS ───────────────────────────────────────────── */
#suggestion-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 8px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none;
}
#suggestion-chips::-webkit-scrollbar { display: none; }


/* ── SCORE CHIP: 7-day gate ─────────────────────────────────────── */
body:not(.score-unlocked) #header-smart-score-btn { display: none; }


/* ── HEADER ACTION BUTTONS ──────────────────────────────────────── */
#header-actions-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
#header-actions-group button,
#header-admin-btn, #header-smart-score-btn,
#header-settings-btn, #notif-bell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  width: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  gap: 0;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
/* Admin btn gets text label at ≥1025px only */
#header-actions-group button:hover,
#header-admin-btn:hover, #header-settings-btn:hover, #notif-bell-btn:hover {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-light) !important;
}
#header-admin-btn {
  color: #10b981;
  border-color: #10b981;
  background: rgba(16,185,129,.08);
}
#header-actions-group button .material-symbols-outlined,
#header-admin-btn .material-symbols-outlined,
#header-settings-btn .material-symbols-outlined,
#notif-bell-btn .material-symbols-outlined { font-size: 18px; }

/* Auth toggle */
#auth-toggle {
  display: inline-flex;
  align-items: center;
  height: 34px;
  max-height: 34px;
  padding: 0 10px;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: background .15s;
}
#auth-toggle:hover { background: var(--bg-tertiary) !important; }

/* User info — consistent across all breakpoints */
#user-name {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  display: block;          /* never hide name — truncate instead */
}
/* User profile pill: always visible when authenticated */
.user-profile {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
}
#user-role {
  font-size: 11px; color: var(--text-tertiary);
  white-space: nowrap;
}

/* Notification badge */
#notif-bell-btn { position: relative; }
#notif-bell-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: var(--error);
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
}

/* Lang badge */
#header-lang-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 6px;
  font-size: 11px; font-weight: 700;
  color: #a78bfa;
  border-radius: 6px;
  border: 1px solid rgba(167,139,250,.4);
  background: rgba(167,139,250,.12);
  cursor: pointer; flex-shrink: 0;
  white-space: nowrap;
}


/* ── MODAL: mobile bottom-sheet ─────────────────────────────────── */

/* ── modal-lg: settings + planner ───────────────────────────────── */
/*
 * CRITICAL: .modal-content needs EXPLICIT height (not just max-height).
 * Without it, modal-body { flex:1 } has nothing to expand into,
 * settings-shell { height:100% } collapses, and Connectors/Profile tabs
 * are clipped by the package badge pushing them off-screen.
 *
 * The static #settings-modal in index.html uses class="modal modal-md".
 * ModalManager.open() reuses it (finds by id), so sizeClass on modal-content
 * never applies. We target #settings-modal .modal-content directly.
 */
.modal-lg .modal-content,
.modal-content.modal-lg,
#settings-modal .modal-content,
#planner-modal .modal-content {
  max-width: 860px;
  width: 95vw;
  height: 88dvh;
  height: 88vh ;
  height: 88dvh;
  max-height: 88dvh;
  max-height: 88vh ;
  max-height: 88dvh;
}

/* modal-body inside settings: overflow:hidden (shell handles scroll internally) */
/* CRITICAL: NO height:100% here — it resolves to modal's 88dvh and overrides flex:1,
   pushing the sticky Save + Logout footer outside the clipped container. */
#settings-modal .modal-body {
  flex: 1;
  max-height: none;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}
/* planner modal: allow body to scroll so all options visible */
#planner-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  padding: 12px 14px;
  min-height: 0;
}

/* settings-shell: flex row, fills modal-body */
#settings-shell {
  display: flex;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* settings-nav: full height flex column (NO align-self:flex-start!) */
#settings-nav {
  width: 180px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-tertiary);
  /* height comes from parent #settings-shell which is height:100% */
}

/* settings-content: scrollable right panel */
#settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  -webkit-overflow-scrolling: touch !important;
  min-height: 0;
}

/* Settings mobile: horizontal tab strip */


/* ── TOAST + SIGNAL ─────────────────────────────────────────────── */
.toast-container { top: calc(var(--hdr-h) + 12px); }
.signal-chip, #apk-signal-chip { top: calc(var(--hdr-h) + 8px); }


/* ── BOT / CHAT ─────────────────────────────────────────────────── */
@keyframes apk-bot-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.6; transform:scale(1.12); }
}
.apk-bot-icon.pulse-animation {
  animation: apk-bot-pulse 1.2s ease-in-out infinite;
  color: var(--primary);
}

/* ── Chai Bot SVG animation ───────────────────────────────────────────────── */
.apk-chai-bot { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.apk-chai-bot svg .chai-steam1,
.apk-chai-bot svg .chai-steam2,
.apk-chai-bot svg .chai-steam3 { opacity: 0; }
.apk-chai-bot.working svg .chai-steam1 { animation: chaiSteam1 1.6s ease-in-out infinite; }
.apk-chai-bot.working svg .chai-steam2 { animation: chaiSteam2 1.6s ease-in-out .35s infinite; }
.apk-chai-bot.working svg .chai-steam3 { animation: chaiSteam3 1.6s ease-in-out .7s infinite; }
.apk-chai-bot.working svg .chai-cup    { stroke: #f59e0b !important; filter: drop-shadow(0 0 5px rgba(245,158,11,.75)); }
.apk-chai-bot.working svg .chai-liquid { stroke: #f59e0b !important; }
.apk-chai-bot.done    svg .chai-cup    { stroke: #10b981 !important; }
.apk-chai-bot.done    svg .chai-liquid { stroke: #10b981 !important; }
.apk-chai-bot.done    svg .chai-check  { opacity:1; }
.apk-chai-bot svg .chai-check { opacity:0; transition:opacity .3s; }
/* Idle state: soft ambient green glow so bot is always visible */
.apk-chai-bot:not(.working):not(.done) svg .chai-cup {
  stroke: #10b981 !important;
  filter: drop-shadow(0 0 4px rgba(16,185,129,.55));
  animation: chaiIdleGlow 3s ease-in-out infinite;
}
@keyframes chaiIdleGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(16,185,129,.4)); }
  50%       { filter: drop-shadow(0 0 7px rgba(16,185,129,.75)); }
}
@keyframes chaiSteam1 {
  0%   { transform:translateY(0) scaleX(1);    opacity:.75; }
  55%  { transform:translateY(-9px) scaleX(1.3);  opacity:.4;  }
  100% { transform:translateY(-16px) scaleX(.6);  opacity:0;   }
}
@keyframes chaiSteam2 {
  0%   { transform:translateY(0) scaleX(1);    opacity:.8;  }
  55%  { transform:translateY(-9px) scaleX(.85);  opacity:.35; }
  100% { transform:translateY(-15px) scaleX(.5);  opacity:0;   }
}
@keyframes chaiSteam3 {
  0%   { transform:translateY(0) scaleX(1);    opacity:.65; }
  55%  { transform:translateY(-10px) scaleX(1.15); opacity:.3; }
  100% { transform:translateY(-14px) scaleX(.55); opacity:0;  }
}

/* Calendar filter FAB pills */
#apk-cal-cat-fab.active,
#apk-cal-range-fab.active {
  background: rgba(99,102,241,.12) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.apk-cal-filter-popover {
  position: fixed;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 0;
  min-width: 160px;
  z-index: 9200;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.apk-cal-filter-popover button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 14px;
  background: none; border: none;
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}
.apk-cal-filter-popover button:hover { background: var(--bg-tertiary); }
.apk-cal-filter-popover button.active { color: var(--primary); font-weight: 700; }
.apk-cal-filter-popover .dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
#command-input:disabled, #chat-input:disabled {
  opacity: .55 !important; cursor: not-allowed !important;
}
#chat-send-btn:disabled {
  opacity: .4 !important; cursor: not-allowed !important; pointer-events: none !important;
}
.bot-action-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  max-width: 100%;
  animation: fadeIn .28s ease;
}
.confirm-plan {
  background: var(--success); color: #fff;
  border: none; padding: 10px 18px;
  border-radius: 8px; font-weight: 700;
  cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px;
  font-family: inherit; font-size: 14px;
  transition: opacity .15s;
}
.confirm-plan:disabled { opacity: .55 !important; cursor: not-allowed !important; }
.cancel-plan {
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border); padding: 10px 14px;
  border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 14px;
  transition: background .15s;
}
.cancel-plan:hover { background: var(--bg-tertiary) !important; }


/* ── TABLE ROW ACTIONS ──────────────────────────────────────────── */
/* ── Reminder rows: CSS class replaces inline style so zebra works ── */
#reminders-tbody .reminder-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr 1.1fr 1.2fr;
  gap: 0 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  align-items: center;
  transition: background 0.15s;
  cursor: pointer;
}
#reminders-tbody .reminder-row:nth-child(even) { background: var(--bg-secondary); }
#reminders-tbody .reminder-row:nth-child(odd)  { background: var(--bg-primary); }
#reminders-tbody .reminder-row:hover           { background: var(--bg-hover, rgba(99,102,241,.08)) !important; }
#reminders-tbody .reminder-row.is-overdue-row  { border-left: 3px solid var(--error); background: rgba(239,68,68,.06); }
#reminders-tbody .reminder-row.is-completed-row{ opacity: .7; }

/* Data source dropdown: ensure dropdown renders above content in all browsers */
.data-source-group { position: relative; z-index: 50; }
.data-source-select { position: relative; z-index: 51; }

.table-row .col-actions { opacity:0.35; transition:opacity .15s; }
.table-row:hover .col-actions { opacity:1 !important; }
.status-badge { transition: background .2s, color .2s; }
.input-error { border-color:var(--error) !important; box-shadow:0 0 0 2px rgba(239,68,68,.15) !important; }
.field-error-msg { color:var(--error); font-size:11px; margin-top:3px; display:block; }


/* ── SAFE AREA (iOS notch / Android cutout) ─────────────────────── */
@supports (padding: max(0px)) {
  .header, .app-header, #app-header {
    padding-left:  max(12px, env(safe-area-inset-left)) ;
    padding-right: max(12px, env(safe-area-inset-right));
  }
  #bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .command-bar, #apk-chat-bar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}


/* ── OVERRIDE JS-INJECTED INLINE STYLES ON #nav-container ───────── */
/* Prevents JS width/display inline styles from conflicting with CSS */


/* End of ApunkAI v0.0.1 unified layout patch */


/* ── Settings sidebar: upgrade promo — compact pill, never taller than needed ── */
#settings-nav > div:last-child {          /* the flex-shrink:0 footer div */
  padding: 6px 8px;
}
#settings-nav > div:last-child > div {    /* the inner promo div */
  padding: 7px 8px;
  border-radius: 8px;
}
#settings-nav > div:last-child button {   /* Upgrade button */
  padding: 4px 0;
  font-size: 11px;
  border-radius: 5px;
}
#settings-nav > div:last-child div[style*="font-size:15px"] { /* sparkle emoji */
  font-size: 12px;
  margin-bottom: 1px;
}


/* ── Cross-browser normalization (Chrome / Firefox / Safari / WebKit) ────── */
/* 1. Ensure consistent box-sizing everywhere */
*, *::before, *::after { box-sizing: border-box; }

/* 2. Firefox: fix button font inheritance */
button, select, input, textarea {
  font-family: inherit;
}

/* 3. safe-area fallback for browsers without env() support */
@supports not (padding: env(safe-area-inset-bottom)) {
  .command-bar, #command-bar {
    padding-bottom: 8px;
  }
  #bottom-nav {
    padding-bottom: 0;
  }
}

/* 4. Firefox scrollbar width: prevent layout shift */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* 5. Prevent webkit tap highlight on interactive elements */
a, button, [role="button"], [tabindex] {
  -webkit-tap-highlight-color: transparent;
}

/* Firefox select: appearance handled in unified select section above */

/* ─────────────────────────────────────────────────────────────
   @MENTION DROPDOWN
───────────────────────────────────────────────────────────── */
#mention-dropdown {
  display: block; /* Managed by .is-hidden class in JS */
  position: absolute;
  z-index: 9999 !important;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.is-hidden {
  display: none;
}

/* FIX: Prevent cards from clipping the dropdown */
.task-card, .chore-row {
  overflow: visible;
}

#mention-dropdown [data-mention-active],
#mention-dropdown .mention-active {
  background: var(--primary-subtle, rgba(79,110,247,.15));
}
#mention-dropdown > div:last-child {
  border-bottom: none;
}

/* ─────────────────────────────────────────────────────────────
   NOTES — EXPIRY + PIN BADGES
───────────────────────────────────────────────────────────── */
.note-expiry-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(251,146,60,.15);
  color: #fb923c;
  border: 1px solid rgba(251,146,60,.3);
}
.note-expiry-badge.expired {
  background: rgba(239,68,68,.15);
  color: #ef4444;
  border-color: rgba(239,68,68,.3);
}
.note-pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(79,110,247,.12);
  color: #4f6ef7;
  border: 1px solid rgba(79,110,247,.25);
}
/* Pinned note card emphasis */
.entity-card.note-pinned {
  border-color: rgba(79,110,247,.35);
  background: linear-gradient(135deg, var(--bg-secondary), rgba(79,110,247,.05));
}
/* Edit member modal input animation */
#apk-edit-member-modal .form-control:focus {
  border-color: var(--primary, #4f6ef7);
  box-shadow: 0 0 0 3px rgba(79,110,247,.15);
}


/* ══════════════════════════════════════════════
   BULK SELECT — checkboxes on chores/reminders
   ══════════════════════════════════════════════ */
.tbl-check-hdr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
}
.tbl-check-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
}
.tbl-check-cell input[type=checkbox] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--primary);
  border-radius: 4px;
}
/* [r97] Select-all is a bulk action → larger than individual row boxes (visual priority). */
.tbl-check-hdr input[type=checkbox],
#chores-select-all, #reminders-select-all, #notes-select-all {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--primary);
  border-radius: 5px;
}
/* Add checkbox column to grid.
   [FIX-GRIDSSOT-01 / item 4] 8 tracks: 36px checkbox + title + assignee + due + category +
   created + status + actions. This is the pair that actually wins the cascade for Chores (later
   than the earlier .tbl-thead-chores/#chores-tbody .table-row rules near the zebra-striping
   block) — both now read the one shared token so they can't drift apart again. */
.tbl-thead-chores  { grid-template-columns: var(--chores-grid-cols); }
#chores-tbody    .table-row   { grid-template-columns: var(--chores-grid-cols); }

/* Reminder table: also add checkbox col.
   [FIX-GRIDSSOT-01 / item 4] This is the rule that actually controls Reminders' row layout —
   its markup uses class .reminder-row, NOT .table-row (renderRemindersTable, app.js), so the
   .tbl-thead-reminders / #reminders-tbody .table-row rules near the zebra-striping block above
   are dead for Reminders specifically and are left in place only because .tbl-thead-reminders is
   still used for non-column-width rules (mobile display:none, etc). Reminders' HEADER is built
   with an inline grid-template-columns in app.js (REMINDER_COLS) which now reads this same
   --reminders-grid-cols token at render time instead of hardcoding its own copy — see
   renderRemindersTable. */
#reminders-tbody .reminder-row { display: grid; gap: 8px; padding: 10px 12px;
  grid-template-columns: var(--reminders-grid-cols);
  align-items: center; border-bottom: 1px solid var(--border-subtle,rgba(255,255,255,.06)); }

/* Highlighted selected row */
.table-row.bulk-selected,
.reminder-row.bulk-selected {
  background: rgba(99,102,241,0.12);
  border-left: 3px solid var(--primary);
}

/* Bulk action bar — sticks to top of view */
.bulk-action-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  margin-bottom: 8px;
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
  animation: fadeIn 0.15s ease;
}
.bulk-count {
  font-size: 13px;
  font-weight: 700;
  margin-right: 4px;
}
.bulk-btn {
  font-size: 12px;
  padding: 5px 10px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  white-space: nowrap;
}
.bulk-btn .material-symbols-outlined { font-size: 14px; }

/* ══════════════════════════════════════════════════════
   @MENTION DROPDOWN — works in all inputs/textareas
   ══════════════════════════════════════════════════════ */
.mention-dropdown-panel {
  position: fixed;
  background: var(--bg-secondary, #1e2535);
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.2);
  z-index: 9999;
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
  min-width: 200px;
  scrollbar-width: thin;
  animation: fadeIn 0.12s ease;
}
.mention-dd-header {
  padding: 8px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary, rgba(255,255,255,.4));
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  background: var(--bg-tertiary, rgba(0,0,0,.15));
}
.mention-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
  transition: background 0.12s;
}
.mention-dd-item:last-child { border-bottom: none; }
.mention-dd-item:hover,
.mention-dd-item[data-mention-active] {
  background: rgba(99,102,241,.15);
}
.mention-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 11px;
  flex-shrink: 0;
}
.mention-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mention-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #f1f5f9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mention-role {
  font-size: 11px;
  color: var(--text-tertiary, rgba(255,255,255,.4));
}

/* @mention pill rendered inside messages / notes */
.mention-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 12px;
  background: rgba(99,102,241,.18);
  color: var(--primary, #6366f1);
  font-weight: 600;
  font-size: 0.9em;
  cursor: pointer;
  white-space: nowrap;
}
.mention-tag:hover { background: rgba(99,102,241,.3); }

/* Planner specific */
.planner-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  transition: all 0.12s;
  white-space: nowrap;
}
.planner-quick-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(99,102,241,.08);
}

/* ═══════════════════════════════
   HOME MINDMAP
   ═══════════════════════════════ */
#home-mindmap-modal .modal-content { background: var(--bg-primary); }
.mm-node circle { transition: fill-opacity 0.15s, r 0.15s; }
.mm-node:hover circle:first-of-type { fill-opacity: 0.35 !important; }
.mm-node:hover text { font-weight: 800; }
#mm-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
#mm-svg {
  max-width: 100%;
  max-height: 100%;
}

/* scroll-to-top button */
#scroll-top-btn:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE-FIRST LAYOUT OVERHAUL
   Clean, minimal — inspired by Claude/Notion/Perplexity
   ══════════════════════════════════════════════════════════════ */

/* MOBILE: hide sidebar, use bottom nav only */

/* bottom-nav tabs — styling only, no display rules here */
.bottom-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  padding: 6px 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-btn .material-symbols-outlined { font-size: 20px; }
.bottom-nav-btn.active { color: var(--primary); }
.bottom-nav-btn:active { color: var(--primary); transform: scale(0.92); }

/* Sidebar overlay backdrop */
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: 595;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  display: none;
}
body.sidebar-open .sidebar-backdrop { display: block; }


/* ══════════════════════════════════════════════════════════
   MOBILE EXPERIENCE — clean, uncluttered, thumb-friendly
   ══════════════════════════════════════════════════════════ */

/* ── Sidebar overlay backdrop ────────────────────────────── */
.sidebar-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── Nav sidebar: unified slide behaviour ─────────────────── */
/* Mobile: hidden behind left edge, slides in as overlay */

/* Nav section dividers */
.nav-section-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 8px;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════
   NAV GROUP HEADERS — collapsible sections
   ═══════════════════════════════════════════════ */
.nav-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
  margin-top: 4px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.nav-group-header:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.nav-group-header.nav-group-open {
  color: var(--primary);
}
/* Chevron: expand_more icon starts pointing ↓ (closed).
   Rotate 180° when open → points ↑. Same pattern as Material Design accordions. */
.nav-group-chevron {
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
  font-size: 16px;
  color: var(--text-tertiary);
  margin-left: auto;
  flex-shrink: 0;
  /* Default (closed): points down */
  transform: rotate(0deg);
}
.nav-group-header.nav-group-open .nav-group-chevron {
  /* Open: rotate 180° → points up */
  transform: rotate(180deg);
  color: var(--primary);
}
.nav-group-label {
  flex: 1;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Icon-only rail: group header shows as compact icon button (no text) */
body.android-chrome-tablet:not(.sidebar-open) .nav-group-header {
  display: flex !important;
  justify-content: center !important;
  padding: 10px 0 !important;
  width: 52px !important;
  border-radius: 8px !important;
  margin: 2px 0 !important;
}
body.android-chrome-tablet:not(.sidebar-open) .nav-group-label,
body.android-chrome-tablet:not(.sidebar-open) .nav-group-chevron {
  display: none !important;
}
/* In icon-only mode: sub-items HIDDEN by default — open via group header click */
body.android-chrome-tablet:not(.sidebar-open) .nav-group-items {
  max-height: 0 !important;
  overflow: hidden !important;
}
/* When group is open in icon-only mode: sub-items appear as tooltips below */
body.android-chrome-tablet:not(.sidebar-open) .nav-group-header.nav-group-open + .nav-group-items {
  max-height: 300px !important;
  overflow: visible !important;
}

/* Expanded sidebar: indent sub-items */
body.sidebar-open .nav-btn-sub,
body:not(.android-chrome-tablet) .nav-btn-sub {
  padding-left: 20px;
}
/* Icon-only: no indent */
body.android-chrome-tablet:not(.sidebar-open) .nav-btn-sub {
  padding-left: 0 !important;
  justify-content: center !important;
}

/* Settings modal: mobile tab strip */

/* Inline feedback nudge after bot messages */
.bot-feedback-nudge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  margin-top: 4px;
  background: transparent;
}
.bot-feedback-nudge span {
  font-size: 11px;
  color: var(--text-tertiary);
}
.bot-feedback-nudge button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  transition: all .15s;
  font-family: inherit;
}
.bot-feedback-nudge button:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════
   MICRO-FEEDBACK BAR — bottom of each view
   ═══════════════════════════════════════════════ */
.micro-feedback-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 16px 0 4px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-tertiary);
}
.mfb-text { flex: 1; text-align: center; font-size: 12px; }
.mfb-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 16px;
  cursor: pointer;
  transition: all .15s;
  line-height: 1;
}
.mfb-btn:hover { transform: scale(1.2); background: var(--bg-secondary); }
.mfb-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 50%;
  line-height: 1;
  transition: color .15s;
}
.mfb-dismiss:hover { color: var(--text-primary); }

/* ═══════════════════════════════════════════════
   CUSTOM SOURCE FILTER DROPDOWN
   Grouped: Direct | Import | Connected
   ═══════════════════════════════════════════════ */
.src-filter-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.src-filter-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
  font-family: inherit;
  min-width: 110px;
  height: 34px;
  justify-content: space-between;
}
.src-filter-trigger:hover { border-color: var(--primary); background: var(--bg-secondary); }
.src-filter-trigger.open  { border-color: var(--primary); }

.src-filter-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1100;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  min-width: 200px;
  display: none;
  overflow: hidden;
}
.src-filter-panel.open { display: block; }

/* Group header row */
.sfg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  transition: background .12s, color .12s;
  user-select: none;
}
.sfg-header:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.sfg-icon  { font-size: 15px; color: var(--text-tertiary); }
.sfg-label { flex: 1; }
.sfg-chevron { font-size: 16px; color: var(--text-tertiary); transition: transform .2s ease; }

/* Sub-items: cascade indent showing hierarchy */
.sfg-items {
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
}
.src-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 28px; /* 28px cascade indent */
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .12s, color .12s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  border-left: 2px solid transparent;
}
.src-filter-option:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-left-color: var(--primary);
}
.src-filter-option.active {
  color: var(--primary);
  font-weight: 600;
  background: rgba(99,102,241,.08);
  border-left-color: var(--primary);
}

/* ══════════════════════════════════════════════════
   UNIFIED SELECT + INPUT AFFORDANCE SYSTEM
   Single source of truth. No OS arrows. No text ▾.
   Only clean SVG chevrons + Material icon affordances.
   ══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   UNIFIED SELECT / DROPDOWN — zero native OS arrows anywhere
   SVG chevron via background-image on all selects.
   Works: Chrome Android, Firefox, Safari iOS, Samsung Browser.
   ═══════════════════════════════════════════════════════════════ */

/* Step 1: Nuke every native OS arrow — highest specificity */
select,
/* ══ SELECT DROPDOWNS — Universal: no browser arrows, consistent chevron ══ */
select,
select.form-control,
.form-control[type="select"],
.form-group select,
.assignee-select,
.tbl-filter-select,
.filter-select,
.data-source-select,
#theme-select,
#user-lang,
#staff-work-type,
#priority-select,
#item-type-filter {
  -moz-appearance:    none !important;
  -webkit-appearance: none !important;
  appearance:         none !important;
  cursor: pointer;
  /* Custom chevron via background SVG — hides ALL browser chrome */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px !important;
  padding-right: 32px !important;
}
select:focus,
select.form-control:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px !important;
}

/* Step 2: Chevron SVG on ALL selects by default */
select {
  -moz-appearance:    none !important;
  -webkit-appearance: none !important;
  appearance:         none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  padding-right: 32px;
}

/* Step 3: Focus state — blue chevron */
select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  outline: none;
}

/* Step 4: .form-control selects — consistent height and padding */
select.form-control {
  padding: 10px 32px 10px 12px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
}
select.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.08) !important;
}

/* Step 5: Compact selects inside filter pills — no redundant chevron (pill has one) */
.tbl-filter-pill select,
.tbl-filter-select {
  background-color: transparent;
  background-image: none;
  border: none;
  padding-right: 4px;
  padding-left: 2px;
  appearance: none;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Step 6: Inline small selects (staff lang switcher, settings) */
select[style*="font-size:11px"],
select[style*="font-size: 11px"] {
  /* Keep inline padding but still no OS arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px 10px;
  padding-right: 22px;
}

/* Step 7: option styling (where browser allows it) */
select option {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* 2. Date/time inputs: calendar icon */
input[type="date"],
input[type="datetime-local"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 34px;
}

/* 3. Password: lock icon */
input[type="password"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
}

/* 4. Tel: phone icon */
input[type="tel"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 8.9a16 16 0 0 0 6 6l.27-.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21 17v-.08z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
}

/* 5. Input prefix icon wrapper */
.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon-wrap .input-icon {
  position: absolute;
  left: 10px;
  color: var(--text-tertiary);
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
  transition: color .15s;
}
.input-icon-wrap input,
.input-icon-wrap textarea,
.input-icon-wrap select {
  padding-left: 34px;
}
.input-icon-wrap input:focus ~ .input-icon,
.input-icon-wrap input:focus + .input-icon,
.input-icon-wrap textarea:focus ~ .input-icon,
.input-icon-wrap select:focus ~ .input-icon { color: var(--primary); }

/* 6. Form control focus ring */
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}

/* 7. Textarea */
textarea.form-control { resize: vertical; min-height: 80px; }

/* 8. Sort header icon — subtle, not blinking */
.js-sort .sort-icon { font-size: 13px; opacity: 0.4; vertical-align: middle; }
.js-sort.sorted .sort-icon,
.js-sort:hover  .sort-icon { opacity: 1; color: var(--primary); }

/* 9. Hierarchy indent */
.cascade-l1 { padding-left: 12px !important; }
.cascade-l2 { padding-left: 24px !important; border-left: 2px solid var(--border); margin-left: 8px; }
.cascade-l3 { padding-left: 36px !important; border-left: 2px solid var(--border); margin-left: 16px; }

/* 10. Checkbox — custom styled */
input[type="checkbox"].form-check {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--border); border-radius: 4px;
  background: var(--bg-secondary); cursor: pointer;
  position: relative; flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
input[type="checkbox"].form-check:checked { background: var(--primary); border-color: var(--primary); }
input[type="checkbox"].form-check:checked::after {
  content: ''; position: absolute;
  left: 4px; top: 1px; width: 5px; height: 9px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg);
}

/* Table checkboxes */
.tbl-check-hdr, .tbl-check-cell { display: flex; align-items: center; justify-content: center; }

/* Sub-group cascade */
.sub-item { position: relative; }
.sub-item::before {
  content: ''; position: absolute;
  left: 14px; top: 0; bottom: 0;
  width: 1.5px; background: var(--border); opacity: 0.5;
}

/* ══════════════════════════════════════════════════
   SINGLE DROPDOWN MANAGER — all dropdowns use these
   one open/close pattern. No per-dropdown JS handlers.
   ══════════════════════════════════════════════════ */
.apk-dropdown-panel {
  display: none;
  position: absolute;
  z-index: 1100;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  min-width: 180px;
  overflow: hidden;
}
.apk-dropdown-panel.open { display: block; }

/* Chevron indicator for dropdown triggers — SVG only, no text chars */
.apk-dropdown-trigger::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 7px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.18s ease;
  vertical-align: middle;
  flex-shrink: 0;
}
.apk-dropdown-trigger.open::after {
  transform: rotate(180deg);
}

/* Action buttons that lead to sub-flows — subtle right chevron */
.btn-nav-action::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 10px;
  margin-left: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  flex-shrink: 0;
  opacity: 0.6;
}

/* Loading state for async buttons */
.btn-loading {
  opacity: 0.65;
  pointer-events: none;
  position: relative;
}
@keyframes ellipsis-pulse {
  0%,100% { content: "…"; }
  33%     { content: "·"; }
  66%     { content: "··"; }
}

/* Mobile grid card action buttons — always visible, never overflow */

/* ═══════════════════════════════════════════════════════════════
   GROCERY CART TRACKER — persistent floating cart widget
   Always visible on mobile/tablet when cart has items.
   z-index: 1800 (above bottom-nav 2100 nope — below it so nav
   isn't covered; sits just above command-bar at 300).
   ═══════════════════════════════════════════════════════════════ */

/* Cart FAB trigger button — bottom-right, above command bar */
#apk-cart-fab {
  position: fixed;
  /* Stack left of the Smart FAB (42px + 14px gap + 14px margin) */
  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 72px + 12px);
  right: 70px;   /* smart-fab is at right:14px width:42px → leave gap */
  z-index: 1800;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  cursor: pointer;
  display: none;           /* shown by JS when cart has items */
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(16,185,129,.5);
  transition: transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Tablet+: adjust accordingly */
#apk-cart-fab:active { transform: scale(0.93); }
#apk-cart-fab.has-items { display: flex; }
#apk-cart-fab-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg-primary);
}

/* Cart panel — slides up from bottom */
/* [FLAG, not fixed this round] #apk-cart-panel / #apk-cart-items-list / #apk-cart-footer are each
   defined TWICE in this file (here, and again under the "GROCERY CART" heading further down) —
   both blocks are live (properties merge per-declaration in the cascade, they don't fully
   override each other), so this isn't currently a bug, but it's exactly the kind of duplicate
   definition CLAUDE.md §3 warns against for `.modal` — worth consolidating into one block next
   time either is touched, rather than a 3rd person adding a 3rd copy. `overflow` below is kept in
   sync with the FIX-CARTCUTOFF-01 value in the second block (overflow-y:auto) so whichever block
   a future edit lands in, they don't silently disagree. */
#apk-cart-panel {
  position: fixed;
  inset: 0;
  z-index: 3500;
  background: var(--bg-primary);
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
/* [FIX-CARTGRID-01, founder directive 2026-07-24] Replaces the old .apk-cart-inv-grid (that
   layout's own "add" column is gone — superseded by #apk-cart-addbar below, a single top-of-
   panel add input instead of a second one buried in the inventory section). This is now the
   REAL 2-column table the founder asked to restore: left = the actual order cart
   (#apk-cart-items-list, added/ready-to-buy), right = pantry stock status
   (#apk-cart-stock-list). Single stacked column (added items first, stock second) below 640px —
   items-list rows carry qty/price/vendor controls and need more room than the inventory chips
   did, hence a higher breakpoint than the old 480px inventory-only grid. */
#apk-cart-addbar { padding: 10px 16px 0; flex-shrink: 0; }
#apk-cart-addbar input {
  width: 100%; box-sizing: border-box; background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--text-primary); font-family: inherit; outline: none;
}
#apk-cart-addbar input:focus { border-color: var(--primary); }
.apk-cart-col-label {
  font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 6px;
}
#apk-cart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  padding: 4px 16px 0;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  #apk-cart-grid { grid-template-columns: 1fr; gap: 14px; }
  #apk-cart-items-col { order: 1; }
  #apk-cart-stock-col { order: 2; }
}

#apk-cart-panel.open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
}

/* Cart panel header */
#apk-cart-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-secondary);
  /* [FIX-CARTCUTOFF-01] Matches .modal-header's "position:sticky; top:0" convention — the Close
     (X) button lives here, and now that the panel itself can scroll (see #apk-cart-panel's
     overflow-y:auto above), the header must stay pinned or Close becomes unreachable mid-scroll
     on a long content list. */
  position: sticky;
  top: 0;
  z-index: 2;
}
#apk-cart-panel-header h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Cart items list */
#apk-cart-items-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  min-height: 0;
}

/* Individual cart item row */
.apk-cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.apk-cart-item:last-child { border-bottom: none; }
.apk-cart-item:active { background: var(--bg-tertiary); }
/* Left: name + price stacked */
.apk-cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Right: qty controls + delete inline */
.apk-cart-item-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.apk-cart-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apk-cart-item-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.apk-cart-qty-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.apk-cart-qty-val {
  font-size: 13px;
  font-weight: 600;
  min-width: 28px;
  text-align: center;
}
.apk-cart-item-price {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.apk-cart-item-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 4px;
  border-radius: 6px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.apk-cart-item-del:active { color: #ef4444; }

/* Cart footer */
#apk-cart-footer {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
#apk-cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}
#apk-cart-total-label { color: var(--text-secondary); }
#apk-cart-total-val { font-weight: 700; font-size: 16px; color: var(--primary); }
#apk-cart-vendor-btns {
  /* Container: block so .apk-cart-action-row can scroll freely inside it */
  display: block;
}
.apk-cart-vendor-btn {
  padding: 10px 8px;
  border-radius: 10px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
}

/* [FIX-CARTBOTREMOVE-01, founder directive 2026-07-24] #apk-cart-ai-bar / #apk-cart-ai-input
   rules removed — that box no longer exists in the DOM (see the markup comment above
   #apk-cart-addbar in app.js). #apk-cart-addbar's own rules are with the rest of the
   FIX-CARTGRID-01 block above (search this file for that tag). */

/* Cart overlay backdrop */
#apk-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 3499;
  background: rgba(0,0,0,.55);
  display: none;
}
#apk-cart-overlay.open { display: block; }

/* Desktop: cart panel becomes a side drawer */


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT — ALL BREAKPOINTS CONSOLIDATED
   Each breakpoint defined exactly once. Mobile last = wins the cascade.
   ─────────────────────────────────────────────────────────────────────────
   TO ADD A RULE: find the right bucket below and append inside that block.
   DO NOT add @media blocks anywhere else in this file.
═══════════════════════════════════════════════════════════════════════════ */


/* ── LIGHT MODE OVERRIDES ────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg-primary: #f8fafc; --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9; --bg-hover: #e2e8f0;
    --text-primary: #0f172a; --text-secondary: #475569;
    --text-tertiary: #64748b; --border: #e2e8f0; --border-light: #cbd5e1;
    --surface-overlay: rgba(248,250,252,0.92);
    --surface-overlay-hv: rgba(248,250,252,0.95);
    --hint-bg: rgba(241,245,249,0.8);
    --hint-title-color: var(--primary);
  }
}

/* ── TINY PHONES (≤360px) ────────────────────────────────────────── */
@media (max-width: 360px) {
  .hss-val { font-size: 16px; } .hss-lbl { font-size: 11px; }
}

/* ── SMALL PHONES (≤480px) ───────────────────────────────────────── */
@media (max-width: 480px) {
  .swipe-container, .swipe-card { height:350px; }
  .nav-arrow, .swipe-arrow { width:40px; height:40px; }
}

/* ── PHONES AND SMALL TABLETS (≤768px) ───────────────────────────── */
@media (max-width: 768px) {
  .sidebar          { width:52px; }
  .main-content     { margin-left:52px; padding:var(--spacing-md); }
  .command-bar      { left:calc(52px + 12px); right:12px; }
  .nav-label        { font-size: 11px; }
  .header-filters   { display:none; }
  /* conversation-messages: fluid, no max-height — scrolls via view-panel */
  .message-content  { max-width:85%; }
  /* DO NOT override stat-grid here — handled by the precise tablet/mobile breakpoints below */
  .settings-grid    { grid-template-columns:1fr; }
  .sample-commands-slider, .quick-actions-slider { right:var(--spacing-sm); max-width:calc(100vw - 32px); }
  .slider-toggle    { right:var(--spacing-sm); }
  .task-section     { padding:var(--spacing-md); }
  .staff-tasks-container { gap:var(--spacing-md); }
  .modal            { padding:8px; }
  .modal-content    { max-height:95vh; }
  .modal-body       { padding:16px; }
  .modal-header, .modal-footer { padding:12px 16px; }
}

/* ── TOUCH DEVICES — no hover ────────────────────────────────────── */
@media (hover: none) {
  .table-row .col-actions { opacity:1; }
}

/* ── TABLET AND ABOVE (≥641px) ───────────────────────────────────── */
@media (min-width: 641px) {
  /* Clear command bar above system chrome */
  .conversation-messages { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 40px); }
  .dot-fab { display: none; }
  .planner-categories {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .staff-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .dot-fab,
  #dot-fab-backdrop { display: none; }
  :root { --nav-w:  52px; }
  .nav-hamburger {
    display: inline-flex;  /* shows on tablet (Firefox) + desktop (Chrome) */
  }
  #home-stat-row { grid-template-columns: repeat(4,1fr); gap: 12px; }
  #apk-cart-fab {
  bottom: calc(12px + 52px + 14px);
  right: 76px;
  }
  /* Cart: full viewport on all devices — never a side drawer.
     [FIX-CARTBOTBOX-02 / 2026-07-22 revert] Restored to true 'inset:0' — the previous round's
     bottom-gap-for-command-bar approach was reverted per founder feedback (see has-modal note
     above); Cart is full-screen again with its own input bar instead. */
  #apk-cart-panel {
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  transform: translateY(100%) !important;
  }
  #apk-cart-panel.open { transform: translateY(0) !important; }
  #apk-cart-fab {
  bottom: 80px;
  }
}

/* ── TABLET 600–1024px ───────────────────────────────────────────── */
@media (min-width: 600px) and (max-width: 1024px) {
  .settings-layout,
  [id^="settings-modal"] .modal-content {
    max-width: 680px;
  }
  /* NOTE: sidebar width on tablet is 52px (icon rail) — DO NOT override here.
     Full 180px sidebar only applies on desktop (>1024px) or when .expanded */
}

/* ── TABLET (641px–1024px) ───────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  #nav-container {
    position: fixed;
    top: var(--hdr-h); left: 0; bottom: 0;
    width: 52px;
    min-width: 52px;
    transform: translateX(0);
    overflow: hidden;
    z-index: 200;
    transition: width .22s cubic-bezier(.4,0,.2,1);
  }
  body.sidebar-open #nav-container {
    width: 240px;
    min-width: 240px;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,.4);
    z-index: 600;
  }
  body.sidebar-open #nav-container .nav-label {
    display: inline !important; visibility: visible !important;
    opacity: 1 !important; width: auto !important; overflow: visible !important;
  }
  body.sidebar-open::before {
    content: ''; position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 199;  /* below nav (600) */
    pointer-events: auto;
  }
  /* Sidebar defaults collapsed (52px) — expanded on demand */
  .command-bar { left: calc(52px + 12px); right: 12px; }

  /* Stat grid: 4 columns landscape, 2 portrait */
  .stat-grid, .stats-grid, #home-stat-row {
    grid-template-columns: repeat(4, 1fr);
  }
  @media (orientation: portrait) {
    .stat-grid, .stats-grid, #home-stat-row {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .modal-content { max-width: 520px; border-radius: 16px; }
  .sidebar {
    width: 52px;
    transition: width .22s cubic-bezier(.4,0,.2,1);
  }
  /* When expanded on tablet (JS adds .expanded), show overlay-style panel */
  .sidebar.expanded {
    width: 200px;
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
    /* Overlay — don't push content */
    position: fixed;
    z-index: 300;
  }
  .sidebar.expanded .nav-label {
    display: inline;
    opacity: 1;
  }
  .main-content {
    margin-left: 52px;
    padding: var(--spacing-lg);
  }
  .command-bar {
    left: calc(52px + 12px);
    right: 12px;
  }
  /* Overlay backdrop when sidebar expanded on tablet */
  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 299;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  body.sidebar-open .sidebar-overlay { display: block; }
  .header-filters {
    max-width: 240px;
  }
  .avatar-meta {
    display: none;
  }
  .avatar-btn {
    padding: 6px;
    border-radius: 50%;
  }
  .sidebar-expand-btn {
    display: flex;
  }
  .main-content, #apk-main, #main-content {
    margin-left: 52px;
    padding: 20px 16px;
    padding-bottom: 100px;
  }
  .command-bar, #command-bar, #apk-chat-bar, .chat-bar {
    left: calc(52px + var(--cmd-pr));
    /* Tablet safe-area: clears Android gesture nav bar */
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .hdr-btn-label { display: none; }
  #auth-text { display: none; }
  /* Tablet: show both name AND role */
  #user-role {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .4px;
  }
  #user-name {
    display: block;
    max-width: 80px;
    font-size: 12px;
    font-weight: 600;
  }
  .user-info  { display: flex; flex-direction: column; }
  .user-profile .material-symbols-outlined { font-size: 24px; }
  #nav-container:not(.expanded) { width: 52px; }
}

/* ── DESKTOP (≥1025px) ───────────────────────────────────────────── */
@media (min-width: 1025px) {
  #nav-container {
    position: fixed;
    top: var(--hdr-h); left: 0; bottom: 0;
    width: 52px;
    min-width: 52px;
    transform: translateX(0);
    overflow: hidden;
    z-index: 200;
    transition: width .22s cubic-bezier(.4,0,.2,1);
  }
  body.sidebar-open #nav-container {
    width: 240px; min-width: 240px;
    overflow-y: auto;
    box-shadow: 2px 0 16px rgba(0,0,0,.2);
    z-index: 600;  /* above JS backdrop (199) */
  }
  body.sidebar-open #nav-container .nav-label,
  body.sidebar-open .sidebar .nav-label {
    display: inline !important; visibility: visible !important;
    opacity: 1 !important; width: auto !important; overflow: visible !important;
  }
  .sidebar { width: 52px; }
  .main-content { margin-left: 52px; }
  .command-bar  { left: calc(52px + 12px); }
  body.sidebar-open .sidebar { width: 220px; }
  body.sidebar-open .main-content { margin-left: 220px !important; }
  body.sidebar-open .command-bar  { left: calc(220px + 12px) !important; }
  body:not(.sidebar-open) .sidebar .nav-label { opacity: 0; width: 0; overflow: hidden; }

  /* Collapsed desktop sidebar: shrinks to icon-only rail */
  body.nav-collapsed .sidebar {
    width: 56px;
    overflow: hidden;
  }
  body.nav-collapsed .main-content {
    margin-left: 56px;
  }
  body.nav-collapsed .command-bar {
    left: calc(56px + 12px);
  }
  body.nav-collapsed .sidebar .nav-label {
    opacity: 0 !important;
    width: 0;
    overflow: hidden;
    pointer-events: none !important;
  }
  body.nav-collapsed .sidebar .nav-btn {
    justify-content: center;
    padding: 10px 0;
  }

  #home-stat-row { grid-template-columns: repeat(4, 1fr) !important; }
  .stat-grid, .stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .main-content { min-width: 0; overflow-x: hidden; }
  .modal-content { max-width: 640px; }
  :root { --nav-w:  52px; }
  .stat-grid { grid-template-columns: repeat(4,1fr); }
  #header-admin-btn {
    width: auto;
    padding: 0 10px;
    gap: 4px;
  }
  #nav-container { width: 160px; transform: none; }
}

/* ── LANDSCAPE COMPACT (≤600px height) ───────────────────────────── */
@media (orientation: landscape) and (max-height: 600px) {
  .dot-fab {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    right: max(10px, env(safe-area-inset-right, 10px));
  }
  .dot-fab-trigger { width: 32px; height: 32px; }
  .dot-fab-item { height: 30px !important; font-size: 11px !important; }
}

/* ── LANDSCAPE — all devices ─────────────────────────────────────── */
@media (orientation: landscape) {
  #fab-group, .fab-group, .dot-fab {
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  right: max(12px, env(safe-area-inset-right, 12px));
  }
  .fab-primary { width: 44px; height: 44px; }
  .fab-secondary { width: 36px; height: 36px; }
}

/* ── LANDSCAPE PHONE (≤430px height) ─────────────────────────────── */
@media (orientation: landscape) and (max-height: 430px) {
  /* Compact header — keep it to one row, reduce padding */
  .header, .app-header {
  padding: 0 8px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  }
  /* [FIX-HDRSSOT-01] --hdr-h itself moved to app-agentic-os.css (the declared token SSOT) so
     this compact short-landscape value actually takes effect — see that file's matching
     @media (orientation:landscape) and (max-height:430px) block right after its base :root. A
     copy left here would be silently shadowed (app-agentic-os.css loads after app.css). */

  /* Hide non-essential header elements */
  .header-filters,
  .score-chip,
  .header-actions-group,
  .settings-btn,
  .tagline,
  .hide-on-mobile {
  display: none !important;
  }

  /* Sidebar: hidden, slides in on hamburger tap */
  nav#nav-container {
  position: fixed;
  top: 44px;
  bottom: 0;
  transform: translateX(-100%);
  width: 220px;
  z-index: 600;
  }
  body.sidebar-open nav#nav-container {
  transform: translateX(0);
  box-shadow: 4px 0 20px rgba(0,0,0,.4);
  }
  /* Always show hamburger to open hidden nav */
  .nav-hamburger { display: inline-flex !important; }

  /* Bottom nav: hide — too tall for landscape phone */
  #bottom-nav { display: none !important; }

  /* Main content: full width, minimal padding, clears slim command bar */
  .main-content, #apk-main, #main-content {
  margin-left: 0;
  padding: 6px 8px calc(52px + env(safe-area-inset-bottom, 0px) + 8px);
  margin-top: 44px;
  }

  /* Command bar: slimmer, sits at very bottom */
  .command-bar, #command-bar, #apk-chat-bar {
  left: 8px;
  right: 8px;
  bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  padding: 4px 8px;
  border-radius: 12px;
  }

  /* Stat strip: 4 columns to stay compact */
  .home-stat-strip, #home-stat-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  /* ── Modals in landscape phone: centred dialog, NOT bottom-sheet ── */
  /* Bottom-sheet wastes the horizontal space phones have in landscape  */
  .modal {
    align-items: center;
    justify-content: center;
    padding: 8px;
  }
  .modal-content {
    /* Fill most of the limited vertical space */
    height: 90dvh;
    max-height: 90dvh;
    width: min(96vw, 560px);
    border-radius: 12px;
    /* Must be flex-column so header+body+footer stack correctly */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Compact modal header — every px counts at 430px height */
  .modal-header {
    padding: 8px 14px;
    flex-shrink: 0;
  }
  .modal-header h3 { font-size: 14px; }
  /* Modal body: fills remaining space and scrolls */
  .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 14px;
    min-height: 0;
  }

  /* ── Settings modal in landscape phone ────────────────────────── */
  /* Switch to side-by-side: narrow tab strip left, content scrolls right */
  #settings-modal .modal-content,
  .modal-lg .modal-content,
  .modal-content.modal-lg {
    height: 90dvh;
    max-height: 90dvh;
    width: min(96vw, 600px);
  }
  #settings-modal .modal-body {
    overflow: hidden;   /* shell handles scroll */
  }
  #settings-shell {
    flex-direction: row; /* side-by-side even on landscape phone */
    height: 100%;
    min-height: 0;
  }
  /* Nav strip: narrow icon+label column */
  #settings-nav {
    width: 110px;
    min-width: 110px;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--border);
    border-bottom: none;
    /* Compact tab buttons */
    padding: 4px 0;
  }
  #settings-nav button,
  #settings-nav .settings-tab {
    font-size: 11px;
    padding: 6px 8px;
  }
  /* Content panel: compact padding so form controls fit in ~260px height */
  #settings-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 10px;
    min-height: 0;
  }
  /* Compact form elements inside settings on landscape phone */
  #settings-content .form-group { margin-bottom: 10px; }
  #settings-content .form-group label { font-size: 11px; margin-bottom: 3px; }
  #settings-content .form-control { padding: 6px 10px; font-size: 13px; }
  #settings-content h2, #settings-content .settings-section-title {
    font-size: 13px; margin-bottom: 10px; padding-bottom: 6px;
  }

  /* Compact modal footer + header in landscape so content gets more room */
  .modal-header { padding: 6px 12px !important; min-height: 40px !important; }
  .modal-footer { padding: 6px 12px !important; min-height: 44px !important; }

  /* ── Planner / other tall modals ───────────────────────────────── */
  #planner-modal .modal-content {
    height: 90dvh;
    max-height: 90dvh;
  }
  #planner-modal .modal-body {
    padding: 8px 10px;
  }

  /* ── Form modals: compact field spacing ────────────────────────── */
  .modal-body .form-group { margin-bottom: 8px; }
  .modal-body .form-group label { font-size: 11px; margin-bottom: 2px; }
  .modal-body .form-control { padding: 7px 10px; font-size: 13px; }
}

/* ── LANDSCAPE TABLET (641px+, ≤700px height) ────────────────────── */
@media (orientation: landscape) and (min-width: 641px) and (max-height: 700px) {
  /* Keep 52px icon rail — don't hide nav */
  nav#nav-container {
  width: 52px;
  transform: none;
  }

  /* Slim the header slightly */
  .header, .app-header {
  padding: 0 10px;
  }

  /* Hide header filters to save vertical real estate */
  .header-filters { display: none !important; }

  /* Main content: account for 52px rail, compact padding */
  .main-content, #apk-main, #main-content {
  margin-left: 52px;
  padding: 8px 12px calc(60px + env(safe-area-inset-bottom, 0px));
  }

  /* Command bar sits lower with less gap */
  .command-bar, #command-bar, #apk-chat-bar {
  left: calc(52px + 10px);
  right: 10px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /* 4-column stat strip */
  .home-stat-strip, #home-stat-row,
  .stat-grid, .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── Modals in landscape tablet: centred, taller than phone ──── */
  .modal {
    align-items: center;
    justify-content: center;
    padding: 12px;
  }
  .modal-content {
    height: 88dvh;
    max-height: 88dvh;
    width: min(94vw, 680px);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .modal-header {
    padding: 10px 16px;
    flex-shrink: 0;
  }
  .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 16px;
    min-height: 0;
  }

  /* Settings: side-by-side shell, slightly more room than phone */
  #settings-modal .modal-content,
  .modal-lg .modal-content,
  .modal-content.modal-lg {
    height: 88dvh;
    max-height: 88dvh;
    width: min(94vw, 720px);
  }
  #settings-modal .modal-body { overflow: hidden; }
  #settings-shell {
    flex-direction: row;
    height: 100%;
    min-height: 0;
  }
  #settings-nav {
    width: 140px;
    min-width: 140px;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--border);
    border-bottom: none;
  }
  #settings-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 16px;
    min-height: 0;
  }
}

/* ── MOBILE (≤640px) — last for cascade priority ─────────────────── */
@media (max-width: 640px) {
  .robot-icon     { font-size: 30px; }
  .apk-logo-svg   { width:30px; height:30px; }
  .logo           { font-size: 18px; }
  .tagline        { display: none; }
  .apk-beta-tag   { font-size: 11px; padding:2px 4px; margin-left:4px; }
  .logo-container { gap: 6px; }
  .avatar-meta, .avatar-chevron { display:none; }
  .avatar-btn { padding:6px; border-radius:50%; }
  .modal-content { max-height: 88dvh; border-radius: var(--radius-xl); }
  .modal { align-items: center; } /* [r102] centered, not bottom-sheet */
  .modal-body { padding: 12px 14px; }
  .conversation-messages {
    padding-bottom: calc(var(--apk-chrome-bottom) + 32px);
  }
  /* MOBILE NAV: transform-slide — no display:none/flex (Safari/Chrome fix) */
  #nav-container {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px; min-width: 280px;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
    will-change: transform;
    z-index: 600;
    overflow-y: auto; overflow-x: hidden;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    pointer-events: none; visibility: hidden;
  }
  body.sidebar-open #nav-container {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.55);
    pointer-events: auto; visibility: visible;
  }
  body.sidebar-open #nav-container .nav-label {
    display: inline !important; visibility: visible !important;
    opacity: 1 !important; width: auto !important; overflow: visible !important;
  }
  /* Hamburger: HIDDEN in portrait mobile — bottom-nav handles navigation.
     Only shown in landscape-short block (where bottom-nav is absent). */
  /* bottom-nav display controlled exclusively by JS — no CSS rule here */

  /* Command bar: always visible, clears bottom-nav + safe-area */
  .command-bar, #command-bar, #apk-chat-bar {
    left:   8px;
    right:  8px;
    /* 56px bottom-nav + safe-area + 8px breathing room */
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px);
    border-radius: 18px;
    z-index: 2050;    /* above bottom-nav(2100)? No — below it is fine; nav taps through */
    padding: 6px 10px;
    box-shadow: 0 -2px 16px rgba(0,0,0,.25), 0 4px 24px rgba(0,0,0,.2);
  }
  .command-bar .voice-btn { width: 34px; height: 34px; }
  .command-bar .send-btn  { width: 36px; height: 36px; border-radius: 12px; }

  /* View panel content: uses --apk-chrome-bottom (body.show-bn sets correct mobile value) */
  .view-panel     {
    padding-bottom: var(--apk-chrome-bottom);
  }

  /* Header: compact */
  .header-tagline,
  .header-subtitle,
  #header-smart-score-btn .score-label { display: none; }

  .app-header,
  #app-header,
  .header {
    padding: 0 10px;
    height: 52px;
    min-height: 52px;
  }

  /* Header left: tighter gap */
  .header-left { gap: 6px; }

  /* Header right: no overflow clip so avatar is never hidden */
  .header-right {
    gap: 4px;
    flex-shrink: 0;
    overflow: visible;
    max-width: none;
  }
  /* Mobile header: Logo | Map | Cal | Avatar  — exactly 4 items, always fits */
  #header-mindmap-btn,
  #header-calendar-btn { display: flex !important; }

  /* Score chip and settings hidden — bell stays as gateway to signals+settings */
  .score-chip, #header-smart-score-btn { display: none !important; }
  #header-settings-btn, #header-filter-btn { display: none !important; }
  /* Bell stays visible — opens signals+notifications+settings shortcut */
  #notif-bell-btn { display: flex !important; }

  /* Avatar: P0 — ALWAYS visible, never clipped, always rightmost */
  #apk-user-avatar,
  body.authenticated #apk-user-avatar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    order: 999 !important;
    margin-left: 6px !important;
    z-index: 100 !important;
  }

  /* Admin label hidden on mobile — icon only */
  #header-admin-btn .hdr-btn-label { display: none; }
  /* Admin btn: hide from header on phone — accessible via Settings */
  #header-admin-btn { display: none !important; }

  /* All action buttons compact square */
  #header-actions-group button, #header-admin-btn {
    height: 32px; min-height: 32px; width: 32px;
    padding: 0; flex-shrink: 0;
  }

  /* Logout always reachable — icon only, never clipped */
  #auth-toggle {
    width: 34px !important; padding: 0 !important;
    flex-shrink: 0 !important;
  }
  #auth-toggle #auth-text,
  #auth-toggle .auth-text { display: none !important; }

  /* Header filters: scrollable on mobile */
  .header-filters {
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .header-filters::-webkit-scrollbar { display: none; }
  .header-filters .filter-btn,
  .header-filters select {
    font-size: 11px;
    padding: 4px 8px;
    white-space: nowrap;
  }

  /* FABs: tighter margins on mobile, above bottom nav + chat bar */
  #fab-group, .fab-group {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    right: 10px;
  }
  .fab-primary { width: 48px; height: 48px; }
  .fab-secondary { width: 40px; height: 40px; }
  /* Slider: full-width on small screens */
  .sample-commands-slider, .quick-actions-slider {
    right: 10px;
    width: calc(100vw - 20px);
  }
  /* Modals: full-screen bottom sheet */
  .modal-content {
    border-radius: 20px 20px 0 0;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    max-height: 92dvh;
    overflow-y: auto;
    transform: none;
  }

  /* Settings tabs: horizontal scroll */
  .settings-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .settings-tabs::-webkit-scrollbar { display: none; }

  /* Tables: card layout on mobile */
  .data-table thead { display: none; }
  .data-table tbody tr {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 8px;
    padding: 10px 12px;
    background: var(--bg-secondary);
  }
  .data-table tbody td {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border: none;
    font-size: 13px;
  }
  .data-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
  }

  /* Stat grid: 2 columns */
  .stat-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Home welcome card: full width */
  #home-welcome-card { padding: 8px 0; }
  #home-stat-row.home-stat-strip { grid-template-columns: repeat(4, 1fr); }

  /* Notification panel: full width bottom drawer */
  #apk-notif-panel {
    left: 0; right: 0;
    top: auto; bottom: 56px;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-height: 70dvh;
  }
  .command-bar {
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
  }
  .main-content, #apk-main, #main-content {
    margin-left: 0;
    /* 56px nav + safe-area + ~72px command-bar + 24px breathing room */
    padding-bottom: calc(56px + env(safe-area-inset-bottom,0px) + 96px);
  }
  .command-bar, #command-bar, #apk-chat-bar, .chat-bar {
    left: var(--cmd-pr);
    bottom: calc(56px + var(--cmd-pb));
  }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  #home-stat-row { grid-template-columns: repeat(2,1fr); gap: 8px; }
  #auth-toggle .auth-text, #auth-text { display: none; }
  #auth-toggle { padding: 0 8px; }
  #user-name, #user-role { display: none; }
  .modal { padding: var(--spacing-md); align-items: center; } /* [r102] centered */
  .modal-content {
    max-height: 92dvh;
    max-height: 92vh ;
    max-height: 92dvh;
    border-radius: var(--radius-xl);
    width: 100%; max-width: 460px;
  }
  /* Portrait settings: force column (tab strip top + content below) */
  #settings-modal .modal-content {
    height: 92dvh !important; height: 92vh !important;
    max-height: 92dvh !important;
    border-radius: var(--radius-xl) !important;
    width: 100% !important; max-width: 560px !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important;
  }
  #settings-modal .modal-body {
    flex: 1 !important; overflow: hidden !important;
    padding: 0 !important; min-height: 0 !important;
  }
  #settings-shell {
    flex-direction: column !important;
    height: 100% !important; overflow: hidden !important;
  }
  #settings-nav {
    width: 100% !important; flex-direction: row !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 4px 8px !important; gap: 4px !important;
    flex-shrink: 0 !important; min-height: 44px !important; max-height: 44px !important;
    scrollbar-width: none !important;
  }
  #settings-nav::-webkit-scrollbar { display: none !important; }
  #settings-content {
    flex: 1 !important; overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 14px !important; min-height: 0 !important;
  }
  /* Nav: transform-hide (Safari fix) */
  #nav-container { transform: translateX(-100%); pointer-events: none; visibility: hidden; }
  .sidebar, #nav-main { display: none; }

  /* Sidebar overlay when hamburger opened */
  body.sidebar-open #nav-container {
    transform: translateX(0);
    pointer-events: auto; visibility: visible;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }
  body.sidebar-open #nav-container .nav-label,
  body.sidebar-open .sidebar .nav-label { display: inline !important; opacity:1 !important; width:auto !important; }
  /* Main content: full width, no left margin */
  .main-content, #apk-main, #main-content {
    margin-left: 0;
    padding: 4px 8px 0;
  }

  /* Compact header on mobile */
  .app-header, #app-header {
    padding: 0 8px;
    height: 52px;
  }
  .header-tagline, .header-subtitle, #header-smart-score-btn .score-label,
  .header-filters { display: none; }
  .avatar-meta, .user-name { display: none; }
  .user-role { display: none; }

  /* Command bar: handled in main mobile z-stack above */

  /* Hide FABs on mobile — use bottom nav "More" */
  .apk-fab-group { display: none; }
  .stats-fab, .help-fab { display: none; }

  /* View panels: handled in main mobile z-stack section above */
  .view-panel.active { padding: 8px 0 0 !important; }
  .view-header { padding: 6px 0 10px; flex-wrap: wrap; gap: 6px; }
  .view-header h2 { font-size: 16px; }
  .btn-primary { font-size: 12px; padding: 7px 12px; }

  /* Stat strip: compact on mobile */
  .home-stat-strip { gap: 5px; margin-bottom: 8px; }
  .hss-pill { padding: 7px 4px 6px; }
  .hss-val { font-size: 16px; }
  .hss-lbl { font-size: 11px; }

  /* Conversation scroll — handled by the dedicated @media rule above */

  /* Modals: full screen bottom sheet on mobile */
  .modal { align-items: center; } /* [r102] centered */
  .modal-content {
    border-radius: var(--radius-xl);
    max-height: calc(92dvh - 56px);
    margin: 0 auto;
  }

  /* ══════════════════════════════════════════════════════
   MOBILE CARD LAYOUT — chores & reminders
   ≤640px: table → card, title always prominent
   ══════════════════════════════════════════════════════ */
  /* Hide desktop-only columns */
  .tbl-thead-chores,
  .tbl-thead-reminders { display: none; }

  /* [FIX-r80] Checkbox WAS display:none on mobile with no alternative selection UI, so mobile
     users could not select anything (clicking a display:none input does nothing). Show the row
     checkbox as a tappable control in the card's top-left; keep the select-all header hidden. */
  /* [FIX-P1-8] Was: `.tbl-check-hdr { display:none }` here, which — because it's a grid-cell
     CHILD of the #chores-thead/#reminders-thead div that's already display:none on mobile via
     the rule above — was pure dead weight layered on an already-hidden element. The actual bug
     this masked: there was no mobile "select all" affordance at all, since hiding the whole
     header row hides the select-all checkbox with it, and row checkboxes alone can't select
     everything in one tap. Fix re-shows ONLY the checkbox cell (same #chores-select-all /
     #reminders-select-all elements, same existing onchange="_bulkToggleAll(...)" handler —
     zero JS change, zero new IDs) while keeping the other 6 header cells hidden, so mobile
     gets a small "Select all" row instead of the full desktop header grid. */
  .tbl-thead-chores, .tbl-thead-reminders {
    display: flex !important; background: transparent; border: none;
    padding: 4px 12px 6px; justify-content: flex-start;
  }
  .tbl-thead-chores > *:not(.tbl-check-hdr),
  .tbl-thead-reminders > *:not(.tbl-check-hdr) { display: none; }
  .tbl-check-hdr {
    display: flex !important; align-items: center; gap: 6px;
    text-transform: none; letter-spacing: normal;
  }
  .tbl-check-hdr::after {
    content: "Select all"; font-size: 11px; font-weight: 600; color: var(--text-secondary);
  }
  .tbl-check-cell {
    display: flex !important;
    position: absolute;
    top: 10px; left: 10px;
    width: 30px; height: 30px;
    z-index: 3;
    align-items: center; justify-content: center;
  }
  .tbl-check-cell input[type=checkbox] {
    width: 22px; height: 22px;
    accent-color: var(--primary, #6366f1);
    -webkit-appearance: auto; appearance: auto;
  }
  /* make room for the checkbox so it doesn't overlap the card title */
  #chores-tbody .table-row .cell-title,
  #reminders-tbody .table-row .cell-title { padding-left: 34px; }

  /* Each row = a card */
  #chores-tbody .table-row,
  #reminders-tbody .table-row,
  #reminders-tbody .reminder-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
  }

  /* Title row: always first, full-width, prominent */
  #chores-tbody .table-row .cell-title,
  #reminders-tbody .table-row .cell-title {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-right: 0;
    margin-bottom: 6px;
  }
  #chores-tbody .table-row .cell-title-text,
  #reminders-tbody .table-row .cell-title-text {
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.35;
    color: var(--text-primary);
  }

  /* Meta row: due + category + status inline */
  #chores-tbody .table-row .cell-due,
  #reminders-tbody .table-row .cell-due {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    gap: 3px;
  }
  #chores-tbody .table-row .cell-assignee,
  #reminders-tbody .table-row .cell-assignee {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
  }

  /* Type + status badges: stay inline */
  #chores-tbody .table-row .type-badge,
  #reminders-tbody .table-row .type-badge {
    font-size: 11px;
    padding: 1px 6px;
  }
  #chores-tbody .table-row .status-badge,
  #reminders-tbody .table-row .status-badge {
    font-size: 11px;
    padding: 2px 8px;
    min-width: 52px;
  }

  /* Meta info row: flex-wrap under the title */
  #chores-tbody .table-row > div:not(.cell-title):not(.col-actions):not(.tbl-check-cell),
  #reminders-tbody .table-row > div:not(.cell-title):not(.col-actions):not(.tbl-check-cell) {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* Wrap all non-title, non-action cells into one visual row */
  #chores-tbody .table-row::after,
  #reminders-tbody .table-row::after {
    content: '';
    display: block;
    clear: both;
  }

  /* Actions: compact row of icon buttons at bottom */
  #chores-tbody .table-row .col-actions,
  #reminders-tbody .table-row .col-actions {
    display: flex;
    flex-direction: row;
    gap: 6px;
    justify-content: flex-end;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
    opacity: 1;
  }
  #chores-tbody .table-row .col-actions .btn-icon,
  #reminders-tbody .table-row .col-actions .btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
  }

  /* Overdue: left accent bar */
  #chores-tbody .table-row.overdue,
  #reminders-tbody .table-row.overdue {
    border-left: 3px solid var(--error);
  }

  /* Filter bar: stack on mobile */
  #chores-filter-bar,
  #reminders-filter-bar {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
  }
  .table-filter-bar .tbl-filter-pill { width: 100%; }
  .table-filter-bar .tbl-filter-pill select,
  .table-filter-bar .tbl-filter-pill label { width: 100%; }
  /* [FIX-CHORESFILTERALIGN-01 / founder follow-up, 2026-07-23] The Type filter's trigger is a
     real <button> (_buildGroupedFilterPill), not a native <select> — Time/Status stay plain
     <select>s, which several mobile browsers (confirmed: Android Chrome) center their selected-
     option text in once the element is stretched full-width, even though .tbl-filter-select's own
     padding is left-aligned. The button never got that same centering, so it read as "the Type
     filter is misaligned" next to the other two once they all stack full-width on mobile. Center
     the button's own content explicitly here instead of relying on inconsistent native rendering. */
  .table-filter-bar .tbl-filter-pill > button {
    width: 100%;
    justify-content: center;
  }

  /* Count + export row */
  #chores-filter-bar > div:last-child,
  #reminders-filter-bar > div:last-child {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  /* Remove per-page selector on mobile — just show all */
  #chores-per-page,
  #reminders-per-page { display: none; }
  /* Main content: full width, no nav margin */
  .main-content, #apk-main {
    margin-left: 0;
    padding: 10px 10px 0;
  }

  /* Stat strip: compact on phone */
  .home-stat-strip { gap: 5px; margin-bottom: 8px; }
  .hss-pill { padding: 8px 4px 6px; }
  .hss-val  { font-size: 17px; }
  .hss-lbl  { font-size: 11px; }

  /* Action bar chips on mobile */
  .apk-action-chip { padding: 6px 8px; }
  .apk-chip-label  { display: none; }

  /* Command bar: thinner on mobile */
  .command-bar {
    padding: 5px 8px;
  }
  .command-input {
    font-size: 14px;
    padding: 6px 8px;
  }

  /* View header: compact */
  .view-header h2 { font-size: 18px; }
  .view-header { margin-bottom: 10px; }

  /* Modals: full-screen on phone */
  .modal-content {
    max-height: 94dvh;
    border-radius: var(--radius-xl);
  }
  .modal { align-items: center; } /* [r102] centered */
  /* Nav: transform-hide (Safari fix) */
  #nav-container { transform: translateX(-100%); pointer-events: none; visibility: hidden; }
  body.sidebar-open #nav-container {
    transform: translateX(0); pointer-events: auto; visibility: visible;
    box-shadow: 6px 0 24px rgba(0,0,0,0.4);
  }
  body.sidebar-open .main-content,
  body.sidebar-open #apk-main {
    margin-left: 0;  /* no push — overlay mode */
  }
  #settings-nav {
  min-height: 50px;
  max-height: 50px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none !important;
  }
  #settings-nav::-webkit-scrollbar { display: none !important; }
  #settings-shell { flex-direction: column; }
  #settings-content {
  padding: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch !important;
  }
  .task-card,
  .chore-card,
  [class*="task-row"],
  [class*="chore-row"] {
  overflow: visible;
  }
  .task-card .action-buttons,
  .chore-card .action-buttons,
  [class*="col-actions"] {
  flex-shrink: 0;
  min-width: 56px;
  overflow: visible;
  }
  /* Bot messages: never overflow viewport on mobile */
  .message-bot > div,
  .bot-message .message-content {
  max-width: calc(100vw - 64px);
  word-break: break-word;
  }
  /* Quick action chips row: scroll horizontally, never clip */
  #home-welcome-card > div,
  .quick-chips-row {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none;
  flex-wrap: nowrap;
  }
  .quick-chips-row::-webkit-scrollbar,
  #home-welcome-card > div::-webkit-scrollbar { display: none; }
}
/* ══════════════════════════════════════════════════════════════════
   APUNKAI PATCH v0.0.1-patch13
   New: Smart Home Calendar, User Avatar, Vendor Copy UI,
        Staff-mode isolation, More-menu positioning fix,
        Header cleanup, Mobile adaptive improvements
   ══════════════════════════════════════════════════════════════════ */

/* ── User avatar initials (replaces blue account_circle) ── */
#apk-user-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--primary,#6366f1);color:#fff;
  font-size:12px;font-weight:700;
  display:none;align-items:center;justify-content:center;
  cursor:pointer;border:none;flex-shrink:0;
  transition:opacity .15s,transform .15s;
  -webkit-tap-highlight-color:transparent
}
body.authenticated #apk-user-avatar{display:flex}
#apk-user-avatar:hover{opacity:.85;transform:scale(1.08)}

/* Remove the old redundant settings icon that was duplicated in header */
.settings-btn.hide-on-mobile,
#settings-dots{ display:none!important }

/* ── Header icon btn (mindmap + calendar) ── */
.hdr-icon-btn{
  background:none;border:none;cursor:pointer;padding:0;
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);transition:background .15s,color .15s;
  flex-shrink:0;position:relative;-webkit-tap-highlight-color:transparent
}
.hdr-icon-btn:hover,.hdr-icon-btn:focus-visible{
  background:rgba(99,102,241,.1);color:var(--primary,#6366f1)
}
@media(max-width:479px){.hdr-icon-btn{width:32px;height:32px}}

/* ── Staff entry view — iron-clad chrome hiding ── */
body.staff-mode .header,
body.staff-mode #nav-container,
body.staff-mode #bottom-nav,
body.staff-mode .command-bar,
body.staff-mode #apk-smart-fab,
body.staff-mode #apk-cart-fab,
body.staff-mode .dot-fab,
body.staff-mode #dot-fab,
body.staff-mode #header-mindmap-btn,
body.staff-mode #header-calendar-btn,
body.staff-mode #header-actions-group,
body.staff-mode #apk-user-avatar{ display:none!important }
body.staff-mode #main-content{
  padding-top:0!important;
  margin-left:0!important;
  padding-bottom:0!important
}
body.staff-mode #view-staff{
  display:block!important;
  padding:0!important;
  min-height:100dvh
}

/* ── More menu — clear of command bar on all devices ── */
#apk-more-menu{
  /* Always sits above command bar (~72px) + bottom-nav (56px) + safe area */
  bottom:calc(56px + env(safe-area-inset-bottom,0px) + 76px)!important;
}
@media(min-width:641px){
  /* Tablet/desktop: no bottom nav, just clear command bar */
  #apk-more-menu{bottom:calc(env(safe-area-inset-bottom,0px) + 80px)!important}
}

/* ── Cart vendor buttons — copy+open pattern ── */
.apk-cart-vendor-btn{
  padding:10px 8px;border-radius:10px;border:none;
  font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;
  -webkit-tap-highlight-color:transparent;text-decoration:none;
  transition:opacity .15s,transform .15s
}
.apk-cart-vendor-btn:hover{opacity:.85;transform:scale(1.02)}
/* ── Cart action row: compact single scrollable row of chips ── */
/* ── Cart action row: Copy + vendor chips ─────────────────────────────── */
/* Mobile: single scrollable horizontal row */
.apk-cart-action-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 4px;
  align-items: center;
  /* Prevent wrap on mobile — horizontal scroll shows all vendors */
  flex-wrap: nowrap;
}
.apk-cart-action-row::-webkit-scrollbar { display: none; }

/* Tablet + Desktop: wrap into 2 rows of 3 so all 6 items (copy + 5 vendors) show
   without scrolling — panel is 380px wide, 3 chips per row fits perfectly */
@media (min-width: 641px) {
  .apk-cart-action-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .apk-cart-copy-pill,
  .apk-cart-vendor-chip {
    flex: 1 1 calc(33% - 6px);
    min-width: 0;
    justify-content: center;
  }
}

/* Copy pill — stands out as primary CTA */
/* Copy pill: small corner icon — absolute top-right of vendor section */
.apk-cart-copy-pill {
  position: absolute;
  top: -28px;
  right: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, color .12s, border-color .12s;
  font-family: inherit;
}
.apk-cart-copy-pill:hover,
.apk-cart-copy-pill:active { background: rgba(16,185,129,.15); color: #10b981; border-color: #10b981; }
.apk-cart-copy-pill.copied { background: rgba(16,185,129,.2); color: #10b981; border-color: #10b981; }

/* Vendor chips — tinted, compact, pill shape */
.apk-cart-vendor-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s, transform .1s;
}
.apk-cart-vendor-chip:active { opacity: .75; transform: scale(.97); }

/* Note below chips */
.apk-vendor-note {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Grocery follow-up chips ── */
.apk-followup-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.apk-followup-chip {
  padding: 4px 11px;
  border-radius: 14px;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.3);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.apk-followup-chip:active { background: rgba(99,102,241,.22); }

/* ══════════════════════════════════════════════════════════════════
   SMART HOME CALENDAR
   Full-screen overlay. Month/Week/Day drill-down.
   Filter by type: Chores · Reminders · Notes · Plans
   Filter by member.
   ══════════════════════════════════════════════════════════════════ */
#apk-cal-modal{
  position:fixed;inset:0;z-index:9100;
  display:flex;flex-direction:column;
  background:var(--bg-primary);
  overflow:hidden;
  /* position:fixed already acts as containing block for absolute side FABs */
}
#apk-cal-header{
  border-bottom:1px solid var(--border);
  background:var(--bg-secondary);
  flex-shrink:0;
}
#apk-cal-title-row{
  display:flex;align-items:center;gap:10px;
  flex-shrink:1;min-width:0;overflow:hidden;
}
/* Controls row: nav + tabs + close — always on one line */
#apk-cal-controls{
  display:flex;align-items:center;gap:4px;
  flex-shrink:0;flex-wrap:nowrap;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;/* breathing room for scrollbar */
}
#apk-cal-controls::-webkit-scrollbar{display:none}
/* Close button always visible — never clips */
#apk-cal-close{
  flex-shrink:0;
}
#apk-cal-title{
  font-size:16px;font-weight:700;color:var(--text-primary);margin:0
}
#apk-cal-nav{display:flex;gap:4px;align-items:center}
.apk-cal-nav-btn{
  background:var(--bg-tertiary);border:1px solid var(--border);
  border-radius:8px;padding:5px 10px;cursor:pointer;
  color:var(--text-secondary);font-size:13px;font-family:inherit;
  display:flex;align-items:center;transition:background .15s
}
.apk-cal-nav-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
#apk-cal-today-btn{
  background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.3);
  color:var(--primary,#6366f1);border-radius:8px;padding:5px 10px;
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit
}
/* View mode tabs */
#apk-cal-view-tabs{display:flex;gap:4px}
.apk-cal-tab{
  padding:5px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg-tertiary);color:var(--text-secondary);
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all .15s
}
.apk-cal-tab.active{
  background:var(--primary,#6366f1);color:#fff;border-color:var(--primary,#6366f1)
}
/* Filter chips */
#apk-cal-filters{
  display:flex;gap:6px;padding:8px 16px;
  overflow-x:auto;flex-shrink:0;
  border-bottom:1px solid var(--border);
  background:var(--bg-secondary);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none
}
#apk-cal-filters::-webkit-scrollbar{display:none}
.apk-cal-chip{
  padding:5px 10px;border-radius:8px;border:1.5px solid var(--border);
  background:var(--bg-tertiary);color:var(--text-secondary);
  font-size:12px;font-weight:600;cursor:pointer;
  white-space:nowrap;font-family:inherit;transition:all .15s;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  min-height:30px;display:inline-flex;align-items:center;
}
.apk-cal-chip.active{border-color:currentColor}
.apk-cal-chip[data-filter="all"].active{background:rgba(99,102,241,.15);color:var(--primary,#6366f1)}
.apk-cal-chip[data-filter="chore"].active{background:rgba(99,102,241,.15);color:#6366f1}
.apk-cal-chip[data-filter="reminder"].active{background:rgba(245,158,11,.15);color:#f59e0b}
.apk-cal-chip[data-filter="note"].active{background:rgba(16,185,129,.15);color:#10b981}
.apk-cal-chip[data-filter="plan"].active{background:rgba(139,92,246,.15);color:#8b5cf6}
/* Main calendar area */
#apk-cal-body{
  flex:1;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:12px
}
/* Month grid */
.apk-cal-month{display:flex;flex-direction:column;gap:0;height:100%}
.apk-cal-weekrow{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:0;flex-shrink:0
}
.apk-cal-dayhdr{
  text-align:center;font-size: 11px;font-weight:700;
  color:var(--text-tertiary);padding:4px 0 8px;
  text-transform:uppercase;letter-spacing:.5px
}
.apk-cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  flex:1;gap:1px;background:var(--border)
}
.apk-cal-day{
  background:var(--bg-primary);
  padding:6px 6px 4px;min-height:72px;
  cursor:pointer;transition:background .15s;
  position:relative;overflow:hidden
}
.apk-cal-day:hover{background:var(--bg-secondary)}
.apk-cal-day.today{background:rgba(99,102,241,.06)}
.apk-cal-day.today .apk-cal-daynum{
  background:var(--primary,#6366f1);color:#fff;
  border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;margin:-1px
}
.apk-cal-day.other-month .apk-cal-daynum{color:var(--text-tertiary)}
.apk-cal-day.other-month{background:var(--bg-primary);opacity:.45}
.apk-cal-daynum{
  font-size:12px;font-weight:600;color:var(--text-primary);
  margin-bottom:4px;line-height:1
}
.apk-cal-dots{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}
.apk-cal-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0
}
.apk-cal-dot-chore{background:#6366f1}
.apk-cal-dot-reminder{background:#f59e0b}
.apk-cal-dot-note{background:#10b981}
.apk-cal-dot-plan{background:#8b5cf6}
.apk-cal-pill{
  font-size: 11px;font-weight:600;padding:1px 5px;
  border-radius:10px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%;line-height:1.5;
  display:block;margin-top:1px
}
.apk-cal-pill-chore{background:rgba(99,102,241,.18);color:#818cf8}
.apk-cal-pill-reminder{background:rgba(245,158,11,.18);color:#f59e0b}
.apk-cal-pill-note{background:rgba(16,185,129,.18);color:#34d399}
.apk-cal-pill-plan{background:rgba(139,92,246,.18);color:#a78bfa}
/* FIX: add missing pill classes for grocery, bill, appointment, staff, event */
.apk-cal-pill-grocery{background:rgba(59,130,246,.18);color:#60a5fa}
.apk-cal-pill-bill{background:rgba(239,68,68,.18);color:#f87171}
.apk-cal-pill-appointment{background:rgba(6,182,212,.18);color:#22d3ee}
.apk-cal-pill-staff{background:rgba(249,115,22,.18);color:#fb923c}
.apk-cal-pill-event{background:rgba(236,72,153,.18);color:#f472b6}
/* FIX: matching dot classes for all types */
.apk-cal-dot-grocery{background:#3b82f6}
.apk-cal-dot-bill{background:#ef4444}
.apk-cal-dot-appointment{background:#06b6d4}
.apk-cal-dot-staff{background:#f97316}
.apk-cal-dot-event{background:#ec4899}
/* Stats strip colored value text */
#cstat-chores{color:var(--text-primary)}
#cstat-reminders{color:var(--text-primary)}
#cstat-bills{color:var(--text-primary)}
#cstat-notes{color:var(--text-primary)}
#cstat-done{color:var(--text-primary)}
/* Stats strip dot helper */
.cstat-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:3px;vertical-align:middle;flex-shrink:0
}
#apk-cal-stats .apk-cal-stat-lbl{
  display:flex;align-items:center;justify-content:center
}
/* Week view */
.apk-cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);height:100%}
.apk-cal-week-col{background:var(--bg-primary);padding:6px;overflow-y:auto}
.apk-cal-week-col.today{background:rgba(99,102,241,.04)}
.apk-cal-week-col-hdr{
  font-size:11px;font-weight:700;color:var(--text-secondary);
  margin-bottom:6px;text-align:center;padding-bottom:4px;
  border-bottom:1px solid var(--border)
}
.apk-cal-week-col-hdr.today-hdr{color:var(--primary,#6366f1)}
/* Day view */
.apk-cal-day-view{padding:0;max-width:600px;margin:0 auto}
.apk-cal-day-hdr2{
  font-size:18px;font-weight:700;color:var(--text-primary);
  margin-bottom:16px;display:flex;align-items:center;gap:10px
}
.apk-cal-day-section{margin-bottom:16px}
.apk-cal-day-section-title{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;color:var(--text-tertiary);margin-bottom:8px
}
.apk-cal-event-card{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:10px;margin-bottom:6px;
  cursor:pointer;transition:background .15s;
  border:1px solid var(--border)
}
.apk-cal-event-card:hover{background:var(--bg-secondary)}
.apk-cal-event-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:3px
}
.apk-cal-event-title{
  font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.4
}
.apk-cal-event-meta{
  font-size:11px;color:var(--text-tertiary);margin-top:2px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap
}
.apk-cal-event-badge{
  font-size: 11px;font-weight:600;padding:1px 7px;border-radius:10px;
  display:inline-flex;align-items:center
}
/* Stats strip at bottom of calendar */
#apk-cal-stats{
  display:flex;gap:0;border-top:1px solid var(--border);
  flex-shrink:0;background:var(--bg-secondary)
}
.apk-cal-stat{
  flex:1;padding:8px 10px;text-align:center;border-right:1px solid var(--border)
}
.apk-cal-stat:last-child{border-right:none}
.apk-cal-stat-val{font-size:16px;font-weight:700;color:var(--text-primary)}
.apk-cal-stat-lbl{font-size: 11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}
/* Close/back buttons */
#apk-cal-close{
  background:var(--bg-tertiary);border:1px solid var(--border);
  border-radius:8px;padding:6px 14px;font-size:13px;
  font-weight:600;color:var(--text-secondary);cursor:pointer;
  font-family:inherit;display:flex;align-items:center;gap:5px
}
#apk-cal-back{
  background:var(--bg-tertiary);border:1px solid var(--border);
  border-radius:8px;padding:5px 12px;font-size:13px;
  color:var(--text-secondary);cursor:pointer;font-family:inherit;
  display:none;align-items:center;gap:4px
}
/* Empty state */
.apk-cal-empty{
  text-align:center;padding:32px 16px;color:var(--text-tertiary);font-size:13px
}
/* Mobile: compact month grid */
@media(max-width:479px){
  .apk-cal-day{min-height:52px;padding:4px 3px}
  .apk-cal-pill{display:none} /* dots only on tiny screens */
  #apk-cal-stats .apk-cal-stat-lbl{font-size: 11px}
  #apk-cal-header{padding:8px 10px}
  .apk-cal-tab{padding:4px 8px;font-size:11px}
}

/* Cart AI reply visibility is managed by JS (style.display) — no CSS override needed */
/* Removed :not(:empty) force-show that was preventing auto-dismiss of "Added:" message */

/* ── Quick actions panel — remove z-index overlap with more-menu ── */
#sfp-panel{ z-index:1700!important }

/* ── Sidebar logout button ── */
#sidebar-logout-btn{
  color:var(--error,#ef4444)!important;
  margin-top:auto
}
#sidebar-logout-btn .nav-icon{color:var(--error,#ef4444)!important}
#sidebar-logout-btn:hover{background:rgba(239,68,68,.08)!important}

/* ── Nav separator line ── */
.nav-divider{height:1px;background:var(--border);margin:8px 8px}

/* ── header-actions-group: no overflow on small screens ── */
#header-actions-group{
  display:flex!important;align-items:center;gap:4px;flex-shrink:0;overflow:visible
}
/* On very small screens, hide bell and settings from injected group to keep header tight */
@media(max-width:359px){
  #header-actions-group #header-settings-btn,
  #header-actions-group #notif-bell-btn{ display:none!important }
}



/* ══════════════════════════════════════════════════════════════
   SMART SIDE RAIL — replaces large floating FABs
   Compact 36px icon pill on the right edge, above command bar.
   Never blocks content. Expands on hover/tap to show label.
   ══════════════════════════════════════════════════════════════ */

/* Hide the old large FABs on all devices — side rail takes over */
#apk-smart-fab,
#apk-cart-fab {
  display: none !important;
}

/* Side rail container */
/* Side rail: replaced by modern edge panel — see FINAL BETA CSS at EOF */
#apk-side-rail-legacy-placeholder { display: none; }

/* Each rail button */
.apk-rail-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 7px 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
  overflow: hidden;
  max-width: 36px; /* collapsed - icon only */
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  box-shadow: -2px 2px 8px rgba(0,0,0,.18);
}
.apk-rail-btn:hover,
.apk-rail-btn:focus-visible {
  max-width: 120px;
  gap: 6px;
  padding: 7px 12px 7px 8px;
}

/* .apk-rail-feature removed — Map+Calendar moved to header on all devices */
.apk-rail-btn .rail-icon {
  font-size: 18px;
  flex-shrink: 0;
  transition: color .15s;
}
.apk-rail-btn .rail-label {
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity .15s .05s, max-width .2s;
  white-space: nowrap;
}
.apk-rail-btn:hover .rail-label,
.apk-rail-btn:focus-visible .rail-label {
  opacity: 1;
  max-width: 80px;
}

/* Actions button - primary */
#apk-rail-actions .rail-icon { color: var(--primary, #6366f1); }
#apk-rail-actions:hover,
#apk-rail-actions.open { 
  background: rgba(99,102,241,.1);
  border-color: rgba(99,102,241,.4);
  color: var(--primary);
}

/* Cart button - green, only shown when cart has items */
/* Cart button always visible — user needs to access it even when cart is empty */
#apk-rail-cart { display: flex; }
#apk-rail-cart .rail-icon { color: var(--text-tertiary); transition: color .2s; }
#apk-rail-cart.has-items .rail-icon { color: #10b981; }
#apk-rail-cart:hover { 
  background: rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.4);
}
#apk-rail-cart.has-items { border-color: rgba(16,185,129,.35); }

/* Badge on cart */
#apk-rail-cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bg-primary);
}

/* Smart panel (actions/suggestions) now attached to side rail */
#apk-smart-panel {
  right: 40px !important;
  bottom: calc(56px + env(safe-area-inset-bottom,0px) + 76px) !important;
}
@media (min-width: 641px) {
  #apk-smart-panel {
    right: 44px !important;
    bottom: calc(12px + 64px + 20px) !important;
  }
}

/* Mobile tap behaviour: expand for 2s then collapse */
@media (hover: none) {
  .apk-rail-btn {
    transition: max-width .25s, gap .25s, padding .25s;
  }
  .apk-rail-btn.expanded {
    max-width: 120px;
    gap: 6px;
    padding: 7px 12px 7px 8px;
  }
  .apk-rail-btn.expanded .rail-label {
    opacity: 1;
    max-width: 80px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   APUNKAI WIZARD + ADAPTIVE LAYOUT SYSTEM
   Version: 0.0.1-patch14-clean
   
   Design principles (per architecture.md):
   - Mobile  (≤640px):  bottom-nav, full-screen wizard slides up
   - Tablet  (641-1024px): icon-rail, wizard = bottom-sheet (portrait)
                            or right panel (landscape)
   - Desktop (1025px+): full sidebar, wizard = right panel
   
   CSS philosophy:
   - Specificity over !important — !important only for documented overrides
   - @supports for progressive enhancement
   - CSS custom properties for shared values
   - Single definition per component, mobile-first with breakpoint overrides
   ════════════════════════════════════════════════════════════════════════════ */

/* ── SECTION 1: WIZARD LAYOUT SYSTEM ─────────────────────────────────────── */

/*
 * Root custom properties for the wizard chrome dimensions.
 * Changing these updates all derived calculations automatically.
 * Defined on .modal-fullpage so they scope to wizard context.
 */
.modal-fullpage {
  --wz-header-h:   52px;
  --wz-progress-h: 20px;
  --wz-hint-h:     28px;   /* swipe hint, only on touch */
  --wz-nav-h:      64px;   /* Back/Next footer */
  --wz-chrome-h:   calc(var(--wz-header-h) + var(--wz-progress-h) + var(--wz-nav-h));

  /* Positioning — z-index MUST beat bottom-nav (5000) and all modals */
  position: fixed;
  inset: 0;
  z-index: 6000;

  /* Layout: flex column — each child declared below */
  display: flex;
  flex-direction: column;

  /* Height:
   * 100svh = Small Viewport Height — excludes retractable browser chrome
   * (URL bar, tab strip) on Android Chrome 108+, Firefox 101+, Safari 15.4+
   * Falls back to 100vh which JS _setWizardHeight() corrects at runtime.
   * This replaces the 100dvh !important patchwork.
   */
  height: 100svh;
  height: 100vh; /* non-supporting browsers; overridden by 100svh above */

  /* Appearance */
  background: var(--bg-primary, #0f172a);

  /* Visibility: opacity + pointer-events (no display:none flicker) */
  opacity: 0;
  pointer-events: none;

  /* Animation: mobile slides up from bottom */
  transform: translateY(100%);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.32, 1.02, 0.42, 1);

  /* Overflow:
   * overflow:clip clips without creating a scroll context.
   * This is critical for Firefox: overflow:hidden creates a block formatting
   * context that clips position:sticky children (spec-compliant but unhelpful).
   * overflow:clip does NOT create that context, so sticky deck-nav works.
   * Supported: Chrome 90+, Firefox 88+, Safari 16+.
   * Older browsers get overflow:hidden (fine since JS controls height there).
   */
  overflow: hidden; /* base for older browsers */
}
@supports (overflow: clip) {
  .modal-fullpage {
    overflow: clip;
  }
}

.modal-fullpage.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── Wizard children: strict flex roles ─────────────────────────────────── */

.fp-header {
  /* Fixed height, never shrinks */
  flex: 0 0 var(--wz-header-h);
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) 16px 14px;
  background: var(--bg-secondary, #1e293b);
  border-bottom: 1px solid var(--border, #334155);
}

.fp-progress {
  /* Dot strip below header */
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 8px 16px 10px;
  background: var(--bg-secondary);
}

.fp-progress-dot {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.3s, transform 0.2s;
}
.fp-progress-dot.active { background: var(--primary); transform: scaleY(1.5); }
.fp-progress-dot.done   { background: #10b981; }

.apk-swipe-hint {
  /* Touch-only hint row */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 2px 0 8px;
  transition: opacity 0.5s;
}
.apk-swipe-hint.hidden { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  /* Mouse users don't need swipe hint */
  .apk-swipe-hint { display: none; }
}

.fp-body {
  /* Fills ALL space between header and nav footer */
  flex: 1 1 0;
  /* min-height:0 is required by Firefox.
   * Without it, Firefox flex children won't shrink below content height,
   * so fp-body expands past the modal boundary and pushes deck-nav off screen.
   * This is the #1 Firefox-specific fix — a single line that changes everything.
   */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 16px 16px 8px;
}

.apk-deck-nav {
  /* Fixed-height footer, always at bottom */
  flex: 0 0 var(--wz-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  /* Sticky as a safety net: if flex height calculation has rounding error,
   * sticky ensures the nav is still visible at the bottom of the scroll area */
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.apk-deck-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-height: 44px; /* WCAG AA touch target */
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.apk-deck-nav-btn:hover {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  border-color: var(--primary);
}
.apk-deck-nav-btn:disabled { opacity: 0.35; pointer-events: none; }
.apk-deck-nav-btn.primary  {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.apk-deck-nav-btn.primary:hover { background: #4f46e5; }

/* ── Card deck (swipe cards) ─────────────────────────────────────────────── */

.apk-card-deck {
  position: relative;
  width: 100%;
  min-height: 120px;
}

.apk-swipe-card {
  position: absolute;
  inset: 0;
  background: var(--bg-secondary);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateX(110%) scale(0.94);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.32, 1.02, 0.42, 1),
              opacity 0.24s ease;
  pointer-events: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.apk-swipe-card.active {
  transform: translateX(0) scale(1);
  opacity: 1;
  pointer-events: auto;
  position: relative;
  inset: auto;
}
.apk-swipe-card.exit-left  { transform: translateX(-110%) scale(0.88); opacity: 0; }
.apk-swipe-card.exit-right { transform: translateX(110%) scale(0.88); opacity: 0; }
.apk-swipe-card.dragging   { transition: none; }

/* Dot indicators */
.apk-deck-dots { display: flex; justify-content: center; gap: 6px; padding: 8px 0 4px; }
.apk-deck-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: all 0.25s; }
.apk-deck-dot.active { width: 20px; border-radius: 3px; background: var(--primary); }
.apk-deck-dot.done   { background: #10b981; }

/* ── fp-header internal elements ─────────────────────────────────────────── */

.fp-header-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.fp-header-back:hover { background: rgba(99, 102, 241, 0.12); color: var(--primary); }

.fp-header-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-header-action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.fp-header-action:active  { transform: scale(0.95); }
.fp-header-action:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── SECTION 2: RESPONSIVE WIZARD BREAKPOINTS ─────────────────────────────
 * Three layouts (matching architecture.md):
 * Mobile portrait  (≤640px):        full-screen, slides up from bottom
 * Mobile landscape (≤640px, short): full-screen, compact padding
 * Tablet portrait  (641-1024px, portrait): bottom sheet, centred
 * Tablet landscape (641-1024px, landscape): right panel, 50vw
 * Desktop          (1025px+):        right panel, min(480px, 42vw)
 */

/* Mobile landscape: compact chrome to preserve content space */
@media (max-height: 500px) and (orientation: landscape) {
  .modal-fullpage {
    --wz-header-h: 40px;
    --wz-nav-h:    52px;
  }
  .fp-body   { padding: 8px 12px 4px; }
  .fp-header { padding: 6px 14px; }
  .apk-swipe-hint { display: none; }
  .apk-deck-nav   { padding: 6px 12px; padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .apk-deck-nav-btn { min-height: 36px; font-size: 12px; }
}

/* Tablet portrait: bottom sheet */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .modal-fullpage {
    top: auto;
    height: auto;
    max-height: 94svh;
    max-height: 94vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.45);
    transform: translateY(100%);
  }
  .modal-fullpage.active { transform: translateY(0); }
  .fp-body {
    /* In a bottom sheet (height:auto), fp-body needs an explicit max-height
     * so that content can scroll without expanding the sheet infinitely */
    max-height: calc(94vh - var(--wz-chrome-h) - 20px);
  }
  .fp-header { padding: 16px 20px 14px; }
  .apk-deck-nav { padding: 12px 20px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
}

/* Tablet landscape: right panel */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: landscape) {
  .modal-fullpage {
    /* Anchor to right edge, full height */
    inset: 0 0 0 auto;  /* top:0 right:0 bottom:0 left:auto */
    width: 50vw;
    height: 100svh;
    height: 100vh;
    border-radius: 0;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4);
    transform: translateX(100%);
  }
  .modal-fullpage.active { transform: translateX(0); }
  /* Landscape: use fade transition — no horizontal swipe needed */
  .apk-swipe-card {
    position: absolute;
    inset: 0;
    transform: none;
    opacity: 0;
    pointer-events: none;
    display: none;
  }
  .apk-swipe-card.active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    inset: auto;
    display: flex;
    animation: cardFadeIn 0.18s ease;
  }
  .apk-swipe-hint { display: none; }
  .fp-header { padding: 12px 20px; }
  .fp-body   { padding: 12px 20px 4px; }
  .apk-deck-nav { padding: 10px 20px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
}

/* Desktop: right panel */
@media (min-width: 1025px) {
  .modal-fullpage {
    inset: 0 0 0 auto;
    width: min(480px, 42vw);
    height: 100svh;
    height: 100vh;
    border-radius: 0;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
  }
  .modal-fullpage.active { transform: translateX(0); }
  .apk-swipe-card {
    position: absolute;
    inset: 0;
    transform: none;
    opacity: 0;
    pointer-events: none;
    display: none;
  }
  .apk-swipe-card.active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    inset: auto;
    display: flex;
    animation: cardFadeIn 0.18s ease;
  }
  .apk-swipe-hint { display: none; }
  .fp-header { padding: 16px 24px 14px; }
  .fp-body   { padding: 20px 24px 8px; }
  .apk-deck-nav { padding: 12px 24px; }
}

@keyframes cardFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Narrow phone (375px and below): tighter padding */
@media (max-width: 375px) {
  .apk-swipe-card  { padding: 14px 12px; }
  .apk-deck-nav-btn { padding: 8px 12px; font-size: 12px; }
}

/* ── iOS safe area: progressive enhancement ───────────────────────────────── */
@supports (padding-top: env(safe-area-inset-top)) {
  .fp-header  { padding-top: max(14px, env(safe-area-inset-top)); }
  .fp-body    { padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  .apk-deck-nav { padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
}

/* ── SECTION 3: MINI CALENDAR WIDGET ─────────────────────────────────────── */

.apk-mini-cal {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.apk-mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
}
.apk-mini-cal-title  { font-size: 12px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
.apk-mini-cal-expand { font-size: 11px; color: var(--primary); background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 4px; font-family: inherit; font-weight: 600; }
.apk-mini-cal-strip  { display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 14px; }
.apk-mini-cal-strip::-webkit-scrollbar { display: none; }
.apk-mini-cal-day    { flex-shrink: 0; width: 44px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 10px; cursor: pointer; transition: background 0.15s; -webkit-tap-highlight-color: transparent; }
.apk-mini-cal-day:hover { background: rgba(99, 102, 241, 0.08); }
.apk-mini-cal-day.today { background: rgba(99, 102, 241, 0.12); }
.apk-mini-cal-day.today .apk-mini-cal-num { background: var(--primary); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.apk-mini-cal-dow   { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); }
.apk-mini-cal-num   { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.apk-mini-cal-dots  { display: flex; gap: 2px; min-height: 6px; }
.apk-mini-cal-dot   { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
.apk-mini-cal-events { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.apk-mini-cal-event { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--bg-tertiary); border-left: 3px solid var(--border); cursor: pointer; transition: background 0.15s; }
.apk-mini-cal-event:hover { background: rgba(99, 102, 241, 0.06); }
.apk-mini-cal-event-title { flex: 1; font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apk-mini-cal-event-time  { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }

/* ── SECTION 4: MINI MAP WIDGET ──────────────────────────────────────────── */

.apk-mini-map { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.apk-mini-map-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-tertiary); }
.apk-mini-map-expand { font-size: 11px; color: var(--primary); background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 4px; font-family: inherit; font-weight: 600; }

/* ── SECTION 5: GROUPED SELECT OPTION STYLES ─────────────────────────────── */

optgroup { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary, #64748b); background: var(--bg-secondary, #1e293b); }
option   { background: var(--bg-secondary, #1e293b); color: var(--text-primary, #e2e8f0); padding: 6px 10px; }

/* ── SECTION 6: TABLE FILTER PILLS ──────────────────────────────────────── */

.tbl-filter-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 8px 4px 12px;
}
.tbl-filter-pill label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
.tbl-filter-pill select {
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 2px 24px 2px 4px;
  min-width: 80px;
}
.tbl-filter-pill select:focus { outline: none; box-shadow: none; }

/* ── SECTION 7: MOBILE-FIRST RESPONSIVE LAYOUT ───────────────────────────
 * Single authoritative section replacing all previous !important patches.
 * Organized by breakpoint, mobile-first.
 *
 * !important policy: used ONLY for:
 *   a) Documented cases in CLAUDE.md (old FABs display:none)
 *   b) JS-managed visibility (bottom-nav show/hide via JS setProperty)
 *   c) Staff mode chrome isolation (security requirement per architecture.md)
 */

/* ── NAV MUTUAL EXCLUSION ─────────────────────────────────────────────────
 * Mobile (≤640px): sidebar hidden, bottom-nav managed by JS
 * Tablet/Desktop: bottom-nav hidden, sidebar shown
 * CSS is a fallback; JS _enforceNavMutualExclusion() is primary controller.
 */
@media (max-width: 640px) {
  /* Nav transform-hide — no display:none (Safari fix) */
  #nav-container:not(.sidebar-open-target),
  body.android-chrome-tablet #nav-container {
    transform: translateX(-100%); pointer-events: none; visibility: hidden;
  }
  body.sidebar-open #nav-container {
    display: flex; flex-direction: column;
    transform: translateX(0); pointer-events: auto; visibility: visible;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  body.sidebar-open #nav-container .nav-label {
    display: inline; visibility: visible; opacity: 1; width: auto; overflow: visible;
  }
}

/* ── PROFILE AVATAR: always visible when authenticated ───────────────────── */
@media (max-width: 640px) {
  body.authenticated #apk-user-avatar {
    display: flex;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    font-size: 11px;
    margin-left: 4px;
    z-index: 1001;
  }
  .header,
  #app-header {
    overflow: visible;
  }
}

/* ── HEADER: COMPACT, SINGLE ROW ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .header, #app-header {
    display: flex;
    align-items: center;
    padding: 0 8px 0 10px;
    height: 52px;
    min-height: 52px;
    overflow: visible;
  }
  .logo-container, .brand {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  #header-actions-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
  }
  #header-actions-group .hdr-icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
  }
  /* Map+Calendar stay visible — they are the header USPs */
  #header-mindmap-btn,
  #header-calendar-btn { display: flex !important; flex-shrink: 0; }
  /* Avatar: ALWAYS last, ALWAYS visible — the one icon that must never disappear */
  #apk-user-avatar {
    display: flex !important;
    flex-shrink: 0 !important;
    order: 999;
    width: 32px;
    height: 32px;
    font-size: 12px;
    margin-left: 2px;
  }
  .tagline, .header-tagline { display: none; }
  /* [FIX-HEADERLOGOCLIP-01, this session] Confirmed via live screenshot: wordmark hard-clipped
     to "Apu" on mobile. #apk-home-switcher-chip (flex-shrink:0, up to 140px) never shrinks, so
     ALL the squeeze in .header-left landed on .logo-btn (default flex-shrink:1, no floor) —
     .logo-container's overflow:hidden then clipped the text mid-character with no ellipsis to
     even signal truncation. Same lesson as FIX-SWITCHERWRAP-01 (the chip's own earlier fix):
     protect the thing that must stay legible with a floor, let the other side shrink-with-
     ellipsis instead of hard-clipping. Logo now gets a protected min width + its own ellipsis;
     the switcher chip keeps its existing name-ellipsis (FIX-SWITCHERWRAP-01) but can now shrink
     below 140px with a floor of its own, so a long group name can't re-starve the logo. */
  .logo-btn {
    flex-shrink: 0;
    min-width: 0;
  }
  .logo-container { flex-shrink: 0; }
  .logo {
    max-width: 96px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
  }
  #apk-home-switcher-chip {
    flex-shrink: 1;
    min-width: 44px;
    max-width: 100px;
  }
}

/* ── FILTER ENTRY POINTS: one per breakpoint ─────────────────────────────
 * Mobile (≤640px): tune icon ONLY → opens filter drawer bottom sheet
 * Tablet (641-1024px): compact header-filters selects, no tune icon
 * Desktop (1025px+): full header-filters + tune icon
 */
@media (max-width: 640px) {
  .header-filters { display: none; }
  #header-filter-btn { display: flex; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .header-filters {
    display: flex;
    max-width: 260px;
    gap: 6px;
    align-items: center;
  }
  .header-filters select,
  #filter-time { font-size: 11px; padding: 4px 8px; max-width: 110px; }
  #src-filter-btn { height: 28px; padding: 0 8px; font-size: 11px; }
  #header-filter-btn { display: none; }
}
@media (min-width: 1025px) {
  .header-filters { display: flex; max-width: 340px; }
  #header-filter-btn { display: flex; }
}

/* ── TABLET HEADER: tight single row ─────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .header, #app-header {
    padding: 0 12px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: visible;
    min-height: 52px;
    height: 52px;
  }
  .logo-container, .brand, #app-logo { flex: 1; min-width: 0; overflow: hidden; }
  .logo { font-size: 16px; white-space: nowrap; }
  .tagline, .header-tagline { display: none; }
  #header-actions-group { flex-shrink: 0; display: flex; align-items: center; gap: 2px; }
  .hdr-icon-btn,
  #header-mindmap-btn,
  #header-calendar-btn,
  #notif-bell-btn,
  #header-filter-btn,
  #header-admin-btn,
  #header-smart-score-btn { width: 30px; height: 30px; padding: 0; }
  /* Map+Calendar: same neutral style as all other header buttons — no special tint
     Hover turns blue via the global :hover rule. Consistent with all other icons. */
  #header-mindmap-btn,
  #header-calendar-btn {
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  #apk-user-avatar { width: 30px; height: 30px; font-size: 11px; flex-shrink: 0; margin-left: 2px; }
}

/* ── SCROLL BUFFER: universal bottom safety ──────────────────────────────
 * Every view-panel always scrolls its last item above the fixed chrome.
 * Mobile: bottom-nav(56px) + command-bar(60px) + safe-area + 48px buffer
 * Tablet: command-bar(64px) + safe-area + 48px buffer
 * Desktop: command-bar(52px) + 40px buffer
 * All controlled via --apk-chrome-bottom CSS variable (set in :root + body.show-bn).
 * smart-panel-open overrides below for extra tall panel clearance.
 */
@media (max-width: 640px) {
  /* [v0.1.0] All views get consistent chrome clearance — portrait + landscape */
  #view-home.active {
    padding-bottom: calc(var(--apk-chrome-bottom) + 24px);
  }
  #view-staff.active,
  #view-family.active {
    /* Extra: staff action row must clear bot bar on mobile */
    padding-bottom: calc(var(--apk-chrome-bottom) + 88px);
  }
  #view-chores.active,
  #view-reminders.active,
  #view-notes.active,
  #view-planner.active,
  #view-grocery.active,
  #view-insights.active,
  #view-settings.active,
  /* [FIX-LEDGERCHROMEGAP-01, v0.2.0, 2026-08-30, Round BH, founder: "the command bar is still
     cut off by default a bit on bills page, fix it to be consistent with other nav pages."]
     #view-ledger (Apunki Bills) was the one real view missing from this list -- it's built
     dynamically by _ensureLedgerPanel() rather than existing in the static HTML like its
     siblings here, and whoever added this list simply never had a live #view-ledger element to
     select against at the time. Confirmed via grep: no ledger-specific rule anywhere in either
     stylesheet gave it ANY chrome clearance on mobile, so its content ran right up against the
     fixed command bar while every other real view in this list got the same 44px+chrome buffer
     every other page already has. */
  #view-ledger.active {
    padding-bottom: calc(var(--apk-chrome-bottom) + 44px);
  }
  #conversation-messages,
  .conversation-messages {
    padding-bottom: calc(var(--apk-chrome-bottom) + 32px);
  }
  /* Last staff card never hidden behind bot bar */
  .staff-cards-list > *:last-child,
  .apk-staff-card:last-child,
  .staff-card:last-child {
    margin-bottom: 80px;
  }
}
@media (max-height: 430px) and (orientation: landscape) {
  .view-panel.active {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 28px);
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .view-panel.active {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 48px);
  }
}
@media (min-width: 1025px) {
  .view-panel.active {
    padding-bottom: calc(52px + 40px);
  }
}

/* Smart panel open: content scrolls above floating panel */
body.smart-panel-open .view-panel.active,
body.smart-panel-open #view-home.active,
body.smart-panel-open #conversation-messages {
  padding-bottom: calc(380px + env(safe-area-inset-bottom, 0px));
  transition: padding-bottom 0.2s ease;
}
@media (min-width: 641px) {
  body.smart-panel-open .view-panel.active,
  body.smart-panel-open #view-home.active {
    padding-bottom: calc(260px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── MOBILE WIZARD: full-screen, fp-body as flex column ──────────────────── */
@media (max-width: 640px) {
  .modal-fullpage .fp-body {
    display: flex;
    flex-direction: column;
    padding: 12px 14px 4px;
  }
  .modal-fullpage .apk-card-deck {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .modal-fullpage .apk-swipe-card {
    position: absolute;
    inset: 0;
    max-height: none;
    overflow-y: auto;
  }
  .modal-fullpage .apk-swipe-card.active {
    position: relative;
    inset: auto;
    flex: 1;
  }
}

/* ── CHORES + REMINDERS: card layout on mobile ──────────────────────────── */
@media (max-width: 640px) {
  /* [FIX-CHORESMOBILE-DEDUPE-01 / item 11, 2026-07-22] REMOVED — this entire section was a
     second, conflicting owner (CLAUDE.md §0) for the exact same mobile chores/reminders
     layout already defined above (~line 7256-7418, the "MOBILE CARD LAYOUT" block), both
     under the identical `@media (max-width: 640px)` breakpoint:
       - `.tbl-thead-chores`/`#chores-thead` hide + `#chores-tbody .table-row` card styling
         duplicated the earlier block's rules with different gap/width/box-sizing values —
         later-wins cascade meant this block silently overrode the earlier one per-property,
         producing a hybrid neither block actually intended.
       - `.tbl-cell:nth-child(N)` column-hiding rules were dead code: the real chores/
         reminders row template (app.js ~10557-10576) uses semantic classes (`cell-title`,
         `cell-assignee`, `cell-due`, `col-actions`) — no element anywhere carries a bare
         `.tbl-cell` class, so these never matched anything.
       - `#chores-filter-bar`/`#reminders-filter-bar` here forced a horizontal-scroll chip
         strip (flex-direction:row, overflow-x:auto, negative-margin bleed, border-bottom
         only), directly fighting the earlier block's stacked full-width column layout
         (flex-direction:column, boxed card with full border+radius). Two different filter-
         bar designs computing together (border-radius from one, border-bottom from the
         other, flex-direction from whichever block is later) is a confirmed, concrete
         contributor to the "mobile chores looks cluttered" report — this is what CLAUDE.md
         §0 calls a silent collision. Single owner is now the earlier, actively-maintained
         block (its own comments — FIX-r80, FIX-P1-8, FIX-CHOREACTIONOVERLAP-01 — already
         treat it as canonical and reference "the earlier rule" as the one that's correct).
     `#chores-per-page`/`#reminders-per-page { display:none }` also duplicated the earlier
     block verbatim — same fix, kept once. */

  /* iOS input zoom prevention: all inputs ≥ 16px */
  input[type="text"], input[type="search"], input[type="tel"],
  input[type="number"], input[type="email"], input[type="password"],
  input[type="datetime-local"], input[type="date"], input[type="time"],
  select, textarea { font-size: 16px; }
  .command-input { font-size: 15px; }

  /* Primary buttons in view headers: compact on mobile */
  .view-header { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; flex-wrap: nowrap; }
  .view-header-left { flex: 1; min-width: 0; }
  .view-header-right { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
  .view-header-right .btn-primary { padding: 8px 12px; font-size: 13px; min-height: 38px; border-radius: 10px; }
}

/* ── PRIMARY BUTTONS: compact on tablet/desktop ──────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .view-header-right .btn-primary,
  .view-header .btn-primary { padding: 8px 14px; min-height: 36px; font-size: 13px; border-radius: 10px; gap: 5px; }
}
@media (min-width: 1025px) {
  .view-header-right .btn-primary,
  .view-header .btn-primary { padding: 7px 14px; min-height: 34px; font-size: 13px; border-radius: 10px; gap: 5px; }
}

/* ── STAT STRIP: sticky on mobile ────────────────────────────────────────── */
@media (max-width: 640px) {
  .home-stat-strip,
  #home-stat-row {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(15, 23, 42, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 6px 0 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .home-stat-strip { gap: 5px; margin-bottom: 8px; }
  .hss-pill { padding: 8px 4px 6px; }
  .hss-val  { font-size: 17px; }
  .hss-lbl  { font-size: 11px; }
}

/* ── SCORE PILL: clearly tappable ────────────────────────────────────────── */
.hss-pill {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(99, 102, 241, 0.08);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
  user-select: none;
}
.hss-pill:active { transform: scale(0.96); }

/* ── SCROLL NUDGE: new message indicator ────────────────────────────────── */
#apk-scroll-nudge {
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 80px + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 400;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.45);
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  user-select: none;
}
#apk-scroll-nudge.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ── GROCERY CART ────────────────────────────────────────────────────────── */
/* Full-screen on ALL devices — cart complexity grows, needs max real estate.
   [FIX-CARTBOTBOX-02 / 2026-07-22 revert] Back to true 'inset:0' — see has-modal note above. */
#apk-cart-panel {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  border-radius: 0;
  width: 100%;
  height: 100%;
  max-height: 100dvh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  /* [FIX-CARTCUTOFF-01, founder: "mobile view cuts off bottom portion"] Was `overflow:hidden`.
     The panel stacks header + category bar + quick-add + "what you have" + items-list + footer
     as flex-column siblings; only #apk-cart-items-list had its own internal scroll. On a short
     mobile viewport (or a category with a lot of tracked pantry items), the combined natural
     height of everything ABOVE the footer could exceed the viewport even with items-list
     shrunk to its own min-height floor — and with the panel itself clipping overflow, the footer
     (Est. Total / Order On / "I Ordered It") had nowhere to go but off-screen with no way to
     reach it. Letting the whole panel scroll vertically (nested inside items-list's own scroll,
     which is fine — the inner one only kicks in once the outer has nowhere left to give) means
     that content which doesn't fit is always still reachable, worst case by scrolling the header
     out of view, which is the standard mobile pattern — never a hard, unreachable clip.
     overflow-x stays hidden — this is a vertical-scroll fix only, never wanted a horizontal one. */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
#apk-cart-items-list {
  flex: 1;
  min-height: 80px;   /* Always show at least 2 items even when ai-reply is open */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#apk-cart-footer {
  flex-shrink: 0;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  /* [FIX-CARTCUTOFF-01] Footer must never be a flex item that can shrink/get squeezed by the
     panel's scroll fix above — pinned to its natural content height always. */
  min-height: max-content;
  /* [FIX-CARTCUTOFF-01] Matches .modal-footer's existing "position:sticky; bottom:0" convention
     (app.css ~L877) — every other modal/panel in the app keeps its primary actions pinned in
     view while the body scrolls; Cart's bespoke full-screen panel just hadn't inherited that
     convention since it isn't built on the shared .modal/.modal-footer classes. Sticky (not just
     "eventually reachable by scrolling") is what actually satisfies "primary actions... clearly
     seen" on a short mobile viewport. */
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--bg-primary);
}
.apk-cart-item-del {
  min-width: 40px;
  min-height: 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background 0.12s, color 0.12s;
}
.apk-cart-item-del:hover,
.apk-cart-item-del:active {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
#apk-cart-ai-reply {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 90px;          /* Tight cap — never eats too much panel space */
  flex-shrink: 0;            /* Don't compress — but DO stay bounded */
  overflow-y: auto;
  line-height: 1.55;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(16,185,129,.06);
  border-bottom: 1px solid var(--border);
  /* Smooth appear/disappear */
  transition: max-height .25s ease, opacity .2s ease;
}
@media (min-width: 641px) {
  /* Cart: full viewport on all screen sizes — grocery needs maximum space */
  #apk-cart-panel {
    inset: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border: none;
    transform: translateY(100%);
  }
  #apk-cart-panel.open {
    transform: translateY(0);
  }
}

/* Calendar header: layout handled by inline styles on the single flex row */

/* ── Login modal — 2-col layout, no inner modal-content wrapper ── */
#login-modal {
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#login-modal > div:first-child {
  width: 100%;
  max-width: 720px;
  /* No max-height — let it grow naturally and the modal scrolls */
}
/* Mobile portrait: stack cols, no height constraint */
@media (max-width: 580px) {
  #login-modal {
    align-items: flex-start;
    padding: 12px;
  }
  #login-modal > div:first-child {
    max-height: none;
    overflow: visible;
    margin-bottom: 24px;
  }
}

/* Calendar header: brand label shows on wider screens, hidden on narrow mobile */
@media (min-width: 480px) {
  .apk-cal-brand-label { display: inline !important; }
}
/* Calendar header scrollbar hidden */
#apk-cal-header > div::-webkit-scrollbar { display: none; }

/* ── GLOBAL FILTER DRAWER ────────────────────────────────────────────────── */
#apk-filter-drawer {
  position: fixed;
  inset: 0;
  z-index: 2200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}
#apk-filter-drawer.open {
  pointer-events: auto;
  opacity: 1;
}
#apk-filter-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
#apk-filter-drawer-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
  max-height: 85dvh;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 1.0, 0.42, 1);
}
#apk-filter-drawer.open #apk-filter-drawer-sheet {
  transform: translateY(0);
}
@media (min-width: 641px) {
  #apk-filter-drawer-sheet {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
    width: min(540px, 96vw);
  }
  #apk-filter-drawer.open #apk-filter-drawer-sheet {
    transform: translateX(-50%) translateY(0);
  }
}
#header-filter-btn { display: flex; position: relative; }
#header-filter-btn.filter-active {
  background: rgba(99, 102, 241, 0.12);
  border-color: var(--primary);
  color: var(--primary);
}
.apk-fd-section-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}
.apk-fd-divider { height: 1px; background: var(--border); margin: 0 16px 14px; }
.apk-fd-src-btn:hover:not([data-disabled="1"]) {
  border-color: rgba(99, 102, 241, 0.4);
  background: var(--bg-tertiary);
}
.apk-fd-src-btn:active { transform: scale(0.98); }
body.filter-drawer-open #apk-side-rail {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* ── Staff "More" sheet — star rating ────────────────────────────────────── */
.apk-sms-star {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--border);
  cursor: pointer;
  padding: 2px 3px;
  line-height: 1;
  transition: color .12s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.apk-sms-star.lit  { color: #f59e0b; }
.apk-sms-star:hover { transform: scale(1.2); }

/* ── Entity card actions — always 4 icons, equal-width grid ─────────────── */
.entity-card-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.entity-card-actions .btn-icon {
  width: 100%;
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.entity-card-actions .btn-icon:active { transform: scale(0.92); }
.entity-card-actions .btn-icon.btn-success {
  color: #10b981; border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.08);
}
.entity-card-actions .btn-icon.btn-warning {
  color: #f59e0b; border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.08);
}
.entity-card-actions .btn-icon.btn-success:hover { background: rgba(16,185,129,.18); }
.entity-card-actions .btn-icon.btn-warning:hover { background: rgba(245,158,11,.18); }
.entity-card-actions .btn-icon:not(.btn-success):not(.btn-warning):hover {
  background: rgba(99,102,241,.1);
  color: var(--primary);
  border-color: rgba(99,102,241,.3);
}

/* ── STAFF ENTRY VIEW ────────────────────────────────────────────────────── */
.apk-staff-done-btn {
  -webkit-tap-highlight-color: rgba(99, 102, 241, 0.15);
  touch-action: manipulation;
}
.apk-staff-done-btn:active { transform: scale(0.88); }

/* [FIX-NOTECARD-01] Was "── NOTES GRID ──" here, targeting `.notes-grid` — the real element is
   `class="notes-card-grid" id="notes-grid"` (app.js, renderNotesView), so `.notes-grid` never
   matched anything and these breakpoints never fired. Folded into the real .notes-card-grid rule
   under "NOTES — Card Grid" above; see that block's comment. */

/* ── MODAL CENTERED ON MOBILE [r102] ────────────────────────────────────── */
@media (max-width: 640px) {
  .modal { align-items: center; }
  .modal-content {
    width: 100%;
    max-width: 460px;
    border-radius: var(--radius-xl);
    margin: 0 auto;
    max-height: 92dvh;
    max-height: 92vh;
  }
  #add-chore-modal .modal-body,
  #add-reminder-modal .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }
}

/* ── DOCUMENTED !important OVERRIDES ────────────────────────────────────────
 * Per CLAUDE.md: old FABs replaced by side rail. Must stay hidden.
 * Per architecture.md: staff mode requires iron-clad chrome isolation.
 * These are the ONLY justified uses of !important in this codebase.
 */

/* Old FABs: permanently replaced by #apk-side-rail (architecture.md §Navigation) */
#apk-smart-fab,
#apk-cart-fab { display: none !important; }

/* Staff mode: full chrome isolation (architecture.md §Staff Entry View) */
body.staff-mode .header,
body.staff-mode #nav-container,
body.staff-mode #bottom-nav,
body.staff-mode .command-bar,
body.staff-mode #apk-smart-fab,
body.staff-mode #apk-cart-fab,
body.staff-mode .dot-fab,
body.staff-mode #dot-fab,
body.staff-mode #header-mindmap-btn,
body.staff-mode #header-calendar-btn,
body.staff-mode #header-actions-group,
body.staff-mode #apk-user-avatar,
body.staff-mode #apk-side-rail { display: none !important; }
body.staff-mode #main-content   { padding-top: 0 !important; margin-left: 0 !important; padding-bottom: 0 !important; }
body.staff-mode #view-staff     { display: block !important; padding: 0 !important; min-height: 100dvh; }

/* ── Command bar auto-collapse (body.cmd-bar-hidden set by scroll handler) ───
 * Portrait and landscape: slides below viewport when user scrolls down.
 * Content padding stays the same so layout never jumps.
 */

@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

/* ── SCROLL BUFFER: landscape phone ─────────────────────────────────────────
 * No bottom-nav in landscape. Command bar at bottom:4px, height ~40px.
 * 60px buffer clears it with breathing room.
 */
@media (orientation: landscape) and (max-height: 430px) {
  .view-panel.active,
  #view-home.active,
  #view-staff.active,
  #view-family.active {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  #conversation-messages,
  .conversation-messages {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 20px);
  }
}

/* ── Command bar + side rail: ONLY visible when authenticated ────────────────
 * Unauthenticated (login screen) and staff-mode both hide all chrome.
 * This also prevents the bar from showing through the bottom of the login modal.
 */

/* ═══════════════════════════════════════════════════════════════════
   UNIFIED SCROLL-CHROME SYSTEM — LinkedIn-style hide/show
   ═══════════════════════════════════════════════════════════════════
   One body class controls all mobile chrome together:

     body.chrome-hidden
       → bottom nav slides DOWN off screen
       → command bar slides DOWN off screen
       → side rail fades out

   Triggered by scroll-down. Removed by scroll-up or tap.
   Only applies on mobile (≤640px, show-bn).
   Desktop/tablet: no effect (no show-bn class).

   body.has-modal
       → side rail hidden  (focus on modal context)
       → command bar hidden
       → cart panel already handles its own overlay
   ═══════════════════════════════════════════════════════════════════ */

/* ── Transitions: all chrome elements get smooth slide ─────────── */
#bottom-nav {
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              opacity   .22s ease;
}
.command-bar,
#command-bar,
#apk-chat-bar {
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              opacity   .22s ease,
              height    .25s ease,
              padding   .25s ease !important;
}
#apk-side-rail {
  transition: transform .25s cubic-bezier(.4,0,.2,1),
              opacity   .22s ease;
}

/* ── SCROLL DOWN: both nav + bar slide off screen ───────────────── */
body.chrome-hidden.show-bn #bottom-nav {
  transform: translateY(110%) !important;
  opacity: 0 !important;
}
body.chrome-hidden.show-bn .command-bar,
body.chrome-hidden.show-bn #command-bar,
body.chrome-hidden.show-bn #apk-chat-bar {
  transform: translateY(150%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* FOCUS LOCK via CSS: when input is focused, override chrome-hidden entirely */
body.chrome-hidden.show-bn .command-bar:focus-within,
body.chrome-hidden.show-bn #apk-chat-bar:focus-within {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.chrome-hidden.show-bn #apk-side-rail {
  transform: translateX(60px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── MODAL / CART OPEN: hide side rail, hide cmd bar ────────────── */
body.has-modal #apk-side-rail {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(60px) !important;
}
body.has-modal .command-bar,
body.has-modal #command-bar,
body.has-modal #apk-chat-bar {
  transform: translateY(150%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* [FIX-CARTBOTBOX-02 / 2026-07-22 revert] The previous round tried keeping the global command
   bar visible over a full-screen Cart via a scoped 'has-cart-modal' override — founder feedback:
   doesn't make sense for Cart (which needs full-screen real estate and its own focused input),
   revert. Cart goes back to plain 'has-modal' (bar hidden like any other full-screen sheet) and
   gets its own input+autocomplete bar instead (see #apk-cart-panel below). Global sticky bar
   stays reserved for Home/main landing pages, per founder direction. */
/* Bottom nav: hide on mobile when a full-screen modal/sheet is open.
   Cart panel, settings, calendar, map all use has-modal — they provide
   their own close/back controls so nav is not needed.
   Keeps nav visible on tablet/desktop where it's a sidebar (not bottom bar). */
body.has-modal.show-bn #bottom-nav {
  transform: translateY(110%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .22s ease;
}

/* ── Explicit hidden (auth not loaded, staff mode) ──────────────── */
body.cmd-bar-hidden .command-bar,
body.cmd-bar-hidden #command-bar,
body.cmd-bar-hidden #apk-chat-bar {
  transform: translateY(150%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Unauthenticated: no chrome at all ──────────────────────────── */
body:not(.authenticated) .command-bar,
body:not(.authenticated) #command-bar,
body:not(.authenticated) #apk-chat-bar,
body:not(.authenticated) #apk-side-rail {
  display: none !important;
}

/* ── Side rail: reduce opacity when overlapping action-heavy views ──────────
   Notes and Staff cards have pin/delete icons on the right edge.
   Dimming the rail makes it feel non-intrusive; hover/tap restores it.
   The 44px right padding on cards ensures content never hides behind the rail. */
body.view-notes #apk-side-rail,
body.view-staff #apk-side-rail {
  opacity: 0.45;
  transition: opacity .2s ease;
}
body.view-notes #apk-side-rail:hover,
body.view-staff #apk-side-rail:hover,
body.view-notes #apk-side-rail:focus-within,
body.view-staff #apk-side-rail:focus-within {
  opacity: 1;
}

/* Notes + staff cards: right padding clears the 36px rail */
body.view-notes .apk-note-card,
body.view-notes .note-card {
  padding-right: 44px;
}
body.view-staff .staff-card,
body.view-staff .apk-staff-card {
  padding-right: 44px;
}

/* ── SECONDARY VIEWS: command bar in mini pull-tab mode ─────────── */
@media (max-width: 640px) {
  .command-bar.cmd-bar-mini,
  #apk-chat-bar.cmd-bar-mini {
    height: 36px !important;
    min-height: 36px !important;
    padding: 6px 14px !important;
    border-radius: 18px !important;
    overflow: hidden;
    opacity: .85;
  }
  .command-bar.cmd-bar-mini .command-input,
  .command-bar.cmd-bar-mini textarea,
  #apk-chat-bar.cmd-bar-mini textarea,
  #apk-chat-bar.cmd-bar-mini .command-input,
  .command-bar.cmd-bar-mini .send-btn,
  #apk-chat-bar.cmd-bar-mini .send-btn {
    display: none !important;
  }
  .command-bar.cmd-bar-mini .voice-btn::after,
  #apk-chat-bar.cmd-bar-mini .voice-btn::after {
    content: 'Tap to ask ApunkAI';
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 8px;
    white-space: nowrap;
  }
  .command-bar.cmd-bar-mini .voice-btn,
  #apk-chat-bar.cmd-bar-mini .voice-btn {
    display: flex;
    align-items: center;
    width: auto;
  }
  /* Secondary views: less padding needed (mini bar is 36px, not 60px).
     [FIX-CMDBARINSIGHTS-01 / item 9] Insights removed — it's now a PRIMARY_VIEWS entry (app.js)
     and renders the full command bar by default, same as Home/Chores/etc, so it needs the same
     full clearance as those views (the general .main-content/#apk-main rule already gives that);
     keeping it here would under-reserve space for the full bar and cause the content to crowd it,
     which is the visual "cut off" bug this fix addresses. Staff/Family still use mini mode. */
  body.view-staff .view-panel.active,
  body.view-family .view-panel.active {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 52px) !important;
  }
}

/* ── Landscape phone: bottom nav already hidden, command bar slim ── */
@media (orientation: landscape) and (max-height: 430px) {
  body.chrome-hidden .command-bar,
  body.chrome-hidden #apk-chat-bar {
    transform: translateY(150%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Even in landscape, focus restores bar */
  body.chrome-hidden .command-bar:focus-within,
  body.chrome-hidden #apk-chat-bar:focus-within {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ── Hover override: bar never hides when pointer is on it ──────── */
.command-bar:hover,
#apk-chat-bar:hover {
  /* Prevent hide triggered by inertia scroll while hovering */
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Calendar close: handled by Row 1 flex layout */

/* ── Custom tooltip for copy button (works on desktop hover) ─────────────── */
#apk-cart-header-copy { position: relative; }
#apk-cart-header-copy::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: pre-line;
  min-width: 140px;
  max-width: 220px;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 10;
}
#apk-cart-header-copy:hover::after {
  opacity: 1;
}
#apk-cart-header-copy.copied::after {
  content: '✓ Copied!';
  color: #10b981;
  opacity: 1;
}

/* ══ Calendar: mobile portrait ≤480px ═══════════════════════════════════════
   Row 2 compresses to only the 3 essential controls:
   nav arrows + view tabs + Add button.
   Filter FABs collapse to a single icon.
   Everything must fit in viewport — no horizontal scroll needed.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Row 2: don't center, just fit — let justify-content start */
  #apk-cal-header > div:nth-child(2) {
    justify-content: flex-start !important;
    padding: 0 8px 8px !important;
  }
  /* Compress nav buttons */
  #apk-cal-nav .apk-cal-nav-btn {
    width: 28px !important; height: 28px !important;
  }
  #apk-cal-today-btn {
    padding: 4px 7px !important; font-size: 11px !important;
  }
  /* Compress view tabs */
  .apk-cal-tab {
    padding: 4px 7px !important; font-size: 11px !important;
  }
  /* Compress filter FABs */
  #apk-cal-cat-fab,
  #apk-cal-range-fab {
    padding: 4px 8px !important; font-size: 11px !important;
    gap: 3px !important;
  }
  /* Compress Add button */
  #apk-cal-add-btn {
    padding: 4px 8px !important; font-size: 11px !important;
    gap: 3px !important;
  }
  /* Hide text labels on filter FABs — icon only on small phone */
  #apk-cal-cat-label,
  #apk-cal-range-label { display: none !important; }
  /* Row 2 separators: smaller */
  #apk-cal-header > div:nth-child(2) > div[style*="width:1px"] {
    height: 12px !important;
  }
}

/* Filter button in header: hide on phone — per-view action, not global */
@media (max-width: 640px) {
  #header-filter-btn { display: none !important; }
}

/* Calendar filter labels: hidden on phones (icon only), visible on tablet+ */
@media (max-width: 480px) {
  .apk-cal-filter-label { display: none !important; }
  /* Row 2: ensure it never needs to scroll on 360px */
  #apk-cal-header > div:nth-child(2) > div {
    padding: 0 6px 8px !important;
  }
  .apk-cal-nav-btn { width: 28px !important; height: 28px !important; }
  #apk-cal-today-btn { padding: 4px 7px !important; font-size: 11px !important; }
  .apk-cal-tab { padding: 4px 6px !important; font-size: 11px !important; min-width: 0 !important; }
  #apk-cal-add-btn { padding: 5px 8px !important; font-size: 11px !important; }
  #apk-cal-cat-fab, #apk-cal-range-fab { padding: 4px 6px !important; }
}

/* Notification bell: pulse dot when there are unread signals */
#notif-bell-btn { position: relative; }
#notif-bell-dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444;
  border: 1.5px solid var(--bg-secondary);
  display: none;
  animation: apkPulse 2s ease-in-out infinite;
}
#notif-bell-dot.visible { display: block; }
/* Bell on mobile: show when there are notifications */
@media (max-width: 640px) {
  #notif-bell-btn { display: flex !important; }
}

/* Calendar side FABs removed — filter handled by tune icon in Row 2 */

/* ── View header: always wraps on mobile, never clips actions ─────────────── */
.view-header {
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.view-header-right {
  flex-wrap: wrap !important;
  gap: 6px !important;
}
/* On very small phones: actions below title */
@media (max-width: 420px) {
  .view-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .view-header-right {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .view-header-right .btn-primary {
    flex: 1 !important;
    justify-content: center !important;
  }
}
/* Hide full button labels, show short versions on narrow screens */
@media (max-width: 380px) {
  .btn-label-md { display: none; }
}
/* [FIX-SEARCHCLOSE-01 / founder follow-up, 2026-07-23] Match-count label ("3 / 7") is the least
   essential element in the topbar search bar — prev/next already convey position. Hiding it under
   380px reclaims just enough width to guarantee the Close (X) button always renders on-screen,
   never squeezed off by the fixed-width icon row. See _openTopbarSearch() in app-agentic-os.js. */
@media (max-width: 380px) {
  .apk-tb-search-count { display: none !important; }
}

/* ── Login modal: mobile portrait responsive fix ─────────────────────────── */
@media (max-width: 580px) {
  /* Stack right col below left col cleanly */
  #login-modal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #login-modal [style*="border-right:1px solid"] {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  /* Right col (New Here) on mobile: slightly differentiated bg */
  #login-modal [style*="padding:14px 16px"][style*="display:flex;flex-direction:column"] {
    background: var(--bg-primary) !important;
    border-radius: 0 0 16px 16px !important;
  }
  /* CTA button on mobile: full width, sticky */
  #login-modal .login-onboard-cta {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--bg-secondary) !important;
    padding: 12px 16px !important;
    margin: 0 -16px -20px !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 0 16px 16px !important;
  }
}

/* ── Calendar filter button (tune icon) active state ─────────────────────── */
#apk-cal-filter-btn.active {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background: rgba(99,102,241,.1) !important;
}
/* Filter menu popover */
#apk-cal-filter-menu button:hover {
  background: var(--bg-tertiary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN GUARDRAIL: Close/Back buttons are NEVER clipped
   
   Rule: Any element with [aria-label="Close"] or [aria-label="Back"] or
   [aria-label="Close calendar"] etc. must NEVER be hidden by overflow.
   
   Applied via: flex-shrink:0 on all close/back buttons globally
   + overflow:visible on their immediate flex parent
   ═══════════════════════════════════════════════════════════════════════════ */

/* Universal: all close/back buttons never shrink or clip */
[aria-label="Close"],
[aria-label="Close calendar"],
[aria-label="Close cart"],
[aria-label="Close map"],
[aria-label="Back"],
#apk-cal-close,
#apk-cal-back,
#apk-cart-close,
.modal-close,
.sheet-close,
[id$="-close"],
[id$="-back-btn"] {
  flex-shrink: 0 !important;
  min-width: 36px !important;
  min-height: 36px !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Minimum touch target: 44px for primary close/back (WCAG 2.5.5) */
#apk-cal-close,
#apk-cal-back {
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 10px !important;
}

/* Calendar header: title NEVER overflows its container — truncates instead */
#apk-cal-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  /* On very narrow screens, reduce font size */
}
@media (max-width: 380px) {
  #apk-cal-title { font-size: 13px !important; }
  #apk-cal-add-btn { display: none !important; } /* hide + on tiny screens, accessible via filter menu */
}

/* Bottom nav: back gesture alternative — Android users can also swipe */
/* Ensure no panel ever covers the bottom nav completely without an escape */
.modal-backdrop,
.modal {
  /* Modals always have pointer-events on close button */
}

/* ── ApunkAI Icon FAB — replaces wordy btn-primary in view headers ────────── */
.apk-fab-add {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary, #6366f1);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(99,102,241,.4);
  min-width: 36px;
  min-height: 36px;
}
.apk-fab-add:hover,
.apk-fab-add:active {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(99,102,241,.55);
}
/* Secondary action icon button (filter, sort, etc.) */
.apk-hdr-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.apk-hdr-icon-btn:hover,
.apk-hdr-icon-btn.active {
  background: rgba(99,102,241,.12);
  color: var(--primary);
  border-color: rgba(99,102,241,.3);
}
/* Chores filter row: compact inline, not ugly dropdowns */
#view-chores .filter-row,
#view-reminders .filter-row {
  display: flex;
  gap: 6px;
  padding: 0 16px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}

/* ── Unified compact filter bar ──────────────────────────────────────────────
   No visible select/dropdown — tune icon + active chips + count + export
   ──────────────────────────────────────────────────────────────────────────── */
.table-filter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
/* Hide old pill wrappers */
.tbl-filter-pill { display: none !important; }
/* [FIX-FILTERPILLDEAD-02] Chores' type-filter pill is the one LIVE exception: it wraps the
   real collapsible-group popover trigger (_buildGroupedFilterPill upgrades it at runtime), not
   a legacy pill row. ID-scoped so every other .tbl-filter-pill in the app stays hidden by the
   blanket rule above — single exception, not a regression of the blanket rule's intent. */
#chores-filter-bar .tbl-filter-pill { display: flex !important; }
/* [FIX-CHORESFILTERSTYLE-01 / item 4] Was visually a fully-rounded 20px pill (the base
   .tbl-filter-pill shape, line ~2363) sitting next to Time/Status, which are plain
   .tbl-filter-select boxes with a much less-rounded var(--radius-md) corner — the "type filter
   looks odd next to the others" report. Grouping/popover behavior (_buildGroupedFilterPill) is
   unchanged; only the outer container's box styling now matches .tbl-filter-select exactly, so
   all three filters in this row look like one consistent set. */
#chores-filter-bar .tbl-filter-pill {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 10px;
}
#chores-filter-bar .tbl-filter-pill:hover { border-color: var(--primary); }
/* Filter popover hover */
#apk-tbl-filter-pop button:hover {
  background: var(--bg-tertiary) !important;
}


/* ══════════════════════════════════════════════════════════════════════════════
   SIDE RAIL FEEDBACK SLOT  (#apk-rail-feedback)
   3rd slot on right rail — subtle at rest, muted colour to not compete with
   Cart and Actions. Tapping opens the same feedback sheet.
   ══════════════════════════════════════════════════════════════════════════════ */
#apk-rail-feedback .rail-icon {
  color: var(--text-tertiary, #64748b);
  font-size: 17px;
  transition: color .15s;
}
#apk-rail-feedback:hover .rail-icon,
#apk-rail-feedback:focus-visible .rail-icon {
  color: var(--primary, #6366f1);
}
#apk-rail-feedback:hover,
#apk-rail-feedback:focus-visible {
  background: rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.25);
}
#apk-rail-feedback:active { opacity: .75; }

/* Legacy cmdbar feedback button — hidden now that it lives on rail */
.apk-cmdbar-fb-btn { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   FEEDBACK PANEL  (.apk-fb-panel)
   Right-anchored floating panel — cross-browser safe (Firefox, Chrome, Safari).
   No inline style overrides. Single entry point via command bar rate_review icon.
   ══════════════════════════════════════════════════════════════════════════════ */
/* [FIX-TOURFBZ-01, r163] This panel declared `position: fixed` and NO z-index at all, so it
   stacked purely by DOM order and lost to every element that declares one — including every
   `.modal` (10000) and every modalManager-escalated inline value. Feedback is invokable from
   anywhere, including from on top of a modal you are complaining about, so it has to sit above
   the surface it describes. Same tier reasoning as the tour: above Smart Import (13000), below
   auth-blocking pickers (14000). */
.apk-fb-panel {
  position: fixed;
  /* [FIX-FBCOLLIDE-01, founder note "feedback modal collided with bottom panel"] Was a bare
     84px, which assumed a fixed command-bar/bottom-chrome height — on devices with a real
     gesture-bar/home-indicator safe area (most modern iPhones, some Android), the actual usable
     clearance is smaller than 84px, so this panel's bottom edge visually crowded/overlapped the
     command bar instead of sitting cleanly above it. Same safe-area pattern already used
     correctly elsewhere in this file (openFeedbackSheet's own inner sheet). */
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));  /* above command bar */
  right: 14px;
  left: auto;
  /* [FIX-FBZINDEX-01, 2026-07-30] Was a bare, undocumented 1300 — that's BELOW the command bar
     (--z-cmdbar: 2000, app-agentic-os.css) and the smart FAB (--z-fab: 3000) this panel opens
     from, so the command bar's own bottom composer strip could render on top of / crowd the
     panel's lower edge (confirmed match for the reported "feedback modal hard to see clearly"
     bug). Fixed by adopting the real SSOT z-index scale (app-agentic-os.css's "Z-INDEX LAW")
     instead of a magic number — this panel is a standalone floating panel, same civic tier as
     "standard modals," so it uses --z-modal like the rest of that tier. Do not hardcode a new
     number here again; extend the shared scale if a new tier is ever genuinely needed. */
  /* [FIX-FBZDUPE-01, r166] Was `var(--z-modal, 5000)`, and r163's attempt to raise this panel
     added a SECOND z-index at the TOP of this same block — which CSS discards, because the last
     declaration in a rule wins. The fix looked applied, the file read correctly, and the panel
     never moved. One property, one declaration, per rule.
     --z-explain, not --z-modal: this panel is invokable from anywhere, including on top of the
     modal being complained about, so it belongs above that tier — and below --z-conf, which
     blocks progress. */
  z-index: var(--z-explain, 13500);
  width: min(320px, calc(100vw - 28px));
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
  animation: apkPanelIn .2s ease;
  font-family: inherit;
}
@keyframes apkPanelIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.apk-fb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}
.apk-fb-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #f1f5f9);
  line-height: 1.3;
}
.apk-fb-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.apk-fb-close:hover { background: var(--bg-tertiary, #2d3748); }

/* Rating row */
.apk-fb-ratings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.apk-fb-rating-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 1.5px solid var(--border, #334155);
  border-radius: 10px;
  background: var(--bg-tertiary, #2d3748);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-family: inherit;
}
.apk-fb-rating-btn:hover {
  border-color: var(--primary, #6366f1);
  background: rgba(99, 102, 241, .08);
}
.apk-fb-rating-btn.selected {
  border-color: var(--primary, #6366f1);
  background: rgba(99, 102, 241, .12);
}
.apk-fb-emoji  { font-size: 20px; line-height: 1; }
.apk-fb-rating-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
}
.apk-fb-rating-btn.selected .apk-fb-rating-lbl {
  color: var(--primary, #6366f1);
}

/* Textarea */
.apk-fb-textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--border, #334155);
  border-radius: 10px;
  background: var(--bg-primary, #0f172a);
  color: var(--text-primary, #f1f5f9);
  font-size: 12px;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
  margin-bottom: 10px;
  transition: border-color .15s;
  outline: none;
}
.apk-fb-textarea:focus { border-color: var(--primary, #6366f1); }
.apk-fb-textarea::placeholder { color: var(--text-tertiary, #64748b); }

/* Send button */
.apk-fb-send-btn {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  background: var(--primary, #6366f1);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .15s, transform .1s;
}
.apk-fb-send-btn:hover:not(:disabled)  { opacity: .9; }
.apk-fb-send-btn:active:not(:disabled) { transform: scale(.98); }
.apk-fb-send-btn:disabled              { opacity: .6; cursor: not-allowed; }

/* ApunkAI branded spinner — matches the blue ring used elsewhere in the app */
.apk-fb-spin {
  width: 16px;
  height: 16px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: apkFbSpin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes apkFbSpin { to { transform: rotate(360deg); } }

/* Status line */
.apk-fb-status {
  font-size: 11px;
  text-align: center;
  margin-top: 6px;
  min-height: 14px;
  color: var(--text-secondary, #94a3b8);
}

/* Mobile: shift up above bottom-nav */
@media (max-width: 640px) {
  .apk-fb-panel {
    /* [FIX-FBCOLLIDE-01] same safe-area fix as the desktop rule above, mobile stack is taller
       (bottom-nav + command bar), so the base clearance stays higher, but still needs the
       safe-area addition on top for notched/gesture-bar devices. */
    bottom: calc(130px + env(safe-area-inset-bottom, 0px));   /* above bottom-nav + command bar stack */
    right: 10px;
    width: calc(100vw - 20px);
    max-width: 360px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ApunkAI patch14+ — Adaptive UI, Agent Cards, Bot Banner, Flows
   ═══════════════════════════════════════════════════════════════ */

/* ── Planner tiles: 3-col on mobile, fluid on larger screens ─── */
.apk-planner-tile { touch-action: manipulation; }
@media (max-width: 480px) {
  #view-planner [style*="auto-fill,minmax(140px"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  #view-planner [style*="auto-fill,minmax(140px"] .apk-planner-tile {
    padding: 10px 6px !important;
  }
  #view-planner [style*="auto-fill,minmax(140px"] .apk-planner-tile .material-symbols-outlined {
    font-size: 20px !important;
  }
}
/* Planner card grid — 1 col on xs, 2 col on sm, auto on md+ */
#planner-cards-grid { grid-template-columns: 1fr; }
@media (min-width: 420px) {
  #planner-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 700px) {
  #planner-cards-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ── Planner view header: wrap gracefully on small screens ────── */
#view-planner .view-header {
  flex-wrap: wrap !important;
  gap: 10px !important;
}
@media (max-width: 480px) {
  #view-planner .view-header > div:last-child {
    width: 100%;
    flex-wrap: wrap;
  }
  #view-planner .view-header #planner-search {
    min-width: 0 !important;
    flex: 1 1 120px;
  }
}

/* Landscape phone: planner tiles 2-row scroll */
@media (orientation: landscape) and (max-height: 430px) {
  #view-planner [style*="auto-fill,minmax(140px"] {
    grid-template-columns: repeat(6, minmax(100px, 1fr)) !important;
    overflow-x: auto;
  }
}

/* ── AgenticFlowPanel: ALWAYS full-screen on every device ───────
   This is ApunkAI's primary agentic surface — users need maximum
   real estate to interact with the bot across all 6 flows.
   Never constrain it to a modal or side-drawer.              ──── */
/* P0 fix: display:none avoids Android Chrome pointer-events/visibility timing bugs */
/* #apk-agentic-panel: see canonical rule below */

/* Header: comfortable tap targets, safe-area aware */
#apk-agentic-panel > div:first-child {
  padding-top: max(14px, env(safe-area-inset-top, 14px));
  padding-bottom: 14px;
}

/* Body: scroll with momentum, pad above bottom-nav */
#apk-agentic-panel #apk-agentic-panel-body {
  padding-bottom: max(100px, calc(env(safe-area-inset-bottom, 0px) + 80px));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Desktop: content area gets comfortable padding but panel stays full-screen */
@media (min-width: 900px) {
  #apk-agentic-panel #apk-agentic-panel-body {
    padding-left: 32px;
    padding-right: 32px;
  }
  #apk-agentic-panel > div:first-child {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Meal plan week-grid: horizontal scroll on any screen */
#apk-agentic-panel .meal-week-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#apk-agentic-panel table { min-width: 480px; }


/* ── Global bot-working banner ───────────────────────────────── */
#apk-bot-global-banner {
  font-family: inherit;
  max-width: 220px;
  /* base position set inline by JS: bottom:80px right:14px */
}
/* On desktop: clear of sidebar, keep right-aligned */
@media (min-width: 641px) {
  #apk-bot-global-banner { bottom: 24px !important; right: 20px !important; left: auto !important; }
}
/* On landscape phone: lower so it doesn't cover action row */
@media (orientation: landscape) and (max-height: 430px) {
  #apk-bot-global-banner { bottom: 12px !important; right: 12px !important; left: auto !important; }
}
/* Never obstruct bottom-nav — stay above it */
@media (max-width: 640px) {
  #apk-bot-global-banner { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; right: 12px !important; left: auto !important; }
}

/* ── Group Agent Person Cards ────────────────────────────────── */
/* Hide scrollbar on agent card strip */
#view-insights [style*="overflow-x:auto"]:last-of-type::-webkit-scrollbar { display: none; }
#view-insights [style*="overflow-x:auto"]:last-of-type { scrollbar-width: none; }

@keyframes apk-agent-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.35); }
}

/* ── Chai bot: always show on working state across all views ─── */
.apk-chai-bot.working svg .chai-cup {
  animation: chaiCupGlow 1.8s ease-in-out infinite;
}
@keyframes chaiCupGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(245,158,11,.5)); }
  50%       { filter: drop-shadow(0 0 10px rgba(245,158,11,.9)); }
}

/* ── Thinking message: richer animation ─────────────────────── */
.thinking-msg .spinner-small {
  animation: spin 0.7s linear infinite;
  border-color: rgba(99,102,241,.25);
  border-top-color: var(--primary);
}
.thinking-msg .thinking-text {
  animation: apk-thinking-fade 2.4s ease-in-out infinite;
}
@keyframes apk-thinking-fade {
  0%, 100% { opacity: .6; }
  50%       { opacity: 1; }
}

/* ── Import file banner inside flow panel ───────────────────── */
#apk-agentic-panel [style*="attach_file"] {
  transition: background .2s, border-color .2s;
}

/* ── Planner quick-start card: landscape phone compact ───────── */
@media (orientation: landscape) and (max-height: 430px) {
  #planner-ai-quickstart { padding: 10px 14px !important; }
  #planner-ai-quickstart .material-symbols-outlined { font-size: 22px !important; }
}

/* ── Care and Finance flow option cards ─────────────────────── */
.agf-care-track { cursor: pointer; }
.agf-care-track:focus-visible { outline: 2px solid var(--primary); }
label:has(.agf-care-track:checked) {
  border-color: var(--primary) !important;
  background: rgba(99,102,241,.07) !important;
}

/* ── Model trust badge in chat messages ─────────────────────── */
.apk-model-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  margin-top: 4px;
  opacity: .7;
  letter-spacing: .3px;
}
.apk-model-badge.rules    { background: rgba(16,185,129,.12); color: #10b981; }
.apk-model-badge.gemini   { background: rgba(59,130,246,.12); color: #3b82f6; }
.apk-model-badge.groq     { background: rgba(245,158,11,.12); color: #f59e0b; }
.apk-model-badge.claude   { background: rgba(99,102,241,.12); color: #6366f1; }

/* ── Responsive chat area on landscape phone ─────────────────── */
@media (orientation: landscape) and (max-height: 430px) {
  .message.bot, .message.user {
    max-width: 85vw;
  }
}

/* ── Planner modal: full adaptive ───────────────────────────── */
@media (max-width: 420px) {
  #planner-modal .modal-content {
    padding: 0 !important;
    border-radius: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }
}

/*
 * ApunkAI — app.css PATCH FILE
 * Version: patch16 · March 2026
 * Apply: Copy these blocks into the BOTTOM of app.css (before the last comment block)
 *
 * Fixes:
 *  1. Planner modal full-screen on Chrome tablet (641–1024px)
 *  2. Connectors modal portal isolation
 *  3. Agent card grid on tablet
 *  4. Chai Bazaar page styles
 *  5. Member/Staff agent card enhancements
 *  6. Manager Agent card style
 */

/* ═══════════════════════════════════════════════════════════════
   PATCH 16 — TABLET FULLSCREEN MODAL FIX
   Chrome Android tablet (641–1024px): planner must be full-screen
   ═══════════════════════════════════════════════════════════════ */

/* Tablet portrait + landscape: planner goes full-screen */
@media (min-width: 641px) and (max-width: 1024px) {
  #planner-modal .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  #planner-modal .modal-body {
    padding: 14px 20px !important;
    height: calc(100dvh - 56px - 56px) !important; /* minus header and footer */
    overflow-y: auto !important;
  }
}

/* Also fix for android-chrome-tablet class detection */
body.android-chrome-tablet #planner-modal .modal-content {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PATCH 16 — CONNECTORS MODAL PORTAL FIX
   Connector sub-panels must use body-level fixed positioning
   not nested inside modal footer
   ═══════════════════════════════════════════════════════════════ */

/* Connectors overlay — portal to body, not modal footer */
#apk-connectors-overlay,
.apk-connectors-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10200 !important; /* above planner modal (10000) */
  background: rgba(0,0,0,.65) !important;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
#apk-connectors-overlay.open,
.apk-connectors-overlay.open {
  display: flex !important;
}
.apk-connectors-sheet {
  background: var(--bg-secondary);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border);
  padding: 20px 20px max(20px, env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 520px;
  max-height: 75vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32, 1.02, .42, 1);
}
#apk-connectors-overlay.open .apk-connectors-sheet,
.apk-connectors-overlay.open .apk-connectors-sheet {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   PATCH 16 — MANAGER AGENT CARD
   The home's AI brain — shown at top of home page
   ═══════════════════════════════════════════════════════════════ */

.apk-manager-agent-card {
  background: linear-gradient(135deg, rgba(99,102,241,.12) 0%, rgba(20,184,166,.08) 100%);
  border: 1.5px solid rgba(99,102,241,.35);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.apk-manager-agent-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #14b8a6, #f59e0b);
  border-radius: 16px 16px 0 0;
}
.apk-manager-agent-card .manager-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.apk-manager-agent-card .manager-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(99,102,241,.2);
  border: 1px solid rgba(99,102,241,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.apk-manager-agent-card .manager-info { flex: 1; min-width: 0; }
.apk-manager-agent-card .manager-title {
  font-size: 12px; font-weight: 800; color: var(--text-primary);
  letter-spacing: .1px;
}
.apk-manager-agent-card .manager-sub {
  font-size: 11px; color: var(--text-secondary); margin-top: 2px;
}
.apk-manager-agent-card .manager-status {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: #10b981; font-weight: 700;
}
.apk-manager-agent-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
  animation: apk-agent-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.apk-manager-agent-card .manager-flows {
  display: flex; gap: 6px; margin-top: 10px;
  flex-wrap: wrap;
}
.apk-flow-chip {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px; font-weight: 700;
  border: 1px solid;
  letter-spacing: .2px;
}

/* ═══════════════════════════════════════════════════════════════
   PATCH 16 — MEMBER / STAFF AGENT CARDS
   Richer persona cards with encrypted badge + Buddhi indicator
   ═══════════════════════════════════════════════════════════════ */

.apk-agent-card-v2 {
  background: var(--bg-secondary);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  transition: border-color .18s, box-shadow .18s;
  position: relative;
  overflow: hidden;
}
.apk-agent-card-v2:hover {
  border-color: var(--agent-color, #6366f1);
  box-shadow: 0 4px 20px var(--agent-color, #6366f1)22;
}
.apk-agent-card-v2 .agent-type-badge {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 11px; font-weight: 800;
  padding: 2px 7px; border-radius: 10px;
  border: 1px solid;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.apk-agent-card-v2 .agent-type-badge.member {
  color: #6366f1; border-color: rgba(99,102,241,.4);
  background: rgba(99,102,241,.1);
}
.apk-agent-card-v2 .agent-type-badge.staff {
  color: #10b981; border-color: rgba(16,185,129,.4);
  background: rgba(16,185,129,.1);
}
.apk-agent-card-v2 .agent-avatar {
  width: 42px; height: 42px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 8px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
}
.apk-agent-card-v2 .agent-name {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apk-agent-card-v2 .agent-role {
  font-size: 11px; color: var(--text-secondary); margin-top: 1px;
}
.apk-agent-card-v2 .agent-id { display: none !important;
  font-size: 11px; color: var(--text-tertiary);
  font-family: monospace; margin-top: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 7px;
  display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apk-agent-card-v2 .agent-buddhi {
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.25);
  border-radius: 8px;
  display: flex; align-items: center; gap: 6px;
}
.apk-agent-card-v2 .buddhi-label {
  font-size: 11px; color: #f59e0b; font-weight: 700;
}
.apk-agent-card-v2 .buddhi-bar {
  flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden;
}
.apk-agent-card-v2 .buddhi-bar-fill {
  height: 100%; background: #f59e0b; border-radius: 2px;
  transition: width .4s ease;
}
.apk-agent-card-v2 .agent-actions {
  display: flex; gap: 6px; margin-top: 10px;
}
.apk-agent-card-v2 .btn-agent-talk,
.apk-agent-card-v2 .btn-agent-share {
  flex: 1; padding: 6px 0;
  border-radius: 10px; border: 1px solid var(--border);
  font-size: 11px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: background .15s, border-color .15s;
  background: transparent; color: var(--text-primary);
  font-family: inherit;
}
.apk-agent-card-v2 .btn-agent-talk:hover { background: var(--bg-primary); }
.apk-agent-card-v2 .btn-agent-share {
  color: var(--agent-color, #6366f1);
  border-color: var(--agent-color, #6366f1)44;
}
.apk-agent-card-v2 .btn-agent-share:hover {
  background: var(--agent-color, #6366f1)10;
}

/* ═══════════════════════════════════════════════════════════════
   PATCH 16 — AGENT CARDS GRID
   2-col on tablet, horizontal scroll on mobile
   ═══════════════════════════════════════════════════════════════ */

.apk-agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

@media (max-width: 640px) {
  .apk-agent-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .apk-agent-grid .apk-agent-card-v2 {
    flex-shrink: 0;
    width: 170px;
    scroll-snap-align: start;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PATCH 16 — CHAI BAZAAR PAGE STYLES
   ═══════════════════════════════════════════════════════════════ */

.chai-bazaar-header {
  background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 50%, #1e3a2f 100%);
  border-radius: 16px;
  padding: 20px 18px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(251,191,36,.2);
}
.chai-bazaar-header::after {
  content: '☕';
  position: absolute;
  right: 16px; top: 16px;
  font-size: 48px; opacity: .15;
  transform: rotate(-10deg);
}
.chai-bazaar-header h2 {
  font-size: 20px; font-weight: 900; color: #fbbf24;
  margin-bottom: 4px;
}
.chai-bazaar-header p {
  font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.5;
}
.chai-biscuit-balance {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3);
  border-radius: 20px; padding: 4px 12px; margin-top: 10px;
  font-size: 11px; font-weight: 700; color: #fbbf24;
}

.bazaar-tabs {
  display: flex; gap: 6px; margin-bottom: 14px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.bazaar-tab {
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
  background: transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
  font-family: inherit;
}
.bazaar-tab.active {
  background: rgba(251,191,36,.15); border-color: rgba(251,191,36,.4);
  color: #fbbf24;
}

.bazaar-card {
  background: var(--bg-secondary);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  transition: border-color .18s, box-shadow .18s;
  cursor: pointer;
}
.bazaar-card:hover {
  border-color: rgba(251,191,36,.4);
  box-shadow: 0 4px 16px rgba(251,191,36,.1);
}
.bazaar-card .bazaar-card-header {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;
}
.bazaar-card .bazaar-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.bazaar-card .bazaar-title {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  line-height: 1.3;
}
.bazaar-card .bazaar-desc {
  font-size: 11px; color: var(--text-secondary); line-height: 1.5;
  margin-top: 2px;
}
.bazaar-card .bazaar-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  flex-wrap: wrap;
}
.bazaar-tag {
  padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
  background: var(--bg-primary); border: 1px solid var(--border);
  color: var(--text-secondary);
}
.bazaar-card .bazaar-price {
  margin-left: auto; display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800; color: #fbbf24;
}
.bazaar-card .bazaar-actions {
  display: flex; gap: 6px; margin-top: 10px;
}
.btn-bazaar-buy {
  flex: 1; padding: 8px;
  border-radius: 10px;
  background: rgba(251,191,36,.15);
  border: 1px solid rgba(251,191,36,.35);
  color: #fbbf24; font-size: 11.5px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: background .15s;
}
.btn-bazaar-buy:hover { background: rgba(251,191,36,.25); }
.btn-bazaar-preview {
  padding: 8px 14px; border-radius: 10px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 11.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.btn-bazaar-preview:hover { background: var(--bg-primary); color: var(--text-primary); }

.bazaar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

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

/* ═══════════════════════════════════════════════════════════════
   PATCH 16 — WORKER AGENT STRIP (RENAMED)
   Update section title + subtitle copy
   ═══════════════════════════════════════════════════════════════ */

/* The .apk-worker-title class can be set dynamically by JS for cleaner naming */
.apk-worker-section-title {
  font-size: 12.5px; font-weight: 800; color: var(--text-primary); letter-spacing: .1px;
}
.apk-worker-section-sub {
  font-size: 11px; color: var(--text-secondary); margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   PATCH 16 — FEATURE FLAGS / TIER DISPLAY
   Clean tier comparison on Planner/Settings pages
   ═══════════════════════════════════════════════════════════════ */

.apk-tier-compare {
  display: grid;
  /* FIXED: nested min() inside minmax() crashes Android 9 WebView / Chrome < 79.
     Replaced with safe media-query ladder universally supported since 2019. */
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0;
  align-items: start;
}
@media (min-width: 480px) {
  .apk-tier-compare {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}


.apk-tier-card {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  overflow: visible; /* Allow tooltips/badges to pop out */
  display: flex;
  flex-direction: column;
  /* REMOVED: height:100% caused card to collapse to 0 with align-items:start on grid */
  gap: 12px;
}

.apk-tier-card.active-tier {
  border-color: var(--tier-color, #6366f1);
  background: linear-gradient(135deg, var(--tier-color, #6366f1)08, transparent);
}
.apk-tier-card.active-tier::before {
  content: '✓ Current';
  position: absolute; top: 8px; right: 8px;
  font-size: 11px; font-weight: 700; color: var(--tier-color, #6366f1);
}
.apk-tier-name {
  font-size: 13px; font-weight: 800; color: var(--text-primary); margin-bottom: 3px;
}
.apk-tier-price {
  font-size: 11px; color: var(--text-secondary); margin-bottom: 8px;
}
.apk-tier-feature {
  font-size: 11px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 5px; margin-bottom: 4px;
}
.apk-tier-feature .feat-check { color: #10b981; font-size: 11px; }
.apk-tier-feature .feat-lock  { color: var(--text-tertiary); font-size: 11px; }



/* ================================================================
   APUNKAI v0.0.1 — PATCH 2026-03
   New CSS classes only. Zero original rules changed.
   Single !important rule below is the only documented JS contract.
   ================================================================ */

/* ─── Visibility contract ────────────────────────────────────────
   JS must ONLY use classList.add/remove('is-hidden').
   Never use el.style.display or el.style.setProperty('display',...).
   This !important is justified: it must beat display:flex/grid on element.
   ─────────────────────────────────────────────────────────────── */
.is-hidden { display: none !important; }

/* ─── Upgrade modal overlay ──────────────────────────────────── */
.apk-upgrade-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
  padding: 12px 12px max(20px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.apk-upgrade-wrap {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 20px 16px 16px;
  max-width: 440px;
  width: 100%;
  border: 1px solid var(--border);
  position: relative;
  margin-top: 8px;
  /* [FIX-MODALRESPONSIVE-01] Belt-and-suspenders with .apk-upgrade-overlay's own
     overflow-y:auto — guarantees content can never visually clip/get "stuck" off-screen on a
     short viewport (e.g. devtools docked, taking half the window height) regardless of how the
     overlay's own scrolling behaves in a given browser. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}
.apk-plan-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
@media (min-width: 500px) {
  .apk-upgrade-overlay { align-items: center; padding: 16px; }
  .apk-upgrade-wrap { padding: 24px 20px 20px; border-radius: 20px; margin-top: 0; max-height: calc(100vh - 32px); }
}
/* [FIX-MODALRESPONSIVE-01, founder request 2026-07-26, "payment modal in laptop etc is not
   visible clearly and is blocked, ensure ... clearly visible and responsive"] Below 860px this
   modal is still the original single-column mobile layout (untouched — that's the primary,
   most-used surface, a PWA opened mostly on phones). Above it, a laptop/desktop viewport
   actually has room, so the modal widens and its plan cards move into a real multi-column grid
   instead of staying a bare 440px-wide vertical strip lost in a sea of dimmed background — the
   exact "not visible clearly" complaint from the screenshot. auto-fit/minmax means this also
   degrades gracefully to fewer columns on anything in between (tablet-width, a laptop with
   devtools docked eating half the screen, etc.) without a second breakpoint. */
@media (min-width: 860px) {
  .apk-upgrade-wrap { max-width: 900px; }
  .apk-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
    gap: 16px;
  }
}
.apk-upgrade-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: var(--error);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.apk-upgrade-close:hover { background: rgba(239, 68, 68, 0.22); }
.apk-upgrade-hdr { text-align: center; margin-bottom: 20px; }
.apk-upgrade-hdr .material-symbols-outlined {
  font-size: 40px;
  color: var(--primary);
  display: block;
  margin-bottom: 8px;
}
.apk-upgrade-title { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--text-primary); }
.apk-upgrade-sub   { margin: 0; font-size: 13px; color: var(--text-secondary); }

/* ─── Plan cards ─────────────────────────────────────────────── */
.apk-plan-card { border-radius: 14px; padding: 14px; margin-bottom: 12px; position: relative; }
@media (min-width: 400px) {
  .apk-plan-card { padding: 18px; border-radius: 16px; margin-bottom: 14px; }
}
.apk-plan-card--chai { border: 2px solid #7c3aed; background: rgba(124, 58, 237, 0.05); }
.apk-plan-card--bhai { border: 1px solid var(--border); background: var(--bg-secondary); }
.apk-plan-card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 8px;
}
.apk-plan-name    { font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 0 0 3px; }
.apk-plan-tagline { font-size: 12px; color: var(--text-secondary); margin: 0; }
.apk-plan-price   { font-size: 22px; font-weight: 800; white-space: nowrap; flex-shrink: 0; }
.apk-plan-price--chai { color: #7c3aed; }
.apk-plan-price--bhai { color: #4f46e5; }
.apk-plan-price sub   { font-size: 12px; font-weight: 400; vertical-align: baseline; }
.apk-plan-badge-popular {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #7c3aed;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.4px;
}
.apk-plan-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.45;
}
/* [FIX-FOUNDINGBADGE-01] Subtle, in-flow "founding member" pill — stacked under the plan price
   inside the same flex column (app.js showUpgrade()'s _apkFoundingPill()), never absolutely
   positioned, so it can never collide with the price text it used to overlap. */
.apk-founding-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 2px 7px 2px 8px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}
.apk-founding-pill .material-symbols-outlined { font-size: 11px; }
.apk-plan-feat .material-symbols-outlined {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--primary);
}
.apk-plan-cta {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  margin-top: 14px;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.apk-plan-cta:hover  { opacity: 0.92; }
.apk-plan-cta:active { transform: scale(0.98); }
.apk-plan-cta--chai  { background: linear-gradient(135deg, #7c3aed, #4f46e5); }
.apk-plan-cta--bhai  { background: linear-gradient(135deg, #4f46e5, #2563eb); }
.apk-upgrade-biscuit {
  margin-top: 14px;
  padding: 11px 14px;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.apk-upgrade-biscuit-icon  { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.apk-upgrade-biscuit-title { font-size: 12px; font-weight: 700; color: var(--warning); margin-bottom: 2px; }
.apk-upgrade-biscuit-desc  { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }
.apk-upgrade-pilot-note    { text-align: center; font-size: 11px; color: var(--text-secondary); margin: 10px 0 0; }

/* ─── Planner tile grid ──────────────────────────────────────── */
.apk-planner-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 480px) {
  .apk-planner-tile-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
.apk-planner-tile {
  background: var(--tile-bg, var(--bg-secondary));
  border: 1.5px solid var(--tile-border, var(--border));
  border-radius: 14px;
  padding: 14px 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
  user-select: none;
}
.apk-planner-tile:hover,
.apk-planner-tile:focus-visible {
  border-color: var(--tile-accent, var(--primary));
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.18);
  transform: translateY(-1px);
}
.apk-planner-tile:active { transform: translateY(0) scale(0.98); }
.apk-planner-tile--meal    { --tile-bg: rgba(99,102,241,.12); --tile-border: rgba(99,102,241,.3);  --tile-accent: #6366f1; }
.apk-planner-tile--grocery { --tile-bg: rgba(59,130,246,.08); --tile-border: rgba(59,130,246,.25); --tile-accent: #3b82f6; }
.apk-planner-tile--bills   { --tile-bg: rgba(239,68,68,.08);  --tile-border: rgba(239,68,68,.25);  --tile-accent: #ef4444; }
.apk-planner-tile--staff   { --tile-bg: rgba(16,185,129,.08); --tile-border: rgba(16,185,129,.25); --tile-accent: #10b981; }
.apk-planner-tile--care    { --tile-bg: rgba(20,184,166,.08); --tile-border: rgba(20,184,166,.25); --tile-accent: #14b8a6; }
.apk-planner-tile--finance { --tile-bg: rgba(245,158,11,.08); --tile-border: rgba(245,158,11,.25); --tile-accent: #f59e0b; }
.apk-planner-tile .material-symbols-outlined { font-size: 26px; display: block; margin-bottom: 6px; pointer-events: none; }
.apk-planner-tile-label { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.apk-planner-tile-sub   { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.apk-planner-tile-chai-badge {
  position: absolute;
  top: 7px; right: 7px;
  font-size: 11px; font-weight: 800;
  border-radius: 4px; padding: 1px 5px;
  letter-spacing: 0.3px; color: #fff;
  pointer-events: none;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* ─── Worker tile (CSS :hover replaces JS onmouseover) ───────── */
.apk-worker-tile {
  background: var(--bg-secondary);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 13px 10px 11px;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 118px;
  text-align: center;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
  user-select: none;
}
.apk-worker-tile:hover,
.apk-worker-tile:focus-visible {
  border-color: var(--worker-color, var(--primary));
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.18);
  transform: translateY(-1px);
}
.apk-worker-tile:active { transform: translateY(0) scale(0.96); }

/* ═══════════════════════════════════════════════════════════════════════
   APUNKAI 0.1.1 PMF BETA — CSS FIXES & ADDITIONS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Chai bot — non-blocking, contained ─────────────────────────────── */
#apk-voice-btn,
.apk-bot-icon {
  overflow: hidden !important;
  position: relative;
}
#apk-chai-cmdbar {
  pointer-events: none;
  will-change: opacity, transform;
}

/* ── Staff cards ─────────────────────────────────────────────────────── */
.staff-card {
  transition: box-shadow .15s, border-color .15s, transform .1s;
  touch-action: manipulation;
}
.staff-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.18) !important;
  border-color: var(--primary) !important;
}
.staff-card:active { transform: scale(0.98); }

/* ── Planner cards ───────────────────────────────────────────────────── */
.planner-card {
  touch-action: manipulation;
  transition: box-shadow .15s, border-color .15s, transform .1s;
}
.planner-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.2) !important; border-color: var(--primary) !important; }
.planner-card:active { transform: scale(0.98); }
#planner-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}

/* ── Agentic panel — spring open, CSS owns transition ───────────────── */
/* #apk-agentic-panel duplicate: see canonical rule */

/* ── Chai Bazaar ─────────────────────────────────────────────────────── */
.chai-bazaar-header {
  padding: 20px 16px 16px;
  background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(99,102,241,.06));
  border-radius: 14px;
  border: 1px solid rgba(245,158,11,.15);
  margin: 12px 0 16px;
}
.chai-biscuit-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #f59e0b;
}
.bazaar-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 16px; }
.bazaar-tabs::-webkit-scrollbar { display: none; }
.bazaar-tab {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  font-family: inherit;
}
.bazaar-tab.active, .bazaar-tab:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.bazaar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.bazaar-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .1s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bazaar-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.18); border-color: rgba(245,158,11,.4); }
.bazaar-card:active { transform: scale(0.98); }
.bazaar-card-header { display: flex; gap: 12px; align-items: flex-start; }
.bazaar-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.bazaar-title { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin-bottom: 4px; }
.bazaar-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bazaar-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bazaar-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 8px; background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary); }
.bazaar-price { margin-left: auto; font-size: 12px; font-weight: 700; color: #f59e0b; }
.bazaar-actions { display: flex; gap: 8px; margin-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.btn-bazaar-preview {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.btn-bazaar-buy {
  flex: 2;
  padding: 8px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
}
.btn-bazaar-buy:hover { opacity: 0.9; }
.btn-bazaar-buy:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Logout button — clear styling ──────────────────────────────────── */
[data-action="logout"],
button.btn-logout {
  background: rgba(239,68,68,.1) !important;
  border: 1px solid rgba(239,68,68,.35) !important;
  color: #ef4444 !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
}

/* ── Agent persona cards — clean role labels ─────────────────────────── */
.agent-type-badge.staff {
  background: rgba(139,92,246,.12);
  color: #8b5cf6;
  border: 1px solid rgba(139,92,246,.2);
}
.agent-type-badge.member {
  background: rgba(20,184,166,.12);
  color: #14b8a6;
  border: 1px solid rgba(20,184,166,.2);
}
.agent-type-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ── Offline mode indicator ──────────────────────────────────────────── */
.apk-offline-banner {
  position: fixed;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 8000;
  background: rgba(245,158,11,.95);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: opacity .3s;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.apk-offline-banner.hidden { opacity: 0; pointer-events: none; }

/* ── Multi-home guard rail badge ─────────────────────────────────────── */
.apk-multi-home-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(139,92,246,.12));
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}

/* ── Group Pulse ring ────────────────────────────────────────────────── */
.apk-pulse-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  transition: all .3s;
  flex-shrink: 0;
}

/* ── Utility ─────────────────────────────────────────────────────────── */
.is-hidden { display: none !important; }
.apk-no-scroll { overflow: hidden !important; }

/* ── Settings footer always visible ──────────────────────────────────────── */
#settings-modal .modal-footer {
  display: flex !important;
  flex-shrink: 0 !important;
  justify-content: space-between !important;
  padding: 10px 16px !important;
  border-top: 1px solid var(--border) !important;
  align-items: center !important;
  background: var(--bg-secondary) !important;
  position: relative !important; /* not sticky — flex flow handles it */
  z-index: 5 !important;
}
/* settings footer always visible */

/* ── Global FAB button ────────────────────────────────────────────────────── */
.apk-page-fab {
  position: fixed;
  right: 56px; /* clear side rail (36px) + extra gap */
  bottom: calc(var(--cmd-pb, 12px) + 80px); /* above command bar + breathing room */
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--primary, #6366f1);
  color: #fff; border: none;
  box-shadow: 0 4px 18px rgba(99,102,241,.45);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 890;
  touch-action: manipulation;
  transition: transform .14s, box-shadow .14s;
  -webkit-tap-highlight-color: transparent;
}
.apk-page-fab:active { transform: scale(.92); }
.apk-page-fab .material-symbols-outlined { font-size: 26px; pointer-events: none; }
body.has-modal .apk-page-fab { display: none !important; }

/* ── Ellipsis bottom sheet ────────────────────────────────────────────────── */
.apk-ell-sheet {
  position: fixed; inset: 0; z-index: 5200;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.apk-ell-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.52); }
.apk-ell-body {
  position: relative; background: var(--bg-secondary);
  border-radius: 18px 18px 0 0;
  padding: 12px 0 max(env(safe-area-inset-bottom,16px),16px); z-index: 1;
}
.apk-ell-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-tertiary); padding: 4px 20px 10px;
}
.apk-ell-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; cursor: pointer; font-size: 14px;
  color: var(--text-primary); font-family: inherit;
  background: none; border: none; width: 100%; text-align: left;
}
.apk-ell-item:active { background: var(--bg-tertiary); }
.apk-ell-item .material-symbols-outlined { font-size: 20px; color: var(--primary); flex-shrink: 0; }
.apk-ell-item.danger { color: #ef4444; }
.apk-ell-item.danger .material-symbols-outlined { color: #ef4444; }

/* ── Staff task mini modal ────────────────────────────────────────────────── */
#apk-stm {
  position: fixed; inset: 0; z-index: 5500;
  display: flex; flex-direction: column; justify-content: flex-end;
}

/* [FIX-CONFIRMDUP-01, this session] REMOVED: #apk-confirm-modal / #apk-confirm-box / .apk-confirm-
   btns / .apk-confirm-cancel / .apk-confirm-ok — a second, unused confirm-dialog implementation.
   Confirmed dead by exhaustive grep: no JS anywhere (app.js, app-agentic-os.js, app-features-
   ops.js, apk-session-manager.js) ever creates an element with id="apk-confirm-modal" or
   id="apk-confirm-box" — window.apkConfirm and ApkSessionManager.showConfirmOverlay (the ONLY
   place any confirm dialog, including logout, is actually built — see apk-session-manager.js)
   both build .apk-confirm-overlay / .apk-confirm-card, styled in app-agentic-os.css §8. This block
   used var(--bg-secondary) correctly so it wasn't itself the source of the reported "logout modal
   still odd in light theme" — it just sat here as dead, single-owner-violating clutter that could
   mislead the next person debugging that report into styling the wrong selector. See HANDOVER.md
   for what was actually checked on the logout-modal report and what's still open.

/* ── Chai brewing indicator ────────────────────────────────────────────────── */
#apk-chai-brewing {
  position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%);
  z-index: 8800; display: flex; align-items: center; gap: 8px;
  background: var(--bg-secondary); border: 1px solid rgba(245,158,11,.35);
  border-radius: 20px; padding: 7px 14px; font-size: 12px; font-weight: 600;
  color: #f59e0b; opacity: 0; pointer-events: none; transition: opacity .25s;
  white-space: nowrap; box-shadow: 0 2px 12px rgba(245,158,11,.2);
}
#apk-chai-brewing.visible { opacity: 1; }
@keyframes chai-steam {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-6px) scale(1.1); opacity: 0; }
}
.chai-steam-dot {
  width: 4px; height: 4px; border-radius: 50%; background: #f59e0b;
  animation: chai-steam .9s ease-in-out infinite;
}
.chai-steam-dot:nth-child(2) { animation-delay: .3s; }
.chai-steam-dot:nth-child(3) { animation-delay: .6s; }

@media (max-width: 640px) {
  .apk-page-fab {
    right: 56px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 80px);
  }
}
/* ── JALDI emergency button ─────────────────────────────────────────────────── */
/* Intentionally matches .apk-hdr-icon-btn exactly (30×30) — red icon only,
   no red background fill so it doesn't dominate the header. Red only pulses
   when body.jaldi-active is set (actual emergency). */
#apk-jaldi-btn {
  background:   var(--bg-tertiary);
  border:       1px solid var(--border);
  border-radius: 8px;
  color:        #ef4444;
  cursor:       pointer;
  display:      flex;
  align-items:  center;
  justify-content: center;
  width:        30px;
  height:       30px;
  padding:      0;
  flex-shrink:  0;
  transition:   background .15s, transform .1s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
  position:     relative;
}
#apk-jaldi-btn:hover, #apk-jaldi-btn:focus-visible {
  background:   rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.4);
}
#apk-jaldi-btn:active { transform: scale(.93); }
/* Always hide text label — icon only in header */
#apk-jaldi-btn .jaldi-label,
#apk-jaldi-btn span:not(.material-symbols-outlined) { display: none !important; }
#apk-jaldi-btn .material-symbols-outlined { font-size: 17px; }

/* ── Calendar holiday label ─────────────────────────────────────────────── */
.apk-cal-day.has-holiday { background: rgba(245,158,11,.04); }
.apk-cal-holiday-label {
  font-size: 11px;
  color:         #f59e0b;
  font-weight:   600;
  line-height:   1.2;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  max-width:     100%;
  margin-top:    1px;
  letter-spacing: -.1px;
}

/* ── Chai cursor follower (desktop only) ─────────────────────────────────── */
#apk-chai-cursor { pointer-events: none !important; }
@media (hover: none) { #apk-chai-cursor { display: none !important; } }
/**
 * ApunkAI — beta-fixes.css
 * Bug fixes for v0.1.0 beta release.
 * Import this file AFTER app.css in index.html:
 *   <link rel="stylesheet" href="/src/dashboard/app.css?v=HASH">
 *   <link rel="stylesheet" href="/src/dashboard/beta-fixes.css?v=HASH">
 *
 * FIXES IN THIS FILE:
 *   Bug 1 — Planner modal not full-screen on Chrome tablet (641–1024px)
 *   Bug 2 — Connectors overlay portal (stacking context + z-index)
 *   Bug 3 — Agent card grid responsive layout
 *   Bug 4 — Vendor deep-link button layout
 *   Bug 5 — Bottom nav overlap with agent strip on mobile
 *   Bug 6 — Agentic panel full-screen guarantee on all viewports
 *   Bug 7 — Login modal 2-col responsive
 *   Bug 8 — Home stat-grid injected by JS (hss-stat-grid)
 */

/* ─── Bug 1: Planner modal full-screen on tablet (Chrome Android, iPad) ─── */
/* Root cause: .modal-content had 88dvh max on tablet, leaving dead space     */
/* and cropping the meal planner grid. Force full-screen for all modals that  */
/* set the data-fullscreen attribute, or planner-modal specifically.          */

@media (min-width: 641px) and (max-width: 1024px) {
  #planner-modal .modal-content,
  #planner-modal .apk-modal-content {
    width:         100vw  !important;
    max-width:     100vw  !important;
    height:        100dvh !important;
    max-height:    100dvh !important;
    border-radius: 0      !important;
    margin:        0      !important;
  }
}

/* Also enforce full-screen on mobile portrait (< 641px) for planner */
@media (max-width: 640px) {
  #planner-modal .modal-content,
  #planner-modal .apk-modal-content {
    width:         100vw           !important;
    max-width:     100vw           !important;
    height:        100dvh          !important;
    max-height:    100dvh          !important;
    border-radius: 0               !important;
    margin:        0               !important;
    /* Ensure content scrolls inside, not the whole modal */
    overflow-y:    auto            !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── Bug 2: Connectors overlay — portal to document.body ────────────────── */
/* Root cause: portal panel was nested inside #planner-actions modal footer.  */
/* When parent modal closed, connectors lost positioning context but stayed   */
/* at position:fixed;bottom:0 relative to viewport. Fix: always body-level.  */

#apk-connectors-overlay,
.apk-connectors-overlay {
  position:   fixed     !important;
  inset:      0         !important;
  z-index:    10100     !important; /* Above planner modal (z: 10000) */
  background: rgba(0,0,0,0.55);
  display:    flex;
  align-items: flex-end;
  justify-content: center;
  /* Ensure it's always a direct child of body in the stacking context */
}

#apk-connectors-overlay:not(.open),
.apk-connectors-overlay:not(.open) {
  pointer-events: none;
  visibility:     hidden;
  opacity:        0;
}

#apk-connectors-overlay.open,
.apk-connectors-overlay.open {
  pointer-events: auto;
  visibility:     visible;
  opacity:        1;
  transition:     opacity .2s ease;
}

#apk-connectors-sheet,
.apk-connectors-sheet {
  background:    var(--bg-secondary, #1e293b);
  border-radius: 20px 20px 0 0;
  border:        1px solid var(--border, rgba(255,255,255,.12));
  border-bottom: none;
  max-width:     600px;
  width:         100%;
  max-height:    80dvh;
  overflow-y:    auto;
  -webkit-overflow-scrolling: touch;
  padding:       24px 20px max(24px, env(safe-area-inset-bottom, 0px));
  transform:     translateY(100%);
  transition:    transform .28s cubic-bezier(0.32, 0.72, 0, 1);
}

#apk-connectors-overlay.open #apk-connectors-sheet,
.apk-connectors-overlay.open .apk-connectors-sheet {
  transform: translateY(0);
}

/* ─── Bug 3: Agent card grid — 2-col tablet, horizontal scroll mobile ────── */

.agent-member-card {
  flex-shrink: 0;
}

/* Home page agent strip: horizontal scroll on all sizes */
#home-group-agent-strip > div:last-child {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

/* Staff page: 2-col grid on tablet, single col on mobile */
@media (min-width: 641px) {
  #view-staff .agent-member-card,
  #view-family .agent-member-card {
    min-width: calc(50% - 4px);
    max-width: calc(50% - 4px);
  }
}

/* ─── Bug 4: Vendor deep-link buttons ────────────────────────────────────── */

.apk-vendor-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         10px 14px;
  border-radius:   10px;
  font-size:       13px;
  font-weight:     600;
  text-decoration: none;
  background:      var(--bg-secondary);
  border:          1px solid var(--border);
  color:           var(--text-primary);
  white-space:     nowrap;
  cursor:          pointer;
  transition:      border-color .15s, color .15s;
  font-family:     inherit;
}
.apk-vendor-btn:hover {
  border-color: var(--primary, #6366f1);
  color:        var(--primary, #6366f1);
}

/* Vendor button row — horizontal scroll on mobile */
.apk-vendor-row {
  display:         flex;
  gap:             8px;
  overflow-x:      auto;
  padding:         4px 0 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.apk-vendor-row::-webkit-scrollbar { display: none; }

/* ─── Bug 5: Bottom nav overlap with agent strip ─────────────────────────── */
/* Ensure home-group-agent-strip has enough bottom padding on mobile          */

@media (max-width: 640px) {
  #home-group-agent-strip {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  /* Similarly, conversation-messages needs safe padding */
  #conversation-messages {
    padding-bottom: max(180px, calc(100px + env(safe-area-inset-bottom, 0px)));
  }
}

/* ─── Bug 6: Agentic panel full-screen guarantee ─────────────────────────── */
/* CLAUDE.md: CSS owns transform/visibility. JS only sets .open class.        */
/* Never inline transform on #apk-agentic-panel — only CSS handles it.       */

/* ── AGENTIC PANEL: CSS handles ONLY animation ──────────────────────────────
   JS open() sets ALL positioning inline (position:fixed;top:0;left:0;
   width:100vw;height:100vh) — most reliable on Chrome tablet/Safari/Firefox.
   CSS purely drives the slide-in transition + visibility toggle. */
/* ── AGENTIC PANEL: device-agnostic full-viewport ───────────────────────────
   inset:0 = top:0 + right:0 + bottom:0 + left:0. The browser computes w/h
   from the four edges — this is the correct W3C approach for position:fixed
   full-viewport overlays. Avoids 100vw/100vh conflicts on Chrome Android
   (100vw includes scrollbar, 100vh is "large viewport" = may overflow). */
#apk-agentic-panel {
  position:        fixed !important;
  inset:           0 !important;
  width:           auto !important;   /* computed from inset — not set explicitly */
  height:          auto !important;   /* computed from inset — not set explicitly */
  max-width:       none !important;
  max-height:      none !important;
  border-radius:   0 !important;
  z-index:         12000 !important;
  display:         flex !important;
  flex-direction:  column !important;
  overflow:        hidden !important;
  contain:         none !important;
  transform:       translateY(100%);
  visibility:      hidden;
  pointer-events:  none;
  will-change:     transform;
  transition:      transform .28s cubic-bezier(0.32, 0.72, 0, 1),
                   visibility 0s .28s;
}
#apk-agentic-panel.open {
  transform:       translateY(0) !important;
  visibility:      visible !important;
  pointer-events:  auto !important;
  transition:      transform .28s cubic-bezier(0.32, 0.72, 0, 1),
                   visibility 0s 0s;
}
#apk-agentic-panel-body,
#apk-agentic-panel #apk-agentic-panel-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: max(100px, calc(env(safe-area-inset-bottom, 0px) + 80px));
}
@media (min-width: 900px) {
  /* Panel body: comfortable padding on wide screens, never a width cap */
  #apk-agentic-panel-body,
  #apk-agentic-panel #apk-agentic-panel-body { padding-left: 32px; padding-right: 32px; }
  /* Header stays edge-to-edge — its own padding is sufficient */
}
#apk-agentic-panel .meal-week-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#apk-agentic-panel table             { min-width: 480px; }

/* ─── Bug 7: Login modal 2-col responsive ────────────────────────────────── */

.apk-login-wrap {
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 580px) {
  .apk-login-grid {
    grid-template-columns: 1fr !important;
  }
  .apk-login-grid > div:first-child {
    border-right:  none !important;
    border-bottom: 1px solid var(--border);
  }
}

/* Country selector in login */
#login-country,
#fpn-country {
  min-width:    110px;
  max-width:    140px;
  height:       42px;
  padding:      0 8px;
  font-size:    12px;
  background:   var(--bg-tertiary, #334155);
  border:       1.5px solid var(--border, #475569);
  border-radius: 9px;
  color:        var(--text-primary);
  cursor:       pointer;
  font-family:  inherit;
  outline:      none;
}
#login-country:focus,
#fpn-country:focus {
  border-color: var(--primary, #6366f1);
  box-shadow:   0 0 0 2px rgba(99,102,241,.15);
}

/* ─── Bug 8: Home stat-grid (injected by app-auth.js _ensureHomeViewShell) ─ */

.hss-stat-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   8px;
  padding:               12px 0 8px;
  margin-bottom:         8px;
}

@media (max-width: 400px) {
  .hss-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hss-pill {
  background:    var(--bg-secondary, #1e293b);
  border:        1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 12px;
  padding:       10px 8px 8px;
  text-align:    center;
  cursor:        pointer;
  transition:    border-color .15s, background .15s;
  user-select:   none;
}
.hss-pill:hover {
  border-color:  var(--primary, #6366f1);
  background:    rgba(99,102,241,.06);
}
.hss-val {
  font-size:   20px;
  font-weight: 800;
  color:       var(--text-primary);
  line-height: 1;
  margin-bottom: 3px;
}
.hss-lbl {
  font-size: 11px;
  font-weight: 600;
  color:      var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space:    nowrap;
}

/* ─── Agent manager card ─────────────────────────────────────────────────── */

.agent-manager-card {
  border-radius: 14px;
  padding:       14px 14px 12px;
  margin-bottom: 10px;
  position:      relative;
  overflow:      hidden;
}

/* Chai rail animation pulse */
@keyframes apk-chai-ambient {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(16,185,129,.35)); }
  50%       { filter: drop-shadow(0 0 7px rgba(16,185,129,.65)); }
}
#apk-chai-rail {
  animation: apk-chai-ambient 3s ease-in-out infinite;
}
/* When bot is active, switch to amber pulse */
body.bot-active #apk-chai-rail {
  animation: none;
  filter: drop-shadow(0 0 5px rgba(245,158,11,.7)) !important;
}

/* ─── Bazaar cards ───────────────────────────────────────────────────────── */

.bazaar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding-bottom: 24px;
}

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

.bazaar-card {
  background:    var(--bg-secondary);
  border:        1px solid var(--border);
  border-radius: 14px;
  padding:       14px;
  cursor:        pointer;
  transition:    border-color .15s, transform .15s;
  outline:       none;
}
.bazaar-card:hover,
.bazaar-card:focus-visible {
  border-color: var(--primary, #6366f1);
  transform:    translateY(-1px);
}
.bazaar-card-header {
  display:     flex;
  gap:         10px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.bazaar-icon   { font-size: 24px; flex-shrink: 0; }
.bazaar-title  { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin-bottom: 2px; }
.bazaar-desc   { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.bazaar-meta   { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 10px; }
.bazaar-tag    { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
                  background: var(--bg-tertiary, #334155); color: var(--text-secondary); }
.bazaar-price  { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--primary, #f59e0b); }
.bazaar-actions{ display: flex; gap: 8px; margin-top: 10px; }

.bazaar-tabs {
  display:     flex;
  gap:         6px;
  overflow-x:  auto;
  padding:     0 0 12px;
  scrollbar-width: none;
  margin-bottom: 4px;
}
.bazaar-tab {
  padding:       6px 14px;
  border-radius: 20px;
  font-size:     12px;
  font-weight:   600;
  border:        1px solid var(--border);
  background:    var(--bg-secondary);
  color:         var(--text-secondary);
  cursor:        pointer;
  white-space:   nowrap;
  font-family:   inherit;
  transition:    all .12s;
  flex-shrink:   0;
}
.bazaar-tab.active,
.bazaar-tab:hover {
  background:   var(--primary, #6366f1);
  border-color: var(--primary, #6366f1);
  color:        #fff;
}

.btn-bazaar-preview {
  flex: 1;
  padding:       8px;
  border:        1px solid var(--border);
  border-radius: 8px;
  background:    transparent;
  color:         var(--text-secondary);
  font-size:     12px;
  font-weight:   600;
  cursor:        pointer;
  font-family:   inherit;
  transition:    all .12s;
}
.btn-bazaar-preview:hover { border-color: var(--primary, #6366f1); color: var(--primary, #6366f1); }

.btn-bazaar-buy {
  flex: 2;
  padding:          8px 12px;
  border:           none;
  border-radius:    8px;
  background:       linear-gradient(135deg, #f59e0b, #d97706);
  color:            #000;
  font-size:        12px;
  font-weight:      700;
  cursor:           pointer;
  font-family:      inherit;
  transition:       opacity .12s;
}
.btn-bazaar-buy:hover    { opacity: .9; }
.btn-bazaar-buy:disabled { opacity: .4; cursor: not-allowed; }

/* Biscuit balance display */
.chai-biscuit-balance {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       6px 14px;
  border-radius: 20px;
  background:    rgba(251,191,36,.1);
  border:        1px solid rgba(251,191,36,.3);
  font-size:     13px;
  font-weight:   700;
  color:         #f59e0b;
  margin-top:    8px;
}

/* Chai Bazaar header */
.chai-bazaar-header {
  padding:       16px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.chai-bazaar-header h2 {
  font-size:   22px;
  font-weight: 800;
  color:       var(--text-primary);
  margin:      0 0 4px;
}
.chai-bazaar-header p {
  font-size:   12px;
  color:       var(--text-secondary);
  line-height: 1.6;
  margin:      0;
}

/* ─── Upgrade modal — updated pricing ────────────────────────────────────── */
/* Override stale ₹99/₹499 references if any lingered in CSS comments        */

.apk-plan-price--chai::after  { content: none; } /* clear any price injected via CSS */
.apk-plan-price--bhai::after  { content: none; }

/* ─── Skeleton loader ────────────────────────────────────────────────────── */

@keyframes apk-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.apk-skeleton-line {
  border-radius: 6px;
  background:    linear-gradient(90deg,
    var(--bg-secondary) 25%,
    var(--bg-tertiary, #334155) 50%,
    var(--bg-secondary) 75%);
  background-size: 800px 100%;
  animation:     apk-shimmer 1.4s infinite;
}

/* ─── Safe area insets (notch/home-indicator aware) ─────────────────────── */

.command-bar,
#apk-chat-bar,
.chat-input-container {
  padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
}

#bottom-nav {
  /* [RCA-BOTTOMNAV-HEIGHT-01] Was a second, conflicting height (60px) — the base declaration
     (~line 4635) already owns this at 56px, and --apk-chrome-bottom's mobile padding budget
     (~line 4171) is computed against THAT 56px value. A later rule silently changing the actual
     rendered height to 60px means the padding reserved for content no longer matches the nav's
     real height — content can end up flush against (or under) the nav instead of clearing it.
     Don't redeclare height here; adjust the one owner if the nav ever needs to change size. */
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}

/* ─── Global ambient pulse (bot active indicator) ────────────────────────── */

@keyframes apk-agent-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(0.85); }
}

.apk-agent-pulse-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    #10b981;
  animation:     apk-agent-pulse 2.5s ease-in-out infinite;
  display:       inline-block;
  flex-shrink:   0;
}

/* ─── Bot active pulse dot in header (#apk-bot-pulse) ───────────────────── */
/* Replaces the old cursor-follower. Single dot, always in viewport,         */
/* never blocks content. Green = idle/ready. Amber pulse = processing.       */

#apk-bot-pulse {
  /* PMF-FIX: permanently hidden */
  display:       none !important;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #10b981;
  flex-shrink:   0;
  margin-right:  2px;
  transition:    background .3s;
  pointer-events: none;
  align-self:    center;
}

body.authenticated #apk-bot-pulse {
  display: inline-block;
}

body.bot-active #apk-bot-pulse {
  background: #f59e0b;
  animation:  apk-agent-pulse 1.4s ease-in-out infinite;
}

@keyframes apk-agent-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: .5; transform: scale(0.75); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GAO ENTITY SIGNAL — animated chai indicator on active entity cards
   Fired by _gaoSignalStart() / _gaoSignalEnd() via SSE agent_processing event.
   Philosophy: alive but quiet — signals presence without demanding attention.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Positioning wrapper on the entity card ─────────────────────────────── */
.apk-gao-indicator {
  position:         absolute;
  top:              6px;
  right:            6px;
  z-index:          10;
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            22px;
  height:           22px;
  border-radius:    50%;
  background:       rgba(245, 158, 11, 0.12);
  border:           1px solid rgba(245, 158, 11, 0.35);
  pointer-events:   none;   /* never steals clicks */
  opacity:          0;
  transform:        scale(0.6);
  animation:        gao-indicator-enter 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transition:       opacity 0.35s ease, transform 0.35s ease;
  will-change:      opacity, transform;
}

@keyframes gao-indicator-enter {
  to { opacity: 1; transform: scale(1); }
}

/* ── Inline chai SVG steam paths inside indicator ──────────────────────── */
.apk-gao-chai-svg .gao-steam {
  opacity:           0;
  animation:         gao-steam-rise 1.4s ease-in-out infinite;
  transform-origin:  center bottom;
}
.apk-gao-chai-svg .gao-steam:nth-child(2) { animation-delay: 0.25s; }
.apk-gao-chai-svg .gao-steam:nth-child(3) { animation-delay: 0.5s;  }

@keyframes gao-steam-rise {
  0%   { opacity: 0;   transform: translateY(0)    scaleY(1);   }
  30%  { opacity: 0.9; transform: translateY(-2px) scaleY(1.1); }
  70%  { opacity: 0.5; transform: translateY(-4px) scaleY(0.9); }
  100% { opacity: 0;   transform: translateY(-6px) scaleY(0.8); }
}

/* ── Respect prefers-reduced-motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .apk-gao-indicator         { animation: none; opacity: 0.7; transform: scale(1); }
  .apk-gao-chai-svg .gao-steam { animation: none; opacity: 0.5; }
}

/* ── Bot active global state — subtle page-level shimmer on header ──────── */
/* Only fires during bot-active so it never feels like permanent noise.     */
body.bot-active .header {
  border-bottom-color: rgba(245, 158, 11, 0.22);
  transition:          border-bottom-color 0.4s ease;
}
body:not(.bot-active) .header {
  border-bottom-color: var(--border);
  transition:          border-bottom-color 0.6s ease;
}

/* ── File attach button in chat bar ────────────────────────────────────── */
#apk-chat-file-btn {
  flex-shrink:     0;
  width:           34px;
  height:          34px;
  border-radius:   9px;
  border:          1px dashed rgba(99, 102, 241, 0.4);
  background:      rgba(99, 102, 241, 0.06);
  color:           var(--primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      background 0.15s, border-color 0.15s, opacity 0.15s;
  position:        relative;
  overflow:        hidden;
  touch-action:    manipulation;
  -webkit-tap-highlight-color: transparent;
}
#apk-chat-file-btn:hover,
#apk-chat-file-btn:active { background: rgba(99, 102, 241, 0.14); border-color: var(--primary); }
#apk-chat-file-btn .material-symbols-outlined { font-size: 17px; pointer-events: none; }
#apk-chat-file-btn input[type="file"] {
  position:  absolute;
  inset:     0;
  opacity:   0;
  cursor:    pointer;
  font-size: 0;
  width:     100%;
  height:    100%;
}

/* ── Jaldi / emergency — red pulse on the JALDI button header ───────────── */
body.jaldi-active #apk-jaldi-btn {
  border-color: rgba(239, 68, 68, 0.5) !important;
  background:   rgba(239, 68, 68, 0.12) !important;
  animation:    jaldi-pulse 1s ease-in-out infinite;
}
@keyframes jaldi-pulse {
  0%, 100% { box-shadow: 0 0 0 0    rgba(239, 68, 68, 0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);    }
}

/* ── Bot-teach chip ─────────────────────────────────────────────────────── */
.apk-teach-chip {
  display:          inline-flex;
  align-items:      center;
  gap:              5px;
  padding:          5px 12px;
  border-radius:    16px;
  border:           1px dashed rgba(245, 158, 11, 0.45);
  background:       rgba(245, 158, 11, 0.07);
  color:            #f59e0b;
  font-size:        11px;
  font-weight:      600;
  cursor:           pointer;
  font-family:      inherit;
  transition:       background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.apk-teach-chip:hover { background: rgba(245, 158, 11, 0.14); }


/* ═══════════════════════════════════════════════════════════════════════════
   APUNKAI QUANTUM SIGNAL SYSTEM
   Every SSE event from pwa-adapter produces a living visual signal.
   Philosophy: signals are FELT, not announced. The home is always alive.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nuclear full-screen guarantee for overlay views ─────────────────────
   These views MUST be inset:0 on EVERY device including Chrome tablet.
   No media query can override this block. background fills edges always.   */
#apk-agentic-panel {
  position:    fixed  !important;
  inset:       0      !important;
  width:       100dvw !important;
  height:      100dvh !important;
  max-width:   none   !important;
  max-height:  none   !important;
  background:  var(--bg-primary, #0f172a) !important;
  contain:     none   !important;
}
/* Chrome tablet fix: parent overflow must not clip fixed children */
#main-content, .view-panel {
  overflow-x: hidden;
  overflow-y: auto;
}
/* When agentic panel is open, body overflow hidden prevents bleed-through */
body:has(#apk-agentic-panel.open) {
  overflow: hidden !important;
}

/* ── Quantum signal ripple — fires on any entity updated by an agent ─────── */
@keyframes apk-quantum-ripple {
  0%   { box-shadow: 0 0 0 0   rgba(245,158,11,.55); }
  60%  { box-shadow: 0 0 0 10px rgba(245,158,11,0);  }
  100% { box-shadow: 0 0 0 0   rgba(245,158,11,0);   }
}
.apk-quantum-touched {
  animation: apk-quantum-ripple 0.85s ease-out;
}

/* ── Map live signal paths — animated SVG stroke dashes ──────────────────── */
.mm-signal-path {
  stroke-dasharray:  6 4;
  stroke-dashoffset: 0;
  animation:         mm-signal-flow 1s linear infinite;
  pointer-events:    none;
  opacity:           0;
  transition:        opacity 0.3s;
}
.mm-signal-path.active { opacity: 0.8; }
@keyframes mm-signal-flow {
  to { stroke-dashoffset: -20; }
}

/* Pulsing ring on map node when agent is actively processing it */
.mm-node-pulse-ring {
  fill:              none;
  animation:         mm-node-ring 1.6s ease-out infinite;
  transform-origin:  center;
  pointer-events:    none;
}
@keyframes mm-node-ring {
  0%   { stroke-opacity: 0.7; r: 2;  }
  100% { stroke-opacity: 0;   r: 22; }
}

/* ── Nav signal dot — amber pulse on nav icon for active agent intent ──────  */
.nav-btn.apk-signal-active::after,
.bottom-nav-btn.apk-signal-active::after {
  content:       '';
  position:      absolute;
  top:           3px;
  right:         3px;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #f59e0b;
  border:        1.5px solid var(--bg-primary, #0f172a);
  animation:     nav-signal-blink 1.4s ease-in-out infinite;
  pointer-events: none;
  z-index:       5;
}
.nav-btn, .bottom-nav-btn { position: relative; }
@keyframes nav-signal-blink {
  0%,100% { opacity: 1; transform: scale(1);   }
  50%      { opacity:.3; transform: scale(0.65); }
}

/* ── Live entity shimmer — fires on SSE task/note/reminder update ───────── */
@keyframes apk-entity-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.apk-entity-updating {
  background-image: linear-gradient(90deg,
    transparent 0%,
    rgba(245,158,11,.1) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: apk-entity-shimmer 1s ease;
}

/* ── Header ambient glow when bot is active ──────────────────────────────── */
body.bot-active .header {
  border-bottom-color: rgba(245,158,11,.25);
  transition:          border-bottom-color 0.5s;
}
body:not(.bot-active) .header {
  transition: border-bottom-color 0.8s;
}

/* ── Staff distress flow — amber warmth, never panic red ─────────────────── */
.apk-distress-card {
  background:    rgba(245,158,11,.06);
  border:        1.5px solid rgba(245,158,11,.3);
  border-radius: 14px;
  padding:       14px;
}
.apk-distress-option {
  display:       flex;
  align-items:   center;
  gap:           12px;
  width:         100%;
  padding:       13px 14px;
  margin-bottom: 8px;
  border-radius: 12px;
  border:        1.5px solid var(--border);
  background:    var(--bg-tertiary);
  cursor:        pointer;
  font-family:   inherit;
  text-align:    left;
  transition:    border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.apk-distress-option:hover,
.apk-distress-option:active {
  border-color: rgba(245,158,11,.5);
  background:   rgba(245,158,11,.05);
}
.apk-distress-option .opt-icon  { font-size: 24px; flex-shrink: 0; }
.apk-distress-option .opt-label { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.apk-distress-option .opt-sub   { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* ── Signals drill-down panel (right-side on map) ───────────────────────── */
#apk-signals-panel {
  position:       fixed;
  top:            0; right: 0; bottom: 0;
  width:          min(320px,90vw);
  z-index:        9500;
  background:     var(--bg-secondary,#1e293b);
  border-left:    1px solid rgba(255,255,255,.08);
  transform:      translateX(100%);
  transition:     transform .28s cubic-bezier(.32,.72,0,1);
  overflow-y:     auto;
  -webkit-overflow-scrolling: touch;
  display:        flex;
  flex-direction: column;
  pointer-events: none;
}
#apk-signals-panel.open { transform: translateX(0); pointer-events: auto; }
.sig-header {
  padding:       14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display:       flex;
  align-items:   center;
  gap:           8px;
  position:      sticky;
  top:           0;
  background:    var(--bg-secondary);
  z-index:       2;
}
.sig-item {
  padding:       11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  cursor:        pointer;
  transition:    background .12s;
}
.sig-item:hover { background: rgba(255,255,255,.04); }
.sig-item-time  { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.sig-item-dot   {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 4px;
}

/* ── Calendar live-update ring overlay ───────────────────────────────────── */
@keyframes cal-live-ring {
  0%   { opacity: 1; transform: scale(1);    }
  100% { opacity: 0; transform: scale(1.07); }
}
.apk-cal-live-ring {
  position:       absolute;
  inset:          0;
  border:         2px solid rgba(99,102,241,.45);
  border-radius:  inherit;
  animation:      cal-live-ring 2s ease-out forwards;
  pointer-events: none;
  z-index:        2;
}

/* Reduced motion — disable all animations but keep indicators visible */
@media (prefers-reduced-motion: reduce) {
  .apk-gao-indicator, .mm-signal-path, .mm-node-pulse-ring,
  .apk-quantum-touched, .apk-entity-updating, .apk-cal-live-ring {
    animation: none !important;
    opacity: 0.7;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PATCH 17 — Mobile portrait home + Events + Travel + Member colors + Chai
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mobile portrait home: stat pills + agent card ───────────────────────── */
@media (max-width: 640px) {
  /* Stat pills: 2×2 grid on portrait phones instead of 4-wide row */
  .hss-stat-grid {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   8px !important;
    padding:               8px !important;
  }
  .hss-pill {
    padding: 10px 10px !important;
    min-height: 64px !important;
    border-radius: 12px !important;
  }
  .hss-val { font-size: 22px !important; }
  .hss-lbl { font-size: 11px !important; }

  /* Manager card: stack vertically, full width on mobile */
  .apk-manager-agent-card {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }
  .apk-manager-agent-card .manager-header { gap: 8px !important; }
  .apk-manager-agent-card .manager-icon { width: 34px; height: 34px; font-size: 17px !important; }
  .apk-manager-agent-card .manager-title { font-size: 11px !important; }
  .apk-manager-agent-card .manager-flows { gap: 4px !important; margin-top: 8px !important; }

  /* Flow chips: bigger tap target on mobile */
  .apk-flow-chip {
    padding:     5px 10px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
  }

  /* Agentic action chips row: horizontal scroll, never wrap */
  #home-group-agent-strip .apk-flow-chip { min-width: max-content; }

  /* Bot global banner: never overlap FAB on mobile */
  #apk-bot-global-banner {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 130px) !important;
    right: 8px !important;
    left: auto !important;
    max-width: 200px !important;
  }
}

/* ── Chai command bar indicator: flex item, not overlay ─────────────────── */
#apk-chai-cmdbar {
  flex-shrink:     0 !important;
  position:        static !important; /* override old absolute */
  transform:       none !important;   /* override old translate */
  display:         flex !important;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  border-radius:   8px;
  background:      rgba(245,158,11,.1);
  border:          1px solid rgba(245,158,11,.2);
  transition:      opacity .25s, background .25s, border-color .25s;
  overflow:        visible !important;
}
#apk-chai-cmdbar.working,
body.bot-active #apk-chai-cmdbar {
  opacity:      1 !important;
  background:   rgba(245,158,11,.18) !important;
  border-color: rgba(245,158,11,.5) !important;
  animation:    apk-agent-pulse 1.4s ease-in-out infinite;
}

/* ── Travel agent flow chips ─────────────────────────────────────────────── */
.ta-type-chip.selected {
  border-color: var(--primary) !important;
  background:   rgba(99,102,241,.1) !important;
  color:        var(--primary) !important;
}
.ta-traveller-chip.selected {
  border-color: var(--primary) !important;
  background:   rgba(99,102,241,.1) !important;
  color:        var(--primary) !important;
}

/* ── Member color dot in calendar / entity cards ─────────────────────────── */
.member-color-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
  border:        1.5px solid rgba(255,255,255,.2);
  display:       inline-block;
}

/* Color picker in edit modal */
.member-color-picker-wrap {
  display:         flex;
  align-items:     center;
  gap:             8px;
  flex-wrap:       wrap;
  padding:         8px 0;
}
.member-color-swatch {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  border:          2.5px solid transparent;
  cursor:          pointer;
  transition:      border-color .15s, transform .1s;
  flex-shrink:     0;
}
.member-color-swatch:hover { transform: scale(1.15); }
.member-color-swatch.selected { border-color: var(--text-primary) !important; }

/* ── Events (renamed Reminders) view header label ────────────────────────── */
/* The view content still uses 'reminders' internally for routing */
/* Only the NAV LABEL changes to 'Events' — already done in renderNavigation */
/* Ensure view header title shows Events not Reminders */
#view-reminders .view-header-left h2::before {
  content: '📅 Events';
}
#view-reminders .view-header-left h2 {
  font-size: 0; /* hide original text, replaced by ::before pseudo */
}
#view-reminders .view-header-left h2 .material-symbols-outlined,
#view-reminders .view-header-left h2 .view-count-badge {
  font-size: 20px; /* restore icon and badge */
}

/* ── Rail slider: touch-friendly, never blocking on mobile ───────────────── */
/* Rail collapses to icon-only and only expands on tap/hover */
@media (max-width: 640px) {
  .apk-rail-btn {
    max-width: 36px !important; /* always collapsed on mobile */
    border-radius: 8px 0 0 8px !important;
  }
  .apk-rail-btn:active,
  .apk-rail-btn.tapped {
    max-width: 130px !important;
    gap: 6px !important;
    padding: 7px 12px 7px 8px !important;
  }
  .apk-rail-btn:active .rail-label,
  .apk-rail-btn.tapped .rail-label { opacity: 1 !important; max-width: 90px !important; }
}

/* ── Reminder filter bar: type filter chips ──────────────────────────────── */
.reminder-type-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       4px 10px;
  border-radius: 14px;
  border:        1.5px solid var(--border);
  background:    var(--bg-tertiary);
  color:         var(--text-secondary);
  font-size:     11px;
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    all .15s;
  font-family:   inherit;
  flex-shrink:   0;
}
.reminder-type-chip.active,
.reminder-type-chip:hover {
  border-color: var(--primary);
  background:   rgba(99,102,241,.08);
  color:        var(--primary);
}

/* ── Responsible member chip in events/chores ────────────────────────────── */
.entity-responsible-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight:   700;
  border:        1px solid;
  opacity:       0.9;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PATCH 17b — Side rail drawer + Cal footer filters + Rail redesign
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Quick Action Speed-dial — bottom-right floating cluster ─────────────────
   Replaces right-edge strip (conflicts with Android back-gesture swipe).
   Closed: single translucent 40px trigger dot, bottom-right.
   Tap: 3 icon buttons fan upward with inline tip labels.
   Auto-closes after 4s or outside tap. Zero edge conflict.                 */

#apk-side-rail {
  position:        fixed;
  right:           14px;
  bottom:          calc(env(safe-area-inset-bottom, 0px) + 72px);
  z-index:         1100;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-end;
  gap:             8px;
  pointer-events:  none;
}
body:not(.authenticated) #apk-side-rail { display: none !important; }
@media (min-width: 641px) {
  #apk-side-rail { bottom: calc(20px + 64px); }
}

/* ── Trigger button — always visible dot ────────────────────────────────── */
.apk-rail-edge {
  pointer-events:   auto;
  width:            44px;
  height:           44px;
  border-radius:    12px;
  background:       var(--bg-secondary);
  border:           1px solid rgba(99,102,241,.3);
  box-shadow:       0 4px 14px rgba(0,0,0,.25), 0 0 0 1px rgba(99,102,241,.06);
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  opacity:          0.9;
  transition:       opacity .18s, transform .15s, background .15s, box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
  touch-action:     manipulation;
  position:         relative;
  flex-shrink:      0;
}
.apk-rail-edge:hover,
.apk-rail-edge.hovered,
.apk-rail-edge:focus-visible {
  opacity:    1;
  transform:  scale(1.06);
  background: rgba(99,102,241,.1);
  box-shadow: 0 6px 20px rgba(99,102,241,.3);
  outline:    none;
}
.apk-rail-edge.open {
  opacity:      1;
  background:   rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.5);
  box-shadow:   0 6px 20px rgba(99,102,241,.35);
}
.apk-rail-trigger-icon {
  font-size:      20px;
  color:          var(--primary, #6366f1);
  pointer-events: none;
  transition:     color .15s, transform .2s;
}
.apk-rail-edge.open .apk-rail-trigger-icon { transform: rotate(45deg); }
.apk-rail-edge:hover .apk-rail-trigger-icon { color: var(--primary); }

/* Tooltip on desktop hover */
.apk-rail-trigger-tip {
  position:       absolute;
  right:          calc(100% + 8px);
  top:            50%;
  transform:      translateY(-50%);
  background:     var(--bg-primary, #0f172a);
  color:          var(--text-primary);
  font-size:      11px;
  font-weight:    600;
  padding:        4px 9px;
  border-radius:  7px;
  border:         1px solid var(--border);
  box-shadow:     0 2px 8px rgba(0,0,0,.28);
  white-space:    nowrap;
  pointer-events: none;
  opacity:        0;
  transition:     opacity .12s ease;
  z-index:        2;
}
.apk-rail-edge:hover .apk-rail-trigger-tip,
.apk-rail-edge.hovered .apk-rail-trigger-tip { opacity: 1; }
@media (max-width: 640px) { .apk-rail-trigger-tip { display: none; } }

/* ── Drawer: fan upward ─────────────────────────────────────────────────── */
.apk-rail-drawer {
  pointer-events: none;
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            6px;
  overflow:       visible;
  opacity:        0;
  transform:      translateY(10px) scale(0.92);
  transition:     opacity .18s ease, transform .2s cubic-bezier(.34,1.4,.64,1);
  visibility:     hidden;
}
.apk-rail-drawer.open {
  pointer-events: auto;
  opacity:        1;
  transform:      translateY(0) scale(1);
  visibility:     visible;
}
.apk-rail-label { display: none; }

/* ── Action buttons — pill style with icon + label ───────────────────── */
#apk-side-rail .apk-rail-btn {
  pointer-events:   auto;
  display:          flex;
  align-items:      center;
  gap:              8px;
  padding:          9px 14px 9px 11px;
  border-radius:    22px;
  border:           1px solid var(--border);
  background:       var(--bg-secondary);
  cursor:           pointer;
  color:            var(--text-secondary);
  font-size:        12px;
  font-weight:      700;
  font-family:      inherit;
  transition:       background .12s, color .12s, border-color .12s, transform .12s, box-shadow .15s;
  box-shadow:       0 3px 12px rgba(0,0,0,.2);
  -webkit-tap-highlight-color: transparent;
  white-space:      nowrap;
}
#apk-side-rail .apk-rail-btn:hover,
#apk-side-rail .apk-rail-btn:active {
  background:   rgba(99,102,241,.1);
  color:        var(--primary);
  border-color: rgba(99,102,241,.3);
  transform:    translateX(-3px);
  box-shadow:   0 4px 16px rgba(99,102,241,.2);
}
#apk-side-rail .rail-icon { font-size: 17px; pointer-events: none; flex-shrink: 0; }
#apk-rail-cart  .rail-icon { color: var(--text-tertiary); transition: color .15s; }
#apk-rail-cart.has-items .rail-icon { color: #10b981; }
#apk-rail-cart.has-items { border-color: rgba(16,185,129,.3); }
#apk-rail-actions .rail-icon { color: var(--primary); }
#apk-rail-feedback:hover .rail-icon { color: #f59e0b; }
.apk-rail-btn-tip { font-size: 11px; font-weight: 600; pointer-events: none; color: inherit; }
.apk-rail-btn-label { display: none; }

/* Cart badge */
#apk-rail-cart-badge {
  position:    absolute;
  top:         -4px;
  right:       -4px;
  background:  #10b981;
  color:       #fff;
  font-size: 11px;
  font-weight: 800;
  min-width:   16px;
  height:      16px;
  border-radius: 8px;
  display:     none;
  align-items: center;
  justify-content: center;
  padding:     0 3px;
  pointer-events: none;
}
#apk-rail-cart.has-items #apk-rail-cart-badge { display: flex; }

/* Mobile: icon-only round buttons */
@media (max-width: 640px) {
  #apk-side-rail .apk-rail-btn { padding: 8px; border-radius: 50%; }
  .apk-rail-btn-tip { display: none; }
}

/* ── Drawer: icon-only buttons slide in from right edge ───────────────────── */
.apk-rail-drawer {
  pointer-events: none;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            3px;
  max-width:      0;
  overflow:       hidden;
  transition:     max-width .2s cubic-bezier(.32,.72,0,1), opacity .16s;
  opacity:        0;
  padding:        0;
}
.apk-rail-drawer.open {
  pointer-events: auto;
  max-width:      48px;
  opacity:        1;
  padding:        4px 0 4px 4px;
}

/* Drawer section label — hidden (clean icon-only) */
.apk-rail-label { display: none; }

/* ── Rail buttons: icon-only, compact, attached to right edge ─────────────── */
#apk-side-rail .apk-rail-btn {
  pointer-events:   auto;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          9px;
  border-radius:    8px 0 0 8px;
  border:           1px solid var(--border);
  border-right:     none;
  background:       var(--bg-secondary);
  cursor:           pointer;
  color:            var(--text-secondary);
  font-family:      inherit;
  transition:       background .12s, color .12s, border-color .12s;
  box-shadow:       -1px 1px 6px rgba(0,0,0,.15);
  -webkit-tap-highlight-color: transparent;
  position:         relative;
  width:            38px;
  height:           38px;
  flex-shrink:      0;
}
#apk-side-rail .apk-rail-btn:hover,
#apk-side-rail .apk-rail-btn:active {
  background:    rgba(99,102,241,.1);
  color:         var(--primary);
  border-color:  rgba(99,102,241,.3);
}
/* Tooltip: floats left of button on hover */
#apk-side-rail .apk-rail-btn::before {
  content:        attr(aria-label);
  position:       absolute;
  right:          calc(100% + 8px);
  top:            50%;
  transform:      translateY(-50%);
  background:     var(--bg-primary, #0f172a);
  color:          var(--text-primary);
  font-size:      11px;
  font-weight:    600;
  padding:        4px 9px;
  border-radius:  6px;
  border:         1px solid var(--border);
  box-shadow:     0 2px 8px rgba(0,0,0,.28);
  white-space:    nowrap;
  pointer-events: none;
  opacity:        0;
  transition:     opacity .12s ease;
  z-index:        9999;
}
#apk-side-rail .apk-rail-btn:hover::before { opacity: 1; }
@media (max-width: 640px) {
  #apk-side-rail .apk-rail-btn::before { display: none; }
}
#apk-side-rail .rail-icon { font-size: 18px; pointer-events: none; }
#apk-rail-cart  .rail-icon { color: var(--text-tertiary); }
#apk-rail-cart.has-items .rail-icon { color: #10b981; }
#apk-rail-actions .rail-icon { color: var(--primary); }
#apk-rail-feedback .rail-icon { color: var(--text-secondary); }
#apk-rail-feedback:hover .rail-icon { color: #f59e0b; }
.apk-rail-btn-label { display: none; }

/* Cart badge */
#apk-rail-cart-badge {
  position:     absolute;
  top:          4px;
  left:         22px;
  background:   #10b981;
  color:        #fff;
  font-size: 11px;
  font-weight:  800;
  min-width:    14px;
  height:       14px;
  border-radius:7px;
  display:      none;
  align-items:  center;
  justify-content: center;
  padding:      0 3px;
  pointer-events: none;
}
#apk-rail-cart.has-items #apk-rail-cart-badge { display: flex; }

/* ── Command bar: [attach] [voice] [input] [send] ────────────────────────── */
.command-bar .apk-file-btn,
#apk-chat-bar .apk-file-btn {
  color:            var(--text-tertiary) !important;
  transition:       color .15s !important;
  flex-shrink:      0;
}
.command-bar .apk-file-btn:hover,
#apk-chat-bar .apk-file-btn:hover {
  color: var(--primary) !important;
  background: rgba(99,102,241,.08) !important;
  border-radius: 10px;
}

/* ── Chai pill: shows ONLY when bot is working ───────────────────────────── */
/* At rest: invisible. Active: glows above bar. Never blocks anything.       */
#apk-chai-pill {
  /* Hidden by default — shown only on home view or when input focused */
  display:    none;
  transition: opacity .25s ease, transform .25s ease !important;
}
body.view-home #apk-chai-pill {
  display: block;
}
/* When bot becomes active (body.bot-active set by setChaiState) */
body.bot-active #apk-chai-pill {
  opacity:         1 !important;
  transform:       translateY(0) !important;
  pointer-events:  auto !important;
}
/* When input focused */
#apk-chai-pill.visible {
  opacity:         1 !important;
  transform:       translateY(0) !important;
}

/* ── Header brand: always Smart Home Manager ─────────────────────────────── */
#apunkai-subtitle,
.app-subtitle,
.brand-subtitle,
[data-brand-sub] {
  /* Override any static HTML that says "Apunki Manager" */
  content: 'Smart Home Manager';
}

/* ── Settings: ensure modal always has min content on error ─────────────── */
#settings-modal .settings-error-state {
  padding: 48px 24px;
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════════
   EDGE RAIL v3 — Icon-only, truly minimal. 3px strip → icon column on tap.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Rail position */
#apk-side-rail {
  bottom: calc(56px + env(safe-area-inset-bottom,0px) + 80px) !important;
}
@media (min-width:641px) {
  #apk-side-rail { bottom: calc(12px + 64px + 20px) !important; }
}

/* Edge strip: 2px ultra-thin at rest, expands on hover/open */
.apk-rail-edge {
  width:         2px   !important;
  height:        40px  !important;
  opacity:       0.18  !important;
  background:    linear-gradient(180deg,rgba(99,102,241,.7),rgba(20,184,166,.5)) !important;
  border-radius: 2px 0 0 2px !important;
}
.apk-rail-edge:hover,
.apk-rail-edge:focus-visible,
.apk-rail-edge.open {
  opacity: 0.9 !important;
  width:   4px !important;
  background: linear-gradient(180deg,#6366f1,#14b8a6) !important;
}

/* Drawer: icon-only column, no labels */
.apk-rail-drawer {
  gap: 3px !important;
}
.apk-rail-drawer.open {
  max-width: 42px !important;
  padding:   4px 0 4px 4px !important;
  opacity:   1    !important;
}

/* Section label: hide — icon-only is cleaner */
.apk-rail-label { display: none !important; }

/* Rail buttons: square icon-only */
#apk-side-rail .apk-rail-btn {
  width:         36px !important;
  height:        36px !important;
  padding:       0    !important;
  border-radius: 8px 0 0 8px !important;
  display:       flex !important;
  align-items:   center !important;
  justify-content: center !important;
  gap:           0    !important;
}
#apk-side-rail .rail-icon  { font-size: 18px !important; }
.apk-rail-btn-label        { display: none  !important; }

/* Tooltip on hover (desktop only) — shows label since drawer has none */
.apk-rail-tooltip {
  right:     calc(100% + 6px) !important;
  font-size: 11px !important;
  padding:   5px 9px !important;
}
@media (max-width:640px) {
  .apk-rail-tooltip { display: none !important; }
  .apk-rail-edge    { width: 3px !important; height: 40px !important; }
}

/* Dots: minimal */
.apk-rail-dots span { width: 2px !important; height: 2px !important; }

/* Calendar stat tap area */
.apk-cal-stat { min-width: 0; flex: 1; }



/* ── Home stat cards — clear, tappable, scannable ─────────────────── */
.hss-pill {
  transition: background .12s, border-color .12s;
  cursor: pointer;
}
.hss-pill:active { transform: scale(.98); }
/* Stat value: bigger on tablet for immediate readability */
@media (min-width: 600px) {
  .stat-value, #stat-pending-chores, #stat-overdue-chores,
  #stat-done-today, #stat-smart-score { font-size: 28px !important; }
  .stat-label { font-size: 11px !important; }
}

/* ── Bot Chat FAB (non-home views) — bottom-LEFT avoids + FAB collision ────── */
#apk-bot-fab {
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 14px);
  left: 16px;
  right: auto;            /* explicit: never on right */
  z-index: 8500;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: 0 3px 14px rgba(99, 102, 241, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
#apk-bot-fab:active { transform: scale(0.93); }

/* FAB display controlled by JS _syncBotFabVisibility — visible on all devices on non-home views */
#apk-bot-fab .apk-bot-fab-svg .gao-steam {
  animation: gao-steam-rise 1.4s ease-in-out infinite;
  transform-origin: center bottom;
  opacity: 0;
}
#apk-bot-fab .apk-bot-fab-svg .gao-steam:nth-child(2) { animation-delay: 0.25s; }
#apk-bot-fab .apk-bot-fab-svg .gao-steam:nth-child(3) { animation-delay: 0.5s;  }

/* Command bar: hidden behind FAB on non-home mobile views */
.command-bar.apk-bar-hidden-for-fab,
#apk-chat-bar.apk-bar-hidden-for-fab { display: none !important; }

/* Command bar when expanded from FAB tap — positioned bottom-left,
   right edge has 20px clearance from the right side-rail (2-4px wide) */
.command-bar.cmd-bar-fab-expanded,
#apk-chat-bar.cmd-bar-fab-expanded {
  display:   flex !important;
  animation: apk-fab-slideup 0.22s cubic-bezier(.32,.72,0,1);
}
@keyframes apk-fab-slideup {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Smart FAB button: pulse ring animation ─────────────────────────────── */
.apk-bot-fab-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(99,102,241,.55);
  animation: apk-fab-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes apk-fab-pulse {
  0%, 100% { transform: scale(1);    opacity: .7; }
  60%       { transform: scale(1.28); opacity: 0;  }
}
/* Stop pulse when bar is expanded (wrap is hidden) */
#apk-bot-fab-wrap[style*="display: none"] .apk-bot-fab-btn::after { animation: none; }

/* Chai avatar wrap in chat messages */
.apk-chai-avatar-wrap .apk-gao-chai-svg .gao-steam {
  animation: gao-steam-rise 1.4s ease-in-out infinite;
  transform-origin: center bottom;
  opacity: 0;
}
.apk-chai-avatar-wrap .apk-gao-chai-svg .gao-steam:nth-child(2) { animation-delay: 0.25s; }
.apk-chai-avatar-wrap .apk-gao-chai-svg .gao-steam:nth-child(3) { animation-delay: 0.5s;  }

/* Note edit button hover */
.note-card .btn-icon:hover { background: var(--bg-tertiary) !important; }

/* Home stat strip display is controlled entirely by .populated class — see base rules */

/* ── Meal Planner: member filter chips ────────────────────────────────────── */
.agf-member-filter {
  transition: border-color .12s, background .12s, color .12s;
}
.agf-member-filter:active { transform: scale(0.95); }
.agf-member-filter.active {
  border-color: var(--primary) !important;
  background: rgba(99,102,241,.1) !important;
  color: var(--primary) !important;
}

/* Meal picker custom input row */
#agf-custom-meal:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(99,102,241,.15);
}

/* Meal grid scroll container */
.meal-week-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px 4px;
}

/* ── PATCH: Green pulse dot removed from header ───────────────────────── */
#apk-bot-pulse { display: none !important; pointer-events: none !important; }
body.authenticated #apk-bot-pulse { display: none !important; }
body.bot-active #apk-bot-pulse { display: none !important; animation: none !important; }

/* ── PATCH: Edge panel — subtle pill handle, market-standard clean ──────── */
#apk-side-rail {
  position: fixed;
  right: 0;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  pointer-events: none;
}
body:not(.authenticated) #apk-side-rail { display: none !important; }
@media (min-width: 641px) {
  #apk-side-rail { bottom: calc(24px + 64px); }
}

/* Drawer wrapper */
#apk-side-rail .apk-rail-drawer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: auto;
}

/* Each button: icon-only ghost pill anchored to right edge */
#apk-side-rail .apk-rail-btn {
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* Only the icon visible, no label */
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px 0 0 8px;
  border: 1px solid rgba(99,102,241,0.18);
  border-right: none;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  color: rgba(148,163,184,0.7);
  font-family: inherit;
  transition: background .18s, color .18s, border-color .18s, width .18s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
  overflow: hidden;
  box-shadow: -1px 0 8px rgba(0,0,0,.12);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
#apk-side-rail .apk-rail-btn:hover,
#apk-side-rail .apk-rail-btn:focus-visible {
  width: 88px;
  background: rgba(30,41,59,0.85);
  color: #e2e8f0;
  border-color: rgba(99,102,241,0.35);
  gap: 6px;
  padding: 0 10px 0 8px;
  justify-content: flex-start;
}
#apk-side-rail .apk-rail-btn:active { transform: scale(0.95); }

/* Icon inside button */
#apk-side-rail .apk-rail-btn .rail-icon {
  font-size: 16px;
  flex-shrink: 0;
  transition: color .15s;
  pointer-events: none;
}

/* Label (hidden at rest, slides in on hover) */
#apk-side-rail .apk-rail-btn .rail-label,
#apk-side-rail .apk-rail-btn .apk-rail-btn-label {
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity .15s .04s, max-width .18s;
  white-space: nowrap;
  pointer-events: none;
}
#apk-side-rail .apk-rail-btn:hover .rail-label,
#apk-side-rail .apk-rail-btn:hover .apk-rail-btn-label,
#apk-side-rail .apk-rail-btn:focus-visible .rail-label,
#apk-side-rail .apk-rail-btn:focus-visible .apk-rail-btn-label {
  opacity: 1;
  max-width: 60px;
}

/* Remove old tooltip pseudo-elements */
#apk-side-rail .apk-rail-btn::before,
#apk-side-rail .apk-rail-btn::after { display: none !important; }

/* Per-button accent on hover */
#apk-rail-actions:hover,
#apk-rail-actions:focus-visible { border-color: rgba(99,102,241,0.5) !important; }
#apk-rail-actions:hover .rail-icon { color: #818cf8 !important; }

#apk-rail-cart:hover,
#apk-rail-cart:focus-visible { border-color: rgba(16,185,129,0.5) !important; }
#apk-rail-cart:hover .rail-icon { color: #34d399 !important; }

#apk-rail-feedback:hover,
#apk-rail-feedback:focus-visible { border-color: rgba(245,158,11,0.5) !important; }
#apk-rail-feedback:hover .rail-icon { color: #fbbf24 !important; }

/* Cart badge */
#apk-rail-cart-badge {
  position: absolute;
  top: 3px;
  left: 18px;
  background: #10b981;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  min-width: 13px;
  height: 13px;
  border-radius: 7px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  pointer-events: none;
}
#apk-rail-cart.has-items #apk-rail-cart-badge { display: flex; }

/* Rail label strip (not visible, just layout anchor) */
.apk-rail-label { display: none !important; }

/* Chai rail icon */
#apk-chai-rail {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.6;
  transition: opacity .25s;
  z-index: 2;
  filter: drop-shadow(0 0 4px rgba(16,185,129,.5));
}


/* ═══════════════════════════════════════════════════════════════════════════
   APK COMPREHENSIVE UI OVERHAUL — mobile-first, cross-device
   Applied: all fixes from sessions 1-3
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Home quick-action shortcuts strip ─────────────────────────────────── */
.apk-home-shortcuts {
  display:         flex;
  align-items:     stretch;
  gap:             8px;
  padding:         6px 0 8px;
  overflow-x:      auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.apk-home-shortcuts::-webkit-scrollbar { display: none; }

.apk-sc-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  padding:         10px 14px;
  border-radius:   12px;
  border:          1px solid var(--border);
  background:      var(--bg-secondary);
  color:           var(--text-secondary);
  cursor:          pointer;
  font-family:     inherit;
  font-size:       11px;
  font-weight:     600;
  white-space:     nowrap;
  flex-shrink:     0;
  min-width:       58px;
  transition:      background .12s, color .12s, border-color .12s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.apk-sc-btn .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}
.apk-sc-label {
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}
.apk-sc-btn:hover,
.apk-sc-btn:focus-visible {
  background:   rgba(99,102,241,.1);
  color:        var(--primary, #6366f1);
  border-color: rgba(99,102,241,.25);
  outline:      none;
}
.apk-sc-btn:active { transform: scale(.94); }

/* ── BOT FAB — cross-device, always bottom-left ──────────────────────── */
#apk-bot-fab-wrap {
  position: fixed !important;
  left:     16px !important;
  right:    auto !important;
  bottom:   calc(env(safe-area-inset-bottom, 0px) + 74px) !important;
  z-index:  8500 !important;
}
/* On tablet/desktop, clear the sidebar */
@media (min-width: 641px) {
  #apk-bot-fab-wrap {
    left:   72px !important;
    bottom: 24px !important;
  }
}

/* ── Rail trigger tooltip (desktop only) ────────────────────────────── */
.apk-rail-trigger-tip {
  position:    absolute;
  right:       calc(100% + 10px);
  top:         50%;
  transform:   translateY(-50%);
  background:  var(--bg-primary, #0f172a);
  color:       var(--text-primary);
  font-size:   11px;
  font-weight: 700;
  padding:     5px 10px;
  border-radius: 8px;
  border:      1px solid var(--border);
  box-shadow:  0 2px 10px rgba(0,0,0,.3);
  white-space: nowrap;
  pointer-events: none;
  opacity:     0;
  transition:  opacity .15s;
  z-index:     2;
}
.apk-rail-edge:hover .apk-rail-trigger-tip,
.apk-rail-edge.hovered .apk-rail-trigger-tip { opacity: 1; }
@media (max-width: 640px) { .apk-rail-trigger-tip { display: none; } }

/* ── Stat cards: compact on small phones ────────────────────────────── */
@media (max-width: 480px) {
  .entity-stats-row {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
  }
  .entity-stat-card {
    flex: 1 1 0 !important;
    min-width: 72px !important;
    padding: 8px 6px !important;
  }
  .entity-stat-value { font-size: 18px !important; }
  .entity-stat-label { font-size: 11px !important; }
}

/* ── Member card actions: ensure no overflow on small phones ─────────── */
@media (max-width: 360px) {
  .entity-card-actions { gap: 4px !important; }
  .entity-card-actions .btn-icon { width: 32px !important; height: 32px !important; }
}

/* ── Score pill: hidden by default, shown by JS when API has real data ── */
.hss-pill-score { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   APK PATCH — FAB Consistency + Nav Clearance + Viewport Fixes
   Issues fixed:
   1. Bot bar/FAB never spills into left nav
   2. + FAB primary = solid + prominent; chai FAB = ghost/secondary
   3. "Apunki" label removed; hover tooltip only
   4. All FABs sized for viewport, consistent across pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. COMMAND BAR — always respects left nav rail on all breakpoints
   ───────────────────────────────────────────────────────────────────────── */
/* Tablet: left nav is 52px icon rail */
@media (min-width: 641px) {
  .command-bar,
  #apk-chat-bar,
  .chat-bar {
    left:  calc(52px + 12px) !important;
    right: 52px !important;   /* clears right edge rail */
  }
  body.sidebar-open .command-bar,
  body.sidebar-open #apk-chat-bar {
    left: calc(220px + 12px) !important;
  }
}
/* When command bar is expanded from FAB — still clears nav */
.command-bar.cmd-bar-fab-expanded,
#apk-chat-bar.cmd-bar-fab-expanded {
  display:   flex !important;
  animation: apk-fab-bar-in 0.2s cubic-bezier(.32,.72,0,1);
}
@keyframes apk-fab-bar-in {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────
   2. BOT CHAI FAB — ghost/secondary style, 40px, bottom-left of content area
   ───────────────────────────────────────────────────────────────────────── */
#apk-bot-fab {
  width:              40px !important;
  height:             40px !important;
  background:         rgba(15, 23, 42, .88) !important;
  border:             1.5px solid rgba(99,102,241,.45) !important;
  box-shadow:         0 2px 10px rgba(99,102,241,.22) !important;
  color:              #a5b4fc !important;
  backdrop-filter:    blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#apk-bot-fab:hover,
#apk-bot-fab:focus-visible {
  background:  rgba(99,102,241,.2) !important;
  box-shadow:  0 4px 14px rgba(99,102,241,.4) !important;
}
#apk-bot-fab:active { transform: scale(.92) !important; }

/* Pulse ring: softer */
.apk-bot-fab-btn::after {
  inset:        -3px !important;
  border-width: 1.5px !important;
  border-color: rgba(99,102,241,.35) !important;
}
@keyframes apk-fab-pulse {
  0%, 100% { transform: scale(1);    opacity: .5; }
  55%       { transform: scale(1.2); opacity: 0;  }
}

/* FAB wrap — sits above bottom nav, clear of left nav */
#apk-bot-fab-wrap {
  /* left set inline via JS calc(--nav-w + 14px) */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
}
@media (min-width: 641px) {
  #apk-bot-fab-wrap {
    /* tablet: left nav is 52px, wrap via CSS override too */
    left:   calc(52px + 14px) !important;
    bottom: calc(64px + 20px) !important;  /* above bottom bar on tablet */
  }
  body.sidebar-open #apk-bot-fab-wrap {
    left: calc(220px + 14px) !important;
  }
}

/* Hide "Apunki" label bubble — tooltip via title attr only */
#apk-bot-fab-label { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   3. PAGE FAB (+) — PRIMARY: solid, prominent, consistent across all pages
   ───────────────────────────────────────────────────────────────────────── */
.apk-page-fab,
.apk-page-fab.apk-page-fab-primary {
  /* Solid indigo — clearly primary action */
  width:       46px !important;
  height:      46px !important;
  background:  var(--primary, #6366f1) !important;
  border:      none !important;
  color:       #fff !important;
  box-shadow:  0 4px 16px rgba(99,102,241,.48) !important;
  /* Position: bottom-right, clear of right rail */
  right:  56px !important;    /* 38px rail + 18px gap */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px) !important;
  /* On tablet — above command bar, not bottom nav */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.apk-page-fab:hover,
.apk-page-fab:focus-visible {
  background:  #4f46e5 !important;
  box-shadow:  0 6px 22px rgba(99,102,241,.6) !important;
  transform:   scale(1.05);
}
.apk-page-fab:active { transform: scale(.93) !important; }
.apk-page-fab .material-symbols-outlined { font-size: 24px !important; }

@media (min-width: 641px) {
  .apk-page-fab,
  .apk-page-fab.apk-page-fab-primary {
    right:  60px !important;
    bottom: calc(64px + 20px) !important;
  }
}
@media (min-width: 1200px) {
  .apk-page-fab,
  .apk-page-fab.apk-page-fab-primary {
    right:  24px !important;
    bottom: 32px !important;
    width:  48px !important;
    height: 48px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. EDGE RAIL — thinner trigger, clear of content
   ───────────────────────────────────────────────────────────────────────── */
#apk-side-rail {
  right:  10px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 68px) !important;
  gap:    6px !important;
}
.apk-rail-edge {
  width:       36px !important;
  height:      36px !important;
  opacity:     0.72 !important;
}
.apk-rail-edge:hover,
.apk-rail-edge.open,
.apk-rail-edge.hovered { opacity: 1 !important; }
.apk-rail-trigger-icon { font-size: 18px !important; }
#apk-side-rail .apk-rail-btn {
  width:  34px !important;
  height: 34px !important;
  padding: 7px !important;
}
#apk-side-rail .rail-icon { font-size: 16px !important; }

@media (min-width: 641px) {
  #apk-side-rail {
    right:  14px !important;
    bottom: calc(64px + 20px) !important;
  }
}

/* Smart panel — never behind rail */
#apk-smart-panel {
  right: 54px !important;
}
@media (min-width: 641px) {
  #apk-smart-panel { right: 58px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   5. CHAI PILL — home only, no label on other views
   ───────────────────────────────────────────────────────────────────────── */
#apk-chai-pill           { display: none !important; }
body.view-home #apk-chai-pill { display: block !important; }

/* ─────────────────────────────────────────────────────────────────────────
   6. SHORTCUT STRIP — responsive on small phones
   ───────────────────────────────────────────────────────────────────────── */
.apk-sc-btn {
  padding:   8px 10px !important;
  min-width: 52px !important;
}
.apk-sc-btn .material-symbols-outlined { font-size: 18px !important; }
.apk-sc-label                          { font-size: 11px !important; }
@media (max-width: 380px) {
  .apk-sc-btn      { padding: 7px 8px !important; min-width: 46px !important; }
  .apk-sc-label    { font-size: 11px !important; }
  .apk-home-shortcuts { gap: 5px !important; }
}
@media (min-width: 768px) {
  .apk-sc-btn   { padding: 10px 14px !important; min-width: 60px !important; }
  .apk-sc-label { font-size: 11px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   7. SCORE PILL — hidden until API returns real data
   ───────────────────────────────────────────────────────────────────────── */
.hss-pill-score { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   8. VIEWPORT SAFETY — nothing clips on narrow phones (360px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  #apk-bot-fab,
  .apk-bot-fab-btn {
    width:  36px !important;
    height: 36px !important;
  }
  .apk-page-fab,
  .apk-page-fab.apk-page-fab-primary {
    width:  42px !important;
    height: 42px !important;
    right:  48px !important;
  }
  .apk-rail-edge { width: 32px !important; height: 32px !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   APK FAB SMART VISIBILITY PATCH
   Rule: max 1 primary + 1 secondary FAB visible at any time.
   • Home:        command bar + chai pill (no FABs)
   • Non-home:    chai FAB (secondary) + page + FAB (primary)
   • Bar expanded: page + FAB hides — bar IS the primary action
   • Rail trigger: always visible as tertiary utility (tiny, unobtrusive)
   ═══════════════════════════════════════════════════════════════════════════ */

/* When command bar is active (expanded from chai FAB) — hide + page FAB */
body.cmd-bar-active .apk-page-fab { display: none !important; }

/* On home — no page FAB ever (home uses chat directly) */
body.view-home .apk-page-fab { display: none !important; }

/* ── PAGE FAB (+) — solid primary, visible when bar is collapsed ──────────── */
.apk-page-fab,
.apk-page-fab.apk-page-fab-primary {
  width:      46px !important;
  height:     46px !important;
  background: var(--primary, #6366f1) !important;
  border:     none !important;
  color:      #fff !important;
  box-shadow: 0 4px 18px rgba(99,102,241,.5) !important;
  right:      56px !important;
  bottom:     calc(env(safe-area-inset-bottom, 0px) + 76px) !important;
  transition: opacity .2s, transform .15s, box-shadow .15s !important;
}
.apk-page-fab:hover  { background: #4f46e5 !important; box-shadow: 0 6px 22px rgba(99,102,241,.65) !important; }
.apk-page-fab:active { transform: scale(.92) !important; }
.apk-page-fab .material-symbols-outlined { font-size: 24px !important; pointer-events: none; }
@media (min-width: 641px) {
  .apk-page-fab { right: 60px !important; bottom: calc(64px + 24px) !important; }
}

/* ── CHAI BOT FAB — ghost secondary, bottom-left ─────────────────────────── */
#apk-bot-fab {
  width:           40px !important;
  height:          40px !important;
  background:      rgba(15,23,42,.88) !important;
  border:          1.5px solid rgba(99,102,241,.4) !important;
  color:           #a5b4fc !important;
  box-shadow:      0 2px 8px rgba(99,102,241,.2) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#apk-bot-fab:hover { background: rgba(99,102,241,.18) !important; }
#apk-bot-fab:active { transform: scale(.93) !important; }
#apk-bot-fab-label { display: none !important; }

/* Softer pulse — secondary chrome should be subtle */
.apk-bot-fab-btn::after {
  inset: -3px !important;
  border: 1.5px solid rgba(99,102,241,.3) !important;
}
@keyframes apk-fab-pulse {
  0%,100% { transform: scale(1);    opacity:.45; }
  55%     { transform: scale(1.18); opacity:0;   }
}

/* ── RAIL — trigger always visible, buttons hidden until toggled ──────────── */
#apk-side-rail {
  right:  10px !important;
  bottom: calc(env(safe-area-inset-bottom,0px) + 68px) !important;
}
@media (min-width: 641px) {
  #apk-side-rail { right: 14px !important; bottom: calc(64px + 20px) !important; }
}

/* Trigger dot: compact, unobtrusive */
.apk-rail-edge {
  width:   34px !important;
  height:  34px !important;
  opacity: 0.65 !important;
  border:  1px solid rgba(99,102,241,.2) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.15) !important;
}
.apk-rail-edge:hover,
.apk-rail-edge.hovered,
.apk-rail-edge.open { opacity: 1 !important; }
.apk-rail-trigger-icon { font-size: 17px !important; }

/* ── RAIL BUTTON RICH TOOLTIPS ────────────────────────────────────────────── */
/* Each button gets a 2-line tooltip: bold title + sub-label */
#apk-side-rail .apk-rail-btn {
  position: relative;
  width:     34px !important;
  height:    34px !important;
  padding:   7px !important;
}

/* Tooltip panel — appears to the left of the button */
#apk-side-rail .apk-rail-btn::before {
  content:        '';
  display:        none;  /* overridden below via attr trick */
}
/* Use a ::after for rich tooltip */
#apk-side-rail .apk-rail-btn[data-tip]::after {
  content:        attr(data-tip) "\A" attr(data-sub);
  white-space:    pre;   /* \A = newline in CSS content */
  position:       absolute;
  right:          calc(100% + 10px);
  top:            50%;
  transform:      translateY(-50%);
  background:     rgba(15,23,42,.96);
  color:          var(--text-primary);
  font-size:      11px;
  font-weight:    600;
  line-height:    1.55;
  padding:        7px 11px;
  border-radius:  9px;
  border:         1px solid rgba(99,102,241,.25);
  box-shadow:     0 4px 16px rgba(0,0,0,.4);
  white-space:    pre;
  pointer-events: none;
  opacity:        0;
  transition:     opacity .14s ease;
  z-index:        9999;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Sub-label rendered via \A — style via color trick not possible in pure CSS,
     so we just render both lines in the same font for cleanliness */
}
/* Sub-label line: slightly dimmer via opacity on the whole tooltip when sub present */
#apk-side-rail .apk-rail-btn[data-sub]::after {
  /* Can't style two lines separately in CSS content(), so use a visual separator */
  content: attr(data-tip) "\A" attr(data-sub);
  color: var(--text-primary);
}

#apk-side-rail .apk-rail-btn:hover[data-tip]::after,
#apk-side-rail .apk-rail-btn:focus-visible[data-tip]::after {
  opacity: 1;
}
/* On mobile: touch-accessible — show tooltip briefly on tap */
@media (max-width: 640px) {
  #apk-side-rail .apk-rail-btn[data-tip]::after {
    font-size: 11px;
    padding: 6px 10px;
    right: calc(100% + 8px);
  }
}
/* Hide tooltip when rail is closed (drawer not open) */
.apk-rail-drawer:not(.open) .apk-rail-btn[data-tip]::after { display: none !important; }

/* ── RAIL ICON COLORS — identity per button ──────────────────────────────── */
#apk-rail-cart    .rail-icon { color: var(--text-tertiary); transition: color .15s; }
#apk-rail-cart.has-items .rail-icon { color: #10b981; }
#apk-rail-actions .rail-icon { color: var(--primary, #6366f1); }
#apk-rail-feedback .rail-icon { color: var(--text-secondary); }
#apk-rail-feedback:hover .rail-icon { color: #f59e0b; }

/* ── CHAI PILL — home only ────────────────────────────────────────────────── */
#apk-chai-pill                { display: none !important; }
body.view-home #apk-chai-pill { display: block !important; }

/* ── SCORE PILL — hide until API returns real data ────────────────────────── */
.hss-pill-score { display: none; }

/* ── VIEWPORT SAFETY (360px) ─────────────────────────────────────────────── */
@media (max-width: 360px) {
  #apk-bot-fab { width: 36px !important; height: 36px !important; }
  .apk-page-fab { width: 42px !important; height: 42px !important; right: 48px !important; }
  .apk-rail-edge { width: 30px !important; height: 30px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ██████╗ ███╗   ███╗███████╗    ██████╗ ██╗      ██████╗  ██████╗██╗  ██╗
   ██╔══██╗████╗ ████║██╔════╝    ██╔══██╗██║     ██╔═══██╗██╔════╝██║ ██╔╝
   ██████╔╝██╔████╔██║█████╗      ██████╔╝██║     ██║   ██║██║     █████╔╝
   ██╔═══╝ ██║╚██╔╝██║██╔══╝      ██╔══██╗██║     ██║   ██║██║     ██╔═██╗
   ██║     ██║ ╚═╝ ██║██║         ██████╔╝███████╗╚██████╔╝╚██████╗██║  ██╗
   ╚═╝     ╚═╝     ╚═╝╚═╝         ╚═════╝ ╚══════╝ ╚═════╝  ╚═════╝╚═╝  ╚═╝

   PMF LAYER — app_pmf.css merged holistically into app.css
   Version : 1.0.0 | March 2026
   Strategy: Extends, never overwrites, existing rules above.
             All colours use CSS variables from the base layer.
             @keyframes apk-shimmer already defined above — not duplicated.
             .apk-pulse-ring already defined above — animation extended only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PMF CSS CUSTOM PROPERTIES ─────────────────────────────────────────── */
:root {
  /* GCI ring stage colours */
  --apk-ring-starter:   #6b7280;
  --apk-ring-connected: #10b981;
  --apk-ring-great:     #6366f1;
  --apk-ring-anchored:  #f59e0b;

  /* Collective signal category backgrounds */
  --apk-signal-staff:   rgba(99,  102, 241, 0.08);
  --apk-signal-bills:   rgba(16,  185, 129, 0.08);
  --apk-signal-vendor:  rgba(245, 158,  11, 0.08);
  --apk-signal-border:  rgba(99,  102, 241, 0.15);

  /* Federation node colours */
  --apk-peer-color:     #6366f1;
  --apk-vertical-color: #f59e0b;
  --apk-connector-on:   #10b981;
  --apk-connector-off:  #6b7280;

  /* Upgrade nudge gradient */
  --apk-nudge-gradient: linear-gradient(135deg,
    rgba(99, 102, 241, 0.12) 0%, rgba(245, 158, 11, 0.08) 100%);
}

/* ── PMF ANIMATIONS (non-duplicates only) ───────────────────────────────── */

/* apk-shimmer already exists above — skeleton variant uses same keyframe    */
/* apk-pulse-ring animation — extends the existing .apk-pulse-ring class     */
@keyframes apk-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(99, 102, 241, 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(99, 102, 241, 0);   }
}

@keyframes apk-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. COLLECTIVE SIGNALS PANEL
   Home → Insights → "Your Neighbourhood Intel" | Plan gate: chAI+
   ═══════════════════════════════════════════════════════════════════════════ */

.apk-collective-signals-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 12px;
  animation: apk-fadein 0.3s ease;
}

.apk-collective-signals-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.apk-collective-signals-panel .panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.apk-collective-signals-panel .panel-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Signal Cards — note: .signal-card base already in app.css; we extend with PMF variants */
.signal-card.signal-staff  { background: var(--apk-signal-staff);  }
.signal-card.signal-bills  { background: var(--apk-signal-bills);  }
.signal-card.signal-vendor { background: var(--apk-signal-vendor); }

.signal-card .signal-icon {
  font-size: 20px;
  text-align: center;
  align-self: center;
  line-height: 1;
}

.signal-card .signal-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.signal-card .signal-content h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.signal-card .signal-content p {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.signal-card .signal-source {
  font-size: 11px;
  font-style: italic;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.signal-card .signal-confidence {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
}

.signal-card .signal-value {
  align-self: center;
  text-align: right;
  font-weight: 700;
  font-size: 11px;
  color: var(--primary);
  white-space: nowrap;
  min-width: 60px;
}

.signal-card .signal-value.positive { color: #10b981; }
.signal-card .signal-value.negative { color: #ef4444; }
.signal-card .signal-value.neutral  { color: var(--text-tertiary); }

/* Confidence progress bar */
.signal-confidence-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.signal-confidence-bar .bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--primary);
  transition: width 0.5s ease;
}

/* Privacy disclaimer */
.apk-collective-signals-panel .disclaimer {
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 8px 10px;
  background: rgba(99, 102, 241, 0.04);
  border-radius: 6px;
  margin-top: 4px;
  border-left: 2px solid rgba(99, 102, 241, 0.2);
  line-height: 1.5;
}

.apk-collective-signals-panel .signals-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.apk-collective-signals-panel .signals-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. FEDERATION STATUS DASHBOARD
   Home → Settings → "Network"
   ═══════════════════════════════════════════════════════════════════════════ */

.apk-federation-dashboard {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 80px;
}

.apk-federation-dashboard h2 {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 16px;
}

.federation-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
}

.federation-section h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-primary);
}

.federation-section .section-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 0 0 12px;
}

.federation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.federation-item {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  transition: border-color 0.2s ease;
}

.federation-item.peer     { border-left: 3px solid var(--apk-peer-color); }
.federation-item.vertical { border-left: 3px solid var(--apk-vertical-color); }
.federation-item:hover    { border-color: var(--primary); }

.federation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.federation-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.federation-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 10px;
}

.federation-badge.peer     { background: rgba(99, 102, 241, 0.12); color: var(--apk-peer-color); }
.federation-badge.vertical { background: rgba(245, 158, 11, 0.12); color: var(--apk-vertical-color); }

.federation-details {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 4px 0 8px;
}

.federation-actions {
  display: flex;
  gap: 8px;
}

/* Connector grid */
.connector-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.connector-card {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s ease;
}

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

.connector-card h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.connector-card .connector-details {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.4;
}

.connector-card .status-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0;
}

.connector-card.active   .status-badge { color: var(--apk-connector-on);  }
.connector-card.inactive .status-badge { color: var(--apk-connector-off); }

/* Pending federation request */
.federation-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px dashed rgba(245, 158, 11, 0.3);
  font-size: 12px;
  color: var(--text-secondary);
}

.federation-pending .pending-icon {
  font-size: 16px;
  color: #f59e0b;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. ENHANCED GCI METER
   Home screen (top-right stat card) + Insights tab
   ═══════════════════════════════════════════════════════════════════════════ */

.apk-gci-meter {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease;
  position: relative;
}

.apk-gci-meter:hover    { border-color: var(--primary); }
.apk-gci-meter.enhanced { padding: 16px; }

.gci-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}

.gci-header h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.gci-trend {
  font-size: 11px;
  color: #10b981;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 2px;
}

.gci-trend.negative { color: #ef4444; }
.gci-trend.neutral  { color: var(--text-tertiary); }

/* Radial ring SVG */
.gci-ring {
  display: block;
  margin: 0 auto 12px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12));
  overflow: visible;
}

.gci-ring circle.track {
  fill: none;
  stroke: var(--border);
  stroke-width: 8;
}

.gci-ring circle.fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              stroke 0.3s ease;
}

.gci-ring text.score-value {
  font-size: 22px;
  font-weight: 900;
  fill: var(--text-primary);
}

.gci-ring text.score-label {
  font-size: 11px;
  font-weight: 600;
  fill: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Breakdown grid */
.gci-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  margin-bottom: 10px;
}

.gci-factor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: rgba(99, 102, 241, 0.06);
  border-radius: 6px;
  font-size: 11px;
}

.gci-factor .factor-label { color: var(--text-tertiary); font-weight: 500; }
.gci-factor .factor-value { font-weight: 700; color: var(--primary); }

/* Insight chip */
.gci-insight {
  width: 100%;
  padding: 8px 10px;
  background: rgba(251, 191, 36, 0.08);
  border-left: 3px solid #fbbf24;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
  margin-bottom: 10px;
}

/* 7-day sparkline */
.gci-sparkline {
  width: 100%;
  height: 32px;
  margin-bottom: 8px;
}

/* Compact variant (home screen stat card) */
.apk-gci-meter.compact {
  padding: 12px;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.apk-gci-meter.compact .gci-ring {
  margin: 0;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.apk-gci-meter.compact .gci-text        { flex: 1; min-width: 0; }

.apk-gci-meter.compact .gci-score-large {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  color: var(--text-primary);
}

.apk-gci-meter.compact .gci-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. UPGRADE NUDGE CARDS
   Shown after 7+ days at GCI threshold. Never a hard paywall in beta.
   ═══════════════════════════════════════════════════════════════════════════ */

.apk-upgrade-nudge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--apk-nudge-gradient);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  margin-bottom: 12px;
  animation: apk-fadein 0.4s ease;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.1s ease;
}

.apk-upgrade-nudge:hover  { border-color: rgba(99, 102, 241, 0.4); transform: translateY(-1px); }
.apk-upgrade-nudge:active { transform: translateY(0); }

.apk-upgrade-nudge .nudge-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.apk-upgrade-nudge .nudge-body {
  flex: 1;
  min-width: 0;
}

.apk-upgrade-nudge .nudge-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.apk-upgrade-nudge .nudge-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.apk-upgrade-nudge .nudge-action {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.apk-upgrade-nudge .nudge-dismiss {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 16px;
  cursor: pointer;
  padding: 0 0 0 8px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.apk-upgrade-nudge .nudge-dismiss:hover { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════════════
   5. MORNING BRIEF V2
   Enhanced with peer signal context in bill/staff rows
   ═══════════════════════════════════════════════════════════════════════════ */

.apk-morning-brief {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}

.apk-morning-brief .brief-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
}

.apk-morning-brief .brief-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.apk-morning-brief .brief-time {
  font-size: 11px;
  color: var(--text-tertiary);
}

.brief-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
  cursor: pointer;
}

.brief-row:last-child { border-bottom: none; }
.brief-row:hover      { background: var(--bg-tertiary); }

.brief-row .row-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.brief-row .row-content { flex: 1; min-width: 0; }

.brief-row .row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.brief-row .row-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.brief-row .peer-context {
  font-size: 11px;
  color: var(--primary);
  font-weight: 600;
  margin-top: 1px;
}

.brief-row .row-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.brief-row .row-badge.ok      { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.brief-row .row-badge.warning { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.brief-row .row-badge.alert   { background: rgba(239, 68, 68, 0.12);  color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════════════════
   6. SMART SCORE PILLAR BREAKDOWN (Insights enhancement)
   ═══════════════════════════════════════════════════════════════════════════ */

.apk-score-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.apk-pillar-card {
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.apk-pillar-card .pillar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.apk-pillar-card .pillar-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.apk-pillar-card .pillar-icon {
  font-size: 16px;
  color: var(--text-tertiary);
}

.apk-pillar-card .pillar-score {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.apk-pillar-card .pillar-bar-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.apk-pillar-card .pillar-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.apk-pillar-card .pillar-weight {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. FEATURE FLAGS & OPT-IN BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide any component until its feature flag is enabled via JS */
.feature-hidden { display: none !important; }

/* Collective signals opt-in nudge — shown at week 7 for existing users */
.apk-optin-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  margin-bottom: 12px;
  animation: apk-fadein 0.3s ease;
}

.apk-optin-banner .optin-text {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.apk-optin-banner .optin-text strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. SHARED PMF UTILITIES
   (apk-skeleton-line already exists above; we add PMF named variants here)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Named skeleton variants — all share apk-shimmer keyframe from base layer */
.apk-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 0%,
    var(--bg-tertiary)  50%,
    var(--bg-secondary) 100%
  );
  background-size: 200% 100%;
  animation: apk-shimmer 1.5s infinite;
  border-radius: 6px;
}

.apk-skeleton-text  { height: 12px; margin-bottom: 6px; }
.apk-skeleton-title { height: 18px; width: 60%; margin-bottom: 8px; }
.apk-skeleton-card  { height: 72px; border-radius: 10px; margin-bottom: 8px; }

/* Status dot — online/active indicator */
.apk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.apk-dot.active   { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.apk-dot.inactive { background: #6b7280; }
.apk-dot.pending  { background: #f59e0b; }

/* Confidence pill — beside signal cards and bot responses */
.apk-confidence-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. RESPONSIVE — mobile-first
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
  .apk-score-pillars {
    grid-template-columns: repeat(4, 1fr);
  }

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

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

@media (min-width: 1024px) {
  .apk-collective-signals-panel { padding: 20px; }
  .signal-card                  { padding: 14px; }
  .federation-section           { padding: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END PMF LAYER — no dark-mode overrides needed; all colours use CSS vars
   ═══════════════════════════════════════════════════════════════════════════ */
/**
 * app-beta-patch.css
 * ApunkAI Beta Release — CSS Patch (patch16)
 * Load AFTER app.css in index.html
 *
 * Touch NOTHING in app.css — these are additive overrides only.
 * Covers: side rail redesign, insights padding, FAB consistency,
 *         chai spinner, bot response rendering, clutter reduction.
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. SIDE RAIL — Slim pill trigger + hover-reveal icon stack
   ═══════════════════════════════════════════════════════════════════════ */

/* Positioning: float above page-fab (which sits at bottom:86px on mobile) */
#apk-side-rail {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 148px) !important;
  right: 12px !important;
  gap: 6px !important;
}
@media (min-width: 641px) {
  #apk-side-rail {
    bottom: calc(20px + 120px) !important;
  }
}

/* Trigger pill: slim horizontal ellipsis, NOT a square */
.apk-rail-edge {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.82) !important;
  border: 1px solid rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 0 0 2px rgba(99,102,241,.08) !important;
  opacity: 0.88 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.apk-rail-edge:hover,
.apk-rail-edge.hovered,
.apk-rail-edge:focus-visible {
  opacity: 1 !important;
  transform: scale(1.08) !important;
  background: rgba(99, 102, 241, 0.12) !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.35), 0 6px 18px rgba(99,102,241,.2) !important;
}

/* Hide the text tip entirely — icon only */
.apk-rail-trigger-tip {
  display: none !important;
}

/* Trigger icon: slightly larger */
.apk-rail-trigger-icon {
  font-size: 18px !important;
  color: rgba(148, 163, 184, 0.85) !important;
  transition: color .15s !important;
}
.apk-rail-edge:hover .apk-rail-trigger-icon,
.apk-rail-edge.hovered .apk-rail-trigger-icon {
  color: rgba(129, 140, 248, 0.95) !important;
}

/* Drawer: vertical stack, slides in from right */
.apk-rail-drawer {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateX(12px) scale(0.92) !important;
  transition: opacity .2s cubic-bezier(.4,0,.2,1),
              transform .22s cubic-bezier(.34,1.56,.64,1) !important;
}
/* Drawer open state (JS adds .open to #apk-side-rail or sets data-open) */
#apk-side-rail.open .apk-rail-drawer,
#apk-side-rail[data-open] .apk-rail-drawer {
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
}

/* Rail buttons: icon-only circles, no text overflow */
.apk-rail-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: rgba(15, 23, 42, 0.80) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: visible !important;
}
.apk-rail-btn:hover,
.apk-rail-btn:focus-visible {
  transform: scale(1.1) !important;
}

/* Hide rail labels — icon only, tooltip via title attr */
.rail-label {
  display: none !important;
}

/* Cart button — green glow when items present */
#apk-rail-cart {
  border-color: rgba(16, 185, 129, 0.25) !important;
}
#apk-rail-cart:hover {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(16,185,129,.2), 0 4px 12px rgba(16,185,129,.15) !important;
}
#apk-rail-cart.has-items {
  border-color: rgba(16, 185, 129, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(16,185,129,.18), 0 3px 10px rgba(16,185,129,.18) !important;
}

/* Actions button — indigo glow */
#apk-rail-actions {
  border-color: rgba(99, 102, 241, 0.25) !important;
}
#apk-rail-actions:hover,
#apk-rail-actions.open {
  background: rgba(99, 102, 241, 0.12) !important;
  border-color: rgba(99, 102, 241, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.2), 0 4px 12px rgba(99,102,241,.15) !important;
}

/* Feedback button — amber glow */
#apk-rail-feedback {
  border-color: rgba(245, 158, 11, 0.22) !important;
}
#apk-rail-feedback:hover {
  background: rgba(245, 158, 11, 0.10) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.18), 0 4px 12px rgba(245,158,11,.12) !important;
}

/* Cart badge: tiny red dot */
#apk-rail-cart-badge {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  border: 1.5px solid var(--bg-primary, #0f172a) !important;
  font-size: 0 !important;
  display: none !important;
}
#apk-rail-cart.has-items #apk-rail-cart-badge {
  display: block !important;
}

/* Rail icon sizing */
.rail-icon {
  font-size: 17px !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   2. CHAI BOT FAB — bottom-left consistency + in-place expand
   ═══════════════════════════════════════════════════════════════════════ */

#apk-bot-fab-wrap {
  /* Ensure it anchors at the bottom nav height, NOT above page-fab */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
  left: calc(var(--nav-w, 0px) + 14px) !important;
}

/* Chai FAB button: subtle glass, bright indigo border */
.apk-bot-fab-btn,
#apk-bot-fab {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 2px 10px rgba(99,102,241,.22), 0 0 0 2px rgba(99,102,241,.06) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  transition: transform .18s, box-shadow .18s, background .15s, border-color .15s !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
.apk-bot-fab-btn:hover,
#apk-bot-fab:hover {
  transform: scale(1.06) !important;
  background: rgba(99, 102, 241, 0.18) !important;
  border-color: rgba(99, 102, 241, 0.8) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.18), 0 6px 18px rgba(99,102,241,.3) !important;
}

/* When command bar expands from FAB: stay left-anchored */
.command-bar.cmd-bar-fab-expanded,
#apk-chat-bar.cmd-bar-fab-expanded {
  position: fixed !important;
  left: calc(var(--nav-w, 0px) + 14px) !important;
  right: 56px !important;          /* clears side rail */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
  min-width: 260px !important;
  max-width: calc(100vw - var(--nav-w, 0px) - 72px) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(99,102,241,.22) !important;
  animation: apkBarSlideUp .22s cubic-bezier(.34,1.56,.64,1) !important;
}
@keyframes apkBarSlideUp {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════
   3. CHAI SPINNER — "pouring chai" rotation when bot is thinking
   ═══════════════════════════════════════════════════════════════════════ */

/* Any chai SVG element with working state */
.apk-gao-chai-svg.apk-chai-working,
.apk-bot-fab-svg.apk-chai-working {
  animation: chaiPour .9s cubic-bezier(.4,0,.6,1) infinite !important;
  transform-origin: 50% 70% !important;
}
@keyframes chaiPour {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(-14deg) scale(1.04); }
  50%  { transform: rotate(0deg) scale(1); }
  75%  { transform: rotate(14deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Steam paths pulse when working */
.apk-chai-working .chai-steam1,
.apk-chai-working .chai-steam2,
.apk-chai-working .chai-steam3 {
  animation: chaiSteam 1.2s ease-in-out infinite !important;
}
.apk-chai-working .chai-steam2 { animation-delay: .2s !important; }
.apk-chai-working .chai-steam3 { animation-delay: .4s !important; }
@keyframes chaiSteam {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50%       { opacity: 1;  transform: translateY(-3px); }
}

/* Chai agent bubble pill */
#apk-chai-agent-bubble {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(245,158,11,.3) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. INSIGHTS PAGE — Remove extra left/right padding
   ═══════════════════════════════════════════════════════════════════════ */

/* The serveInsightsView wraps in padding:16px 16px 120px.
   This CSS patch zeroes horizontal and lets the inner cards breathe naturally. */
#view-insights > div:first-child,
#view-insights .insights-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep the consistent view-panel spacing: 12px top, 120px bottom */
#view-insights {
  padding: 12px 0 0 !important;
}
.insights-grid {
  padding: 0 !important;
}

/* Insight cards: small horizontal margin to breathe without side indent */
#view-insights [style*="grid-template-columns"],
#view-insights [style*="display:grid"] {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
/* Header row in insights */
#view-insights [style*="justify-content:space-between"]:first-of-type {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
/* Smart tags row */
#view-insights [style*="flex-wrap:wrap"]:first-of-type {
  padding-left: 12px !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   5. BOT RESPONSE — Clean text, emoji fix, feedback row polish
   ═══════════════════════════════════════════════════════════════════════ */

/* Ensure bot messages use platform font with emoji fallback */
.chat-message.bot-message,
.apk-bot-bubble,
[class*="bot-msg"],
.conversation-messages .message.bot {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji',
               sans-serif !important;
  /* Prevent layout-breaking on long emoji sequences */
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* Bot response text: clean line-height */
.chat-message.bot-message p,
.chat-message.bot-message span,
.apk-bot-bubble p {
  line-height: 1.55 !important;
}

/* "Did this help?" feedback row: only show when message is complete */
.apk-bot-feedback-row {
  opacity: 0;
  transition: opacity .3s ease .4s;
  pointer-events: none;
}
.apk-bot-feedback-row.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Editable bot response textarea */
.apk-bot-edit-area {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-primary);
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  margin-top: 6px;
  outline: none;
  transition: border-color .15s;
}
.apk-bot-edit-area:focus {
  border-color: var(--primary);
}

/* Intent confirm chip: shows what bot WILL do */
.apk-intent-confirm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #818cf8;
  margin-top: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.apk-intent-confirm-chip:hover {
  background: rgba(99,102,241,.18);
  border-color: rgba(99,102,241,.5);
}


/* ═══════════════════════════════════════════════════════════════════════
   6. ALL FABs — Consistent sizing, subtle bg, discoverable bright border
   ═══════════════════════════════════════════════════════════════════════ */

/* Page FAB (add button, etc.) */
.apk-page-fab,
.apk-page-fab-primary,
#apk-page-fab {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1.5px solid rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 2px 10px rgba(99,102,241,.18), 0 0 0 2px rgba(99,102,241,.06) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .18s, box-shadow .18s, background .15s, border-color .15s !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
.apk-page-fab:hover,
#apk-page-fab:hover {
  transform: scale(1.07) !important;
  border-color: rgba(99,102,241,.75) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15), 0 6px 18px rgba(99,102,241,.25) !important;
}

/* Ensure all FABs have consistent bottom spacing above each other */
body.has-page-fab #apk-bot-fab-wrap {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 126px) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. CLUTTER REDUCTION — Remove redundant UI elements
   ═══════════════════════════════════════════════════════════════════════ */

/* Staff page: hide the duplicate mini worker-agent cards below the main cards */
#view-staff .apk-worker-agent-mini-row {
  display: none !important;
}

/* Chores page: hide the "30/page" text on mobile — show only page controls */
@media (max-width: 640px) {
  .apk-pagination-size-label {
    display: none !important;
  }
}

/* Home page: hide the lingering "Smart Score" sub-label below score card */
.apk-home-score-sublabel {
  display: none !important;
}

/* Bot feedback row: only show AFTER a full response, not mid-stream */
#apk-feedback-row {
  opacity: 0;
  transition: opacity .4s ease;
}
body.bot-response-complete #apk-feedback-row {
  opacity: 1;
}

/* [FIX-TOASTZINDEX-01 / item 2] The comment below documented an earlier, real fix — toasts WERE
   too aggressive, covering modal content — but dropping them to the SAME z-index as modals
   (9500) created a new, equally real bug: at equal z-index, DOM insertion order decides the
   winner, so a toast that happens to exist before a modal opens can render BEHIND it. That's
   the exact "save failed alert comes outside staff planner" report — the toast wasn't
   mispositioned, it was genuinely hidden behind the Staff Manager overlay. Toasts are small,
   transient banners (not full-screen blockers), so they don't need to be BELOW modals to avoid
   "covering" them — they need to be reliably visible. Placed above every known overlay in this
   codebase (confirm dialogs at 14000, auth pickers at 14000, mini-modal at 13500, Smart Import
   at 13000, standard planner/settings overlays at 9500) so status feedback is never silently
   lost behind whatever happens to be open.
   Z-INDEX HIERARCHY (highest to lowest) — keep this list current when adding new layers:
     15000  toasts / alerts               (this rule)
     14000  confirm dialogs, auth pickers
     13500  mini action-sheet modals
     13000  Smart Import
      9500  standard modals/overlays (settings, staff manager, meal planner, insights)
      5000  base modal system default
      3500  Smart Cart panel                                                              */
.toast-container,
#toast-container,
.apk-toast-wrap {
  z-index: 15000 !important;
}

/* [FIX-IMPORTGRID-01 / item 4, AUDIT_v0_1_0.md §4] Smart Import's mode-picker grid (CSV/JSON/
   Photo/Paste tiles) — was a fixed inline grid-template-columns:1fr 1fr with zero breakpoint,
   the one modal in the app that never joined this file's own 641px/1024px convention. 2 columns
   stays right for phone portrait (where it already worked); tablet/desktop now actually use the
   modal's available width instead of sitting small and centered with dead space around it. */
.apk-import-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (min-width: 641px) {
  .apk-import-mode-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .apk-import-mode-grid { grid-template-columns: repeat(4, 1fr); }
}

/* [FIX-IMPMOBILE-01 / item 1, 2026-07-22] Smart Import's body was always a row flex (main
   content + 168px-wide "Attached / Smart Intel" sidepanel), set via inline style in JS with no
   breakpoint at all — the actual root cause of the cramped/overflowing mode-card grid reported
   on phone portrait (cards squeezed into the leftover ~150px next to the fixed sidepanel).
   Below 641px, stack the sidepanel under the main content instead, both full width. The
   sidepanel's own width/border/padding are set inline in JS, so this override needs !important
   to win at this breakpoint. */
.apk-smart-import-body {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: flex-start;
}
@media (max-width: 640px) {
  .apk-smart-import-body {
    flex-direction: column;
  }
  .apk-smart-import-body #apk-imp-sidepanel {
    width: 100% !important;
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--border, #334155);
    padding-top: 12px;
    max-height: 220px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   8. VOICE PERMISSION MODAL — actionable guide when mic is blocked
   ═══════════════════════════════════════════════════════════════════════ */

#apk-mic-guide-sheet {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9800;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: fadeIn .2s ease;
}
#apk-mic-guide-sheet .sheet-inner {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 24px 20px calc(env(safe-area-inset-bottom,0px) + 24px);
  width: 100%;
  max-width: 480px;
  animation: apkSlideUp .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes apkSlideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
#apk-mic-guide-sheet .mic-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
}
#apk-mic-guide-sheet .mic-step:last-of-type {
  border-bottom: none;
}
#apk-mic-guide-sheet .mic-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.35);
  color: #818cf8;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
#apk-mic-guide-sheet .sheet-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
#apk-mic-guide-sheet .btn-try-again {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
#apk-mic-guide-sheet .btn-cancel-mic {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 14px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
}


/* ═══════════════════════════════════════════════════════════════════════
   9. PLANNER — High-value items visible, low-value collapsed
   ═══════════════════════════════════════════════════════════════════════ */

/* Urgent / high priority row highlight */
.planner-slot-row[data-priority="urgent"],
.planner-slot-row[data-priority="4"] {
  border-left: 3px solid #ef4444 !important;
  background: rgba(239,68,68,.04) !important;
}
.planner-slot-row[data-priority="high"],
.planner-slot-row[data-priority="3"] {
  border-left: 3px solid #f59e0b !important;
  background: rgba(245,158,11,.03) !important;
}

/* Low-priority items collapsed by default */
.planner-slot-row[data-priority="low"],
.planner-slot-row[data-priority="1"] {
  opacity: 0.55;
}
.planner-show-all .planner-slot-row[data-priority="low"],
.planner-show-all .planner-slot-row[data-priority="1"] {
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════════
   10. HOME PAGE — Critical signals banner polish
   ═══════════════════════════════════════════════════════════════════════ */

/* Overdue banner: make it more prominent */
.apk-overdue-banner {
  border-left: 3px solid #ef4444 !important;
  background: rgba(239,68,68,.06) !important;
  border-radius: 0 10px 10px 0 !important;
}

/* Absence banner: amber */
.apk-absence-banner {
  border-left: 3px solid #f59e0b !important;
  background: rgba(245,158,11,.06) !important;
  border-radius: 0 10px 10px 0 !important;
}

/* "Fix Now" button: smaller, cleaner */
.apk-fix-now-btn {
  font-size: 12px !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   11. GLOBAL POLISH — Consistent scroll padding, safe areas
   ═══════════════════════════════════════════════════════════════════════ */

/* Ensure content always scrolls above bottom chrome */
.view-panel.active {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 140px) !important;
}

/* Input placeholder: subtle, not bright */
input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary, rgba(148,163,184,.5)) !important;
  opacity: 1 !important;
}

/* Focus ring: consistent indigo */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(99,102,241,.6) !important;
  outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════════════
   v1.0-platform UI additions — appended, do not remove
   ══════════════════════════════════════════════════════ */

/* [FIX-DEADCOMMENT-02, v0.2.0, 2026-08-30, Round BE] Same pre-existing bug class as the
   .data-table header above -- item 1's opening marker was missing, so this whole list plus
   its own closing marker sat as raw invalid tokens that could fold into whatever rule's
   selector came next. Restored, no content changed. */
/**
 *   1. .apk-smart-chips  — event-driven action chips (replaces shortcut strip on home)
 *   2. .apk-smart-chip   — individual chip
 *   3. Enhanced home hero slot styles
 *   4. Stat strip: hide score pill on zero-data state
 */

/* ══════════════════════════════════════════════════════════════
   SMART CHIPS — event-driven home action strip
   Replaces .apk-home-shortcuts on the home welcome card.
   Shows 4 context-aware actions, not a generic nav menu.
   ══════════════════════════════════════════════════════════════ */

.apk-smart-chips {
  display:         flex;
  align-items:     center;
  gap:             8px;
  flex-wrap:       wrap;           /* wraps at 2 rows max on narrow screens */
  padding:         2px 0 12px;
}

.apk-smart-chip {
  display:             inline-flex;
  align-items:         center;
  gap:                 5px;
  padding:             7px 13px 7px 10px;
  border-radius:       20px;       /* pill shape — not a card */
  border:              1px solid color-mix(in srgb, var(--chip-color) 30%, transparent);
  background:          color-mix(in srgb, var(--chip-color) 8%, transparent);
  color:               var(--text-primary);
  font-family:         inherit;
  font-size:           12px;
  font-weight:         600;
  cursor:              pointer;
  white-space:         nowrap;
  transition:          background .12s, border-color .12s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action:        manipulation;
  /* Fallback for browsers without color-mix */
  --chip-color:        #6366f1;
}

/* Fallback: browsers without color-mix get a tinted border */
@supports not (color: color-mix(in srgb, red 10%, blue)) {
  .apk-smart-chip {
    border-color: rgba(99,102,241,.25);
    background:   rgba(99,102,241,.07);
  }
}

.apk-smart-chip:hover,
.apk-smart-chip:focus-visible {
  background:   color-mix(in srgb, var(--chip-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--chip-color) 50%, transparent);
  transform:    translateY(-1px);
  outline:      none;
}

.apk-smart-chip:active {
  transform: scale(.95) translateY(0);
}

/* Urgent chip variant — red-tinted */
.apk-smart-chip.chip-urgent {
  --chip-color: #ef4444;
}

/* ══════════════════════════════════════════════════════════════
   HOME HERO SLOT POLISH
   Consistent border, spacing, and tap target for all 3 states.
   ══════════════════════════════════════════════════════════════ */

#home-welcome-card {
  /* Prevent hero from being too tall on short phones */
  max-width: 100%;
}

/* Ensure hero cards have consistent tap affordance */
#home-welcome-card [onclick] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

/* Morning brief hero — slightly larger tap target on mobile */
@media (max-width: 480px) {
  .apk-smart-chips {
    gap: 6px;
  }
  .apk-smart-chip {
    font-size:  11px;
    padding:    6px 11px 6px 9px;
  }
  .apk-smart-chip .material-symbols-outlined {
    font-size: 14px !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .apk-smart-chip {
    font-size: 12px;
    padding:   8px 14px 8px 11px;
  }
}

/* ══════════════════════════════════════════════════════════════
   STAT STRIP — hide gracefully when no data
   ══════════════════════════════════════════════════════════════ */

/* Stat strip with no-data state: hidden until JS shows it */
.home-stat-strip[data-loaded="false"] {
  display: none !important;
}

/* Smart Score pill is hidden until a real score exists */
#stat-smart-score:empty + .hss-lbl,
.hss-pill[data-score-pending="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   BOT SIGNAL MESSAGE — proactive alert card in chat
   ══════════════════════════════════════════════════════════════ */

#apk-bot-signal-msg {
  /* Already styled inline — add focus/hover state */
  transition: background .15s, border-color .15s;
}

#apk-bot-signal-msg:hover {
  background:   rgba(245,158,11,.12) !important;
  border-color: rgba(245,158,11,.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   COLLISION FIX: ensure home-group-agent-strip never overlaps
   chat messages on very short screens (< 600px tall)
   ══════════════════════════════════════════════════════════════ */

@media (max-height: 600px) {
  #home-group-agent-strip {
    margin-top: 2px;
  }
  .apk-smart-chips {
    padding-bottom: 6px;
  }
}

/* ══════════════════════════════════════════════════════════════
   PRINT / DEAD RULE NOTICE
   .apk-home-shortcuts and .apk-sc-btn remain in CSS for
   backward compatibility — they are no longer rendered on the
   home screen welcome card but may be used elsewhere.
   Do NOT delete those rules.
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   FAB SYSTEM — definitive position rules (override all)
   Layout (bottom-right column, mobile):
     + page FAB      : bottom 68px  (above bottom-nav)
     ⚡ smart FAB    : bottom 126px (above + FAB + gap)
   No chai FAB on non-home. No side rail.
   ══════════════════════════════════════════════════════ */

/* Page FAB (+ add button) — primary action, solid */
.apk-page-fab,
.apk-page-fab.apk-page-fab-primary {
  position:   fixed !important;
  right:      16px !important;
  bottom:     calc(env(safe-area-inset-bottom,0px) + 68px) !important;
  width:      48px !important;
  height:     48px !important;
  background: var(--primary, #6366f1) !important;
  border:     none !important;
  color:      #fff !important;
  box-shadow: 0 4px 16px rgba(99,102,241,.45) !important;
  z-index:    900 !important;
  border-radius: 50% !important;
  display:    flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor:     pointer !important;
  transition: transform .15s, box-shadow .15s !important;
  -webkit-tap-highlight-color: transparent !important;
}
.apk-page-fab:hover  { transform: scale(1.06) !important; }
.apk-page-fab:active { transform: scale(.92)  !important; }
.apk-page-fab .material-symbols-outlined { font-size: 24px !important; pointer-events: none !important; }
body.has-modal .apk-page-fab { display: none !important; }

/* Smart FAB (⚡ bolt) — secondary ghost, above page FAB */
#apk-smart-fab {
  position: fixed !important;
  right:    16px !important;
  bottom:   calc(env(safe-area-inset-bottom,0px) + 126px) !important;
  width:    40px !important;
  height:   40px !important;
  z-index:  1200 !important;
}

/* Smart panel — above smart FAB */
#apk-smart-panel {
  bottom: calc(env(safe-area-inset-bottom,0px) + 178px) !important;
  right:  16px !important;
}

/* Tablet+ */
@media (min-width: 641px) {
  .apk-page-fab,
  .apk-page-fab.apk-page-fab-primary {
    right:  20px !important;
    bottom: calc(env(safe-area-inset-bottom,0px) + 80px) !important;
  }
  #apk-smart-fab  { right: 20px !important; bottom: calc(env(safe-area-inset-bottom,0px) + 140px) !important; }
  #apk-smart-panel { right: 20px !important; bottom: calc(env(safe-area-inset-bottom,0px) + 192px) !important; }
}
@media (min-width: 1200px) {
  .apk-page-fab,
  .apk-page-fab.apk-page-fab-primary { right: 24px !important; bottom: 88px !important; }
  #apk-smart-fab  { right: 24px !important; bottom: 148px !important; }
  #apk-smart-panel { right: 24px !important; bottom: 200px !important; }
}

/* Hide smart FAB on home (command bar open) */
body.view-home #apk-smart-fab { display: none !important; }

/* No chai FAB ever shown */
#apk-bot-fab,
#apk-bot-fab-wrap { display: none !important; }

/* No side rail ever shown */
#apk-side-rail { display: none !important; }

/* Smart panel — full-width sheet on narrow phones */
@media (max-width: 480px) {
  #apk-smart-panel {
    right:  0 !important;
    left:   0 !important;
    width:  100% !important;
    bottom: calc(env(safe-area-inset-bottom,0px) + 178px) !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 72vh !important;
  }
}

/* Calendar add button — consistent with page FAB style */
button[onclick*="_calOpenAdd"],
button[onclick*="_calQuickAdd"] {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* slide-up animation for modal sheets */
@keyframes apk-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APUNKAI v0.1.0 BETA — FINAL PMF POLISH LAYER
   Mobile-first, cross-device, minimalist professional.
   Appended last — these rules have highest specificity priority.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── v0.1.0: Staff view — single card per person, no persona card duplication */
#view-staff .apk-worker-agent-mini-row,
#view-staff > div > div:last-child:has(.agent-member-card) {
  display: none !important;
}

/* ── v0.1.0: Calendar footer dots — static .cstat-dot spans are authoritative */
/* The JS s() function no longer injects dots — this CSS handles all dot states */
.apk-cal-stat-lbl .cstat-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
  flex-shrink: 0;
  opacity: 1;
  transition: opacity .15s;
}
/* When stat value is 0, dim the dot slightly to signal inactivity */
.apk-cal-stat-val[data-zero="true"] + .apk-cal-stat-lbl .cstat-dot {
  opacity: 0.35;
}

/* ── v0.1.0: Score consistency — Insights always shows same score as Home */
/* computeHomeScore() uses state.homeScore (API value) first, client fallback */
#view-insights .apunki-score-val,
#view-insights [id*="score-display"],
#view-insights .gci-score-text {
  /* Score values rendered here are pulled from state.homeScore, set on API response */
  font-variant-numeric: tabular-nums;
}

/* ── v0.1.0: Entity cards — uniform touch targets across all device widths */
.entity-card {
  min-height: 80px; /* WCAG 2.5.5: comfortable touch target */
  contain: layout style; /* perf: prevent layout thrash on scroll */
}
.entity-card-actions button,
.entity-card-actions .btn-icon {
  min-width: 40px;
  min-height: 40px;
  display: flex; align-items: center; justify-content: center;
}

/* ── v0.1.0: Manager card — branding aligned with CLAUDE.md rule #13 */
/* "Apunki Manager" label — never "Smart Home Manager" in the card */
.apk-manager-agent-card .manager-title::after {
  content: none; /* no pseudo-text injection — JS sets label directly */
}

/* ── v0.1.0: Home stat pills — always 2×2 on phones, 4-across on tablet+ */
@media (max-width: 599px) {
  .hss-stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}
@media (min-width: 600px) {
  .hss-stat-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ── v0.1.0: Insights tab — horizontal scroll chips for smart tags */
.apk-insights-smart-tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, black 88%, transparent 100%);
}
.apk-insights-smart-tags::-webkit-scrollbar { display: none; }

/* ── v0.1.0: GCI ring animation — smooth draw-in on first render */
.gci-ring circle.fill {
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
              stroke 0.4s ease;
}

/* ── v0.1.0: Federation panel — mobile sheet pattern */
@media (max-width: 640px) {
  .apk-federation-dashboard { padding: 0 12px 100px; }
  .connector-list { grid-template-columns: 1fr 1fr; }
  .federation-section { border-radius: 12px; padding: 14px; }
}

/* ── v0.1.0: Collective signals panel — compact mobile layout */
@media (max-width: 640px) {
  .apk-collective-signals-panel { padding: 12px; }
  .signal-card { padding: 10px 12px; }
}

/* ── v0.1.0: Upgrade nudge — never a hard block, always dismissable */
.apk-upgrade-nudge {
  user-select: none; /* prevent accidental text select on mobile */
  -webkit-user-select: none;
}
.apk-upgrade-nudge .nudge-dismiss {
  min-width: 36px; min-height: 36px; /* WCAG touch target */
  display: flex; align-items: center; justify-content: center;
}

/* ── v0.1.0: Calendar FAB — matches page FAB sizing exactly */
#apk-cal-add-fab {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: var(--primary, #6366f1) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(99,102,241,.45) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  position: fixed !important;
  right: 16px !important;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 9200 !important;
  transition: transform .15s, box-shadow .15s !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}
#apk-cal-add-fab:hover  { box-shadow: 0 6px 22px rgba(99,102,241,.6) !important; }
#apk-cal-add-fab:active { transform: scale(.92) !important; }
@media (min-width: 600px) {
  #apk-cal-add-fab { width: 52px !important; height: 52px !important; }
}

/* ── v0.1.0: Global accessibility — reduced motion compliance */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep opacity transitions for visibility — they're not distracting */
  .apk-upgrade-nudge, .apk-collective-signals-panel,
  #apk-bot-global-banner, .apk-gci-meter {
    transition: opacity .15s ease !important;
  }
}

/* ── v0.1.0: Viewport-safety — no content clips at 360px width */
@media (max-width: 360px) {
  .entity-card-actions { gap: 3px !important; }
  .entity-card-actions .btn-icon { width: 34px !important; height: 34px !important; min-width: 34px !important; }
  .hss-val { font-size: 18px !important; }
  .apk-manager-agent-card .manager-flows { gap: 3px !important; }
  .apk-flow-chip { padding: 3px 7px !important; font-size: 11px !important; }
}

/* ── v0.1.0: Dark mode refinement — slightly warmer background for eye comfort */
[data-theme="dark"] body,
:root {
  --bg-primary-warm: #0c1526; /* slightly warm dark blue — less harsh on OLED */
}

/* ── v0.1.0: Typography — fluid scale for readability across all screen sizes */
.view-title,
.view-header h2,
[class*="-page-title"] {
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 800;
  line-height: 1.25;
}

/* ── v0.1.0: Input focus — clear visual feedback on all inputs */
.command-input:focus,
#apk-chat-input:focus,
.chat-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) inset;
}

/* ── v0.1.0: Bottom nav safe area — guaranteed clearance on all phones */
#bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  height: auto !important;
  min-height: 56px;
}
.bottom-nav-btn {
  min-height: 48px; /* WCAG 2.5.5 touch target */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 2px;
}

/* ── v0.1.0: Smooth page transitions — instant view switches feel jarring */
.view-panel {
  animation: apk-view-in 0.18s ease forwards;
}
@keyframes apk-view-in {
  from { opacity: 0.7; transform: translateY(4px); }
  to   { opacity: 1;   transform: translateY(0);   }
}
@media (prefers-reduced-motion: reduce) {
  .view-panel { animation: none; }
}

/* END v0.1.0 BETA POLISH LAYER */


/* ============================================================
   BETA MERGE — app-css-beta.css v1.1.0-agentic-os
   Merged from separate patch file into single app.css.
   Addresses: Jaldi CSS-only fix, Persona Cards, Agent Talk Modal,
   Global Action Sheet, GCI Meter, Morning Command Hero,
   Safe-Area enforcement, Smart Score HUD, Collective Signals Panel.
   Design additions: DM Sans font-family upgrade, amber accent system.
   ============================================================ */

/* ── FONT UPGRADE ────────────────────────────────────────────── */
/* Add to your index.html <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Sora:wght@400;600;700&display=swap" rel="stylesheet">
*/

:root {
  --accent-amber:    #f59e0b;
  --accent-amber-dk: #d97706;
  --accent-ember:    #ea580c;
  --font-ui:         'DM Sans', system-ui, sans-serif;
  --font-display:    'Sora', 'DM Sans', sans-serif;

  /* Agent Talk Modal */
  --atm-bg:          #141c2e;
  --atm-panel-bg:    #1a2540;
  --atm-border:      #2a3a5c;

  /* Persona Card */
  --persona-btn-h:   36px;

  /* Action Sheet */
  --sheet-radius:    20px;

  /* Transitions */
  --t-snappy: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Apply DM Sans globally as upgrade from system font */
body {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────
   1. JALDI BUTTON — CSS-ONLY SIZING (no JS override)
   Single source of truth. Never in JS.
   ───────────────────────────────────────────────────────────── */
.jaldi-icon,
#apk-jaldi-btn,
[data-jaldi] {
  width:        30px !important;
  height:       30px !important;
  min-width:    30px;
  min-height:   30px;
  flex-shrink:  0;
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  border-radius: var(--radius-md);
  background:   var(--bg-tertiary);
  border:       1px solid var(--border);
  color:        var(--text-secondary);
  cursor:       pointer;
  transition:   background var(--t-snappy), color var(--t-snappy);
  /* No red fill at rest */
}

.jaldi-icon:hover,
#apk-jaldi-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Red only when Jaldi is active */
body.jaldi-active .jaldi-icon,
body.jaldi-active #apk-jaldi-btn,
body.jaldi-active [data-jaldi] {
  animation:  apk-jaldi-pulse 0.9s ease-in-out infinite;
  background: rgba(239, 68, 68, 0.15);
  color:      #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}

@keyframes apk-jaldi-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
  50%     { box-shadow: 0 0 0 6px rgba(239,68,68,0);  }
}

/* ─────────────────────────────────────────────────────────────
   2. PERSONA CARDS — action rows appended to staff/family cards
   ───────────────────────────────────────────────────────────── */
.apk-persona-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     8px 0 4px;
  border-top:  1px solid var(--border);
  margin-top:  8px;
  flex-wrap:   wrap;
}

.apk-persona-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  height:          var(--persona-btn-h);
  padding:         0 12px;
  border-radius:   var(--radius-md);
  border:          1px solid var(--border);
  background:      var(--bg-tertiary);
  color:           var(--text-secondary);
  font-size:       12px;
  font-weight:     500;
  font-family:     var(--font-ui);
  cursor:          pointer;
  transition:      background var(--t-snappy), color var(--t-snappy), border-color var(--t-snappy), transform 80ms;
  white-space:     nowrap;
  flex-shrink:     0;
}

.apk-persona-btn .material-icons { font-size: 15px; }

.apk-persona-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); }
.apk-persona-btn:active { transform: scale(0.97); }

/* Talk to Agent — amber accent */
.apk-persona-btn--agent {
  background:   rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color:        var(--accent-amber);
}
.apk-persona-btn--agent:hover {
  background:   rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.5);
  color:        var(--accent-amber);
}

/* Share — icon-only small button */
.apk-persona-btn--share {
  width:    var(--persona-btn-h);
  padding:  0;
  margin-left: auto;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   3. AGENT TALK MODAL
   ───────────────────────────────────────────────────────────── */
.apk-atm {
  position:  fixed;
  inset:     0;
  z-index:   300;
  display:   flex;
  align-items: flex-end;
  justify-content: center;
}

.apk-atm-backdrop {
  position: absolute;
  inset:    0;
  background: rgba(0,0,0,0.65);
  opacity:  0;
  transition: opacity var(--t-snappy);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.apk-atm--open .apk-atm-backdrop { opacity: 1; }

.apk-atm-panel {
  position:      relative;
  z-index:       1;
  width:         min(480px, 100%);
  background:    var(--atm-panel-bg, #1a2540);
  border:        1px solid var(--atm-border, #2a3a5c);
  border-bottom: none;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  box-shadow:    0 -8px 40px rgba(0,0,0,0.4);
  transform:     translateY(100%);
  transition:    transform var(--t-spring);
  overflow:      hidden;
  max-height:    90vh;
  display:       flex;
  flex-direction: column;
}

.apk-atm--open .apk-atm-panel { transform: translateY(0); }

/* Header */
.apk-atm-header {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     20px 20px 16px;
  border-bottom: 1px solid var(--atm-border);
}

.apk-atm-avatar {
  width:           46px;
  height:          46px;
  border-radius:   50%;
  background:      rgba(245,158,11,0.12);
  border:          1.5px solid rgba(245,158,11,0.3);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.apk-atm-avatar .material-icons {
  font-size: 22px;
  color:     var(--accent-amber);
}

.apk-atm-header-info { flex: 1; min-width: 0; }

.apk-atm-name {
  font-family: var(--font-display);
  font-size:   16px;
  font-weight: 600;
  color:       var(--text-primary);
  line-height: 1.2;
}

.apk-atm-role {
  font-size:   12px;
  color:       var(--text-tertiary);
  margin-top:  2px;
}

/* Confidence ring */
.apk-atm-conf { flex-shrink: 0; }
.apk-atm-conf-ring {
  position: relative;
  width: 44px; height: 44px;
}
.apk-atm-conf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.apk-atm-conf-pct {
  position:   absolute;
  inset:      0;
  display:    flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color:      var(--accent-amber);
  transform:  rotate(90deg); /* counter the SVG rotation */
}

.apk-atm-close {
  width:    32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color:  var(--text-tertiary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-snappy);
}
.apk-atm-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.apk-atm-close .material-icons { font-size: 18px; }

/* Body */
.apk-atm-body {
  padding: 16px 20px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.apk-atm-section-label {
  font-size:   11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:       var(--text-tertiary);
  margin-bottom: 10px;
}

.apk-atm-task-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     8px 10px;
  border-radius: var(--radius-md);
  background:  var(--bg-secondary);
  margin-bottom: 6px;
  font-size:   13px;
  color:       var(--text-secondary);
}
.apk-atm-task-icon { font-size: 15px; color: var(--success); }
.apk-atm-empty {
  font-size: 13px;
  color:     var(--text-tertiary);
  padding:   8px 0;
  font-style: italic;
}

.apk-atm-outcome {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  padding:     12px;
  background:  rgba(16,185,129,0.08);
  border:      1px solid rgba(16,185,129,0.2);
  border-radius: var(--radius-md);
  font-size:   13px;
  color:       #34d399;
  animation:   apk-fade-in 0.3s ease;
}
.apk-atm-outcome-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* Footer */
.apk-atm-footer {
  padding:       12px 20px;
  border-top:    1px solid var(--atm-border);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.apk-atm-input-row {
  display:     flex;
  gap:         8px;
  align-items: center;
}

.apk-atm-input {
  flex:         1;
  height:       44px;
  background:   var(--bg-primary);
  border:       1px solid var(--border);
  border-radius: var(--radius-md);
  color:        var(--text-primary);
  font-size:    14px;
  font-family:  var(--font-ui);
  padding:      0 14px;
  outline:      none;
  transition:   border-color var(--t-snappy);
}
.apk-atm-input:focus { border-color: var(--accent-amber); }
.apk-atm-input::placeholder { color: var(--text-tertiary); }

.apk-atm-send {
  width:        44px; height: 44px;
  border-radius: var(--radius-md);
  background:   var(--accent-amber);
  border:       none;
  color:        #0f172a;
  display:      flex; align-items: center; justify-content: center;
  cursor:       pointer;
  flex-shrink:  0;
  transition:   background var(--t-snappy), transform 80ms;
}
.apk-atm-send:hover    { background: var(--accent-amber-dk); }
.apk-atm-send:active   { transform: scale(0.95); }
.apk-atm-send:disabled { opacity: 0.5; cursor: not-allowed; }
.apk-atm-send .material-icons { font-size: 18px; }

.apk-atm-hint {
  font-size:   11px;
  color:       var(--text-tertiary);
  margin-top:  8px;
  text-align:  center;
}

/* ─────────────────────────────────────────────────────────────
   4. GLOBAL ACTION SHEET (FAB tap on non-home views)
   ───────────────────────────────────────────────────────────── */
.apk-action-sheet {
  position:   fixed;
  inset:      0;
  z-index:    250;
  display:    flex;
  align-items: flex-end;
  justify-content: center;
}

.apk-action-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  opacity:    0;
  transition: opacity var(--t-snappy);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.apk-action-sheet--open .apk-action-sheet-backdrop { opacity: 1; }

.apk-action-sheet-panel {
  position:     relative;
  z-index:      1;
  width:        min(400px, 100%);
  background:   var(--bg-secondary);
  border:       1px solid var(--border);
  border-bottom: none;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  padding:      8px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform:    translateY(100%);
  transition:   transform var(--t-spring);
  box-shadow:   0 -4px 24px rgba(0,0,0,0.3);
}
.apk-action-sheet--open .apk-action-sheet-panel { transform: translateY(0); }

.apk-action-sheet-handle {
  width: 36px; height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  margin: 8px auto 16px;
}

.apk-action-sheet-title {
  font-family: var(--font-display);
  font-size:   13px;
  font-weight: 600;
  color:       var(--text-tertiary);
  text-align:  center;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.apk-action-sheet-btn {
  display:     flex;
  align-items: center;
  gap:         14px;
  width:       100%;
  height:      52px;
  padding:     0 16px;
  border-radius: var(--radius-lg);
  border:      1px solid var(--border);
  background:  var(--bg-tertiary);
  color:       var(--text-primary);
  font-size:   15px;
  font-weight: 500;
  font-family: var(--font-ui);
  cursor:      pointer;
  margin-bottom: 8px;
  transition:  background var(--t-snappy), transform 80ms;
}
.apk-action-sheet-btn .material-icons { font-size: 20px; color: var(--text-secondary); }
.apk-action-sheet-btn:hover { background: var(--bg-hover); }
.apk-action-sheet-btn:active { transform: scale(0.98); }

/* Talk to Agent button — amber */
.apk-action-sheet-btn--accent {
  background:   rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.3);
  color:        var(--accent-amber);
}
.apk-action-sheet-btn--accent .material-icons { color: var(--accent-amber); }
.apk-action-sheet-btn--accent:hover { background: rgba(245,158,11,0.17); }

/* Cancel button */
.apk-action-sheet-btn--cancel {
  background:  transparent;
  border-color: transparent;
  color:       var(--text-tertiary);
  font-size:   14px;
  justify-content: center;
  margin-top:  4px;
}
.apk-action-sheet-btn--cancel:hover { background: var(--bg-tertiary); color: var(--text-secondary); }

/* ─────────────────────────────────────────────────────────────
   5. GLOBAL AGENT PROXY CARD
   ───────────────────────────────────────────────────────────── */
.apk-agent-proxy-card {
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     14px 16px;
  margin:      0 0 12px;
  background:  linear-gradient(135deg, rgba(245,158,11,0.07) 0%, rgba(234,88,12,0.04) 100%);
  border:      1px solid rgba(245,158,11,0.2);
  border-radius: var(--radius-xl);
  cursor:      pointer;
  transition:  background var(--t-snappy), transform 80ms;
  user-select: none;
}
.apk-agent-proxy-card:hover {
  background: linear-gradient(135deg, rgba(245,158,11,0.12) 0%, rgba(234,88,12,0.07) 100%);
  border-color: rgba(245,158,11,0.35);
}
.apk-agent-proxy-card:active { transform: scale(0.99); }

.apk-apc-icon {
  width:        44px; height: 44px;
  border-radius: 50%;
  background:   rgba(245,158,11,0.12);
  display:      flex; align-items: center; justify-content: center;
  flex-shrink:  0;
}
.apk-apc-icon .material-icons { font-size: 22px; color: var(--accent-amber); }

.apk-apc-content { flex: 1; min-width: 0; }
.apk-apc-title {
  font-family: var(--font-display);
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
}
.apk-apc-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

.apk-apc-cta .material-icons { font-size: 20px; color: var(--accent-amber); }

/* Compact version for home view */
.apk-agent-proxy-card--compact {
  padding:     10px 14px;
  border-radius: var(--radius-lg);
  gap:         10px;
}
.apk-apc-icon-sm { font-size: 17px; color: var(--accent-amber); }
.apk-apc-label { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.apk-apc-arrow { font-size: 18px; color: var(--text-tertiary); }

/* ─────────────────────────────────────────────────────────────
   6. GCI METER ENHANCED
   ───────────────────────────────────────────────────────────── */
.apk-gci-meter {
  display:     flex;
  align-items: center;
  gap:         16px;
  padding:     14px 16px;
  background:  var(--bg-secondary);
  border:      1px solid var(--border);
  border-radius: var(--radius-xl);
}

.apk-gci-ring-wrap {
  position:    relative;
  width:       72px; height: 72px;
  flex-shrink: 0;
}
.apk-gci-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.apk-gci-ring-fill { transition: stroke-dasharray 0.6s cubic-bezier(0.4,0,0.2,1); }

.apk-gci-score-center {
  position:   absolute;
  inset:      0;
  display:    flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform:  rotate(90deg); /* counter SVG rotation */
}
.apk-gci-score-num {
  font-family: var(--font-display);
  font-size:   20px;
  font-weight: 700;
  color:       var(--text-primary);
  line-height: 1;
}
.apk-gci-score-label { font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.04em; }

.apk-gci-right { flex: 1; min-width: 0; }

.apk-gci-pillars { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.apk-gci-pillar {
  display:     flex;
  align-items: center;
  gap:         6px;
}
.apk-gci-pillar-icon { font-size: 13px; color: var(--text-tertiary); width: 14px; }
.apk-gci-pillar-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}
.apk-gci-pillar-fill {
  height: 100%;
  background: var(--accent-amber);
  border-radius: 2px;
  transition: width 0.5s ease;
  min-width: 2px;
}
.apk-gci-pillar-label { font-size: 11px; color: var(--text-tertiary); width: 44px; }

.apk-gci-trend-row { display: flex; align-items: flex-end; gap: 3px; height: 16px; margin-bottom: 6px; }
.apk-gci-trend-bar { background: rgba(245,158,11,0.4); border-radius: 1px; min-height: 4px; width: 8px; }
.apk-gci-trend-empty { font-size: 11px; color: var(--text-tertiary); font-style: italic; }

.apk-gci-hint {
  font-size:   11px;
  color:       var(--accent-amber);
  opacity:     0.8;
  font-style:  italic;
}

/* ─────────────────────────────────────────────────────────────
   7. MORNING COMMAND HERO
   ───────────────────────────────────────────────────────────── */
.morning-command-hero,
[data-flow="morning_summary"],
#apk-morning-hero {
  position:    relative;
  overflow:    hidden;
  border-radius: var(--radius-xl);
  background:  linear-gradient(135deg, #1e1a0e 0%, #1c1008 100%);
  border:      1px solid rgba(245,158,11,0.2);
  padding:     20px;
  cursor:      pointer;
  transition:  border-color var(--t-snappy), transform 80ms;
  user-select: none;
  margin-bottom: 12px;
}

.morning-command-hero::before {
  content:  '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(245,158,11,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.morning-command-hero:hover { border-color: rgba(245,158,11,0.4); }
.morning-command-hero:active { transform: scale(0.995); }

/* ─────────────────────────────────────────────────────────────
   8. SMART SCORE HUD — persistent header ring
   ───────────────────────────────────────────────────────────── */
.score-trend {
  font-size:   11px;
  font-weight: 600;
  margin-left: 3px;
  vertical-align: middle;
}
.score-trending-up   { color: var(--success); }
.score-trending-down { color: var(--error);   }
.score-stable        { color: var(--text-tertiary); }

/* ─────────────────────────────────────────────────────────────
   9. COLLECTIVE SIGNALS PANEL (bhāī plan gate)
   ───────────────────────────────────────────────────────────── */
.apk-collective-signals-panel {
  background:  var(--bg-secondary);
  border:      1px solid var(--border);
  border-radius: var(--radius-xl);
  padding:     16px;
  margin-bottom: 12px;
}

.apk-csp-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.apk-csp-title {
  font-family: var(--font-display);
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
  display:     flex;
  align-items: center;
  gap:         6px;
}
.apk-csp-title .material-icons { font-size: 16px; color: var(--accent-amber); }
.apk-csp-privacy {
  font-size: 11px;
  color:       var(--text-tertiary);
  font-style:  italic;
}

.apk-csp-signal {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     10px 12px;
  background:  var(--bg-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  font-size:   13px;
  color:       var(--text-secondary);
}
.apk-csp-signal-icon { font-size: 15px; color: var(--text-tertiary); }
.apk-csp-conf {
  margin-left: auto;
  font-size:   11px;
  color:       var(--text-tertiary);
  font-weight: 500;
}
.apk-csp-conf--high { color: var(--success); }

/* ─────────────────────────────────────────────────────────────
   10. SIGNAL BANNERS (home view alerts)
   ───────────────────────────────────────────────────────────── */
.apk-signal-banner {
  border-radius: var(--radius-lg);
  font-size:    13px;
  cursor:       pointer;
  transition:   opacity 0.2s;
}
.apk-signal-banner.signal-warn {
  background:   rgba(245,158,11,0.08);
  border:       1px solid rgba(245,158,11,0.2);
}
.apk-signal-banner.signal-error {
  background:   rgba(239,68,68,0.07);
  border:       1px solid rgba(239,68,68,0.2);
}
.apk-signal-banner.signal-ok {
  background:   rgba(16,185,129,0.07);
  border:       1px solid rgba(16,185,129,0.2);
}

/* ─────────────────────────────────────────────────────────────
   11. FAB RULES — home hides FAB, shows mini bar
   ───────────────────────────────────────────────────────────── */
body.view-is-home #apk-page-fab {
  display:        none !important;
  visibility:     hidden;
  pointer-events: none;
}
/* Non-home: mini bar hidden (via JS display:none; this is a fallback) */
body:not(.view-is-home) #apk-cmd-bar-mini {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   12. SAFE-AREA INSETS — bottom nav + modals
   ───────────────────────────────────────────────────────────── */
#nav-container,
.bottom-nav,
[class*="bottom-nav"],
.apk-tab-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Ensure home view doesn't clip behind bottom nav on notched phones */
#view-home,
.view-content,
[id^="view-"] {
  padding-bottom: calc(var(--nav-height, 64px) + env(safe-area-inset-bottom, 0px));
}

/* ─────────────────────────────────────────────────────────────
   13. ANIMATIONS & UTILITIES
   ───────────────────────────────────────────────────────────── */
@keyframes apk-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes apk-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Founding member star badge */
.apk-founding-badge {
  display:      inline-flex;
  align-items:  center;
  gap:          4px;
  padding:      2px 8px;
  border-radius: 99px;
  background:   rgba(245,158,11,0.1);
  border:       1px solid rgba(245,158,11,0.25);
  font-size:    11px;
  font-weight:  600;
  color:        var(--accent-amber);
}

/* ─────────────────────────────────────────────────────────────
   14. MOBILE RESPONSIVE — persona actions wrap on tiny screens
   ───────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .apk-persona-actions { gap: 6px; }
  .apk-persona-btn     { font-size: 11px; padding: 0 10px; height: 32px; }
  .apk-atm-panel       { border-radius: 16px 16px 0 0; }
}

/* ─────────────────────────────────────────────────────────────
   15. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .apk-atm-panel,
  .apk-action-sheet-panel,
  .apk-atm-backdrop,
  .apk-action-sheet-backdrop {
    transition-duration: 0.01ms !important;
  }
  @keyframes apk-jaldi-pulse { 0%,100% { box-shadow: none; } }
}

/* ── END app-css-beta.css v1.1.0-agentic-os ── */

/* ══════════════════════════════════════════════════════════════════
   ApkAutocomplete dropdown — FIX 7
   ══════════════════════════════════════════════════════════════════ */
#apk-ac-dropdown {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'DM Sans', sans-serif);
}
#apk-ac-dropdown li {
  display: block;
}
#apk-ac-dropdown li.apk-ac-item--active,
#apk-ac-dropdown li:hover {
  background: var(--bg-tertiary) !important;
}

/* ── Bottom nav label truncation — FIX 2 ────────────────────────── */
/* Prevents long labels ("Members", "Insights") from overflowing their pill */
#bottom-nav .nav-btn span:last-child,
#bottom-nav [class*="nav-btn"] span:last-child {
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ── End of patch fixes ─────────────────────────────────────────── */


/* ============================================================================
   GROUP BRAIN CANVAS — PMF-002 / PMF-004 / PMF-005
   All selectors namespaced under apk-gb-*, apk-domain-*, apk-persona-*,
   apk-disambig-* to avoid collisions with existing styles.
   ============================================================================ */

/* ─── Canvas wrapper ─── */
.apk-gb-canvas {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Greeting ─── */
.apk-gb-greeting {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

/* ─── Domain row ─── */
.apk-gb-domain-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.apk-domain-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
}
.apk-domain-home     { background: rgba(16,185,129,.12); color: #10b981; border: 1px solid rgba(16,185,129,.3); }
.apk-domain-business { background: rgba(99,102,241,.12); color: var(--primary); border: 1px solid rgba(99,102,241,.3); }
.apk-domain-toggle {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.apk-domain-toggle:hover { border-color: var(--primary); color: var(--primary); }

/* ─── Alert strip ─── */
.apk-gb-alert {
  font-size: 12px;
  font-weight: 600;
  color: var(--warning, #f59e0b);
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 8px;
  padding: 6px 10px;
}

/* ─── Stats row ─── */
.apk-gb-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.apk-gb-stat {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.apk-gb-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.apk-gb-stat-lbl {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ─── Persona chip row ─── */
.apk-gb-persona-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.apk-persona-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.apk-persona-chip:hover,
.apk-persona-chip.active {
  border-color: var(--primary);
  background: rgba(99,102,241,.1);
  color: var(--primary);
}
.apk-persona-chip:active { transform: scale(.96); }

/* ─── Disambiguation card (PMF-004) ─── */
.apk-disambig-card {
  background: var(--bg-secondary);
  border: 1.5px solid rgba(99,102,241,.3);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 8px;
  animation: apkFadeUp .2s ease;
}
@keyframes apkFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.apk-disambig-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.apk-disambig-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.apk-disambig-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(99,102,241,.35);
  background: rgba(99,102,241,.07);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.apk-disambig-chip:hover  { background: rgba(99,102,241,.15); border-color: var(--primary); }
.apk-disambig-chip:active { transform: scale(.96); }

/* ─── Responsive ─── */
@media (max-width: 480px) {
  .apk-gb-canvas      { padding: 12px 12px 10px; gap: 8px; border-radius: 12px; }
  .apk-gb-greeting    { font-size: 14px; }
  .apk-gb-stat-val    { font-size: 17px; }
  .apk-persona-chip   { font-size: 11px; padding: 4px 10px; }
  .apk-cmd-compact    { padding-block: 4px !important; border-radius: 12px 12px 0 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .apk-disambig-card  { animation: none; }
  .apk-persona-chip,
  .apk-domain-toggle,
  .apk-mf-btn         { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTEGRATED FIX RULES — v0.1.0-beta
   (formerly app-fixes.css — merged at source, load order: end-of-file
    so cascade guarantees these override any earlier conflicting rules)
   Fixes: F1 stat-strip dedup · F2 bot-pill · F3 home clutter · F4 sidebar
          F5 feedback row · F6 insights · F7 multi-home · F8 grocery
          F9 meal planner · F10 autocomplete · F11 orphan isolation · F12 messages
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ApunkAI — app-fixes.css
 * Version: 0.1.0-beta-fixes
 * Loaded AFTER app.css — overrides only broken/missing rules.
 *
 * FIXES:
 *  F1 — Duplicate home stat rows collapsed to one
 *  F2 — Bot-phase-pill no longer bleeds into conversation feed
 *  F3 — Home clutter: single agent-strip, no stacked mode-tabs
 *  F4 — Member nav labels: sidebar item max-width + ellipsis
 *  F5 — Feedback buttons: inline under each bot message, not orphaned
 *  F6 — Insights layout: two-column grid, ring chart readable
 *  F7 — Multi-home switcher chip in header
 *  F8 — Grocery cart: empty-state copy so users know cart persists
 *  F9 — Meal planner quick-picks strip always visible
 * F10  — Command bar: autocomplete z-index above modals
 * F12  — Message feedback row: cleaner, no orphan position
 */

/* ═══════════════════════════════════════════════════════════════════════
   F1 — HOME STAT STRIP: one instance only
   The old index.html had a static strip + JS injected a second one.
   New index.html has ONE strip (#apk-home-stat-strip), hidden until JS
   calls updateDashboardUI() which adds class .populated to reveal it.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide ANY stat strip that isn't the canonical one */
.home-stat-strip:not(#apk-home-stat-strip) {
  display: none !important;
}
/* RCA-1 FIX: strip is hidden by default; .populated shows it as grid */
#apk-home-stat-strip {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#apk-home-stat-strip.populated {
  display: grid;
  opacity: 1;
}

/* Compact pills — fits 4 on any phone without overflow */
#apk-home-stat-strip .hss-pill {
  padding: 8px 4px 6px;
  border-radius: 10px;
  min-width: 0;
}
#apk-home-stat-strip .hss-val {
  font-size: 18px;
}
#apk-home-stat-strip .hss-lbl {
  font-size: 11px;
  letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   F2 — BOT PHASE PILL: stays out of conversation feed
   ═══════════════════════════════════════════════════════════════════════ */

/* The pill lives in #apk-bot-phase-wrap which is inside .command-bar,
   NOT inside #conversation-messages. So it can never overlap chat.   */
#apk-bot-phase-wrap {
  text-align: center;
  padding: 0 4px 2px;
  min-height: 0;
  overflow: hidden;
}
#bot-phase-pill {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-tertiary);
  opacity: 0.45;
  transition: opacity 0.2s, color 0.2s;
  pointer-events: none;
  user-select: none;
  display: inline-block;
  padding: 2px 0;
}

/* The ambient "Apunki active" floating banner — keep it near command bar,
   away from conversation feed. JS already positions it fixed at bottom.
   Just ensure it doesn't obscure the command input.                      */
#apk-bot-global-banner {
  /* Override JS inline style bottom to clear command-bar height */
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  right: 56px !important; /* clear grocery cart FAB */
  max-width: 160px;
}

/* When bot is active, the banner lifts higher so it doesn't block input */
body.bot-active #apk-bot-global-banner {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   F3 — HOME VIEW CLUTTER: single greeting, single agent strip
   ═══════════════════════════════════════════════════════════════════════ */

/* Only the first home-welcome-card renders (JS guard + CSS).
   If JS injects a second greeting div, this hides it.          */
#home-welcome-card ~ #home-welcome-card {
  display: none !important;
}

/* Morning brief card — visible, tappable, amber left-border */
.morning-command-hero {
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.06);
  padding: 12px 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.morning-command-hero:hover,
.morning-command-hero:active {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.5);
}
.morning-command-hero:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

/* Agent strip — scrollable, no height collapse */
#home-group-agent-strip {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 4px;
}
#home-group-agent-strip::-webkit-scrollbar { display: none; }

/* Manager card agent quick-bar chips — don't wrap, scroll instead */
.apk-agent-quick-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  flex-wrap: nowrap;
}
.apk-agent-quick-bar::-webkit-scrollbar { display: none; }
.apk-agent-quick-bar button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   F4 — SIDEBAR + BOTTOM NAV: member nav label sizing
   ═══════════════════════════════════════════════════════════════════════ */

/* Sidebar collapsed: icon only, no label overflow */
.sidebar:not(.expanded) .nav-label {
  display: none !important;
}

/* Sidebar expanded: label fits with ellipsis */
.sidebar.expanded .nav-label {
  display: inline;
  opacity: 1;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bottom nav: 5 items always visible, no text overflow */
.bottom-nav-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px 4px;
  font-size: 11px;
  overflow: hidden;
}
.bottom-nav-btn > span:last-of-type {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   F5 — MESSAGE FEEDBACK ROW: positioned properly under bot bubble
   ═══════════════════════════════════════════════════════════════════════ */

/* [v0.1.0] Feedback override — compact icon-only */
.message-feedback {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
  flex-wrap: nowrap;
}
.message-feedback .apk-mf-label { display: none; }
.apk-mf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  color: var(--text-tertiary);
  font-family: inherit;
  transition: all 0.12s;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  flex-shrink: 0;
}
.apk-mf-yes { color: var(--text-tertiary); }
.apk-mf-yes:hover { border-color: #10b981; color: #10b981; background: rgba(16,185,129,0.1); }
.apk-mf-no  { color: var(--text-tertiary); }
.apk-mf-no:hover  { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.1); }
.apk-mf-refine { display: none; }
.apk-mf-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Legacy feedback-btn (thumbs) — kept for backward compat */
.feedback-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.feedback-btn:hover { transform: scale(1.1); }
.feedback-btn.up:hover { background: rgba(22, 163, 74, 0.14); color: #16a34a; border-color: rgba(22,163,74,.5); }
.feedback-btn.down:hover { background: rgba(220, 38, 38, 0.14); color: #dc2626; border-color: rgba(220,38,38,.5); }

/* Teach chip */
.apk-bot-teach-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  margin-top: 4px;
  -webkit-tap-highlight-color: transparent;
}
.apk-bot-teach-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(99, 102, 241, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════
   F6 — INSIGHTS: readable two-column layout, proper ring chart
   ═══════════════════════════════════════════════════════════════════════ */

#view-insights .entity-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

#view-insights .stat-card {
  min-height: 100px;
  padding: 14px 12px;
}

/* Smart score — amber highlight */
#view-insights .stat-card .stat-value[data-score] {
  color: #f59e0b;
}

/* Completion ring SVG */
.apk-completion-ring {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}
.apk-ring-bg   { fill: none; stroke: var(--border); stroke-width: 8; }
.apk-ring-fill { fill: none; stroke: #10b981; stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.apk-ring-text { fill: var(--text-primary); font-size: 0.9rem; font-weight: 700; text-anchor: middle; font-family: 'Inter', sans-serif; }

/* Mini stat grid below main insights */
.apk-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.apk-mini-stat {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.apk-mini-stat__icon  { font-size: 1.1rem; }
.apk-mini-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-tertiary); }
.apk-mini-stat__val   { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); }

@media (max-width: 480px) {
  #view-insights .entity-stats-row { grid-template-columns: 1fr 1fr; }
  .apk-mini-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   F7 — MULTI-HOME SWITCHER in header
   ═══════════════════════════════════════════════════════════════════════ */

#apk-home-switcher-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  max-width: 140px;
}

/* [FIX-SWITCHERWRAP-01, Round U, 2026-08-21] The chip above put white-space/overflow/ellipsis on
   the FLEX CONTAINER, not the text -- text-overflow:ellipsis only ever does anything on a
   box whose own overflow is clipping ITS OWN text node, and this container's only text lives
   inside the #apk-home-switcher-name child span. On a long group name (e.g. "ApunkAI Internal --
   Business (test)") the icon+name+chevron simply overflowed the 140px box and got hard-clipped
   mid-character with no ellipsis -- the ragged wrap the founder flagged. Ellipsis now lives on
   the name span itself, which is what actually has the text to truncate; min-width:0 lets it
   shrink inside the flex row instead of forcing the row wider than its 140px cap (flex items
   default to min-width:auto, which silently defeats overflow:hidden on a flex child -- the
   second half of why this never truncated). */
#apk-home-switcher-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#apk-home-switcher-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
}

/* Home list items in switcher modal */
.apk-home-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.apk-home-item:hover { border-color: var(--primary); background: rgba(99,102,241,.06); }
.apk-home-item.is-active { border-color: var(--primary); background: rgba(99,102,241,.1); }
.apk-home-item__icon  { font-size: 1.6rem; flex-shrink: 0; }
.apk-home-item__info  { flex: 1; min-width: 0; }
.apk-home-item__name  { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.apk-home-item__meta  { font-size: 11px; color: var(--text-tertiary); }
.apk-home-item__badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; background: var(--primary);
  color: #fff; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   F8 — GROCERY CART: empty-state, persistence indicator
   ═══════════════════════════════════════════════════════════════════════ */

#apk-cart-items-list .apk-cart-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-tertiary);
}
#apk-cart-items-list .apk-cart-empty .apk-cart-empty__icon { font-size: 2.5rem; margin-bottom: 12px; }
#apk-cart-items-list .apk-cart-empty p { font-size: 13px; line-height: 1.6; }

/* Cart save indicator — shows briefly when server saves */
.apk-cart-save-indicator {
  font-size: 11px;
  color: #10b981;
  text-align: right;
  padding: 2px 4px;
  opacity: 0;
  transition: opacity 0.3s;
}
.apk-cart-save-indicator.visible { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   F9 — MEAL PLANNER: quick-picks strip visible + free-text input
   ═══════════════════════════════════════════════════════════════════════ */

/* Quick picks chips below meal cell input */
.apk-meal-quick-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 4px;
}
.apk-meal-pick-chip {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.apk-meal-pick-chip:hover,
.apk-meal-pick-chip:active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(99, 102, 241, 0.08);
}

/* Meal input — @ triggers staff autocomplete */
.apk-meal-input {
  width: 100%;
  font-size: 14px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  transition: border-color 0.15s;
  outline: none;
}
.apk-meal-input:focus { border-color: var(--primary); }

/* ══════════════════════════════════════════════════════════════════════
   F10 — COMMAND BAR AUTOCOMPLETE: above all overlays
   ══════════════════════════════════════════════════════════════════════ */

#apk-ac-dropdown {
  z-index: 99999 !important;
}

/* Autocomplete item highlight */
.apk-ac-item--active {
  background: var(--bg-tertiary) !important;
  color: var(--primary) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   F11 — RANDOM BOTTOM CONTENT: isolation
   Prevents orphaned text / banners from rendering inside view panels
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   F11 — VIEW-HOME ORPHAN GUARD: permissive containment
   Only prevents naked text nodes / truly unknown block elements from
   causing layout explosion. Does NOT clip JS-injected elements.
   ══════════════════════════════════════════════════════════════════════ */

/* Any direct child of #view-home that has no id and no class and is not a
   known structural element is constrained. JS always gives elements an id
   or class, so this rule is safe. Script/style tags are ignored by browsers. */
#view-home > *:not([id]):not([class]):not(script):not(style) {
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Everything with an id or class renders normally */
#view-home > [id],
#view-home > [class] {
  max-height: none !important;
  overflow: visible;
  pointer-events: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   F12 — BOT MESSAGE: cleaner layout, no orphan position
   ══════════════════════════════════════════════════════════════════════ */

.message-bot {
  animation: messageSlideIn 0.25s ease both;
}
.message-user {
  animation: messageSlideIn 0.2s ease both;
}

/* Bot bubble — no double-border artifacts */
.message-bot .message-content {
  border: 1px solid var(--border);
  border-radius: 0 12px 12px 12px;
  background: var(--bg-secondary);
  padding: 10px 13px;
  max-width: min(560px, 88vw);
  overflow-wrap: break-word;
  word-break: break-word;
  position: relative;
}

/* User bubble */
.message-user .message-bubble,
.message-user .message-content {
  border-radius: 12px 0 12px 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 13px;
  max-width: min(480px, 80vw);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ══════════════════════════════════════════════════════════════════════
   MISC QUALITY FIXES
   ══════════════════════════════════════════════════════════════════════ */

/* Reminder row mark-complete button — guard against null errors */
.apk-reminder-complete-btn {
  pointer-events: auto !important;
}
.apk-reminder-complete-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Staff assignment chips — show all staff, not just "Anyone" */
.apk-member-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 6px !important;
}
.apk-mc-btn {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Loading skeleton for staff chips while data loads */
.apk-mc-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 14px;
  border: 1.5px dashed var(--border);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-size: 11px;
  font-style: italic;
  animation: apkPulse 1.4s ease-in-out infinite;
}

/* Chore row — highlight when staff unassigned */
.apk-chore-row.needs-assignee .cell-assignee {
  color: var(--warning);
}

/* Reminders: completed row strike-through */
.is-completed-row {
  opacity: 0.55;
}
.is-completed-row td,
.is-completed-row .cell-title {
  text-decoration: line-through;
}

/* Morning command open handler — visual feedback */
[data-flow="morning_summary"] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* View panel — ensure it never clips the command bar area */
.view-panel {
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

/* Ensure insights view title/header row doesn't duplicate */
#view-insights .view-header + .view-header {
  display: none !important;
}

/* Pukar sensors icon + signal pulse */
#notif-bell-btn .material-symbols-outlined { font-size: 20px; }
#notif-bell-dot.visible {
  position: absolute;
  top: 0; right: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  border: 1.5px solid var(--bg-primary);
  animation: pukarPulse 1.8s ease-in-out 3;
}
@keyframes pukarPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.35); opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════════════
   APunkAI v0.1.0-beta — PMF Polish CSS
   Score Boosters · Quiet Feedback · All-Clear states
   ═══════════════════════════════════════════════════════════════ */

/* Score Booster cards */
.apk-booster-card {
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.apk-booster-card:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.apk-score-booster + * {
  /* Ensure booster cards don't crowd the greeting below */
  margin-top: 4px;
}

/* Quiet inline bot feedback row */
.apk-teach-row {
  transition: opacity 0.2s;
}
.apk-teach-row button:hover {
  background: var(--bg-tertiary) !important;
  transform: scale(1.15);
}
.apk-teach-row button:active {
  transform: scale(0.95);
}

/* Remove old alarming red teach chip if it still appears */
.apk-teach-chip {
  display: none !important;
}

/* Suppress fb-btn red styling — replaced by emoji buttons */
.fb-btn.fb-no {
  display: none;
}

/* Mic pulse animation */
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.pulse-red {
  animation: pulse-red 1s ease-in-out infinite;
  color: #ef4444 !important;
}

/* hss-pill zero suppression — pills with val=0 should never be visible */
.hss-pill[data-val="0"] {
  display: none !important;
}

/* All-clear row in insights stats */
.apk-all-clear {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(16,185,129,0.06);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 12px;
  font-size: 12px;
  color: #10b981;
  font-weight: 600;
}

/* Bot error card — friendly, not alarming */
.apk-bot-error {
  background: rgba(99,102,241,0.06);
  border: 1px solid rgba(99,102,241,0.15);
  border-radius: 12px;
  padding: 12px 14px;
}

/* ═══════════════════════════════════════════════════════════════
   ApunkAI v0.1.0-beta — Final PMF Polish
   Filter chips · Insights · Bot conversation · Staff cards
   ═══════════════════════════════════════════════════════════════ */

/* Universal quick-filter chips (Notes, Reminders, Chores) */
.apk-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.apk-filter-chip:hover  { border-color: var(--primary); color: var(--primary); }
.apk-filter-chip.active { background: rgba(99,102,241,.1); border-color: var(--primary); color: var(--primary); }

/* Insights view — consistent padding, no double-indentation */
#view-insights .view-header    { padding: 12px 0; }
#view-insights > div > div:not(.view-header) { padding-left: 0 !important; }

/* Bar chart SVG — prevent label overflow clipping */
#view-insights svg { overflow: visible !important; }

/* Staff card — ⚡ Talk injected by persona system, ••• is the only native button */
.entity-card-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding: 8px 0 0;
}
.entity-card-actions .btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

/* Score booster cards */
.apk-booster-card {
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.apk-booster-card:active { transform: scale(0.98); }

/* Bot conversation — clean, modern */
.apk-teach-row         { opacity: .65; transition: opacity .2s; }
.apk-teach-row:hover   { opacity: 1; }
.apk-teach-chip        { display: none !important; }  /* Old red chip — removed */

/* Reminders chip row — horizontal scroll, no scrollbar */
#reminders-chips-row::-webkit-scrollbar { display: none; }

/* [FIX-NOTECARD-01] Was a second, later-loading .notes-card-grid definition here (160px column
   minimum, no margin-top) that silently overrode the real one under "NOTES — Card Grid" above —
   consolidated there; see that block's comment. Do not re-add a second definition here. */

/* Voice mic pulse */
@keyframes apk-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(239,68,68,.0); }
}
.pulse-red { animation: apk-mic-pulse 1s ease-in-out infinite; color: #ef4444 !important; }

/* Suppress zero-value stat pills */
.hss-pill[data-val="0"] { display: none !important; }

/* All-clear insight row */
.apk-all-clear {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(16,185,129,.06);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 12px;
  font-size: 12px;
  color: #10b981;
  font-weight: 600;
  margin-bottom: 12px;
}


/* ═══════════════════════════════════════════════════════════════════════
   v0.1.0 MOBILE-FIRST — Portrait + Landscape + Bot reliability patches
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Send button — always tappable, never disabled unintentionally ────── */
#chat-send-btn,
.send-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  pointer-events: auto !important;
  min-width: 40px;
  min-height: 40px;
}

/* ── Command bar — portrait mobile ───────────────────────────────────── */
@media (max-width: 640px) and (orientation: portrait) {
  .command-bar,
  #apk-chat-bar,
  #command-bar {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px) !important;
    border-radius: 16px !important;
    padding: 7px 10px !important;
  }
  .command-input {
    font-size: 15px !important; /* prevents iOS auto-zoom on focus */
    min-height: 22px;
  }
  /* Suggestion chips — horizontal scroll, never wrap & clip */
  .suggestion-chips,
  #suggestion-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 4px 0 6px;
  }
  .suggestion-chips::-webkit-scrollbar,
  #suggestion-chips::-webkit-scrollbar { display: none; }
}

/* ── Command bar — landscape mobile ──────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .command-bar,
  #apk-chat-bar,
  #command-bar {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
    border-radius: 12px !important;
    padding: 5px 8px !important;
  }
  .command-input { font-size: 13px !important; min-height: 18px; }
  /* Bottom nav — hide in landscape to reclaim vertical space */
  .bottom-nav, #bottom-nav { display: none !important; }
  /* All views — minimal chrome clearance in landscape */
  .view-panel.active {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px) !important;
  }
}

/* ── Bot bar blocking staff/notes/chores ──────────────────────────────── */
@media (max-width: 640px) {
  /* Compact bot bar on secondary views */
  body[data-view="staff"] .command-bar,
  body[data-view="chores"] .command-bar,
  body[data-view="notes"] .command-bar,
  body[data-view="reminders"] .command-bar,
  body[data-view="planner"] .command-bar,
  body[data-view="insights"] .command-bar {
    padding-block: 5px;
    border-radius: 14px;
    opacity: 0.96;
  }
  /* [FIX-CMDBARFOCUS-01 / item 3] Was only defined for staff/chores — reminders, planner, and
     insights got the compact/dimmed treatment above but never the matching :focus-within rule
     that restores full prominence on tap. That's the actual "stays blocked unless you click on
     it" bug: tapping in did nothing visually distinct on those three views, unlike everywhere
     else. Same rule, all six views that get the compact treatment. */
  body[data-view="staff"] .command-bar:focus-within,
  body[data-view="chores"] .command-bar:focus-within,
  body[data-view="notes"] .command-bar:focus-within,
  body[data-view="reminders"] .command-bar:focus-within,
  body[data-view="planner"] .command-bar:focus-within,
  body[data-view="insights"] .command-bar:focus-within {
    opacity: 1;
  }
}

/* ── @Apunki active badge — fixed, never overlaps messages ───────────── */
.apunki-active-badge,
[class*="apunki-active"],
.apk-active-badge {
  position: fixed !important;
  right: 12px;
  bottom: calc(var(--apk-chrome-bottom, 120px) + 4px);
  z-index: 240;
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 20px;
  background: var(--bg-card) !important;
  color: var(--text-tertiary) !important;
  border: 1px solid var(--border) !important;
  pointer-events: none;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.7;
}

/* ── Bot message layout ───────────────────────────────────────────────── */
.message.bot,
.chat-message.bot,
.apk-bot-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}
.message.bot .msg-bubble,
.chat-message.bot .msg-bubble {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 44px);
}

/* ── Disambiguation chips — scrollable, never clipped ────────────────── */
/* [FIX-LIGHTTHEME-DISAMBIG-01] CONFIRMED root cause of the disambig card ("About your home —
   what do you want to see?") staying dark navy even in light theme: this rule used
   background:var(--bg-card) — a variable that is never defined ANYWHERE in the CSS (confirmed
   by grep across every stylesheet) — while an EARLIER .apk-disambig-card rule further up this
   file correctly used --bg-secondary (which IS properly redefined per-theme). Being later in
   the file, this broken rule won the cascade regardless of theme, so the card rendered with an
   effectively unset/transparent background that fell through to a dark ancestor instead of the
   intended, correctly-themed card surface. One correct rule now; the earlier duplicate for the
   same selector should be treated as superseded by this one, not a second source of truth.
   Same class of bug as the checkbox/label double-owner issues elsewhere — two rules for one
   selector, only one of which was ever theme-aware. */
.apk-disambig-card,
[class*="disambig-card"] {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 6px 0;
  max-width: 100%;
}
.apk-disambig-chips,
[class*="disambig-chips"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.apk-disambig-chip {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.12s;
}
.apk-disambig-chip:active { background: var(--primary); color: #fff; }

/* ── Score pill — hidden when baseline not met ───────────────────────── */
.hss-pill[data-no-baseline="true"] { display: none !important; }

/* ── Prevent iOS font-size zoom on input focus ───────────────────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  textarea,
  .command-input,
  #command-input {
    font-size: max(16px, 1em) !important;
  }
}
/* PMF14: Quick-action side chips removed — FAB handles global actions */
#apk-qmb-left, #apk-qmb-right,
.apk-qmb-side { display: none !important; }

/* PMF14: Planner pill selected states */
.apk-mpd {
  padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  border: 1.5px solid var(--border, #334155);
  background: transparent; color: var(--text-secondary, #94a3b8);
  transition: border-color .15s, background .15s, color .15s;
}
.apk-mpd.sel {
  border-color: var(--primary, #2563eb) !important;
  background: rgba(37,99,235,.14) !important;
  color: var(--primary, #2563eb) !important;
}
.apk-mp-mb {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  border: 1.5px solid var(--border, #334155);
  background: transparent; color: var(--text-secondary, #94a3b8);
  transition: border-color .15s, background .15s, color .15s;
}
.apk-mp-mb.sel {
  border-color: var(--primary, #2563eb) !important;
  background: rgba(37,99,235,.14) !important;
  color: var(--primary, #2563eb) !important;
}

/* PMF14: Global Quick-Action FAB */
#apk-global-fab {
  position: fixed;
  bottom: calc(var(--apk-chrome-bottom, 130px) + 14px);
  right: 16px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--primary, #2563eb);
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(37,99,235,.40);
  z-index: 300;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#apk-global-fab:active { transform: scale(.9); }
#apk-global-fab:hover  { box-shadow: 0 6px 24px rgba(37,99,235,.55); }
body.view-home #apk-global-fab { display: none !important; }
/* per-view add FAB */
.apk-view-fab {
  position: fixed;
  bottom: calc(var(--apk-chrome-bottom, 130px) + 14px);
  right: 16px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--primary, #2563eb); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(37,99,235,.38); z-index: 300;
  transition: transform .18s; -webkit-tap-highlight-color: transparent;
}
.apk-view-fab:active { transform: scale(.9); }
/* filter FAB left of add FAB */
.apk-filter-fab {
  position: fixed;
  bottom: calc(var(--apk-chrome-bottom, 130px) + 14px);
  right: calc(16px + 48px + 10px);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg-secondary, #1e293b); color: var(--text-secondary, #94a3b8);
  border: 1.5px solid var(--border, #334155); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.25); z-index: 300;
  transition: background .15s, color .15s;
}
.apk-filter-fab.active {
  background: rgba(37,99,235,.15); color: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
}
/* Quick-action bottom sheet */
#apk-qa-sheet {
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: flex-end; justify-content: center;
}
/* [FIX-FILTERSHEET-01] Filter Chores/Notes uses this modifier instead of the default
   bottom-anchored layout above -- see openFilterSheet() in app-agentic-os.js. The quick-add
   '+' grid (openSheet()) is unaffected, keeping its bottom-sheet behavior. */
#apk-qa-sheet.apk-qa-sheet--centered {
  align-items: center;
}
#apk-qa-sheet.apk-qa-sheet--centered #apk-qa-body {
  border-radius: 20px;
  animation: apkQAFadeIn .18s ease-out;
}
@keyframes apkQAFadeIn {
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
#apk-qa-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#apk-qa-body {
  position: relative; z-index: 1; width: 100%; max-width: 520px;
  background: var(--bg-secondary, #1e293b);
  border-radius: 20px 20px 0 0;
  padding: 6px 0 max(env(safe-area-inset-bottom,16px), 24px);
  box-shadow: 0 -8px 40px rgba(0,0,0,.4);
  animation: apkQAUp .22s cubic-bezier(.4,0,.2,1);
}
@keyframes apkQAUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.apk-qa-handle {
  width: 36px; height: 4px; background: var(--border, #334155);
  border-radius: 2px; margin: 8px auto 14px;
}
.apk-qa-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-tertiary, #64748b);
  padding: 0 20px 10px; border-bottom: 1px solid var(--border, #1e293b);
}
.apk-qa-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 6px; padding: 14px 16px 4px;
}
.apk-qa-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px 8px; border-radius: 12px; border: none;
  background: transparent; color: var(--text-secondary, #94a3b8);
  cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600;
  text-align: center; -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.apk-qa-btn:hover, .apk-qa-btn:active {
  background: var(--bg-tertiary, #334155); color: var(--text-primary, #f1f5f9);
}
.apk-qa-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
/* Landscape safety */
@media (orientation:landscape) and (max-height:500px) {
  #apk-global-fab, .apk-view-fab { bottom: 12px; right: 12px; width: 42px; height: 42px; }
  .apk-filter-fab { bottom: 12px; right: calc(12px+42px+8px); width: 36px; height: 36px; }
}
@media (min-width:641px) {
  #apk-global-fab, .apk-view-fab, .apk-filter-fab { right: 24px; }
}

/* PMF14: Insights cards - all clickable */
.apk-insights-card[onclick], .apk-insights-card[data-action] {
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.apk-insights-card[onclick]:hover, .apk-insights-card[data-action]:hover {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 1px var(--primary, #2563eb);
}

/* PMF14: Mobile portrait - bottom panel guaranteed visible after auth */
@media (max-width:640px) {
  body.authenticated .command-bar,
  body.authenticated #command-bar {
    display: flex !important; visibility: visible !important; opacity: 1 !important;
  }
  body.authenticated.show-bn #bottom-nav {
    display: flex !important; visibility: visible !important;
  }
}
@media (orientation:landscape) and (max-height:430px) {
  #bottom-nav { display: none !important; }
  .command-bar, #command-bar {
    bottom: env(safe-area-inset-bottom, 4px) !important;
    left: 4px !important; right: 4px !important;
  }
}
/* ────────────────────────────────────────────────────────────────────
   R37: Mobile UI fixes
   1. Bottom-nav must be visible on first load (not just after resize)
   2. Header icon order: Map → Calendar → Score → Bell → Filter → Avatar
   3. Insights view has bottom padding so content doesn't hide under nav
   ──────────────────────────────────────────────────────────────────── */

/* FIX-1 r37: Bottom-nav fallback — show when authenticated even before
   setNavMode runs. Belt-and-suspenders to prevent first-load blank state. */
@media (max-width: 640px) {
  body.authenticated #bottom-nav {
    display: flex !important;
  }
  /* Landscape phone exception — keep hidden */
  @media (orientation:landscape) and (max-height: 430px) {
    body.authenticated #bottom-nav { display: none !important; }
  }
}

/* [FIX-HDRORDER-SYNC-01 / item 5, 2026-07-23] The r37 fix below only ever applied this explicit
   icon order inside `@media (max-width: 640px)` — desktop/tablet had no `order` rule at all, so
   those icons rendered in whatever sequence app.js happened to insert them into the DOM
   (admin-or-score appendChild'd first, then bell appendChild'd, then filter INSERTED BEFORE bell
   via insertBefore(), then lang-badge appendChild'd last — i.e. [admin/score, filter, bell, lang])
   — a different order than the deliberately-chosen mobile sequence (score, bell, filter, admin,
   lang) below, confirmed via screenshot as the "icons are in a different order in mobile portrait"
   report. Rather than re-litigate which order is "right," apply the SAME already-decided order
   universally so every breakpoint agrees — single owner, no second (incidental) ordering. */
#header-actions-group #header-smart-score-btn { order: 1; }
#header-actions-group #notif-bell-btn         { order: 2; }
#header-actions-group #header-filter-btn      { order: 3; }
#header-actions-group #header-admin-btn       { order: 4; }
#header-actions-group #header-lang-badge      { order: 5; }

/* [FIX-HDRORDER-SYNC-02 / item 1, 2026-07-23] Same "single owner" fix, one layer up. The outer
   .header-right icon order (Map → Calendar → action-group → Theme → More → Avatar) was ONLY ever
   declared inside `@media (max-width: 640px)` below — desktop/tablet had NO order rule for these
   icons at all, so #apk-header-theme-btn (which had no `order` anywhere, mobile or desktop)
   defaulted to flex `order:0` and rendered FIRST, ahead of Map — confirmed via screenshot as the
   "theme toggle shifted left" report. Declaring order here, unconditionally (no media query), is
   now the ONE place this order is decided, so every breakpoint renders identically. The mobile-only
   block below keeps its display/sizing rules but no longer sets `order` — two conflicting `order`
   declarations for the same id is exactly the single-owner violation CLAUDE.md §0 warns about. */
#header-mindmap-btn   { order: 1; }
#header-calendar-btn  { order: 2; }
#header-actions-group { order: 3; }
#apk-header-theme-btn { order: 4; }
#header-more-btn      { order: 5; }
#apk-user-avatar      { order: 999; }

/* FIX-2 r37: Header icon layout on mobile (display/sizing only — order is owned by
   FIX-HDRORDER-SYNC-02 above, applies at every breakpoint). */
@media (max-width: 640px) {
  .header-right {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    min-width: 0;
  }
  #header-mindmap-btn   { display: flex !important; flex-shrink: 0 !important; }
  #header-calendar-btn  { display: flex !important; flex-shrink: 0 !important; }
  #header-actions-group { display: flex !important; min-width: 0; flex-shrink: 1; overflow: hidden; }
  #apk-user-avatar      { flex-shrink: 0 !important; }
  /* Force consistent icon sizing — prevents font-load layout shift */
  .hdr-icon-btn { min-width: 32px !important; }
  /* Smaller gap if 5+ icons present (rare) */
  .header-right:has(#header-actions-group > :nth-child(3)) { gap: 2px !important; }
}

/* FIX-3 r37: Insights view — bottom padding so content clears bottom-nav
   The earlier #view-insights { padding: 12px 0 0 !important } stripped
   the global rule. Restore bottom padding here. */
@media (max-width: 640px) {
  #view-insights {
    padding-bottom: calc(56px + 80px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Same rule for any insights-like view that may also be affected */
  #view-bills,
  #view-grocery,
  #view-staff,
  #view-family,
  #view-notes,
  #view-chores,
  #view-reminders {
    padding-bottom: calc(56px + 80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* General: ensure no view's content hides under bottom-nav + command bar */
body.show-bn .view-panel.active,
body.show-bn [id^="view-"].active {
  padding-bottom: calc(56px + 80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ────────────────────────────────────────────────────────────────────
   R39: Header icon visibility — final fix
   Make map button visible BEFORE its font glyph loads (so first paint
   shows something), and prevent header overflow from clipping it.
   ──────────────────────────────────────────────────────────────────── */

/* Map button: NEVER hide on any screen. Fallback to emoji if font slow. */
#header-mindmap-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  min-width: 32px !important;
  position: relative;
}

/* Material Symbols font hasn't loaded yet → show emoji fallback */
.material-symbols-outlined:not(:has(*)):empty::before {
  /* No-op for valid setups */
}

/* Mobile: bulletproof header layout — max 4 icons + avatar */
@media (max-width: 640px) {
  .header,
  #app-header,
  .app-header {
    overflow: hidden;
    flex-wrap: nowrap !important;
  }
  .header-left {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }
  .header-right {
    flex-shrink: 0;
    overflow: visible;
    max-width: 60% !important;  /* leave room for logo + name */
  }
  /* On very narrow screens (< 380px), hide language badge + filter */
  @media (max-width: 380px) {
    #header-lang-badge,
    #header-filter-btn { display: none !important; }
  }
  /* Map button spacing (order is owned by FIX-HDRORDER-SYNC-02, order:1 — not redeclared here) */
  #header-mindmap-btn {
    margin-right: 2px;
  }
  /* Hide brand tagline + name on small phones if header would overflow */
  @media (max-width: 360px) {
    .logo-tagline, .header-tagline, .brand-tagline { display: none !important; }
  }
}
/* ────────────────────────────────────────────────────────────────────
   R40: Theme consistency + reusable components
   - Unified APK spinner (always blue, brand color)
   - .apk-hdr-icon-btn — primary variant for Add (blue bg like chores)
   - Smooth bottom nav scroll behavior
   ──────────────────────────────────────────────────────────────────── */

/* Unified ApunkAI spinner — force brand-blue regardless of theme.
   Drop-in: <span class="apk-spinner"></span> or <span class="apk-spinner apk-spinner-lg"></span> */
.apk-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(37, 99, 235, 0.2);
  border-top-color: #2563eb;   /* hard-coded brand-blue — no theme override */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
  vertical-align: middle;
}
.apk-spinner-lg { width: 22px; height: 22px; border-width: 2.5px; }
.apk-spinner-xl { width: 32px; height: 32px; border-width: 3px; }

/* Make existing .spinner-small also force blue (was using var which can drift) */
.spinner-small {
  border-color: rgba(37, 99, 235, 0.2) !important;
  border-top-color: #2563eb !important;
}

/* [FIX-4 r40] Add Note button — blue background variant (matches chores Add) */
.apk-hdr-icon-btn.apk-hdr-icon-btn-primary {
  background: rgba(37, 99, 235, 0.12) !important;
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}
.apk-hdr-icon-btn.apk-hdr-icon-btn-primary:hover {
  background: rgba(37, 99, 235, 0.22) !important;
  border-color: #2563eb !important;
}

/* [FIX-6 r40] Bottom nav default-visible + smooth scroll behavior.
   The JS handler toggles transform/opacity; CSS provides the transition. */
@media (max-width: 640px) {
  #bottom-nav {
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s !important;
    will-change: transform;
  }
  /* Ensure visible by default (override stale browser cache state) */
  body.authenticated #bottom-nav {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ────────────────────────────────────────────────────────────────────
   R43: Mobile portrait header redesign
   - "Smart Home Manager" tagline goes under logo (vertical, not horizontal)
   - Group score/bell/filter under a single "More" icon on narrow screens
   ──────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Logo + tagline: stack vertically (was horizontal sibling) */
  .header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
  }
  /* Brand name + tagline column */
  .header-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
    overflow: hidden;
  }
  .header-brand-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-brand-tagline {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: .3px;
    text-transform: uppercase;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* On very narrow screens, hide tagline */
  @media (max-width: 360px) {
    .header-brand-tagline { display: none; }
  }
  /* [r47/r55] Mobile portrait: Map + Calendar + More visible. Everything else under More.
     [FIX-r55] #header-calendar-btn removed from hide list — in JS KEEP set, must stay visible. */
  .header-right > #header-smart-score-btn,
  .header-right > #notif-bell-btn,
  .header-right > #header-filter-btn,
  .header-right > #header-admin-btn,
  .header-right > #header-lang-badge {
    display: none !important;
  }
  /* [FIX-HDRORDER-SYNC-02] Blanket hide everything not in KEEP — matches _applyMobileChrome's
     KEEP set exactly (app-agentic-os.js). #header-theme-btn (no leading apk-) never existed —
     _ensureThemeButton() is a documented no-op; the real, live id is #apk-header-theme-btn,
     added to the exclusion list below so this CSS fallback doesn't hide the theme toggle if the
     JS keep-set is ever slow to run — it was previously only kept visible by JS inline style. */
  .header-right > *:not(#header-mindmap-btn):not(#header-calendar-btn):not(#apk-header-theme-btn):not(#header-more-btn):not(#apk-user-avatar):not(#home-switch-btn):not(#brand-logo-container) {
    display: none !important;
  }
  /* Force-show KEEP items (belt-and-suspenders against the blanket rule above) */
  .header-right > #header-mindmap-btn   { display: inline-flex !important; }
  .header-right > #header-calendar-btn  { display: inline-flex !important; flex-shrink: 0; }
  #apk-header-theme-btn                  { display: inline-flex !important; }
  #header-more-btn {
    display: inline-flex !important;
    flex-shrink: 0;
  }
}

/* ── More popup: position:fixed on ALL breakpoints ───────────────────────────
   [FIX-r55] Was inside @media (max-width:640px) only — on desktop had no position
   rule → static → rendered at bottom of page body. Now always fixed to header.  */
#header-more-popup {
  position: fixed;
  top: 56px;
  right: 8px;
  z-index: 1100;
  background: var(--bg-primary, #0f172a);
  border: 1px solid var(--border, #1e293b);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  min-width: 200px;
  display: none;
}
#header-more-popup.open { display: block; }
#header-more-popup .more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
#header-more-popup .more-item:hover,
#header-more-popup .more-item:active { background: var(--bg-secondary, #1e293b); }
#header-more-popup .more-item .material-symbols-outlined { font-size: 18px; color: var(--text-secondary); }

/* [FIX-HDRORDER-SYNC-02] Removed: `@media(min-width:641px){ #header-theme-btn{display:none} }`.
   #header-theme-btn (no leading apk-) is never created — _ensureThemeButton() in
   app-agentic-os.js is a documented no-op (a second injected theme button caused duplicate
   sun/moon icons, per that file's own comment). The rule matched nothing; dead code removed
   rather than left to confuse the next read of this file (CLAUDE.md §10 cleanup convention). */

/* ────────────────────────────────────────────────────────────────────
   R47: Omnibar context strip hidden visually (kept in DOM for JS state).
   The bot still receives page context via ApkContextEngine.getContext()
   on every send. The strip itself was visual clutter — gone.
   Plus: command bar uses full width edge-to-edge on mobile.
   ──────────────────────────────────────────────────────────────────── */
#apk-omnibar-ctx {
  display: none !important;
}

@media (max-width: 640px) {
  /* Command bar full-width edge-to-edge on mobile portrait */
  #command-bar.command-bar,
  .command-bar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #command-bar .command-input-group,
  .command-bar .command-input-group {
    width: 100% !important;
    max-width: 100% !important;
  }
  #command-input.command-input {
    flex: 1 !important;
    min-width: 0 !important;
  }
}

/* [FIX #6/#7] Centered mini-modal entrance (ApkMiniModal now matches .modal, not a bottom sheet) */
/* [FIX-HDRORDER-SYNC-02] Removed a second, near-duplicate "blanket hide + KEEP" rule that used
   to live here (same selector as the one above §r47/r55, minus the #apk-header-theme-btn/
   #home-switch-btn/#brand-logo-container exceptions) — two independent owners of the same
   fallback behavior that had already drifted out of sync with each other (CLAUDE.md §0). The
   one complete version above (in the r47/r55 block) is now the single owner; nothing here
   duplicates it. */

/* [FIX spinner] Bounded view-load spinner overlay (blue). pointer-events:none so it never
   blocks interaction; sits below the header. JS shows it on navigation and auto-hides it. */
.apk-view-spinner {
  position: fixed; inset: var(--hdr-h, 56px) 0 0 0;
  display: none; align-items: center; justify-content: center;
  z-index: 250; pointer-events: none;
  background: rgba(0,0,0,0.04);
}
.apk-view-spinner .spinner {
  width: 38px; height: 38px;
  border: 4px solid rgba(37,99,235,0.2);
  border-top-color: var(--primary, #2563eb);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes apkPopIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* ═══════════════ r97: light-theme readability pass ═══════════════
   Darker muted text + guaranteed-contrast chat/topbar/snapshot text so nothing
   washes out on the light background. Scoped to [data-theme="light"] only. */
[data-theme="light"] {
  --text-secondary: #334155;   /* was #475569 — darker for body/secondary text */
  --text-tertiary:  #475569;   /* was #64748b — muted labels still readable */
  /* [FIX-BRANDTEXT-01] Light-mode member of the navy family. On a light background pure navy
     (#16213e) IS readable, but #1d4ed8 (blue-700) is the value this app's wordmark already used in
     light theme, so the token keeps existing rendering identical rather than restyling the brand
     as a side effect of centralising it. If the founder wants true #16213e navy on light
     backgrounds, this one line is the only edit needed. */
  --brand-text:     #1d4ed8;
  /* [FIX-LIGHTTHEME-01, r253] Darker members of the same semantic hues, for the same reason as
     --text-secondary/--text-tertiary above: the base tokens (:root, ~line 48) were tuned for
     contrast against the dark navy card and wash out at ~2-2.5:1 on this light background.
     Everything that reads these tokens (.status-badge.*, .type-badge.*, Inventory Tracker's
     STATE_COLOR) gets legible text for free, no per-callsite change needed. */
  --success: #047857;
  --warning: #b45309;
  --error:   #b91c1c;
  --info:    #1d4ed8;
  --danger:  #991b1b;
}
[data-theme="light"] .apk-home-topbar,
[data-theme="light"] .conversation-date,
[data-theme="light"] .chat-date-divider { color: #0f172a; }
[data-theme="light"] .apk-home-topbar .material-symbols-outlined,
[data-theme="light"] .apk-topbar-icon { color: #334155; }
[data-theme="light"] .message.bot .message-bubble,
[data-theme="light"] .bot-card,
[data-theme="light"] .bot .message-content {
  color: #0f172a !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* [FIX-BOTBUBBLELIGHT-01, this session] Same bug, two more surfaces: these both hardcode the
   identical dark glass rgba(30,41,59,.85) background (app-agentic-os.css) with no light-theme
   override anywhere, so the bot's clarify/quick-action chat cards rendered as dark cards sitting
   inside an otherwise light UI. */
[data-theme="light"] .apk-clarify-card,
[data-theme="light"] .apk-quick-action-card,
[data-theme="light"] .apk-clarify-card .apk-clarify-body {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
[data-theme="light"] .message.bot .message-bubble * { color: inherit; }
[data-theme="light"] .snapshot-card, [data-theme="light"] .home-snapshot { color: #0f172a; }
/* Inputs/placeholder contrast on white */
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #94a3b8; }
[data-theme="light"] #command-input, [data-theme="light"] .command-input { color: #0f172a; }

/* [r101] Segmented "smart toggle" — Claude-style, ApunkAI colors. Used for Settings → Appearance. */
.apk-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg-tertiary, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
}
.apk-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 0;
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.apk-seg-btn .material-symbols-outlined { font-size: 18px; line-height: 1; }
.apk-seg-btn:hover { color: var(--text-primary, #e2e8f0); }
.apk-seg-btn.is-active {
  background: var(--primary, #6366f1);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.apk-seg-btn:focus-visible { outline: 2px solid var(--primary, #6366f1); outline-offset: 2px; }
@media (max-width: 480px) {
  .apk-seg-btn { padding: 8px 12px; }
  .apk-seg-btn .apk-seg-lbl { display: none; } /* icon-only on small screens */
}

/* [r128, superseded by FIX-MODALCENTERMOBILE-01, Round BH, 2026-08-30] Was bottom-sheet on
   mobile, centered on desktop -- now centered on every viewport, matching the same reversal
   applied to this class's other definition in app-agentic-os.css (both files style
   .apk-attach-sheet; kept in sync here rather than deduped, to stay a minimal, scoped change).
   3 contextual rows: Camera / Files / Gallery. Rows use .apk-attach-row class. */
.apk-attach-sheet {
  position: fixed; inset: 0; z-index: 14000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .22s; pointer-events: none;
}
.apk-attach-sheet.open { opacity: 1; pointer-events: auto; }
.apk-attach-card { border-radius: 20px !important; }
.apk-attach-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.apk-attach-card {
  position: relative; z-index: 1;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 20px 20px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  width: 100%; max-width: 440px;
  box-shadow: 0 -8px 40px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  animation: apkSlideUp .22s ease;
}
.apk-attach-grip { width: 36px; height: 4px; background: var(--border, #334155); border-radius: 2px; margin: 0 auto 16px; }
.apk-attach-title { font-size: 15px; font-weight: 700; color: var(--text-primary, #e2e8f0); margin-bottom: 4px; }
.apk-attach-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 8px; border-radius: 12px;
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; text-align: left; -webkit-tap-highlight-color: transparent;
}
.apk-attach-row:hover, .apk-attach-row:active { background: var(--bg-tertiary, rgba(255,255,255,.05)); }
.apk-attach-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.apk-attach-body { flex: 1; }
.apk-attach-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.apk-attach-cancel {
  background: transparent; border: 0; color: var(--text-secondary, #94a3b8);
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 10px 8px 4px; text-align: center; width: 100%;
}
.apk-attach-cancel:hover { color: var(--text-primary, #e2e8f0); }

/* ═══════════════════════════════════════════════════════════════════════════
 * OUTCOME BAR — [FIX-OUTCOME-01, 2026-08-11]
 * Replaces stat-tile rows that restate the list beneath them. The Staff view showed
 * "1 Active / 0 Pending Tasks / ₹14,000 Monthly Payroll" directly above a single card
 * repeating all three facts — three tiles, zero new information, ~1/3 of the viewport.
 * Doctrine: a number earns screen space only if it changes behaviour, and a view answers
 * "what needs me now?" before "what exists here?" (≤1 primary action per screen).
 * Token-driven only — no hardcoded palette (INSTRUCTIONS.md §6, theme consistency).
 * ═════════════════════════════════════════════════════════════════════════ */
.apk-outcome-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin: 0 0 16px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 14px;
}
.apk-outcome-bar.is-calm { border-color: var(--border); }
.apk-outcome-bar.needs-action { border-color: var(--primary); }
.apk-outcome-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.apk-outcome-icon .material-symbols-outlined { font-size: 22px; color: var(--text-secondary); }
.apk-outcome-bar.needs-action .apk-outcome-icon .material-symbols-outlined { color: var(--primary); }
.apk-outcome-text { flex: 1; min-width: 0; }
.apk-outcome-headline {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  line-height: 1.35; overflow-wrap: anywhere;
}
.apk-outcome-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.apk-outcome-action {
  flex-shrink: 0; padding: 7px 14px; border-radius: 9px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  background: var(--primary); color: #fff; border: none;
}
.apk-outcome-action:hover { filter: brightness(1.08); }
@media (max-width: 640px) {
  .apk-outcome-bar { flex-wrap: wrap; padding: 12px 14px; }
  .apk-outcome-action { width: 100%; margin-top: 4px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * GROUP BILLING — [FEATURE-LEDGERUI-01]  add-expense form, split editor,
 * currency settings, expense list. Token-driven only (INSTRUCTIONS.md §6).
 * ═════════════════════════════════════════════════════════════════════════ */
.apk-led-section { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--bg-secondary); }
.apk-led-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.apk-led-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: .3px; }
.apk-led-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.apk-led-grid.full { grid-template-columns: 1fr; }
.apk-led-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.apk-led-field label { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.apk-led-field input, .apk-led-field select {
  width: 100%; box-sizing: border-box; padding: 9px 10px; font-family: inherit; font-size: 13px;
  color: var(--text-primary); background: var(--bg-tertiary);
  border: 1px solid var(--border); border-radius: 9px;
}
.apk-led-field input:focus, .apk-led-field select:focus { outline: none; border-color: var(--primary); }
.apk-led-split { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.apk-led-chip {
  padding: 6px 11px; border-radius: 999px; cursor: pointer; font-size: 12px; font-family: inherit;
  background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary);
}
.apk-led-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.apk-led-shares { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.apk-led-share-row { display: flex; align-items: center; gap: 8px; }
.apk-led-share-row span { flex: 1; font-size: 12.5px; color: var(--text-primary); }
.apk-led-share-row input { width: 110px; flex-shrink: 0; }
.apk-led-sum { font-size: 11.5px; margin-top: 4px; color: var(--text-secondary); }
.apk-led-sum.bad { color: #f59e0b; font-weight: 600; }
.apk-led-err { font-size: 12px; color: #f59e0b; margin-top: 6px; min-height: 15px; }
.apk-led-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.apk-led-exp-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.apk-led-exp-row:last-child { border-bottom: none; }
.apk-led-exp-main { flex: 1; min-width: 0; }
.apk-led-exp-desc { font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.apk-led-exp-meta { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.apk-led-exp-amt { font-size: 13px; font-weight: 700; color: var(--text-primary); flex-shrink: 0; }
.apk-led-exp-del { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 2px; flex-shrink: 0; }
.apk-led-exp-del .material-symbols-outlined { font-size: 17px; }
/* [FIX-LEDGERDEL-01] Was the only delete control in the app rendered in the neutral secondary
   color instead of red — chores/reminders/notes all use .btn-danger { color: var(--error) } for
   theirs. Composed as a second class on the button (app.js) rather than duplicated here, so
   "destructive = red" stays defined in exactly one place. */
.apk-led-exp-del.btn-danger:hover { background: rgba(239,68,68,.1); border-radius: 6px; }
/* [FEATURE-LEDGEREDIT-01, r157] The edit affordance beside it. Same metrics as the delete
   button so the two read as one control pair rather than two differently-sized buttons, and
   neutral rather than red — correcting a row is not a destructive act, and colouring it as one
   would make people hesitate over the safe half of the pair. */
.apk-led-exp-edit { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 2px; flex-shrink: 0; }
.apk-led-exp-edit .material-symbols-outlined { font-size: 17px; }
.apk-led-exp-edit:hover { background: rgba(148,163,184,.12); border-radius: 6px; }
.apk-led-rate-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.apk-led-rate-row input.code { width: 78px; text-transform: uppercase; }
.apk-led-rate-row input.val  { width: 120px; }
.apk-led-rate-row span { font-size: 12px; color: var(--text-secondary); }
@media (max-width: 640px) {
  .apk-led-grid { grid-template-columns: 1fr; }
  .apk-led-rate-row { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * BILL BOOK APPROVAL — [FEATURE-LEDGERAPPROVAL-01]
 * One strip that adapts per persona, rather than separate pilot/member screens.
 * ═════════════════════════════════════════════════════════════════════════ */
.apk-led-status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-secondary);
}
.apk-led-status.draft     { border-color: var(--border); }
.apk-led-status.pending   { border-color: #f59e0b; background: rgba(245,158,11,.07); }
.apk-led-status.confirmed { border-color: #10b981; background: rgba(16,185,129,.07); }
.apk-led-status-icon .material-symbols-outlined { font-size: 20px; }
.apk-led-status.draft     .apk-led-status-icon .material-symbols-outlined { color: var(--text-secondary); }
.apk-led-status.pending   .apk-led-status-icon .material-symbols-outlined { color: #f59e0b; }
.apk-led-status.confirmed .apk-led-status-icon .material-symbols-outlined { color: #10b981; }
.apk-led-status-text { flex: 1; min-width: 160px; }
.apk-led-status-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.apk-led-status-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.apk-led-status-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.apk-led-approvals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.apk-led-appr {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary);
}
.apk-led-appr .material-symbols-outlined { font-size: 13px; }
.apk-led-appr.ok      { color: #10b981; border-color: rgba(16,185,129,.4); }
.apk-led-appr.changes { color: #f59e0b; border-color: rgba(245,158,11,.4); }
.apk-led-note {
  font-size: 12px; color: var(--text-primary); padding: 9px 11px; margin-top: 8px;
  border-radius: 9px; background: var(--bg-tertiary); border-left: 3px solid #f59e0b;
}
.apk-led-note b { color: #f59e0b; }
@media (max-width: 640px) {
  .apk-led-status-actions { width: 100%; }
  .apk-led-status-actions .btn-primary,
  .apk-led-status-actions .btn-secondary { flex: 1; }
}

/* ═══ INFO ICON — [FEATURE-INFOICON-01] ═══════════════════════════════════ */
.apk-info-btn {
  background: none; border: none; padding: 0 0 0 4px; margin: 0; cursor: pointer;
  color: var(--text-secondary); vertical-align: -3px; line-height: 1;
}
.apk-info-btn:hover { color: var(--primary); }
.apk-info-btn .material-symbols-outlined { font-size: 15px; pointer-events: none; }
.apk-info-pop {
  position: fixed; z-index: 14600;      /* above the view-as banner (14500), below nothing else */
  padding: 11px 13px; border-radius: 11px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
  font-size: 12.5px; line-height: 1.55; color: var(--text-primary);
}

/* [FEATURE-LEDGERRESET-01] Undo row — quiet by default, never a primary action. */
.apk-led-danger {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border);
}
.apk-led-danger-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: .3px; }
.apk-led-danger-btn {
  padding: 6px 11px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12px;
  background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
}
.apk-led-danger-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.apk-led-danger-btn.del:hover { border-color: #ef4444; color: #ef4444; }

/* [FIX-LEDGERUX-01/02] Consistent action hierarchy + per-row menus. */
.apk-led-actionbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.apk-led-actionbar .btn-primary { flex: 0 0 auto; }
.apk-led-collapse {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 13px;
  border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 13px;
  background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-primary);
}
.apk-led-collapse:hover { border-color: var(--primary); }
.apk-led-collapse .material-symbols-outlined { font-size: 17px; color: var(--text-secondary); }
.apk-led-collapse-val { margin-left: auto; font-size: 12px; color: var(--text-secondary); font-weight: 700; }
.apk-led-collapse .chev { margin-left: 4px; }
/* ══ [FIX-KHAATATABS-01 / FEATURE-LEDGERPEOPLE-01 / FEATURE-BETATAG-01, r153] ══════════════
   Khaata tabs, the People tab, and the BETA badge. */

.apk-led-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.apk-led-tabs::-webkit-scrollbar { display: none; }
.apk-led-tab {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 9px 13px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary);
  /* The active marker is a bottom border on the button itself, so it sits exactly on the
     container's border line — a separate absolutely-positioned bar drifts when the row scrolls. */
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.apk-led-tab:hover  { color: var(--text-primary); }
.apk-led-tab.on     { color: var(--primary); border-bottom-color: var(--primary); }
.apk-led-tab .material-symbols-outlined { font-size: 18px; }
.apk-led-tab-n {
  font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 9px;
  background: var(--bg-tertiary); color: var(--text-secondary);
}
.apk-led-tab.on .apk-led-tab-n { background: var(--primary); color: #fff; }
/* Under ~420px the icons alone carry the tabs — four labels + counts wrap or clip otherwise. */
@media (max-width: 420px) {
  .apk-led-tab-lbl { display: none; }
  .apk-led-tab     { padding: 9px 14px; }
}
.apk-led-tabbody { min-height: 120px; }

.apk-led-bal-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.apk-led-bal-row:last-child { border-bottom: none; }
.apk-led-bal-name { font-size: 13px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apk-led-bal-val  { font-size: 13px; font-weight: 700; white-space: nowrap; }

.apk-led-xfer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px;
}
.apk-led-cat {
  font-size: 11px; padding: 4px 10px; border-radius: 20px;
  background: var(--bg-tertiary); border: 1px solid var(--border);
}
.apk-led-warn {
  padding: 10px 12px; border-radius: 10px; background: rgba(245,158,11,.12);
  border: 1px solid #f59e0b; font-size: 12px; color: #f59e0b; line-height: 1.5;
}
.apk-led-linkbtn {
  background: none; border: none; padding: 0 0 0 4px; cursor: pointer;
  font: inherit; font-weight: 700; color: inherit; text-decoration: underline;
}
.apk-led-empty-note { font-size: 13px; color: var(--text-secondary); margin: 4px 0; line-height: 1.55; }

.apk-led-map-row {
  padding: 12px 0; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.apk-led-map-row:last-of-type { border-bottom: none; }
.apk-led-map-from { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apk-led-map-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.apk-led-map-hint { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; }
/* "Keep this name" is the DO-NOTHING option and is the state you are already in, so it must
   never render as a filled recommendation — screenshot check caught it looking like the app's
   suggested answer, which is the opposite of true: mapping to a real person is usually right.
   It shows selection as an outline, not a fill. */
.apk-led-chip.ghost {
  border-style: dashed; opacity: .8; background: none;
}
.apk-led-chip.ghost.on {
  background: none; color: var(--text-secondary);
  border-color: var(--text-secondary); border-style: solid; opacity: 1;
}

.apk-beta-tag {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; line-height: 1;
  padding: 3px 5px; border-radius: 5px; cursor: help;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 42%, transparent);
}
.apk-beta-tag.sm { font-size: 11px; padding: 2px 4px; }
.apk-beta-note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 8px;
  padding: 9px 11px; border-radius: 10px; font-size: 12px; line-height: 1.5;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
}
.apk-beta-note .material-symbols-outlined { font-size: 16px; color: var(--primary); flex-shrink: 0; }

/* [FIX-LEDGERUX-03, r153] Khaata list = responsive grid, not a stack of full-width bars.
   auto-fill + minmax means the track COUNT follows the viewport with no breakpoint list:
   one column under ~560px, two/three/four as the container grows. max-width caps the card
   so a single khaata on a 27" monitor is still a card and not a banner. */
.apk-led-book-grid {
  /* Cap at ~3 columns. Verified by screenshot at 390 / 900 / 1600px: without the cap a 1600px
     content area produced FIVE columns, which reads as a tile wall rather than a list of the
     household's expense books. */
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.apk-led-book-card {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 8px 13px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-tertiary); cursor: pointer;
  max-width: 460px; width: 100%;
  transition: border-color .14s ease, background .14s ease;
}
.apk-led-book-card:hover  { border-color: var(--primary); background: var(--bg-secondary); }
.apk-led-book-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* min-width:0 is load-bearing: without it a long khaata name refuses to shrink and pushes
   the kebab off the card instead of ellipsising. */
.apk-led-book-main  { min-width: 0; flex: 1 1 auto; }
.apk-led-book-title {
  font-weight: 700; font-size: 14px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apk-led-book-sub   { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

.apk-led-row-more {
  background: none; border: none; cursor: pointer; color: var(--text-secondary);
  padding: 4px; flex-shrink: 0; border-radius: 8px;
  margin-left: auto;   /* extreme right of the card — the platform position for row overflow */
}
.apk-led-row-more:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.apk-led-row-more .material-symbols-outlined { font-size: 19px; pointer-events: none; }
.apk-led-rowmenu {
  position: fixed; z-index: 14000; display: flex; flex-direction: column;
  min-width: 210px; padding: 5px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,.5);
  animation: apkMoreFadeIn .12s ease;
}
/* Icon + label rows, sized to a real pointer/touch target (≥40px) — the first version was a
   bare text list with no icons and a 32px hit area, which reads as unfinished on desktop and
   is genuinely hard to hit on mobile. */
.apk-led-rowmenu button {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; min-height: 40px; width: 100%;
  text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--text-primary); border-radius: 8px;
}
.apk-led-rowmenu button .material-symbols-outlined { font-size: 18px; color: var(--text-secondary); }
.apk-led-rowmenu button:hover { background: var(--bg-tertiary); }
.apk-led-rowmenu .sep { height: 1px; background: var(--border); margin: 5px 4px; }
.apk-led-rowmenu button.del { color: #ef4444; }
.apk-led-rowmenu button.del .material-symbols-outlined { color: #ef4444; }
.apk-led-rowmenu button.del:hover { background: rgba(239,68,68,.1); }
@media (max-width: 640px) { .apk-led-actionbar .btn-primary, .apk-led-actionbar .btn-secondary { flex: 1; } }

/* [FIX-MOREDESK-03] Centred-dialog entry animation. Must NOT touch `transform` — the desktop More
   dialog centres itself with translate(-50%,-50%), and the older slideUp keyframe overwrote that
   on its final frame, pulling the dialog off-centre after it settled. Opacity only. */
@keyframes apkMoreFadeIn { from { opacity: 0 } to { opacity: 1 } }

/* ═══════════════════════════════════════════════════════════════════════════
 * ACTION HIERARCHY — [FEATURE-ACTIONPATTERN-01]
 * The visual half of the rules in apk-actions.js / CLAUDE.md §5. One place, so
 * "what a primary button looks like" stops being re-decided per view.
 * ═════════════════════════════════════════════════════════════════════════ */
.apk-actionrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apk-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px; min-height: 40px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; border: 1px solid transparent;
}
.apk-act .material-symbols-outlined { font-size: 17px; pointer-events: none; }
.apk-act-primary   { background: var(--primary); color: #fff; }
.apk-act-primary:hover { filter: brightness(1.08); }
.apk-act-secondary { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border); }
.apk-act-secondary:hover { border-color: var(--primary); }
/* [r153] One disabled treatment for every action, so "not yet" looks the same everywhere.
   filter:none beats the :hover brightness rule above, which would otherwise still fire. */
.apk-act[disabled] {
  opacity: .45; cursor: not-allowed; filter: none !important; pointer-events: none;
}
.apk-act-quiet {
  background: transparent; color: var(--text-secondary); border-color: var(--border);
  font-weight: 500; font-size: 12.5px; padding: 7px 12px; min-height: 34px;
}
.apk-act-quiet:hover { color: var(--text-primary); border-color: var(--text-secondary); }
/* [FIX-DESTRUCTIVERED-01, r156] Destructive was red ONLY on :hover. There is no hover on a
   phone, so on the device every pilot actually uses, Delete rendered identically to a safe
   action right up until the tap. Red has to be legible BEFORE the tap or it is decoration. */
.apk-act-quiet.is-destructive { color: #ef4444; border-color: rgba(239,68,68,.35); }
.apk-act-quiet.is-destructive .material-symbols-outlined { color: #ef4444; }
.apk-act-quiet.is-destructive:hover { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,.08); }
/* Rule 3 — destructive lives here, at the bottom, never beside a primary. */
.apk-dangerrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border);
}
.apk-dangerrow-label {
  font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: 5px;
}
/* [r154] danger()'s label can now carry an icon (apk-actions.js) — sized up from the 11px label
   text so it reads at a glance, not shrunk to match the caption-sized letter-spacing around it. */
.apk-dangerrow-label .material-symbols-outlined { font-size: 15px; }
.apk-actionmenu {
  position: fixed; z-index: 14000; display: flex; flex-direction: column;
  min-width: 210px; padding: 5px; animation: apkMoreFadeIn .12s ease;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,.5);
}
.apk-actionmenu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; min-height: 40px; border-radius: 8px;
  text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--text-primary);
}
.apk-actionmenu button .material-symbols-outlined { font-size: 18px; color: var(--text-secondary); }
.apk-actionmenu button:hover { background: var(--bg-tertiary); }
.apk-actionmenu .sep { height: 1px; background: var(--border); margin: 5px 4px; }
.apk-actionmenu button.is-destructive { color: #ef4444; }
.apk-actionmenu button.is-destructive .material-symbols-outlined { color: #ef4444; }
.apk-actionmenu button.is-destructive:hover { background: rgba(239,68,68,.1); }
/* [FIX-MAPFILTERPILL-01, r246] Apunki Map scope filter — the trigger container the grouped
   filter pill (_buildGroupedFilterPill) mounts into. The native <select> inside is hidden by that
   component (.is-hidden) and kept only as the value store, so this styles the visible chip: it
   has to read as a control in the map's own dark topbar, which is precisely what a browser-drawn
   native menu could never be made to do. */
.apk-mm-scope-pill {
  position: relative; flex-shrink: 0; display: inline-flex; align-items: center;
  max-width: 190px; min-height: 36px; padding: 0 10px; border-radius: 8px;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 12px; font-weight: 600;
}
.apk-mm-scope-pill:hover { border-color: var(--primary); }
.apk-mm-scope-pill > button { max-width: 100%; overflow: hidden; }
.apk-mm-scope-pill > button > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* [FIX-SHAREMODAL-01, r246] Share sheet — the last hand-rolled dialog in the Home flow.
   Every rule the old implementation needed lived in a JS string (CLAUDE.md section 9 bans that
   outside the two documented exceptions); it now composes from .apk-actionrow/.apk-act above and
   only declares what is genuinely share-specific. It inherits the mobile stack-and-promote rule
   in the @media block below for free, which is half the reason it is built on that owner. */
.apk-share-preview {
  background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 14px; font-size: 13px; line-height: 1.5;
  color: var(--text-secondary);
}
.apk-share-preview strong { display: block; color: var(--text-primary); margin-bottom: 2px; }
/* WhatsApp keeps its own brand green rather than var(--primary): on this one action the colour
   IS the affordance -- people recognise where the message is going before reading the label. */
.apk-share-wa { background: #25D366; color: #fff; }
.apk-share-wa:hover { filter: brightness(1.06); }
/* Ordering is a different job from sharing, so it gets its own quiet row under a divider rather
   than a fourth filled button competing with the primary (section 5, rule 1). */
.apk-share-order {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
}
.apk-share-order-label {
  font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: .3px;
}
.apk-share-order a.apk-act { text-decoration: none; }

/* Rule 2 — on mobile the primary goes full-width first. */
@media (max-width: 640px) {
  .apk-actionrow { flex-direction: column; align-items: stretch; }
  .apk-actionrow .apk-act { width: 100%; }
  .apk-actionrow .apk-act-primary { order: -1; }
}

/* [FIX-KHAATAHEADER-01] Khaata header — title left, primary actions right, matching the
   .view-header pattern used by Staff/Chores/Members. Wraps to two rows on narrow screens so the
   primary never gets squeezed into an unreadable width. */
.apk-khaata-header { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.apk-khaata-header .view-header-right { margin-left: auto; }
@media (max-width: 640px) {
  .apk-khaata-header .view-header-right { width: 100%; margin-left: 0; }
}

/* [FIX-FBINLINE-01, r167] The same feedback form, hosted inside a Settings section instead of
   a floating panel. Deliberately carries NO z-index: it is a child of .apk-sett-sub, which owns
   its own stacking — a second opinion here is exactly how the duplicate-declaration bug in
   .apk-fb-panel started. */
.apk-fb-inline { padding: 2px 0 24px; }
.apk-fb-inline .apk-fb-textarea { min-height: 96px; }

/* [FIX-FBCOMPACT-01, r171] The feedback form inside Settings is a CARD, not a page.
   Founder: "does not need full page ... looks too big and bad for ui." The section it sits in is
   full-screen (that is what a Settings sub-surface is); this constrains the content to the size
   the content actually is, centred, so the surface stops looking like an unfinished page.
   No z-index here on purpose — .apk-sett-sub owns the stacking (see the .apk-fb-panel note). */
.apk-fb-card {
  max-width: 520px;
  margin: 8px auto 0;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 14px;
  padding: 16px;
}
.apk-fb-card .apk-fb-types { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) {
  .apk-fb-card { border: none; background: transparent; padding: 4px 0; }
}

/* [FIX-IMPORTHEADER-01, r175] The quiet sibling of .apk-fab-add — Import, beside Add, in the
   khaata header. Founder: "simple attach icon for import positioned next to add icon in header."

   Same size and shape so the pair reads as one control group, but outlined rather than filled:
   there must still be exactly ONE primary on the screen (apk-actions.js rule 1), and adding an
   expense is it. Import is the other way in, not a competing call to action.

   .view-header-right already lays its children out in a row with a gap, so no layout rule is
   needed here — which is the point: a second filled button would have needed one. */
.apk-fab-add.apk-fab-quiet {
  background: transparent;
  border: 1.5px solid var(--border-strong, #475569);
  color: var(--text-secondary, #94a3b8);
  box-shadow: none;
}
.apk-fab-add.apk-fab-quiet:hover,
.apk-fab-add.apk-fab-quiet:active {
  border-color: var(--primary, #6366f1);
  color: var(--primary, #6366f1);
  box-shadow: none;
  transform: scale(1.08);
}

/* [FIX-TABBARMOBILE-01, r247, founder: "team manager's tabs are too cluttered on mobile --
   design smarter, mobile-responsive ui with clear separation."] Structural layout for the
   shared _tabs() component (app-features-ops.js) -- was a giant inline style string with no
   media query, so it could never respond to viewport width. Also used by Grocery Cart's 3-tab
   bar; the overflow-fade below only activates when a bar's content genuinely overflows (JS
   toggles .apk-tabbar-overflow), so a bar that already fits (Grocery Cart) never shows it. */
.apk-tabbar-wrap {
  position: relative;
  flex-shrink: 0;
}
.apk-tabbar {
  display: flex;
  background: var(--bg-secondary, #1e293b);
  border-bottom: 1px solid var(--border, #334155);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.apk-tabbar::-webkit-scrollbar { display: none; }
.apk-tabbar-btn {
  flex: 1 0 auto;
  min-width: 64px;
  padding: 10px 10px;
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* [FIX-TABBARMOBILE-01] Tighter padding/min-width at phone width -- lets more of the 7 Team
   Manager tabs sit in the visible viewport before scroll is needed, without touching font-size
   small enough to hurt tap-target legibility (CLAUDE.md action-hierarchy still applies: this is
   navigation, not a dense data table). */
@media (max-width: 480px) {
  .apk-tabbar-btn {
    min-width: 52px;
    padding: 9px 6px;
    font-size: 11px;
    gap: 3px;
  }
}
/* Persistent "there's more" cue -- a static right-edge fade into the bar's own background,
   shown only while .apk-tabbar-overflow is set (see _tabs()'s scroll listener) and pointer-
   events:none so it never blocks a tap on the tab underneath it. */
.apk-tabbar-wrap.apk-tabbar-overflow::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 1px;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg-secondary, #1e293b) 85%);
}

/* [FIX-CONSENTLOGUI-01, r248, founder screenshot: "What you have agreed to" rows rendered with
   label/status/date jammed onto one line, no spacing at all.] Root cause: this class was
   referenced by src/dashboard/app-agentic-os.js's consent-log overlay (FIX-CONSENTLOGCLUTTER-01,
   r247) but never defined anywhere in this file or app-agentic-os.css -- a class with no CSS is
   not a layout bug, it is no layout at all. One owner, defined once, here. */
.apk-consent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border, #334155);
  font-size: 12.5px;
}
.apk-consent-row:last-child { border-bottom: none; }
.apk-consent-row > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-primary, #f1f5f9);
  font-weight: 600;
  overflow-wrap: break-word;
}
.apk-consent-given,
.apk-consent-declined {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.apk-consent-given { background: rgba(16,185,129,.15); color: #10b981; }
.apk-consent-declined { background: rgba(148,163,184,.18); color: var(--text-secondary, #94a3b8); }
.apk-consent-row > span:last-child {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-tertiary, #64748b);
  white-space: nowrap;
}