/* ============================================
   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; }

/* ── 2. THEME TOKENS ─────────────────────── */
:root {
  /* Brand */
  --primary:        #2563eb;
  --primary-hover:  #1d4ed8;
  --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;
  --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;
  --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:10px; color:var(--text-secondary); margin:0; font-weight:500; letter-spacing:0.2px; opacity:.8; }

/* 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 */
}
/* 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 */
  color: #60a5fa;                    /* blue-400: 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 {
  color: #1d4ed8;                    /* blue-700: strong on light bg */
  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:10px; 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:10px; 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);
    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));
  }
}
   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: 10px; 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-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;
}
.command-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;     /* HERO: takes all remaining width */
  min-width: 0;       /* allow the input to shrink/grow correctly */
}
.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); }

.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;
}
/* ══════════════════════════════════════
   SPINNERS + LOADING
   ══════════════════════════════════════ */
.page-spinner {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:12px;
  background:var(--surface-overlay); z-index:50; border-radius:var(--radius-lg);
}
.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: 10px;
  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
   ══════════════════════════════════════ */
.login-lock-modal .modal-content {
  max-width: 440px;
  /* ✅ FIX: Strong contrast — visible on both light and dark backdrops */
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 0 0 1px rgba(56,189,248,0.1), 0 24px 64px rgba(0,0,0,0.7);
}
.login-lock-modal .modal-header h3 {
  color: #f1f5f9;
}
.login-lock-modal .modal-body {
  background: #0f172a;
  color: #f1f5f9;
}
.login-lock-modal .form-control {
  background: #1e293b;
  border-color: rgba(56,189,248,0.2);
  color: #f1f5f9;
}
.login-lock-modal .form-control:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56,189,248,0.15);
  outline: none;
}
.login-lock-modal label {
  color: #94a3b8;
}


/* ══════════════════════════════════════
   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);
}

.tbl-thead-chores {
  grid-template-columns: minmax(0, 1.8fr) 120px 100px 90px 90px 110px;
}

.tbl-thead-reminders {
  grid-template-columns: minmax(0, 1.8fr) 120px 110px 80px 90px 110px;
}

.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;
  grid-template-columns: minmax(0, 1.8fr) 120px 110px 80px 90px 110px;
}

/* 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);
}

#chores-tbody .table-row {
  grid-template-columns: minmax(0, 1.8fr) 120px 110px 80px 90px 110px;
}

#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;
}

.cell-title-text {
  font-weight: 500;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cell: Assignee / Person */
.cell-assignee {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}

/* 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: 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;
}

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

/* 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
   ══════════════════════════════════════ */
.notes-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 4px;
}

.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;
}

.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;
  flex: 1;
}

.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;
}

.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;
}
#tour-overlay {
  position: fixed; inset: 0;
  z-index: 9991;
  pointer-events: none;
}
.tour-tooltip {
  position: fixed;
  z-index: 9999;
  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: 10px; 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: 9px; 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: 10px; 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: 10px;
  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: 10px; 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: 10px; 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: 9px;
  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: 10px;
  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: 10px; 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: 10px;
  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: 9px;
  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 ──────────────────────────────────────── */
:root {
  --hdr-h:  56px;
  --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: 10px;
  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: 10px; 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: 9px; 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: 10px;
  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: 10px;
  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: 10px;
  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 */
.tbl-thead-chores  { grid-template-columns: 36px minmax(0,1.8fr) 120px 100px 90px 90px 110px; }
#chores-tbody    .table-row   { grid-template-columns: 36px minmax(0,1.8fr) 120px 100px 90px 90px 110px; }

/* Reminder table: also add checkbox col */
#reminders-tbody .reminder-row { display: grid; gap: 8px; padding: 10px 12px;
  grid-template-columns: 36px minmax(0,1.6fr) 90px 100px 100px 80px 110px;
  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: 10px;
  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: 10px;
  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: 9px;
  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: 10px;
  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: 10px;
  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: 10px;
  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 */
#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: hidden;
}
#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);
}
#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;
}

/* Cart AI assist bar */
#apk-cart-ai-bar {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#apk-cart-ai-input {
  flex: 1;
  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-ai-input:focus { border-color: var(--primary); }
/* Cart AI send button — was "Chat", now "Ask AI" */
#apk-cart-ai-send {
  background: var(--primary);
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}

/* 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: 9px; }
}

/* ── 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:9px; }
  .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 */
  #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: 9px;
    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;
  }
  :root { --hdr-h: 44px; }

  /* 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; }
  .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: 9px; }

  /* 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. */
  .tbl-check-hdr { display: none; }
  .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: 10px;
    padding: 1px 6px;
  }
  #chores-tbody .table-row .status-badge,
  #reminders-tbody .table-row .status-badge {
    font-size: 10px;
    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%; }

  /* 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: 9px; }

  /* 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: 10px;
  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:10px;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:9px;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:10px;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:9px;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:8px}
  #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: 8px;
  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: 9px; 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: 10px; 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; }
}

/* ── 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 {
    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) {
  /* Hide desktop table headers */
  .tbl-thead-chores,
  #chores-thead,
  .tbl-thead-reminders { display: none; }

  /* Card layout */
  #chores-tbody .table-row,
  #reminders-tbody .table-row {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    gap: 5px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }
  #chores-tbody .table-row.overdue,
  #reminders-tbody .table-row.overdue {
    border-left: 3px solid var(--error, #ef4444);
  }

  #chores-tbody .table-row .tbl-cell,
  #reminders-tbody .table-row .tbl-cell {
    display: block;
    text-align: left;
    padding: 0;
    border: none;
    background: transparent;
  }
  /* Chores: hide category column (3rd), show title/assignee/due/status/actions */
  #chores-tbody .tbl-cell:nth-child(4) { display: none; }
  #chores-tbody .tbl-cell:nth-child(1) { font-weight: 700; font-size: 14px; color: var(--text-primary); padding-right: 70px; }
  #chores-tbody .col-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 1; }
  #chores-tbody .tbl-check-hdr, .tbl-check-hdr { display: none; }
  #chores-tbody .tbl-check-cell,
  #reminders-tbody .tbl-check-cell {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  /* Reminders: show title, due date, status badge */
  #reminders-tbody .tbl-cell:nth-child(3),
  #reminders-tbody .tbl-cell:nth-child(n+5) { display: none; }
  #reminders-tbody .tbl-cell:nth-child(1) { font-weight: 700; font-size: 14px; color: var(--text-primary); padding-right: 60px; }
  #reminders-tbody .tbl-cell:nth-child(2) { font-size: 12px; color: var(--text-secondary); }
  #reminders-tbody .tbl-cell:nth-child(4) { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

  /* Filter bars: horizontal chip scroll on mobile */
  #chores-filter-bar,
  #reminders-filter-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 12px 8px;
    margin: 0 -12px 10px;
    border-bottom: 1px solid var(--border);
  }
  #chores-filter-bar::-webkit-scrollbar,
  #reminders-filter-bar::-webkit-scrollbar { display: none; }
  #chores-filter-bar .tbl-filter-pill,
  #reminders-filter-bar .tbl-filter-pill {
    flex-shrink: 0;
    border-radius: 20px;
    padding: 0;
    min-height: 36px;
  }
  #chores-filter-bar .tbl-filter-pill label,
  #reminders-filter-bar .tbl-filter-pill label { display: none; }
  #chores-filter-bar .tbl-filter-pill select,
  #reminders-filter-bar .tbl-filter-pill select {
    min-width: 80px;
    max-width: 140px;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 28px 8px 12px;
    border: none;
    background: transparent;
    border-radius: 20px;
    -webkit-appearance: none;
    appearance: none;
    color: var(--text-primary);
    cursor: pointer;
  }
  #chores-per-page, #reminders-per-page { display: none; }

  /* 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: 9px; }
}

/* ── 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 */
#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;
  overflow: hidden;
}
#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));
}
.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); }

/* ── NOTES GRID ──────────────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 800px) {
  .notes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 801px) {
  .notes-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ── 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;
}
/* 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) */
  body.view-staff .view-panel.active,
  body.view-family .view-panel.active,
  body.view-insights .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: 10px !important;
  }
  /* Compress view tabs */
  .apk-cal-tab {
    padding: 4px 7px !important; font-size: 10px !important;
  }
  /* Compress filter FABs */
  #apk-cal-cat-fab,
  #apk-cal-range-fab {
    padding: 4px 8px !important; font-size: 10px !important;
    gap: 3px !important;
  }
  /* Compress Add button */
  #apk-cal-add-btn {
    padding: 4px 8px !important; font-size: 10px !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: 10px !important; }
  .apk-cal-tab { padding: 4px 6px !important; font-size: 10px !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; }
}

/* ── 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; }
/* 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.
   ══════════════════════════════════════════════════════════════════════════════ */
.apk-fb-panel {
  position: fixed;
  bottom: 84px;                    /* above command bar */
  right: 14px;
  left: auto;
  z-index: 1300;
  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: 10px;
  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 {
    bottom: 130px;   /* 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: 9px;
  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: 10px; color: var(--text-secondary); margin-top: 2px;
}
.apk-manager-agent-card .manager-status {
  display: flex; align-items: center; gap: 4px;
  font-size: 9px; 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: 9px; 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: 8px; 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: 10px; color: var(--text-secondary); margin-top: 1px;
}
.apk-agent-card-v2 .agent-id { display: none !important;
  font-size: 8.5px; 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: 9px; 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: 10.5px; 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: 9.5px; 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: 9.5px; 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: 8.5px; 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: 10px; 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;
}
@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; }
}
.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: 10px;
  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;
}
.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: 10px; color: var(--text-secondary); margin-top: 2px; }
.apk-planner-tile-chai-badge {
  position: absolute;
  top: 7px; right: 7px;
  font-size: 7px; 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: 10px; 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: 9px;
  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;
}

/* ── Custom confirm modal ─────────────────────────────────────────────────── */
#apk-confirm-modal {
  position: fixed; inset: 0; z-index: 15000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); padding: 16px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
#apk-confirm-modal.open { opacity: 1; pointer-events: auto; }
#apk-confirm-box {
  background: var(--bg-secondary); border-radius: 16px;
  padding: 24px 20px 16px; max-width: 340px; width: 100%;
  border: 1px solid var(--border); box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
#apk-confirm-box h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
#apk-confirm-box p { margin: 0 0 20px; font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.apk-confirm-btns { display: flex; gap: 10px; justify-content: flex-end; }
.apk-confirm-cancel { padding: 9px 18px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--text-secondary); font-size: 14px; cursor: pointer; font-family: inherit; }
.apk-confirm-ok { padding: 9px 18px; border-radius: 10px; border: none; background: #ef4444; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.apk-confirm-ok.primary { background: var(--primary); }

/* ── 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:     8px;
  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:  9px;
  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: 10px; 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 {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  height:         calc(60px + env(safe-area-inset-bottom, 0px));
}

/* ─── 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: 10px; 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: 10px !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:   10px !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:     10px;
  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:   9px;
  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:    8px;
  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: 10px;
  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: 8px;
  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: 10px;
  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: 9px !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: 10px !important; }
@media (max-width: 380px) {
  .apk-sc-btn      { padding: 7px 8px !important; min-width: 46px !important; }
  .apk-sc-label    { font-size: 9px !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: 10px;
    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: 10px;
  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: 10px;
  font-style: italic;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.signal-card .signal-confidence {
  font-size: 10px;
  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: 10px;
  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: 10px;
  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: 10px;
  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: 9px;
  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: 10px;
}

.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: 10px;
  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: 10px;
  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: 10px;
  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: 10px;
  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;
}

/* Reduce aggressive toast z-index — should never cover modals */
.toast-container,
#toast-container,
.apk-toast-wrap {
  z-index: 9500 !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
   ══════════════════════════════════════════════════════ */

.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: 9px !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:  10px;
  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: 9px; 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: 10px; 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: 10px; 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:   10px;
  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: 10px;
  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: 9px;
  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: 10px;
  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: 10px;
  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: 10px;
  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: 9px; 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;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#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: 10px; 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: 10px;
  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; }

/* Notes grid — consistent gap */
.notes-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

/* 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;
  }
  body[data-view="staff"] .command-bar:focus-within,
  body[data-view="chores"] .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: 9px !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 ────────────────── */
.apk-disambig-card,
[class*="disambig-card"] {
  background: var(--bg-card);
  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: 10px; 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-2 r37: Header icon order on mobile — Map must be first (after logo),
   then Calendar, then action group (score, bell, filter), then avatar. */
@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   { order: 1 !important; display: flex !important; flex-shrink: 0 !important; }
  #header-calendar-btn  { order: 2 !important; display: flex !important; flex-shrink: 0 !important; }
  #header-actions-group { order: 3 !important; display: flex !important; min-width: 0; flex-shrink: 1; overflow: hidden; }
  #apk-user-avatar      { order: 999 !important; flex-shrink: 0 !important; }
  /* Inside action group: score → bell → filter (consistent across devices) */
  #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; }
  /* 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 always first AFTER any home switcher */
  #header-mindmap-btn {
    order: 1 !important;
    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: 9.5px;
    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;
  }
  /* Blanket hide everything not in KEEP — matches _applyMobileChrome's KEEP set exactly */
  .header-right > *:not(#header-mindmap-btn):not(#header-calendar-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; }
  #header-theme-btn                      { display: inline-flex !important; }
  #header-more-btn {
    display: inline-flex !important;
    order: 4 !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); }

@media (min-width: 641px) {
  /* On desktop theme button stays in topbar; don't show it twice */
  #header-theme-btn { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────────
   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 #1 — header, CSS guarantee] On mobile the header shows ONLY Home-Map, Calendar,
   More (⋮) and Avatar. Theme + the actions group (feedback/signals/lang) live under the
   ⋮ popup. This pure-CSS rule mirrors the JS keep-set so duplicate/secondary icons can
   NEVER appear even if the JS that consolidates the header is slow or fails to run. */
@media (max-width: 640px) {
  .header-right > *:not(#header-mindmap-btn):not(#header-calendar-btn):not(#header-more-btn):not(#apk-user-avatar) {
    display: none !important;
  }
}

/* [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 */
}
[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;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}
[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] Attach sheet — bottom-sheet on mobile, centered card on desktop.
   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: flex-end; justify-content: center;
  opacity: 0; transition: opacity .22s; pointer-events: none;
}
.apk-attach-sheet.open { opacity: 1; pointer-events: auto; }
@media (min-width: 640px) {
  .apk-attach-sheet { align-items: center; }
  .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); }