/* ============================================================
   app-agentic-os.css  v1.3.0-pmf — ApunkAI Layout Contract
   PMF-READY: Zero hardcoded px offsets. Token-driven layout.
   Load: AFTER app.css · ONLY CSS authority (apk-quantum.css absorbed v1.3)

   Z-INDEX LAW (Constitutional — never negotiate):
     --z-base    100    normal content layers
     --z-nav    1000    bottom nav + sidebar
     --z-cmdbar 2000    command bar / omnibar / bot panel
     --z-page-actions 870  page-specific quick CRUD strip
     --z-fab    3000    smart FAB
     --z-modal  5000    standard modals (add-chore, add-note, etc.)
     --z-sett  10000    settings full-screen overlay
     --z-wiz   10500    bill/travel/care planner wizards
     --z-sub   12000    sub-modals INSIDE settings (add-member, etc.)
     --z-conf  14000    confirm + clarify overlays (always above all)
     --z-reauth 16000   re-auth modal (session expired)
     --z-toast 20000    toast notifications (always top)
   ============================================================ */

/* ═══ 0. DESIGN TOKENS — single source of truth ══════════════════════════ */
:root {
  /* Layout chrome heights */
  --apk-nav-h:  56px;
  --apk-cmd-h:  60px;
  --apk-pa-h:   56px;     /* v1.3 — page actions strip height */
  --apk-sab:    env(safe-area-inset-bottom, 0px);
  --apk-sat:    env(safe-area-inset-top, 0px);
  --apk-sal:    env(safe-area-inset-left, 0px);
  --apk-sar:    env(safe-area-inset-right, 0px);
  /* Header heights */
  --hdr-h:      52px;
  --hdr-h-mob:  56px;
  /* Total bottom chrome (nav + cmd + page-actions + safe-area + buffer) */
  --apk-chrome: calc(var(--apk-nav-h) + var(--apk-cmd-h) + var(--apk-pa-h) + var(--apk-sab) + 8px);
  --apk-chrome-bottom: var(--apk-chrome);
  /* Sidebar width on desktop */
  --apk-nav-w:  52px;

  /* Z-Index scale — strictly ordered */
  --z-base:   100;
  --z-nav:   1000;
  --z-cmdbar:2000;
  --z-page-actions: 870;  /* page-specific quick CRUD strip (between cmdbar and fab) */
  --z-fab:   3000;
  --z-modal: 5000;
  --z-sett: 10000;
  --z-wiz:  10500;
  --z-sub:  12000;
  --z-conf: 14000;
  --z-reauth:16000;
  --z-toast:20000;

  /* Legacy aliases — preserve backward compat with app.js tokens */
  --z-panel:    var(--z-cmdbar);
  --z-overlay:  var(--z-fab);
  --z-submodal: var(--z-sub);
}

/* ═══ 1. STRUCTURAL FOUNDATION ════════════════════════════════════════════
   ARCH-01: html + body stay overflow:hidden — prevents iOS bounce + Chrome
   desktop scrollbar flash. ALL scrollable content MUST live in inner containers
   with explicit overflow-y:auto + -webkit-overflow-scrolling:touch.

   CHROME TABLET/ANDROID FIX (P0):
   Chrome requires overflow-y:auto + EXPLICIT computed height on the scroll
   container. min-height DOES NOT trigger scrolling in Chrome.
   Solution: body uses display:flex + flex-direction:column.
             #main-content gets flex:1 + height:0 (forces scroll within flex).
   This is the only cross-browser-safe approach.

   FIREFOX TABLET FIX:
   @-moz-document block overrides flex approach for Firefox compat.
   Bottom nav + command bar left-offset accounts for sidebar width on tablet.
   ═══════════════════════════════════════════════════════════════════════ */
html {
  overscroll-behavior: none;
  overflow:   hidden !important;   /* ARCH-01 — do not change */
  height:     100dvh;
  width:      100vw;
}
body {
  overscroll-behavior: none;
  overflow:   hidden !important;   /* ARCH-01 — do not change */
  height:     100dvh;
  width:      100vw;
  margin:     0;
  display:    flex;
  flex-direction: column;
}
body.apk-scroll-lock { overflow: hidden !important; }

/* ── CHROME FIX: main-content as the ONE flex-scroll root ─────────────────
   flex:1 + height:0 forces Chrome to treat this as a bounded scroll zone.
   overflow-y:auto on a flex child with height:0 = correct cross-browser scroll */
#main-content,
.main-content,
.app-main,
[role="main"] {
  flex:        1 1 auto;
  min-height:  0;               /* flex shrink below content height */
  overflow-y:  auto      !important;
  overflow-x:  hidden    !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* padding-bottom clears command bar + nav on all platforms */
  padding-bottom: var(--apk-chrome) !important;
  box-sizing: border-box;
}

/* View panels: NOT their own scroll containers.
   ── CHROME SCROLL FIX (P0) ───────────────────────────────────────────────
   Previously both #main-content AND .view-panel had overflow-y:auto. The
   active panel grew to content height (no bounded height) so it never
   overflowed itself — #main-content was the real scroller. Chrome, unlike
   Safari, does NOT propagate wheel/trackpad scroll from an overflow:auto
   child that has nothing of its own to scroll up to the ancestor scroller,
   so the wheel did nothing while dragging the scrollbar (which targets
   #main-content directly) still worked. Solution: ONE scroll owner.
   #main-content scrolls; panels are plain flow content (overflow:visible).
   Genuine leaf scrollers (chat list, modal bodies) keep their own auto. */
.view-panel,
[id^="view-"],
[data-view] {
  overflow:    visible !important;
  min-height:  0;
  box-sizing:  border-box;
}

/* Firefox: fallback — 100dvh not always available, flex:1+height:0 unreliable */
@-moz-document url-prefix() {
  html, body         { height: 100vh; }
  body               { display: block; }   /* revert flex for Firefox */
  #main-content,
  .main-content,
  .app-main {
    position:  fixed;
    top:       var(--hdr-h, 52px);
    left:      0;
    right:     0;
    bottom:    0;
    height:    auto;
    overflow-y: auto !important;
    padding-bottom: calc(var(--apk-chrome) + 4px) !important;
    flex:      none;
  }
}

/* Firefox smoothing */
html, body { -moz-osx-font-smoothing: grayscale; }


/* ═══ 2. BOTTOM NAV — tap targets + safe area ═════════════════════════════ */
#bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: space-around;
  background: var(--bg-secondary, #1e293b);
  border-top: 1px solid var(--border, #2d3748);
  padding: 6px 4px calc(6px + var(--apk-sab));
  height: calc(var(--apk-nav-h) + var(--apk-sab));
  box-sizing: border-box;
}
#bottom-nav .nav-btn {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px; /* WCAG tap target */
  touch-action: manipulation;
}
#bottom-nav .nav-btn.active { color: var(--primary, #2563eb); }
#bottom-nav .nav-label { font-size: 10px; font-weight: 600; line-height: 1; }
#bottom-nav .nav-icon  { font-size: 22px; line-height: 1; }
#bottom-nav .nav-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 18px);
  min-width: 14px; height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: #ef4444;
  color: #fff;
  font-size: 9px; font-weight: 700;
  display: none;
  align-items: center; justify-content: center;
}
#bottom-nav .nav-badge.visible { display: flex; }
@media (min-width: 641px) {
  #bottom-nav { left: var(--apk-nav-w, 0); }
}

/* Bottom Panel */

.bottom-panel {
  
}

/* ═══ 3. COMMAND BAR — fixed floor above nav ══════════════════════════════ */
.command-bar,
#command-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--apk-nav-h) + var(--apk-sab));
  z-index: var(--z-cmdbar);
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary, #1e293b);
  padding: 6px 10px calc(8px + var(--apk-sab));
  transition: bottom 0.15s ease;
}
.command-bar .command-input-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin: 0 auto;
}
/* Desktop: offset from sidebar */
@media (min-width: 641px) {
  .command-bar, #command-bar {
    left: var(--apk-nav-w, 52px);
  }
}
/* Keyboard-aware padding (devices that expose keyboard insets) */
@supports (padding: env(keyboard-inset-bottom)) {
  .command-bar, #command-bar {
    padding-bottom: calc(8px + env(keyboard-inset-bottom, 0px) + var(--apk-sab));
  }
}

/* Firefox tablet: explicit override — @-moz-document + min-width media */
@-moz-document url-prefix() {
  @media (min-width: 641px) {
    .command-bar, #command-bar {
      left: var(--apk-nav-w, 52px) !important;
    }
    #bottom-nav {
      left: var(--apk-nav-w, 52px) !important;
    }
  }
}

/* Omnibar context strip */
#apk-omnibar-ctx {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 3px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.18s, opacity 0.18s;
}
#apk-omnibar-ctx.visible { max-height: 22px; opacity: 1; }

/* Phase pill inside command bar */
#apk-bot-phase-cmdbar {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
#apk-bot-phase-cmdbar.active { display: flex; }
.apk-phase-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: apkPulse 1.2s ease-in-out infinite;
}
.apk-phase-text { font-size: 10px; color: var(--text-tertiary); font-weight: 600; }

/* ═══ 4. SMART FAB ════════════════════════════════════════════════════════ */
.apk-smart-fab {
  position: fixed;
  z-index: var(--z-fab);
  right: 16px;
  bottom: calc(var(--apk-chrome) + 12px);
  width: 52px; height: 52px;
  border-radius: 16px;
  border: none;
  background: var(--primary, #2563eb);
  color: #fff;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.apk-smart-fab.visible { opacity: 1; transform: scale(1); }
.apk-smart-fab:active  { transform: scale(0.94); }
/* FAB hidden when modal/settings is open */
body.apk-scroll-lock .apk-smart-fab { opacity: 0 !important; pointer-events: none !important; }

/* ═══ 5. BOT STATE CSS MACHINE ════════════════════════════════════════════ */
@keyframes apkPulse    { 0%, 100% { transform: scale(1); }     50% { transform: scale(1.08); } }
@keyframes apkSlideUp  { from { transform: translateY(100%); } to  { transform: translateY(0); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes apk-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes apkSlideIn  { from { transform: translateX(100%);}  to  { transform: translateX(0); } }
@keyframes apkFadeIn   { from { opacity: 0; }                  to  { opacity: 1; } }
@keyframes apkRotate   { to   { transform: rotate(360deg); } }

body[data-bot-state="THINKING"] #chat-send-btn {
  background: linear-gradient(135deg, #f59e0b, #2563eb);
  animation: apkPulse 1.2s ease-in-out infinite;
}
.rotating { display: inline-block; animation: apkRotate 1s linear infinite; }

/* ═══ 6. CHAT CANVAS — CONVERSATION-ONLY MODE ═════════════════════════════
   When data-chat-state="active" the home view becomes a clean
   conversation surface. All score widgets, stat strips, booster cards
   vanish at the CSS layer — no JS paint lag, no flash.
   ═══════════════════════════════════════════════════════════════════════ */
body[data-chat-state="active"] #view-home .apk-score-booster,
body[data-chat-state="active"] #view-home .apk-booster-card,
body[data-chat-state="active"] #view-home #apk-home-stat-strip,
body[data-chat-state="active"] #view-home .hss-stat-grid,
body[data-chat-state="active"] #view-home .home-stat-strip,
body[data-chat-state="active"] #view-home #home-score-card,
body[data-chat-state="active"] #view-home .home-score-card,
body[data-chat-state="active"] #view-home .apk-pukar-strip,
body[data-chat-state="active"] #view-home .apk-quantum-chips,
body[data-chat-state="active"] #view-home .morning-greeting,
body[data-chat-state="active"] #view-home [class*="home-greeting"],
body[data-chat-state="active"] #view-home .apk-hero-greeting {
  display: none !important;
}
/* When NOT active: show stat strip after data populates */
.home-stat-strip {
  opacity: 0;
  transition: opacity 0.3s;
}
.home-stat-strip.populated { opacity: 1; }

/* ═══ 7. MATERIAL SYMBOLS FALLBACK ════════════════════════════════════════ */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ═══ 8. CONFIRM OVERLAY — z-conf (14000), always on top ═════════════════ */
.apk-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-conf);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.22s;
  pointer-events: none;
}
.apk-confirm-overlay.open { opacity: 1; pointer-events: auto; }
.apk-confirm-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--bg-secondary);
  border-radius: 20px 20px 0 0;
  padding: 24px 20px calc(20px + var(--apk-sab));
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
  animation: apkSlideUp 0.24s;
}
.apk-confirm-title  { font-size: 16px; font-weight: 800; color: var(--text-primary); margin-bottom: 10px; }
.apk-confirm-body   { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }
.apk-confirm-amount { font-size: 22px; font-weight: 800; color: var(--primary); margin-bottom: 16px; }
.apk-confirm-actions { display: flex; gap: 10px; }
.apk-confirm-no {
  flex: 1; padding: 12px; border-radius: 12px;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--text-secondary); font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.apk-confirm-yes {
  flex: 2; padding: 12px; border-radius: 12px;
  border: none; background: var(--primary); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}

/* Clarify / quick-action cards (inside chat) */
.apk-clarify-card,
.apk-quick-action-card {
  background: rgba(30, 41, 59, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 8px 0;
}
.apk-clarify-title, .apk-qa-title {
  font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px;
}
.apk-clarify-chips-row, .apk-qa-row { display: flex; flex-wrap: wrap; gap: 6px; }
.apk-clarify-chip, .apk-qa-chip {
  padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--primary);
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* ═══ 9. FEEDBACK SHEET — z-conf ══════════════════════════════════════════ */
.apk-pfb-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-conf);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s;
  pointer-events: none;
}
.apk-pfb-sheet.open { opacity: 1; pointer-events: auto; }
.apk-pfb-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.apk-pfb-card {
  position: relative;
  z-index: 1;
  width: 100%; max-width: 440px;
  background: var(--bg-secondary);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border);
  padding: 20px 16px calc(16px + var(--apk-sab));
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  animation: apkSlideUp 0.22s;
}
.apk-pfb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.apk-pfb-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.apk-pfb-x, .apk-talk-x, .apk-quickadd-x {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-tertiary);
  color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.apk-pfb-thumbs { display: flex; gap: 20px; justify-content: center; margin-bottom: 16px; }
.apk-pfb-thumb {
  width: 56px; height: 56px; border-radius: 16px;
  border: 2px solid var(--border); background: var(--bg-tertiary);
  color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.apk-pfb-thumb.active { border-color: var(--primary); background: rgba(37, 99, 235, 0.12); color: var(--primary); }
.apk-pfb-text {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg-tertiary);
  color: var(--text-primary); font-size: 13px; font-family: inherit;
  resize: none; min-height: 60px; margin-bottom: 12px; box-sizing: border-box;
}
.apk-pfb-submit {
  width: 100%; padding: 12px; border-radius: 12px;
  border: none; background: var(--primary); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.apk-pfb-submit:disabled { opacity: 0.4; cursor: not-allowed; }
/* Feedback category grid */
.apk-pfb-cat-label { font-size: 11px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.apk-pfb-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.apk-pfb-cat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px; border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--bg-tertiary); color: var(--text-secondary);
  font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.apk-pfb-cat.active { border-color: var(--primary); background: rgba(37, 99, 235, 0.12); color: var(--primary); }
.apk-pfb-attach-row { margin: 10px 0 12px; }
.apk-pfb-attach-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 10px;
  border: 1.5px dashed var(--border); background: transparent;
  color: var(--text-secondary); font-size: 12px; cursor: pointer;
}
.apk-pfb-attach-label:hover { border-color: var(--primary); color: var(--primary); }
.apk-pfb-attach-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.apk-pfb-attach-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 8px; background: var(--bg-tertiary);
  color: var(--text-secondary); font-size: 11px;
}
.apk-pfb-attach-chip button { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 14px; padding: 0 0 0 4px; line-height: 1; }
/* Feedback auto-open suppressor */
.apk-feedback-sheet.auto-open,
[data-feedback-auto-open="true"] { display: none !important; }

/* ═══ 10. PERSONA CARDS ════════════════════════════════════════════════════ */
.apk-pcard {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--bg-card, #1e293b);
}
.apk-pcard-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.apk-pcard-body { flex: 1; min-width: 0; }
.apk-pcard-name  { font-size: 14px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
.apk-pcard-role  { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.apk-pcard-badge { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 8px; }
.apk-pcard-badge--pilot { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.apk-pcard-actions { display: flex; gap: 4px; flex-shrink: 0; }
.apk-pcard-talk,
.apk-pcard-more {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-tertiary);
  color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* Agent Talk Modal — z-sub */
#apk-agent-talk-modal {
  position: fixed; inset: 0;
  z-index: var(--z-sub);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 0.22s; pointer-events: none;
}
#apk-agent-talk-modal.open { opacity: 1; pointer-events: auto; }
.apk-talk-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.apk-talk-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px;
  background: var(--bg-secondary);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px calc(16px + var(--apk-sab));
  animation: apkSlideUp 0.22s;
}
.apk-talk-head  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.apk-talk-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.apk-talk-input {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg-tertiary);
  color: var(--text-primary); font-size: 14px; font-family: inherit;
  box-sizing: border-box; margin-bottom: 10px;
}
.apk-talk-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.apk-talk-chip {
  padding: 5px 12px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--bg-tertiary);
  color: var(--text-secondary); font-size: 11px; cursor: pointer; font-family: inherit;
}
.apk-talk-send {
  width: 100%; padding: 12px; border-radius: 12px;
  border: none; background: var(--primary); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}

/* ═══ 11. SETTINGS — full-screen 100dvh slide-in (z-sett: 10000) ══════════ */
.apk-settings-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-sett);
  background: var(--bg-primary, #0f172a);
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  /* SCROLL FIX: settings panel itself must scroll its inner content */
  overflow-y: auto   !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* Force full-screen — beats any inherited max-width */
  width: 100vw  !important;
  height: 100dvh !important;
  top:  0 !important;
  left: 0 !important;
  /* Do NOT set padding-bottom here — .apk-sett-footer handles the safe-area gap */
}
.apk-settings-panel.open { transform: translateX(0); }
.apk-sett-head {
  display: flex; align-items: center; gap: 12px;
  padding: calc(14px + var(--apk-sat)) 16px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--bg-primary);
  z-index: 2;
}
.apk-sett-back {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-tertiary);
  color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.apk-sett-title { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.apk-sett-body  { padding: 16px; }
.apk-sett-section { margin-bottom: 24px; }
.apk-sett-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-tertiary); margin-bottom: 10px;
}
.apk-sett-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 12px; border-radius: 12px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.apk-sett-row:hover, .apk-sett-row:active { background: var(--bg-tertiary); }
.apk-sett-row .material-symbols-outlined { font-size: 20px; color: var(--text-secondary); flex-shrink: 0; }
.apk-sett-row-body   { flex: 1; min-width: 0; }
.apk-sett-row-title  { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.apk-sett-row-sub    { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.apk-sett-logout {
  align-items: center; gap: 10px;
  padding: 14px 12px; border-radius: 12px;
  border: 1.5px solid rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.06);
  color: #ef4444; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.apk-sett-footer {
  text-align: center; font-size: 11px; color: var(--text-tertiary);
  padding: 20px 0 calc(40px + var(--apk-sab));
}

/* Sub-panel (e.g. Members section inside settings) — z-sub (12000) */
.apk-sett-sub {
  position: fixed;
  inset: 0;
  z-index: var(--z-sub);
  background: var(--bg-primary);
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
}
.apk-sett-sub.open { transform: translateX(0); }
.apk-sub-head {
  display: flex; align-items: center; gap: 12px;
  padding: calc(14px + var(--apk-sat)) 16px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--bg-primary); z-index: 2;
}
.apk-sub-back {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-tertiary);
  color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.apk-sub-title  { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.apk-sub-body   { padding: 16px; }
.apk-sub-section { margin-bottom: 20px; }
.apk-sub-action-row { display: flex; gap: 10px; margin-bottom: 16px; }
.apk-sub-row-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-primary);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.apk-sub-row-btn.apk-danger { border-color: rgba(239, 68, 68, 0.3); color: #ef4444; }
.apk-member-list { display: flex; flex-direction: column; gap: 8px; }

/* Add-member / add-staff modals INSIDE settings must escape stacking */
body > #add-family-modal.active,
body > #add-staff-modal.active {
  z-index: calc(var(--z-sub) + 500) !important;
}

/* ═══ 12. ADD HOME MODAL — z-sub ══════════════════════════════════════════ */
/* [FIX-MODAL-01] was align-items:flex-end (bottom sheet) — inconsistent with the centered
   convention used everywhere else (.modal.active uses align-items:center). Switched to match. */
.apk-addhome-modal {
  position: fixed; inset: 0; z-index: var(--z-sub);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.22s; pointer-events: none;
}
.apk-addhome-modal.open { opacity: 1; pointer-events: auto; }
.apk-addhome-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.apk-addhome-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px;
  background: var(--bg-secondary);
  border-radius: 20px 20px 0 0;
  animation: apkSlideUp 0.24s;
  max-height: 92dvh;
  overflow-y: auto;
}
.apk-addhome-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-secondary); z-index: 1;
}
.apk-addhome-title { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.apk-addhome-body  { padding: 16px; }
.apk-addhome-body .form-group { margin-bottom: 12px; }
.apk-addhome-body label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 5px;
}
.apk-addhome-body .form-control {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--bg-tertiary); color: var(--text-primary);
  font-size: 14px; font-family: inherit; outline: none;
}
.apk-addhome-body .form-control:focus { border-color: var(--primary); }
.apk-addhome-body .form-control.input-err { border-color: #ef4444; }
.apk-addhome-body textarea.form-control { resize: vertical; min-height: 52px; }
.apk-addhome-actions {
  display: flex; gap: 10px;
  padding: 12px 16px calc(20px + var(--apk-sab));
  border-top: 1px solid var(--border);
  position: sticky; bottom: 0; background: var(--bg-secondary);
}
.apk-home-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--bg-card);
  cursor: pointer; font-family: inherit; text-align: left;
}
.apk-home-item.active { border-color: var(--primary); background: rgba(37, 99, 235, 0.06); }
.apk-home-current-chip {
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 8px;
  background: rgba(37, 99, 235, 0.15); color: var(--primary);
  letter-spacing: .4px; text-transform: uppercase;
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .form-row-2 { grid-template-columns: 1fr; } }

/* ═══ 13. QUICK-ADD + ATTACH SHEET — z-sub ════════════════════════════════ */
.apk-quickadd-modal,
.apk-attach-sheet {
  position: fixed; inset: 0; z-index: var(--z-sub);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 0.22s; pointer-events: none;
}
.apk-quickadd-modal.open,
.apk-attach-sheet.open { opacity: 1; pointer-events: auto; }
.apk-quickadd-backdrop,
.apk-attach-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.apk-quickadd-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 520px;
  background: var(--bg-secondary);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
  animation: apkSlideUp 0.24s;
  overflow-y: auto;
  max-height: 88dvh;
}
.apk-quickadd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-secondary); z-index: 1;
}
.apk-quickadd-title  { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.apk-quickadd-body   { padding: 16px; }
.apk-quickadd-actions {
  display: flex; gap: 10px;
  padding: 12px 16px calc(20px + var(--apk-sab));
  border-top: 1px solid var(--border);
  position: sticky; bottom: 0; background: var(--bg-secondary);
}
.apk-attach-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  background: var(--bg-secondary);
  border-radius: 20px 20px 0 0;
  padding: 16px 16px calc(16px + var(--apk-sab));
  animation: apkSlideUp 0.22s;
}
.apk-attach-grip { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 16px; }
.apk-attach-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; }
.apk-attach-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 10px; border-radius: 12px; border: none;
  background: transparent; cursor: pointer; font-family: inherit; text-align: left;
}
.apk-attach-row:hover, .apk-attach-row:active { background: var(--bg-tertiary); }
.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-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.apk-attach-desc { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }

/* ═══ 14. PLANNER WIZARDS — full-screen (z-wiz: 10500) ═══════════════════ */
.apk-planner-wizard {
  position: fixed;
  inset: 0;
  z-index: var(--z-wiz);
  background: var(--bg-primary, #0f172a);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.apk-planner-wizard.open { transform: translateY(0); }
.apk-wiz-head {
  display: flex; align-items: center; gap: 10px;
  padding: calc(12px + var(--apk-sat)) 14px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary); flex-shrink: 0;
}
.apk-wiz-back,
.apk-wiz-close {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-tertiary);
  color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.apk-wiz-title {
  flex: 1; font-size: 16px; font-weight: 800; color: var(--text-primary);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apk-wiz-progress     { height: 3px; background: var(--border); flex-shrink: 0; }
.apk-wiz-progress-bar { height: 100%; background: var(--primary, #2563eb); transition: width 0.3s ease; }
.apk-wiz-body         { flex: 1; overflow-y: auto; padding: 20px 16px 8px; -webkit-overflow-scrolling: touch; }
.apk-wiz-step-label   { font-size: 10px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.apk-wiz-step-title   { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--text-primary); line-height: 1.25; }
.apk-wiz-step-sub     { margin: 0 0 16px; font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.apk-wiz-step-content { margin-top: 12px; }
.apk-wiz-foot {
  display: flex; gap: 10px;
  padding: 10px 14px calc(10px + var(--apk-sab));
  border-top: 1px solid var(--border);
  background: var(--bg-primary); flex-shrink: 0;
}
.apk-wiz-skip {
  flex-shrink: 0; padding: 10px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.apk-wiz-next {
  flex: 1; padding: 12px 20px; border-radius: 12px;
  border: none; background: var(--primary, #2563eb); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.apk-wiz-next:disabled { opacity: 0.6; cursor: not-allowed; }
/* Chip grid */
.apk-wiz-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 481px) { .apk-wiz-chips { grid-template-columns: repeat(3, 1fr); } }
.apk-wiz-chip {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  padding: 14px 8px; min-height: 88px;
  border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--bg-secondary); color: var(--text-primary);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.apk-wiz-chip .material-symbols-outlined { font-size: 24px; }
.apk-wiz-chip.active  { border-color: var(--primary); background: rgba(37, 99, 235, 0.08); }
.apk-wiz-chip.suggested::before { content: '★'; position: absolute; top: 6px; right: 8px; color: #f59e0b; font-size: 10px; }
.apk-wiz-tag {
  position: absolute; bottom: 6px; right: 8px;
  font-size: 8px; font-weight: 700;
  background: rgba(245, 158, 11, 0.15); color: #f59e0b;
  padding: 1px 5px; border-radius: 4px; letter-spacing: .3px; text-transform: uppercase;
}
/* Options list */
.apk-wiz-options { display: flex; flex-direction: column; gap: 8px; }
.apk-wiz-option {
  text-align: left; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--bg-secondary);
  cursor: pointer; font-family: inherit; transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.apk-wiz-option.active { border-color: var(--primary); background: rgba(37, 99, 235, 0.08); }
.apk-wiz-option-label { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.apk-wiz-option-sub   { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
/* Field forms */
.apk-wiz-fields { display: flex; flex-direction: column; gap: 14px; }
.apk-wiz-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.apk-wiz-field label {
  display: block; font-size: 11px; font-weight: 700; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px;
}
.apk-wiz-field input {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--bg-secondary); color: var(--text-primary);
  font-size: 14px; font-family: inherit; -webkit-appearance: none; outline: none;
}
.apk-wiz-field input:focus { border-color: var(--primary); }
.apk-wiz-rupee-wrap { position: relative; }
.apk-wiz-rupee-prefix {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-secondary); font-size: 14px; font-weight: 600; pointer-events: none;
}
.apk-wiz-rupee-wrap input { padding-left: 32px; }
/* Checklist */
.apk-wiz-checklist, .apk-wiz-reminders { display: flex; flex-direction: column; gap: 6px; }
.apk-wiz-check {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.apk-wiz-check input { width: 18px; height: 18px; accent-color: var(--primary, #2563eb); flex-shrink: 0; }
.apk-wiz-check span  { font-size: 13px; color: var(--text-primary); }
/* Summary card */
.apk-wiz-summary {
  margin-top: 16px; padding: 14px 16px; border-radius: 12px;
  background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.2);
  color: var(--text-primary); font-size: 13px; line-height: 1.55;
}
.apk-wiz-summary-title {
  font-size: 10px; font-weight: 800; color: var(--primary);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
.apk-wiz-summary > div + div { margin-top: 3px; color: var(--text-secondary); }

/* ═══ 15. PUKAR SIGNALS ══════════════════════════════════════════════════= */
.apk-pukar-strip { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 8px; }
.apk-pukar-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 18px; border: 1.5px solid;
  font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* ═══ 16. SETTINGS UI COMPONENTS ═════════════════════════════════════════= */
.apk-beta-chip {
  display: inline-block; padding: 1px 7px; border-radius: 8px;
  background: rgba(245, 158, 11, 0.15); color: #f59e0b;
  font-size: 9px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; margin-left: 6px; vertical-align: middle;
}
.apk-sub-empty {
  padding: 20px 12px; text-align: center; color: var(--text-tertiary);
  font-size: 13px; background: var(--bg-tertiary); border-radius: 10px;
  border: 1px dashed var(--border);
}
.apk-sub-subtitle {
  font-size: 11px; font-weight: 700; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .5px; margin: 14px 0 8px;
}
.apk-sub-helper {
  padding: 12px 14px; border-radius: 10px;
  background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.2);
  color: var(--text-secondary); font-size: 12px; line-height: 1.5; margin-bottom: 14px;
}
.apk-sub-disclaimer { padding: 10px 12px; font-size: 11px; color: var(--text-tertiary); line-height: 1.5; margin-top: 12px; }
.apk-sub-wide-btn { width: 100%; padding: 12px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; }
/* Plan cards */
.apk-plan-wrap { display: flex; flex-direction: column; gap: 12px; }
.apk-plan-card { background: var(--bg-secondary); border: 1.5px solid var(--border); border-radius: 14px; padding: 16px; transition: border-color .15s; }
.apk-plan-card.current { border-color: var(--primary); background: rgba(37, 99, 235, 0.05); }
.apk-plan-head { margin-bottom: 12px; }
.apk-plan-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.apk-plan-name  { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.apk-plan-badge { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 8px; background: var(--primary); color: #fff; letter-spacing: .4px; text-transform: uppercase; }
.apk-plan-price { font-size: 22px; font-weight: 800; color: var(--text-primary); margin-top: 2px; }
.apk-plan-price-note { font-size: 11px; color: #f59e0b; font-weight: 600; margin-top: 2px; }
.apk-plan-tagline { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.apk-plan-features { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.apk-plan-feature { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13px; line-height: 1.4; }
.apk-plan-feature .material-symbols-outlined { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.apk-plan-feature.included { color: var(--text-primary); }
.apk-plan-feature.included .material-symbols-outlined { color: #10b981; }
.apk-plan-feature.excluded { color: var(--text-tertiary); }
.apk-plan-feature.excluded .material-symbols-outlined { color: var(--text-tertiary); }
/* Smart parse card */
.apk-smartparse-card { padding: 14px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg-secondary); margin-bottom: 4px; transition: all .15s; }
.apk-smartparse-card.on { border-color: #10b981; background: rgba(16, 185, 129, 0.05); }
.apk-smartparse-row { display: flex; align-items: center; gap: 12px; }
.apk-smartparse-ico { font-size: 22px; color: var(--primary); flex-shrink: 0; }
.apk-smartparse-card.on .apk-smartparse-ico { color: #10b981; }
.apk-smartparse-body { flex: 1; min-width: 0; }
.apk-smartparse-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.apk-smartparse-desc { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.apk-smartparse-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.apk-smartparse-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--bg-tertiary); font-size: 13px; color: var(--text-primary); }
.apk-smartparse-list li .material-symbols-outlined { font-size: 18px; color: var(--primary); flex-shrink: 0; }
/* Toggle switch */
.apk-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.apk-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.apk-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 24px; transition: background 0.2s; }
.apk-toggle-slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.apk-toggle input:checked + .apk-toggle-slider { background: #10b981; }
.apk-toggle input:checked + .apk-toggle-slider::before { transform: translateX(20px); }

/* ═══ 17. CONNECTOR ROWS ═══════════════════════════════════════════════════ */
.apk-conn-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.apk-conn-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.apk-conn-body { flex: 1; }
.apk-conn-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.apk-conn-desc { font-size: 11px; color: var(--text-tertiary); }
.btn-outline-small {
  padding: 6px 12px; border-radius: 8px;
  border: 1.5px solid var(--primary); background: transparent;
  color: var(--primary); font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}

/* ═══ 18. RE-AUTH MODAL — z-reauth (16000) ═══════════════════════════════= */
.apk-reauth-modal {
  position: fixed; inset: 0;
  z-index: var(--z-reauth);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.apk-reauth-modal.open { opacity: 1; pointer-events: auto; }
.apk-reauth-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); }
.apk-reauth-card {
  position: relative; z-index: 1;
  width: calc(100% - 32px); max-width: 400px;
  background: var(--bg-secondary, #1e293b);
  border-radius: 16px; border: 1px solid var(--border);
  padding: 24px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.apk-reauth-head  { text-align: center; margin-bottom: 20px; }
.apk-reauth-title { font-size: 18px; font-weight: 800; color: var(--text-primary); margin-top: 8px; }
.apk-reauth-sub   { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
.apk-reauth-body  { margin-bottom: 16px; }
.apk-reauth-body .form-group { margin-bottom: 12px; }
.apk-reauth-body label {
  display: block; font-size: 11px; font-weight: 700; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
.apk-reauth-body .form-control {
  width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg-tertiary);
  color: var(--text-primary); font-size: 15px; font-family: inherit; outline: none;
}
.apk-reauth-body .form-control:focus { border-color: var(--primary); background: var(--bg-primary); }
.apk-reauth-err { padding: 10px 12px; border-radius: 8px; background: rgba(239, 68, 68, 0.1); color: #ef4444; font-size: 12px; font-weight: 600; margin-top: 4px; }
.apk-reauth-actions { display: flex; gap: 10px; }
.apk-reauth-actions .btn-secondary {
  flex: 1; padding: 11px; border-radius: 10px;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--text-secondary); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.apk-reauth-actions .btn-primary {
  flex: 2; padding: 11px; border-radius: 10px;
  border: none; background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.apk-reauth-actions .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* ═══ 19. MODAL LEGACY COMPAT ════════════════════════════════════════════= */
/* All legacy .modal.active must be at z-modal minimum */
.modal.active { display: flex !important; align-items: center !important; justify-content: center !important; z-index: var(--z-modal) !important; }

/* SCROLL FIX: modal body must scroll independently of body overflow:hidden */
.modal-body,
.modal-content,
[class*="modal"] .modal-body,
[class*="modal"] .modal-content {
  overflow-y: auto    !important;
  overflow-x: hidden  !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  max-height: 85dvh;        /* cap so modal never taller than viewport */
}

/* Roadmap modal — [FIX] use var(--z-wiz) not hardcoded 9500 */
#apk-roadmap-sheet,
.apk-roadmap-sheet {
  z-index: var(--z-wiz) !important;  /* 10500 — above settings (10000) */
  max-height: 85dvh !important;
  overflow-y: auto  !important;
  -webkit-overflow-scrolling: touch;
}
/* Roadmap content scrolls, header stays fixed */
#apk-roadmap-sheet .apk-roadmap-body {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Staff/family modals opened from anywhere must use z-sub */
#add-staff-modal.active,
#add-family-modal.active,
#upgrade-modal.active,
#ocr-modal.active {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: var(--z-sub) !important;
}
/* Kill legacy agentic panel (replaced by ApkBotPanel) */
#apk-agentic-panel { display: none !important; }
/* Sidebar upgrade button — not needed at PMF stage */
#nav-container > div[style*="margin-top:auto"] { display: none !important; }
/* Suppress settings-triggered profile sheet */
.apk-settings-panel.open ~ .apk-profile-sheet,
.apk-settings-panel.open ~ [data-avatar-sheet] { display: none !important; }

/* ═══ 20. SIDEBAR OVERLAY — mobile ════════════════════════════════════════ */
body.sidebar-open { overflow: hidden !important; }
body.sidebar-open::before {
  content: '';
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-nav) - 1);
  pointer-events: auto;
}
@media (min-width: 641px) { body.sidebar-open::before { display: none; } }
body.sidebar-open #nav-container { transform: translateX(0) !important; }

/* ═══ 21. MAP OVERLAY CHROME FIX ════════════════════════════════════════== */
#view-map, [data-view="map"] { padding-bottom: var(--apk-chrome) !important; }
.leaflet-bottom, .map-controls { bottom: calc(var(--apk-chrome) + 8px) !important; }

/* ═══ 22. MOBILE PERFORMANCE & INPUT SAFETY ══════════════════════════════= */
*,
*::before,
*::after {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Force 16px on mobile inputs to prevent iOS zoom */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}
/* Firefox: moz-document command bar fix */
@-moz-document url-prefix() {
  .command-bar, #command-bar {
    padding-bottom: calc(10px + var(--apk-sab));
  }
}

/* ═══ 23. SCORE CURSOR (home view) ══════════════════════════════════════== */
#view-home [id*="stat-smart-score"] { cursor: pointer; }


/* ═══════════════════════════════════════════════════════════════════════════
   ═══ v1.3.0-pmf ADDITIONS (Apr 2026) ═══════════════════════════════════════
   Absorbed from deleted apk-quantum.css. FINAL authority on:
     · full-screen settings
     · page actions strip
     · conversation scroll container
     · clarify card
     · mobile-first header
     · empty-state singleton
     · inline errors
     · responsive breathing
     · PMF celebrations
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 24. FULL-SCREEN SETTINGS (body.has-settings-open) ═══════════════════ */
#apk-settings-panel,
.apk-settings-panel,
body.has-settings-open #apk-settings-panel,
body.has-settings-open .apk-settings-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: var(--z-sett) !important;
  background: var(--bg-primary, #0f172a) !important;
  box-shadow: none !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.has-settings-open { overflow: hidden !important; }

/* Sub-modals INSIDE settings — escape settings stacking context */
body.has-settings-open .modal,
body.has-settings-open .modal.active,
body.has-settings-open #apk-pin-sheet,
body.has-settings-open #apk-confirm-overlay,
body.has-settings-open .apk-confirm-overlay,
body.has-settings-open #add-staff-modal,
body.has-settings-open #add-family-modal,
body.has-settings-open #upgrade-modal,
body.has-settings-open .apk-fs-page,
body.has-settings-open #apk-sett-sub {
  z-index: var(--z-sub) !important;
  position: fixed !important;
  inset: 0 !important;
}

/* Settings interior scroll */
.apk-settings-panel .apk-sett-body,
.apk-settings-panel .apk-sub-body,
.apk-settings-panel [data-sett-body] {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

/* Sticky header inside settings */
.apk-settings-panel .apk-sett-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: var(--bg-primary, #0f172a) !important;
  border-bottom: 1px solid var(--border, #2d3748) !important;
  flex-shrink: 0 !important;
}


/* ═══ 25. PAGE ACTIONS STRIP — single-CTA per view ═══════════════════════ */
.apk-page-actions {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(var(--apk-nav-h) + var(--apk-cmd-h) + var(--apk-sab)) !important;
  z-index: var(--z-page-actions) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  height: var(--apk-pa-h) !important;
  box-sizing: border-box !important;
  background: linear-gradient(to bottom,
    rgba(15, 23, 42, 0.65) 0%,
    rgba(15, 23, 42, 0.92) 100%) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none;
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.apk-page-actions::-webkit-scrollbar { display: none; }

@media (min-width: 641px) {
  .apk-page-actions { left: var(--apk-nav-w, 52px) !important; }
}

body[data-chat-state="active"] .apk-page-actions,
.apk-page-actions[data-empty="1"] {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
}
body.sidebar-open .apk-page-actions,
body.has-settings-open .apk-page-actions {
  opacity: 0 !important;
  pointer-events: none !important;
}

.apk-pa-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 22px;
  border: 1px solid var(--border, #2d3748);
  background: var(--bg-secondary, #1e293b);
  color: var(--text-secondary, #94a3b8);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
  min-height: 40px;
}
.apk-pa-btn:hover {
  background: var(--bg-tertiary, #334155);
  border-color: rgba(37, 99, 235, 0.3);
  color: var(--text-primary, #f1f5f9);
}
.apk-pa-btn:active { transform: scale(0.96); }
.apk-pa-btn:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
}
.apk-pa-btn .apk-pa-icon {
  font-size: 16px !important;
  pointer-events: none;
  color: inherit;
}
.apk-pa-btn .apk-pa-label { pointer-events: none; }

.apk-pa-btn--primary {
  background: var(--primary, #2563eb) !important;
  border-color: var(--primary, #2563eb) !important;
  color: #fff !important;
}
.apk-pa-btn--primary:hover { background: #1d4ed8 !important; color: #fff !important; }
.apk-pa-btn--success {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #10b981 !important;
}
.apk-pa-btn--warning {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #f59e0b !important;
}

@media (max-width: 479px) {
  .apk-page-actions { padding: 6px 10px !important; gap: 6px !important; }
  .apk-pa-btn { padding: 7px 11px; font-size: 11px; min-height: 36px; }
  .apk-pa-btn .apk-pa-icon { font-size: 15px !important; }
}


/* ═══ 26. CONVERSATION MESSAGES — own scroll container ═══════════════════ */
#conversation-messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
  padding: 12px 14px 24px !important;
  /* CHROME SCROLL FIX (P0): not an independent scroll container.
     It has no bounded height (only min-height), so overflow-y:auto here
     made it a non-overflowing nested scroller that Chrome's wheel handler
     would dead-end on. The command bar is position:fixed, so the message
     list scrolls with the page via #main-content (the single scroll owner). */
  overflow: visible !important;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}
body[data-chat-state="active"] #conversation-messages {
  min-height: calc(100dvh - var(--hdr-h-mob, 56px) - var(--apk-chrome) - 24px) !important;
}
body[data-chat-state="idle"] #conversation-messages:empty {
  min-height: 0 !important;
  padding: 0 !important;
}
#conversation-messages > *:last-child {
  scroll-margin-bottom: 16px;
}


/* ═══ 27. CLARIFY CARD (ApkClarifyGate) — bot asks before action ═════════ */
.apk-clarify-card {
  animation: apkClarifyFadeIn 0.2s ease-out;
}
.apk-clarify-card .apk-clarify-body {
  background: rgba(30, 41, 59, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 14px;
  padding: 14px 16px;
  max-width: 520px;
}
.apk-clarify-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #f1f5f9);
  margin-bottom: 4px;
}
.apk-clarify-orig {
  font-size: 11px;
  color: var(--text-tertiary, #64748b);
  margin-bottom: 10px;
}
.apk-clarify-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apk-clarify-opt {
  text-align: left;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #2d3748);
  background: var(--bg-secondary, #1e293b);
  color: var(--text-primary, #f1f5f9);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.12s, background 0.12s;
}
.apk-clarify-opt:hover {
  border-color: var(--primary, #2563eb);
  background: rgba(37, 99, 235, 0.08);
}
.apk-clarify-opt:active { transform: scale(0.98); }
.apk-clarify-skip {
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--text-tertiary, #64748b);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}
@keyframes apkClarifyFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══ 28. MOBILE-FIRST HEADER — phone <480 collapse ══════════════════════ */
@media (max-width: 479px) {
  .header #header-score-btn,
  .header #header-bell-btn { display: none !important; }
  .header #header-calendar-btn { width: 32px !important; height: 32px !important; }
  .header .tagline.hide-on-mobile { display: none !important; }
  .header .logo { font-size: 15px !important; }
}


/* ═══ 29. SIGNAL CHIP DEDUP — no floating chip when inline banner exists ═ */
#view-home:has(.apk-overdue-banner) ~ #signal-chip,
#view-home:has(.apk-signal-banner) ~ #signal-chip {
  display: none !important;
}


/* ═══ 30. EMPTY STATE — singleton (no double-mount) ═════════════════════ */
.apk-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  color: var(--text-secondary, #94a3b8);
  min-height: 280px;
}
.apk-empty-state[data-empty-mounted="1"] ~ .apk-empty-state {
  display: none !important;
}
.apk-empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(37, 99, 235, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.apk-empty-state-icon .material-symbols-outlined {
  font-size: 32px;
  color: var(--primary, #2563eb);
}
.apk-empty-state-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #f1f5f9);
  margin-bottom: 6px;
}
.apk-empty-state-desc {
  font-size: 13px;
  color: var(--text-tertiary, #64748b);
  margin-bottom: 16px;
  max-width: 280px;
  line-height: 1.5;
}
.apk-empty-state-cta {
  padding: 10px 20px;
  border-radius: 12px;
  border: none;
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.apk-empty-state-cta:hover { background: #1d4ed8; }


/* ═══ 31. INLINE ERROR (replaces floating red toasts on data-load fail) ══ */
.apk-inline-err {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin: 16px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  font-size: 13px;
}
.apk-inline-err .material-symbols-outlined {
  color: #ef4444;
  font-size: 18px;
  flex-shrink: 0;
}
.apk-inline-err-msg { flex: 1; line-height: 1.4; }
.apk-inline-err-retry {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: transparent;
  color: #fca5a5;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.apk-inline-err-retry:hover { background: rgba(239, 68, 68, 0.12); }


/* ═══ 32. FAB / ROADMAP CLEANUP ════════════════════════════════════════ */
#apk-page-fab,
.apk-page-fab,
.apk-smart-fab[data-page-context] {
  display: none !important;
}
[data-action="open-roadmap"],
.apk-roadmap-trigger,
.apk-roadmap-pill,
#nav-container > div[style*="margin-top:auto"] [data-action="open-roadmap"] {
  display: none !important;
}


/* ═══ 33. HOME VIEW DECLUTTER — chat-active hides idle widgets ═════════ */
body[data-chat-state="active"] #view-home #apk-home-stat-strip,
body[data-chat-state="active"] #view-home #apk-group-brain-host,
body[data-chat-state="active"] #view-home #suggestion-chips-wrapper,
body[data-chat-state="active"] #view-home #home-group-agent-strip,
body[data-chat-state="active"] #view-home .home-stat-strip,
body[data-chat-state="active"] #view-home .apk-home-idle {
  display: none !important;
}

/* Singleton enforcement — only ONE pukar/signal block at a time */
#view-home .apk-pukar-signals + .apk-pukar-signals,
#view-home #pukar-signals + #pukar-signals,
#view-home .apk-pukar-strip + .apk-pukar-strip {
  display: none !important;
}


/* ═══ 34. RESPONSIVE BREATHING ══════════════════════════════════════════ */
@media (max-width: 479px) {
  :root {
    --apk-cmd-h: 56px;
    --apk-pa-h:  52px;
  }
  .command-bar, #command-bar { padding: 0 8px 6px !important; }
  .command-input-group { padding: 3px 5px 3px 8px; min-height: 40px; }
  #command-input { font-size: 16px; }
}

@media (min-width: 480px) and (max-width: 1024px) {
  :root {
    --apk-cmd-h: 60px;
    --apk-pa-h:  56px;
  }
}

@media (min-width: 1025px) {
  :root {
    --apk-nav-w: 56px;
    --apk-pa-h:  60px;
  }
  .apk-pa-btn { padding: 10px 16px; font-size: 13px; }
}


/* ═══ 35. BLUE SPINNER — canonical loading state ═══════════════════════ */
.apk-blue-spin {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}
.apk-blue-spin-dot {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(37, 99, 235, 0.2);
  border-top-color: var(--primary, #2563eb);
  border-radius: 50%;
  animation: apkSpinRot 0.8s linear infinite;
}
.apk-blue-spin-text {
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  font-weight: 600;
}
@keyframes apkSpinRot { to { transform: rotate(360deg); } }


/* ═══ 36. PMF CELEBRATIONS ═════════════════════════════════════════════ */
@keyframes apkPmfFlashKf {
  0% { background: transparent; }
  30% { background: rgba(16, 185, 129, 0.25); }
  100% { background: transparent; }
}
.apk-pmf-flash { animation: apkPmfFlashKf 0.9s ease-out !important; }

@keyframes apkConfettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}
.apk-pmf-confetti {
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  pointer-events: none;
  overflow: hidden;
}
.apk-pmf-confetti-piece {
  position: absolute;
  top: -10px;
  width: 10px;
  height: 14px;
  animation: apkConfettiFall 2.6s ease-out forwards;
  border-radius: 2px;
}


/* ═══ 37. UTILITIES (a11y, skip-link) ═══════════════════════════════════ */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: var(--z-toast);
  padding: 8px 16px;
  background: var(--primary, #2563eb);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}

/* End of v1.3.0-pmf additions */

/* ═══ 38. SIDEBAR-OPEN — hide command bar, page actions, content cleanly ═
   When hamburger is tapped (body.sidebar-open), the entire chrome should
   recede so user focuses on the navigation menu. Backdrop + click-out
   already handled by §20. This section ensures NOTHING peeks through.
   ═══════════════════════════════════════════════════════════════════════ */
body.sidebar-open #command-bar,
body.sidebar-open .command-bar,
body.sidebar-open .apk-page-actions,
body.sidebar-open #apk-page-actions {
  transform: translateY(120%) !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

body.sidebar-open #main-content {
  pointer-events: none !important;
  filter: blur(2px) brightness(0.6) !important;
  transition: filter 0.2s ease;
}

/* Tap-out: clicking the backdrop closes the sidebar */
body.sidebar-open::before {
  cursor: pointer;
  pointer-events: auto;
}

/* Hamburger button gets a clear "open" state */
body.sidebar-open #nav-hamburger-btn {
  color: var(--primary, #2563eb) !important;
}

/* On desktop ≥1025px, sidebar is always open as a side rail — no overlay */
@media (min-width: 1025px) {
  body.sidebar-open #main-content { filter: none !important; pointer-events: auto !important; }
  body.sidebar-open .bottom-panel
   {
    transform: none !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   PMF15 — Subtle action buttons, categorized connectors, minimalist
   chores/notes headers, language-dropdown flicker fix.
   All rules below are additive — no existing selector is overridden destructively.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Subtle primary action button (replaces width:100% blocks) ──────────── */
.apk-action-btn {
  /* JS sets min/max width inline so this is purely the behavioural baseline */
  align-self: center;
  font-family: inherit;
  letter-spacing: .1px;
  transition: background .15s, transform .12s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .25);
}
.apk-action-btn:hover  { background: #1d4ed8 !important; box-shadow: 0 4px 14px rgba(37, 99, 235, .35); }
.apk-action-btn:active { transform: scale(.97); }
.apk-action-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

/* Settings sub-section wide button — cap width on tablet/desktop so it stops
   looking like a full-bleed slab. Mobile keeps near-full width naturally. */
.apk-sub-wide-btn {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

/* ── Minimalist Chores/Notes header actions ─────────────────────────────── */
.apk-hdr-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.apk-hdr-icon-action {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #334155);
  background: var(--bg-secondary, #1e293b);
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
  font-family: inherit;
  padding: 0;
}
.apk-hdr-icon-action:hover {
  background: rgba(37, 99, 235, .08);
  border-color: rgba(37, 99, 235, .35);
  color: var(--primary, #2563eb);
}
.apk-hdr-icon-action:active { transform: scale(.94); }
.apk-hdr-icon-action--primary {
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
  color: #fff;
}
.apk-hdr-icon-action--primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

/* ── Connectors — categorized card layout ───────────────────────────────── */
.apk-conn-cat { margin-bottom: 22px; }
.apk-conn-cat:last-of-type { margin-bottom: 8px; }
.apk-conn-cat-head { margin-bottom: 10px; }
.apk-conn-cat-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary, #64748b);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.apk-conn-cat-sub {
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  margin-top: 3px;
  line-height: 1.4;
}
.apk-conn-cat-list { display: flex; flex-direction: column; gap: 8px; }
.apk-conn-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-secondary, #1e293b);
  border: 1px solid var(--border, #334155);
  transition: border-color .15s, background .15s;
}
.apk-conn-card:hover { border-color: rgba(37, 99, 235, .35); }
.apk-conn-card.is-coming { opacity: .65; }
.apk-conn-card.is-coming:hover { border-color: var(--border, #334155); }
.apk-conn-card-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.apk-conn-card-body { flex: 1; min-width: 0; }
.apk-conn-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #f1f5f9);
  display: flex;
  align-items: center;
  gap: 6px;
}
.apk-conn-card-desc {
  font-size: 11px;
  color: var(--text-secondary, #94a3b8);
  margin-top: 2px;
  line-height: 1.4;
}
.apk-conn-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, .25);
  display: inline-block;
}
.apk-conn-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--primary, #2563eb);
  background: transparent;
  color: var(--primary, #2563eb);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.apk-conn-btn:hover { background: rgba(37, 99, 235, .1); }
.apk-conn-btn--on {
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .35);
  color: #10b981;
}
.apk-conn-btn--on:hover { background: rgba(16, 185, 129, .18); }
.apk-conn-btn--soon {
  background: transparent;
  border-color: var(--border, #334155);
  color: var(--text-tertiary, #64748b);
  cursor: not-allowed;
}
.apk-conn-btn--soon:hover { background: transparent; }

/* ── Language dropdown — no-flicker on click ─────────────────────────────── */
/* Root cause of the flicker: app.css declares `select:focus` four times
   (lines ~5568, 5590, 5606) and swaps the chevron `background-image` with
   `!important` on focus. Mobile browsers also briefly fire :active when the
   native picker opens. Result: chevron color + box-shadow + border bounce in
   one frame. Fix: keep ONE chevron in default/focus/active, no transition on
   `background-image`, and pin the focus shadow so it doesn't pop. */
#prof-lang,
.apk-sett-sub select.form-control,
.apk-sett-sub #prof-lang {
  transition: border-color .15s, color .15s !important; /* no bg/image */
  background-color: var(--bg-tertiary, #334155) !important;
  /* Single grey chevron — used in all states, no swap on 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='%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") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px !important;
  padding-right: 32px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
#prof-lang:focus,
#prof-lang:active,
.apk-sett-sub select.form-control:focus,
.apk-sett-sub select.form-control:active {
  /* Same chevron in focus/active — kills the swap-flicker */
  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") !important;
  border-color: var(--primary, #2563eb) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .15) !important;
  outline: none !important;
}
/* The native picker can briefly trigger :hover transitions on touch — kill them */
@media (hover: none) {
  #prof-lang:hover,
  .apk-sett-sub select.form-control:hover { background-color: var(--bg-tertiary, #334155) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PMF16 — sticky calendar strip + taller chat box
   ═══════════════════════════════════════════════════════════════════════════ */

/* 4. Calendar strip sticky at top of its scroll container so the user can pick
   a date for contextual info at any scroll position. z-index sits above message
   content but below modals/overlays (which are 12000+). */
#apk-cal-widget.apk-cal-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-primary, #0f172a);
  /* subtle fade so messages scrolling under it don't look clipped */
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .6);
  margin-bottom: 4px;
  padding-top: 6px !important;
  /* full-bleed within padded container */
  padding-left: 2px;
  padding-right: 2px;
}

/* 5. Bot conversation box: now that page-actions strip is gone (replaced by FAB)
   and headers are leaner, give the chat real vertical room so it reads like a
   conversation, not a cramped widget. Applied via body.apk-tall-chat. */
body.apk-tall-chat .conversation-messages {
  min-height: 60vh;
}
@media (max-width: 640px) {
  body.apk-tall-chat .conversation-messages {
    /* Fill the viewport between header and command bar; fixed chrome ≈ 210px */
    min-height: calc(100vh - 210px);
  }
}
/* When there are no messages yet, don't force a huge empty box — let the
   welcome/persona cards sit naturally. */
body.apk-tall-chat:not(.has-messages) .conversation-messages {
  min-height: 120px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PMF17 — Home top-bar (compact icons, frees vertical for chat)
   ═══════════════════════════════════════════════════════════════════════════ */
.apk-home-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 0 8px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border, #334155);
  position: sticky; top: 0; z-index: 40;
}
.apk-topbar-spacer { flex: 1; }
.apk-topbar-icon {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--bg-tertiary, #334155);
  color: var(--text-secondary, #94a3b8);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.apk-topbar-icon:hover {
  background: rgba(37, 99, 235, .12);
  color: var(--primary, #2563eb);
  border-color: rgba(37, 99, 235, .35);
}
.apk-topbar-icon:active { transform: scale(.94); }
.apk-topbar-icon .material-symbols-outlined { font-size: 19px; pointer-events: none; }
.apk-topbar-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 2px var(--bg-secondary, #1e293b);
}
.apk-topbar-score {
  position: absolute; bottom: -2px; right: -2px;
  font-size: 9px; font-weight: 800;
  padding: 1px 4px; border-radius: 6px;
  background: var(--primary, #2563eb);
  color: #fff;
  line-height: 1.2;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PMF21 — Chat experience: followups, edit affordance
   ═══════════════════════════════════════════════════════════════════════════ */
.apk-followup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, rgba(255,255,255,.08));
}
.apk-followup-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  background: var(--bg-tertiary, #162032);
  color: var(--text-secondary, #94a3b8);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.apk-followup-chip:hover {
  background: rgba(37, 99, 235, .12);
  color: var(--primary, #2563eb);
  border-color: rgba(37, 99, 235, .35);
}
.apk-followup-chip:active { transform: scale(.96); }

.user-message, .message.user { position: relative; }
.apk-edit-user-btn {
  position: absolute;
  top: 50%;
  left: -36px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  background: var(--bg-tertiary, #162032);
  color: var(--text-secondary, #94a3b8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
  padding: 0;
}
.user-message:hover .apk-edit-user-btn,
.message.user:hover .apk-edit-user-btn { opacity: 1; }
.apk-edit-user-btn:hover {
  background: rgba(37, 99, 235, .12);
  color: var(--primary, #2563eb);
}
@media (max-width: 640px) {
  .apk-edit-user-btn { opacity: 1; left: -32px; width: 22px; height: 22px; }
}

/* ═══ r132: DESKTOP CENTERING — bottom-sheets become centered dialogs on wide screens ═══════
   On mobile (≤640px) these remain bottom-sheets (align-items:flex-end + slide-up animation).
   On desktop (≥641px) they center like standard modals — the bottom-sheet UX only makes sense
   for touch interfaces where the thumb reaches the bottom. Agent Talk and Add Home are forms
   that need full height and centered presentation on desktop.
   QuickAdd and PageFeedback remain bottom-sheet even on desktop (they are truly 1-step
   quick-action sheets per CLAUDE.md Module Registry #5, #7).               ═══════════════ */
@media (min-width: 641px) {
  #apk-agent-talk-modal,
  .apk-addhome-modal,
  .apk-attach-sheet {
    align-items: center;
  }
  .apk-talk-card,
  .apk-addhome-card,
  .apk-attach-card {
    border-radius: 20px;
    max-height: 85dvh;
    margin-bottom: 0;
  }
}


/* ═══ r132: DESKTOP CENTERING — bottom-sheets become centered dialogs on wide screens ═══════
   On mobile (<=640px) these remain bottom-sheets (align-items:flex-end + slide-up animation).
   On desktop (>=641px) they center like standard modals — the bottom-sheet UX only makes sense
   for touch interfaces where the thumb reaches the bottom. Agent Talk and Add Home are forms
   that need full height and centered presentation on desktop.
   QuickAdd and PageFeedback remain bottom-sheet even on desktop (they are truly 1-step
   quick-action sheets per CLAUDE.md Module Registry #5, #7).               ═══════════════ */
@media (min-width: 641px) {
  #apk-agent-talk-modal,
  .apk-addhome-modal,
  .apk-attach-sheet {
    align-items: center;
  }
  .apk-talk-card,
  .apk-addhome-card,
  .apk-attach-card {
    border-radius: 20px;
    max-height: 85dvh;
    margin-bottom: 0;
  }
}